<!-- Auto-generated by `velinstyle docs generate`. Do not edit. Source: src/tokens/color.css -->

# Tokens: color

Source: `src/tokens/color.css`

| Token | Value |
| --- | --- |
| `--velin-color-border` | `oklch(35% 0.01 250)` |
| `--velin-color-border` | `oklch(30% 0.01 250)` |
| `--velin-color-border` | `oklch(30% 0.01 250)` |
| `--velin-color-border-strong` | `oklch(20% 0.01 250)` |
| `--velin-color-border-strong` | `oklch(45% 0.01 250)` |
| `--velin-color-border-strong` | `oklch(45% 0.01 250)` |
| `--velin-color-danger` | `oklch(55% 0.2 25)` |
| `--velin-color-danger` | `oklch(52% 0.16 25)` |
| `--velin-color-danger` | `oklch(52% 0.16 25)` |
| `--velin-color-danger-hover` | `oklch(48% 0.2 25)` |
| `--velin-color-danger-hover` | `oklch(58% 0.16 25)` |
| `--velin-color-danger-hover` | `oklch(76% 0.16 25)` |
| `--velin-color-danger-subtle` | `oklch(92% 0.04 25)` |
| `--velin-color-danger-subtle` | `oklch(25% 0.06 25)` |
| `--velin-color-danger-subtle` | `oklch(25% 0.06 25)` |
| `--velin-color-danger-text` | `oklch(40% 0.2 25)` |
| `--velin-color-danger-text` | `oklch(82% 0.16 25)` |
| `--velin-color-danger-text` | `oklch(82% 0.16 25)` |
| `--velin-color-focus` | `oklch(35% 0.22 250)` |
| `--velin-color-focus` | `oklch(72% 0.18 250)` |
| `--velin-color-focus` | `oklch(82% 0.18 250)` |
| `--velin-color-info` | `oklch(60% 0.12 240)` |
| `--velin-color-info` | `oklch(72% 0.1 240)` |
| `--velin-color-info` | `oklch(72% 0.1 240)` |
| `--velin-color-info-subtle` | `oklch(92% 0.04 240)` |
| `--velin-color-info-subtle` | `oklch(25% 0.04 240)` |
| `--velin-color-info-subtle` | `oklch(25% 0.04 240)` |
| `--velin-color-on-danger` | `oklch(100% 0 0)` |
| `--velin-color-on-danger` | `oklch(98% 0 0)` |
| `--velin-color-on-danger` | `oklch(98% 0 0)` |
| `--velin-color-on-info` | `oklch(100% 0 0)` |
| `--velin-color-on-info` | `oklch(10% 0.01 240)` |
| `--velin-color-on-info` | `oklch(98% 0 0)` |
| `--velin-color-on-primary` | `oklch(100% 0 0)` |
| `--velin-color-on-primary` | `oklch(98% 0 0)` |
| `--velin-color-on-primary` | `oklch(98% 0 0)` |
| `--velin-color-on-secondary` | `oklch(100% 0 0)` |
| `--velin-color-on-secondary` | `oklch(10% 0.01 320)` |
| `--velin-color-on-secondary` | `oklch(10% 0.01 320)` |
| `--velin-color-on-success` | `oklch(100% 0 0)` |
| `--velin-color-on-success` | `oklch(10% 0.01 145)` |
| `--velin-color-on-success` | `oklch(10% 0.01 145)` |
| `--velin-color-on-warning` | `oklch(20% 0.02 85)` |
| `--velin-color-on-warning` | `oklch(10% 0.02 85)` |
| `--velin-color-on-warning` | `oklch(10% 0.02 85)` |
| `--velin-color-overlay` | `oklch(0% 0 0 / 0.4)` |
| `--velin-color-overlay` | `oklch(0% 0 0 / 0.6)` |
| `--velin-color-overlay` | `oklch(0% 0 0 / 0.6)` |
| `--velin-color-primary` | `oklch(38% 0.18 250)` |
| `--velin-color-primary` | `oklch(48% 0.14 250)` |
| `--velin-color-primary` | `oklch(48% 0.12 250)` |
| `--velin-color-primary-active` | `oklch(32% 0.18 250)` |
| `--velin-color-primary-active` | `oklch(42% 0.14 250)` |
| `--velin-color-primary-active` | `oklch(42% 0.12 250)` |
| `--velin-color-primary-hover` | `oklch(32% 0.18 250)` |
| `--velin-color-primary-hover` | `oklch(55% 0.14 250)` |
| `--velin-color-primary-hover` | `oklch(55% 0.12 250)` |
| `--velin-color-primary-subtle` | `oklch(92% 0.04 250)` |
| `--velin-color-primary-subtle` | `oklch(25% 0.06 250)` |
| `--velin-color-primary-subtle` | `oklch(25% 0.06 250)` |
| `--velin-color-primary-text` | `oklch(38% 0.18 250)` |
| `--velin-color-primary-text` | `oklch(82% 0.12 250)` |
| `--velin-color-primary-text` | `oklch(82% 0.12 250)` |
| `--velin-color-primary-text` | `oklch(82% 0.12 250)` |
| `--velin-color-secondary` | `oklch(55% 0.12 320)` |
| `--velin-color-secondary` | `oklch(72% 0.1 320)` |
| `--velin-color-secondary` | `oklch(72% 0.1 320)` |
| `--velin-color-secondary-active` | `oklch(42% 0.12 320)` |
| `--velin-color-secondary-active` | `oklch(65% 0.1 320)` |
| `--velin-color-secondary-active` | `oklch(65% 0.1 320)` |
| `--velin-color-secondary-hover` | `oklch(48% 0.12 320)` |
| `--velin-color-secondary-hover` | `oklch(78% 0.1 320)` |
| `--velin-color-secondary-hover` | `oklch(78% 0.1 320)` |
| `--velin-color-secondary-subtle` | `oklch(92% 0.03 320)` |
| `--velin-color-secondary-subtle` | `oklch(25% 0.04 320)` |
| `--velin-color-secondary-subtle` | `oklch(25% 0.04 320)` |
| `--velin-color-success` | `oklch(55% 0.16 145)` |
| `--velin-color-success` | `oklch(72% 0.14 145)` |
| `--velin-color-success` | `oklch(72% 0.14 145)` |
| `--velin-color-success-subtle` | `oklch(92% 0.04 145)` |
| `--velin-color-success-subtle` | `oklch(25% 0.06 145)` |
| `--velin-color-success-subtle` | `oklch(25% 0.06 145)` |
| `--velin-color-success-text` | `oklch(38% 0.16 145)` |
| `--velin-color-success-text` | `oklch(82% 0.14 145)` |
| `--velin-color-success-text` | `oklch(82% 0.14 145)` |
| `--velin-color-surface` | `oklch(98% 0.005 250)` |
| `--velin-color-surface` | `oklch(15% 0.01 250)` |
| `--velin-color-surface` | `oklch(15% 0.01 250)` |
| `--velin-color-surface-bright` | `oklch(100% 0 0)` |
| `--velin-color-surface-bright` | `oklch(22% 0.01 250)` |
| `--velin-color-surface-bright` | `oklch(22% 0.01 250)` |
| `--velin-color-surface-dim` | `oklch(93% 0.005 250)` |
| `--velin-color-surface-dim` | `oklch(10% 0.01 250)` |
| `--velin-color-surface-dim` | `oklch(10% 0.01 250)` |
| `--velin-color-text` | `oklch(8% 0.01 250)` |
| `--velin-color-text` | `oklch(92% 0.005 250)` |
| `--velin-color-text` | `oklch(92% 0.005 250)` |
| `--velin-color-text-muted` | `oklch(28% 0.01 250)` |
| `--velin-color-text-muted` | `oklch(85% 0.005 250)` |
| `--velin-color-text-muted` | `oklch(88% 0.005 250)` |
| `--velin-color-text-subtle` | `oklch(38% 0.005 250)` |
| `--velin-color-text-subtle` | `oklch(72% 0.005 250)` |
| `--velin-color-text-subtle` | `oklch(78% 0.005 250)` |
| `--velin-color-warning` | `oklch(75% 0.15 85)` |
| `--velin-color-warning` | `oklch(80% 0.12 85)` |
| `--velin-color-warning` | `oklch(80% 0.12 85)` |
| `--velin-color-warning-subtle` | `oklch(95% 0.04 85)` |
| `--velin-color-warning-subtle` | `oklch(25% 0.06 85)` |
| `--velin-color-warning-subtle` | `oklch(25% 0.06 85)` |
| `--velin-color-warning-text` | `oklch(42% 0.14 85)` |
| `--velin-color-warning-text` | `oklch(80% 0.12 85)` |
| `--velin-color-warning-text` | `oklch(80% 0.12 85)` |

## Contrast (WCAG 2.2 AAA)

VelinStyle defaults target **7:1** for body text on `--velin-color-surface-bright` and semantic text tokens. CI runs `npm run test:contrast` across `:root`, dark mode, and all 13 theme presets.

For **AA (4.5:1)** body text (migration from pre-0.9 palettes), set `data-velin-contrast="aa"` on `<html>` (see `src/a11y/high-contrast-aaa.css`). AAA remains the default when the attribute is omitted.

See [WCAG 2.2 AAA matrix](../a11y/wcag22-aaa-matrix.md) and [Accessibility guide](../../../docs/a11y.html).