# `presets/themes/`

Theme presets are **token overlays** — they swap CSS custom properties consumed by both Angular and React UI packages. Switching themes never requires rewriting components.

| Preset             | Status | Aesthetic                                                          |
| ------------------ | ------ | ------------------------------------------------------------------ |
| `premium-theme`    | stable | Refined neutrals, deep accent, generous whitespace, glass surfaces |
| `fintech-theme`    | stub   | High-contrast, data-dense, chart-friendly palette                  |
| `enterprise-theme` | stub   | Conservative, accessible, corporate neutrals                       |
| `glass-theme`      | stub   | Heavy glassmorphism + saturated accent                             |

## How themes work

1. Tokens (JSON) live in `tokens/` per theme.
2. `packages/design-tokens/` builds them into CSS variables, Tailwind preset, and TS const exports (Phase 3).
3. Components in `packages/ui-angular/` + `packages/ui-react/` reference variables only — never hard-coded values.
4. Switching themes = swap the active token bundle. Dark mode is itself just a token swap.

## Rules

- No hex codes in components.
- No magic numbers for spacing/typography.
- Light + dark variants are mandatory for every palette entry.
- WCAG 2.2 AA contrast checked for every text-on-background pair.
