J3W1 / DESIGN SYSTEM
color.border.selected-indicator
2px indicator bar on the selected tab or nav item.
Source revision 1faefcf014c8bf01a6b27308ea796da968773a81
Find related usage · Specification anchor · Measured contrast report (default profile)
Report an issue with this token
color.border.selected-indicator--color-border-selected-indicatordefault · approved
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| admin-form · contrast | — | — · color.surface.default | spec/components/admin-form.md:79 /contrast/9 |
| i3-window-frame · contrast | — | — · color.surface.chrome | spec/components/i3-window-frame.md:78 /contrast/7 |
| icon-button · contrast | — | toggled · color.surface.default | spec/components/icon-button.md:46 /contrast/0 |
| settings-panel · contrast | — | — · color.surface.default | spec/components/settings-panel.md:62 /contrast/3 |
| admin-form · part | step.current-indicator | — | spec/components/admin-form.md:34 /tokens/step.current-indicator |
| command-palette · part | dependency.role-color-border-selected-indicator | — | spec/components/command-palette.md:37 /tokens/dependency.role-color-border-selected-indicator |
| file-browser · part | dependency.role-color-border-selected-indicator | — | spec/components/file-browser.md:37 /tokens/dependency.role-color-border-selected-indicator |
| i3-window-frame · part | tab.indicator | — | spec/components/i3-window-frame.md:57 /tokens/tab.indicator |
| icon-button · part | root.border-toggled | — | spec/components/icon-button.md:32 /tokens/root.border-toggled |
| link · part | root.indicator | — | spec/components/link.md:33 /tokens/root.indicator |
| settings-panel · part | nav.current-indicator | — | spec/components/settings-panel.md:33 /tokens/nav.current-indicator |
| sidebar-nav · part | link.indicator | — | spec/components/sidebar-nav.md:41 /tokens/link.indicator |
| tabs · part | tab.indicator | — | spec/components/tabs.md:38 /tokens/tab.indicator |
| tree · part | dependency.role-color-border-selected-indicator | — | spec/components/tree.md:37 /tokens/dependency.role-color-border-selected-indicator |
| wizard · part | step.indicator-current | — | spec/components/wizard.md:34 /tokens/step.indicator-current |
| link · state | border | current · color.surface.canvas | spec/components/link.md:40 /stateTokens/current/border |
| sidebar-nav · state | border | current · color.surface.default | spec/components/sidebar-nav.md:55 /stateTokens/current/border |
| tabs · state | border | selected · color.surface.default | spec/components/tabs.md:47 /stateTokens/selected/border |
| tabs · state | border | selected+focus-visible · color.surface.default | spec/components/tabs.md:48 /stateTokens/selected+focus-visible/border |
| wizard · state | border | current · color.surface.canvas | spec/components/wizard.md:58 /stateTokens/current/border |
Relevant contrast declarations
- link current border: color.border.selected-indicator on color.surface.canvas · spec/components/link.md:40
/stateTokens/current - wizard current border: color.border.selected-indicator on color.surface.canvas · spec/components/wizard.md:58
/stateTokens/current - visible-tab indicator on the title row: color.border.selected-indicator on color.surface.chrome · spec/components/i3-window-frame.md:78
/contrast/7 - current-section indicator bar: color.border.selected-indicator on color.surface.default · spec/components/settings-panel.md:62
/contrast/3 - current-step indicator bar: color.border.selected-indicator on color.surface.default · spec/components/admin-form.md:79
/contrast/9 - sidebar-nav current border: color.border.selected-indicator on color.surface.default · spec/components/sidebar-nav.md:55
/stateTokens/current - tabs selected border: color.border.selected-indicator on color.surface.default · spec/components/tabs.md:47
/stateTokens/selected - tabs selected+focus-visible border: color.border.selected-indicator on color.surface.default · spec/components/tabs.md:48
/stateTokens/selected+focus-visible - toggled border against the panel: color.border.selected-indicator on color.surface.default · spec/components/icon-button.md:46
/contrast/0
heritage-ansi · heritage
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| admin-form · contrast | — | — · color.surface.default | spec/components/admin-form.md:79 /contrast/9 |
| i3-window-frame · contrast | — | — · color.surface.chrome | spec/components/i3-window-frame.md:78 /contrast/7 |
| icon-button · contrast | — | toggled · color.surface.default | spec/components/icon-button.md:46 /contrast/0 |
| settings-panel · contrast | — | — · color.surface.default | spec/components/settings-panel.md:62 /contrast/3 |
| admin-form · part | step.current-indicator | — | spec/components/admin-form.md:34 /tokens/step.current-indicator |
| command-palette · part | dependency.role-color-border-selected-indicator | — | spec/components/command-palette.md:37 /tokens/dependency.role-color-border-selected-indicator |
| file-browser · part | dependency.role-color-border-selected-indicator | — | spec/components/file-browser.md:37 /tokens/dependency.role-color-border-selected-indicator |
| i3-window-frame · part | tab.indicator | — | spec/components/i3-window-frame.md:57 /tokens/tab.indicator |
| icon-button · part | root.border-toggled | — | spec/components/icon-button.md:32 /tokens/root.border-toggled |
| link · part | root.indicator | — | spec/components/link.md:33 /tokens/root.indicator |
| settings-panel · part | nav.current-indicator | — | spec/components/settings-panel.md:33 /tokens/nav.current-indicator |
| sidebar-nav · part | link.indicator | — | spec/components/sidebar-nav.md:41 /tokens/link.indicator |
| tabs · part | tab.indicator | — | spec/components/tabs.md:38 /tokens/tab.indicator |
| tree · part | dependency.role-color-border-selected-indicator | — | spec/components/tree.md:37 /tokens/dependency.role-color-border-selected-indicator |
| wizard · part | step.indicator-current | — | spec/components/wizard.md:34 /tokens/step.indicator-current |
| link · state | border | current · color.surface.canvas | spec/components/link.md:40 /stateTokens/current/border |
| sidebar-nav · state | border | current · color.surface.default | spec/components/sidebar-nav.md:55 /stateTokens/current/border |
| tabs · state | border | selected · color.surface.default | spec/components/tabs.md:47 /stateTokens/selected/border |
| tabs · state | border | selected+focus-visible · color.surface.default | spec/components/tabs.md:48 /stateTokens/selected+focus-visible/border |
| wizard · state | border | current · color.surface.canvas | spec/components/wizard.md:58 /stateTokens/current/border |
Relevant contrast declarations
- link current border: color.border.selected-indicator on color.surface.canvas · spec/components/link.md:40
/stateTokens/current - wizard current border: color.border.selected-indicator on color.surface.canvas · spec/components/wizard.md:58
/stateTokens/current - visible-tab indicator on the title row: color.border.selected-indicator on color.surface.chrome · spec/components/i3-window-frame.md:78
/contrast/7 - current-section indicator bar: color.border.selected-indicator on color.surface.default · spec/components/settings-panel.md:62
/contrast/3 - current-step indicator bar: color.border.selected-indicator on color.surface.default · spec/components/admin-form.md:79
/contrast/9 - sidebar-nav current border: color.border.selected-indicator on color.surface.default · spec/components/sidebar-nav.md:55
/stateTokens/current - tabs selected border: color.border.selected-indicator on color.surface.default · spec/components/tabs.md:47
/stateTokens/selected - tabs selected+focus-visible border: color.border.selected-indicator on color.surface.default · spec/components/tabs.md:48
/stateTokens/selected+focus-visible - toggled border against the panel: color.border.selected-indicator on color.surface.default · spec/components/icon-button.md:46
/contrast/0
extended · proposed
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| admin-form · contrast | — | — · color.surface.default | spec/components/admin-form.md:79 /contrast/9 |
| i3-window-frame · contrast | — | — · color.surface.chrome | spec/components/i3-window-frame.md:78 /contrast/7 |
| icon-button · contrast | — | toggled · color.surface.default | spec/components/icon-button.md:46 /contrast/0 |
| settings-panel · contrast | — | — · color.surface.default | spec/components/settings-panel.md:62 /contrast/3 |
| admin-form · part | step.current-indicator | — | spec/components/admin-form.md:34 /tokens/step.current-indicator |
| command-palette · part | dependency.role-color-border-selected-indicator | — | spec/components/command-palette.md:37 /tokens/dependency.role-color-border-selected-indicator |
| file-browser · part | dependency.role-color-border-selected-indicator | — | spec/components/file-browser.md:37 /tokens/dependency.role-color-border-selected-indicator |
| i3-window-frame · part | tab.indicator | — | spec/components/i3-window-frame.md:57 /tokens/tab.indicator |
| icon-button · part | root.border-toggled | — | spec/components/icon-button.md:32 /tokens/root.border-toggled |
| link · part | root.indicator | — | spec/components/link.md:33 /tokens/root.indicator |
| settings-panel · part | nav.current-indicator | — | spec/components/settings-panel.md:33 /tokens/nav.current-indicator |
| sidebar-nav · part | link.indicator | — | spec/components/sidebar-nav.md:41 /tokens/link.indicator |
| tabs · part | tab.indicator | — | spec/components/tabs.md:38 /tokens/tab.indicator |
| tree · part | dependency.role-color-border-selected-indicator | — | spec/components/tree.md:37 /tokens/dependency.role-color-border-selected-indicator |
| wizard · part | step.indicator-current | — | spec/components/wizard.md:34 /tokens/step.indicator-current |
| link · state | border | current · color.surface.canvas | spec/components/link.md:40 /stateTokens/current/border |
| sidebar-nav · state | border | current · color.surface.default | spec/components/sidebar-nav.md:55 /stateTokens/current/border |
| tabs · state | border | selected · color.surface.default | spec/components/tabs.md:47 /stateTokens/selected/border |
| tabs · state | border | selected+focus-visible · color.surface.default | spec/components/tabs.md:48 /stateTokens/selected+focus-visible/border |
| wizard · state | border | current · color.surface.canvas | spec/components/wizard.md:58 /stateTokens/current/border |
Relevant contrast declarations
- link current border: color.border.selected-indicator on color.surface.canvas · spec/components/link.md:40
/stateTokens/current - wizard current border: color.border.selected-indicator on color.surface.canvas · spec/components/wizard.md:58
/stateTokens/current - visible-tab indicator on the title row: color.border.selected-indicator on color.surface.chrome · spec/components/i3-window-frame.md:78
/contrast/7 - current-section indicator bar: color.border.selected-indicator on color.surface.default · spec/components/settings-panel.md:62
/contrast/3 - current-step indicator bar: color.border.selected-indicator on color.surface.default · spec/components/admin-form.md:79
/contrast/9 - sidebar-nav current border: color.border.selected-indicator on color.surface.default · spec/components/sidebar-nav.md:55
/stateTokens/current - tabs selected border: color.border.selected-indicator on color.surface.default · spec/components/tabs.md:47
/stateTokens/selected - tabs selected+focus-visible border: color.border.selected-indicator on color.surface.default · spec/components/tabs.md:48
/stateTokens/selected+focus-visible - toggled border against the panel: color.border.selected-indicator on color.surface.default · spec/components/icon-button.md:46
/contrast/0