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%)`.

Tokens

#Palette roles

#Base tokens

Palette roles

Base tokens