Interaction & motion
Keyboard focus, unavailable controls and short motion share decisions across components.
01Preview
Use the keyboard to inspect visible focus. Short transitions follow reduced-motion preferences.
02Interaction states
Keyboard focus and unavailable controls share visual decisions, independently of structural borders. Components retain their native semantics and draw the ring inside, at --focus-inset-offset, when an outer outline would be clipped or cover a neighboring rule. Text fields and select, which show focus after every click, mark their corners with --focus half-crosses instead of an outline.
| Token | Role | Definition |
|---|---|---|
--focus | Keyboard focus color, following the accent. | var(--accent) |
--focus-width | Keyboard focus stroke, independent of structural rules. | 2px |
--focus-offset | Default outer focus clearance. | 3px |
--focus-inset-offset | Inner focus clearance for surfaces that clip or adjoin an outer outline. | -3px |
--disabled-opacity | Dimming for unavailable controls, without implementing disabled behavior. | 0.45 |
Focus must remain visible in both themes. Native disabled buttons and fields leave the tab order; aria-disabled alone neither blocks activation nor removes focus. Cards intentionally keeps unavailable track controls focusable so a focused control does not disappear when reaching an edge. Read-only fields remain readable, selectable and focusable. An invalid state needs text and aria-describedby, not only a colored border. The app owns pending state, validation, cancellation and announcements.
03Short motion
Durations are named by what they animate. State changes, including a small hover nudge, use --state-duration with the default easing; reveals and moving parts use --motion-duration with --motion-easing. Honor reduced motion in the owning component; tokens do not disable animation by themselves.
| Token | Role | Definition |
|---|---|---|
--state-duration | Color, surface and border changes between interaction states. | 120ms |
--motion-duration | Positional transitions: reveals and moving parts. | 220ms |
--motion-easing | Easing of positional transitions. | cubic-bezier(0.2, 0.8, 0.2, 1) |
Continuous decoration and artwork animation parameters stay with their owner; they are not short control transitions. Never animate layout merely because a motion token exists.