Interface: ModeOverride

Semantic-only overrides for the alternate color mode.

Core tokens are immutable across modes. Only semantic token references may change — remapping to different core tokens for the alternate mode.

Uses DeepPartial: every nested key is optional. Omitting a key inherits the value from the base theme (see deepMerge in roots/helpers.ts, which treats undefined and absent keys identically). An alternate supplies only the leaves that differ from the base.

See

modes.md — "Modes remap semantic references, not core values."

Properties

semantic

semantic: object

Defined in: Types.ts:183

border?

optional border?: object

border.divider?

optional divider?: object

Structural separator between content groups (low emphasis). Use when splitting list rows, sections, toolbar regions, or grouped fields — anywhere the line separates without enclosing. Pair with a low-emphasis color (informational.muted.border.default); do not use to enclose a surface or control — those are outline.surface / outline.control.

border.divider.style?

optional style?: `{core.border.${string}}`

border.divider.width?

optional width?: `{core.border.${string}}`

border.outline?

optional outline?: object

border.outline.control?

optional control?: object

Boundary of an interactive control (button, input, toggle, chip, segmented item). Use when the element is interactive and needs a visible edge at rest. Pair with {ux}.{role}.border.{state} colors per FSL UX context; do not use for containing surfaces — those are outline.surface.

border.outline.control.style?

optional style?: `{core.border.${string}}`

border.outline.control.width?

optional width?: `{core.border.${string}}`

border.outline.selected?

optional selected?: object

Stronger-thickness boundary expressing selected / current state. Use when selection or current-item status is communicated by line weight (active tab, selected row, chosen card). Resolves to a width strictly greater than outline.{surface,control}. Do not use for keyboard focus — that is semantic.focus.ring.

border.outline.selected.style?

optional style?: `{core.border.${string}}`

border.outline.selected.width?

optional width?: `{core.border.${string}}`

border.outline.surface?

optional surface?: object

Boundary of a containing surface (card, panel, dialog, menu, grouped region). Use when the element contains other content and needs a visible edge. Pair with informational.{role}.border.{state} colors and (optionally) semantic.elevation.surface.*; do not use for interactive controls — those are outline.control.

border.outline.surface.style?

optional style?: `{core.border.${string}}`

border.outline.surface.width?

optional width?: `{core.border.${string}}`

colors?

optional colors?: object

colors.action?

optional action?: object

Anything the user triggers — buttons, toggles, menu items, action icons. Pick when the user is about to act.

colors.action.accent?

optional accent?: object

Highlighted action that draws attention without being the main path ("Try the new…" promo button).

colors.action.accent.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.action.accent.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.accent.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.accent.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.accent.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

Valid drag-and-drop destination during an active drag (FSL Lexicon §7). Applies wherever drop-target semantics are valid: file inputs, collection rows, informational surfaces, and any other entity that accepts dropped items.

colors.action.accent.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.accent.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.accent.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.accent.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.accent.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.action.accent.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.accent.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.accent.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.accent.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.accent.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.accent.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.accent.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.accent.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.accent.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.action.accent.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.accent.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.accent.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.accent.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.accent.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.accent.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.accent.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.accent.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.muted?

optional muted?: object

Low-priority action — helper button, optional control, dismiss / cancel ghost.

colors.action.muted.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.action.muted.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.muted.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.muted.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.muted.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.muted.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.muted.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.muted.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.muted.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.muted.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.action.muted.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.muted.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.muted.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.muted.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.muted.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.muted.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.muted.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.muted.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.muted.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.action.muted.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.muted.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.muted.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.muted.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.muted.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.muted.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.muted.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.muted.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.negative?

optional negative?: object

Action whose intent is adverse: failure, invalid result, or destructive consequence (delete, cancel paid plan). Outcome (success / warning) lives in feedback.*, not here.

colors.action.negative.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.action.negative.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.negative.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.negative.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.negative.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.negative.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.negative.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.negative.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.negative.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.negative.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.action.negative.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.negative.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.negative.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.negative.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.negative.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.negative.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.negative.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.negative.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.negative.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.action.negative.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.negative.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.negative.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.negative.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.negative.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.negative.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.negative.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.negative.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.primary?

optional primary?: object

The single most important action on the view. Only one primary per {ux} per view — if two compete, the loser is secondary.

colors.action.primary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.action.primary.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.primary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.primary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.primary.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.primary.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.primary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.primary.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.primary.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.primary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.action.primary.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.primary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.primary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.primary.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.primary.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.primary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.primary.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.primary.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.primary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.action.primary.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.primary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.primary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.primary.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.primary.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.primary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.primary.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.primary.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.secondary?

optional secondary?: object

Alternative action that coexists with the primary one. Use when two actions share the surface and neither dominates.

colors.action.secondary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.action.secondary.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.secondary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.secondary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.secondary.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.secondary.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.secondary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.secondary.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.secondary.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.secondary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.action.secondary.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.secondary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.secondary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.secondary.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.secondary.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.secondary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.secondary.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.secondary.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.action.secondary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.action.secondary.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.action.secondary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.action.secondary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.action.secondary.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.action.secondary.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure trigger or menu button is currently open. Use for buttons that own an open popup, menu, or panel.

colors.action.secondary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.action.secondary.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.action.secondary.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Toggle button is currently engaged — persistent, not transient. Use for toolbar toggles ("Bold" pressed). Do not confuse with active (the brief moment of clicking).

colors.feedback?

optional feedback?: object

Surfaces that report the outcome of an action or system event — toasts, alerts, banners, inline validation. Pick when the system is reporting back.

colors.feedback.accent?

optional accent?: object

Informative feedback that is noteworthy but carries no judgement — "in progress", "new", "info". The canonical fill for activity indicators (ProgressBar, Meter).

colors.feedback.accent.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.feedback.accent.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.accent.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.accent.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.accent.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.feedback.accent.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.accent.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.accent.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.accent.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.feedback.accent.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.accent.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.accent.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.caution?

optional caution?: object

Feedback reporting risk that needs attention but does not block the user.

colors.feedback.caution.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.feedback.caution.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.caution.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.caution.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.caution.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.feedback.caution.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.caution.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.caution.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.caution.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.feedback.caution.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.caution.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.caution.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.muted?

optional muted?: object

Quiet feedback that should not steal attention — inline hints, low-priority status text.

colors.feedback.muted.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.feedback.muted.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.muted.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.muted.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.muted.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.feedback.muted.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.muted.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.muted.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.muted.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.feedback.muted.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.muted.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.muted.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.negative?

optional negative?: object

Feedback reporting failure or an invalid system state.

colors.feedback.negative.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.feedback.negative.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.negative.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.negative.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.negative.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.feedback.negative.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.negative.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.negative.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.negative.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.feedback.negative.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.negative.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.negative.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.positive?

optional positive?: object

Feedback reporting success, completion, or validity confirmed.

colors.feedback.positive.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.feedback.positive.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.positive.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.positive.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.positive.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.feedback.positive.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.positive.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.positive.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.positive.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.feedback.positive.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.positive.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.positive.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.primary?

optional primary?: object

Neutral / informational feedback that carries no valence — "Auto-saved", "Connected".

colors.feedback.primary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.feedback.primary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.primary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.primary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.primary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.feedback.primary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.primary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.primary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.feedback.primary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.feedback.primary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.feedback.primary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Prefer this over opacity.disabled for controls and text that carry colour contrast guarantees.

colors.feedback.primary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus — e.g. a focusable close button inside the feedback component.

colors.informational?

optional informational?: object

Presentational surfaces — hold, group, layer, frame, or display content; never drive a transaction. Body text, page backgrounds, cards, panels, dialogs, dividers, list rows, accordions. Interactivity is not a tiebreaker: a focusable Card or expandable accordion is still informational — its purpose is presentational. Focusability is covered by semantic.focus.ring.*; disclosure by the expanded state.

colors.informational.accent?

optional accent?: object

Highlighted content that draws attention without being the main path — featured callout, promo tile.

colors.informational.accent.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.informational.accent.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.accent.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.accent.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.accent.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.accent.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.accent.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.accent.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.accent.background.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.accent.background.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.accent.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.informational.accent.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.accent.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.accent.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.accent.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.accent.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.accent.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.accent.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.accent.border.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.accent.border.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.accent.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.informational.accent.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.accent.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.accent.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.accent.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.accent.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.accent.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.accent.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.accent.text.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.accent.text.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.caution?

optional caution?: object

Informational surface or text carrying caution — warning panel, advisory note.

colors.informational.caution.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.informational.caution.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.caution.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.caution.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.caution.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.caution.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.caution.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.caution.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.caution.background.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.caution.background.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.caution.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.informational.caution.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.caution.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.caution.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.caution.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.caution.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.caution.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.caution.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.caution.border.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.caution.border.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.caution.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.informational.caution.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.caution.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.caution.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.caution.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.caution.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.caution.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.caution.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.caution.text.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.caution.text.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.muted?

optional muted?: object

Low-priority content — helper text, dividers, captions, metadata.

colors.informational.muted.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.informational.muted.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.muted.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.muted.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.muted.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.muted.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.muted.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.muted.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.muted.background.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.muted.background.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.muted.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.informational.muted.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.muted.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.muted.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.muted.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.muted.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.muted.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.muted.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.muted.border.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.muted.border.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.muted.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.informational.muted.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.muted.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.muted.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.muted.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.muted.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.muted.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.muted.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.muted.text.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.muted.text.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.negative?

optional negative?: object

Informational surface or text reporting failure or invalid state — error empty state, broken-state panel.

colors.informational.negative.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.informational.negative.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.negative.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.negative.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.negative.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.negative.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.negative.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.negative.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.negative.background.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.negative.background.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.negative.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.informational.negative.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.negative.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.negative.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.negative.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.negative.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.negative.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.negative.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.negative.border.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.negative.border.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.negative.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.informational.negative.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.negative.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.negative.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.negative.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.negative.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.negative.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.negative.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.negative.text.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.negative.text.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.positive?

optional positive?: object

Informational surface or text reporting success / completion (e.g. "All up to date" empty state).

colors.informational.positive.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.informational.positive.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.positive.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.positive.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.positive.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.positive.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.positive.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.positive.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.positive.background.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.positive.background.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.positive.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.informational.positive.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.positive.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.positive.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.positive.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.positive.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.positive.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.positive.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.positive.border.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.positive.border.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.positive.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.informational.positive.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.positive.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.positive.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.positive.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.positive.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.positive.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.positive.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.positive.text.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.positive.text.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.primary?

optional primary?: object

Dominant content / surface on the view — page background, main panel, the card the user is reading.

colors.informational.primary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.informational.primary.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.primary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.primary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.primary.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.primary.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.primary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.primary.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.primary.background.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.primary.background.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.primary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.informational.primary.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.primary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.primary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.primary.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.primary.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.primary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.primary.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.primary.border.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.primary.border.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.primary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.informational.primary.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.primary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.primary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.primary.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.primary.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.primary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.primary.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.primary.text.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.primary.text.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.secondary?

optional secondary?: object

Supporting content / surface coexisting with primary — sidebar panel, secondary card.

colors.informational.secondary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.informational.secondary.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.secondary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.secondary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.secondary.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.secondary.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.secondary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.secondary.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.secondary.background.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.secondary.background.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.secondary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.informational.secondary.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.secondary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.secondary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.secondary.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.secondary.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.secondary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.secondary.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.secondary.border.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.secondary.border.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.informational.secondary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.informational.secondary.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.informational.secondary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.informational.secondary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.informational.secondary.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.informational.secondary.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Accordion / collapsible panel / <details> is currently open — in-place reveal (FSL Lexicon §1).

colors.informational.secondary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.informational.secondary.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.informational.secondary.text.selected?

optional selected?: `{core.colors.${(...)}}`

Presentational element is one of many and the user picked it (selectable list row, focused card in a deck).

colors.informational.secondary.text.visited?

optional visited?: `{core.colors.${(...)}}`

Visited link rendered inside informational content.

colors.input?

optional input?: object

Anything the user enters or selects data into — text fields, selects, checkboxes, radios. Pick when the user is about to type / pick a value.

colors.input.caution?

optional caution?: object

Input whose value carries risk that needs attention but does not block submission.

colors.input.caution.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.input.caution.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.caution.background.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.caution.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.caution.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.caution.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.caution.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.caution.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.caution.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.caution.background.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.caution.background.invalid?

optional invalid?: `{core.colors.${(...)}}`

Runtime validation outcome — the control's value failed validation. Use when React Aria's isInvalid (or a form library) asserts failure. Pair with input.negative.text.* on the validationMessage; do not use the negative role on the control itself — that is authorial valence (Lexicon §10.15).

colors.input.caution.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.caution.background.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.caution.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.input.caution.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.caution.border.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.caution.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.caution.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.caution.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.caution.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.caution.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.caution.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.caution.border.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.caution.border.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.caution.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.caution.border.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.caution.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.input.caution.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.caution.text.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.caution.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.caution.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.caution.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.caution.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.caution.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.caution.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.caution.text.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.caution.text.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.caution.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.caution.text.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.muted?

optional muted?: object

Low-priority input — quiet text field, ghost search, optional metadata input.

colors.input.muted.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.input.muted.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.muted.background.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.muted.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.muted.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.muted.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.muted.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.muted.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.muted.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.muted.background.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.muted.background.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.muted.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.muted.background.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.muted.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.input.muted.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.muted.border.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.muted.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.muted.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.muted.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.muted.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.muted.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.muted.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.muted.border.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.muted.border.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.muted.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.muted.border.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.muted.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.input.muted.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.muted.text.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.muted.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.muted.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.muted.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.muted.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.muted.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.muted.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.muted.text.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.muted.text.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.muted.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.muted.text.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.negative?

optional negative?: object

Negative valence on a data-entry surface: the parts that report an adverse outcome, and controls an author deliberately voices negative.

This role is not how a control shows failed validation. That is the invalid State on whichever role the control was authored with — see InputColorStates.invalid and FSL Lexicon §10.15, which calls re-voicing the control for a runtime outcome a category mistake: state lives in the user's data, evaluation lives in the author's pen. What §10.15 does place here is the adjacent display part, so text.* is the dimension a validationMessage consumes.

This comment previously said the opposite — "validation failure is not a state on primary; it selects this role" — and cited §5, which defines Evaluation without addressing validation at all. It contradicted both §10.15 and InputColorStates.invalid twelve lines above, and the contradiction was live long enough to be reasoned from.

colors.input.negative.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.input.negative.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.negative.background.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.negative.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.negative.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.negative.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.negative.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.negative.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.negative.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.negative.background.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.negative.background.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.negative.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.negative.background.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.negative.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.input.negative.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.negative.border.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.negative.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.negative.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.negative.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.negative.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.negative.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.negative.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.negative.border.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.negative.border.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.negative.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.negative.border.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.negative.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.input.negative.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.negative.text.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.negative.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.negative.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.negative.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.negative.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.negative.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.negative.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.negative.text.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.negative.text.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.negative.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.negative.text.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.positive?

optional positive?: object

Input whose value reports success / completion / validity confirmed (e.g. "available" username field after async check).

colors.input.positive.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.input.positive.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.positive.background.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.positive.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.positive.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.positive.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.positive.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.positive.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.positive.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.positive.background.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.positive.background.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.positive.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.positive.background.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.positive.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.input.positive.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.positive.border.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.positive.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.positive.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.positive.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.positive.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.positive.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.positive.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.positive.border.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.positive.border.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.positive.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.positive.border.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.positive.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.input.positive.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.positive.text.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.positive.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.positive.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.positive.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.positive.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.positive.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.positive.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.positive.text.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.positive.text.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.positive.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.positive.text.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.primary?

optional primary?: object

Default input role — the brand-influenced active style for the canonical control on the form.

colors.input.primary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.input.primary.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.primary.background.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.primary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.primary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.primary.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.primary.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.primary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.primary.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.primary.background.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.primary.background.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.primary.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.primary.background.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.primary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.input.primary.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.primary.border.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.primary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.primary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.primary.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.primary.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.primary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.primary.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.primary.border.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.primary.border.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.primary.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.primary.border.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.primary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.input.primary.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.primary.text.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.primary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.primary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.primary.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.primary.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.primary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.primary.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.primary.text.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.primary.text.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.primary.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.primary.text.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.secondary?

optional secondary?: object

Alternative input role coexisting with primary — e.g. a secondary search field on the same surface.

colors.input.secondary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.input.secondary.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.secondary.background.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.secondary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.secondary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.secondary.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.secondary.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.secondary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.secondary.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.secondary.background.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.secondary.background.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.secondary.background.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.secondary.background.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.secondary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.input.secondary.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.secondary.border.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.secondary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.secondary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.secondary.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.secondary.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.secondary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.secondary.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.secondary.border.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.secondary.border.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.secondary.border.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.secondary.border.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.input.secondary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.input.secondary.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.input.secondary.text.checked?

optional checked?: `{core.colors.${(...)}}`

Two-state control that is currently on — checkbox, radio, switch. Do not use for selection from a set — that is selected.

colors.input.secondary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.input.secondary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.input.secondary.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.input.secondary.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Combobox / select / disclosure-style input is currently open.

colors.input.secondary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.input.secondary.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.input.secondary.text.indeterminate?

optional indeterminate?: `{core.colors.${(...)}}`

Boolean control in a mixed / unknown state — e.g. parent checkbox over partially-checked children.

colors.input.secondary.text.invalid?

optional invalid?: `{core.colors.${(...)}}`

colors.input.secondary.text.pressed?

optional pressed?: `{core.colors.${(...)}}`

Persistent engaged state of a toggle-style input (e.g. a switch rendered as a button). See ActionColorStates.pressed for the disambiguation against active.

colors.input.secondary.text.selected?

optional selected?: `{core.colors.${(...)}}`

Element is one of many in a set and the user picked it (segment in a segmented control, picker option). Do not use for two-state controls — those are checked.

colors.navigation?

optional navigation?: object

Anything that moves the user between views or sections — links, tabs, breadcrumbs, pagination. Pick when the user is about to go somewhere.

colors.navigation.accent?

optional accent?: object

Highlighted nav item that draws attention without being the main path — "What's new", featured destination.

colors.navigation.accent.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.navigation.accent.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.accent.background.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.accent.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.accent.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.accent.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.accent.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.accent.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.accent.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.accent.background.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.accent.background.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.accent.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.navigation.accent.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.accent.border.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.accent.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.accent.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.accent.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.accent.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.accent.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.accent.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.accent.border.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.accent.border.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.accent.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.navigation.accent.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.accent.text.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.accent.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.accent.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.accent.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.accent.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.accent.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.accent.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.accent.text.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.accent.text.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.muted?

optional muted?: object

Low-priority nav — footer links, breadcrumb separators, optional sub-items.

colors.navigation.muted.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.navigation.muted.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.muted.background.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.muted.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.muted.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.muted.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.muted.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.muted.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.muted.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.muted.background.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.muted.background.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.muted.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.navigation.muted.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.muted.border.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.muted.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.muted.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.muted.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.muted.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.muted.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.muted.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.muted.border.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.muted.border.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.muted.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.navigation.muted.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.muted.text.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.muted.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.muted.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.muted.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.muted.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.muted.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.muted.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.muted.text.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.muted.text.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.primary?

optional primary?: object

The dominant navigation surface on the view — main top nav, primary sidebar.

colors.navigation.primary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.navigation.primary.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.primary.background.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.primary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.primary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.primary.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.primary.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.primary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.primary.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.primary.background.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.primary.background.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.primary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.navigation.primary.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.primary.border.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.primary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.primary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.primary.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.primary.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.primary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.primary.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.primary.border.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.primary.border.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.primary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.navigation.primary.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.primary.text.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.primary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.primary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.primary.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.primary.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.primary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.primary.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.primary.text.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.primary.text.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.secondary?

optional secondary?: object

Secondary navigation that coexists with the primary one — sub-nav, in-page tabs.

colors.navigation.secondary.background?

optional background?: object

Fills and surface backgrounds. Use for any colored area larger than a line.

colors.navigation.secondary.background.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.secondary.background.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.secondary.background.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.secondary.background.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.secondary.background.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.secondary.background.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.secondary.background.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.secondary.background.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.secondary.background.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.secondary.background.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.secondary.border?

optional border?: object

Outlines, separators, rings, and other line-color pairings. For line geometry (width, style) consume semantic.border.* instead — this dimension is colour only.

colors.navigation.secondary.border.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.secondary.border.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.secondary.border.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.secondary.border.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.secondary.border.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.secondary.border.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.secondary.border.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.secondary.border.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.secondary.border.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.secondary.border.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

colors.navigation.secondary.text?

optional text?: object

Readable foreground — labels, paragraphs, and text-like icons that inherit currentColor.

colors.navigation.secondary.text.active?

optional active?: `{core.colors.${(...)}}`

Pointer or key is currently down on the element — transient, lasts only while held. Releases back to default / hover. Do not use for persistent toggle state — that is pressed.

colors.navigation.secondary.text.current?

optional current?: `{core.colors.${(...)}}`

Element is the user's current location in the navigation set — active route, current step in a wizard. Do not use for set-membership without a routing meaning — that is selected.

colors.navigation.secondary.text.default?

optional default?: `{core.colors.${(...)}}`

Resting / base state. The colour rendered when no other state asserts.

colors.navigation.secondary.text.disabled?

optional disabled?: `{core.colors.${(...)}}`

Element is non-interactive. Carries the contrast guarantees that semantic.opacity.disabled cannot — prefer this for controls and text over opacity.

colors.navigation.secondary.text.droptarget?

optional droptarget?: `{core.colors.${(...)}}`

colors.navigation.secondary.text.expanded?

optional expanded?: `{core.colors.${(...)}}`

Disclosure-style nav item (collapsible section, expandable submenu) is currently open.

colors.navigation.secondary.text.focused?

optional focused?: `{core.colors.${(...)}}`

Element has keyboard or programmatic focus. Pair with semantic.focus.ring.color when no {ux}.{role} context applies.

colors.navigation.secondary.text.hover?

optional hover?: `{core.colors.${(...)}}`

Pointer is currently over the element. Do not use for keyboard focus — that is focused.

colors.navigation.secondary.text.selected?

optional selected?: `{core.colors.${(...)}}`

Tab / item is one of many in the set and the user picked it. May coexist with current when the selected item also represents the live route.

colors.navigation.secondary.text.visited?

optional visited?: `{core.colors.${(...)}}`

Link points to a URL the user has visited.

consequence?

optional consequence?: object

Cross-cutting valence ink for parts that paint no surface (model.md §6). Sibling of focus and overlay. families/consequence.ts

consequence.destructive?

optional destructive?: object

consequence.destructive.ink?

optional ink?: `{semantic.${string}}`

Foreground colour (text and, through currentColor, glyphs) for a destructive part that paints no surface of its own.

Must reference a semantic token so mode overrides remap it automatically — same constraint and same reason as focus.ring.color. The base theme aliases the standalone negative valence ink (informational.negative.text.default); a theme may point it elsewhere without touching validation messages.

dataviz?

optional dataviz?: object

Data Visualization extension — semantic roles for analytical color, non-color encodings, and geospatial overlays. Optional: omit when the theme does not support dataviz.

This is the public API of the dataviz extension. Components consume these tokens; never core.dataviz.* directly.

dataviz.color?

optional color?: object

dataviz.color.reference?

optional reference?: object

dataviz.color.reference.baseline?

optional baseline?: `{${string}}`

Color for a baseline or reference level (e.g. average, goal).

dataviz.color.reference.target?

optional target?: `{${string}}`

Color for a target or objective line.

dataviz.color.scale?

optional scale?: object

dataviz.color.scale.diverging?

optional diverging?: object

Midpoint comparison — 7 named positions around a true center. Only use when the data has a meaningful midpoint (zero, baseline, target).

dataviz.color.scale.diverging.neg1?

optional neg1?: `{${(...)}}`

dataviz.color.scale.diverging.neg2?

optional neg2?: `{${(...)}}`

dataviz.color.scale.diverging.neg3?

optional neg3?: `{${(...)}}`

dataviz.color.scale.diverging.neutral?

optional neutral?: `{${(...)}}`

Neutral midpoint class.

dataviz.color.scale.diverging.pos1?

optional pos1?: `{${(...)}}`

dataviz.color.scale.diverging.pos2?

optional pos2?: `{${(...)}}`

dataviz.color.scale.diverging.pos3?

optional pos3?: `{${(...)}}`

dataviz.color.scale.sequential?

optional sequential?: object

Ordered magnitude — 7 steps from low (1) to high (7). Use for quantitative ranges and progressive intensity.

dataviz.color.scale.sequential.1?

optional 1?: `{${(...)}}`

dataviz.color.scale.sequential.2?

optional 2?: `{${(...)}}`

dataviz.color.scale.sequential.3?

optional 3?: `{${(...)}}`

dataviz.color.scale.sequential.4?

optional 4?: `{${(...)}}`

dataviz.color.scale.sequential.5?

optional 5?: `{${(...)}}`

dataviz.color.scale.sequential.6?

optional 6?: `{${(...)}}`

dataviz.color.scale.sequential.7?

optional 7?: `{${(...)}}`

dataviz.color.series?

optional series?: object

Categorical series identity — 8 named, unordered roles. Use for nominal categories, named series, distinct groups.

dataviz.color.series.1?

optional 1?: `{${string}}`

dataviz.color.series.2?

optional 2?: `{${string}}`

dataviz.color.series.3?

optional 3?: `{${string}}`

dataviz.color.series.4?

optional 4?: `{${string}}`

dataviz.color.series.5?

optional 5?: `{${string}}`

dataviz.color.series.6?

optional 6?: `{${string}}`

dataviz.color.series.7?

optional 7?: `{${string}}`

dataviz.color.series.8?

optional 8?: `{${string}}`

dataviz.color.state?

optional state?: object

dataviz.color.state.highlight?

optional highlight?: `{${string}}`

Emphasized / highlighted data mark.

dataviz.color.state.muted?

optional muted?: `{${string}}`

De-emphasized / non-highlighted data mark.

dataviz.color.state.selected?

optional selected?: `{${string}}`

User-selected or actively focused data mark.

dataviz.color.status?

optional status?: object

dataviz.color.status.missing?

optional missing?: `{${string}}`

Value is absent or unavailable.

dataviz.color.status.notApplicable?

optional notApplicable?: `{${string}}`

Value is structurally absent (not measured or not applicable).

dataviz.color.status.suppressed?

optional suppressed?: `{${string}}`

Value is withheld for confidentiality or publication rules.

dataviz.encoding?

optional encoding?: object

dataviz.encoding.opacity?

optional opacity?: object

dataviz.encoding.opacity.context?

optional context?: `{${string}}`

Opacity for contextual elements behind overlay data.

dataviz.encoding.opacity.muted?

optional muted?: `{${string}}`

Opacity for de-emphasized (non-highlighted) data marks.

dataviz.encoding.opacity.uncertainty?

optional uncertainty?: `{${string}}`

Opacity for representing estimated or uncertain data visually.

dataviz.encoding.pattern?

optional pattern?: object

dataviz.encoding.pattern.series?

optional series?: object

Series identity through fill texture — use for filled marks and overlays.

dataviz.encoding.pattern.series.1?

optional 1?: `{${(...)}}`

dataviz.encoding.pattern.series.2?

optional 2?: `{${(...)}}`

dataviz.encoding.pattern.series.3?

optional 3?: `{${(...)}}`

dataviz.encoding.pattern.series.4?

optional 4?: `{${(...)}}`

dataviz.encoding.pattern.series.5?

optional 5?: `{${(...)}}`

dataviz.encoding.pattern.series.6?

optional 6?: `{${(...)}}`

dataviz.encoding.shape?

optional shape?: object

dataviz.encoding.shape.series?

optional series?: object

Series identity through mark shape — use for redundant differentiation.

dataviz.encoding.shape.series.1?

optional 1?: `{${(...)}}`

dataviz.encoding.shape.series.2?

optional 2?: `{${(...)}}`

dataviz.encoding.shape.series.3?

optional 3?: `{${(...)}}`

dataviz.encoding.shape.series.4?

optional 4?: `{${(...)}}`

dataviz.encoding.shape.series.5?

optional 5?: `{${(...)}}`

dataviz.encoding.shape.series.6?

optional 6?: `{${(...)}}`

dataviz.encoding.shape.series.7?

optional 7?: `{${(...)}}`

dataviz.encoding.shape.series.8?

optional 8?: `{${(...)}}`

dataviz.encoding.stroke?

optional stroke?: object

dataviz.encoding.stroke.forecast?

optional forecast?: `{${string}}`

Stroke style for projected or forward-looking data segments.

dataviz.encoding.stroke.reference?

optional reference?: `{${string}}`

Stroke style for analytical reference guides or baselines.

dataviz.encoding.stroke.uncertainty?

optional uncertainty?: `{${string}}`

Stroke style for uncertain or estimated bounds.

dataviz.geo?

optional geo?: object

dataviz.geo.context?

optional context?: object

dataviz.geo.context.boundary?

optional boundary?: `{${string}}`

Color for supportive boundary lines (region outlines, coastlines).

dataviz.geo.context.label?

optional label?: `{${string}}`

Color for contextual geographic labels (city names, region labels).

dataviz.geo.context.muted?

optional muted?: `{${string}}`

Reduced background wash for geographic base layer.

dataviz.geo.state?

optional state?: object

dataviz.geo.state.focus?

optional focus?: `{${string}}`

Fill or stroke for spatially focused region (keyboard / pointer focus).

dataviz.geo.state.selection?

optional selection?: `{${string}}`

Fill or stroke for a spatially selected region.

elevation?

optional elevation?: object

elevation.surface?

optional surface?: object

Shadow-based surface strata — the primary depth contract. Maps each stratum to a shadow recipe (core elevation reference).

elevation.surface.blocking?

optional blocking?: `{core.elevation.${string}}`

Dialogs and blocking sheets

elevation.surface.flat?

optional flat?: `{core.elevation.${string}}`

Surfaces flush with the page

elevation.surface.overlay?

optional overlay?: `{core.elevation.${string}}`

Dropdowns, popovers, floating surfaces

elevation.surface.raised?

optional raised?: `{core.elevation.${string}}`

Cards and panels

elevation.tonal?

optional tonal?: object

Tonal overlay tokens — optional surface color treatments paired with shadows to preserve depth perception in dark or heavily-colored themes.

Each token resolves to a color overlay (e.g., color-mix, rgba surface). Omit when the product does not use tonal elevation. When present, must cover the same strata that carry visible shadows.

See

elevation.md — "Surface + Shadow"

elevation.tonal.blocking?

optional blocking?: `{core.colors.${string}}`

Tonal surface treatment paired with surface.blocking. Use when the blocking stratum (dialogs, sheets) needs the strongest tonal separation from the page beneath the scrim. Pair with surface.blocking and semantic.overlay.scrim; resolves to the strongest tonal overlay in the contract.

elevation.tonal.overlay?

optional overlay?: `{core.colors.${string}}`

Tonal surface treatment paired with surface.overlay. Use when the overlay stratum (dropdowns, popovers) needs reinforced tonal lift over the page beneath. Pair with surface.overlay; resolves to a stronger overlay than tonal.raised.

elevation.tonal.raised?

optional raised?: `{core.colors.${string}}`

Tonal surface treatment paired with surface.raised. Use when the raised stratum needs an additional color overlay — dark themes where shadow alone is insufficient. Pair with surface.raised; do not use without the matching shadow contract.

focus?

optional focus?: object

focus.ring?

optional ring?: object

focus.ring.color?

optional color?: `{semantic.${string}}`

System-wide focus ring colour — cross-cutting infrastructure (model.md §6).

Use this when the component has no obvious FSL Entity Kind (focusable Card, profile chip, custom widget). For components with a clear {ux}, prefer {ux}.{role}.border.focused instead.

Must reference a semantic token so mode overrides remap it automatically.

focus.ring.offset?

optional offset?: `{core.border.${string}}`

Gap between the control's edge and the ring, rendered as outline-offset.

Floating the ring keeps it legible against the control's own fill — a flush ring drowns on a filled button — and it is what makes the ring's contrast a pairing against the page rather than against the control.

A row inside a clipped or scrolling container has nowhere to put the gap and insets the ring by its own width instead; that is a component decision derived from width, not a second token.

focus.ring.style?

optional style?: `{core.border.${string}}`

focus.ring.width?

optional width?: `{core.border.${string}}`

motion?

optional motion?: object

motion.decorative?

optional decorative?: object

Ambient, non-essential motion (loops, parallax, idle flourishes). Use only when motion is never required for understanding the UI. Always disabled by default in static or reduced-motion themes; do not use for any motion the user must perceive to operate the interface.

motion.decorative.duration?

optional duration?: `{core.motion.${string}}`

motion.decorative.easing?

optional easing?: `{core.motion.${string}}`

motion.emphasis?

optional emphasis?: object

Attention-drawing motion for a relevant in-place change. Use when the user must notice that something changed (status update, value reconciliation, error appearing on a field). Stronger than feedback; do not use for routine state changes — that is feedback. May collapse to minimal motion in static themes.

motion.emphasis.duration?

optional duration?: `{core.motion.${string}}`

motion.emphasis.easing?

optional easing?: `{core.motion.${string}}`

motion.feedback?

optional feedback?: object

Immediate response to a discrete user input on a single element. Use when animating hover, press, toggle, or small confirmation tweaks (color/scale/opacity changes on the element itself). Do not use for elements entering or leaving the layout — those are transition.enter / transition.exit.

motion.feedback.duration?

optional duration?: `{core.motion.${string}}`

motion.feedback.easing?

optional easing?: `{core.motion.${string}}`

motion.transition?

optional transition?: object

motion.transition.enter?

optional enter?: object

Element appearing into rest position (overlay, surface, revealed content). Use when an element transitions from hidden/absent to visible. Pair with transition.exit on the inverse phase; do not use for the resting element's response to input — that is feedback.

motion.transition.enter.duration?

optional duration?: `{core.motion.${string}}`

motion.transition.enter.easing?

optional easing?: `{core.motion.${string}}`

motion.transition.exit?

optional exit?: object

Element leaving rest position (overlay closing, content dismissing). Use when an element transitions from visible to hidden/absent. Symmetric counterpart of transition.enter; the exit phase is shorter by default to keep dismissal feeling responsive.

motion.transition.exit.duration?

optional duration?: `{core.motion.${string}}`

motion.transition.exit.easing?

optional easing?: `{core.motion.${string}}`

opacity?

optional opacity?: object

opacity.disabled?

optional disabled?: `{core.opacity.${string}}`

Dimming for image-like media in a disabled state (avatars, thumbnails, illustrations). Use when the disabled element has no semantic color contract that can carry the state (i.e. it is a visual asset, not a control). Do not use for disabled controls or text — those consume {ux}.{role}.{dimension}.disabled color tokens, which carry the contrast guarantees opacity cannot.

opacity.loading?

optional loading?: `{core.opacity.${string}}`

De-emphasis veil for content during in-flight asynchronous work. Use when content must remain visible (so the user keeps spatial context) while a fetch / mutation / long task is pending. Do not use for permanent disabled state — that is disabled. Remove the moment the work resolves.

opacity.scrim?

optional scrim?: `{core.opacity.${string}}`

Backdrop dimming for a blocking foreground layer. Use when rendering the layer that sits behind a modal, dialog, drawer, or sheet to attenuate the page underneath. Pair with semantic.overlay.scrim (the colored backdrop fill); do not use on the foreground surface itself — that surface stays fully opaque.

overlay?

optional overlay?: object

overlay.outline?

optional outline?: `{core.colors.${string}}`

Boundary of a surface that occludes content — a popover, menu, tooltip, dialog panel, drawer panel, toast.

Cross-cutting infrastructure (model.md §6): occlusion is neither a role (emphasis/valence) nor a state (runtime), and it crosses UX contexts — a Menu is informational, a Toast is feedback, and both cover content — so the {ux}.{role}.{dimension}.{state} grammar cannot ask for it in a single token. Same gate and same shape as focus.ring.color.

Why it cannot be {ux}.{role}.border.default. That token serves an embedded surface's decorative edge and a divider inside content, where a near-invisible hairline is the deliberate choice (it is a listed member of the border pairing's accepted-soft inventory). An occluding boundary owes the opposite: colors.md § Stacking names border.outline.surface the secondary separator and requires "a 1px outline at ≥ 3:1 contrast against the adjacent background … even when shadow is suppressed (high-contrast preferences, print)". One token cannot be both a hairline and a boundary; before this existed every overlay took the hairline and, with elevation suppressed, lost its edge entirely.

Not evaluation-driven, and nothing is lost by that. A boundary says "your content resumes here", which is infrastructure rather than voice — the same argument that gives the focus ring one system-wide colour. Measured before the change: informational.{primary,secondary,muted} resolved the same border value in both modes, so the evaluation prop never varied an overlay's edge.

Must reference a core colour. One value per mode clears the ≥3:1 floor against every stratum an overlay can land on — page, both tonal lifts, a row fill and a voiced surface — which is why this is one token and not a per-stratum family. The pairing that proves it is in colors.test.ts ("occluding boundary"); it is a cross-stratum pair, so the same-role border extractor cannot see it.

overlay.scrim?

optional scrim?: string

Modal backdrop color — full CSS color including alpha.

radii?

optional radii?: object

radii.action?

optional action?: `{core.radii.${string}}`

Radius for the command silhouette. Split from control so a theme can give commitments their own shape (e.g. pill) while fields, choice controls and ambient/utility triggers keep the standard control radius — the distinction reference-grade systems draw between "press me" and "fill me in". Which components wear which silhouette is a consumer's decision and is declared there (fsl-ui tokens/CONTRACT.md §1), never named here: this package has no dependency on its consumers and cannot track a reassignment.

radii.control?

optional control?: `{core.radii.${string}}`

Radius for interactive controls and touchable UI elements.

radii.round?

optional round?: `{core.radii.${string}}`

Full-round shape intent for pills, capsules, and circular affordances.

radii.surface?

optional surface?: `{core.radii.${string}}`

Radius for surfaces that contain or group content.

rail?

optional rail?: object

Cross-cutting fill for the unfilled part of a track (model.md §6). Sibling of focus/overlay/consequence. families/rail.ts

rail.track?

optional track?: `{core.colors.${string}}`

The rail's fill — the part of the track a ProgressBar/Meter's value has not yet reached, or a Slider's range has not yet covered.

fsl-ui F-050/F-051. Before this token existed, every consumer that needed one borrowed a token whose meaning was something else: ProgressBar and Meter took feedback.muted.border (an edge used as a fill; F-050 moved them to feedback.muted.background, a better borrow but still a borrow), and Slider took input.primary.background.disabled — a state used as a part, so a Slider's empty rail meant "disabled" in the token model. F-051 is the ruling that a rail gets its own address instead.

Why cross-cutting rather than reused. The reference (@adobe/spectrum-tokens@14.15.0, track-color) ships a rail as its own token, aliased to a private grey step rather than to any role's dimension, because a rail's mode behaviour is its own: it darkens in dark (light rgb(218,218,218) → dark rgb(57,57,57)) while every {ux}.{role}.border.* in this system lightens on the same canvas (an edge must stay visible against a near-black page). One token cannot carry both directions, which is exactly the gap F-050 paid for: reusing feedback.muted.background closed the dark blocker but left the light half quieter than the reference (1.14:1 against the page vs. the reference's 1.40:1, per docs/fsl-studio/FRICTION.md F-050/F-051).

Measured values, this ruling. Light lands on core.colors.neutral.200 (#e1e1e1) — 7 units per channel off the reference's own rgb(218,218,218) (225 vs. 218) — which raises the fill-vs-page separation from the borrowed neutral.100's 1.14:1 (F-050) to ~1.31:1, closer to the reference's 1.40:1 than the borrow was. Dark lands on core.colors.neutral.700 (#3d3d3d) — 4 units off the reference's rgb(57,57,57), the same step F-050 already found closest and the reason this token's dark value coincides with feedback.muted.background's: F-050 had already found the right dark step, so this ruling keeps it and only moves the light half, which is the half F-050 explicitly left owing. No existing core.colors.neutral step sits closer to either reference value than the ones chosen — see rail.test.ts for the per-channel deltas.

Must reference a core colour, like overlay.outline — a mode-aware remap through semantic.colors.* is not needed because nothing else shares this address to remap alongside it.

sizing?

optional sizing?: object

sizing.hit?

optional hit?: `{core.sizing.${string}}`

Ergonomic hit target — a single interactive floor (min interactive area), not a visual size and not a scale. Enforce via min-height / min-width; the visible control size comes from its inset + type, with hit only guaranteeing the ergonomic minimum.

Resolves to the fine-pointer value (core.sizing.hit.fine), which may use clamp(floor, preferred, max) where floor is a fixed Npx ergonomic minimum — guaranteeing accessibility while letting the rem preferred respect user font-size. The CSS output layer (toCssVars) automatically injects the coarse-pointer override (core.sizing.hit.coarse, always fixed px) inside @media (any-pointer: coarse) — no component code needed.

sizing.icon?

optional icon?: object

Visual glyph dimensions. Set on the icon element itself; never used to gate the hit target that wraps it (that is hit.*).

sizing.icon.lg?

optional lg?: `{core.sizing.${string}}`

Prominent glyph — emphasis or feature icons.

sizing.icon.md?

optional md?: `{core.sizing.${string}}`

Default glyph — pick this when no other step applies.

sizing.icon.sm?

optional sm?: `{core.sizing.${string}}`

Compact glyph — dense UI, inline indicators, list-row icons.

sizing.icon.text?

optional text?: `{core.sizing.${string}}`

Glyph that accompanies text on the same line — a button's leading icon, a picker's chevron beside its value. Relative (1em), not a ramp step: it resolves to the accompanying text's own size, which puts the glyph's drawn ink exactly inside the cap-height band (cap line to baseline). A fixed step cannot do this — it overshoots the baseline at some text sizes and floats above it at others, which reads as a misaligned icon.

sizing.identity?

optional identity?: object

Visual identity object dimensions (avatars, profile photos, brand marks, entity logos). Carries the visual size only — the surrounding hit target, if any, is sized via hit.*.

sizing.identity.lg?

optional lg?: `{core.sizing.${string}}`

Prominent identity — profile cards, feature surfaces.

sizing.identity.md?

optional md?: `{core.sizing.${string}}`

Default identity — toolbar, navigation, standard avatar slots.

sizing.identity.sm?

optional sm?: `{core.sizing.${string}}`

Compact identity — list rows, dense lists, mention chips.

sizing.identity.xl?

optional xl?: `{core.sizing.${string}}`

Hero identity — landing surfaces, brand-leading sections.

sizing.measure?

optional measure?: object

sizing.measure.reading?

optional reading?: string

Typed as RawValue by design: ch units cannot be expressed as a core token reference. Override with a validated character-based clamp() expression only — never px or rem.

sizing.surface?

optional surface?: object

sizing.surface.card?

optional card?: `{core.sizing.${string}}`

Maximum width of a narrow, standalone centered card — an auth form, a confirmation page, any single-purpose surface that should read as an object on the page rather than a page-shell column. Distinct from maxWidth (the page-shell cap) and from measure.reading (a line-length contract, not a container width): this is the "small object" rung the width vocabulary lacked (FRICTION F-004).

Aliases core.sizing.ramp.layout.1, the ramp's narrowest step and, at the time this was added, the only step with no other semantic consumer — maxWidth already owns layout.5, so this reuses rather than grows the ramp (model.md §6, "no parallel vocabulary"). Its floor (320px) lands exactly on the bottom of the ~20–26rem (320–416px) target this token was measured against; its ceiling (480px) overshoots the target's own 416px top by one ramp step's worth of headroom, which is the closest fit available without inventing a new formula.

sizing.surface.maxWidth?

optional maxWidth?: `{core.sizing.${string}}`

Maximum width of a structural surface (page shell, content column, card / panel / dialog wrapper). Use as max-width on the outer surface wrapper. Pair with gutter.page for inline padding; do not use for line-length readability — that is measure.reading.

sizing.viewport?

optional viewport?: object

sizing.viewport.height?

optional height?: object

sizing.viewport.height.full?

optional full?: `{core.sizing.${string}}`

Full-height layouts using dynamic viewport units (100dvh). Use intentionally — only when a region must occupy the full viewport height (app shells, full-screen modals, mobile splash regions). Do not use 100vh directly — dynamic units handle mobile chrome correctly.

sizing.viewport.width?

optional width?: object

sizing.viewport.width.full?

optional full?: `{core.sizing.${string}}`

Full-width layouts using dynamic viewport units (100dvw). Use intentionally — only when a region must span the full viewport width (full-bleed banners, edge-to-edge surfaces). Do not use 100vw directly — dynamic units avoid scrollbar overflow.

spacing?

optional spacing?: object

spacing.gap?

optional gap?: object

Distance between siblings (CSS gap on Flex/Grid containers). Use when laying out a sequence of sibling elements; never for internal padding (that is inset.*) and never for page/section structural padding (that is gutter.*).

spacing.gap.inline?

optional inline?: object

Horizontal grouping between inline siblings (icon + label, toolbar items, chip rows). Use when items flow along the inline axis as a visual group. gap.inline.xs is visual-only — never use it between independently focusable interactive targets (use separation.interactive.min instead).

spacing.gap.inline.lg?

optional lg?: `{core.spacing.${string}}`

Spacious inline grouping.

spacing.gap.inline.md?

optional md?: `{core.spacing.${string}}`

Default inline grouping — pick this when no other step applies.

spacing.gap.inline.sm?

optional sm?: `{core.spacing.${string}}`

Tight inline grouping between related inline siblings.

spacing.gap.inline.xl?

optional xl?: `{core.spacing.${string}}`

Wide inline grouping — the loosest step before a group break.

spacing.gap.inline.xs?

optional xs?: `{core.spacing.${string}}`

Visual-only tight grouping (icon + label inside a single target). Never between focusable targets — use separation.interactive.min.

spacing.gap.stack?

optional stack?: object

Vertical rhythm between stacked siblings (column layouts, lists, form fields). Use when items flow along the block axis and rhythm carries hierarchy. Pair with gap.inline for horizontal groupings; do not use for items arranged along the inline axis — those are gap.inline.

spacing.gap.stack.lg?

optional lg?: `{core.spacing.${string}}`

Roomy vertical rhythm — separating distinct content clusters within a surface.

spacing.gap.stack.md?

optional md?: `{core.spacing.${string}}`

Default vertical rhythm — pick this when no other step applies.

spacing.gap.stack.sm?

optional sm?: `{core.spacing.${string}}`

Medium vertical rhythm — sibling lines inside a form group.

spacing.gap.stack.xl?

optional xl?: `{core.spacing.${string}}`

Section-level rhythm — separating major sections of a page.

spacing.gap.stack.xs?

optional xs?: `{core.spacing.${string}}`

Tight vertical rhythm — micro-clusters within a single field.

spacing.gutter?

optional gutter?: object

Structural outer padding for page-level and section-level layout regions. page and section may use a clamp() expression with embedded {token.path} refs (e.g. clamp({core.spacing.4}, {core.spacing.6}, {core.spacing.12})). Typed as RawValue to allow both simple refs and responsive clamp expressions.

spacing.gutter.page?

optional page?: string

Outer padding bounding the page's content column. Use as inline padding on the top-level page container. Bounded clamp() contract by spec; do not use for inner sections — that is gutter.section.

spacing.gutter.section?

optional section?: string

Outer padding separating a section's content from its parent's gutter. Use on inner section wrappers nested inside a gutter.page container. Bounded clamp() contract by spec; resolves tighter than gutter.page.

spacing.inset?

optional inset?: object

Internal padding inside an element (CSS padding). Use when the spacing lives between an element's edge and its own content; never for the distance between siblings — that is gap.*.

spacing.inset.action?

optional action?: object

Block padding of the command silhouette — the one axis where a commitment is deliberately more generous than a generic control, so it resolves to a taller box. Measured in the base theme: 40px against a field's 34px at 1920×1080. Since ADR-022 fixed inset.control.*, both boxes are stable on the fine-pointer range and the 6px difference is the contract; this value keeps its 1px clamp band (8px at the phone end, where the coarse hit floor takes over anyway). See radii.action for why no component is named here.

A bounded range, not a step: the design decision here is the range itself, and the engine's unit steps straddle it (one step is too tight, two overshoot). Same contract shape as separation.interactive.min. Only the block axis is owned here — a command's inline padding stays inset.control.lg, which needs no command-specific value.

spacing.inset.action.block?

optional block?: string

Block (vertical) padding of a command trigger.

spacing.inset.control?

optional control?: object

Padding inside an interactive control (button, input, chip, toggle). Use on elements with a hit target and a single inner content cluster. Pair with inset.surface on the containing surface; do not use for containing surfaces — those are inset.surface.

spacing.inset.control.lg?

optional lg?: `{core.spacing.${string}}`

Roomy step — a command trigger's inline inset.

spacing.inset.control.md?

optional md?: `{core.spacing.${string}}`

Default step — the field family's inline inset.

spacing.inset.control.sm?

optional sm?: `{core.spacing.${string}}`

Compact step — the field family's block inset.

spacing.inset.surface?

optional surface?: object

Padding inside a containing surface (card, panel, dialog, menu, section). Use on elements that contain other content blocks and need a margin between their edge and the inner cluster. Must be ≥ inset.control at the same step (validation rule); do not use for the inner controls themselves — those are inset.control.

spacing.inset.surface.lg?

optional lg?: `{core.spacing.${string}}`

Roomy step — prominent controls / spacious surfaces.

spacing.inset.surface.md?

optional md?: `{core.spacing.${string}}`

Default step — standard controls and surfaces. Pick this when no other step applies.

spacing.inset.surface.sm?

optional sm?: `{core.spacing.${string}}`

Compact step — tight controls / dense surfaces.

spacing.inset.surface.xs?

optional xs?: `{core.spacing.${string}}`

The anchored/row-framing step — the tightest surface inset, for a container whose padding is a gutter beside its own children rather than a margin around arbitrary content: an anchored popover, menu, tooltip, or a list container framing rows that carry their own inset.control.

Fixed, for ADR-022's reason one context over. The steps below ride the fluid engine, which is right for a page-level surface — its padding scales with the page. This step's whole visual outcome is its relationship to fixed-height children, so a fluid value makes that relationship container-fluid: measured before this existed, a menu's gutter moved 16px → 24px from 390 to 1920 while every row stayed exactly 32.0px (F-045). References core.spacing.fixed.*, like inset.control and for the same reason.

Do not reach for it on a page-level surface — that is sm and up. The discriminant is whether the padding frames content (scale it) or controls (hold it).

spacing.separation?

optional separation?: object

Ergonomic separation between independently actionable targets in dense clusters. May use a clamp() expression with an embedded {token.path} ref (e.g. clamp(8px, {core.spacing.2}, 12px)).

spacing.separation.interactive?

optional interactive?: object

spacing.separation.interactive.min?

optional min?: string

Minimum gap between adjacent interactive targets (toolbar buttons, paginator arrows, segmented controls, dense menu items). Use only between elements the user can click/tap/focus independently. Do not use for visual-only groupings — that is gap.inline.xs.

text?

optional text?: object

text.action?

optional action?: object

Text for the command silhouette — see radii.action for why the component mapping is not named here. Split from label so commands carry more typographic weight than the chrome around them (the weight-contrast rhythm of reference-grade systems: controls quiet, commands assertive). Do not use for field labels or metadata — those are label.

text.action.md?

optional md?: object

The single canonical step of this family.

text.action.md.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.action.md.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.action.md.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.action.md.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.action.md.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.action.md.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.action.md.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.body?

optional body?: object

Default reading text — paragraphs, descriptions, long-form content. Use for any text the user will read rather than scan or select. Optimized for readability; do not use for short UI strings or labels — those are label.

text.body.lg?

optional lg?: object

Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface.

text.body.lg.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.body.lg.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.body.lg.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.body.lg.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.body.lg.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.body.lg.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.body.lg.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.body.md?

optional md?: object

Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm.

text.body.md.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.body.md.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.body.md.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.body.md.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.body.md.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.body.md.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.body.md.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.body.sm?

optional sm?: object

Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role.

text.body.sm.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.body.sm.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.body.sm.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.body.sm.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.body.sm.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.body.sm.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.body.sm.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.code?

optional code?: object

Monospaced text for code snippets, logs, identifiers, or technical data. Use whenever the text must align by character cell or distinguish similar glyphs (Il1O0). Do not use for UI strings that merely look technical — that is body or label.

text.code.md?

optional md?: object

Default step of this family — the unmarked choice.

text.code.md.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.code.md.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.code.md.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.code.md.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.code.md.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.code.md.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.code.md.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.code.sm?

optional sm?: object

Smallest step of this family — compact / dense usage.

text.code.sm.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.code.sm.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.code.sm.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.code.sm.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.code.sm.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.code.sm.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.code.sm.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.display?

optional display?: object

High-impact hero text — landing surfaces and prominent page headers. Use sparingly; reserved for the single most important text on a page. Pair with headline for the next hierarchy step; do not use for section headings inside content — those are headline.

text.display.lg?

optional lg?: object

Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface.

text.display.lg.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.display.lg.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.display.lg.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.display.lg.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.display.lg.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.display.lg.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.display.lg.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.display.md?

optional md?: object

Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm.

text.display.md.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.display.md.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.display.md.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.display.md.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.display.md.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.display.md.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.display.md.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.display.sm?

optional sm?: object

Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role.

text.display.sm.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.display.sm.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.display.sm.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.display.sm.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.display.sm.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.display.sm.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.display.sm.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.headline?

optional headline?: object

Section or page headings that structure scanning of the document. Use for the primary headings inside content (page title, major section breaks). Below display in hierarchy, above title. Do not use for surface chrome (card / panel / dialog headers) — those are title.

text.headline.lg?

optional lg?: object

Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface.

text.headline.lg.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.headline.lg.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.headline.lg.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.headline.lg.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.headline.lg.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.headline.lg.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.headline.lg.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.headline.md?

optional md?: object

Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm.

text.headline.md.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.headline.md.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.headline.md.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.headline.md.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.headline.md.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.headline.md.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.headline.md.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.headline.sm?

optional sm?: object

Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role.

text.headline.sm.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.headline.sm.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.headline.sm.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.headline.sm.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.headline.sm.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.headline.sm.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.headline.sm.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.label?

optional label?: object

Short UI strings — field labels, badges, metadata, captions. Use for compact, scan-only text that names or describes adjacent UI. Do not use for prose the user must read in sequence — that is body, nor for command-trigger text — that is action.

text.label.lg?

optional lg?: object

Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface.

text.label.lg.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.label.lg.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.label.lg.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.label.lg.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.label.lg.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.label.lg.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.label.lg.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.label.md?

optional md?: object

Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm.

text.label.md.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.label.md.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.label.md.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.label.md.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.label.md.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.label.md.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.label.md.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.label.sm?

optional sm?: object

Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role.

text.label.sm.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.label.sm.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.label.sm.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.label.sm.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.label.sm.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.label.sm.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.label.sm.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.title?

optional title?: object

Titles for surfaces — cards, panels, dialogs, sheets, menus, structured sections. Use as the heading of a contained surface, not the heading of a content section. Pair with body / label inside the same surface; do not use for top-level page or document headings — those are headline / display.

text.title.lg?

optional lg?: object

Largest step of this family — strongest hierarchy within the family. Use for the most prominent instance of this role on the surface.

text.title.lg.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.title.lg.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.title.lg.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.title.lg.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.title.lg.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.title.lg.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.title.lg.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.title.md?

optional md?: object

Default step of this family — the unmarked choice. Use unless the surface explicitly calls for lg or sm.

text.title.md.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.title.md.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.title.md.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.title.md.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.title.md.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.title.md.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.title.md.lineHeight?

optional lineHeight?: `{core.font.${string}}`

text.title.sm?

optional sm?: object

Smallest step of this family — compact / dense usage. Use when space is constrained or when the text is secondary within the role.

text.title.sm.fontFamily?

optional fontFamily?: `{core.font.${string}}`

text.title.sm.fontOpticalSizing?

optional fontOpticalSizing?: `{core.font.${string}}`

text.title.sm.fontSize?

optional fontSize?: `{core.font.scale.${string}}`

text.title.sm.fontVariantNumeric?

optional fontVariantNumeric?: `{core.font.${string}}`

text.title.sm.fontWeight?

optional fontWeight?: `{core.font.${string}}`

text.title.sm.letterSpacing?

optional letterSpacing?: `{core.font.${string}}`

text.title.sm.lineHeight?

optional lineHeight?: `{core.font.${string}}`

zIndex?

optional zIndex?: object

zIndex.layer?

optional layer?: object

zIndex.layer.base?

optional base?: `{core.zIndex.${string}}`

Page content in normal document flow. Use when the element participates in the default application stratum and has no claim above sibling content. Do not use to "reset" stacking inside a component — local layering is the component's own concern.

zIndex.layer.blocking?

optional blocking?: `{core.zIndex.${string}}`

Surfaces that sit above other overlays and prevent interaction behind them. Use when building dialogs, sheets, or blocking drawers paired with a scrim. Pair with semantic.overlay.scrim and semantic.opacity.scrim; do not use for non-blocking floating panels — those are overlay.

zIndex.layer.overlay?

optional overlay?: `{core.zIndex.${string}}`

Non-blocking floating surfaces above sticky and base content. Use when building dropdowns, menus, popovers, or floating panels that the user can dismiss by interacting elsewhere. Do not use for surfaces that block the page behind them — those are blocking.

zIndex.layer.sticky?

optional sticky?: `{core.zIndex.${string}}`

Anchored bars that follow scroll while staying inside the app stack. Use when building sticky headers, sticky navigation, or persistent anchored toolbars. Pair with position: sticky; do not use for non-anchored floating surfaces — those are overlay.

zIndex.layer.transient?

optional transient?: `{core.zIndex.${string}}`

Highest application-controlled stratum before the browser top layer. Use when building transient notifications that must surface above any other app stratum (toasts, tooltip-like transient overlays). Do not use for persistent UI — transient implies the element is short-lived and self-dismissing.

See​

Properties​

semantic​

border?​

border.divider?​

border.divider.style?​

border.divider.width?​

border.outline?​

border.outline.control?​

border.outline.control.style?​

border.outline.control.width?​

border.outline.selected?​

border.outline.selected.style?​

border.outline.selected.width?​

border.outline.surface?​

border.outline.surface.style?​

border.outline.surface.width?​

colors?​

colors.action?​

colors.action.accent?​

colors.action.accent.background?​

colors.action.accent.background.active?​

colors.action.accent.background.default?​

colors.action.accent.background.disabled?​

colors.action.accent.background.droptarget?​

colors.action.accent.background.expanded?​

colors.action.accent.background.focused?​

colors.action.accent.background.hover?​

colors.action.accent.background.pressed?​

colors.action.accent.border?​

colors.action.accent.border.active?​

colors.action.accent.border.default?​

colors.action.accent.border.disabled?​

colors.action.accent.border.droptarget?​

colors.action.accent.border.expanded?​

colors.action.accent.border.focused?​

colors.action.accent.border.hover?​

colors.action.accent.border.pressed?​

colors.action.accent.text?​

colors.action.accent.text.active?​

colors.action.accent.text.default?​

colors.action.accent.text.disabled?​

colors.action.accent.text.droptarget?​

colors.action.accent.text.expanded?​

colors.action.accent.text.focused?​

colors.action.accent.text.hover?​

colors.action.accent.text.pressed?​

colors.action.muted?​

colors.action.muted.background?​

colors.action.muted.background.active?​

colors.action.muted.background.default?​

colors.action.muted.background.disabled?​

colors.action.muted.background.droptarget?​

colors.action.muted.background.expanded?​

colors.action.muted.background.focused?​

colors.action.muted.background.hover?​

colors.action.muted.background.pressed?​

colors.action.muted.border?​

colors.action.muted.border.active?​

colors.action.muted.border.default?​

colors.action.muted.border.disabled?​

colors.action.muted.border.droptarget?​

colors.action.muted.border.expanded?​

colors.action.muted.border.focused?​

colors.action.muted.border.hover?​

colors.action.muted.border.pressed?​

colors.action.muted.text?​

colors.action.muted.text.active?​

colors.action.muted.text.default?​

colors.action.muted.text.disabled?​

colors.action.muted.text.droptarget?​

colors.action.muted.text.expanded?​

colors.action.muted.text.focused?​

colors.action.muted.text.hover?​

colors.action.muted.text.pressed?​

colors.action.negative?​

colors.action.negative.background?​

colors.action.negative.background.active?​

colors.action.negative.background.default?​

colors.action.negative.background.disabled?​

See

Properties

semantic

border?

border.divider?

border.divider.style?

border.divider.width?

border.outline?

border.outline.control?

border.outline.control.style?

border.outline.control.width?

border.outline.selected?

border.outline.selected.style?

border.outline.selected.width?

border.outline.surface?

border.outline.surface.style?

border.outline.surface.width?

colors?

colors.action?

colors.action.accent?

colors.action.accent.background?

colors.action.accent.background.active?

colors.action.accent.background.default?

colors.action.accent.background.disabled?

colors.action.accent.background.droptarget?

colors.action.accent.background.expanded?

colors.action.accent.background.focused?

colors.action.accent.background.hover?

colors.action.accent.background.pressed?

colors.action.accent.border?

colors.action.accent.border.active?

colors.action.accent.border.default?

colors.action.accent.border.disabled?

colors.action.accent.border.droptarget?

colors.action.accent.border.expanded?

colors.action.accent.border.focused?

colors.action.accent.border.hover?

colors.action.accent.border.pressed?

colors.action.accent.text?

colors.action.accent.text.active?

colors.action.accent.text.default?

colors.action.accent.text.disabled?

colors.action.accent.text.droptarget?

colors.action.accent.text.expanded?

colors.action.accent.text.focused?

colors.action.accent.text.hover?

colors.action.accent.text.pressed?

colors.action.muted?

colors.action.muted.background?

colors.action.muted.background.active?

colors.action.muted.background.default?

colors.action.muted.background.disabled?

colors.action.muted.background.droptarget?

colors.action.muted.background.expanded?

colors.action.muted.background.focused?

colors.action.muted.background.hover?

colors.action.muted.background.pressed?

colors.action.muted.border?

colors.action.muted.border.active?

colors.action.muted.border.default?

colors.action.muted.border.disabled?

colors.action.muted.border.droptarget?

colors.action.muted.border.expanded?

colors.action.muted.border.focused?

colors.action.muted.border.hover?

colors.action.muted.border.pressed?

colors.action.muted.text?

colors.action.muted.text.active?

colors.action.muted.text.default?

colors.action.muted.text.disabled?

colors.action.muted.text.droptarget?

colors.action.muted.text.expanded?

colors.action.muted.text.focused?

colors.action.muted.text.hover?

colors.action.muted.text.pressed?

colors.action.negative?

colors.action.negative.background?

colors.action.negative.background.active?

colors.action.negative.background.default?

colors.action.negative.background.disabled?