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:168

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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.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.borders.* 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.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.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.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.borders.* 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.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.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

Input whose value failed validation — maps from React Aria isInvalid. Validation failure is not a state on primary; it selects this role (FSL Lexicon §5).

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.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.borders.* 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.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.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.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.borders.* 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.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.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.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.borders.* 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.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.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.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.borders.* 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.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.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.borders.* 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.borders.* 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.borders.* 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.borders.* 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.

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.na?

optional na?: `{${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 typically 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 (typical in 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.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.scrim?

optional scrim?: string

Modal backdrop color — full CSS color including alpha.

radii?

optional radii?: object

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.

sizing?

optional sizing?: object

sizing.hit?

optional hit?: object

Ergonomic hit targets. Each token resolves to the fine-pointer value. The CSS output layer (toCssVars) automatically injects coarse-pointer overrides inside @media (any-pointer: coarse) — no component code needed.

Fine-pointer values (core.sizing.hit.fine.*) may use clamp(floor, preferred, max) where floor is a fixed Npx ergonomic minimum — this guarantees accessibility while allowing themes to express density preferences (e.g. via the rem scale). Coarse-pointer values (core.sizing.hit.coarse.*) are always fixed px.

sizing.hit.base?

optional base?: `{core.sizing.${string}}`

Default interactive area for standard buttons, inputs, and toggles. Pick when no other step applies.

sizing.hit.min?

optional min?: `{core.sizing.${string}}`

Minimum interactive area for small / secondary targets (icon-only buttons, toolbar items). Enforce via min-width / min-height; not a visual size.

sizing.hit.prominent?

optional prominent?: `{core.sizing.${string}}`

Prominent interactive area for high-emphasis or low-density targets (CTAs, dialog actions).

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.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.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 — same magnitude as gap.stack.md.

spacing.gap.inline.md?

optional md?: `{core.spacing.${string}}`

Looser inline grouping — same magnitude as gap.stack.sm.

spacing.gap.inline.sm?

optional sm?: `{core.spacing.${string}}`

Inline grouping — same magnitude as gap.stack.xs.

spacing.gap.inline.xl?

optional xl?: `{core.spacing.${string}}`

Wide inline grouping — same magnitude as gap.stack.lg.

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.space.4}, {core.space.6}, {core.space.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.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 — prominent controls / spacious surfaces.

spacing.inset.control.md?

optional md?: `{core.spacing.${string}}`

Default step — standard controls and surfaces. Pick this when no other step applies.

spacing.inset.control.sm?

optional sm?: `{core.spacing.${string}}`

Compact step — tight controls / dense surfaces.

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.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.space.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.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, button text, 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.

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?