theminglisted

# Theming A theme system keeps component roles stable while modes remap values. Components reference semantic tokens such as `--color-bg`, `--color-text`, and `--color-focus`; measure every mode before claiming accessibility. Dark is not inverted light; authored high contrast is not forced colors. ## The decision order 1. **Semantic tokens first.** Define roles (`--color-bg`, `--color-surface-1/2` (`-3` if elevation needs it), `--color-text`, `--color-text-muted`, `--color-border`, `--color-primary`, `--color-primary-hover`, `--color-primary-ink`, `--color-accent`, `--color-accent-ink`, `--color-success`, `--color-error`, `--color-warning`, `--color-info`, `--color-focus` — canonical contract names). Components use these only; palette comes from `color-system`. 2. **Choose the product baseline.** Start with the default supported mode; set structure and role relationships there. 3. **Tune every additional mapping**, never invert it. For dark, use a lighter-per-level surface *ramp*, comfortable text contrast, and retuned accents. See `references/surfaces-and-elevation.md` and `color-and-contrast.md`. 4. **Separate authored contrast from forced colors.** `prefers-contrast: more` may select a higher-contrast mapping; `forced-colors` is system-controlled, so honor its colors. 5. **Resolve preferences deliberately.** Use `prefers-color-scheme`, persist selectable themes, and set `color-scheme` so native controls follow. 6. **Verify each theme** on it