Generated Tokens

ColorX generates 15 design tokens per theme (light and dark).

Token	Purpose	Contrast Target
background	Page-level background	--
surface	Cards, modals, dropdowns	--
surfaceAlt	Alternate surface for visual separation	--
primary	Brand color, contrast-adjusted	AA (4.5:1) vs background
primaryHover	Hover/focus state variant	--
primaryText	Text on primary background	AA (4.5:1) vs primary
text	Primary body text	AAA (7:1) vs background
textSecondary	Descriptions, subtitles	AA (4.5:1) vs background
textMuted	Timestamps, captions, placeholders	AA Large (3:1) vs background
border	Default borders, dividers, outlines	--
borderLight	Subtle borders for cards	--
success	Positive/confirmation states	AA Large (3:1) vs background
warning	Caution/alert states	AA Large (3:1) vs background
error	Destructive/error states	AA Large (3:1) vs background
info	Informational highlights	AA Large (3:1) vs background

How Tokens Are Generated

1. Input hex is converted to HSL
2. Each token is derived by adjusting hue, saturation, and lightness
3. Every text/background pair is checked against its target WCAG contrast ratio
4. Colors that fail are iteratively adjusted along their lightness axis (2% increments) until they pass
5. Semantic colors (success, warning, error, info) use fixed hues with contrast enforcement

CSS Output

Tokens are output as CSS custom properties with support for:

• :root (light theme default)
• @media (prefers-color-scheme: dark) (automatic dark theme)
• [data-theme="light"] and [data-theme="dark"] (manual toggle)