color.interaction.focus.ring-container
Focus colour for containers and explicitly mapped filled controls (D-015); component rules determine ring geometry.
Source revision 9afef8564142e41458748895d16b4df161a67d66
Find related usageSpecification anchorMeasured contrast report (default profile)Report an issue with this token
color.interaction.focus.ring-container--color-interaction-focus-ring-containerdefault · approved
- Resolved value
#ffa2a7- Status
- observed
- Consumption
- use — Use within the role's documented scope and restrictions.
- Decisions
- None pending.
- Source
- tokens/semantic.tokens.json:421
/color/interaction/focus/ring-container - Alias chain
color.primitive.rose.800- Used by aliases
focus.ring-containerfocus.ring-contrast
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| dialog · contrast | — | focus-visible · color.action.primary.bg | spec/components/dialog.md:69 /contrast/7 |
| filterable-table · contrast | — | selected · color.interaction.selection.bg | spec/components/filterable-table.md:87 /contrast/7 |
| i3-window-frame · contrast | — | focus-visible · color.surface.canvas | spec/components/i3-window-frame.md:77 /contrast/6 |
| wizard · contrast | — | focus-visible · color.action.primary.bg | spec/components/wizard.md:70 /contrast/8 |
| Shared rule · contrast | — | — · color.interaction.selection.bg | spec/contrast.json:43 /pairs/39 |
| button · part | root.ring | — | spec/components/button.md:35 /tokens/root.ring |
| card · part | root.ring | — | spec/components/card.md:36 /tokens/root.ring |
| checkbox · part | box.ring-checked | — | spec/components/checkbox.md:40 /tokens/box.ring-checked |
| code-editor · part | root.ring | — | spec/components/code-editor.md:36 /tokens/root.ring |
| combobox · part | root.ring-invalid | — | spec/components/combobox.md:40 /tokens/root.ring-invalid |
| date-picker · part | root.ring-invalid | — | spec/components/date-picker.md:36 /tokens/root.ring-invalid |
| dialog · part | root.ring | — | spec/components/dialog.md:34 /tokens/root.ring |
| drawer · part | root.ring | — | spec/components/drawer.md:30 /tokens/root.ring |
| editor-search · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/editor-search.md:43 /tokens/dependency.role-color-interaction-focus-ring-container |
| filterable-table · part | row.ring-on-selection | — | spec/components/filterable-table.md:57 /tokens/row.ring-on-selection |
| i3-window-frame · part | window.ring | — | spec/components/i3-window-frame.md:52 /tokens/window.ring |
| multiselect · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/multiselect.md:48 /tokens/dependency.role-color-interaction-focus-ring-container |
| number-field · part | root.ring-invalid | — | spec/components/number-field.md:35 /tokens/root.ring-invalid |
| radio-group · part | box.ring-checked | — | spec/components/radio-group.md:38 /tokens/box.ring-checked |
| segmented-control · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/segmented-control.md:39 /tokens/dependency.role-color-interaction-focus-ring-container |
| select · part | root.ring-invalid | — | spec/components/select.md:38 /tokens/root.ring-invalid |
| switch · part | track.ring-checked | — | spec/components/switch.md:38 /tokens/track.ring-checked |
| terminal · part | root.ring | — | spec/components/terminal.md:35 /tokens/root.ring |
| text-field · part | root.ring-invalid | — | spec/components/text-field.md:47 /tokens/root.ring-invalid |
| textarea · part | root.ring-invalid | — | spec/components/textarea.md:38 /tokens/root.ring-invalid |
| time-picker · part | root.ring-invalid | — | spec/components/time-picker.md:33 /tokens/root.ring-invalid |
| wizard · part | next.ring | — | spec/components/wizard.md:49 /tokens/next.ring |
obsidian · port.theme-dark .checkbox-container.is-enabled | --background-modifier-border-focus | — | — | ports/obsidian/mapping.json:391 /mappings/color.interaction.focus.ring-container/1 |
obsidian · port.theme-dark button.mod-cta | --background-modifier-border-focus | — | — | ports/obsidian/mapping.json:390 /mappings/color.interaction.focus.ring-container/0 |
obsidian · port.theme-dark input[type="checkbox"]:checked | --background-modifier-border-focus | — | — | ports/obsidian/mapping.json:392 /mappings/color.interaction.focus.ring-container/2 |
obsidian · port.theme-dark input[type="radio"]:checked | --background-modifier-border-focus | — | — | ports/obsidian/mapping.json:393 /mappings/color.interaction.focus.ring-container/3 |
windows · portnotepad-chrome.resource.FocusStrokeColorInnerBrush | — | — | ports/windows/mapping.json:2171 /mappings/color.interaction.focus.ring-container/1 |
windows · portnotepad-chrome.resource.SystemControlFocusVisualSecondaryBrush | — | — | ports/windows/mapping.json:2170 /mappings/color.interaction.focus.ring-container/0 |
windows · portpaint-chrome.resource.FocusStrokeColorInnerBrush | — | — | ports/windows/mapping.json:2173 /mappings/color.interaction.focus.ring-container/3 |
windows · portpaint-chrome.resource.SystemControlFocusVisualSecondaryBrush | — | — | ports/windows/mapping.json:2172 /mappings/color.interaction.focus.ring-container/2 |
windows · portterminal-chrome.resource.FocusStrokeColorInnerBrush | — | — | ports/windows/mapping.json:2176 /mappings/color.interaction.focus.ring-container/6 |
windows · portterminal-chrome.resource.SystemControlFocusVisualSecondaryBrush | — | — | ports/windows/mapping.json:2175 /mappings/color.interaction.focus.ring-container/5 |
windows · portwindows-11-notification-center-styler | JumpViewUI.JumpListListViewItem | FocusVisualSecondaryBrush | — | — | ports/windows/mapping.json:2178 /mappings/color.interaction.focus.ring-container/8 |
windows · portwindows-11-notification-center-styler | JumpViewUI.SystemItemListViewItem | FocusVisualSecondaryBrush | — | — | ports/windows/mapping.json:2177 /mappings/color.interaction.focus.ring-container/7 |
windows · portwindows-11-start-menu-styler | web .previewContainer:focus-visible | outline-color | — | — | ports/windows/mapping.json:2174 /mappings/color.interaction.focus.ring-container/4 |
| diagnostics · prose | — | — | spec/components/diagnostics.md:142 body |
| button · state | outline | focus-visible · color.action.primary.bg | spec/components/button.md:63 /stateTokens/focus-visible/outline |
| card · state | outline | focus-visible · color.surface.default | spec/components/card.md:46 /stateTokens/focus-visible/outline |
| checkbox · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline |
| code-editor · state | outline | focus-visible · color.code.current-line | spec/components/code-editor.md:71 /stateTokens/focus-visible/outline |
| combobox · state | outline | invalid+focus-visible · color.surface.input | spec/components/combobox.md:71 /stateTokens/invalid+focus-visible/outline |
| date-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline |
| dialog · state | outline | focus-trapped · color.surface.overlay | spec/components/dialog.md:57 /stateTokens/focus-trapped/outline |
| drawer · state | outline | focus-trapped · color.surface.overlay | spec/components/drawer.md:45 /stateTokens/focus-trapped/outline |
| i3-window-frame · state | outline | focus-visible · color.surface.chrome-alt | spec/components/i3-window-frame.md:66 /stateTokens/focus-visible/outline |
| number-field · state | outline | invalid+focus-visible · color.surface.input | spec/components/number-field.md:57 /stateTokens/invalid+focus-visible/outline |
| radio-group · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/radio-group.md:53 /stateTokens/checked+focus-visible/outline |
| select · state | outline | invalid+focus-visible · color.surface.input | spec/components/select.md:60 /stateTokens/invalid+focus-visible/outline |
| switch · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/switch.md:52 /stateTokens/checked+focus-visible/outline |
| terminal · state | outline | focus-visible · color.terminal.bg | spec/components/terminal.md:68 /stateTokens/focus-visible/outline |
| text-field · state | outline | invalid+focus-visible · color.surface.input | spec/components/text-field.md:73 /stateTokens/invalid+focus-visible/outline |
| textarea · state | outline | invalid+focus-visible · color.surface.input | spec/components/textarea.md:62 /stateTokens/invalid+focus-visible/outline |
| time-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/time-picker.md:65 /stateTokens/invalid+focus-visible/outline |
Declared unmapped ports
- chatgpt: Focus, hover, pressed and selection colours are derived by ChatGPT from the accent and contrast; only the accent is set. · ports/chatgpt/mapping.json:143
/unmapped/color.interaction.focus.ring-container - claude-code: Interface colour role that no Claude Code theme key takes. · ports/claude-code/mapping.json:249
/unmapped/color.interaction.focus.ring-container - codex: Interface colour role; a Codex tmTheme colours code only. · ports/codex/mapping.json:160
/unmapped/color.interaction.focus.ring-container - ghostty: Interface colour role; a terminal theme file carries terminal colours only. · ports/ghostty/mapping.json:179
/unmapped/color.interaction.focus.ring-container - orca: No separately mapped public Orca theme key for this role; the host derives or retains this state. The app plugin maps supported chrome and editor keys independently of terminal colours. · ports/orca/mapping.json:376
/unmapped/color.interaction.focus.ring-container - telegram: color.interaction.focus.ring-container has no separate native hook in this projection; related controls share the declared canonical role instead. · ports/telegram/mapping.json:1397
/unmapped/color.interaction.focus.ring-container - warp: Interface colour role; a terminal theme file carries terminal colours only. · ports/warp/mapping.json:173
/unmapped/color.interaction.focus.ring-container
Relevant contrast declarations
- button focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/button.md:63
/stateTokens/focus-visible - checkbox checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/checkbox.md:56
/stateTokens/checked+focus-visible - radio-group checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/radio-group.md:53
/stateTokens/checked+focus-visible - ring on the next button's fill: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/wizard.md:70
/contrast/8 - ring on the primary fill: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/dialog.md:69
/contrast/7 - switch checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/switch.md:52
/stateTokens/checked+focus-visible - code-editor focus-visible outline: color.interaction.focus.ring-container on color.code.current-line · spec/components/code-editor.md:71
/stateTokens/focus-visible - container focus ring on selection: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/contrast.json:43
/pairs/39 - ring on a selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/filterable-table.md:87
/contrast/7 - container ring on the window surface: color.interaction.focus.ring-container on color.surface.canvas · spec/components/i3-window-frame.md:77
/contrast/6 - i3-window-frame focus-visible outline: color.interaction.focus.ring-container on color.surface.chrome-alt · spec/components/i3-window-frame.md:66
/stateTokens/focus-visible - card focus-visible outline: color.interaction.focus.ring-container on color.surface.default · spec/components/card.md:46
/stateTokens/focus-visible - combobox invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/combobox.md:71
/stateTokens/invalid+focus-visible - date-picker invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/date-picker.md:74
/stateTokens/invalid+focus-visible - number-field invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/number-field.md:57
/stateTokens/invalid+focus-visible - select invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/select.md:60
/stateTokens/invalid+focus-visible - text-field invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/text-field.md:73
/stateTokens/invalid+focus-visible - textarea invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/textarea.md:62
/stateTokens/invalid+focus-visible - time-picker invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/time-picker.md:62
/stateTokens/invalid+focus-visible - dialog focus-trapped outline: color.interaction.focus.ring-container on color.surface.overlay · spec/components/dialog.md:57
/stateTokens/focus-trapped - drawer focus-trapped outline: color.interaction.focus.ring-container on color.surface.overlay · spec/components/drawer.md:45
/stateTokens/focus-trapped - terminal focus-visible outline: color.interaction.focus.ring-container on color.terminal.bg · spec/components/terminal.md:68
/stateTokens/focus-visible
heritage-ansi · heritage
- Resolved value
#ffa2a7- Status
- observed
- Consumption
- historical-only — Historical fidelity only; preserve all documented limitations and deprecations.
- Decisions
- None pending.
- Source
- tokens/semantic.tokens.json:421
/color/interaction/focus/ring-container - Alias chain
color.primitive.rose.800- Used by aliases
focus.ring-containerfocus.ring-contrast
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| dialog · contrast | — | focus-visible · color.action.primary.bg | spec/components/dialog.md:69 /contrast/7 |
| filterable-table · contrast | — | selected · color.interaction.selection.bg | spec/components/filterable-table.md:87 /contrast/7 |
| i3-window-frame · contrast | — | focus-visible · color.surface.canvas | spec/components/i3-window-frame.md:77 /contrast/6 |
| wizard · contrast | — | focus-visible · color.action.primary.bg | spec/components/wizard.md:70 /contrast/8 |
| Shared rule · contrast | — | — · color.interaction.selection.bg | spec/contrast.json:43 /pairs/39 |
| button · part | root.ring | — | spec/components/button.md:35 /tokens/root.ring |
| card · part | root.ring | — | spec/components/card.md:36 /tokens/root.ring |
| checkbox · part | box.ring-checked | — | spec/components/checkbox.md:40 /tokens/box.ring-checked |
| code-editor · part | root.ring | — | spec/components/code-editor.md:36 /tokens/root.ring |
| combobox · part | root.ring-invalid | — | spec/components/combobox.md:40 /tokens/root.ring-invalid |
| date-picker · part | root.ring-invalid | — | spec/components/date-picker.md:36 /tokens/root.ring-invalid |
| dialog · part | root.ring | — | spec/components/dialog.md:34 /tokens/root.ring |
| drawer · part | root.ring | — | spec/components/drawer.md:30 /tokens/root.ring |
| editor-search · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/editor-search.md:43 /tokens/dependency.role-color-interaction-focus-ring-container |
| filterable-table · part | row.ring-on-selection | — | spec/components/filterable-table.md:57 /tokens/row.ring-on-selection |
| i3-window-frame · part | window.ring | — | spec/components/i3-window-frame.md:52 /tokens/window.ring |
| multiselect · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/multiselect.md:48 /tokens/dependency.role-color-interaction-focus-ring-container |
| number-field · part | root.ring-invalid | — | spec/components/number-field.md:35 /tokens/root.ring-invalid |
| radio-group · part | box.ring-checked | — | spec/components/radio-group.md:38 /tokens/box.ring-checked |
| segmented-control · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/segmented-control.md:39 /tokens/dependency.role-color-interaction-focus-ring-container |
| select · part | root.ring-invalid | — | spec/components/select.md:38 /tokens/root.ring-invalid |
| switch · part | track.ring-checked | — | spec/components/switch.md:38 /tokens/track.ring-checked |
| terminal · part | root.ring | — | spec/components/terminal.md:35 /tokens/root.ring |
| text-field · part | root.ring-invalid | — | spec/components/text-field.md:47 /tokens/root.ring-invalid |
| textarea · part | root.ring-invalid | — | spec/components/textarea.md:38 /tokens/root.ring-invalid |
| time-picker · part | root.ring-invalid | — | spec/components/time-picker.md:33 /tokens/root.ring-invalid |
| wizard · part | next.ring | — | spec/components/wizard.md:49 /tokens/next.ring |
| diagnostics · prose | — | — | spec/components/diagnostics.md:142 body |
| button · state | outline | focus-visible · color.action.primary.bg | spec/components/button.md:63 /stateTokens/focus-visible/outline |
| card · state | outline | focus-visible · color.surface.default | spec/components/card.md:46 /stateTokens/focus-visible/outline |
| checkbox · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline |
| code-editor · state | outline | focus-visible · color.code.current-line | spec/components/code-editor.md:71 /stateTokens/focus-visible/outline |
| combobox · state | outline | invalid+focus-visible · color.surface.input | spec/components/combobox.md:71 /stateTokens/invalid+focus-visible/outline |
| date-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline |
| dialog · state | outline | focus-trapped · color.surface.overlay | spec/components/dialog.md:57 /stateTokens/focus-trapped/outline |
| drawer · state | outline | focus-trapped · color.surface.overlay | spec/components/drawer.md:45 /stateTokens/focus-trapped/outline |
| i3-window-frame · state | outline | focus-visible · color.surface.chrome-alt | spec/components/i3-window-frame.md:66 /stateTokens/focus-visible/outline |
| number-field · state | outline | invalid+focus-visible · color.surface.input | spec/components/number-field.md:57 /stateTokens/invalid+focus-visible/outline |
| radio-group · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/radio-group.md:53 /stateTokens/checked+focus-visible/outline |
| select · state | outline | invalid+focus-visible · color.surface.input | spec/components/select.md:60 /stateTokens/invalid+focus-visible/outline |
| switch · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/switch.md:52 /stateTokens/checked+focus-visible/outline |
| terminal · state | outline | focus-visible · color.terminal.bg | spec/components/terminal.md:68 /stateTokens/focus-visible/outline |
| text-field · state | outline | invalid+focus-visible · color.surface.input | spec/components/text-field.md:73 /stateTokens/invalid+focus-visible/outline |
| textarea · state | outline | invalid+focus-visible · color.surface.input | spec/components/textarea.md:62 /stateTokens/invalid+focus-visible/outline |
| time-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/time-picker.md:65 /stateTokens/invalid+focus-visible/outline |
Relevant contrast declarations
- button focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/button.md:63
/stateTokens/focus-visible - checkbox checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/checkbox.md:56
/stateTokens/checked+focus-visible - radio-group checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/radio-group.md:53
/stateTokens/checked+focus-visible - ring on the next button's fill: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/wizard.md:70
/contrast/8 - ring on the primary fill: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/dialog.md:69
/contrast/7 - switch checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/switch.md:52
/stateTokens/checked+focus-visible - code-editor focus-visible outline: color.interaction.focus.ring-container on color.code.current-line · spec/components/code-editor.md:71
/stateTokens/focus-visible - container focus ring on selection: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/contrast.json:43
/pairs/39 - ring on a selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/filterable-table.md:87
/contrast/7 - container ring on the window surface: color.interaction.focus.ring-container on color.surface.canvas · spec/components/i3-window-frame.md:77
/contrast/6 - i3-window-frame focus-visible outline: color.interaction.focus.ring-container on color.surface.chrome-alt · spec/components/i3-window-frame.md:66
/stateTokens/focus-visible - card focus-visible outline: color.interaction.focus.ring-container on color.surface.default · spec/components/card.md:46
/stateTokens/focus-visible - combobox invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/combobox.md:71
/stateTokens/invalid+focus-visible - date-picker invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/date-picker.md:74
/stateTokens/invalid+focus-visible - number-field invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/number-field.md:57
/stateTokens/invalid+focus-visible - select invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/select.md:60
/stateTokens/invalid+focus-visible - text-field invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/text-field.md:73
/stateTokens/invalid+focus-visible - textarea invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/textarea.md:62
/stateTokens/invalid+focus-visible - time-picker invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/time-picker.md:62
/stateTokens/invalid+focus-visible - dialog focus-trapped outline: color.interaction.focus.ring-container on color.surface.overlay · spec/components/dialog.md:57
/stateTokens/focus-trapped - drawer focus-trapped outline: color.interaction.focus.ring-container on color.surface.overlay · spec/components/drawer.md:45
/stateTokens/focus-trapped - terminal focus-visible outline: color.interaction.focus.ring-container on color.terminal.bg · spec/components/terminal.md:68
/stateTokens/focus-visible
extended · proposed
- Resolved value
#ffa2a7- Status
- observed
- Consumption
- blocked — Proposed profile: preview only, not downstream delivery.
- Decisions
- None pending.
- Source
- tokens/semantic.tokens.json:421
/color/interaction/focus/ring-container - Alias chain
color.primitive.rose.800- Used by aliases
focus.ring-containerfocus.ring-contrast
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| dialog · contrast | — | focus-visible · color.action.primary.bg | spec/components/dialog.md:69 /contrast/7 |
| filterable-table · contrast | — | selected · color.interaction.selection.bg | spec/components/filterable-table.md:87 /contrast/7 |
| i3-window-frame · contrast | — | focus-visible · color.surface.canvas | spec/components/i3-window-frame.md:77 /contrast/6 |
| wizard · contrast | — | focus-visible · color.action.primary.bg | spec/components/wizard.md:70 /contrast/8 |
| Shared rule · contrast | — | — · color.interaction.selection.bg | spec/contrast.json:43 /pairs/39 |
| button · part | root.ring | — | spec/components/button.md:35 /tokens/root.ring |
| card · part | root.ring | — | spec/components/card.md:36 /tokens/root.ring |
| checkbox · part | box.ring-checked | — | spec/components/checkbox.md:40 /tokens/box.ring-checked |
| code-editor · part | root.ring | — | spec/components/code-editor.md:36 /tokens/root.ring |
| combobox · part | root.ring-invalid | — | spec/components/combobox.md:40 /tokens/root.ring-invalid |
| date-picker · part | root.ring-invalid | — | spec/components/date-picker.md:36 /tokens/root.ring-invalid |
| dialog · part | root.ring | — | spec/components/dialog.md:34 /tokens/root.ring |
| drawer · part | root.ring | — | spec/components/drawer.md:30 /tokens/root.ring |
| editor-search · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/editor-search.md:43 /tokens/dependency.role-color-interaction-focus-ring-container |
| filterable-table · part | row.ring-on-selection | — | spec/components/filterable-table.md:57 /tokens/row.ring-on-selection |
| i3-window-frame · part | window.ring | — | spec/components/i3-window-frame.md:52 /tokens/window.ring |
| multiselect · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/multiselect.md:48 /tokens/dependency.role-color-interaction-focus-ring-container |
| number-field · part | root.ring-invalid | — | spec/components/number-field.md:35 /tokens/root.ring-invalid |
| radio-group · part | box.ring-checked | — | spec/components/radio-group.md:38 /tokens/box.ring-checked |
| segmented-control · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/segmented-control.md:39 /tokens/dependency.role-color-interaction-focus-ring-container |
| select · part | root.ring-invalid | — | spec/components/select.md:38 /tokens/root.ring-invalid |
| switch · part | track.ring-checked | — | spec/components/switch.md:38 /tokens/track.ring-checked |
| terminal · part | root.ring | — | spec/components/terminal.md:35 /tokens/root.ring |
| text-field · part | root.ring-invalid | — | spec/components/text-field.md:47 /tokens/root.ring-invalid |
| textarea · part | root.ring-invalid | — | spec/components/textarea.md:38 /tokens/root.ring-invalid |
| time-picker · part | root.ring-invalid | — | spec/components/time-picker.md:33 /tokens/root.ring-invalid |
| wizard · part | next.ring | — | spec/components/wizard.md:49 /tokens/next.ring |
| diagnostics · prose | — | — | spec/components/diagnostics.md:142 body |
| button · state | outline | focus-visible · color.action.primary.bg | spec/components/button.md:63 /stateTokens/focus-visible/outline |
| card · state | outline | focus-visible · color.surface.default | spec/components/card.md:46 /stateTokens/focus-visible/outline |
| checkbox · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline |
| code-editor · state | outline | focus-visible · color.code.current-line | spec/components/code-editor.md:71 /stateTokens/focus-visible/outline |
| combobox · state | outline | invalid+focus-visible · color.surface.input | spec/components/combobox.md:71 /stateTokens/invalid+focus-visible/outline |
| date-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline |
| dialog · state | outline | focus-trapped · color.surface.overlay | spec/components/dialog.md:57 /stateTokens/focus-trapped/outline |
| drawer · state | outline | focus-trapped · color.surface.overlay | spec/components/drawer.md:45 /stateTokens/focus-trapped/outline |
| i3-window-frame · state | outline | focus-visible · color.surface.chrome-alt | spec/components/i3-window-frame.md:66 /stateTokens/focus-visible/outline |
| number-field · state | outline | invalid+focus-visible · color.surface.input | spec/components/number-field.md:57 /stateTokens/invalid+focus-visible/outline |
| radio-group · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/radio-group.md:53 /stateTokens/checked+focus-visible/outline |
| select · state | outline | invalid+focus-visible · color.surface.input | spec/components/select.md:60 /stateTokens/invalid+focus-visible/outline |
| switch · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/switch.md:52 /stateTokens/checked+focus-visible/outline |
| terminal · state | outline | focus-visible · color.terminal.bg | spec/components/terminal.md:68 /stateTokens/focus-visible/outline |
| text-field · state | outline | invalid+focus-visible · color.surface.input | spec/components/text-field.md:73 /stateTokens/invalid+focus-visible/outline |
| textarea · state | outline | invalid+focus-visible · color.surface.input | spec/components/textarea.md:62 /stateTokens/invalid+focus-visible/outline |
| time-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/time-picker.md:65 /stateTokens/invalid+focus-visible/outline |
Relevant contrast declarations
- button focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/button.md:63
/stateTokens/focus-visible - checkbox checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/checkbox.md:56
/stateTokens/checked+focus-visible - radio-group checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/radio-group.md:53
/stateTokens/checked+focus-visible - ring on the next button's fill: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/wizard.md:70
/contrast/8 - ring on the primary fill: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/dialog.md:69
/contrast/7 - switch checked+focus-visible outline: color.interaction.focus.ring-container on color.action.primary.bg · spec/components/switch.md:52
/stateTokens/checked+focus-visible - code-editor focus-visible outline: color.interaction.focus.ring-container on color.code.current-line · spec/components/code-editor.md:71
/stateTokens/focus-visible - container focus ring on selection: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/contrast.json:43
/pairs/39 - ring on a selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/filterable-table.md:87
/contrast/7 - container ring on the window surface: color.interaction.focus.ring-container on color.surface.canvas · spec/components/i3-window-frame.md:77
/contrast/6 - i3-window-frame focus-visible outline: color.interaction.focus.ring-container on color.surface.chrome-alt · spec/components/i3-window-frame.md:66
/stateTokens/focus-visible - card focus-visible outline: color.interaction.focus.ring-container on color.surface.default · spec/components/card.md:46
/stateTokens/focus-visible - combobox invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/combobox.md:71
/stateTokens/invalid+focus-visible - date-picker invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/date-picker.md:74
/stateTokens/invalid+focus-visible - number-field invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/number-field.md:57
/stateTokens/invalid+focus-visible - select invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/select.md:60
/stateTokens/invalid+focus-visible - text-field invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/text-field.md:73
/stateTokens/invalid+focus-visible - textarea invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/textarea.md:62
/stateTokens/invalid+focus-visible - time-picker invalid+focus-visible outline: color.interaction.focus.ring-container on color.surface.input · spec/components/time-picker.md:62
/stateTokens/invalid+focus-visible - dialog focus-trapped outline: color.interaction.focus.ring-container on color.surface.overlay · spec/components/dialog.md:57
/stateTokens/focus-trapped - drawer focus-trapped outline: color.interaction.focus.ring-container on color.surface.overlay · spec/components/drawer.md:45
/stateTokens/focus-trapped - terminal focus-visible outline: color.interaction.focus.ring-container on color.terminal.bg · spec/components/terminal.md:68
/stateTokens/focus-visible