# Tokens

A token is read as `$path` (spec.md, section 9). The palette's colour roles come from the theme's palette, and every theme fills all of them; the base tokens are valued by the theme's token sets. A theme may add tokens of its own.

## Palette roles

| Token | |
| --- | --- |
| `$accent` | The accent colour (Material 3 `primary`). |
| `$accent_container` | A softer accent fill (`primary_container`). |
| `$accent_fixed` | A fill that keeps its tone in light and dark (`primary_fixed`). |
| `$accent_fixed_dim` | A dimmer `accent_fixed` (`primary_fixed_dim`). |
| `$bg` | The background (`background`). |
| `$blue` | A blue that stays blue: a hue role. |
| `$bright_blue` | A brighter `blue`. |
| `$bright_cyan` | A brighter `cyan`. |
| `$bright_green` | A brighter `green`. |
| `$bright_magenta` | A brighter `magenta`. |
| `$bright_red` | A brighter `red` (lighter in dark palettes, darker in light). |
| `$bright_yellow` | A brighter `yellow`. |
| `$cyan` | A cyan that stays cyan: a hue role. |
| `$error` | The error colour (`error`). |
| `$error_container` | A softer error fill (`error_container`). |
| `$fg` | Text and icons on surfaces (`on_surface`). |
| `$fg_variant` | Secondary text and icons on surfaces (`on_surface_variant`). |
| `$green` | A green that stays green (success): a hue role. |
| `$inverse_accent` | The accent on `inverse_surface` (`inverse_primary`). |
| `$inverse_fg` | Text and icons on `inverse_surface` (`inverse_on_surface`). |
| `$inverse_surface` | The inverse surface (`inverse_surface`). |
| `$magenta` | A magenta that stays magenta: a hue role. |
| `$on_accent` | Text and icons on `accent` (`on_primary`). |
| `$on_accent_container` | Text and icons on `accent_container` (`on_primary_container`). |
| `$on_accent_fixed` | Text and icons on `accent_fixed` (`on_primary_fixed`). |
| `$on_accent_fixed_variant` | Lower-emphasis text on `accent_fixed` (`on_primary_fixed_variant`). |
| `$on_bg` | Text and icons on `bg` (`on_background`). |
| `$on_error` | Text and icons on `error` (`on_error`). |
| `$on_error_container` | Text and icons on `error_container` (`on_error_container`). |
| `$on_secondary` | Text and icons on `secondary` (`on_secondary`). |
| `$on_secondary_container` | Text and icons on `secondary_container` (`on_secondary_container`). |
| `$on_secondary_fixed` | Text and icons on `secondary_fixed` (`on_secondary_fixed`). |
| `$on_secondary_fixed_variant` | Lower-emphasis text on `secondary_fixed` (`on_secondary_fixed_variant`). |
| `$on_tertiary` | Text and icons on `tertiary` (`on_tertiary`). |
| `$on_tertiary_container` | Text and icons on `tertiary_container` (`on_tertiary_container`). |
| `$on_tertiary_fixed` | Text and icons on `tertiary_fixed` (`on_tertiary_fixed`). |
| `$on_tertiary_fixed_variant` | Lower-emphasis text on `tertiary_fixed` (`on_tertiary_fixed_variant`). |
| `$orange` | An orange that stays orange: a hue role. |
| `$outline` | Outlines (`outline`). |
| `$outline_variant` | Subtle outlines and dividers (`outline_variant`). |
| `$red` | A red that stays red (terminal red, errors): a hue role. |
| `$scrim` | The scrim colour (`scrim`). |
| `$secondary` | The secondary colour (`secondary`). |
| `$secondary_container` | A softer secondary fill (`secondary_container`). |
| `$secondary_fixed` | A fill that keeps its tone in light and dark (`secondary_fixed`). |
| `$secondary_fixed_dim` | A dimmer `secondary_fixed` (`secondary_fixed_dim`). |
| `$shadow` | The shadow colour (`shadow`). |
| `$surface` | The surface colour (`surface`). |
| `$surface_bright` | The brightest surface (`surface_bright`). |
| `$surface_container` | The container surface (`surface_container`). |
| `$surface_dim` | The dimmest surface (`surface_dim`). |
| `$surface_high` | A high container surface (`surface_container_high`). |
| `$surface_highest` | The highest container surface (`surface_container_highest`). |
| `$surface_low` | A low container surface (`surface_container_low`). |
| `$surface_lowest` | The lowest container surface (`surface_container_lowest`). |
| `$surface_tint` | The surface tint (`surface_tint`). |
| `$surface_variant` | A variant surface (`surface_variant`). |
| `$tertiary` | The tertiary colour (`tertiary`). |
| `$tertiary_container` | A softer tertiary fill (`tertiary_container`). |
| `$tertiary_fixed` | A fill that keeps its tone in light and dark (`tertiary_fixed`). |
| `$tertiary_fixed_dim` | A dimmer `tertiary_fixed` (`tertiary_fixed_dim`). |
| `$yellow` | A yellow that stays yellow (warnings): a hue role. |

## Base tokens

| Token | Type | |
| --- | --- | --- |
| `$accent.container` | `color` | A soft accent fill, such as a selected row: `$accent.alpha(0.22)`. |
| `$accent.hover` | `color` | The accent under the pointer. |
| `$border` | `color` | Hairline borders: `oklch(from $surface, l: l + 0.12)`. |
| `$elevation.lg` | `shadow` | Shadows by height: `md`, `lg`, `xl`. |
| `$elevation.md` | `shadow` | Shadows by height: `md`, `lg`, `xl`. |
| `$elevation.xl` | `shadow` | Shadows by height: `md`, `lg`, `xl`. |
| `$fg.faint` | `color` | Faint text, such as days outside the month: `$fg.alpha(0.35)`. |
| `$fg.muted` | `color` | Secondary text: `$fg.alpha(0.65)`. |
| `$font.caption` | `font` | Fonts: `ui` for text, `title`, `caption` and `mono`. |
| `$font.mono` | `font` | Fonts: `ui` for text, `title`, `caption` and `mono`. |
| `$font.title` | `font` | Fonts: `ui` for text, `title`, `caption` and `mono`. |
| `$font.ui` | `font` | Fonts: `ui` for text, `title`, `caption` and `mono`. |
| `$motion.bouncy` | `Spring` | Springs: `spatial` for movement and size, `effects` for colour and opacity, `bouncy` for play. |
| `$motion.effects` | `Spring` | Springs: `spatial` for movement and size, `effects` for colour and opacity, `bouncy` for play. |
| `$motion.spatial` | `Spring` | Springs: `spatial` for movement and size, `effects` for colour and opacity, `bouncy` for play. |
| `$radius.full` | `length` | Corner radii, smallest to largest, and `full` for pills. |
| `$radius.lg` | `length` | Corner radii, smallest to largest, and `full` for pills. |
| `$radius.md` | `length` | Corner radii, smallest to largest, and `full` for pills. |
| `$radius.sm` | `length` | Corner radii, smallest to largest, and `full` for pills. |
| `$radius.xl` | `length` | Corner radii, smallest to largest, and `full` for pills. |
| `$space.1` | `length` | The spacing scale, smallest to largest: `$space.1` to `$space.4`. |
| `$space.2` | `length` | The spacing scale, smallest to largest: `$space.1` to `$space.4`. |
| `$space.3` | `length` | The spacing scale, smallest to largest: `$space.1` to `$space.4`. |
| `$space.4` | `length` | The spacing scale, smallest to largest: `$space.1` to `$space.4`. |
| `$surface.hi` | `color` | A raised surface, such as under the pointer: `$surface.mix($fg, 8%)`. |