Tokens

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.

20 tokens

Background, text, border and shadow in one class. Add is-interactive for states.

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.
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 3:1, 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.
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.
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.
Tints without blurring, so what's behind stays readable: a sheet that peeks over its page.

Hover, press, focus ring and disabled. Fields shift neutral, then accent, then danger.

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.

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.

20 tokens

Background, text, border and shadow in one class. Add is-interactive for states.

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.
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 3:1, 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.
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.
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.
Tints without blurring, so what's behind stays readable: a sheet that peeks over its page.

Hover, press, focus ring and disabled. Fields shift neutral, then accent, then danger.

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.