Semantic tokens resolve from the active theme and color scheme (light/dark). Use these names in components — never raw palette values.
Foreground
Text and icon colors on surfaces.
foreground-intent-positive foreground-intent-caution foreground-intent-negative Surface
Layers, fills, scrims, and intent-tinted surfaces.
surface-intent-positive-default surface-intent-positive-subtle surface-intent-caution-default surface-intent-caution-subtle surface-intent-negative-default surface-intent-negative-subtle surface-intent-info-default surface-intent-info-subtle Border
Strokes and separators.
Interactive — solid, outline, subtle
Default control states (neutral).
interactive-solid-default interactive-outline-default interactive-outline-hover interactive-outline-press interactive-outline-focus interactive-outline-select interactive-subtle-default interactive-subtle-select Interactive — ghost
Transparent fills; subtle on hover.
interactive-ghost-default interactive-ghost-inverse-default interactive-ghost-inverse-hover interactive-ghost-inverse-press interactive-ghost-inverse-focus interactive-ghost-inverse-select Interactive — intent (positive)
interactive-intent-positive-solid-default interactive-intent-positive-solid-hover interactive-intent-positive-solid-press interactive-intent-positive-outline-default interactive-intent-positive-outline-hover interactive-intent-positive-outline-press interactive-intent-positive-outline-focus interactive-intent-positive-outline-select interactive-intent-positive-subtle-default interactive-intent-positive-subtle-hover interactive-intent-positive-subtle-press interactive-intent-positive-subtle-focus interactive-intent-positive-subtle-select Interactive — intent (caution)
interactive-intent-caution-solid-default interactive-intent-caution-solid-hover interactive-intent-caution-solid-press interactive-intent-caution-outline-default interactive-intent-caution-outline-hover interactive-intent-caution-outline-press interactive-intent-caution-outline-focus interactive-intent-caution-outline-select interactive-intent-caution-subtle-default interactive-intent-caution-subtle-hover interactive-intent-caution-subtle-press interactive-intent-caution-subtle-focus interactive-intent-caution-subtle-select Interactive — intent (error)
interactive-intent-error-solid-default interactive-intent-error-solid-hover interactive-intent-error-solid-press interactive-intent-error-outline-default interactive-intent-error-outline-hover interactive-intent-error-outline-press interactive-intent-error-outline-focus interactive-intent-error-outline-select interactive-intent-error-subtle-default interactive-intent-error-subtle-hover interactive-intent-error-subtle-press interactive-intent-error-subtle-focus interactive-intent-error-subtle-select Interactive — intent (info)
interactive-intent-info-solid-default interactive-intent-info-solid-hover interactive-intent-info-solid-press interactive-intent-info-outline-default interactive-intent-info-outline-hover interactive-intent-info-outline-press interactive-intent-info-outline-focus interactive-intent-info-outline-select interactive-intent-info-subtle-default interactive-intent-info-subtle-hover interactive-intent-info-subtle-press interactive-intent-info-subtle-focus interactive-intent-info-subtle-select