j3w1 / color.interaction.selection.bgVue · HTML · React · Astro

J3W1 / DESIGN SYSTEM

color.interaction.selection.bg

Selected row, tab, workspace; D-027 recessed the fill, leaving the 2px indicator and the check to carry selection.

Source revision 1faefcf014c8bf01a6b27308ea796da968773a81

Find related usage · Specification anchor · Measured contrast report (default profile)

Report an issue with this token

color.interaction.selection.bg
--color-interaction-selection-bg

default · approved

Resolved value
#531310
Status
approved
Consumption
use — Use within the role's documented scope and restrictions.
Decisions
None pending.
Source
tokens/semantic.tokens.json:301 /color/interaction/selection/bg
Alias chain
color.primitive.red.100
Used by aliases
No declared aliases depend on this role.

Provenance and restrictions

{
  "status": "approved",
  "approval": {
    "decision": "D-027"
  }
}

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
date-picker · contrast—— · color.interaction.selection.bgspec/components/date-picker.md:111 /contrast/6
diff-view · contrast—focus-visible · color.interaction.selection.bgspec/components/diff-view.md:89 /contrast/19
filterable-table · contrast—selected · color.interaction.selection.bgspec/components/filterable-table.md:87 /contrast/7
i3-window-frame · contrast—— · color.surface.chromespec/components/i3-window-frame.md:80 /contrast/9
icon-button · contrast—toggled · color.surface.defaultspec/components/icon-button.md:47 /contrast/1
pagination · contrast—current · color.interaction.selection.bgspec/components/pagination.md:46 /contrast/0
select · contrast—— · color.interaction.selection.bgspec/components/select.md:65 /contrast/3
sidebar-nav · contrast—selected · color.interaction.selection.bgspec/components/sidebar-nav.md:61 /contrast/0
Shared rule · contrast—— · color.interaction.selection.bgspec/contrast.json:21 /pairs/17
Shared rule · contrast—— · color.interaction.selection.bgspec/contrast.json:43 /pairs/39
card · partselected.bg—spec/components/card.md:40 /tokens/selected.bg
chip · partselected.bg—spec/components/chip.md:41 /tokens/selected.bg
combobox · partoption.bg-selected—spec/components/combobox.md:56 /tokens/option.bg-selected
command-palette · partdependency.role-color-interaction-selection-bg—spec/components/command-palette.md:38 /tokens/dependency.role-color-interaction-selection-bg
data-table · partselected.bg—spec/components/data-table.md:44 /tokens/selected.bg
date-picker · partcalendar.selected-bg—spec/components/date-picker.md:53 /tokens/calendar.selected-bg
diagnostics · partrow.bg-selected—spec/components/diagnostics.md:57 /tokens/row.bg-selected
diff-view · partrow.bg-selected—spec/components/diff-view.md:59 /tokens/row.bg-selected
filterable-table · partrow.selected-bg—spec/components/filterable-table.md:55 /tokens/row.selected-bg
i3-window-frame · partworkspace.selected-bg—spec/components/i3-window-frame.md:38 /tokens/workspace.selected-bg
icon-button · partroot.bg-toggled—spec/components/icon-button.md:30 /tokens/root.bg-toggled
list · partselected.bg—spec/components/list.md:42 /tokens/selected.bg
menu · partactive.bg—spec/components/menu.md:49 /tokens/active.bg
pagination · partcurrent.bg—spec/components/pagination.md:34 /tokens/current.bg
segmented-control · partdependency.role-color-interaction-selection-bg—spec/components/segmented-control.md:41 /tokens/dependency.role-color-interaction-selection-bg
select · partoption.bg-selected—spec/components/select.md:47 /tokens/option.bg-selected
sidebar-nav · partselected.bg—spec/components/sidebar-nav.md:44 /tokens/selected.bg
table · partselected.bg—spec/components/table.md:47 /tokens/selected.bg
tree · partdependency.role-color-interaction-selection-bg—spec/components/tree.md:38 /tokens/dependency.role-color-interaction-selection-bg
card · statebgselected · color.interaction.selection.bgspec/components/card.md:47 /stateTokens/selected/bg
card · statebgselected+focus-visible · color.interaction.selection.bgspec/components/card.md:48 /stateTokens/selected+focus-visible/bg
chip · statebgselected · color.interaction.selection.bgspec/components/chip.md:51 /stateTokens/selected/bg
chip · statebgselected+focus-visible · color.interaction.selection.bgspec/components/chip.md:52 /stateTokens/selected+focus-visible/bg
combobox · statebgselected · color.interaction.selection.bgspec/components/combobox.md:69 /stateTokens/selected/bg
data-table · statebgselected · color.interaction.selection.bgspec/components/data-table.md:59 /stateTokens/selected/bg
data-table · statebgselected+focus-visible · color.interaction.selection.bgspec/components/data-table.md:60 /stateTokens/selected+focus-visible/bg
diagnostics · statebgselected · color.interaction.selection.bgspec/components/diagnostics.md:68 /stateTokens/selected/bg
diagnostics · statebgselected+focus-visible · color.interaction.selection.bgspec/components/diagnostics.md:69 /stateTokens/selected+focus-visible/bg
diff-view · statebgselected · color.interaction.selection.bgspec/components/diff-view.md:65 /stateTokens/selected/bg
filterable-table · statebgselected · color.interaction.selection.bgspec/components/filterable-table.md:77 /stateTokens/selected/bg
i3-window-frame · statebgselected · color.interaction.selection.bgspec/components/i3-window-frame.md:67 /stateTokens/selected/bg
icon-button · statebgtoggled · color.interaction.selection.bgspec/components/icon-button.md:43 /stateTokens/toggled/bg
icon-button · statebgtoggled+focus-visible · color.interaction.selection.bgspec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/bg
list · statebgselected · color.interaction.selection.bgspec/components/list.md:53 /stateTokens/selected/bg
list · statebgselected+focus-visible · color.interaction.selection.bgspec/components/list.md:54 /stateTokens/selected+focus-visible/bg
menu · statebgselected · color.interaction.selection.bgspec/components/menu.md:63 /stateTokens/selected/bg
pagination · statebgcurrent · color.interaction.selection.bgspec/components/pagination.md:44 /stateTokens/current/bg
sidebar-nav · statebgselected · color.interaction.selection.bgspec/components/sidebar-nav.md:56 /stateTokens/selected/bg
table · statebgselected · color.interaction.selection.bgspec/components/table.md:58 /stateTokens/selected/bg
table · statebgselected+focus-visible · color.interaction.selection.bgspec/components/table.md:59 /stateTokens/selected+focus-visible/bg

Relevant contrast declarations

heritage-ansi · heritage

Resolved value
#531310
Status
approved
Consumption
historical-only — Historical fidelity only; preserve all documented limitations and deprecations.
Decisions
None pending.
Source
tokens/semantic.tokens.json:301 /color/interaction/selection/bg
Alias chain
color.primitive.red.100
Used by aliases
No declared aliases depend on this role.

Provenance and restrictions

{
  "status": "approved",
  "approval": {
    "decision": "D-027"
  }
}

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
date-picker · contrast—— · color.interaction.selection.bgspec/components/date-picker.md:111 /contrast/6
diff-view · contrast—focus-visible · color.interaction.selection.bgspec/components/diff-view.md:89 /contrast/19
filterable-table · contrast—selected · color.interaction.selection.bgspec/components/filterable-table.md:87 /contrast/7
i3-window-frame · contrast—— · color.surface.chromespec/components/i3-window-frame.md:80 /contrast/9
icon-button · contrast—toggled · color.surface.defaultspec/components/icon-button.md:47 /contrast/1
pagination · contrast—current · color.interaction.selection.bgspec/components/pagination.md:46 /contrast/0
select · contrast—— · color.interaction.selection.bgspec/components/select.md:65 /contrast/3
sidebar-nav · contrast—selected · color.interaction.selection.bgspec/components/sidebar-nav.md:61 /contrast/0
Shared rule · contrast—— · color.interaction.selection.bgspec/contrast.json:21 /pairs/17
Shared rule · contrast—— · color.interaction.selection.bgspec/contrast.json:43 /pairs/39
card · partselected.bg—spec/components/card.md:40 /tokens/selected.bg
chip · partselected.bg—spec/components/chip.md:41 /tokens/selected.bg
combobox · partoption.bg-selected—spec/components/combobox.md:56 /tokens/option.bg-selected
command-palette · partdependency.role-color-interaction-selection-bg—spec/components/command-palette.md:38 /tokens/dependency.role-color-interaction-selection-bg
data-table · partselected.bg—spec/components/data-table.md:44 /tokens/selected.bg
date-picker · partcalendar.selected-bg—spec/components/date-picker.md:53 /tokens/calendar.selected-bg
diagnostics · partrow.bg-selected—spec/components/diagnostics.md:57 /tokens/row.bg-selected
diff-view · partrow.bg-selected—spec/components/diff-view.md:59 /tokens/row.bg-selected
filterable-table · partrow.selected-bg—spec/components/filterable-table.md:55 /tokens/row.selected-bg
i3-window-frame · partworkspace.selected-bg—spec/components/i3-window-frame.md:38 /tokens/workspace.selected-bg
icon-button · partroot.bg-toggled—spec/components/icon-button.md:30 /tokens/root.bg-toggled
list · partselected.bg—spec/components/list.md:42 /tokens/selected.bg
menu · partactive.bg—spec/components/menu.md:49 /tokens/active.bg
pagination · partcurrent.bg—spec/components/pagination.md:34 /tokens/current.bg
segmented-control · partdependency.role-color-interaction-selection-bg—spec/components/segmented-control.md:41 /tokens/dependency.role-color-interaction-selection-bg
select · partoption.bg-selected—spec/components/select.md:47 /tokens/option.bg-selected
sidebar-nav · partselected.bg—spec/components/sidebar-nav.md:44 /tokens/selected.bg
table · partselected.bg—spec/components/table.md:47 /tokens/selected.bg
tree · partdependency.role-color-interaction-selection-bg—spec/components/tree.md:38 /tokens/dependency.role-color-interaction-selection-bg
card · statebgselected · color.interaction.selection.bgspec/components/card.md:47 /stateTokens/selected/bg
card · statebgselected+focus-visible · color.interaction.selection.bgspec/components/card.md:48 /stateTokens/selected+focus-visible/bg
chip · statebgselected · color.interaction.selection.bgspec/components/chip.md:51 /stateTokens/selected/bg
chip · statebgselected+focus-visible · color.interaction.selection.bgspec/components/chip.md:52 /stateTokens/selected+focus-visible/bg
combobox · statebgselected · color.interaction.selection.bgspec/components/combobox.md:69 /stateTokens/selected/bg
data-table · statebgselected · color.interaction.selection.bgspec/components/data-table.md:59 /stateTokens/selected/bg
data-table · statebgselected+focus-visible · color.interaction.selection.bgspec/components/data-table.md:60 /stateTokens/selected+focus-visible/bg
diagnostics · statebgselected · color.interaction.selection.bgspec/components/diagnostics.md:68 /stateTokens/selected/bg
diagnostics · statebgselected+focus-visible · color.interaction.selection.bgspec/components/diagnostics.md:69 /stateTokens/selected+focus-visible/bg
diff-view · statebgselected · color.interaction.selection.bgspec/components/diff-view.md:65 /stateTokens/selected/bg
filterable-table · statebgselected · color.interaction.selection.bgspec/components/filterable-table.md:77 /stateTokens/selected/bg
i3-window-frame · statebgselected · color.interaction.selection.bgspec/components/i3-window-frame.md:67 /stateTokens/selected/bg
icon-button · statebgtoggled · color.interaction.selection.bgspec/components/icon-button.md:43 /stateTokens/toggled/bg
icon-button · statebgtoggled+focus-visible · color.interaction.selection.bgspec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/bg
list · statebgselected · color.interaction.selection.bgspec/components/list.md:53 /stateTokens/selected/bg
list · statebgselected+focus-visible · color.interaction.selection.bgspec/components/list.md:54 /stateTokens/selected+focus-visible/bg
menu · statebgselected · color.interaction.selection.bgspec/components/menu.md:63 /stateTokens/selected/bg
pagination · statebgcurrent · color.interaction.selection.bgspec/components/pagination.md:44 /stateTokens/current/bg
sidebar-nav · statebgselected · color.interaction.selection.bgspec/components/sidebar-nav.md:56 /stateTokens/selected/bg
table · statebgselected · color.interaction.selection.bgspec/components/table.md:58 /stateTokens/selected/bg
table · statebgselected+focus-visible · color.interaction.selection.bgspec/components/table.md:59 /stateTokens/selected+focus-visible/bg

Relevant contrast declarations

extended · proposed

Resolved value
#531310
Status
approved
Consumption
blocked — Proposed profile: preview only, not downstream delivery.
Decisions
None pending.
Source
tokens/semantic.tokens.json:301 /color/interaction/selection/bg
Alias chain
color.primitive.red.100
Used by aliases
No declared aliases depend on this role.

Provenance and restrictions

{
  "status": "approved",
  "approval": {
    "decision": "D-027"
  }
}

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
date-picker · contrast—— · color.interaction.selection.bgspec/components/date-picker.md:111 /contrast/6
diff-view · contrast—focus-visible · color.interaction.selection.bgspec/components/diff-view.md:89 /contrast/19
filterable-table · contrast—selected · color.interaction.selection.bgspec/components/filterable-table.md:87 /contrast/7
i3-window-frame · contrast—— · color.surface.chromespec/components/i3-window-frame.md:80 /contrast/9
icon-button · contrast—toggled · color.surface.defaultspec/components/icon-button.md:47 /contrast/1
pagination · contrast—current · color.interaction.selection.bgspec/components/pagination.md:46 /contrast/0
select · contrast—— · color.interaction.selection.bgspec/components/select.md:65 /contrast/3
sidebar-nav · contrast—selected · color.interaction.selection.bgspec/components/sidebar-nav.md:61 /contrast/0
Shared rule · contrast—— · color.interaction.selection.bgspec/contrast.json:21 /pairs/17
Shared rule · contrast—— · color.interaction.selection.bgspec/contrast.json:43 /pairs/39
card · partselected.bg—spec/components/card.md:40 /tokens/selected.bg
chip · partselected.bg—spec/components/chip.md:41 /tokens/selected.bg
combobox · partoption.bg-selected—spec/components/combobox.md:56 /tokens/option.bg-selected
command-palette · partdependency.role-color-interaction-selection-bg—spec/components/command-palette.md:38 /tokens/dependency.role-color-interaction-selection-bg
data-table · partselected.bg—spec/components/data-table.md:44 /tokens/selected.bg
date-picker · partcalendar.selected-bg—spec/components/date-picker.md:53 /tokens/calendar.selected-bg
diagnostics · partrow.bg-selected—spec/components/diagnostics.md:57 /tokens/row.bg-selected
diff-view · partrow.bg-selected—spec/components/diff-view.md:59 /tokens/row.bg-selected
filterable-table · partrow.selected-bg—spec/components/filterable-table.md:55 /tokens/row.selected-bg
i3-window-frame · partworkspace.selected-bg—spec/components/i3-window-frame.md:38 /tokens/workspace.selected-bg
icon-button · partroot.bg-toggled—spec/components/icon-button.md:30 /tokens/root.bg-toggled
list · partselected.bg—spec/components/list.md:42 /tokens/selected.bg
menu · partactive.bg—spec/components/menu.md:49 /tokens/active.bg
pagination · partcurrent.bg—spec/components/pagination.md:34 /tokens/current.bg
segmented-control · partdependency.role-color-interaction-selection-bg—spec/components/segmented-control.md:41 /tokens/dependency.role-color-interaction-selection-bg
select · partoption.bg-selected—spec/components/select.md:47 /tokens/option.bg-selected
sidebar-nav · partselected.bg—spec/components/sidebar-nav.md:44 /tokens/selected.bg
table · partselected.bg—spec/components/table.md:47 /tokens/selected.bg
tree · partdependency.role-color-interaction-selection-bg—spec/components/tree.md:38 /tokens/dependency.role-color-interaction-selection-bg
card · statebgselected · color.interaction.selection.bgspec/components/card.md:47 /stateTokens/selected/bg
card · statebgselected+focus-visible · color.interaction.selection.bgspec/components/card.md:48 /stateTokens/selected+focus-visible/bg
chip · statebgselected · color.interaction.selection.bgspec/components/chip.md:51 /stateTokens/selected/bg
chip · statebgselected+focus-visible · color.interaction.selection.bgspec/components/chip.md:52 /stateTokens/selected+focus-visible/bg
combobox · statebgselected · color.interaction.selection.bgspec/components/combobox.md:69 /stateTokens/selected/bg
data-table · statebgselected · color.interaction.selection.bgspec/components/data-table.md:59 /stateTokens/selected/bg
data-table · statebgselected+focus-visible · color.interaction.selection.bgspec/components/data-table.md:60 /stateTokens/selected+focus-visible/bg
diagnostics · statebgselected · color.interaction.selection.bgspec/components/diagnostics.md:68 /stateTokens/selected/bg
diagnostics · statebgselected+focus-visible · color.interaction.selection.bgspec/components/diagnostics.md:69 /stateTokens/selected+focus-visible/bg
diff-view · statebgselected · color.interaction.selection.bgspec/components/diff-view.md:65 /stateTokens/selected/bg
filterable-table · statebgselected · color.interaction.selection.bgspec/components/filterable-table.md:77 /stateTokens/selected/bg
i3-window-frame · statebgselected · color.interaction.selection.bgspec/components/i3-window-frame.md:67 /stateTokens/selected/bg
icon-button · statebgtoggled · color.interaction.selection.bgspec/components/icon-button.md:43 /stateTokens/toggled/bg
icon-button · statebgtoggled+focus-visible · color.interaction.selection.bgspec/components/icon-button.md:44 /stateTokens/toggled+focus-visible/bg
list · statebgselected · color.interaction.selection.bgspec/components/list.md:53 /stateTokens/selected/bg
list · statebgselected+focus-visible · color.interaction.selection.bgspec/components/list.md:54 /stateTokens/selected+focus-visible/bg
menu · statebgselected · color.interaction.selection.bgspec/components/menu.md:63 /stateTokens/selected/bg
pagination · statebgcurrent · color.interaction.selection.bgspec/components/pagination.md:44 /stateTokens/current/bg
sidebar-nav · statebgselected · color.interaction.selection.bgspec/components/sidebar-nav.md:56 /stateTokens/selected/bg
table · statebgselected · color.interaction.selection.bgspec/components/table.md:58 /stateTokens/selected/bg
table · statebgselected+focus-visible · color.interaction.selection.bgspec/components/table.md:59 /stateTokens/selected+focus-visible/bg

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