Skip to main content

Module emit

Module emit 

Source
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:

  1. 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.

  2. 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 resolved ThemeTokens; the slate scaffold (--rio-surface-*, --rio-text-*, --rio-border-soft, --rio-border-strong) is brand-agnostic by design — mirrors the live colors.css so a brand swap does not move the chrome ladder out from under existing components.

Functions§

emit
Render a drop-in tokens.css from a fully resolved ThemeTokens.