J3W1 / DESIGN SYSTEM
color.border.active
Active or focused control border.
Source revision 1faefcf014c8bf01a6b27308ea796da968773a81
Find related usage · Specification anchor · Measured contrast report (default profile)
Report an issue with this token
color.border.active--color-border-activedefault · approved
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| button · contrast | — | active · color.interaction.pressed.bg | spec/components/button.md:77 /contrast/10 |
| i3-window-frame · contrast | — | — · color.surface.desktop | spec/components/i3-window-frame.md:74 /contrast/3 |
| Shared rule · contrast | — | — · color.surface.input | spec/contrast.json:46 /pairs/42 |
| button · part | secondary.border-active · secondary | — | spec/components/button.md:53 /tokens/secondary.border-active |
| button · part | tertiary.border-active · tertiary | — | spec/components/button.md:54 /tokens/tertiary.border-active |
| combobox · part | root.border-focus | — | spec/components/combobox.md:38 /tokens/root.border-focus |
| data-table · part | resize.handle-hover | — | spec/components/data-table.md:52 /tokens/resize.handle-hover |
| date-picker · part | root.border-focus | — | spec/components/date-picker.md:34 /tokens/root.border-focus |
| disclosure · part | dependency.role-color-border-active | — | spec/components/disclosure.md:34 /tokens/dependency.role-color-border-active |
| i3-window-frame · part | window.border-focused | — | spec/components/i3-window-frame.md:51 /tokens/window.border-focused |
| icon-button · part | root.border-active | — | spec/components/icon-button.md:28 /tokens/root.border-active |
| menu · part | button.border-open | — | spec/components/menu.md:41 /tokens/button.border-open |
| multiselect · part | dependency.role-color-border-active | — | spec/components/multiselect.md:38 /tokens/dependency.role-color-border-active |
| number-field · part | root.border-focus | — | spec/components/number-field.md:33 /tokens/root.border-focus |
| search-field · part | root.border-focus | — | spec/components/search-field.md:34 /tokens/root.border-focus |
| select · part | root.border-focus | — | spec/components/select.md:36 /tokens/root.border-focus |
| text-field · part | root.border-focus | — | spec/components/text-field.md:45 /tokens/root.border-focus |
| textarea · part | root.border-focus | — | spec/components/textarea.md:36 /tokens/root.border-focus |
| time-picker · part | root.border-focus | — | spec/components/time-picker.md:30 /tokens/root.border-focus |
| timeline · part | dependency.role-color-border-active | — | spec/components/timeline.md:32 /tokens/dependency.role-color-border-active |
| toolbar · part | toggled.border | — | spec/components/toolbar.md:37 /tokens/toggled.border |
| combobox · state | border | focus-visible · color.surface.input | spec/components/combobox.md:67 /stateTokens/focus-visible/border |
| date-picker · state | border | focus-visible · color.surface.input | spec/components/date-picker.md:67 /stateTokens/focus-visible/border |
| icon-button · state | border | active · color.interaction.pressed.bg | spec/components/icon-button.md:42 /stateTokens/active/border |
| menu · state | border | open · color.interaction.pressed.bg | spec/components/menu.md:60 /stateTokens/open/border |
| number-field · state | border | focus-visible · color.surface.input | spec/components/number-field.md:55 /stateTokens/focus-visible/border |
| search-field · state | border | focus-visible · color.surface.input | spec/components/search-field.md:54 /stateTokens/focus-visible/border |
| select · state | border | focus-visible · color.surface.input | spec/components/select.md:57 /stateTokens/focus-visible/border |
| text-field · state | border | focus-visible · color.surface.input | spec/components/text-field.md:70 /stateTokens/focus-visible/border |
| textarea · state | border | focus-visible · color.surface.input | spec/components/textarea.md:59 /stateTokens/focus-visible/border |
| time-picker · state | border | focus-visible · color.surface.input | spec/components/time-picker.md:53 /stateTokens/focus-visible/border |
| toolbar · state | border | toggled · color.interaction.pressed.bg | spec/components/toolbar.md:45 /stateTokens/toggled/border |
Relevant contrast declarations
- active border on the pressed fill: color.border.active on color.interaction.pressed.bg · spec/components/button.md:77
/contrast/10 - icon-button active border: color.border.active on color.interaction.pressed.bg · spec/components/icon-button.md:42
/stateTokens/active - menu open border: color.border.active on color.interaction.pressed.bg · spec/components/menu.md:60
/stateTokens/open - toolbar toggled border: color.border.active on color.interaction.pressed.bg · spec/components/toolbar.md:45
/stateTokens/toggled - focused window frame on the desktop: color.border.active on color.surface.desktop · spec/components/i3-window-frame.md:74
/contrast/3 - active border on input: color.border.active on color.surface.input · spec/contrast.json:46
/pairs/42 - combobox focus-visible border: color.border.active on color.surface.input · spec/components/combobox.md:67
/stateTokens/focus-visible - date-picker focus-visible border: color.border.active on color.surface.input · spec/components/date-picker.md:65
/stateTokens/focus-visible - number-field focus-visible border: color.border.active on color.surface.input · spec/components/number-field.md:55
/stateTokens/focus-visible - search-field focus-visible border: color.border.active on color.surface.input · spec/components/search-field.md:54
/stateTokens/focus-visible - select focus-visible border: color.border.active on color.surface.input · spec/components/select.md:57
/stateTokens/focus-visible - text-field focus-visible border: color.border.active on color.surface.input · spec/components/text-field.md:70
/stateTokens/focus-visible - textarea focus-visible border: color.border.active on color.surface.input · spec/components/textarea.md:59
/stateTokens/focus-visible - time-picker focus-visible border: color.border.active on color.surface.input · spec/components/time-picker.md:51
/stateTokens/focus-visible
heritage-ansi · heritage
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| button · contrast | — | active · color.interaction.pressed.bg | spec/components/button.md:77 /contrast/10 |
| i3-window-frame · contrast | — | — · color.surface.desktop | spec/components/i3-window-frame.md:74 /contrast/3 |
| Shared rule · contrast | — | — · color.surface.input | spec/contrast.json:46 /pairs/42 |
| button · part | secondary.border-active · secondary | — | spec/components/button.md:53 /tokens/secondary.border-active |
| button · part | tertiary.border-active · tertiary | — | spec/components/button.md:54 /tokens/tertiary.border-active |
| combobox · part | root.border-focus | — | spec/components/combobox.md:38 /tokens/root.border-focus |
| data-table · part | resize.handle-hover | — | spec/components/data-table.md:52 /tokens/resize.handle-hover |
| date-picker · part | root.border-focus | — | spec/components/date-picker.md:34 /tokens/root.border-focus |
| disclosure · part | dependency.role-color-border-active | — | spec/components/disclosure.md:34 /tokens/dependency.role-color-border-active |
| i3-window-frame · part | window.border-focused | — | spec/components/i3-window-frame.md:51 /tokens/window.border-focused |
| icon-button · part | root.border-active | — | spec/components/icon-button.md:28 /tokens/root.border-active |
| menu · part | button.border-open | — | spec/components/menu.md:41 /tokens/button.border-open |
| multiselect · part | dependency.role-color-border-active | — | spec/components/multiselect.md:38 /tokens/dependency.role-color-border-active |
| number-field · part | root.border-focus | — | spec/components/number-field.md:33 /tokens/root.border-focus |
| search-field · part | root.border-focus | — | spec/components/search-field.md:34 /tokens/root.border-focus |
| select · part | root.border-focus | — | spec/components/select.md:36 /tokens/root.border-focus |
| text-field · part | root.border-focus | — | spec/components/text-field.md:45 /tokens/root.border-focus |
| textarea · part | root.border-focus | — | spec/components/textarea.md:36 /tokens/root.border-focus |
| time-picker · part | root.border-focus | — | spec/components/time-picker.md:30 /tokens/root.border-focus |
| timeline · part | dependency.role-color-border-active | — | spec/components/timeline.md:32 /tokens/dependency.role-color-border-active |
| toolbar · part | toggled.border | — | spec/components/toolbar.md:37 /tokens/toggled.border |
| combobox · state | border | focus-visible · color.surface.input | spec/components/combobox.md:67 /stateTokens/focus-visible/border |
| date-picker · state | border | focus-visible · color.surface.input | spec/components/date-picker.md:67 /stateTokens/focus-visible/border |
| icon-button · state | border | active · color.interaction.pressed.bg | spec/components/icon-button.md:42 /stateTokens/active/border |
| menu · state | border | open · color.interaction.pressed.bg | spec/components/menu.md:60 /stateTokens/open/border |
| number-field · state | border | focus-visible · color.surface.input | spec/components/number-field.md:55 /stateTokens/focus-visible/border |
| search-field · state | border | focus-visible · color.surface.input | spec/components/search-field.md:54 /stateTokens/focus-visible/border |
| select · state | border | focus-visible · color.surface.input | spec/components/select.md:57 /stateTokens/focus-visible/border |
| text-field · state | border | focus-visible · color.surface.input | spec/components/text-field.md:70 /stateTokens/focus-visible/border |
| textarea · state | border | focus-visible · color.surface.input | spec/components/textarea.md:59 /stateTokens/focus-visible/border |
| time-picker · state | border | focus-visible · color.surface.input | spec/components/time-picker.md:53 /stateTokens/focus-visible/border |
| toolbar · state | border | toggled · color.interaction.pressed.bg | spec/components/toolbar.md:45 /stateTokens/toggled/border |
Relevant contrast declarations
- active border on the pressed fill: color.border.active on color.interaction.pressed.bg · spec/components/button.md:77
/contrast/10 - icon-button active border: color.border.active on color.interaction.pressed.bg · spec/components/icon-button.md:42
/stateTokens/active - menu open border: color.border.active on color.interaction.pressed.bg · spec/components/menu.md:60
/stateTokens/open - toolbar toggled border: color.border.active on color.interaction.pressed.bg · spec/components/toolbar.md:45
/stateTokens/toggled - focused window frame on the desktop: color.border.active on color.surface.desktop · spec/components/i3-window-frame.md:74
/contrast/3 - active border on input: color.border.active on color.surface.input · spec/contrast.json:46
/pairs/42 - combobox focus-visible border: color.border.active on color.surface.input · spec/components/combobox.md:67
/stateTokens/focus-visible - date-picker focus-visible border: color.border.active on color.surface.input · spec/components/date-picker.md:65
/stateTokens/focus-visible - number-field focus-visible border: color.border.active on color.surface.input · spec/components/number-field.md:55
/stateTokens/focus-visible - search-field focus-visible border: color.border.active on color.surface.input · spec/components/search-field.md:54
/stateTokens/focus-visible - select focus-visible border: color.border.active on color.surface.input · spec/components/select.md:57
/stateTokens/focus-visible - text-field focus-visible border: color.border.active on color.surface.input · spec/components/text-field.md:70
/stateTokens/focus-visible - textarea focus-visible border: color.border.active on color.surface.input · spec/components/textarea.md:59
/stateTokens/focus-visible - time-picker focus-visible border: color.border.active on color.surface.input · spec/components/time-picker.md:51
/stateTokens/focus-visible
extended · proposed
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| button · contrast | — | active · color.interaction.pressed.bg | spec/components/button.md:77 /contrast/10 |
| i3-window-frame · contrast | — | — · color.surface.desktop | spec/components/i3-window-frame.md:74 /contrast/3 |
| Shared rule · contrast | — | — · color.surface.input | spec/contrast.json:46 /pairs/42 |
| button · part | secondary.border-active · secondary | — | spec/components/button.md:53 /tokens/secondary.border-active |
| button · part | tertiary.border-active · tertiary | — | spec/components/button.md:54 /tokens/tertiary.border-active |
| combobox · part | root.border-focus | — | spec/components/combobox.md:38 /tokens/root.border-focus |
| data-table · part | resize.handle-hover | — | spec/components/data-table.md:52 /tokens/resize.handle-hover |
| date-picker · part | root.border-focus | — | spec/components/date-picker.md:34 /tokens/root.border-focus |
| disclosure · part | dependency.role-color-border-active | — | spec/components/disclosure.md:34 /tokens/dependency.role-color-border-active |
| i3-window-frame · part | window.border-focused | — | spec/components/i3-window-frame.md:51 /tokens/window.border-focused |
| icon-button · part | root.border-active | — | spec/components/icon-button.md:28 /tokens/root.border-active |
| menu · part | button.border-open | — | spec/components/menu.md:41 /tokens/button.border-open |
| multiselect · part | dependency.role-color-border-active | — | spec/components/multiselect.md:38 /tokens/dependency.role-color-border-active |
| number-field · part | root.border-focus | — | spec/components/number-field.md:33 /tokens/root.border-focus |
| search-field · part | root.border-focus | — | spec/components/search-field.md:34 /tokens/root.border-focus |
| select · part | root.border-focus | — | spec/components/select.md:36 /tokens/root.border-focus |
| text-field · part | root.border-focus | — | spec/components/text-field.md:45 /tokens/root.border-focus |
| textarea · part | root.border-focus | — | spec/components/textarea.md:36 /tokens/root.border-focus |
| time-picker · part | root.border-focus | — | spec/components/time-picker.md:30 /tokens/root.border-focus |
| timeline · part | dependency.role-color-border-active | — | spec/components/timeline.md:32 /tokens/dependency.role-color-border-active |
| toolbar · part | toggled.border | — | spec/components/toolbar.md:37 /tokens/toggled.border |
| combobox · state | border | focus-visible · color.surface.input | spec/components/combobox.md:67 /stateTokens/focus-visible/border |
| date-picker · state | border | focus-visible · color.surface.input | spec/components/date-picker.md:67 /stateTokens/focus-visible/border |
| icon-button · state | border | active · color.interaction.pressed.bg | spec/components/icon-button.md:42 /stateTokens/active/border |
| menu · state | border | open · color.interaction.pressed.bg | spec/components/menu.md:60 /stateTokens/open/border |
| number-field · state | border | focus-visible · color.surface.input | spec/components/number-field.md:55 /stateTokens/focus-visible/border |
| search-field · state | border | focus-visible · color.surface.input | spec/components/search-field.md:54 /stateTokens/focus-visible/border |
| select · state | border | focus-visible · color.surface.input | spec/components/select.md:57 /stateTokens/focus-visible/border |
| text-field · state | border | focus-visible · color.surface.input | spec/components/text-field.md:70 /stateTokens/focus-visible/border |
| textarea · state | border | focus-visible · color.surface.input | spec/components/textarea.md:59 /stateTokens/focus-visible/border |
| time-picker · state | border | focus-visible · color.surface.input | spec/components/time-picker.md:53 /stateTokens/focus-visible/border |
| toolbar · state | border | toggled · color.interaction.pressed.bg | spec/components/toolbar.md:45 /stateTokens/toggled/border |
Relevant contrast declarations
- active border on the pressed fill: color.border.active on color.interaction.pressed.bg · spec/components/button.md:77
/contrast/10 - icon-button active border: color.border.active on color.interaction.pressed.bg · spec/components/icon-button.md:42
/stateTokens/active - menu open border: color.border.active on color.interaction.pressed.bg · spec/components/menu.md:60
/stateTokens/open - toolbar toggled border: color.border.active on color.interaction.pressed.bg · spec/components/toolbar.md:45
/stateTokens/toggled - focused window frame on the desktop: color.border.active on color.surface.desktop · spec/components/i3-window-frame.md:74
/contrast/3 - active border on input: color.border.active on color.surface.input · spec/contrast.json:46
/pairs/42 - combobox focus-visible border: color.border.active on color.surface.input · spec/components/combobox.md:67
/stateTokens/focus-visible - date-picker focus-visible border: color.border.active on color.surface.input · spec/components/date-picker.md:65
/stateTokens/focus-visible - number-field focus-visible border: color.border.active on color.surface.input · spec/components/number-field.md:55
/stateTokens/focus-visible - search-field focus-visible border: color.border.active on color.surface.input · spec/components/search-field.md:54
/stateTokens/focus-visible - select focus-visible border: color.border.active on color.surface.input · spec/components/select.md:57
/stateTokens/focus-visible - text-field focus-visible border: color.border.active on color.surface.input · spec/components/text-field.md:70
/stateTokens/focus-visible - textarea focus-visible border: color.border.active on color.surface.input · spec/components/textarea.md:59
/stateTokens/focus-visible - time-picker focus-visible border: color.border.active on color.surface.input · spec/components/time-picker.md:51
/stateTokens/focus-visible