refactor(components): Update Avatar design

[taylorvnoj]

Motivations

Updates the Avatar component to use new semantic color tokens (also introduced in this PR), adds a hover state with shadow and transition, and updates initials.

Changes

Added

Design tokens

New: --color-interactive--subtle--reverse and --color-interactive--subtle--reverse--hover

Changed

1. Default avatar background

• Before: --color-base-blue--600
• After: --color-interactive--subtle--reverse (new token)
• Light mode: blue-300 (lighter background)
• Dark mode: blue-800 (darker background)
• New tokens added to semanticColor.tokens.json and dark.tokens.json.

2. Hover styling

• Added .avatar:hover with box shadow and --color-interactive--subtle--reverse--hover background.
• Added transition for smoother hover/focus states.

3. shouldBeDark and when we use white text

• New logic: shouldBeDark = color != undefined && isDark(color)
• isDark is now applied only when:
  • A custom color is passed, and
  • That color is dark (isDark(color)).
• Default avatar (no color): Does not get isDark → text/icon use --color-text (theme-aware).
• Custom dark color (e.g. black, dark green): Gets isDark → text/icon are white for contrast.

4. Text and icon colors

• Initials: .initials uses color: var(--color-text) (theme-aware). .isDark .initials overrides to var(--color-base-white) when the background is a custom dark color.
• Fallback person icon: Replaced dark prop with iconColor. Defaults to "text" (maps to --color-text). Set to "white" when color && shouldBeDark, so the icon matches initials on custom dark backgrounds.

5. Initials sizing
   Introduced --avatar-initials-size (base: typography--fontSize-smallwdd, with overrides for large/small sizes).
   Replaced calc-based font sizes with this token for consistency.

Testing

• In docs/Storybook, check With Tooltip avatars in light and dark theme; confirm hover shows the darker background and shadow with a quick transition (reverse in dark mode), and that initials use the correct color-text
• In packages/design, run npm run generate:tokenCSS and confirm dist/foundation.css and dist/dark.mode.css include the new --color-interactive--subtle--reverse and `--color-interactive--subtle--reverse--hover variables

Changes can be
tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages]

Deploying atlantis with    Cloudflare Pages

Latest commit:	1bb4a63
Status:	✅  Deploy successful!
Preview URL:	https://8301a174.atlantis.pages.dev
Branch Preview URL:	https://job-142335-job-151124-avatar.atlantis.pages.dev

View logs

[taylorvnoj]

Here's some examples of light/dark mode on this branch:

There are still some less than ideal configurations when using the color prop, however as discussed with design, initial text color and avatar color can be overwritten via UNSAFE_ props if needed.

[taylorvnoj]

We don't really surface indigo that much - just thought this looks more cohesive using green

[taylorvnoj]

closing in favour of #2909