J3W1 / DESIGN SYSTEM
color.action.primary.hover-bg
Primary button hover (7.92:1 with prose).
Source revision 1faefcf014c8bf01a6b27308ea796da968773a81
Find related usage · Specification anchor · Measured contrast report (default profile)
Report an issue with this token
color.action.primary.hover-bg--color-action-primary-hover-bgdefault · approved
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| checkbox · contrast | — | hover · color.action.primary.hover-bg | spec/components/checkbox.md:63 /contrast/3 |
| radio-group · contrast | — | hover · color.action.primary.hover-bg | spec/components/radio-group.md:60 /contrast/3 |
| switch · contrast | — | hover · color.action.primary.hover-bg | spec/components/switch.md:56 /contrast/2 |
| Shared rule · contrast | — | — · color.action.primary.hover-bg | spec/contrast.json:24 /pairs/20 |
| button · part | root.bg-hover | — | spec/components/button.md:33 /tokens/root.bg-hover |
| checkbox · part | box.bg-checked-hover | — | spec/components/checkbox.md:38 /tokens/box.bg-checked-hover |
| dialog · part | primary.bg-hover | — | spec/components/dialog.md:46 /tokens/primary.bg-hover |
| multiselect · part | dependency.role-color-action-primary-hover-bg | — | spec/components/multiselect.md:36 /tokens/dependency.role-color-action-primary-hover-bg |
| radio-group · part | box.bg-checked-hover | — | spec/components/radio-group.md:36 /tokens/box.bg-checked-hover |
| segmented-control · part | dependency.role-color-action-primary-hover-bg | — | spec/components/segmented-control.md:35 /tokens/dependency.role-color-action-primary-hover-bg |
| switch · part | track.bg-checked-hover | — | spec/components/switch.md:37 /tokens/track.bg-checked-hover |
| wizard · part | next.bg-hover | — | spec/components/wizard.md:46 /tokens/next.bg-hover |
| button · state | bg | hover · color.action.primary.hover-bg | spec/components/button.md:62 /stateTokens/hover/bg |
Relevant contrast declarations
- button hover fg: color.action.primary.text on color.action.primary.hover-bg · spec/components/button.md:62
/stateTokens/hover - glyph on the hovered checked fill: color.action.primary.text on color.action.primary.hover-bg · spec/components/checkbox.md:63
/contrast/3 - inner square on the hovered checked fill: color.action.primary.text on color.action.primary.hover-bg · spec/components/radio-group.md:60
/contrast/3 - primary action text on hover fill: color.action.primary.text on color.action.primary.hover-bg · spec/contrast.json:24
/pairs/20 - thumb on the hovered on track: color.action.primary.text on color.action.primary.hover-bg · spec/components/switch.md:56
/contrast/2
heritage-ansi · heritage
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| checkbox · contrast | — | hover · color.action.primary.hover-bg | spec/components/checkbox.md:63 /contrast/3 |
| radio-group · contrast | — | hover · color.action.primary.hover-bg | spec/components/radio-group.md:60 /contrast/3 |
| switch · contrast | — | hover · color.action.primary.hover-bg | spec/components/switch.md:56 /contrast/2 |
| Shared rule · contrast | — | — · color.action.primary.hover-bg | spec/contrast.json:24 /pairs/20 |
| button · part | root.bg-hover | — | spec/components/button.md:33 /tokens/root.bg-hover |
| checkbox · part | box.bg-checked-hover | — | spec/components/checkbox.md:38 /tokens/box.bg-checked-hover |
| dialog · part | primary.bg-hover | — | spec/components/dialog.md:46 /tokens/primary.bg-hover |
| multiselect · part | dependency.role-color-action-primary-hover-bg | — | spec/components/multiselect.md:36 /tokens/dependency.role-color-action-primary-hover-bg |
| radio-group · part | box.bg-checked-hover | — | spec/components/radio-group.md:36 /tokens/box.bg-checked-hover |
| segmented-control · part | dependency.role-color-action-primary-hover-bg | — | spec/components/segmented-control.md:35 /tokens/dependency.role-color-action-primary-hover-bg |
| switch · part | track.bg-checked-hover | — | spec/components/switch.md:37 /tokens/track.bg-checked-hover |
| wizard · part | next.bg-hover | — | spec/components/wizard.md:46 /tokens/next.bg-hover |
| button · state | bg | hover · color.action.primary.hover-bg | spec/components/button.md:62 /stateTokens/hover/bg |
Relevant contrast declarations
- button hover fg: color.action.primary.text on color.action.primary.hover-bg · spec/components/button.md:62
/stateTokens/hover - glyph on the hovered checked fill: color.action.primary.text on color.action.primary.hover-bg · spec/components/checkbox.md:63
/contrast/3 - inner square on the hovered checked fill: color.action.primary.text on color.action.primary.hover-bg · spec/components/radio-group.md:60
/contrast/3 - primary action text on hover fill: color.action.primary.text on color.action.primary.hover-bg · spec/contrast.json:24
/pairs/20 - thumb on the hovered on track: color.action.primary.text on color.action.primary.hover-bg · spec/components/switch.md:56
/contrast/2
extended · proposed
Provenance and restrictions
nullDeclared component and port usage
| Consumer / kind | Part / variant | State / surface | Source declaration |
|---|---|---|---|
| checkbox · contrast | — | hover · color.action.primary.hover-bg | spec/components/checkbox.md:63 /contrast/3 |
| radio-group · contrast | — | hover · color.action.primary.hover-bg | spec/components/radio-group.md:60 /contrast/3 |
| switch · contrast | — | hover · color.action.primary.hover-bg | spec/components/switch.md:56 /contrast/2 |
| Shared rule · contrast | — | — · color.action.primary.hover-bg | spec/contrast.json:24 /pairs/20 |
| button · part | root.bg-hover | — | spec/components/button.md:33 /tokens/root.bg-hover |
| checkbox · part | box.bg-checked-hover | — | spec/components/checkbox.md:38 /tokens/box.bg-checked-hover |
| dialog · part | primary.bg-hover | — | spec/components/dialog.md:46 /tokens/primary.bg-hover |
| multiselect · part | dependency.role-color-action-primary-hover-bg | — | spec/components/multiselect.md:36 /tokens/dependency.role-color-action-primary-hover-bg |
| radio-group · part | box.bg-checked-hover | — | spec/components/radio-group.md:36 /tokens/box.bg-checked-hover |
| segmented-control · part | dependency.role-color-action-primary-hover-bg | — | spec/components/segmented-control.md:35 /tokens/dependency.role-color-action-primary-hover-bg |
| switch · part | track.bg-checked-hover | — | spec/components/switch.md:37 /tokens/track.bg-checked-hover |
| wizard · part | next.bg-hover | — | spec/components/wizard.md:46 /tokens/next.bg-hover |
| button · state | bg | hover · color.action.primary.hover-bg | spec/components/button.md:62 /stateTokens/hover/bg |
Relevant contrast declarations
- button hover fg: color.action.primary.text on color.action.primary.hover-bg · spec/components/button.md:62
/stateTokens/hover - glyph on the hovered checked fill: color.action.primary.text on color.action.primary.hover-bg · spec/components/checkbox.md:63
/contrast/3 - inner square on the hovered checked fill: color.action.primary.text on color.action.primary.hover-bg · spec/components/radio-group.md:60
/contrast/3 - primary action text on hover fill: color.action.primary.text on color.action.primary.hover-bg · spec/contrast.json:24
/pairs/20 - thumb on the hovered on track: color.action.primary.text on color.action.primary.hover-bg · spec/components/switch.md:56
/contrast/2