Avatar component has higher contrast than AvatarStack

[camchenry]

Description

I recently removed some code in our project that changed the way in which we render avatars and noticed an inconsistency between the border contrast of the Avatar and AvatarStack component.

Before, when only a single user value was being rendered, we would show the Avatar component. Then, when multiple users were being rendered, we would render the AvatarStack plus Avatar component. Now, for consistency, I switched it to rendering the AvatarStack and Avatar component regardless of how many users are being shown.

This made me notice that the Avatar component has a border which contrasts and changes with the current theme, while the AvatarStack component does not (even in the case of just a single avatar).

Here is a comparison (zoomed in for clarity):

• Avatar (one user, dark high contrast theme):

  

• AvatarStack (one user, dark high contrast theme)

  

• AvatarStack (multiple users, dark high contrast theme)

  

When rendering a single Avatar, there is a high contrast border around it. However, if you wrap that inside of a AvatarStack, the border disappears. Then, if you add multiple avatars, you can see that the avatar closest to the front has a box shadow/border around it, while the remaining avatars have no contrast between them (they blend together with opacity).

I wouldn't consider this a bug necessarily, but it seemed slightly inconsistent. It would seem to me that if it's worth adding a contrast border for a single avatar, we should consider doing the same for AvatarStack. This is also not an urgent request in any way.

Steps to reproduce

1. Go to the Storybook for Avatar / AvatarStack
2. Observe that the Avatar component has higher contrast border than the AvatarStack in high contrast themes

Version

v35.29.0

Browser

No response