Colors
Color Step Ranges (12-Step Framework)
App background and subtle component fills.
Normal / hover / active backgrounds for interactive elements.
Subtle to pronounced borders, from a hairline to a focus outline.
The color's "brand" moment — solid buttons, badges, indicators.
Low- and high-contrast text on the app background.
Gray families — real values (this package's actual --n-* scale per family)
These don't change with the Appearance toggle, on purpose: this package's foundation scale is theme-independent (see design-system/AGENTS.md) — light/dark differs in which semantic ROLE picks which step (e.g. bg-canvas = step 50 in light, step 1000/black in dark), not in the swatch values themselves.
Accent colors — generated illustration, light mode
Unlike the grays above, this package only stores ONE hex per accent (see the Configurator's swatch grid) — not a real 12-step scale per theme the way Radix's own colors ship. These rows are generated from that single hue via HSL lightness interpolation (a different curve per theme, which IS how Radix's real scales work) to show what applying the same framework would look like; they're illustrative, not perceptually tuned. Toggle Appearance in the Configurator to see it flip.
Semantic tokens — what components actually consume
--bg-canvas--bg-surface--bg-surface-hover--bg-elevated--hairline--hairline-strong--fg--fg-muted--fg-subtle--link--accent--accent-hover--accent-fg--accent-contrast--accent-text--accent-subtle--accent-subtle-hover--success--warning--dangerShadows, highlights, and overlays
Smart Accent Semantics & Dynamic Luminance Engine
In traditional component libraries, switching an accent color to a high-luminance hue (like Lime, Mint, Amber, or Sky) severely breaks text readability on light surfaces, while selecting dark monochrome colors causes text to vanish in dark mode. @shavin/ui solves this with an integrated, mathematical Dynamic Luminance Engine that guarantees WCAG 2.1 AAA contrast compliance across all 24 presets in both themes.
Evaluates exact linear RGB coefficients per WCAG spec:L = 0.2126R + 0.7152G + 0.0722B
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.
Monochrome black (0 0 0) seamlessly inverts to pure white (255 255 255) in dark mode, maintaining pristine brand contrast without manual theme configuration.