--- name: xios-theme description: Create or adjust an XIOS theme (a theme XML file in gui/themes - color seeds, design tokens, a dark variant, the error, warning and success colors and their contrast) or tune components in an app's CSS with --xc-* variables. Use only when asked for theme, color, palette, dark-mode or design-token work; not for building ordinary views and processes (xios-views, xios-process). --- # XIOS themes A theme sets colors and design tokens; the components read them as CSS variables, `--xios-color-` and `--xios-`. Two places to work: - the theme file: color seeds, token knobs, a dark variant, registration, preview - [theme-xml.md](theme-xml.md) - an app's CSS: the `--xc--*` knobs, reading the tokens - [app-css.md](app-css.md) Read the files you will need in one go, at the start. The token names and their defaults are in `gui/css/tokens.css`; look a name up there, never guess one. - Set only the seeds and knobs. Hover, outline, surface-variant and selected colors derive from the seeds in `tokens.css`: never set them. - Never invent a `--xios-*` name: `node tools/check-token-contract.mjs` fails on an unknown one read in CSS (not on color names or `` elements). The tuning layer per component is `--xc--*`. - The theme sets error, warning and success, and their contrast is the theme's choice: check it. A state color against `surface` needs 3:1 (it draws field borders), text 4.5:1 (`on-surface` on `surface` and `background`, each `on-` on its role). Use Theme Studio's Contrast readout (`apps/themestudio`) or compute the WCAG ratio; bright yellows and ambers fail 3:1 on white. Captions and inactive tabs use the derived `on-surface-variant`, about 3.5:1 on white: a darker `on-surface` raises it. - `look` is legacy except in a theme's own `` mapping. Never `look=` in app markup, and no `bgcolor`, `color`, `bold` or `size` attributes. - Before you finish: `node tools/check-token-contract.mjs`, and look at the Core specimens under the theme (theme-xml.md, Preview).