post-ai.systems

Interaction States

Interaction States Essence
Breakpoint
Accent
Normal --interaction-normal-bg: transparent Color is derived from selected accent
Hover --interaction-*-hover-bg Background is selected accent with transparency
Pressed --interaction-*-pressed-bg Pressed state is derived from selected accent
Focus --interaction-focus-ring Inset 1px accent ring; outline: none
Focus Visible --interaction-focus-visible-ring Inset 2px accent ring; keyboard-visible state
Focus Extra Contrast --interaction-focus-extra-contrast-ring 2px background gap, then 2px accent ring
Focus Visible Extra Contrast --interaction-focus-visible-extra-contrast-ring 2px background gap, then 3px accent ring
Selected / Active --interaction-*-selected-bg Selected state is derived from selected accent
Disabled --interaction-disabled-opacity: 0.55 Unavailable state; non-interactive