# Design tokens

> The colors, spacing, radii, control sizes and page measures every component is built from, read straight from tokens.css.

## How to use them

Read tokens with `var()` in your own styles, and prefer the role over the raw value. A surface
should use `--surface-color`, not `--white-color`, so it turns dark with the theme:

```css
.my-card {
  padding: var(--spacing-8);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-color);
  color: var(--theme-text-color);
}
```

To change a value for the whole app, redefine it after the stylesheet. Your CSS sits outside the
library's cascade layers, so it wins:

```css
:root {
  --radius-md: 0.5rem;
}
```

## Color roles

Green marks primary actions and selection. Orange is a brand accent for details such as link
underlines and featured borders. Errors, warnings and successes each have their own foreground and
background, tuned per theme.

| Role           | Tokens                                                                                                                | Use for                                              |
| -------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| Canvas         | `--theme-bg-color`                                                                                                    | The page background                                  |
| Surface        | `--surface-color`                                                                                                     | Panels, cards and fields                             |
| Raised surface | `--surface-raised-color`                                                                                              | Featured panels and banners, with `--shadow-sm`      |
| Interaction    | `--surface-hover-color`, `--surface-sunken-color`                                                                     | Neutral hover and pressed states                     |
| Selection      | `--selected-bg-color`, `--primary-text-color`                                                                         | Selected filters, page numbers, radio cards          |
| Feedback       | `--error-color`, `--error-bg-color`, `--success-color`, `--success-bg-color`, `--warning-color`, `--warning-bg-color` | Validation and status messages                       |
| Boundaries     | `--control-border-color`, `--focus-color`, `--border-color`                                                           | Control borders, keyboard focus, and subtle dividers |

Glass tokens (`--glass-bg`, `--glass-blur`) are for overlays such as the navigation bar. Content
surfaces stay opaque, so their contrast holds over images and decorative backgrounds.

## Every token

### Brand colors

| Token | HSL | Hex |
| --- | --- | --- |
| `--primary-color` | hsl(143 64% 24%) | #166434 |
| `--primary-color-alpha-12` | hsl(143 64% 24% / 0.12) | #1664341F |
| `--on-primary-color` | hsl(0 0% 100%) | #FFFFFF |
| `--accent-color` | hsl(23 98% 46%) | #E85A02 |
| `--on-accent-color` | hsl(0 0% 0%) | #000000 |
| `--dark-color` | hsl(214 45% 7%) | #0A111A |
| `--dark-color-alpha-05` | hsl(214 45% 7% / 0.05) | #0A111A0D |
| `--dark-color-alpha-10` | hsl(214 45% 7% / 0.1) | #0A111A1A |
| `--dark-color-alpha-20` | hsl(214 45% 7% / 0.2) | #0A111A33 |
| `--dark-color-lighten-30` | hsl(214 45% 30%) | #2A486F |
| `--gray-color` | hsl(0 0% 80%) | #CCCCCC |
| `--dark-gray-color` | hsl(0 0% 46%) | #757575 |
| `--white-color` | hsl(0 0% 100%) | #FFFFFF |
| `--white-color-alpha-05` | hsl(0 0% 100% / 0.05) | #FFFFFF0D |
| `--white-color-alpha-15` | hsl(0 0% 100% / 0.15) | #FFFFFF26 |
| `--white-color-alpha-20` | hsl(0 0% 100% / 0.2) | #FFFFFF33 |
| `--white-color-darken-30` | hsl(0 0% 70%) | #B3B3B3 |

### Theme colors

| Token | Light | Dark |
| --- | --- | --- |
| `--theme-bg-color` | hsl(0 0% 98%) (#FAFAFA) | hsl(0 0% 6%) (#0F0F0F) |
| `--theme-text-color` | hsl(0 0% 10%) (#1A1A1A) | hsl(0 0% 96%) (#F5F5F5) |
| `--text-color` | hsl(0 0% 10%) (#1A1A1A) | hsl(0 0% 96%) (#F5F5F5) |
| `--primary-text-color` | hsl(143 64% 24%) (#166434) | hsl(143 58% 44%) (#2FB161) |
| `--text-color-light` | hsl(0 0% 40%) (#666666) | hsl(0 0% 60%) (#999999) |
| `--code-bg` | hsl(0 0% 90%) (#E6E6E6) | hsl(0 0% 10%) (#1A1A1A) |
| `--border-color` | hsl(0 0% 84%) (#D6D6D6) | hsl(0 0% 25%) (#404040) |
| `--surface-color` | hsl(0 0% 100%) (#FFFFFF) | hsl(0 0% 10%) (#1A1A1A) |
| `--surface-raised-color` | hsl(0 0% 100%) (#FFFFFF) | hsl(0 0% 14%) (#242424) |
| `--surface-sunken-color` | hsl(0 0% 96%) (#F5F5F5) | hsl(0 0% 8%) (#141414) |
| `--surface-hover-color` | hsl(0 0% 94%) (#F0F0F0) | hsl(0 0% 18%) (#2E2E2E) |
| `--control-border-color` | hsl(0 0% 46%) (#757575) | hsl(0 0% 55%) (#8C8C8C) |
| `--focus-color` | hsl(143 64% 24%) (#166434) | hsl(143 58% 60%) (#5ED48B) |
| `--primary-hover-color` | hsl(143 64% 20%) (#12542B) | hsl(143 64% 28%) (#1A753D) |
| `--primary-pressed-color` | hsl(143 64% 16%) (#0F4323) | hsl(143 64% 20%) (#12542B) |
| `--selected-bg-color` | hsl(143 35% 94%) (#EAF5EE) | hsl(143 24% 16%) (#1F3327) |
| `--selected-hover-bg-color` | hsl(143 35% 90%) (#DDEEE3) | hsl(143 24% 13%) (#19291F) |
| `--selected-pressed-bg-color` | hsl(143 35% 86%) (#CFE8D8) | hsl(143 24% 10%) (#132018) |
| `--success-color` | hsl(143 64% 24%) (#166434) | hsl(143 58% 65%) (#72DA9A) |
| `--success-bg-color` | hsl(143 35% 94%) (#EAF5EE) | hsl(143 24% 13%) (#19291F) |
| `--error-color` | hsl(0 65% 38%) (#A02222) | hsl(0 80% 76%) (#F39191) |
| `--error-bg-color` | hsl(0 70% 97%) (#FDF2F2) | hsl(0 30% 13%) (#2B1717) |
| `--warning-color` | hsl(35 90% 28%) (#885207) | hsl(40 85% 70%) (#F4C871) |
| `--warning-bg-color` | hsl(42 90% 94%) (#FDF5E2) | hsl(35 35% 13%) (#2D2316) |
| `--glass-bg` | hsl(0 0% 100% / 0.2) (#FFFFFF33) | hsl(0 0% 0% / 0.2) (#00000033) |
| `--glass-shadow` | hsl(0 0% 0% / 0.1) (#0000001A) | hsl(0 0% 0% / 0.1) (#0000001A) |