All Tokens

Keyboard focus ring.

A form control's own background (fields, checkboxes, option cards). Equal to surface.content today so it can diverge later.

The edge of a small control that has no face to speak of (checkbox, radio): the outline is the whole shape, so it is drawn at a weight that reads on its own against the planes it sits on.

The branded on state of a form control: the fill that says the control is chosen. A checked Checkbox box, a Radio dot, a Toggle track that is on, the filled part of a Slider and its thumb edge. It carries state rather than an action, so the fill is set to read at 3:1 against the planes it sits on, and a checkmark or dot on it is solid.mark. A chosen state that carries a label, such as the selected SegmentedControl segment, reads color.scope.action.solid instead, because the label sets its contract. Distinct from the neutral selected recipes, such as the overlay tint on a selected row or menu item.

A checkmark or dot on the chosen fill; the fill is dark in both themes, so the mark stays light.

The face of a faced control (fields, secondary Button); aliases the bare control face until it needs to diverge.

The quiet edge of a control that has a face and size of its own (fields, Select triggers, the secondary Button). Aliases the neutral hairline: the fill already gives the control its shape, so the edge only has to close it.

Interactive text, e.g. a primary Link. Pinned to the teal 700 step, the same step every hue scope takes in light.

The fill of a primary action, such as the primary Button. Set for the white label's contrast at rest, hover and pressed, not against the plane. A step darker than the accent fill so a primary action dominates the page. Selection controls read color.scope.control.solid, a step lighter.

A mark on the action fill; the fill is dark in both themes, so the mark stays light.

Unset in the "light" theme, which authors "color-scope-action-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Destructive interactive text, e.g. a critical Link. Sits a step lighter than text.critical in light mode; hover and pressed states darken it with the text lever.

Destructive interactive controls, e.g. a critical primary Button.

Unset in the "light" theme, which authors "color-scope-destructive-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-accent-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-caution-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-critical-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-feature-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-information-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-neutral-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-success-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-blue-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-brown-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-fuchsia-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-gray-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-green-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-lime-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-olive-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-orange-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-pink-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-red-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-rose-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-silver-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-sky-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.

Unset in the "light" theme, which authors "color-scope-teal-subtle-bg" for this fill slot instead. It ships as the CSS keyword initial, so a var() reading it falls through to its fallback.