j3w1 / color.interaction.focus.ring-containerVue · HTML · React · Astro

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-container

default · approved

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
dialog · contrastfocus-visible · color.action.primary.bgspec/components/dialog.md:69 /contrast/7
diff-view · contrastfocus-visible · color.interaction.selection.bgspec/components/diff-view.md:89 /contrast/19
filterable-table · contrastselected · color.interaction.selection.bgspec/components/filterable-table.md:87 /contrast/7
i3-window-frame · contrastfocus-visible · color.surface.canvasspec/components/i3-window-frame.md:76 /contrast/5
pagination · contrastcurrent · color.interaction.selection.bgspec/components/pagination.md:46 /contrast/0
sidebar-nav · contrastselected · color.interaction.selection.bgspec/components/sidebar-nav.md:61 /contrast/0
wizard · contrastfocus-visible · color.action.primary.bgspec/components/wizard.md:70 /contrast/8
Shared rule · contrast— · color.interaction.selection.bgspec/contrast.json:43 /pairs/39
button · partroot.ringspec/components/button.md:35 /tokens/root.ring
card · partroot.ringspec/components/card.md:36 /tokens/root.ring
card · partselected.ringspec/components/card.md:42 /tokens/selected.ring
checkbox · partbox.ring-checkedspec/components/checkbox.md:40 /tokens/box.ring-checked
chip · partselected.ringspec/components/chip.md:43 /tokens/selected.ring
code-editor · partroot.ringspec/components/code-editor.md:36 /tokens/root.ring
combobox · partoption.ring-selectedspec/components/combobox.md:58 /tokens/option.ring-selected
combobox · partroot.ring-invalidspec/components/combobox.md:40 /tokens/root.ring-invalid
data-table · partselected.ringspec/components/data-table.md:46 /tokens/selected.ring
date-picker · partroot.ring-invalidspec/components/date-picker.md:36 /tokens/root.ring-invalid
diagnostics · partrow.ring-selectedspec/components/diagnostics.md:59 /tokens/row.ring-selected
dialog · partroot.ringspec/components/dialog.md:34 /tokens/root.ring
diff-view · partrow.ring-selectedspec/components/diff-view.md:61 /tokens/row.ring-selected
drawer · partroot.ringspec/components/drawer.md:30 /tokens/root.ring
editor-search · partdependency.role-color-interaction-focus-ring-containerspec/components/editor-search.md:36 /tokens/dependency.role-color-interaction-focus-ring-container
filterable-table · partrow.ring-on-selectionspec/components/filterable-table.md:57 /tokens/row.ring-on-selection
i3-window-frame · partwindow.ringspec/components/i3-window-frame.md:52 /tokens/window.ring
i3-window-frame · partworkspace.ring-on-selectionspec/components/i3-window-frame.md:42 /tokens/workspace.ring-on-selection
icon-button · partroot.ring-toggledspec/components/icon-button.md:33 /tokens/root.ring-toggled
list · partselected.ringspec/components/list.md:44 /tokens/selected.ring
menu · partactive.ringspec/components/menu.md:51 /tokens/active.ring
multiselect · partdependency.role-color-interaction-focus-ring-containerspec/components/multiselect.md:41 /tokens/dependency.role-color-interaction-focus-ring-container
number-field · partroot.ring-invalidspec/components/number-field.md:35 /tokens/root.ring-invalid
pagination · partcurrent.ringspec/components/pagination.md:36 /tokens/current.ring
radio-group · partbox.ring-checkedspec/components/radio-group.md:38 /tokens/box.ring-checked
segmented-control · partdependency.role-color-interaction-focus-ring-containerspec/components/segmented-control.md:39 /tokens/dependency.role-color-interaction-focus-ring-container
select · partroot.ring-invalidspec/components/select.md:38 /tokens/root.ring-invalid
sidebar-nav · partselected.ringspec/components/sidebar-nav.md:46 /tokens/selected.ring
switch · parttrack.ring-checkedspec/components/switch.md:38 /tokens/track.ring-checked
table · partselected.ringspec/components/table.md:49 /tokens/selected.ring
terminal · partroot.ringspec/components/terminal.md:35 /tokens/root.ring
text-field · partroot.ring-invalidspec/components/text-field.md:47 /tokens/root.ring-invalid
textarea · partroot.ring-invalidspec/components/textarea.md:38 /tokens/root.ring-invalid
wizard · partnext.ringspec/components/wizard.md:49 /tokens/next.ring
button · stateoutlinefocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/outline
card · stateoutlinefocus-visible · color.surface.defaultspec/components/card.md:46 /stateTokens/focus-visible/outline
card · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/card.md:48 /stateTokens/selected+focus-visible/outline
checkbox · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline
chip · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/chip.md:52 /stateTokens/selected+focus-visible/outline
code-editor · stateoutlinefocus-visible · color.code.current-linespec/components/code-editor.md:71 /stateTokens/focus-visible/outline
combobox · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/combobox.md:71 /stateTokens/invalid+focus-visible/outline
combobox · stateoutlineselected · color.interaction.selection.bgspec/components/combobox.md:69 /stateTokens/selected/outline
data-table · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/data-table.md:60 /stateTokens/selected+focus-visible/outline
date-picker · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline
diagnostics · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/diagnostics.md:69 /stateTokens/selected+focus-visible/outline
dialog · stateoutlinefocus-trapped · color.surface.overlayspec/components/dialog.md:57 /stateTokens/focus-trapped/outline
drawer · stateoutlinefocus-trapped · color.surface.overlayspec/components/drawer.md:45 /stateTokens/focus-trapped/outline
i3-window-frame · stateoutlinefocus-visible · color.surface.chrome-altspec/components/i3-window-frame.md:66 /stateTokens/focus-visible/outline
icon-button · stateoutlinetoggled+focus-visible · color.interaction.selection.bgspec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/outline
list · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/list.md:54 /stateTokens/selected+focus-visible/outline
menu · stateoutlineselected · color.interaction.selection.bgspec/components/menu.md:63 /stateTokens/selected/outline
number-field · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/number-field.md:57 /stateTokens/invalid+focus-visible/outline
radio-group · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/outline
select · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/select.md:60 /stateTokens/invalid+focus-visible/outline
switch · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/outline
table · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/table.md:59 /stateTokens/selected+focus-visible/outline
terminal · stateoutlinefocus-visible · color.terminal.bgspec/components/terminal.md:68 /stateTokens/focus-visible/outline
text-field · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/text-field.md:73 /stateTokens/invalid+focus-visible/outline
textarea · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/textarea.md:62 /stateTokens/invalid+focus-visible/outline

Relevant contrast declarations

heritage-ansi · heritage

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
dialog · contrastfocus-visible · color.action.primary.bgspec/components/dialog.md:69 /contrast/7
diff-view · contrastfocus-visible · color.interaction.selection.bgspec/components/diff-view.md:89 /contrast/19
filterable-table · contrastselected · color.interaction.selection.bgspec/components/filterable-table.md:87 /contrast/7
i3-window-frame · contrastfocus-visible · color.surface.canvasspec/components/i3-window-frame.md:76 /contrast/5
pagination · contrastcurrent · color.interaction.selection.bgspec/components/pagination.md:46 /contrast/0
sidebar-nav · contrastselected · color.interaction.selection.bgspec/components/sidebar-nav.md:61 /contrast/0
wizard · contrastfocus-visible · color.action.primary.bgspec/components/wizard.md:70 /contrast/8
Shared rule · contrast— · color.interaction.selection.bgspec/contrast.json:43 /pairs/39
button · partroot.ringspec/components/button.md:35 /tokens/root.ring
card · partroot.ringspec/components/card.md:36 /tokens/root.ring
card · partselected.ringspec/components/card.md:42 /tokens/selected.ring
checkbox · partbox.ring-checkedspec/components/checkbox.md:40 /tokens/box.ring-checked
chip · partselected.ringspec/components/chip.md:43 /tokens/selected.ring
code-editor · partroot.ringspec/components/code-editor.md:36 /tokens/root.ring
combobox · partoption.ring-selectedspec/components/combobox.md:58 /tokens/option.ring-selected
combobox · partroot.ring-invalidspec/components/combobox.md:40 /tokens/root.ring-invalid
data-table · partselected.ringspec/components/data-table.md:46 /tokens/selected.ring
date-picker · partroot.ring-invalidspec/components/date-picker.md:36 /tokens/root.ring-invalid
diagnostics · partrow.ring-selectedspec/components/diagnostics.md:59 /tokens/row.ring-selected
dialog · partroot.ringspec/components/dialog.md:34 /tokens/root.ring
diff-view · partrow.ring-selectedspec/components/diff-view.md:61 /tokens/row.ring-selected
drawer · partroot.ringspec/components/drawer.md:30 /tokens/root.ring
editor-search · partdependency.role-color-interaction-focus-ring-containerspec/components/editor-search.md:36 /tokens/dependency.role-color-interaction-focus-ring-container
filterable-table · partrow.ring-on-selectionspec/components/filterable-table.md:57 /tokens/row.ring-on-selection
i3-window-frame · partwindow.ringspec/components/i3-window-frame.md:52 /tokens/window.ring
i3-window-frame · partworkspace.ring-on-selectionspec/components/i3-window-frame.md:42 /tokens/workspace.ring-on-selection
icon-button · partroot.ring-toggledspec/components/icon-button.md:33 /tokens/root.ring-toggled
list · partselected.ringspec/components/list.md:44 /tokens/selected.ring
menu · partactive.ringspec/components/menu.md:51 /tokens/active.ring
multiselect · partdependency.role-color-interaction-focus-ring-containerspec/components/multiselect.md:41 /tokens/dependency.role-color-interaction-focus-ring-container
number-field · partroot.ring-invalidspec/components/number-field.md:35 /tokens/root.ring-invalid
pagination · partcurrent.ringspec/components/pagination.md:36 /tokens/current.ring
radio-group · partbox.ring-checkedspec/components/radio-group.md:38 /tokens/box.ring-checked
segmented-control · partdependency.role-color-interaction-focus-ring-containerspec/components/segmented-control.md:39 /tokens/dependency.role-color-interaction-focus-ring-container
select · partroot.ring-invalidspec/components/select.md:38 /tokens/root.ring-invalid
sidebar-nav · partselected.ringspec/components/sidebar-nav.md:46 /tokens/selected.ring
switch · parttrack.ring-checkedspec/components/switch.md:38 /tokens/track.ring-checked
table · partselected.ringspec/components/table.md:49 /tokens/selected.ring
terminal · partroot.ringspec/components/terminal.md:35 /tokens/root.ring
text-field · partroot.ring-invalidspec/components/text-field.md:47 /tokens/root.ring-invalid
textarea · partroot.ring-invalidspec/components/textarea.md:38 /tokens/root.ring-invalid
wizard · partnext.ringspec/components/wizard.md:49 /tokens/next.ring
button · stateoutlinefocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/outline
card · stateoutlinefocus-visible · color.surface.defaultspec/components/card.md:46 /stateTokens/focus-visible/outline
card · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/card.md:48 /stateTokens/selected+focus-visible/outline
checkbox · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline
chip · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/chip.md:52 /stateTokens/selected+focus-visible/outline
code-editor · stateoutlinefocus-visible · color.code.current-linespec/components/code-editor.md:71 /stateTokens/focus-visible/outline
combobox · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/combobox.md:71 /stateTokens/invalid+focus-visible/outline
combobox · stateoutlineselected · color.interaction.selection.bgspec/components/combobox.md:69 /stateTokens/selected/outline
data-table · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/data-table.md:60 /stateTokens/selected+focus-visible/outline
date-picker · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline
diagnostics · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/diagnostics.md:69 /stateTokens/selected+focus-visible/outline
dialog · stateoutlinefocus-trapped · color.surface.overlayspec/components/dialog.md:57 /stateTokens/focus-trapped/outline
drawer · stateoutlinefocus-trapped · color.surface.overlayspec/components/drawer.md:45 /stateTokens/focus-trapped/outline
i3-window-frame · stateoutlinefocus-visible · color.surface.chrome-altspec/components/i3-window-frame.md:66 /stateTokens/focus-visible/outline
icon-button · stateoutlinetoggled+focus-visible · color.interaction.selection.bgspec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/outline
list · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/list.md:54 /stateTokens/selected+focus-visible/outline
menu · stateoutlineselected · color.interaction.selection.bgspec/components/menu.md:63 /stateTokens/selected/outline
number-field · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/number-field.md:57 /stateTokens/invalid+focus-visible/outline
radio-group · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/outline
select · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/select.md:60 /stateTokens/invalid+focus-visible/outline
switch · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/outline
table · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/table.md:59 /stateTokens/selected+focus-visible/outline
terminal · stateoutlinefocus-visible · color.terminal.bgspec/components/terminal.md:68 /stateTokens/focus-visible/outline
text-field · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/text-field.md:73 /stateTokens/invalid+focus-visible/outline
textarea · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/textarea.md:62 /stateTokens/invalid+focus-visible/outline

Relevant contrast declarations

extended · proposed

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
dialog · contrastfocus-visible · color.action.primary.bgspec/components/dialog.md:69 /contrast/7
diff-view · contrastfocus-visible · color.interaction.selection.bgspec/components/diff-view.md:89 /contrast/19
filterable-table · contrastselected · color.interaction.selection.bgspec/components/filterable-table.md:87 /contrast/7
i3-window-frame · contrastfocus-visible · color.surface.canvasspec/components/i3-window-frame.md:76 /contrast/5
pagination · contrastcurrent · color.interaction.selection.bgspec/components/pagination.md:46 /contrast/0
sidebar-nav · contrastselected · color.interaction.selection.bgspec/components/sidebar-nav.md:61 /contrast/0
wizard · contrastfocus-visible · color.action.primary.bgspec/components/wizard.md:70 /contrast/8
Shared rule · contrast— · color.interaction.selection.bgspec/contrast.json:43 /pairs/39
button · partroot.ringspec/components/button.md:35 /tokens/root.ring
card · partroot.ringspec/components/card.md:36 /tokens/root.ring
card · partselected.ringspec/components/card.md:42 /tokens/selected.ring
checkbox · partbox.ring-checkedspec/components/checkbox.md:40 /tokens/box.ring-checked
chip · partselected.ringspec/components/chip.md:43 /tokens/selected.ring
code-editor · partroot.ringspec/components/code-editor.md:36 /tokens/root.ring
combobox · partoption.ring-selectedspec/components/combobox.md:58 /tokens/option.ring-selected
combobox · partroot.ring-invalidspec/components/combobox.md:40 /tokens/root.ring-invalid
data-table · partselected.ringspec/components/data-table.md:46 /tokens/selected.ring
date-picker · partroot.ring-invalidspec/components/date-picker.md:36 /tokens/root.ring-invalid
diagnostics · partrow.ring-selectedspec/components/diagnostics.md:59 /tokens/row.ring-selected
dialog · partroot.ringspec/components/dialog.md:34 /tokens/root.ring
diff-view · partrow.ring-selectedspec/components/diff-view.md:61 /tokens/row.ring-selected
drawer · partroot.ringspec/components/drawer.md:30 /tokens/root.ring
editor-search · partdependency.role-color-interaction-focus-ring-containerspec/components/editor-search.md:36 /tokens/dependency.role-color-interaction-focus-ring-container
filterable-table · partrow.ring-on-selectionspec/components/filterable-table.md:57 /tokens/row.ring-on-selection
i3-window-frame · partwindow.ringspec/components/i3-window-frame.md:52 /tokens/window.ring
i3-window-frame · partworkspace.ring-on-selectionspec/components/i3-window-frame.md:42 /tokens/workspace.ring-on-selection
icon-button · partroot.ring-toggledspec/components/icon-button.md:33 /tokens/root.ring-toggled
list · partselected.ringspec/components/list.md:44 /tokens/selected.ring
menu · partactive.ringspec/components/menu.md:51 /tokens/active.ring
multiselect · partdependency.role-color-interaction-focus-ring-containerspec/components/multiselect.md:41 /tokens/dependency.role-color-interaction-focus-ring-container
number-field · partroot.ring-invalidspec/components/number-field.md:35 /tokens/root.ring-invalid
pagination · partcurrent.ringspec/components/pagination.md:36 /tokens/current.ring
radio-group · partbox.ring-checkedspec/components/radio-group.md:38 /tokens/box.ring-checked
segmented-control · partdependency.role-color-interaction-focus-ring-containerspec/components/segmented-control.md:39 /tokens/dependency.role-color-interaction-focus-ring-container
select · partroot.ring-invalidspec/components/select.md:38 /tokens/root.ring-invalid
sidebar-nav · partselected.ringspec/components/sidebar-nav.md:46 /tokens/selected.ring
switch · parttrack.ring-checkedspec/components/switch.md:38 /tokens/track.ring-checked
table · partselected.ringspec/components/table.md:49 /tokens/selected.ring
terminal · partroot.ringspec/components/terminal.md:35 /tokens/root.ring
text-field · partroot.ring-invalidspec/components/text-field.md:47 /tokens/root.ring-invalid
textarea · partroot.ring-invalidspec/components/textarea.md:38 /tokens/root.ring-invalid
wizard · partnext.ringspec/components/wizard.md:49 /tokens/next.ring
button · stateoutlinefocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/outline
card · stateoutlinefocus-visible · color.surface.defaultspec/components/card.md:46 /stateTokens/focus-visible/outline
card · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/card.md:48 /stateTokens/selected+focus-visible/outline
checkbox · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/outline
chip · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/chip.md:52 /stateTokens/selected+focus-visible/outline
code-editor · stateoutlinefocus-visible · color.code.current-linespec/components/code-editor.md:71 /stateTokens/focus-visible/outline
combobox · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/combobox.md:71 /stateTokens/invalid+focus-visible/outline
combobox · stateoutlineselected · color.interaction.selection.bgspec/components/combobox.md:69 /stateTokens/selected/outline
data-table · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/data-table.md:60 /stateTokens/selected+focus-visible/outline
date-picker · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/date-picker.md:77 /stateTokens/invalid+focus-visible/outline
diagnostics · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/diagnostics.md:69 /stateTokens/selected+focus-visible/outline
dialog · stateoutlinefocus-trapped · color.surface.overlayspec/components/dialog.md:57 /stateTokens/focus-trapped/outline
drawer · stateoutlinefocus-trapped · color.surface.overlayspec/components/drawer.md:45 /stateTokens/focus-trapped/outline
i3-window-frame · stateoutlinefocus-visible · color.surface.chrome-altspec/components/i3-window-frame.md:66 /stateTokens/focus-visible/outline
icon-button · stateoutlinetoggled+focus-visible · color.interaction.selection.bgspec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/outline
list · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/list.md:54 /stateTokens/selected+focus-visible/outline
menu · stateoutlineselected · color.interaction.selection.bgspec/components/menu.md:63 /stateTokens/selected/outline
number-field · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/number-field.md:57 /stateTokens/invalid+focus-visible/outline
radio-group · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/outline
select · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/select.md:60 /stateTokens/invalid+focus-visible/outline
switch · stateoutlinechecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/outline
table · stateoutlineselected+focus-visible · color.interaction.selection.bgspec/components/table.md:59 /stateTokens/selected+focus-visible/outline
terminal · stateoutlinefocus-visible · color.terminal.bgspec/components/terminal.md:68 /stateTokens/focus-visible/outline
text-field · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/text-field.md:73 /stateTokens/invalid+focus-visible/outline
textarea · stateoutlineinvalid+focus-visible · color.surface.inputspec/components/textarea.md:62 /stateTokens/invalid+focus-visible/outline

Relevant contrast declarations

j3w1 / command

  • SPEC Overview
  • SPEC Foundations
  • SPEC Components
  • SPEC Patterns
  • SPEC Tokens
  • SPEC Tools
  • SPEC Implement
  • SPEC For agents
  • SPEC Ports
  • SPEC Releases
  • DEMO Vue application demo
  • SPEC Complete UI theme specification