250127 - Avatar Component - Enhancement

[ratinsl]

Description

We have a couple of specs for the avatar that we'd like to get updated to align with enhanced DS Avatar guidance:

[Custom/Image avatar scrim]
We noticed our custom/image avatar does not have our radial image scrim applied to it by default. We'd like to add this to match how we treat images on item tiles across the site to help maintain a clear visual outline, even when extreme or unexpected cropping occurs or when a white background is used.

[Custom/Image avatar cropping behavior]
We also have new image sizing behavior to help enhance image cropping within the avatar component:

1. - Image cropping (square and 4:3)

• Square, 4:3, and aspect ratios in between are set to "fill." These dimensions allow images to fully occupy the avatar’s shape with minimal cropping of the original content.

2. Image cropping (below 4:3)

• Crops narrower than a 4:3 aspect ratio, such as 16:9 or more extreme formats, are adjusted to “fit.” This ensures that logos and other important areas of an image are not inadvertently cut off.

[Default avatar text centering]
The letters inside of the colorful default avatar look to be ever-so-slightly higher than optical center of the circle. It may be because of the baseline of Market sans. Can we adjust this to achieve "optical vertical center"?

If you have any questions, please let us know!

Best,
Ryan

Screenshots

Figma link

No response

Engineering pre-requisites

• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).