j3w1 / color.action.primary.textVue · HTML · React · Astro

J3W1 / DESIGN SYSTEM

color.action.primary.text

Primary button text (9.28:1).

Source revision 1faefcf014c8bf01a6b27308ea796da968773a81

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

Report an issue with this token

color.action.primary.text
--color-action-primary-text

default · approved

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
badge · contrast— · color.action.primary.bgspec/components/badge.md:58 /contrast/4
checkbox · contrasthover · color.action.primary.hover-bgspec/components/checkbox.md:63 /contrast/3
dialog · contrast— · color.action.primary.bgspec/components/dialog.md:66 /contrast/4
filterable-table · contrast— · color.action.primary.bgspec/components/filterable-table.md:86 /contrast/6
radio-group · contrasthover · color.action.primary.hover-bgspec/components/radio-group.md:60 /contrast/3
switch · contrasthover · color.action.primary.hover-bgspec/components/switch.md:56 /contrast/2
Shared rule · contrast— · color.action.primary.bgspec/contrast.json:23 /pairs/19
Shared rule · contrast— · color.action.primary.hover-bgspec/contrast.json:24 /pairs/20
admin-form · partcontinue.busy-glyphspec/components/admin-form.md:60 /tokens/continue.busy-glyph
admin-form · partcontinue.textspec/components/admin-form.md:59 /tokens/continue.text
badge · partcount.text · countspec/components/badge.md:49 /tokens/count.text
button · partloading.glyphspec/components/button.md:59 /tokens/loading.glyph
button · partroot.textspec/components/button.md:31 /tokens/root.text
checkbox · partbox.glyphspec/components/checkbox.md:39 /tokens/box.glyph
data-table · partcheckbox.glyphspec/components/data-table.md:50 /tokens/checkbox.glyph
dialog · partprimary.textspec/components/dialog.md:45 /tokens/primary.text
filterable-table · partcheck.glyphspec/components/filterable-table.md:61 /tokens/check.glyph
filterable-table · partnew.textspec/components/filterable-table.md:44 /tokens/new.text
multiselect · partdependency.role-color-action-primary-textspec/components/multiselect.md:37 /tokens/dependency.role-color-action-primary-text
radio-group · partbox.dotspec/components/radio-group.md:37 /tokens/box.dot
segmented-control · partdependency.role-color-action-primary-textspec/components/segmented-control.md:36 /tokens/dependency.role-color-action-primary-text
settings-panel · partapply.busy-glyphspec/components/settings-panel.md:50 /tokens/apply.busy-glyph
settings-panel · partapply.textspec/components/settings-panel.md:49 /tokens/apply.text
settings-panel · partcontrol.checked-glyphspec/components/settings-panel.md:44 /tokens/control.checked-glyph
switch · partthumb.bg-checkedspec/components/switch.md:42 /tokens/thumb.bg-checked
wizard · partbusy.glyphspec/components/wizard.md:53 /tokens/busy.glyph
wizard · partnext.textspec/components/wizard.md:45 /tokens/next.text
admin-form · statefgbusy · color.action.primary.bgspec/components/admin-form.md:68 /stateTokens/busy/fg
button · statefgactive · color.action.primary.pressed-bgspec/components/button.md:64 /stateTokens/active/fg
button · statefgdefault · color.action.primary.bgspec/components/button.md:61 /stateTokens/default/fg
button · statefgfocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/fg
button · statefghover · color.action.primary.hover-bgspec/components/button.md:62 /stateTokens/hover/fg
button · statefgloading · color.action.primary.bgspec/components/button.md:65 /stateTokens/loading/fg
checkbox · statefgchecked · color.action.primary.bgspec/components/checkbox.md:54 /stateTokens/checked/fg
checkbox · statefgchecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/fg
checkbox · statefgmixed · color.action.primary.bgspec/components/checkbox.md:55 /stateTokens/mixed/fg
data-table · statefgmixed · color.action.primary.bgspec/components/data-table.md:62 /stateTokens/mixed/fg
radio-group · statefgchecked · color.action.primary.bgspec/components/radio-group.md:52 /stateTokens/checked/fg
radio-group · statefgchecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/fg
settings-panel · statefgbusy · color.action.primary.bgspec/components/settings-panel.md:57 /stateTokens/busy/fg
switch · statefgchecked · color.action.primary.bgspec/components/switch.md:51 /stateTokens/checked/fg
switch · statefgchecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/fg
wizard · statefgbusy · color.action.primary.bgspec/components/wizard.md:60 /stateTokens/busy/fg

Relevant contrast declarations

heritage-ansi · heritage

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
badge · contrast— · color.action.primary.bgspec/components/badge.md:58 /contrast/4
checkbox · contrasthover · color.action.primary.hover-bgspec/components/checkbox.md:63 /contrast/3
dialog · contrast— · color.action.primary.bgspec/components/dialog.md:66 /contrast/4
filterable-table · contrast— · color.action.primary.bgspec/components/filterable-table.md:86 /contrast/6
radio-group · contrasthover · color.action.primary.hover-bgspec/components/radio-group.md:60 /contrast/3
switch · contrasthover · color.action.primary.hover-bgspec/components/switch.md:56 /contrast/2
Shared rule · contrast— · color.action.primary.bgspec/contrast.json:23 /pairs/19
Shared rule · contrast— · color.action.primary.hover-bgspec/contrast.json:24 /pairs/20
admin-form · partcontinue.busy-glyphspec/components/admin-form.md:60 /tokens/continue.busy-glyph
admin-form · partcontinue.textspec/components/admin-form.md:59 /tokens/continue.text
badge · partcount.text · countspec/components/badge.md:49 /tokens/count.text
button · partloading.glyphspec/components/button.md:59 /tokens/loading.glyph
button · partroot.textspec/components/button.md:31 /tokens/root.text
checkbox · partbox.glyphspec/components/checkbox.md:39 /tokens/box.glyph
data-table · partcheckbox.glyphspec/components/data-table.md:50 /tokens/checkbox.glyph
dialog · partprimary.textspec/components/dialog.md:45 /tokens/primary.text
filterable-table · partcheck.glyphspec/components/filterable-table.md:61 /tokens/check.glyph
filterable-table · partnew.textspec/components/filterable-table.md:44 /tokens/new.text
multiselect · partdependency.role-color-action-primary-textspec/components/multiselect.md:37 /tokens/dependency.role-color-action-primary-text
radio-group · partbox.dotspec/components/radio-group.md:37 /tokens/box.dot
segmented-control · partdependency.role-color-action-primary-textspec/components/segmented-control.md:36 /tokens/dependency.role-color-action-primary-text
settings-panel · partapply.busy-glyphspec/components/settings-panel.md:50 /tokens/apply.busy-glyph
settings-panel · partapply.textspec/components/settings-panel.md:49 /tokens/apply.text
settings-panel · partcontrol.checked-glyphspec/components/settings-panel.md:44 /tokens/control.checked-glyph
switch · partthumb.bg-checkedspec/components/switch.md:42 /tokens/thumb.bg-checked
wizard · partbusy.glyphspec/components/wizard.md:53 /tokens/busy.glyph
wizard · partnext.textspec/components/wizard.md:45 /tokens/next.text
admin-form · statefgbusy · color.action.primary.bgspec/components/admin-form.md:68 /stateTokens/busy/fg
button · statefgactive · color.action.primary.pressed-bgspec/components/button.md:64 /stateTokens/active/fg
button · statefgdefault · color.action.primary.bgspec/components/button.md:61 /stateTokens/default/fg
button · statefgfocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/fg
button · statefghover · color.action.primary.hover-bgspec/components/button.md:62 /stateTokens/hover/fg
button · statefgloading · color.action.primary.bgspec/components/button.md:65 /stateTokens/loading/fg
checkbox · statefgchecked · color.action.primary.bgspec/components/checkbox.md:54 /stateTokens/checked/fg
checkbox · statefgchecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/fg
checkbox · statefgmixed · color.action.primary.bgspec/components/checkbox.md:55 /stateTokens/mixed/fg
data-table · statefgmixed · color.action.primary.bgspec/components/data-table.md:62 /stateTokens/mixed/fg
radio-group · statefgchecked · color.action.primary.bgspec/components/radio-group.md:52 /stateTokens/checked/fg
radio-group · statefgchecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/fg
settings-panel · statefgbusy · color.action.primary.bgspec/components/settings-panel.md:57 /stateTokens/busy/fg
switch · statefgchecked · color.action.primary.bgspec/components/switch.md:51 /stateTokens/checked/fg
switch · statefgchecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/fg
wizard · statefgbusy · color.action.primary.bgspec/components/wizard.md:60 /stateTokens/busy/fg

Relevant contrast declarations

extended · proposed

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
badge · contrast— · color.action.primary.bgspec/components/badge.md:58 /contrast/4
checkbox · contrasthover · color.action.primary.hover-bgspec/components/checkbox.md:63 /contrast/3
dialog · contrast— · color.action.primary.bgspec/components/dialog.md:66 /contrast/4
filterable-table · contrast— · color.action.primary.bgspec/components/filterable-table.md:86 /contrast/6
radio-group · contrasthover · color.action.primary.hover-bgspec/components/radio-group.md:60 /contrast/3
switch · contrasthover · color.action.primary.hover-bgspec/components/switch.md:56 /contrast/2
Shared rule · contrast— · color.action.primary.bgspec/contrast.json:23 /pairs/19
Shared rule · contrast— · color.action.primary.hover-bgspec/contrast.json:24 /pairs/20
admin-form · partcontinue.busy-glyphspec/components/admin-form.md:60 /tokens/continue.busy-glyph
admin-form · partcontinue.textspec/components/admin-form.md:59 /tokens/continue.text
badge · partcount.text · countspec/components/badge.md:49 /tokens/count.text
button · partloading.glyphspec/components/button.md:59 /tokens/loading.glyph
button · partroot.textspec/components/button.md:31 /tokens/root.text
checkbox · partbox.glyphspec/components/checkbox.md:39 /tokens/box.glyph
data-table · partcheckbox.glyphspec/components/data-table.md:50 /tokens/checkbox.glyph
dialog · partprimary.textspec/components/dialog.md:45 /tokens/primary.text
filterable-table · partcheck.glyphspec/components/filterable-table.md:61 /tokens/check.glyph
filterable-table · partnew.textspec/components/filterable-table.md:44 /tokens/new.text
multiselect · partdependency.role-color-action-primary-textspec/components/multiselect.md:37 /tokens/dependency.role-color-action-primary-text
radio-group · partbox.dotspec/components/radio-group.md:37 /tokens/box.dot
segmented-control · partdependency.role-color-action-primary-textspec/components/segmented-control.md:36 /tokens/dependency.role-color-action-primary-text
settings-panel · partapply.busy-glyphspec/components/settings-panel.md:50 /tokens/apply.busy-glyph
settings-panel · partapply.textspec/components/settings-panel.md:49 /tokens/apply.text
settings-panel · partcontrol.checked-glyphspec/components/settings-panel.md:44 /tokens/control.checked-glyph
switch · partthumb.bg-checkedspec/components/switch.md:42 /tokens/thumb.bg-checked
wizard · partbusy.glyphspec/components/wizard.md:53 /tokens/busy.glyph
wizard · partnext.textspec/components/wizard.md:45 /tokens/next.text
admin-form · statefgbusy · color.action.primary.bgspec/components/admin-form.md:68 /stateTokens/busy/fg
button · statefgactive · color.action.primary.pressed-bgspec/components/button.md:64 /stateTokens/active/fg
button · statefgdefault · color.action.primary.bgspec/components/button.md:61 /stateTokens/default/fg
button · statefgfocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/fg
button · statefghover · color.action.primary.hover-bgspec/components/button.md:62 /stateTokens/hover/fg
button · statefgloading · color.action.primary.bgspec/components/button.md:65 /stateTokens/loading/fg
checkbox · statefgchecked · color.action.primary.bgspec/components/checkbox.md:54 /stateTokens/checked/fg
checkbox · statefgchecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/fg
checkbox · statefgmixed · color.action.primary.bgspec/components/checkbox.md:55 /stateTokens/mixed/fg
data-table · statefgmixed · color.action.primary.bgspec/components/data-table.md:62 /stateTokens/mixed/fg
radio-group · statefgchecked · color.action.primary.bgspec/components/radio-group.md:52 /stateTokens/checked/fg
radio-group · statefgchecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/fg
settings-panel · statefgbusy · color.action.primary.bgspec/components/settings-panel.md:57 /stateTokens/busy/fg
switch · statefgchecked · color.action.primary.bgspec/components/switch.md:51 /stateTokens/checked/fg
switch · statefgchecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/fg
wizard · statefgbusy · color.action.primary.bgspec/components/wizard.md:60 /stateTokens/busy/fg

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