Resolve "Use semantic tokens in app/assets/stylesheets/components/avatar.scss"

What does this MR do and why?

Uses semantic tokens instead of fixed value tokens in avatar sass file

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

How to set up and validate locally

1. Start with the GDK on the master branch of gitlab
2. In the GDK, change the avatar of a user who is not allowed to merge in a project to a transparent png (so that you can see the background and inset shadow of their avatar. I used this transparent png.
3. Visit an MR in a project where that user is not allowed to merge and add that use as an assignee or reviewer
4. Look at the user's avatar and hover over the avatar to get their profile popover
5. Check out this branch and refresh the page after ensuring that the GDK is functioning normally (you may need to yarn install or run db migrations)
6. Look at that user's avatar again. You should not see any significant visual difference in their avatar or their profile popover. The avatar's border color will be very slightly different, but in a way that is not readily apparent without close scrutiny.

Related to #472683, #452231