Smart Accent Token System
Smart Accent Token System
Switching to a high-luminance accent (Lime, Mint, Amber) breaks text readability in traditional libraries. @shavin/ui computes a full cluster of WCAG AAA-accessible tokens from relative luminance — automatically, for all 24 presets in both themes.
Live Component Preview
light
BlueBadgecontrast text
dark
BlueBadgecontrast text
1. Mathematical Luminance
Evaluates exact linear RGB coefficients per WCAG spec:L = 0.2126R + 0.7152G + 0.0722B
2. Adaptive Contrast Text
Accents with L > 0.35 in light mode are dynamically darkened for --accent-contrast text, while dark accents in dark mode are complemented to ensure crisp ≥ 4.5:1 text contrast.
3. Achromatic Inversion
Monochrome black (0 0 0) seamlessly inverts to pure white (255 255 255) in dark mode, maintaining pristine brand contrast without manual theme configuration.
Complete Accent Semantic Hierarchy
--accentSolid brand fill for primary buttons, active toggles, and key accents.
--accent-fgContrast-safe foreground (black or white) rendered on top of solid accent fills.
--accent-contrastLuminance-corrected accent tone for text, icons, and glyphs on canvas/surface.
--accent-subtle12% translucent background tint for soft-variant buttons and tags.
Set the accent with ThemeProvider; see Theme System for the full setup.