Problem

XDSText (and XDSHeading, which shares the same color type) has no way to render text in the theme's accent text color. The color prop is typed as:

// packages/core/src/theme/types.ts
export type XDSTextColor =
  | 'primary'
  | 'secondary'
  | 'disabled'
  | 'placeholder'
  | 'active'
  | 'inherit';

There's no 'accent' value. The closest option, 'active', maps to --color-accent (the accent surface/base color), not --color-text-accent (the dedicated accent text ink):

// packages/core/src/Text/text.stylex.ts
active: {
  color: colorVars['--color-accent'],
},

These are intentionally different tokens — --color-text-accent is tuned for legible accent-colored text (often a deeper/adjusted accent), while --color-accent is the interactive/base accent. So today there is no first-class, type-safe way to say "make this text the accent text color."

Why it matters

• --color-text-accent exists precisely for accent-colored text, but no component prop exposes it — consumers can't use the design system's own accent-text token through the normal color API.
• The only workaround is an xstyle/inline override hardcoding color: 'var(--color-text-accent)', which bypasses the typed color prop, duplicates token knowledge at call sites, and is easy to get wrong (e.g. reaching for active and silently getting --color-accent instead).
• Accent-colored headings/links/labels are a common need (hero headlines, callouts, emphasized inline text).

Concrete example

Setting a hero headline to the accent text ink currently requires:

const styles = stylex.create({
  accentText: {color: 'var(--color-text-accent)'},
});

<XDSText type="display-3" xstyle={styles.accentText}>Little joys</XDSText>

Desired:

<XDSText type="display-3" color="accent">Little joys</XDSText>
<XDSHeading level={2} color="accent">Section</XDSHeading>

(This came up while theming the docsite theme-showcase hero headline, which had to fall back to an xstyle override for exactly this reason.)

Proposed change

Add an 'accent' value to XDSTextColor that maps to --color-text-accent:

• packages/core/src/theme/types.ts — add 'accent' to the XDSTextColor union.
• packages/core/src/Text/text.stylex.ts — add an accent entry to colorStyles → colorVars['--color-text-accent'].
• XDSText + XDSHeading pick it up automatically (both already accept color?: XDSTextColor).
• Docs: update Text.doc.mjs / Heading.doc.mjs color tables.

Open questions

• Naming: 'accent' (maps to --color-text-accent) reads naturally, but note the existing 'active' already maps to --color-accent. Worth documenting the distinction clearly, or reconsidering whether 'active' should point at --color-text-accent (likely a breaking change — probably keep 'active' as-is and add 'accent').
• Should categorical text colors (--color-text-blue, -green, etc.) also be exposed eventually? Out of scope here, but the same gap exists.

Accessibility

--color-text-accent is the token designed for accent-colored text, so this nudges consumers toward the mode-correct, contrast-tuned value instead of hardcoding --color-accent (which is not guaranteed to meet text-contrast on body surfaces in every theme).

References

• packages/core/src/theme/types.ts — XDSTextColor union (no accent)
• packages/core/src/Text/text.stylex.ts — colorStyles (active → --color-accent)
• packages/core/src/Text/XDSText.tsx / packages/core/src/Heading/XDSHeading.tsx — both use color?: XDSTextColor