J3W1 / DESIGN SYSTEM
color.interaction.focus.ring-container
Focus colour for containers and explicitly mapped filled controls (D-015); component rules determine ring geometry.
Source revision 1faefcf014c8bf01a6b27308ea796da968773a81
Find related usage · Specification anchor · Measured contrast report (default profile)
Report an issue with this token
color.interaction.focus.ring-container--color-interaction-focus-ring-containerdefault · approved
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 |
| diff-view · contrast | — | focus-visible · color.interaction.selection.bg | spec/components/diff-view.md:89 /contrast/19 |
| 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:76 /contrast/5 |
| pagination · contrast | — | current · color.interaction.selection.bg | spec/components/pagination.md:46 /contrast/0 |
| sidebar-nav · contrast | — | selected · color.interaction.selection.bg | spec/components/sidebar-nav.md:61 /contrast/0 |
| 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 |
| card · part | selected.ring | — | spec/components/card.md:42 /tokens/selected.ring |
| checkbox · part | box.ring-checked | — | spec/components/checkbox.md:40 /tokens/box.ring-checked |
| chip · part | selected.ring | — | spec/components/chip.md:43 /tokens/selected.ring |
| code-editor · part | root.ring | — | spec/components/code-editor.md:36 /tokens/root.ring |
| combobox · part | option.ring-selected | — | spec/components/combobox.md:58 /tokens/option.ring-selected |
| combobox · part | root.ring-invalid | — | spec/components/combobox.md:40 /tokens/root.ring-invalid |
| data-table · part | selected.ring | — | spec/components/data-table.md:46 /tokens/selected.ring |
| date-picker · part | root.ring-invalid | — | spec/components/date-picker.md:36 /tokens/root.ring-invalid |
| diagnostics · part | row.ring-selected | — | spec/components/diagnostics.md:59 /tokens/row.ring-selected |
| dialog · part | root.ring | — | spec/components/dialog.md:34 /tokens/root.ring |
| diff-view · part | row.ring-selected | — | spec/components/diff-view.md:61 /tokens/row.ring-selected |
| 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:36 /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 |
| i3-window-frame · part | workspace.ring-on-selection | — | spec/components/i3-window-frame.md:42 /tokens/workspace.ring-on-selection |
| icon-button · part | root.ring-toggled | — | spec/components/icon-button.md:33 /tokens/root.ring-toggled |
| list · part | selected.ring | — | spec/components/list.md:44 /tokens/selected.ring |
| menu · part | active.ring | — | spec/components/menu.md:51 /tokens/active.ring |
| multiselect · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/multiselect.md:41 /tokens/dependency.role-color-interaction-focus-ring-container |
| number-field · part | root.ring-invalid | — | spec/components/number-field.md:35 /tokens/root.ring-invalid |
| pagination · part | current.ring | — | spec/components/pagination.md:36 /tokens/current.ring |
| 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 |
| sidebar-nav · part | selected.ring | — | spec/components/sidebar-nav.md:46 /tokens/selected.ring |
| switch · part | track.ring-checked | — | spec/components/switch.md:38 /tokens/track.ring-checked |
| table · part | selected.ring | — | spec/components/table.md:49 /tokens/selected.ring |
| 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 |
| wizard · part | next.ring | — | spec/components/wizard.md:49 /tokens/next.ring |
| 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 |
| card · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/card.md:48 /stateTokens/selected+focus-visible/outline |
| checkbox · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline |
| chip · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/chip.md:52 /stateTokens/selected+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 |
| combobox · state | outline | selected · color.interaction.selection.bg | spec/components/combobox.md:69 /stateTokens/selected/outline |
| data-table · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/data-table.md:60 /stateTokens/selected+focus-visible/outline |
| date-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline |
| diagnostics · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/diagnostics.md:69 /stateTokens/selected+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 |
| icon-button · state | outline | toggled+focus-visible · color.interaction.selection.bg | spec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/outline |
| list · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/list.md:54 /stateTokens/selected+focus-visible/outline |
| menu · state | outline | selected · color.interaction.selection.bg | spec/components/menu.md:63 /stateTokens/selected/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 |
| table · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/table.md:59 /stateTokens/selected+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 |
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 - card selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/card.md:48
/stateTokens/selected+focus-visible - chip selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/chip.md:52
/stateTokens/selected+focus-visible - combobox selected outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/combobox.md:69
/stateTokens/selected - container focus ring on selection: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/contrast.json:43
/pairs/39 - data-table selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/data-table.md:60
/stateTokens/selected+focus-visible - diagnostics selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/diagnostics.md:69
/stateTokens/selected+focus-visible - icon-button toggled+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/icon-button.md:44
/stateTokens/toggled+focus-visible - list selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/list.md:54
/stateTokens/selected+focus-visible - menu selected outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/menu.md:63
/stateTokens/selected - ring on a selected item when focused: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/sidebar-nav.md:61
/contrast/0 - ring on a selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/filterable-table.md:87
/contrast/7 - ring on the current page when focused: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/pagination.md:46
/contrast/0 - ring on the selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/diff-view.md:89
/contrast/19 - table selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/table.md:59
/stateTokens/selected+focus-visible - container ring on the window surface: color.interaction.focus.ring-container on color.surface.canvas · spec/components/i3-window-frame.md:76
/contrast/5 - 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 - 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
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 |
| diff-view · contrast | — | focus-visible · color.interaction.selection.bg | spec/components/diff-view.md:89 /contrast/19 |
| 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:76 /contrast/5 |
| pagination · contrast | — | current · color.interaction.selection.bg | spec/components/pagination.md:46 /contrast/0 |
| sidebar-nav · contrast | — | selected · color.interaction.selection.bg | spec/components/sidebar-nav.md:61 /contrast/0 |
| 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 |
| card · part | selected.ring | — | spec/components/card.md:42 /tokens/selected.ring |
| checkbox · part | box.ring-checked | — | spec/components/checkbox.md:40 /tokens/box.ring-checked |
| chip · part | selected.ring | — | spec/components/chip.md:43 /tokens/selected.ring |
| code-editor · part | root.ring | — | spec/components/code-editor.md:36 /tokens/root.ring |
| combobox · part | option.ring-selected | — | spec/components/combobox.md:58 /tokens/option.ring-selected |
| combobox · part | root.ring-invalid | — | spec/components/combobox.md:40 /tokens/root.ring-invalid |
| data-table · part | selected.ring | — | spec/components/data-table.md:46 /tokens/selected.ring |
| date-picker · part | root.ring-invalid | — | spec/components/date-picker.md:36 /tokens/root.ring-invalid |
| diagnostics · part | row.ring-selected | — | spec/components/diagnostics.md:59 /tokens/row.ring-selected |
| dialog · part | root.ring | — | spec/components/dialog.md:34 /tokens/root.ring |
| diff-view · part | row.ring-selected | — | spec/components/diff-view.md:61 /tokens/row.ring-selected |
| 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:36 /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 |
| i3-window-frame · part | workspace.ring-on-selection | — | spec/components/i3-window-frame.md:42 /tokens/workspace.ring-on-selection |
| icon-button · part | root.ring-toggled | — | spec/components/icon-button.md:33 /tokens/root.ring-toggled |
| list · part | selected.ring | — | spec/components/list.md:44 /tokens/selected.ring |
| menu · part | active.ring | — | spec/components/menu.md:51 /tokens/active.ring |
| multiselect · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/multiselect.md:41 /tokens/dependency.role-color-interaction-focus-ring-container |
| number-field · part | root.ring-invalid | — | spec/components/number-field.md:35 /tokens/root.ring-invalid |
| pagination · part | current.ring | — | spec/components/pagination.md:36 /tokens/current.ring |
| 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 |
| sidebar-nav · part | selected.ring | — | spec/components/sidebar-nav.md:46 /tokens/selected.ring |
| switch · part | track.ring-checked | — | spec/components/switch.md:38 /tokens/track.ring-checked |
| table · part | selected.ring | — | spec/components/table.md:49 /tokens/selected.ring |
| 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 |
| wizard · part | next.ring | — | spec/components/wizard.md:49 /tokens/next.ring |
| 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 |
| card · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/card.md:48 /stateTokens/selected+focus-visible/outline |
| checkbox · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline |
| chip · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/chip.md:52 /stateTokens/selected+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 |
| combobox · state | outline | selected · color.interaction.selection.bg | spec/components/combobox.md:69 /stateTokens/selected/outline |
| data-table · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/data-table.md:60 /stateTokens/selected+focus-visible/outline |
| date-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline |
| diagnostics · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/diagnostics.md:69 /stateTokens/selected+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 |
| icon-button · state | outline | toggled+focus-visible · color.interaction.selection.bg | spec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/outline |
| list · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/list.md:54 /stateTokens/selected+focus-visible/outline |
| menu · state | outline | selected · color.interaction.selection.bg | spec/components/menu.md:63 /stateTokens/selected/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 |
| table · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/table.md:59 /stateTokens/selected+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 |
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 - card selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/card.md:48
/stateTokens/selected+focus-visible - chip selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/chip.md:52
/stateTokens/selected+focus-visible - combobox selected outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/combobox.md:69
/stateTokens/selected - container focus ring on selection: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/contrast.json:43
/pairs/39 - data-table selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/data-table.md:60
/stateTokens/selected+focus-visible - diagnostics selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/diagnostics.md:69
/stateTokens/selected+focus-visible - icon-button toggled+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/icon-button.md:44
/stateTokens/toggled+focus-visible - list selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/list.md:54
/stateTokens/selected+focus-visible - menu selected outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/menu.md:63
/stateTokens/selected - ring on a selected item when focused: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/sidebar-nav.md:61
/contrast/0 - ring on a selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/filterable-table.md:87
/contrast/7 - ring on the current page when focused: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/pagination.md:46
/contrast/0 - ring on the selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/diff-view.md:89
/contrast/19 - table selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/table.md:59
/stateTokens/selected+focus-visible - container ring on the window surface: color.interaction.focus.ring-container on color.surface.canvas · spec/components/i3-window-frame.md:76
/contrast/5 - 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 - 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
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 |
| diff-view · contrast | — | focus-visible · color.interaction.selection.bg | spec/components/diff-view.md:89 /contrast/19 |
| 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:76 /contrast/5 |
| pagination · contrast | — | current · color.interaction.selection.bg | spec/components/pagination.md:46 /contrast/0 |
| sidebar-nav · contrast | — | selected · color.interaction.selection.bg | spec/components/sidebar-nav.md:61 /contrast/0 |
| 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 |
| card · part | selected.ring | — | spec/components/card.md:42 /tokens/selected.ring |
| checkbox · part | box.ring-checked | — | spec/components/checkbox.md:40 /tokens/box.ring-checked |
| chip · part | selected.ring | — | spec/components/chip.md:43 /tokens/selected.ring |
| code-editor · part | root.ring | — | spec/components/code-editor.md:36 /tokens/root.ring |
| combobox · part | option.ring-selected | — | spec/components/combobox.md:58 /tokens/option.ring-selected |
| combobox · part | root.ring-invalid | — | spec/components/combobox.md:40 /tokens/root.ring-invalid |
| data-table · part | selected.ring | — | spec/components/data-table.md:46 /tokens/selected.ring |
| date-picker · part | root.ring-invalid | — | spec/components/date-picker.md:36 /tokens/root.ring-invalid |
| diagnostics · part | row.ring-selected | — | spec/components/diagnostics.md:59 /tokens/row.ring-selected |
| dialog · part | root.ring | — | spec/components/dialog.md:34 /tokens/root.ring |
| diff-view · part | row.ring-selected | — | spec/components/diff-view.md:61 /tokens/row.ring-selected |
| 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:36 /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 |
| i3-window-frame · part | workspace.ring-on-selection | — | spec/components/i3-window-frame.md:42 /tokens/workspace.ring-on-selection |
| icon-button · part | root.ring-toggled | — | spec/components/icon-button.md:33 /tokens/root.ring-toggled |
| list · part | selected.ring | — | spec/components/list.md:44 /tokens/selected.ring |
| menu · part | active.ring | — | spec/components/menu.md:51 /tokens/active.ring |
| multiselect · part | dependency.role-color-interaction-focus-ring-container | — | spec/components/multiselect.md:41 /tokens/dependency.role-color-interaction-focus-ring-container |
| number-field · part | root.ring-invalid | — | spec/components/number-field.md:35 /tokens/root.ring-invalid |
| pagination · part | current.ring | — | spec/components/pagination.md:36 /tokens/current.ring |
| 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 |
| sidebar-nav · part | selected.ring | — | spec/components/sidebar-nav.md:46 /tokens/selected.ring |
| switch · part | track.ring-checked | — | spec/components/switch.md:38 /tokens/track.ring-checked |
| table · part | selected.ring | — | spec/components/table.md:49 /tokens/selected.ring |
| 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 |
| wizard · part | next.ring | — | spec/components/wizard.md:49 /tokens/next.ring |
| 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 |
| card · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/card.md:48 /stateTokens/selected+focus-visible/outline |
| checkbox · state | outline | checked+focus-visible · color.action.primary.bg | spec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline |
| chip · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/chip.md:52 /stateTokens/selected+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 |
| combobox · state | outline | selected · color.interaction.selection.bg | spec/components/combobox.md:69 /stateTokens/selected/outline |
| data-table · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/data-table.md:60 /stateTokens/selected+focus-visible/outline |
| date-picker · state | outline | invalid+focus-visible · color.surface.input | spec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline |
| diagnostics · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/diagnostics.md:69 /stateTokens/selected+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 |
| icon-button · state | outline | toggled+focus-visible · color.interaction.selection.bg | spec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/outline |
| list · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/list.md:54 /stateTokens/selected+focus-visible/outline |
| menu · state | outline | selected · color.interaction.selection.bg | spec/components/menu.md:63 /stateTokens/selected/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 |
| table · state | outline | selected+focus-visible · color.interaction.selection.bg | spec/components/table.md:59 /stateTokens/selected+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 |
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 - card selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/card.md:48
/stateTokens/selected+focus-visible - chip selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/chip.md:52
/stateTokens/selected+focus-visible - combobox selected outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/combobox.md:69
/stateTokens/selected - container focus ring on selection: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/contrast.json:43
/pairs/39 - data-table selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/data-table.md:60
/stateTokens/selected+focus-visible - diagnostics selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/diagnostics.md:69
/stateTokens/selected+focus-visible - icon-button toggled+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/icon-button.md:44
/stateTokens/toggled+focus-visible - list selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/list.md:54
/stateTokens/selected+focus-visible - menu selected outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/menu.md:63
/stateTokens/selected - ring on a selected item when focused: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/sidebar-nav.md:61
/contrast/0 - ring on a selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/filterable-table.md:87
/contrast/7 - ring on the current page when focused: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/pagination.md:46
/contrast/0 - ring on the selected row: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/diff-view.md:89
/contrast/19 - table selected+focus-visible outline: color.interaction.focus.ring-container on color.interaction.selection.bg · spec/components/table.md:59
/stateTokens/selected+focus-visible - container ring on the window surface: color.interaction.focus.ring-container on color.surface.canvas · spec/components/i3-window-frame.md:76
/contrast/5 - 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 - 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