fix(Avatar): use light-dark() for fallback initials to pass WCAG AA contrast in dark mode

[Abidit]

Summary

Fixes #5279

Avatar's fallback initials (shown when no image is set) used
--color-text-secondary on --color-neutral background, which
fails WCAG AA contrast (4.5:1) in dark mode at 4.27:1.

Fix

Switch to light-dark() so each color mode gets the appropriate
text color:

• Light mode: --color-text-secondary → 5.42:1 ✅ (unchanged)
• Dark mode: --color-text-primary → 7.25:1 ✅ (was 4.27:1 ❌)

This matches the existing convention in useTableStickyColumns.tsx.

Change

One line changed in Avatar.tsx:

- color: colorVars['--color-text-secondary'],
+ color: 'light-dark(var(--color-text-secondary), var(--color-text-primary))',

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 22, 2026 5:28am

[meta-cla]

Hi @Abidit!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[Abhirup0]

Hi @Abidit! Nice catch and thank you for putting up this fix!

Using light-dark() is definitely the right solution here — it fixes the dark mode contrast violation (7.25:1, passing WCAG AA) while keeping the light mode secondary look intact (5.42:1).

Just a few small things that might help get this PR merge-ready:

1. Changeset:
   Astryx requires a changeset for packages that get published so CI can pass (check:changesets). You can add a file like .changeset/avatar-fallback-dark-contrast.md with:

---

'@astryxdesign/core': patch

[fix] Avatar: resolve fallback initials and default icon color via light-dark() to meet WCAG AA contrast in dark mode (#5279)
@Abidit

2. Token variable reference:
   In Avatar.tsx, styles typically use the imported colorVars tokens directly rather than raw CSS strings:

color: `light-dark(${colorVars['--color-text-secondary']}, ${colorVars['--color-text-primary']})`,

3. Regression tests:
   Adding a quick unit test in Avatar.test.tsx checking that fallback initials satisfy WCAG AA contrast in both light and dark modes will help make sure this doesn't regress in the future.

4. (Bonus / Optional) AvatarGroupOverflow:
   packages/core/src/AvatarGroup/AvatarGroupOverflow.tsx (the +N count indicator) uses the exact same --color-neutral background and has the same dark mode text color. Updating it here would make the whole Avatar family fully WCAG AA compliant!

[Abidit]

**Abhirup0 **

Thanks for the detailed review! I've addressed all four points:

1. Changeset added
2. Switched to colorVars token references
3. Added regression tests for both Avatar and AvatarGroupOverflow
4. Fixed AvatarGroupOverflow +N indicator with the same light-dark() approach