Colours
DAVE uses a 12-step primitive scale for each colour family, with semantic aliases that map to specific stops. Override the primitives to theme the entire system.
Primitive scales
Neutral
1
Background
2
Surface
3
Hover
4
Border
5
6
Border strong
7
8
Subdued text
9
Secondary text
10
11
12
Foreground
Accent (Indigo)
1
2
Subtle bg
3
4
5
6
7
Border
8
9
Solid
10
Hover
11
Text
12
Success (Green)
1
Subtle bg
2
3
Border
9
Solid
10
Hover
11
Text
Warning (Amber)
1
Subtle bg
2
3
Border
9
Solid
10
Hover
11
Text
Error (Red)
1
Subtle bg
2
3
Border
9
Solid
10
Hover
11
Text
Semantic tokens
Components use these tokens, not the primitive scale directly. Override primitives and semantics update automatically.
| Token | Value | Description | |
|---|---|---|---|
| Base | |||
| --color-background | var(--neutral-1) | Page background | |
| --color-surface | var(--neutral-2) | Subtle fill, inputs | |
| --color-surface-hovered | var(--neutral-3) | Hover and highlight fill | |
| --color-card | oklch(100% 0 0) | Card and dialog backgrounds | |
| --color-foreground | var(--neutral-12) | Primary text | |
| --color-foreground-secondary | var(--neutral-9) | Secondary and placeholder text | |
| --color-foreground-subdued | var(--neutral-8) | Muted hint text | |
| --color-border | var(--neutral-4) | Default border | |
| --color-border-strong | var(--neutral-6) | Focused or prominent border | |
| Accent | |||
| --color-accent | var(--accent-9) | Solid accent — buttons, focus | |
| --color-accent-hover | var(--accent-10) | Hovered accent solid | |
| --color-accent-subtle | var(--accent-2) | Accent tinted background | |
| --color-accent-subtle-border | var(--accent-3) | Subtle accent border | |
| --color-accent-border | var(--accent-7) | Accent border and focus rings | |
| --color-accent-foreground | var(--accent-11) | Accent text on tinted background | |
| Success | |||
| --color-success | var(--green-9) | Success solid | |
| --color-success-subtle | var(--green-1) | Success background | |
| --color-success-border | var(--green-3) | Success border | |
| --color-success-foreground | var(--green-11) | Success text | |
| Warning | |||
| --color-warning | var(--amber-9) | Warning solid | |
| --color-warning-subtle | var(--amber-1) | Warning background | |
| --color-warning-border | var(--amber-3) | Warning border | |
| --color-warning-foreground | var(--amber-11) | Warning text | |
| Error | |||
| --color-error | var(--red-9) | Error solid | |
| --color-error-hover | var(--red-10) | Hovered error solid | |
| --color-error-subtle | var(--red-1) | Error background | |
| --color-error-border | var(--red-3) | Error border | |
| --color-error-foreground | var(--red-11) | Error text | |