Focus
Every focusable surface uses the same canonical ring. Components never author their own focus indicator.
Rendered
--focus-ring + --focus-border
--focus-row-active
Tokens
| Token | Value | Role |
|---|---|---|
--focus-border | #F0A074 | 2 px outline |
--focus-ring | rgba(248, 152, 102, 0.55) | 6 px halo |
--focus-row-active | rgba(248, 152, 102, 0.10) | selected-row wash |
Recipe
:focus-visible {
outline: 2px solid var(--focus-border);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--focus-ring);
}
.cmd-palette [aria-selected="true"] {
background: var(--focus-row-active);
}:focus-visible only — never :focus. Keyboard users see the ring; mouse users don't.
Inherit the canonical ring. No prop, no override.
Don't author per-component focus colors. The ring is the contract.