Expand description
Serialise ThemeTokens into a tokens.css string.
Output is plain hex — all color-mix() math has already been done
by the engine. A static file is faster than nested color-mix()
at parse time and has zero browser-support risk.
The [data-theme="dark"] block is always emitted even when light
and dark are identical; the structure anticipates the dark
theme’s return (§8).
The output has two sections inside the same :root block:
-
Canonical brand- tokens* — the engine’s primary output per §11 of the implementation brief. These are the names the decision layer reasons in:
--rio-brand-light,-dark,-adaptive,-surface,-accent,-hover,-active,-tint,-text. -
Drop-in compatibility tokens — the names the live admin templates already consume (
--rio-accent*, the surface ladder, the text ladder, the border ladder, semantic backgrounds). Without this block the generated file would not actually drop into the framework’s CSS bundle. Brand-derived tokens (--rio-accent,--rio-accent-hover,--rio-accent-soft,--rio-accent-border,--rio-bg,--rio-border,--rio-info-bg) come from the resolvedThemeTokens; the slate scaffold (--rio-surface-*,--rio-text-*,--rio-border-soft,--rio-border-strong) is brand-agnostic by design — mirrors the livecolors.cssso a brand swap does not move the chrome ladder out from under existing components.
Functions§
- emit
- Render a drop-in
tokens.cssfrom a fully resolvedThemeTokens.