# All tokens

> Search every variable, class, variant and keyframe Roadie core ships. Copy the variable or the class.

Every variable, class, variant and keyframe core ships, generated from its CSS on every build.

## Color scales

Step 0 is the page and step 13 the strongest text; dark mode swaps the values and keeps the step numbers. Neutral and accent follow `--accent-hue`. Brand secondary ships as variables only, with no `bg-*` classes.

When to use these: [Colors](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md), [Theming](https://ticketsolutionsptyltd.github.io/roadie/foundations/theming.md).

### Neutral

| Token | Light | Dark, if different | Classes |
| --- | --- | --- | --- |
| `--color-neutral-0` | `var(--color-neutral-light-0)` | `oklch(0.13 0.011 var(--accent-hue))` | `bg-neutral-0` `text-neutral-0` `border-neutral-0` `fill-neutral-0` `stroke-neutral-0` |
| `--color-neutral-1` | `oklch(0.991 0.004 var(--accent-hue))` | `oklch(0.178 0.011 var(--accent-hue))` | `bg-neutral-1` `text-neutral-1` `border-neutral-1` `fill-neutral-1` `stroke-neutral-1` |
| `--color-neutral-2` | `oklch(0.982 0.007 var(--accent-hue))` | `oklch(0.214 0.01 var(--accent-hue))` | `bg-neutral-2` `text-neutral-2` `border-neutral-2` `fill-neutral-2` `stroke-neutral-2` |
| `--color-neutral-3` | `oklch(0.955 0.011 var(--accent-hue))` | `oklch(0.252 0.016 var(--accent-hue))` | `bg-neutral-3` `text-neutral-3` `border-neutral-3` `fill-neutral-3` `stroke-neutral-3` |
| `--color-neutral-4` | `oklch(0.931 0.014 var(--accent-hue))` | `oklch(0.284 0.018 var(--accent-hue))` | `bg-neutral-4` `text-neutral-4` `border-neutral-4` `fill-neutral-4` `stroke-neutral-4` |
| `--color-neutral-5` | `var(--color-neutral-light-5)` | `oklch(0.312 0.022 var(--accent-hue))` | `bg-neutral-5` `text-neutral-5` `border-neutral-5` `fill-neutral-5` `stroke-neutral-5` |
| `--color-neutral-6` | `oklch(0.888 0.022 var(--accent-hue))` | `oklch(0.347 0.025 var(--accent-hue))` | `bg-neutral-6` `text-neutral-6` `border-neutral-6` `fill-neutral-6` `stroke-neutral-6` |
| `--color-neutral-7` | `oklch(0.853 0.028 var(--accent-hue))` | `oklch(0.398 0.031 var(--accent-hue))` | `bg-neutral-7` `text-neutral-7` `border-neutral-7` `fill-neutral-7` `stroke-neutral-7` |
| `--color-neutral-8` | `oklch(0.794 0.038 var(--accent-hue))` | `oklch(0.489 0.041 var(--accent-hue))` | `bg-neutral-8` `text-neutral-8` `border-neutral-8` `fill-neutral-8` `stroke-neutral-8` |
| `--color-neutral-9` | `var(--color-neutral-light-9)` | `oklch(0.538 0.04 var(--accent-hue))` | `bg-neutral-9` `text-neutral-9` `border-neutral-9` `fill-neutral-9` `stroke-neutral-9` |
| `--color-neutral-10` | `oklch(0.609 0.037 var(--accent-hue))` | `oklch(0.582 0.038 var(--accent-hue))` | `bg-neutral-10` `text-neutral-10` `border-neutral-10` `fill-neutral-10` `stroke-neutral-10` |
| `--color-neutral-11` | `oklch(0.45 0.032 var(--accent-hue))` | `oklch(0.87 0.028 var(--accent-hue))` | `bg-neutral-11` `text-neutral-11` `border-neutral-11` `fill-neutral-11` `stroke-neutral-11` |
| `--color-neutral-12` | `var(--color-neutral-light-12)` | `oklch(0.949 0.007 var(--accent-hue))` | `bg-neutral-12` `text-neutral-12` `border-neutral-12` `fill-neutral-12` `stroke-neutral-12` |
| `--color-neutral-13` | `var(--color-neutral-light-13)` | `oklch(0.991 0.004 var(--accent-hue))` | `bg-neutral-13` `text-neutral-13` `border-neutral-13` `fill-neutral-13` `stroke-neutral-13` |

### Brand

| Token | Light | Dark, if different | Classes |
| --- | --- | --- | --- |
| `--color-brand-0` | `oklch(1 0 0)` | `oklch(0.08 0 0)` | `bg-brand-0` `text-brand-0` `border-brand-0` `fill-brand-0` `stroke-brand-0` |
| `--color-brand-1` | `oklch(0.984 0.003 247)` | `oklch(0.178 0.023 247)` | `bg-brand-1` `text-brand-1` `border-brand-1` `fill-brand-1` `stroke-brand-1` |
| `--color-brand-2` | `oklch(0.971 0.009 247)` | `oklch(0.212 0.025 247)` | `bg-brand-2` `text-brand-2` `border-brand-2` `fill-brand-2` `stroke-brand-2` |
| `--color-brand-3` | `oklch(0.949 0.02 247)` | `oklch(0.273 0.059 247)` | `bg-brand-3` `text-brand-3` `border-brand-3` `fill-brand-3` `stroke-brand-3` |
| `--color-brand-4` | `oklch(0.925 0.035 247)` | `oklch(0.317 0.086 247)` | `bg-brand-4` `text-brand-4` `border-brand-4` `fill-brand-4` `stroke-brand-4` |
| `--color-brand-5` | `var(--color-brand-light-5)` | `oklch(0.365 0.095 247)` | `bg-brand-5` `text-brand-5` `border-brand-5` `fill-brand-5` `stroke-brand-5` |
| `--color-brand-6` | `oklch(0.849 0.063 247)` | `oklch(0.415 0.099 247)` | `bg-brand-6` `text-brand-6` `border-brand-6` `fill-brand-6` `stroke-brand-6` |
| `--color-brand-7` | `oklch(0.794 0.081 247)` | `oklch(0.475 0.106 247)` | `bg-brand-7` `text-brand-7` `border-brand-7` `fill-brand-7` `stroke-brand-7` |
| `--color-brand-8` | `oklch(0.718 0.111 247)` | `oklch(0.543 0.123 247)` | `bg-brand-8` `text-brand-8` `border-brand-8` `fill-brand-8` `stroke-brand-8` |
| `--color-brand-9` | `var(--color-brand-light-9)` | `oklch(0.639 0.168 247)` | `bg-brand-9` `text-brand-9` `border-brand-9` `fill-brand-9` `stroke-brand-9` |
| `--color-brand-10` | `oklch(0.598 0.16 247)` | `oklch(0.601 0.165 247)` | `bg-brand-10` `text-brand-10` `border-brand-10` `fill-brand-10` `stroke-brand-10` |
| `--color-brand-11` | `oklch(0.431 0.113 247)` | `oklch(0.871 0.067 247)` | `bg-brand-11` `text-brand-11` `border-brand-11` `fill-brand-11` `stroke-brand-11` |
| `--color-brand-12` | `var(--color-brand-light-12)` | `oklch(0.95 0.025 247)` | `bg-brand-12` `text-brand-12` `border-brand-12` `fill-brand-12` `stroke-brand-12` |
| `--color-brand-13` | `var(--color-brand-light-13)` | `oklch(0.993 0.003 247)` | `bg-brand-13` `text-brand-13` `border-brand-13` `fill-brand-13` `stroke-brand-13` |

### Brand secondary

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--color-brand-secondary-0` | `oklch(1 0 0)` | `oklch(0.08 0 0)` |
| `--color-brand-secondary-1` | `oklch(0.984 0.003 42)` | `oklch(0.178 0.01 42)` |
| `--color-brand-secondary-2` | `oklch(0.969 0.014 42)` | `oklch(0.206 0.016 42)` |
| `--color-brand-secondary-3` | `oklch(0.942 0.031 42)` | `oklch(0.255 0.048 42)` |
| `--color-brand-secondary-4` | `oklch(0.899 0.058 42)` | `oklch(0.29 0.078 42)` |
| `--color-brand-secondary-5` | `var(--color-brand-secondary-light-5)` | `oklch(0.331 0.087 42)` |
| `--color-brand-secondary-6` | `oklch(0.829 0.102 42)` | `oklch(0.382 0.089 42)` |
| `--color-brand-secondary-7` | `oklch(0.79 0.127 42)` | `oklch(0.449 0.097 42)` |
| `--color-brand-secondary-8` | `oklch(0.729 0.155 42)` | `oklch(0.538 0.119 42)` |
| `--color-brand-secondary-9` | `var(--color-brand-secondary-light-9)` | `oklch(0.753 0.155 42)` |
| `--color-brand-secondary-10` | `oklch(0.719 0.155 42)` |  |
| `--color-brand-secondary-11` | `oklch(0.463 0.139 42)` | `oklch(0.884 0.064 42)` |
| `--color-brand-secondary-12` | `var(--color-brand-secondary-light-12)` | `oklch(0.95 0.026 42)` |
| `--color-brand-secondary-13` | `var(--color-brand-secondary-light-13)` | `oklch(0.99 0.005 42)` |

### Accent

| Token | Light | Dark, if different | Classes |
| --- | --- | --- | --- |
| `--color-accent-0` | `oklch(1 0 0)` | `oklch(0.08 0 0)` | `bg-accent-0` `text-accent-0` `border-accent-0` `fill-accent-0` `stroke-accent-0` |
| `--color-accent-1` | `oklch(0.984 calc(0.018 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.178 calc(0.137 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-1` `text-accent-1` `border-accent-1` `fill-accent-1` `stroke-accent-1` |
| `--color-accent-2` | `oklch(0.971 calc(0.054 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.212 calc(0.149 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-2` `text-accent-2` `border-accent-2` `fill-accent-2` `stroke-accent-2` |
| `--color-accent-3` | `oklch(0.949 calc(0.119 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.273 calc(0.351 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-3` `text-accent-3` `border-accent-3` `fill-accent-3` `stroke-accent-3` |
| `--color-accent-4` | `oklch(0.925 calc(0.208 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.317 calc(0.512 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-4` `text-accent-4` `border-accent-4` `fill-accent-4` `stroke-accent-4` |
| `--color-accent-5` | `var(--color-accent-light-5)` | `oklch(0.365 calc(0.566 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-5` `text-accent-5` `border-accent-5` `fill-accent-5` `stroke-accent-5` |
| `--color-accent-6` | `oklch(0.849 calc(0.375 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.415 calc(0.589 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-6` `text-accent-6` `border-accent-6` `fill-accent-6` `stroke-accent-6` |
| `--color-accent-7` | `oklch(0.794 calc(0.482 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.475 calc(0.631 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-7` `text-accent-7` `border-accent-7` `fill-accent-7` `stroke-accent-7` |
| `--color-accent-8` | `oklch(0.718 calc(0.661 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.543 calc(0.732 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-8` `text-accent-8` `border-accent-8` `fill-accent-8` `stroke-accent-8` |
| `--color-accent-9` | `var(--color-accent-light-9)` | `oklch(0.639 var(--accent-chroma) var(--accent-hue))` | `bg-accent-9` `text-accent-9` `border-accent-9` `fill-accent-9` `stroke-accent-9` |
| `--color-accent-10` | `oklch(0.598 calc(0.952 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.601 calc(0.982 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-10` `text-accent-10` `border-accent-10` `fill-accent-10` `stroke-accent-10` |
| `--color-accent-11` | `oklch(0.431 calc(0.673 * var(--accent-chroma)) var(--accent-hue))` | `oklch(0.871 calc(0.398 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-11` `text-accent-11` `border-accent-11` `fill-accent-11` `stroke-accent-11` |
| `--color-accent-12` | `var(--color-accent-light-12)` | `oklch(0.95 calc(0.148 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-12` `text-accent-12` `border-accent-12` `fill-accent-12` `stroke-accent-12` |
| `--color-accent-13` | `var(--color-accent-light-13)` | `oklch(0.993 calc(0.018 * var(--accent-chroma)) var(--accent-hue))` | `bg-accent-13` `text-accent-13` `border-accent-13` `fill-accent-13` `stroke-accent-13` |

### Danger

| Token | Light | Dark, if different | Classes |
| --- | --- | --- | --- |
| `--color-danger-0` | `oklch(1 0 0)` | `oklch(0.08 0 0)` | `bg-danger-0` `text-danger-0` `border-danger-0` `fill-danger-0` `stroke-danger-0` |
| `--color-danger-1` | `oklch(0.983 0.003 48.719)` | `oklch(0.177 0.012 27.739)` | `bg-danger-1` `text-danger-1` `border-danger-1` `fill-danger-1` `stroke-danger-1` |
| `--color-danger-2` | `oklch(0.969 0.012 23.703)` | `oklch(0.205 0.019 30.4)` | `bg-danger-2` `text-danger-2` `border-danger-2` `fill-danger-2` `stroke-danger-2` |
| `--color-danger-3` | `oklch(0.944 0.028 28.516)` | `oklch(0.25 0.061 28.297)` | `bg-danger-3` `text-danger-3` `border-danger-3` `fill-danger-3` `stroke-danger-3` |
| `--color-danger-4` | `oklch(0.9 0.052 31.272)` | `oklch(0.289 0.094 28.179)` | `bg-danger-4` `text-danger-4` `border-danger-4` `fill-danger-4` `stroke-danger-4` |
| `--color-danger-5` | `var(--color-danger-light-5)` | `oklch(0.333 0.105 28.758)` | `bg-danger-5` `text-danger-5` `border-danger-5` `fill-danger-5` `stroke-danger-5` |
| `--color-danger-6` | `oklch(0.838 0.09 28.413)` | `oklch(0.381 0.108 28.479)` | `bg-danger-6` `text-danger-6` `border-danger-6` `fill-danger-6` `stroke-danger-6` |
| `--color-danger-7` | `oklch(0.791 0.101 28.55)` | `oklch(0.449 0.117 28.086)` | `bg-danger-7` `text-danger-7` `border-danger-7` `fill-danger-7` `stroke-danger-7` |
| `--color-danger-8` | `oklch(0.73 0.121 28.471)` | `oklch(0.541 0.143 28.04)` | `bg-danger-8` `text-danger-8` `border-danger-8` `fill-danger-8` `stroke-danger-8` |
| `--color-danger-9` | `var(--color-danger-light-9)` | `oklch(0.709 0.184 28.37)` | `bg-danger-9` `text-danger-9` `border-danger-9` `fill-danger-9` `stroke-danger-9` |
| `--color-danger-10` | `oklch(0.673 0.184 28.364)` |  | `bg-danger-10` `text-danger-10` `border-danger-10` `fill-danger-10` `stroke-danger-10` |
| `--color-danger-11` | `oklch(0.445 0.181 28.264)` | `oklch(0.882 0.062 28.725)` | `bg-danger-11` `text-danger-11` `border-danger-11` `fill-danger-11` `stroke-danger-11` |
| `--color-danger-12` | `var(--color-danger-light-12)` | `oklch(0.95 0.024 27.194)` | `bg-danger-12` `text-danger-12` `border-danger-12` `fill-danger-12` `stroke-danger-12` |
| `--color-danger-13` | `var(--color-danger-light-13)` | `oklch(0.99 0.004 28)` | `bg-danger-13` `text-danger-13` `border-danger-13` `fill-danger-13` `stroke-danger-13` |

### Success

| Token | Light | Dark, if different | Classes |
| --- | --- | --- | --- |
| `--color-success-0` | `oklch(1 0 0)` | `oklch(0.08 0 0)` | `bg-success-0` `text-success-0` `border-success-0` `fill-success-0` `stroke-success-0` |
| `--color-success-1` | `oklch(0.983 0.006 185.277)` | `oklch(0.178 0.012 186.566)` | `bg-success-1` `text-success-1` `border-success-1` `fill-success-1` `stroke-success-1` |
| `--color-success-2` | `oklch(0.973 0.013 185.101)` | `oklch(0.214 0.018 183.109)` | `bg-success-2` `text-success-2` `border-success-2` `fill-success-2` `stroke-success-2` |
| `--color-success-3` | `oklch(0.947 0.036 185.818)` | `oklch(0.272 0.039 186.985)` | `bg-success-3` `text-success-3` `border-success-3` `fill-success-3` `stroke-success-3` |
| `--color-success-4` | `oklch(0.921 0.057 185.27)` | `oklch(0.317 0.056 185.561)` | `bg-success-4` `text-success-4` `border-success-4` `fill-success-4` `stroke-success-4` |
| `--color-success-5` | `var(--color-success-light-5)` | `oklch(0.362 0.063 185.312)` | `bg-success-5` `text-success-5` `border-success-5` `fill-success-5` `stroke-success-5` |
| `--color-success-6` | `oklch(0.842 0.087 185.529)` | `oklch(0.413 0.068 185.064)` | `bg-success-6` `text-success-6` `border-success-6` `fill-success-6` `stroke-success-6` |
| `--color-success-7` | `oklch(0.784 0.102 184.951)` | `oklch(0.474 0.078 184.218)` | `bg-success-7` `text-success-7` `border-success-7` `fill-success-7` `stroke-success-7` |
| `--color-success-8` | `oklch(0.709 0.125 184.715)` | `oklch(0.538 0.091 184.978)` | `bg-success-8` `text-success-8` `border-success-8` `fill-success-8` `stroke-success-8` |
| `--color-success-9` | `var(--color-success-light-9)` | `oklch(0.732 0.129 185.089)` | `bg-success-9` `text-success-9` `border-success-9` `fill-success-9` `stroke-success-9` |
| `--color-success-10` | `oklch(0.698 0.123 185.178)` |  | `bg-success-10` `text-success-10` `border-success-10` `fill-success-10` `stroke-success-10` |
| `--color-success-11` | `oklch(0.44 0.078 183.645)` | `oklch(0.861 0.129 184.826)` | `bg-success-11` `text-success-11` `border-success-11` `fill-success-11` `stroke-success-11` |
| `--color-success-12` | `var(--color-success-light-12)` | `oklch(0.95 0.072 184.637)` | `bg-success-12` `text-success-12` `border-success-12` `fill-success-12` `stroke-success-12` |
| `--color-success-13` | `var(--color-success-light-13)` | `oklch(0.997 0.004 185)` | `bg-success-13` `text-success-13` `border-success-13` `fill-success-13` `stroke-success-13` |

### Warning

| Token | Light | Dark, if different | Classes |
| --- | --- | --- | --- |
| `--color-warning-0` | `oklch(1 0 0)` | `oklch(0.08 0 0)` | `bg-warning-0` `text-warning-0` `border-warning-0` `fill-warning-0` `stroke-warning-0` |
| `--color-warning-1` | `oklch(0.994 0.005 95.098)` | `oklch(0.178 0.012 91.807)` | `bg-warning-1` `text-warning-1` `border-warning-1` `fill-warning-1` `stroke-warning-1` |
| `--color-warning-2` | `oklch(0.984 0.027 95.333)` | `oklch(0.211 0.018 86.763)` | `bg-warning-2` `text-warning-2` `border-warning-2` `fill-warning-2` `stroke-warning-2` |
| `--color-warning-3` | `oklch(0.962 0.075 98.601)` | `oklch(0.257 0.043 87.869)` | `bg-warning-3` `text-warning-3` `border-warning-3` `fill-warning-3` `stroke-warning-3` |
| `--color-warning-4` | `oklch(0.939 0.099 95.312)` | `oklch(0.296 0.061 81.523)` | `bg-warning-4` `text-warning-4` `border-warning-4` `fill-warning-4` `stroke-warning-4` |
| `--color-warning-5` | `var(--color-warning-light-5)` | `oklch(0.338 0.07 82.053)` | `bg-warning-5` `text-warning-5` `border-warning-5` `fill-warning-5` `stroke-warning-5` |
| `--color-warning-6` | `oklch(0.876 0.151 88.465)` | `oklch(0.388 0.076 86.634)` | `bg-warning-6` `text-warning-6` `border-warning-6` `fill-warning-6` `stroke-warning-6` |
| `--color-warning-7` | `oklch(0.834 0.139 86.578)` | `oklch(0.453 0.079 87.194)` | `bg-warning-7` `text-warning-7` `border-warning-7` `fill-warning-7` `stroke-warning-7` |
| `--color-warning-8` | `oklch(0.765 0.157 86.419)` | `oklch(0.535 0.093 86.208)` | `bg-warning-8` `text-warning-8` `border-warning-8` `fill-warning-8` `stroke-warning-8` |
| `--color-warning-9` | `var(--color-warning-light-9)` | `oklch(0.841 0.172 86.226)` | `bg-warning-9` `text-warning-9` `border-warning-9` `fill-warning-9` `stroke-warning-9` |
| `--color-warning-10` | `oklch(0.738 0.151 85.261)` | `oklch(0.81 0.166 85.477)` | `bg-warning-10` `text-warning-10` `border-warning-10` `fill-warning-10` `stroke-warning-10` |
| `--color-warning-11` | `oklch(0.465 0.095 82.642)` | `oklch(0.882 0.144 88.596)` | `bg-warning-11` `text-warning-11` `border-warning-11` `fill-warning-11` `stroke-warning-11` |
| `--color-warning-12` | `var(--color-warning-light-12)` | `oklch(0.935 0.069 86.151)` | `bg-warning-12` `text-warning-12` `border-warning-12` `fill-warning-12` `stroke-warning-12` |
| `--color-warning-13` | `var(--color-warning-light-13)` | `oklch(0.97 0.03 86)` | `bg-warning-13` `text-warning-13` `border-warning-13` `fill-warning-13` `stroke-warning-13` |

### Info

| Token | Light | Dark, if different | Classes |
| --- | --- | --- | --- |
| `--color-info-0` | `oklch(1 0 0)` | `oklch(0.08 0 0)` | `bg-info-0` `text-info-0` `border-info-0` `fill-info-0` `stroke-info-0` |
| `--color-info-1` | `oklch(0.984 0.004 301.426)` | `oklch(0.176 0.025 303.009)` | `bg-info-1` `text-info-1` `border-info-1` `fill-info-1` `stroke-info-1` |
| `--color-info-2` | `oklch(0.972 0.011 303.114)` | `oklch(0.211 0.036 303.878)` | `bg-info-2` `text-info-2` `border-info-2` `fill-info-2` `stroke-info-2` |
| `--color-info-3` | `oklch(0.946 0.028 303.922)` | `oklch(0.264 0.069 303.209)` | `bg-info-3` `text-info-3` `border-info-3` `fill-info-3` `stroke-info-3` |
| `--color-info-4` | `oklch(0.92 0.044 303.104)` | `oklch(0.307 0.093 302.094)` | `bg-info-4` `text-info-4` `border-info-4` `fill-info-4` `stroke-info-4` |
| `--color-info-5` | `var(--color-info-light-5)` | `oklch(0.343 0.103 302.878)` | `bg-info-5` `text-info-5` `border-info-5` `fill-info-5` `stroke-info-5` |
| `--color-info-6` | `oklch(0.846 0.077 302.529)` | `oklch(0.387 0.108 302.597)` | `bg-info-6` `text-info-6` `border-info-6` `fill-info-6` `stroke-info-6` |
| `--color-info-7` | `oklch(0.792 0.099 303.066)` | `oklch(0.451 0.119 302.796)` | `bg-info-7` `text-info-7` `border-info-7` `fill-info-7` `stroke-info-7` |
| `--color-info-8` | `oklch(0.724 0.129 302.898)` | `oklch(0.541 0.149 302.916)` | `bg-info-8` `text-info-8` `border-info-8` `fill-info-8` `stroke-info-8` |
| `--color-info-9` | `var(--color-info-light-9)` | `oklch(0.652 0.198 302.833)` | `bg-info-9` `text-info-9` `border-info-9` `fill-info-9` `stroke-info-9` |
| `--color-info-10` | `oklch(0.612 0.198 303.02)` |  | `bg-info-10` `text-info-10` `border-info-10` `fill-info-10` `stroke-info-10` |
| `--color-info-11` | `oklch(0.457 0.185 302.873)` | `oklch(0.881 0.073 306.109)` | `bg-info-11` `text-info-11` `border-info-11` `fill-info-11` `stroke-info-11` |
| `--color-info-12` | `var(--color-info-light-12)` | `oklch(0.95 0.028 303.269)` | `bg-info-12` `text-info-12` `border-info-12` `fill-info-12` `stroke-info-12` |
| `--color-info-13` | `var(--color-info-light-13)` | `oklch(0.99 0.005 303)` | `bg-info-13` `text-info-13` `border-info-13` `fill-info-13` `stroke-info-13` |

### Pinned light steps

| Token | Value |
| --- | --- |
| `--color-neutral-light-0` | `oklch(1 0 0)` |
| `--color-neutral-light-5` | `oklch(0.909 0.019 var(--accent-hue))` |
| `--color-neutral-light-9` | `oklch(0.645 0.039 var(--accent-hue))` |
| `--color-neutral-light-12` | `oklch(0.24 0.024 var(--accent-hue))` |
| `--color-neutral-light-13` | `oklch(0.182 0.015 var(--accent-hue))` |
| `--color-brand-light-5` | `oklch(0.891 0.049 247)` |
| `--color-brand-light-9` | `oklch(0.639 0.168 247)` |
| `--color-brand-light-12` | `oklch(0.324 0.082 247)` |
| `--color-brand-light-13` | `oklch(0.2 0.055 247)` |
| `--color-brand-secondary-light-5` | `oklch(0.865 0.078 42)` |
| `--color-brand-secondary-light-9` | `oklch(0.753 0.155 42)` |
| `--color-brand-secondary-light-12` | `oklch(0.349 0.089 42)` |
| `--color-brand-secondary-light-13` | `oklch(0.2 0.06 42)` |
| `--color-accent-light-5` | `oklch(0.891 calc(0.292 * var(--accent-chroma)) var(--accent-hue))` |
| `--color-accent-light-9` | `oklch(0.639 var(--accent-chroma) var(--accent-hue))` |
| `--color-accent-light-12` | `oklch(0.324 calc(0.488 * var(--accent-chroma)) var(--accent-hue))` |
| `--color-accent-light-13` | `oklch(0.2 calc(0.327 * var(--accent-chroma)) var(--accent-hue))` |
| `--color-danger-light-5` | `oklch(0.866 0.072 30.236)` |
| `--color-danger-light-9` | `oklch(0.709 0.184 28.37)` |
| `--color-danger-light-12` | `oklch(0.349 0.069 28.777)` |
| `--color-danger-light-13` | `oklch(0.22 0.045 28)` |
| `--color-success-light-5` | `oklch(0.886 0.074 185.252)` |
| `--color-success-light-9` | `oklch(0.732 0.129 185.089)` |
| `--color-success-light-12` | `oklch(0.351 0.061 185.02)` |
| `--color-success-light-13` | `oklch(0.22 0.04 185)` |
| `--color-warning-light-5` | `oklch(0.912 0.129 93.243)` |
| `--color-warning-light-9` | `oklch(0.771 0.158 86.663)` |
| `--color-warning-light-12` | `oklch(0.356 0.052 86.003)` |
| `--color-warning-light-13` | `oklch(0.22 0.035 86)` |
| `--color-info-light-5` | `oklch(0.887 0.059 302.54)` |
| `--color-info-light-9` | `oklch(0.652 0.198 302.833)` |
| `--color-info-light-12` | `oklch(0.33 0.125 302.655)` |
| `--color-info-light-13` | `oklch(0.2 0.08 303)` |

### Brand hue aliases

| Token | Value |
| --- | --- |
| `--color-brand-blue-0` | `var(--color-brand-0)` |
| `--color-brand-blue-1` | `var(--color-brand-1)` |
| `--color-brand-blue-2` | `var(--color-brand-2)` |
| `--color-brand-blue-3` | `var(--color-brand-3)` |
| `--color-brand-blue-4` | `var(--color-brand-4)` |
| `--color-brand-blue-5` | `var(--color-brand-5)` |
| `--color-brand-blue-6` | `var(--color-brand-6)` |
| `--color-brand-blue-7` | `var(--color-brand-7)` |
| `--color-brand-blue-8` | `var(--color-brand-8)` |
| `--color-brand-blue-9` | `var(--color-brand-9)` |
| `--color-brand-blue-10` | `var(--color-brand-10)` |
| `--color-brand-blue-11` | `var(--color-brand-11)` |
| `--color-brand-blue-12` | `var(--color-brand-12)` |
| `--color-brand-blue-13` | `var(--color-brand-13)` |
| `--color-brand-blue-light-5` | `var(--color-brand-light-5)` |
| `--color-brand-blue-light-9` | `var(--color-brand-light-9)` |
| `--color-brand-blue-light-12` | `var(--color-brand-light-12)` |
| `--color-brand-blue-light-13` | `var(--color-brand-light-13)` |
| `--color-brand-purple-0` | `var(--color-info-0)` |
| `--color-brand-purple-1` | `var(--color-info-1)` |
| `--color-brand-purple-2` | `var(--color-info-2)` |
| `--color-brand-purple-3` | `var(--color-info-3)` |
| `--color-brand-purple-4` | `var(--color-info-4)` |
| `--color-brand-purple-5` | `var(--color-info-5)` |
| `--color-brand-purple-6` | `var(--color-info-6)` |
| `--color-brand-purple-7` | `var(--color-info-7)` |
| `--color-brand-purple-8` | `var(--color-info-8)` |
| `--color-brand-purple-9` | `var(--color-info-9)` |
| `--color-brand-purple-10` | `var(--color-info-10)` |
| `--color-brand-purple-11` | `var(--color-info-11)` |
| `--color-brand-purple-12` | `var(--color-info-12)` |
| `--color-brand-purple-13` | `var(--color-info-13)` |
| `--color-brand-purple-light-5` | `var(--color-info-light-5)` |
| `--color-brand-purple-light-9` | `var(--color-info-light-9)` |
| `--color-brand-purple-light-12` | `var(--color-info-light-12)` |
| `--color-brand-purple-light-13` | `var(--color-info-light-13)` |
| `--color-brand-orange-0` | `var(--color-brand-secondary-0)` |
| `--color-brand-orange-1` | `var(--color-brand-secondary-1)` |
| `--color-brand-orange-2` | `var(--color-brand-secondary-2)` |
| `--color-brand-orange-3` | `var(--color-brand-secondary-3)` |
| `--color-brand-orange-4` | `var(--color-brand-secondary-4)` |
| `--color-brand-orange-5` | `var(--color-brand-secondary-5)` |
| `--color-brand-orange-6` | `var(--color-brand-secondary-6)` |
| `--color-brand-orange-7` | `var(--color-brand-secondary-7)` |
| `--color-brand-orange-8` | `var(--color-brand-secondary-8)` |
| `--color-brand-orange-9` | `var(--color-brand-secondary-9)` |
| `--color-brand-orange-10` | `var(--color-brand-secondary-10)` |
| `--color-brand-orange-11` | `var(--color-brand-secondary-11)` |
| `--color-brand-orange-12` | `var(--color-brand-secondary-12)` |
| `--color-brand-orange-13` | `var(--color-brand-secondary-13)` |
| `--color-brand-orange-light-5` | `var(--color-brand-secondary-light-5)` |
| `--color-brand-orange-light-9` | `var(--color-brand-secondary-light-9)` |
| `--color-brand-orange-light-12` | `var(--color-brand-secondary-light-12)` |
| `--color-brand-orange-light-13` | `var(--color-brand-secondary-light-13)` |

### Illustration

| Token | Value | Classes |
| --- | --- | --- |
| `--color-illustration-outline` | `var(--color-neutral-light-0, #ffffff)` | `bg-illustration-outline` `text-illustration-outline` `border-illustration-outline` `fill-illustration-outline` `stroke-illustration-outline` |
| `--color-illustration-face` | `var(--color-info-light-5, #e1d1fb)` | `bg-illustration-face` `text-illustration-face` `border-illustration-face` `fill-illustration-face` `stroke-illustration-face` |
| `--color-illustration-detail` | `var(--color-brand-secondary-light-5, #ffc3a8)` | `bg-illustration-detail` `text-illustration-detail` `border-illustration-detail` `fill-illustration-detail` `stroke-illustration-detail` |
| `--color-illustration-shadow` | `var(--color-brand-9, #0191eb)` | `bg-illustration-shadow` `text-illustration-shadow` `border-illustration-shadow` `fill-illustration-shadow` `stroke-illustration-shadow` |
| `--color-illustration-highlight` | `var(--color-brand-light-5, #c2dffb)` | `bg-illustration-highlight` `text-illustration-highlight` `border-illustration-highlight` `fill-illustration-highlight` `stroke-illustration-highlight` |
| `--color-illustration-stroke` | `var(--color-neutral-light-12, #16202a)` | `bg-illustration-stroke` `text-illustration-stroke` `border-illustration-stroke` `fill-illustration-stroke` `stroke-illustration-stroke` |

### Accent parameters

| Token | Value |
| --- | --- |
| `--accent-hue` | `247` |
| `--accent-chroma` | `0.168` |

## Intents

An `intent-*` class points every `--intent-*` role at one scale, and children inherit it. The semantic utilities read those roles, so the same class draws in any intent. Neutral is set on `:root`.

When to use these: [Colors](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md).

### Backgrounds

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--intent-bg-normal` | `var(--color-neutral-1)` | `var(--color-neutral-2)` |
| `--intent-bg-strong` | `var(--color-neutral-13)` |  |
| `--intent-bg-strong-hover` | `var(--color-neutral-11)` |  |
| `--intent-bg-strong-active` | `var(--color-neutral-12)` |  |
| `--intent-bg-inverted` | `var(--color-neutral-12)` |  |
| `--intent-bg-raised` | `var(--color-neutral-1)` | `var(--color-neutral-4)` |
| `--intent-bg-sunken` | `var(--color-neutral-2)` | `var(--color-neutral-0)` |
| `--intent-bg-subtler` | `var(--intent-2a)` |  |
| `--intent-bg-subtle` | `var(--intent-3a)` |  |
| `--intent-bg-floating` | `var(--intent-bg-raised)` | `color-mix(in oklch, var(--intent-9) 20%, var(--intent-bg-raised))` |

Where an intent sets its own value, light / dark:

| Token | brand | brand-secondary | brand-purple | accent | danger | success | warning | info |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `--intent-bg-normal` | `var(--color-brand-1)` / `var(--color-brand-2)` | `var(--color-brand-secondary-1)` / `var(--color-brand-secondary-2)` | `var(--color-info-1)` / `var(--color-info-2)` | `var(--color-accent-1)` / `var(--color-accent-2)` | `var(--color-danger-1)` / `var(--color-danger-2)` | `var(--color-success-1)` / `var(--color-success-2)` | `var(--color-warning-1)` / `var(--color-warning-2)` | `var(--color-info-1)` / `var(--color-info-2)` |
| `--intent-bg-strong` | `var(--color-brand-9)` | `color-mix(in oklab, var(--color-brand-secondary-9) 90%, var(--color-neutral-light-0))` | `var(--color-info-9)` | `var(--color-accent-9)` | `var(--color-danger-10)` | `color-mix(in oklab, var(--color-success-9) 90%, var(--color-neutral-light-0))` | `var(--color-warning-9)` | `var(--color-info-9)` |
| `--intent-bg-strong-hover` | `var(--color-brand-11)` / `var(--color-brand-8)` | `color-mix(in oklab, var(--color-brand-secondary-9) 75%, var(--color-neutral-light-0))` | `var(--color-info-11)` / `var(--color-info-8)` | `var(--color-accent-11)` / `var(--color-accent-8)` | `var(--color-danger-11)` / `var(--color-danger-8)` | `color-mix(in oklab, var(--color-success-9) 75%, var(--color-neutral-light-0))` | `color-mix(in oklab, var(--color-warning-9) 85%, var(--color-neutral-light-0))` | `var(--color-info-11)` / `var(--color-info-8)` |
| `--intent-bg-strong-active` | `var(--color-brand-12)` / `var(--color-brand-7)` | `color-mix(in oklab, var(--color-brand-secondary-9) 60%, var(--color-neutral-light-0))` | `var(--color-info-12)` / `var(--color-info-7)` | `var(--color-accent-12)` / `var(--color-accent-7)` | `var(--color-danger-12)` / `var(--color-danger-7)` | `color-mix(in oklab, var(--color-success-9) 60%, var(--color-neutral-light-0))` | `color-mix(in oklab, var(--color-warning-9) 70%, var(--color-neutral-light-0))` | `var(--color-info-12)` / `var(--color-info-7)` |
| `--intent-bg-inverted` | `var(--color-brand-12)` | `var(--color-brand-secondary-12)` | `var(--color-info-12)` | `var(--color-accent-12)` | `var(--color-danger-12)` | `var(--color-success-12)` | `var(--color-warning-12)` | `var(--color-info-12)` |
| `--intent-bg-raised` | `var(--color-brand-1)` / `var(--color-brand-2)` | `var(--color-brand-secondary-1)` / `var(--color-brand-secondary-2)` | `var(--color-info-1)` / `var(--color-info-2)` | `var(--color-accent-1)` / `var(--color-accent-2)` | `var(--color-danger-1)` / `var(--color-danger-2)` | `var(--color-success-1)` / `var(--color-success-2)` | `var(--color-warning-1)` / `var(--color-warning-2)` | `var(--color-info-1)` / `var(--color-info-2)` |
| `--intent-bg-sunken` | `var(--color-brand-2)` / `var(--color-brand-0)` | `var(--color-brand-secondary-2)` / `var(--color-brand-secondary-0)` | `var(--color-info-2)` / `var(--color-info-0)` | `var(--color-accent-2)` / `var(--color-accent-0)` | `var(--color-danger-2)` / `var(--color-danger-0)` | `var(--color-success-2)` / `var(--color-success-0)` | `var(--color-warning-2)` / `var(--color-warning-0)` | `var(--color-info-2)` / `var(--color-info-0)` |

### Text

| Token | Value |
| --- | --- |
| `--intent-text-subtler` | `var(--color-neutral-10)` |
| `--intent-text-subtle` | `var(--color-neutral-11)` |
| `--intent-text-normal` | `var(--color-neutral-12)` |
| `--intent-text-strong` | `var(--color-neutral-13)` |
| `--intent-text-inverted` | `var(--color-neutral-0)` |
| `--intent-text-on-strong` | `var(--color-neutral-0)` |

Where an intent sets its own value, light / dark:

| Token | brand | brand-secondary | brand-purple | accent | danger | success | warning | info |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `--intent-text-subtler` | `var(--color-brand-10)` | `var(--color-brand-secondary-10)` | `var(--color-info-10)` | `var(--color-accent-10)` | `var(--color-danger-10)` | `var(--color-success-10)` | `var(--color-warning-10)` | `var(--color-info-10)` |
| `--intent-text-subtle` | `var(--color-brand-11)` | `var(--color-brand-secondary-11)` | `var(--color-info-11)` | `var(--color-accent-11)` | `var(--color-danger-11)` | `var(--color-success-11)` | `var(--color-warning-11)` | `var(--color-info-11)` |
| `--intent-text-normal` | `var(--color-brand-12)` | `var(--color-brand-secondary-12)` | `var(--color-info-12)` | `var(--color-accent-12)` | `var(--color-danger-12)` | `var(--color-success-12)` | `var(--color-warning-12)` | `var(--color-info-12)` |
| `--intent-text-strong` | `var(--color-brand-13)` | `var(--color-brand-secondary-13)` | `var(--color-info-13)` | `var(--color-accent-13)` | `var(--color-danger-13)` | `var(--color-success-13)` | `var(--color-warning-13)` | `var(--color-info-13)` |
| `--intent-text-inverted` | `var(--color-brand-0)` | `var(--color-brand-secondary-0)` | `var(--color-info-0)` | `var(--color-accent-0)` | `var(--color-danger-0)` | `var(--color-success-0)` | `var(--color-warning-0)` | `var(--color-info-0)` |
| `--intent-text-on-strong` | `var(--color-neutral-light-0)` | `var(--color-brand-secondary-13)` / `var(--color-brand-secondary-0)` | `var(--color-neutral-light-0)` | `var(--color-neutral-light-0)` | `var(--color-neutral-light-0)` | `var(--color-success-13)` / `var(--color-success-0)` | `var(--color-warning-13)` / `var(--color-warning-0)` | `var(--color-neutral-light-0)` |

### Borders

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--intent-border-subtler` | `var(--color-neutral-5)` |  |
| `--intent-border-subtle` | `var(--color-neutral-6)` | `var(--color-neutral-7)` |
| `--intent-border-normal` | `var(--color-neutral-7)` | `var(--color-neutral-8)` |
| `--intent-border-strong` | `var(--color-neutral-9)` | `var(--color-neutral-10)` |
| `--intent-border-inverted` | `var(--color-neutral-12)` |  |

Where an intent sets its own value, light / dark:

| Token | brand | brand-secondary | brand-purple | accent | danger | success | warning | info |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `--intent-border-subtler` | `var(--color-brand-5)` | `var(--color-brand-secondary-5)` | `var(--color-info-5)` | `var(--color-accent-5)` | `var(--color-danger-5)` | `var(--color-success-5)` | `var(--color-warning-5)` | `var(--color-info-5)` |
| `--intent-border-subtle` | `var(--color-brand-6)` | `var(--color-brand-secondary-6)` | `var(--color-info-6)` | `var(--color-accent-6)` | `var(--color-danger-6)` | `var(--color-success-6)` | `var(--color-warning-6)` | `var(--color-info-6)` |
| `--intent-border-normal` | `var(--color-brand-7)` | `var(--color-brand-secondary-7)` | `var(--color-info-7)` | `var(--color-accent-7)` | `var(--color-danger-7)` | `var(--color-success-7)` | `var(--color-warning-7)` | `var(--color-info-7)` |
| `--intent-border-strong` | `var(--color-brand-9)` | `var(--color-brand-secondary-9)` | `var(--color-info-9)` | `var(--color-accent-9)` | `var(--color-danger-9)` | `var(--color-success-9)` | `var(--color-warning-9)` | `var(--color-info-9)` |
| `--intent-border-inverted` | `var(--color-brand-12)` | `var(--color-brand-secondary-12)` | `var(--color-info-12)` | `var(--color-accent-12)` | `var(--color-danger-12)` | `var(--color-success-12)` | `var(--color-warning-12)` | `var(--color-info-12)` |

### Mark

| Token | Value |
| --- | --- |
| `--intent-mark-bg` | `var(--color-neutral-13)` |
| `--intent-mark-text` | `var(--color-neutral-0)` |

Where an intent sets its own value, light / dark:

| Token | brand | brand-secondary | brand-purple | accent | danger | success | warning | info |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `--intent-mark-bg` | `var(--color-brand-light-5)` | `var(--color-brand-secondary-light-5)` | `var(--color-info-light-5)` | `var(--color-accent-light-5)` | `var(--color-danger-light-5)` | `var(--color-success-light-5)` | `var(--color-warning-light-5)` | `var(--color-info-light-5)` |
| `--intent-mark-text` | `var(--color-brand-light-13)` | `var(--color-brand-secondary-light-13)` | `var(--color-info-light-13)` | `var(--color-accent-light-13)` | `var(--color-danger-light-13)` | `var(--color-success-light-13)` | `var(--color-warning-light-13)` | `var(--color-info-light-13)` |

### Link

| Token | Value |
| --- | --- |
| `--intent-link-text` | `var(--color-neutral-13)` |

Where an intent sets its own value, light / dark:

| Token | brand | brand-secondary | brand-purple | accent | danger | success | warning | info |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `--intent-link-text` | `var(--color-brand-11)` | `var(--color-brand-secondary-11)` | `var(--color-info-11)` | `var(--color-accent-11)` | `var(--color-danger-11)` | `var(--color-success-11)` | `var(--color-warning-11)` | `var(--color-info-11)` |

### Semantic utilities

| Token | Value | Classes |
| --- | --- | --- |
| `--background-color-normal` | `var(--intent-bg-normal)` | `bg-normal` |
| `--background-color-subtler` | `var(--intent-bg-subtler)` | `bg-subtler` |
| `--background-color-subtle` | `var(--intent-bg-subtle)` | `bg-subtle` |
| `--background-color-strong` | `var(--intent-bg-strong)` | `bg-strong` |
| `--background-color-inverted` | `var(--intent-bg-inverted)` | `bg-inverted` |
| `--background-color-raised` | `var(--intent-bg-raised)` | `bg-raised` |
| `--background-color-sunken` | `var(--intent-bg-sunken)` | `bg-sunken` |
| `--background-color-mark` | `var(--intent-mark-bg)` | `bg-mark` |
| `--text-color-normal` | `var(--intent-text-normal)` | `text-normal` |
| `--text-color-subtler` | `var(--intent-text-subtler)` | `text-subtler` |
| `--text-color-subtle` | `var(--intent-text-subtle)` | `text-subtle` |
| `--text-color-strong` | `var(--intent-text-strong)` | `text-strong` |
| `--text-color-inverted` | `var(--intent-text-inverted)` | `text-inverted` |
| `--text-color-on-strong` | `var(--intent-text-on-strong)` | `text-on-strong` |
| `--text-color-mark` | `var(--intent-mark-text)` | `text-mark` |
| `--border-color-subtler` | `var(--intent-border-subtler)` | `border-subtler` `divide-subtler` |
| `--border-color-subtle` | `var(--intent-border-subtle)` | `border-subtle` `divide-subtle` |
| `--border-color-normal` | `var(--intent-border-normal)` | `border-normal` `divide-normal` |
| `--border-color-strong` | `var(--intent-border-strong)` | `border-strong` `divide-strong` |
| `--border-color-inverted` | `var(--intent-border-inverted)` | `border-inverted` `divide-inverted` |

### Hue

| Token | Value |
| --- | --- |
| `--intent-hue` | `var(--accent-hue, 247)` |

Where an intent sets its own value, light / dark:

| Token | brand | brand-secondary | brand-purple | danger | success | warning | info |
| --- | --- | --- | --- | --- | --- | --- | --- |
| `--intent-hue` | `247` | `42` | `303` | `28` | `185` | `86` | `303` |

### Raw steps

| Token | Value |
| --- | --- |
| `--intent-0` | `var(--color-neutral-0)` |
| `--intent-1` | `var(--color-neutral-1)` |
| `--intent-2` | `var(--color-neutral-2)` |
| `--intent-3` | `var(--color-neutral-3)` |
| `--intent-4` | `var(--color-neutral-4)` |
| `--intent-5` | `var(--color-neutral-5)` |
| `--intent-6` | `var(--color-neutral-6)` |
| `--intent-7` | `var(--color-neutral-7)` |
| `--intent-8` | `var(--color-neutral-8)` |
| `--intent-9` | `var(--color-neutral-9)` |
| `--intent-10` | `var(--color-neutral-10)` |
| `--intent-11` | `var(--color-neutral-11)` |
| `--intent-12` | `var(--color-neutral-12)` |
| `--intent-13` | `var(--color-neutral-13)` |

Where an intent sets its own value, light / dark:

| Token | brand | brand-secondary | brand-purple | accent | danger | success | warning | info |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `--intent-0` | `var(--color-brand-0)` | `var(--color-brand-secondary-0)` | `var(--color-info-0)` | `var(--color-accent-0)` | `var(--color-danger-0)` | `var(--color-success-0)` | `var(--color-warning-0)` | `var(--color-info-0)` |
| `--intent-1` | `var(--color-brand-1)` | `var(--color-brand-secondary-1)` | `var(--color-info-1)` | `var(--color-accent-1)` | `var(--color-danger-1)` | `var(--color-success-1)` | `var(--color-warning-1)` | `var(--color-info-1)` |
| `--intent-2` | `var(--color-brand-2)` | `var(--color-brand-secondary-2)` | `var(--color-info-2)` | `var(--color-accent-2)` | `var(--color-danger-2)` | `var(--color-success-2)` | `var(--color-warning-2)` | `var(--color-info-2)` |
| `--intent-3` | `var(--color-brand-3)` | `var(--color-brand-secondary-3)` | `var(--color-info-3)` | `var(--color-accent-3)` | `var(--color-danger-3)` | `var(--color-success-3)` | `var(--color-warning-3)` | `var(--color-info-3)` |
| `--intent-4` | `var(--color-brand-4)` | `var(--color-brand-secondary-4)` | `var(--color-info-4)` | `var(--color-accent-4)` | `var(--color-danger-4)` | `var(--color-success-4)` | `var(--color-warning-4)` | `var(--color-info-4)` |
| `--intent-5` | `var(--color-brand-5)` | `var(--color-brand-secondary-5)` | `var(--color-info-5)` | `var(--color-accent-5)` | `var(--color-danger-5)` | `var(--color-success-5)` | `var(--color-warning-5)` | `var(--color-info-5)` |
| `--intent-6` | `var(--color-brand-6)` | `var(--color-brand-secondary-6)` | `var(--color-info-6)` | `var(--color-accent-6)` | `var(--color-danger-6)` | `var(--color-success-6)` | `var(--color-warning-6)` | `var(--color-info-6)` |
| `--intent-7` | `var(--color-brand-7)` | `var(--color-brand-secondary-7)` | `var(--color-info-7)` | `var(--color-accent-7)` | `var(--color-danger-7)` | `var(--color-success-7)` | `var(--color-warning-7)` | `var(--color-info-7)` |
| `--intent-8` | `var(--color-brand-8)` | `var(--color-brand-secondary-8)` | `var(--color-info-8)` | `var(--color-accent-8)` | `var(--color-danger-8)` | `var(--color-success-8)` | `var(--color-warning-8)` | `var(--color-info-8)` |
| `--intent-9` | `var(--color-brand-9)` | `var(--color-brand-secondary-9)` | `var(--color-info-9)` | `var(--color-accent-9)` | `var(--color-danger-9)` | `var(--color-success-9)` | `var(--color-warning-9)` | `var(--color-info-9)` |
| `--intent-10` | `var(--color-brand-10)` | `var(--color-brand-secondary-10)` | `var(--color-info-10)` | `var(--color-accent-10)` | `var(--color-danger-10)` | `var(--color-success-10)` | `var(--color-warning-10)` | `var(--color-info-10)` |
| `--intent-11` | `var(--color-brand-11)` | `var(--color-brand-secondary-11)` | `var(--color-info-11)` | `var(--color-accent-11)` | `var(--color-danger-11)` | `var(--color-success-11)` | `var(--color-warning-11)` | `var(--color-info-11)` |
| `--intent-12` | `var(--color-brand-12)` | `var(--color-brand-secondary-12)` | `var(--color-info-12)` | `var(--color-accent-12)` | `var(--color-danger-12)` | `var(--color-success-12)` | `var(--color-warning-12)` | `var(--color-info-12)` |
| `--intent-13` | `var(--color-brand-13)` | `var(--color-brand-secondary-13)` | `var(--color-info-13)` | `var(--color-accent-13)` | `var(--color-danger-13)` | `var(--color-success-13)` | `var(--color-warning-13)` | `var(--color-info-13)` |

### Alpha steps

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--intent-2a` | `color-mix(in oklch, var(--color-neutral-9) 6%, transparent)` | `color-mix(in oklch, var(--color-neutral-9) 10%, transparent)` |
| `--intent-3a` | `color-mix(in oklch, var(--color-neutral-9) 11%, transparent)` | `color-mix(in oklch, var(--color-neutral-9) 18%, transparent)` |
| `--intent-4a` | `color-mix(in oklch, var(--color-neutral-9) 17%, transparent)` | `color-mix(in oklch, var(--color-neutral-9) 28%, transparent)` |
| `--intent-5a` | `color-mix(in oklch, var(--color-neutral-9) 23%, transparent)` | `color-mix(in oklch, var(--color-neutral-9) 38%, transparent)` |

Where an intent sets its own value, light / dark:

| Token | brand | brand-secondary | brand-purple | accent | danger | success | warning | info |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `--intent-2a` | `color-mix(in oklch, var(--color-brand-9) 6%, transparent)` / `color-mix(in oklch, var(--color-brand-9) 9%, transparent)` | `color-mix(in oklch, var(--color-brand-secondary-9) 6%, transparent)` | `color-mix(in oklch, var(--color-info-9) 6%, transparent)` / `color-mix(in oklch, var(--color-info-9) 7%, transparent)` | `color-mix(in oklch, var(--color-accent-9) 6%, transparent)` / `color-mix(in oklch, var(--color-accent-9) 9%, transparent)` | `color-mix(in oklch, var(--color-danger-9) 6%, transparent)` / `color-mix(in oklch, var(--color-danger-9) 7%, transparent)` | `color-mix(in oklch, var(--color-success-9) 6%, transparent)` / `color-mix(in oklch, var(--color-success-9) 7%, transparent)` | `color-mix(in oklch, var(--color-warning-9) 6%, transparent)` | `color-mix(in oklch, var(--color-info-9) 6%, transparent)` / `color-mix(in oklch, var(--color-info-9) 7%, transparent)` |
| `--intent-3a` | `color-mix(in oklch, var(--color-brand-9) 11%, transparent)` / `color-mix(in oklch, var(--color-brand-9) 15%, transparent)` | `color-mix(in oklch, var(--color-brand-secondary-9) 11%, transparent)` | `color-mix(in oklch, var(--color-info-9) 11%, transparent)` / `color-mix(in oklch, var(--color-info-9) 13%, transparent)` | `color-mix(in oklch, var(--color-accent-9) 11%, transparent)` / `color-mix(in oklch, var(--color-accent-9) 15%, transparent)` | `color-mix(in oklch, var(--color-danger-9) 11%, transparent)` / `color-mix(in oklch, var(--color-danger-9) 13%, transparent)` | `color-mix(in oklch, var(--color-success-9) 11%, transparent)` / `color-mix(in oklch, var(--color-success-9) 12%, transparent)` | `color-mix(in oklch, var(--color-warning-9) 11%, transparent)` | `color-mix(in oklch, var(--color-info-9) 11%, transparent)` / `color-mix(in oklch, var(--color-info-9) 13%, transparent)` |
| `--intent-4a` | `color-mix(in oklch, var(--color-brand-9) 17%, transparent)` / `color-mix(in oklch, var(--color-brand-9) 23%, transparent)` | `color-mix(in oklch, var(--color-brand-secondary-9) 17%, transparent)` | `color-mix(in oklch, var(--color-info-9) 17%, transparent)` / `color-mix(in oklch, var(--color-info-9) 20%, transparent)` | `color-mix(in oklch, var(--color-accent-9) 17%, transparent)` / `color-mix(in oklch, var(--color-accent-9) 23%, transparent)` | `color-mix(in oklch, var(--color-danger-9) 17%, transparent)` / `color-mix(in oklch, var(--color-danger-9) 20%, transparent)` | `color-mix(in oklch, var(--color-success-9) 17%, transparent)` / `color-mix(in oklch, var(--color-success-9) 19%, transparent)` | `color-mix(in oklch, var(--color-warning-9) 17%, transparent)` | `color-mix(in oklch, var(--color-info-9) 17%, transparent)` / `color-mix(in oklch, var(--color-info-9) 20%, transparent)` |
| `--intent-5a` | `color-mix(in oklch, var(--color-brand-9) 23%, transparent)` / `color-mix(in oklch, var(--color-brand-9) 31%, transparent)` | `color-mix(in oklch, var(--color-brand-secondary-9) 23%, transparent)` | `color-mix(in oklch, var(--color-info-9) 23%, transparent)` / `color-mix(in oklch, var(--color-info-9) 27%, transparent)` | `color-mix(in oklch, var(--color-accent-9) 23%, transparent)` / `color-mix(in oklch, var(--color-accent-9) 31%, transparent)` | `color-mix(in oklch, var(--color-danger-9) 23%, transparent)` / `color-mix(in oklch, var(--color-danger-9) 27%, transparent)` | `color-mix(in oklch, var(--color-success-9) 23%, transparent)` / `color-mix(in oklch, var(--color-success-9) 25%, transparent)` | `color-mix(in oklch, var(--color-warning-9) 23%, transparent)` | `color-mix(in oklch, var(--color-info-9) 23%, transparent)` / `color-mix(in oklch, var(--color-info-9) 27%, transparent)` |

### Intent utilities

| Token |
| --- |
| `intent-neutral` |
| `intent-brand` |
| `intent-brand-secondary` |
| `intent-brand-purple` |
| `intent-brand-blue` |
| `intent-brand-orange` |
| `intent-accent` |
| `intent-danger` |
| `intent-success` |
| `intent-warning` |
| `intent-info` |

## Data visualisation

Every chart colour comes from `palette.ts` in core and is checked for colour-blind separation in CI. Use the CSS variables in dashboards and `@oztix/roadie-core/dataviz` where a renderer can’t read CSS.

When to use these: [Data visualisation](https://ticketsolutionsptyltd.github.io/roadie/charts/data-visualisation.md), [Colors](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md).

### Categorical

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--chart-1` | `oklch(0.604 0.178 266)` | `oklch(0.83 0.08 262)` |
| `--chart-2` | `oklch(0.735 0.184 353.4)` | `oklch(0.7 0.17 342.3)` |
| `--chart-3` | `oklch(0.484 0.062 199.8)` | `oklch(0.92 0.1 186)` |
| `--chart-4` | `oklch(0.82 0.14 74)` | `oklch(0.779 0.123 80)` |
| `--chart-5` | `oklch(0.46 0.178 305)` | `oklch(0.7 0.18 298.2)` |
| `--chart-6` | `oklch(0.655 0.153 141.4)` | `oklch(0.88 0.15 152.7)` |
| `--chart-7` | `oklch(0.46 0.16 6)` | `oklch(0.69 0.07 1.5)` |
| `--chart-8` | `oklch(0.745 0.117 226.8)` | `oklch(0.761 0.106 235.4)` |

### Small sets

| Token | Value |
| --- | --- |
| `--chart-pair-1` | `var(--chart-1)` |
| `--chart-pair-2` | `var(--chart-2)` |
| `--chart-trio-1` | `var(--chart-1)` |
| `--chart-trio-2` | `var(--chart-2)` |
| `--chart-trio-3` | `var(--chart-3)` |

### Sequential

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--chart-heat-0` | `oklch(0.97 0.032 85)` | `oklch(0.26 0.04 285)` |
| `--chart-heat-1` | `oklch(0.889 0.095 75.6)` | `oklch(0.323 0.115 291.3)` |
| `--chart-heat-2` | `oklch(0.8 0.136 57.5)` | `oklch(0.395 0.175 303.8)` |
| `--chart-heat-3` | `oklch(0.7 0.191 26.3)` | `oklch(0.482 0.212 325.6)` |
| `--chart-heat-4` | `oklch(0.615 0.22 5)` | `oklch(0.57 0.215 350)` |
| `--chart-heat-5` | `oklch(0.531 0.228 343.8)` | `oklch(0.657 0.205 15.6)` |
| `--chart-heat-6` | `oklch(0.438 0.219 312.5)` | `oklch(0.745 0.163 43.8)` |
| `--chart-heat-7` | `oklch(0.355 0.19 294.4)` | `oklch(0.833 0.125 66.3)` |
| `--chart-heat-8` | `oklch(0.28 0.14 285)` | `oklch(0.92 0.086 85)` |

### Diverging

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--chart-diverge-pos-4` | `oklch(0.4 0.2 268)` | `oklch(0.76 0.123 262)` |
| `--chart-diverge-pos-3` | `oklch(0.55 0.118 235.8)` | `oklch(0.685 0.14 232)` |
| `--chart-diverge-pos-2` | `oklch(0.7 0.115 212.5)` | `oklch(0.59 0.104 213.5)` |
| `--chart-diverge-pos-1` | `oklch(0.835 0.061 200)` | `oklch(0.473 0.069 205)` |
| `--chart-diverge-neg-1` | `oklch(0.865 0.076 60)` | `oklch(0.503 0.099 32)` |
| `--chart-diverge-neg-2` | `oklch(0.78 0.135 54)` | `oklch(0.63 0.145 41)` |
| `--chart-diverge-neg-3` | `oklch(0.69 0.178 43.5)` | `oklch(0.732 0.158 56)` |
| `--chart-diverge-neg-4` | `oklch(0.6 0.2 30)` | `oklch(0.83 0.145 74)` |
| `--chart-diverge-0` | `var(--color-neutral-3)` | `var(--color-neutral-6)` |

### Status

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--chart-status-critical` | `oklch(0.569 0.181 28.264)` | `oklch(0.798 0.116 20)` |
| `--chart-status-good` | `var(--color-success-11)` |  |
| `--chart-status-warning` | `var(--color-warning-11)` | `var(--color-warning-9)` |
| `--chart-status-serious` | `var(--color-brand-secondary-11)` | `var(--color-brand-secondary-9)` |

### Highlight

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--chart-highlight` | `oklch(var(--chart-highlight-lc) var(--accent-hue))` |  |
| `--chart-highlight-lc` | `0.604 0.178` | `0.83 0.08` |

### Data greys

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--chart-band` | `color-mix(in oklch, var(--color-neutral-9) 10%, transparent)` | `color-mix(in oklch, var(--color-neutral-11) 9%, transparent)` |
| `--chart-context` | `var(--color-neutral-8)` | `color-mix(in oklch, var(--color-neutral-10), var(--color-neutral-11) 35%)` |
| `--chart-median` | `var(--color-neutral-8)` |  |
| `--chart-other` | `var(--color-neutral-9)` | `color-mix(in oklch, var(--color-neutral-10), var(--color-neutral-11) 45%)` |
| `--chart-missing` | `var(--color-neutral-5)` |  |

### Chart ink

| Token | Value |
| --- | --- |
| `--chart-grid` | `var(--intent-border-subtler)` |
| `--chart-axis` | `var(--intent-border-normal)` |
| `--chart-label` | `var(--intent-text-subtle)` |
| `--chart-value` | `var(--intent-text-strong)` |
| `--chart-gap` | `var(--intent-bg-normal)` |

### Tailwind utilities

| Token | Value | Classes |
| --- | --- | --- |
| `--color-chart-1` | `var(--chart-1)` | `bg-chart-1` `text-chart-1` `border-chart-1` `fill-chart-1` `stroke-chart-1` |
| `--color-chart-2` | `var(--chart-2)` | `bg-chart-2` `text-chart-2` `border-chart-2` `fill-chart-2` `stroke-chart-2` |
| `--color-chart-3` | `var(--chart-3)` | `bg-chart-3` `text-chart-3` `border-chart-3` `fill-chart-3` `stroke-chart-3` |
| `--color-chart-4` | `var(--chart-4)` | `bg-chart-4` `text-chart-4` `border-chart-4` `fill-chart-4` `stroke-chart-4` |
| `--color-chart-5` | `var(--chart-5)` | `bg-chart-5` `text-chart-5` `border-chart-5` `fill-chart-5` `stroke-chart-5` |
| `--color-chart-6` | `var(--chart-6)` | `bg-chart-6` `text-chart-6` `border-chart-6` `fill-chart-6` `stroke-chart-6` |
| `--color-chart-7` | `var(--chart-7)` | `bg-chart-7` `text-chart-7` `border-chart-7` `fill-chart-7` `stroke-chart-7` |
| `--color-chart-8` | `var(--chart-8)` | `bg-chart-8` `text-chart-8` `border-chart-8` `fill-chart-8` `stroke-chart-8` |
| `--color-chart-pair-1` | `var(--chart-pair-1)` | `bg-chart-pair-1` `text-chart-pair-1` `border-chart-pair-1` `fill-chart-pair-1` `stroke-chart-pair-1` |
| `--color-chart-pair-2` | `var(--chart-pair-2)` | `bg-chart-pair-2` `text-chart-pair-2` `border-chart-pair-2` `fill-chart-pair-2` `stroke-chart-pair-2` |
| `--color-chart-trio-1` | `var(--chart-trio-1)` | `bg-chart-trio-1` `text-chart-trio-1` `border-chart-trio-1` `fill-chart-trio-1` `stroke-chart-trio-1` |
| `--color-chart-trio-2` | `var(--chart-trio-2)` | `bg-chart-trio-2` `text-chart-trio-2` `border-chart-trio-2` `fill-chart-trio-2` `stroke-chart-trio-2` |
| `--color-chart-trio-3` | `var(--chart-trio-3)` | `bg-chart-trio-3` `text-chart-trio-3` `border-chart-trio-3` `fill-chart-trio-3` `stroke-chart-trio-3` |
| `--color-chart-heat-0` | `var(--chart-heat-0)` | `bg-chart-heat-0` `text-chart-heat-0` `border-chart-heat-0` `fill-chart-heat-0` `stroke-chart-heat-0` |
| `--color-chart-heat-1` | `var(--chart-heat-1)` | `bg-chart-heat-1` `text-chart-heat-1` `border-chart-heat-1` `fill-chart-heat-1` `stroke-chart-heat-1` |
| `--color-chart-heat-2` | `var(--chart-heat-2)` | `bg-chart-heat-2` `text-chart-heat-2` `border-chart-heat-2` `fill-chart-heat-2` `stroke-chart-heat-2` |
| `--color-chart-heat-3` | `var(--chart-heat-3)` | `bg-chart-heat-3` `text-chart-heat-3` `border-chart-heat-3` `fill-chart-heat-3` `stroke-chart-heat-3` |
| `--color-chart-heat-4` | `var(--chart-heat-4)` | `bg-chart-heat-4` `text-chart-heat-4` `border-chart-heat-4` `fill-chart-heat-4` `stroke-chart-heat-4` |
| `--color-chart-heat-5` | `var(--chart-heat-5)` | `bg-chart-heat-5` `text-chart-heat-5` `border-chart-heat-5` `fill-chart-heat-5` `stroke-chart-heat-5` |
| `--color-chart-heat-6` | `var(--chart-heat-6)` | `bg-chart-heat-6` `text-chart-heat-6` `border-chart-heat-6` `fill-chart-heat-6` `stroke-chart-heat-6` |
| `--color-chart-heat-7` | `var(--chart-heat-7)` | `bg-chart-heat-7` `text-chart-heat-7` `border-chart-heat-7` `fill-chart-heat-7` `stroke-chart-heat-7` |
| `--color-chart-heat-8` | `var(--chart-heat-8)` | `bg-chart-heat-8` `text-chart-heat-8` `border-chart-heat-8` `fill-chart-heat-8` `stroke-chart-heat-8` |
| `--color-chart-diverge-pos-4` | `var(--chart-diverge-pos-4)` | `bg-chart-diverge-pos-4` `text-chart-diverge-pos-4` `border-chart-diverge-pos-4` `fill-chart-diverge-pos-4` `stroke-chart-diverge-pos-4` |
| `--color-chart-diverge-pos-3` | `var(--chart-diverge-pos-3)` | `bg-chart-diverge-pos-3` `text-chart-diverge-pos-3` `border-chart-diverge-pos-3` `fill-chart-diverge-pos-3` `stroke-chart-diverge-pos-3` |
| `--color-chart-diverge-pos-2` | `var(--chart-diverge-pos-2)` | `bg-chart-diverge-pos-2` `text-chart-diverge-pos-2` `border-chart-diverge-pos-2` `fill-chart-diverge-pos-2` `stroke-chart-diverge-pos-2` |
| `--color-chart-diverge-pos-1` | `var(--chart-diverge-pos-1)` | `bg-chart-diverge-pos-1` `text-chart-diverge-pos-1` `border-chart-diverge-pos-1` `fill-chart-diverge-pos-1` `stroke-chart-diverge-pos-1` |
| `--color-chart-diverge-0` | `var(--chart-diverge-0)` | `bg-chart-diverge-0` `text-chart-diverge-0` `border-chart-diverge-0` `fill-chart-diverge-0` `stroke-chart-diverge-0` |
| `--color-chart-diverge-neg-1` | `var(--chart-diverge-neg-1)` | `bg-chart-diverge-neg-1` `text-chart-diverge-neg-1` `border-chart-diverge-neg-1` `fill-chart-diverge-neg-1` `stroke-chart-diverge-neg-1` |
| `--color-chart-diverge-neg-2` | `var(--chart-diverge-neg-2)` | `bg-chart-diverge-neg-2` `text-chart-diverge-neg-2` `border-chart-diverge-neg-2` `fill-chart-diverge-neg-2` `stroke-chart-diverge-neg-2` |
| `--color-chart-diverge-neg-3` | `var(--chart-diverge-neg-3)` | `bg-chart-diverge-neg-3` `text-chart-diverge-neg-3` `border-chart-diverge-neg-3` `fill-chart-diverge-neg-3` `stroke-chart-diverge-neg-3` |
| `--color-chart-diverge-neg-4` | `var(--chart-diverge-neg-4)` | `bg-chart-diverge-neg-4` `text-chart-diverge-neg-4` `border-chart-diverge-neg-4` `fill-chart-diverge-neg-4` `stroke-chart-diverge-neg-4` |
| `--color-chart-status-good` | `var(--chart-status-good)` | `bg-chart-status-good` `text-chart-status-good` `border-chart-status-good` `fill-chart-status-good` `stroke-chart-status-good` |
| `--color-chart-status-warning` | `var(--chart-status-warning)` | `bg-chart-status-warning` `text-chart-status-warning` `border-chart-status-warning` `fill-chart-status-warning` `stroke-chart-status-warning` |
| `--color-chart-status-serious` | `var(--chart-status-serious)` | `bg-chart-status-serious` `text-chart-status-serious` `border-chart-status-serious` `fill-chart-status-serious` `stroke-chart-status-serious` |
| `--color-chart-status-critical` | `var(--chart-status-critical)` | `bg-chart-status-critical` `text-chart-status-critical` `border-chart-status-critical` `fill-chart-status-critical` `stroke-chart-status-critical` |
| `--color-chart-highlight` | `var(--chart-highlight)` | `bg-chart-highlight` `text-chart-highlight` `border-chart-highlight` `fill-chart-highlight` `stroke-chart-highlight` |
| `--color-chart-context` | `var(--chart-context)` | `bg-chart-context` `text-chart-context` `border-chart-context` `fill-chart-context` `stroke-chart-context` |
| `--color-chart-band` | `var(--chart-band)` | `bg-chart-band` `text-chart-band` `border-chart-band` `fill-chart-band` `stroke-chart-band` |
| `--color-chart-median` | `var(--chart-median)` | `bg-chart-median` `text-chart-median` `border-chart-median` `fill-chart-median` `stroke-chart-median` |
| `--color-chart-other` | `var(--chart-other)` | `bg-chart-other` `text-chart-other` `border-chart-other` `fill-chart-other` `stroke-chart-other` |
| `--color-chart-missing` | `var(--chart-missing)` | `bg-chart-missing` `text-chart-missing` `border-chart-missing` `fill-chart-missing` `stroke-chart-missing` |
| `--color-chart-grid` | `var(--chart-grid)` | `bg-chart-grid` `text-chart-grid` `border-chart-grid` `fill-chart-grid` `stroke-chart-grid` |
| `--color-chart-axis` | `var(--chart-axis)` | `bg-chart-axis` `text-chart-axis` `border-chart-axis` `fill-chart-axis` `stroke-chart-axis` |
| `--color-chart-label` | `var(--chart-label)` | `bg-chart-label` `text-chart-label` `border-chart-label` `fill-chart-label` `stroke-chart-label` |
| `--color-chart-value` | `var(--chart-value)` | `bg-chart-value` `text-chart-value` `border-chart-value` `fill-chart-value` `stroke-chart-value` |
| `--color-chart-gap` | `var(--chart-gap)` | `bg-chart-gap` `text-chart-gap` `border-chart-gap` `fill-chart-gap` `stroke-chart-gap` |

## Emphasis and states

A preset is a whole surface in one class. Add `is-interactive` for hover, press, focus ring and disabled, or `is-interactive-field` on a text field.

When to use these: [Colors](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md), [Interactions](https://ticketsolutionsptyltd.github.io/roadie/foundations/interactions.md), [Accessibility](https://ticketsolutionsptyltd.github.io/roadie/foundations/accessibility.md).

### Focus ring

| Token | Value |
| --- | --- |
| `--focus-ring-width` | `4px` |
| `--focus-ring-opacity` | `30%` |
| `--focus-ring-opacity-dark` | `20%` |

### Emphasis presets

| Token | Description |
| --- | --- |
| `emphasis-strong` |  |
| `emphasis-normal` |  |
| `emphasis-subtle` |  |
| `emphasis-subtler` |  |
| `emphasis-inverted` |  |
| `emphasis-raised` |  |
| `emphasis-sunken` |  |
| `emphasis-field` | Text fields: sunken, with one translucent edge that takes the fill's tint instead of sitting on it as grey. Pair with is-interactive-field, which owns hover, focus and invalid. The edge is resolved on the element so an intent on the field tints it too. The mix sits in @supports with an explicit fallback, or the build falls back to a solid step 9, darker than the border it replaces. |
| `emphasis-floating` |  |
| `is-selected` | The chosen item in a trackless control, over emphasis-subtle: a soft fill and a strong icon, which carry the state together. The fill alone is under APCA's Lc 45 for UI, so this is for quiet controls. Doubled, and repeated for the interactive states, to outrank the emphasis in either emit order. Forced colours drop the fill, so an edge takes over. |
| `is-unselected` | The unchosen items beside an is-selected one. Their subtle label sits well under the chosen strong one, so the label tells them apart as well as the fill. Doubled to outrank an emphasis's text. Apply it only at rest, so it never meets the chosen state's utility. |
| `is-selected-label` | is-selected's label without its fill, for a chosen item whose fill is drawn by an indicator behind it. |
| `is-selected-label-on-strong` | The same over an emphasis-strong indicator. |
| `is-translucent` | Pairs with a raised or floating fill. The doubled selector outranks that fill in either emit order; a field's hover, focus and invalid fills still win. |
| `emphasis-overlay` | Fixed-dark so it stays a scrim in both themes (the intent scale flips light/dark), tinted by the intent hue: neutral near-black, danger a dark red. Its label is fixed white for the same reason. |
| `emphasis-overlay-subtle` | Tints without blurring, so what's behind stays readable: a sheet that peeks over its page. |

### Interaction states

| Token | Description |
| --- | --- |
| `is-interactive-field` |  |
| `is-interactive-field-group` |  |
| `is-focusable` | is-interactive's focus ring alone, for a focus target that isn't clicked, such as a scroll region or a tabIndex=-1 landing target. is-interactive applies it, so the two compose on one element in either order. |
| `is-interactive` |  |
| `is-interactive-within` | A surface whose main link sits inside it, such as a card that also holds other actions. Mark that link with data-interactive-target: its overlay covers the surface, other controls sit above it, and the surface takes the link's hover, press and focus states. Inert until a target is present. A target belongs to the nearest surface around it, so a card holding table rows that are surfaces of their own ignores their targets. Each state rule ends on the surface itself, so the :not(:has()) adds nothing to the invalidation set. @scope can't do this: its lower limit doesn't bound a :has() argument. |

### Internal surfaces

| Token | Description |
| --- | --- |
| `surface-floating` | Internal, not public API: the floating fill and the subtle text lift that keeps Lc 75 on it, kept together so they can't drift apart. emphasis-floating builds on it, and so do popups that draw their own edge and shadow. |

## Typography

Sizes from `text-lg` up are fluid. A size class sets no line height, so pair it with `leading-*` or use a composed `text-display-*` or `text-ui` style.

When to use these: [Typography](https://ticketsolutionsptyltd.github.io/roadie/foundations/typography.md), [Prose styles](https://ticketsolutionsptyltd.github.io/roadie/foundations/prose.md).

### Font families

| Token | Value | Classes |
| --- | --- | --- |
| `--font-sans` | `'Intermission', 'Inter', ui-sans-serif, system-ui, sans-serif` | `font-sans` |
| `--font-mono` | `'IBM Plex Mono', ui-monospace, monospace` | `font-mono` |
| `--font-body` | `var(--font-sans)` | `font-body` |
| `--font-display` | `var(--font-sans)` | `font-display` |

### Font sizes

| Token | Value | Classes |
| --- | --- | --- |
| `--text-xs` | `0.75rem` | `text-xs` |
| `--text-sm` | `0.875rem` | `text-sm` |
| `--text-base` | `1rem` | `text-base` |
| `--text-lg` | `clamp(1.125rem, 1.0147rem + 0.3676vw, 1.25rem)` | `text-lg` |
| `--text-xl` | `clamp(1.25rem, 1.0294rem + 0.7353vw, 1.5rem)` | `text-xl` |
| `--text-2xl` | `clamp(1.5rem, 1.0588rem + 1.4706vw, 2rem)` | `text-2xl` |
| `--text-3xl` | `clamp(1.75rem, 1.0882rem + 2.2059vw, 2.5rem)` | `text-3xl` |
| `--text-4xl` | `clamp(2rem, 1.1176rem + 2.9412vw, 3rem)` | `text-4xl` |
| `--text-5xl` | `clamp(2.25rem, 0.7059rem + 5.1471vw, 4rem)` | `text-5xl` |
| `--text-6xl` | `clamp(2.5rem, 0.5147rem + 6.6176vw, 4.75rem)` | `text-6xl` |
| `--text-7xl` | `clamp(2.75rem, -0.1176rem + 9.5588vw, 6rem)` | `text-7xl` |

### Font size line heights

| Token | Value |
| --- | --- |
| `--text-xs--line-height` | `initial` |
| `--text-sm--line-height` | `initial` |
| `--text-base--line-height` | `initial` |
| `--text-lg--line-height` | `initial` |
| `--text-xl--line-height` | `initial` |
| `--text-2xl--line-height` | `initial` |
| `--text-3xl--line-height` | `initial` |
| `--text-4xl--line-height` | `initial` |
| `--text-5xl--line-height` | `initial` |
| `--text-6xl--line-height` | `initial` |
| `--text-7xl--line-height` | `initial` |

### Line heights

| Token | Value | Classes |
| --- | --- | --- |
| `--leading-tightest` | `1` | `leading-tightest` |
| `--leading-tighter` | `1.2` | `leading-tighter` |
| `--leading-tight` | `1.35` | `leading-tight` |
| `--leading-normal` | `1.5` | `leading-normal` |
| `--leading-loose` | `1.625` | `leading-loose` |
| `--leading-looser` | `1.75` | `leading-looser` |
| `--leading-loosest` | `2` | `leading-loosest` |
| `--leading-display` | `1.2` | `leading-display` |
| `--leading-ui` | `1.35` | `leading-ui` |
| `--leading-prose` | `1.5` | `leading-prose` |
| `--leading-code` | `1.625` | `leading-code` |

### Letter spacing

| Token | Value | Classes |
| --- | --- | --- |
| `--tracking-tightest` | `-0.03em` | `tracking-tightest` |
| `--tracking-tighter` | `-0.02em` | `tracking-tighter` |
| `--tracking-tight` | `-0.01em` | `tracking-tight` |
| `--tracking-normal` | `0em` | `tracking-normal` |
| `--tracking-loose` | `0.01em` | `tracking-loose` |
| `--tracking-looser` | `0.02em` | `tracking-looser` |
| `--tracking-loosest` | `0.03em` | `tracking-loosest` |
| `--tracking-display` | `-0.02em` | `tracking-display` |
| `--tracking-ui` | `-0.01em` | `tracking-ui` |
| `--tracking-prose` | `-0.01em` | `tracking-prose` |
| `--tracking-code` | `0em` | `tracking-code` |

### Prose

| Token | Value |
| --- | --- |
| `--prose-size` | `var(--text-base)` |
| `--prose-leading` | `var(--leading-prose)` |
| `--prose-flow` | `1.25em` |
| `--prose-measure` | `65ch` |
| `--prose-h1-size` | `var(--text-4xl)` |
| `--prose-h1-weight` | `700` |
| `--prose-h2-size` | `var(--text-3xl)` |
| `--prose-h2-weight` | `700` |
| `--prose-h3-size` | `var(--text-2xl)` |
| `--prose-h3-weight` | `700` |
| `--prose-h4-size` | `var(--text-xl)` |
| `--prose-h4-weight` | `700` |
| `--prose-h5-size` | `var(--text-lg)` |
| `--prose-h5-weight` | `600` |
| `--prose-h6-size` | `var(--text-base)` |
| `--prose-h6-weight` | `600` |
| `prose` |  |

### Display styles

| Token |
| --- |
| `text-display-ui` |
| `text-display-ui-1` |
| `text-display-ui-2` |
| `text-display-ui-3` |
| `text-display-ui-4` |
| `text-display-ui-5` |
| `text-display-ui-6` |
| `text-display-prose` |
| `text-display-prose-1` |
| `text-display-prose-2` |
| `text-display-prose-3` |
| `text-display-prose-4` |
| `text-display-prose-5` |
| `text-display-prose-6` |

### Body styles

| Token |
| --- |
| `text-ui` |
| `text-ui-meta` |
| `text-prose` |
| `text-code` |

## Elevation and layering

Shadows take their tint from `--intent-hue`, so a danger surface casts a warm shadow. Stack overlays with the named `z-*` tiers, never a raw number.

When to use these: [Elevation](https://ticketsolutionsptyltd.github.io/roadie/foundations/elevation.md).

### Shadows

| Token | Light | Dark, if different | Classes |
| --- | --- | --- | --- |
| `--shadow-xs` | `0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.07)` | `0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.3), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.3)` | `shadow-xs` |
| `--shadow-sm` | `0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.06), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.06)` | `0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.35), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.26), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.26)` | `shadow-sm` |
| `--shadow-md` | `0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 4px 4px 0 oklch(0.3 0.05 var(--intent-hue) / 0.05)` | `0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.35), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.22), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.22), 0 4px 4px 0 oklch(0.05 0.02 var(--intent-hue) / 0.22)` | `shadow-md` |
| `--shadow-lg` | `0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.045), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.045), 0 4px 4px 0 oklch(0.3 0.05 var(--intent-hue) / 0.045), 0 8px 8px 0 oklch(0.3 0.05 var(--intent-hue) / 0.045)` | `0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.35), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2), 0 4px 4px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2), 0 8px 8px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2)` | `shadow-lg` |
| `--shadow-xl` | `0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.06), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 4px 4px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 8px 8px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 16px 16px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04)` | `0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.4), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18), 0 4px 4px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18), 0 8px 8px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18), 0 16px 16px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18)` | `shadow-xl` |
| `--shadow-2xl` | `0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.06), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 4px 4px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 8px 8px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 16px 16px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 32px 32px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035)` | `0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.4), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 4px 4px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 8px 8px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 16px 16px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 32px 32px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16)` | `shadow-2xl` |
| `--inset-shadow-xs` | `inset 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.06)` | `inset 0 1px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.04)` | `inset-shadow-xs` |
| `--inset-shadow-sm` | `inset 0 1px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.07), inset 0 2px 4px -2px oklch(0.3 0.05 var(--intent-hue) / 0.05)` | `inset 0 1px 3px 0 oklch(0.05 0.02 var(--intent-hue) / 0.25), inset 0 2px 6px -2px oklch(0.05 0.02 var(--intent-hue) / 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05)` | `inset-shadow-sm` |
| `shadow-xs` |  |  |  |
| `shadow-sm` |  |  |  |
| `shadow-md` |  |  |  |
| `shadow-lg` |  |  |  |
| `shadow-xl` |  |  |  |
| `shadow-2xl` |  |  |  |
| `inset-shadow-xs` |  |  |  |
| `inset-shadow-sm` |  |  |  |

### Rim light

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--rim-light-subtler` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.08)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.02)` |
| `--rim-light-subtle` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.15)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.04)` |
| `--rim-light-normal` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.06)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.06)` |
| `--rim-light-strong` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.03)` |
| `--rim-light` | `var(--rim-light-normal)` |  |
| `--rim-light-edge` | `rgba(255, 255, 255, 0.6)` | `rgba(255, 255, 255, 0.1)` |
| `rim-light` |  |  |

### Sheen

| Token | Light | Dark, if different |
| --- | --- | --- |
| `--sheen-shade` | `color-mix(in oklch, var(--intent-9) 32%, transparent)` | `transparent` |
| `--sheen-highlight` | `transparent` | `color-mix(in oklch, var(--intent-9) 34%, transparent)` |

### Layering

| Token | Value | Classes | Description |
| --- | --- | --- | --- |
| `--z-index-hide` | `-1` | `z-hide` | pulled out of the stacking flow |
| `--z-index-base` | `0` | `z-base` | default in-flow content |
| `--z-index-docked` | `10` | `z-docked` | in-flow elevated accents pinned to a surface |
| `--z-index-sticky` | `20` | `z-sticky` | position: sticky headers / toolbars |
| `--z-index-overlay` | `30` | `z-overlay` | dialog / drawer backdrop scrim |
| `--z-index-modal` | `40` | `z-modal` | dialog / drawer surface |
| `--z-index-popover` | `50` | `z-popover` | popover, select, combobox, autocomplete, dropdown panels |
| `--z-index-toast` | `60` | `z-toast` | transient notifications |
| `--z-index-tooltip` | `70` | `z-tooltip` | tooltips — always on top |
| `--z-index-alert` | `80` | `z-alert` | blocking alert dialogs — above an open modal / drawer |

## Shape and layout

Roadie keeps Tailwind's radius scale and adds `rounded-5xl` to `rounded-7xl` for hero and feature surfaces. `container-*` centres a page at any container width. Spacing utilities multiply `--spacing`, and the breakpoints set where `sm:` to `2xl:` switch.

When to use these: [Shape](https://ticketsolutionsptyltd.github.io/roadie/foundations/shape.md), [Layout](https://ticketsolutionsptyltd.github.io/roadie/foundations/layout.md).

### Radius

| Token | Value | Classes | Description |
| --- | --- | --- | --- |
| `--radius-xs` | `0.125rem` | `rounded-xs` |  |
| `--radius-sm` | `0.25rem` | `rounded-sm` |  |
| `--radius-md` | `0.375rem` | `rounded-md` |  |
| `--radius-lg` | `0.5rem` | `rounded-lg` |  |
| `--radius-xl` | `0.75rem` | `rounded-xl` |  |
| `--radius-2xl` | `1rem` | `rounded-2xl` |  |
| `--radius-3xl` | `1.5rem` | `rounded-3xl` |  |
| `--radius-4xl` | `2rem` | `rounded-4xl` |  |
| `--radius-5xl` | `2.5rem` | `rounded-5xl` | 40px |
| `--radius-6xl` | `3rem` | `rounded-6xl` | 48px |
| `--radius-7xl` | `3.5rem` | `rounded-7xl` | 56px |

### Containers

| Token | Value | Classes | Description |
| --- | --- | --- | --- |
| `--container-3xs` | `16rem` | `container-3xs` `max-w-3xs` |  |
| `--container-2xs` | `18rem` | `container-2xs` `max-w-2xs` |  |
| `--container-xs` | `20rem` | `container-xs` `max-w-xs` |  |
| `--container-sm` | `24rem` | `container-sm` `max-w-sm` |  |
| `--container-md` | `28rem` | `container-md` `max-w-md` |  |
| `--container-lg` | `32rem` | `container-lg` `max-w-lg` |  |
| `--container-xl` | `36rem` | `container-xl` `max-w-xl` |  |
| `--container-2xl` | `42rem` | `container-2xl` `max-w-2xl` |  |
| `--container-3xl` | `48rem` | `container-3xl` `max-w-3xl` |  |
| `--container-4xl` | `56rem` | `container-4xl` `max-w-4xl` |  |
| `--container-5xl` | `64rem` | `container-5xl` `max-w-5xl` |  |
| `--container-6xl` | `72rem` | `container-6xl` `max-w-6xl` |  |
| `--container-7xl` | `80rem` | `container-7xl` `max-w-7xl` |  |
| `--container-8xl` | `90rem` | `container-8xl` `max-w-8xl` | 1440px |
| `container-*` |  |  | Container: centered with responsive padding and configurable max width. Replaces Tailwind's default container and the v1 <Container> component. Usage: <div className="container-8xl">...</div> → max-width: 1440px <div className="container-4xl">...</div> → max-width: 896px Any --container-* token works: 3xs–7xl (Tailwind defaults) + 8xl (1440px). |

### Spacing

| Token | Value |
| --- | --- |
| `--spacing` | `0.25rem` |

### Breakpoints

| Token | Value |
| --- | --- |
| `--breakpoint-sm` | `40rem` |
| `--breakpoint-md` | `48rem` |
| `--breakpoint-lg` | `64rem` |
| `--breakpoint-xl` | `80rem` |
| `--breakpoint-2xl` | `96rem` |

## Motion

Press a preview to play it. Colour and opacity use the standard curves; transforms use `--ease-spring`. Under reduced motion every duration drops to near zero.

When to use these: [Motion](https://ticketsolutionsptyltd.github.io/roadie/foundations/motion.md), [View transitions](https://ticketsolutionsptyltd.github.io/roadie/foundations/view-transitions.md).

### Durations

| Token | Value | Classes |
| --- | --- | --- |
| `--duration-instant` | `0ms` |  |
| `--duration-fastest` | `50ms` |  |
| `--duration-fast` | `100ms` |  |
| `--duration-normal` | `150ms` |  |
| `--duration-moderate` | `200ms` |  |
| `--duration-slow` | `300ms` |  |
| `--duration-slower` | `400ms` |  |
| `--duration-slowest` | `600ms` |  |
| `--duration-ambient` | `1800ms` |  |
| `--duration-sweep` | `2400ms` |  |
| `--transition-duration-instant` | `var(--duration-instant)` | `duration-instant` |
| `--transition-duration-fastest` | `var(--duration-fastest)` | `duration-fastest` |
| `--transition-duration-fast` | `var(--duration-fast)` | `duration-fast` |
| `--transition-duration-normal` | `var(--duration-normal)` | `duration-normal` |
| `--transition-duration-moderate` | `var(--duration-moderate)` | `duration-moderate` |
| `--transition-duration-slow` | `var(--duration-slow)` | `duration-slow` |
| `--transition-duration-slower` | `var(--duration-slower)` | `duration-slower` |
| `--transition-duration-slowest` | `var(--duration-slowest)` | `duration-slowest` |

### Easings

| Token | Value | Classes |
| --- | --- | --- |
| `--ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | `ease-standard` |
| `--ease-enter` | `cubic-bezier(0, 0, 0.2, 1)` | `ease-enter` |
| `--ease-exit` | `cubic-bezier(0.4, 0, 1, 1)` | `ease-exit` |
| `--ease-spring` | `linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1)` | `ease-spring` |
| `--ease-spring-lively` | `linear(0, 0.012 1.7%, 0.044 3.3%, 0.092 5%, 0.223 8.3%, 0.607 16.7%, 0.744 20%, 0.859 23.3%, 0.949 26.7%, 1.015 30%, 1.073 35%, 1.094 40%, 1.085 46.7%, 1.008 66.7%, 0.991 81.7%, 1)` | `ease-spring-lively` |

### Transitions

| Token | Value |
| --- | --- |
| `--interactive-transition` | `background-color var(--duration-moderate) var(--ease-standard), border-color var(--duration-moderate) var(--ease-standard), color var(--duration-moderate) var(--ease-standard), box-shadow var(--duration-moderate) var(--ease-standard), outline-width var(--duration-normal) var(--ease-standard), outline-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-spring)` |

### Stagger

| Token | Value |
| --- | --- |
| `--stagger-base` | `30ms` |

### Animations

| Token | Description |
| --- | --- |
| `animate-fade-in` |  |
| `animate-scale-in` |  |
| `animate-pop-in` | Entrance: fade + slide-up + slight scale. Pair with `origin-bottom` (or any `origin-*`) to grow from a specific edge. |
| `motion-fade-in` | @deprecated use animate-fade-in, remove in v3 |
| `motion-fade-out` | @deprecated no replacement, use motion-scale or motion-slide, remove in v3 |
| `motion-scale-in` | @deprecated use animate-scale-in, remove in v3 |
| `motion-scale-out` | @deprecated no replacement, use motion-scale or motion-slide, remove in v3 |
| `motion-pop-in` | @deprecated use animate-pop-in, remove in v3 |
| `animate-pulse-subtle` | Loops while content is pending. `prefers-reduced-motion` cuts it to a single 0.01ms pass, which leaves the element at full opacity: a static tint. |
| `animate-shimmer` | A loading surface: a tint pulse under a highlight sweeping across it. `background-attachment: fixed` anchors the gradient to the viewport, so every element wearing this class shows the slice of one shared sweep that falls where it sits. A one-line placeholder and a full-width block then agree, which a per-element sweep cannot do: it would restart at each element's own edges and run at a different apparent speed on each. The cost is that the sweep paints rather than riding the compositor, since only `background-position` can express a shared gradient. The element's own fill (from `emphasis-*`) is the base; the gradient paints `--sheen-shade` over it everywhere the band is not and `--sheen-highlight` inside the band, so the band is the lighter of the two in both themes. Radius clips the background, so a circle stays a circle. Reduced motion drops the gradient and leaves the static tint. |
| `animate-indeterminate` | Work of unknown length: a bar sweeping across a positioned parent that clips its overflow, such as a progress track. The sweep animates the logical inset, so it runs right to left under `dir='rtl'`. Reduced motion holds a full-width bar at a soft tint, since the global reset would otherwise park it off the end of the track. |
| `animate-shake` |  |
| `animate-nudge` | One-shot attention cues. Replay by toggling the class. |
| `animate-pop` |  |
| `animate-pop-tap` | A tap response: `animate-pop` at 600ms reads as a notification. |

### Enter and exit transitions

| Token | Description |
| --- | --- |
| `motion-scale` | Scale + fade. Pair with `origin-[var(--transform-origin)]` (or any `origin-*`) to scale from a specific point. |
| `motion-slide` | Fade + slide — up on enter, down on exit. |
| `motion-drawer` | Drawer surface — slides off its anchored edge and tracks Base UI's live swipe offset. `transform`, not `translate`: Base UI writes an inline `transform` mid-swipe, which must override the resting value, not compose. A surface held off its edge sets `--drawer-float` so it travels clear. |
| `motion-toast` | A toast in a Base UI toast viewport. Collapsed, the stack sits behind the frontmost toast, clamped to its height and peeking out away from the edge; fanned out while the viewport is hovered or focused. Enters, restacks and snaps back from a swipe on a lively spring; leaves quickly towards its edge or the way it was swiped. Pair with `absolute bottom-0 origin-bottom`, or with `absolute top-0 origin-top` and `data-side='top'` for a top viewport. |
| `is-disclosure-animated` | Put on a `<details>`, or a Base UI collapsible panel, so its content opens and closes by height. |

### Keyframes

| Token |
| --- |
| `fade-in` |
| `fade-out` |
| `scale-in` |
| `scale-out` |
| `shake` |
| `nudge` |
| `pop` |
| `pulse-subtle` |
| `shimmer-sweep` |
| `indeterminate-sweep` |
| `pop-in` |

## Component utilities

The same styles the React components apply, for server-rendered and Vue templates. Pair `btn` with a size, an intent and an emphasis.

When to use these: [Date and time](https://ticketsolutionsptyltd.github.io/roadie/foundations/date-and-time.md), [Linking](https://ticketsolutionsptyltd.github.io/roadie/foundations/linking.md), [Navigation](https://ticketsolutionsptyltd.github.io/roadie/foundations/navigation.md).

### Buttons

| Token |
| --- |
| `btn` |
| `btn-xs` |
| `btn-sm` |
| `btn-md` |
| `btn-lg` |
| `btn-icon-xs` |
| `btn-icon-sm` |
| `btn-icon-md` |
| `btn-icon-lg` |

### Text links

| Token | Description |
| --- | --- |
| `link-normal` | The underline is a layer at the bottom and the fill sits just above it. Engaged, the underline takes the fill's colour, so the two read as one shape as the fill completes. |
| `link-strong` | strong fills as emphasis-strong does. Its text is two text-clipped layers over the fill: the on-strong ink grows with the fill, so each letter turns as the fill reaches it, over the resting ink. The opaque fill runs under the underline, so no seam shows. |
| `link-subtle` | The leave waits a beat, so a pointer sweeping down a list doesn't flicker each link it crosses. The rise's overshoot is a fraction of a pixel, so it never reaches the text. |

### Calendar tile

| Token | Description |
| --- | --- |
| `calendar-tile` |  |
| `calendar-tile-sm` |  |
| `calendar-tile-lg` |  |
| `calendar-tile-top` | The band's height is set per size, so it takes about a third of the tile rather than whatever the type and padding add up to. Each height is the type plus 2px either side. The transparent border shares that 2px with the padding, so the text overflows the content box slightly and place-content centres it in the whole band. |
| `calendar-tile-day` |  |

### Variants

| Token | Description |
| --- | --- |
| `navigator-expanded` | Navigator: the one variant every expanded style is written with. |