theme_from_tokens
Build a validated cia theme.css from design-tokens JSON (DTCG, Tokens Studio, or flat map). Auto-detects format, inherits missing tokens, supports dark mode, returns CSS with validation and report.
Instructions
Build a complete, validated cia theme.css from a design-tokens JSON — DTCG v2025.10 ({ $value, $type }, {aliases} resolved), a Tokens Studio for Figma export ({ value, type }, single or multi-set), or a flat { "--token": value } map. Format is auto-detected. Every REQUIRED contract token the file does not supply is inherited from a shipped base theme (default boilerplate) and listed in report.inherited, so the output is always contract-complete; unmapped paths are emitted verbatim and listed in report.unmapped, never dropped. Pass dark (same format) or a single file with paired color-light/color-dark groups to get light-dark() values. Returns { css, report, validation } — validation is the same result validate_theme gives, run on the CSS before you write it anywhere. Needs css-is-awesome >= 1.17.0 installed.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| base | No | Shipped theme that supplies missing required tokens. Default boilerplate. | |
| dark | No | Optional dark-mode tokens (same format) → light-dark() values. | |
| mode | No | Single-mode color-scheme when there is no dark side. Default light. | |
| name | Yes | Theme name — kebab-case slug, becomes [data-theme="<name>"]. | |
| format | No | Default auto. | |
| tokens | Yes | The tokens JSON (object, or a JSON string). | |
| validate | No | Run the validator + WCAG audit (default true). |