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

J3W1 / DESIGN SYSTEM

color.action.primary.bg

Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12.

Source revision 1faefcf014c8bf01a6b27308ea796da968773a81

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

Report an issue with this token

color.action.primary.bg
--color-action-primary-bg

default · approved

Resolved value
#7d1310
Status
approved
Consumption
use — Use within the role's documented scope and restrictions.
Decisions
None pending.
Source
tokens/semantic.tokens.json:383 /color/action/primary/bg
Alias chain
color.primitive.red.200
Used by aliases
No declared aliases depend on this role.

Provenance and restrictions

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

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
badge · contrast—— · color.action.primary.bgspec/components/badge.md:58 /contrast/4
button · contrast—— · color.surface.defaultspec/components/button.md:67 /contrast/0
data-table · contrast—mixed · color.surface.defaultspec/components/data-table.md:68 /contrast/2
dialog · contrast—focus-visible · color.action.primary.bgspec/components/dialog.md:69 /contrast/7
dialog · contrast—— · color.action.primary.bgspec/components/dialog.md:66 /contrast/4
file-input · contrast—loading · color.interaction.pressed.bgspec/components/file-input.md:70 /contrast/7
filterable-table · contrast—— · color.action.primary.bgspec/components/filterable-table.md:86 /contrast/6
progress · contrast—busy · color.interaction.pressed.bgspec/components/progress.md:45 /contrast/3
progress · contrast—— · color.interaction.pressed.bgspec/components/progress.md:44 /contrast/2
wizard · contrast—focus-visible · color.action.primary.bgspec/components/wizard.md:70 /contrast/8
Shared rule · contrast—— · color.action.primary.bgspec/contrast.json:23 /pairs/19
admin-form · partcontinue.bg—spec/components/admin-form.md:58 /tokens/continue.bg
badge · partcount.bg · count—spec/components/badge.md:48 /tokens/count.bg
button · partroot.bg—spec/components/button.md:30 /tokens/root.bg
checkbox · partbox.bg-checked—spec/components/checkbox.md:37 /tokens/box.bg-checked
data-table · partcheckbox.checked-bg—spec/components/data-table.md:49 /tokens/checkbox.checked-bg
dialog · partprimary.bg—spec/components/dialog.md:44 /tokens/primary.bg
file-input · partprogress.stripe—spec/components/file-input.md:53 /tokens/progress.stripe
filterable-table · partcheck.checked-bg—spec/components/filterable-table.md:60 /tokens/check.checked-bg
filterable-table · partnew.bg—spec/components/filterable-table.md:43 /tokens/new.bg
multiselect · partdependency.role-color-action-primary-bg—spec/components/multiselect.md:35 /tokens/dependency.role-color-action-primary-bg
progress · partstripe.a—spec/components/progress.md:32 /tokens/stripe.a
progress · partvalue.bg—spec/components/progress.md:30 /tokens/value.bg
radio-group · partbox.bg-checked—spec/components/radio-group.md:35 /tokens/box.bg-checked
range · partdependency.role-color-action-primary-bg—spec/components/range.md:32 /tokens/dependency.role-color-action-primary-bg
segmented-control · partdependency.role-color-action-primary-bg—spec/components/segmented-control.md:34 /tokens/dependency.role-color-action-primary-bg
settings-panel · partapply.bg—spec/components/settings-panel.md:48 /tokens/apply.bg
settings-panel · partcontrol.checked-bg—spec/components/settings-panel.md:43 /tokens/control.checked-bg
switch · parttrack.bg-checked—spec/components/switch.md:36 /tokens/track.bg-checked
wizard · partnext.bg—spec/components/wizard.md:44 /tokens/next.bg
admin-form · statebgbusy · color.action.primary.bgspec/components/admin-form.md:68 /stateTokens/busy/bg
button · statebgdefault · color.action.primary.bgspec/components/button.md:61 /stateTokens/default/bg
button · statebgfocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/bg
button · statebgloading · color.action.primary.bgspec/components/button.md:65 /stateTokens/loading/bg
checkbox · statebgchecked · color.action.primary.bgspec/components/checkbox.md:54 /stateTokens/checked/bg
checkbox · statebgchecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/bg
checkbox · statebgmixed · color.action.primary.bgspec/components/checkbox.md:55 /stateTokens/mixed/bg
data-table · statebgmixed · color.action.primary.bgspec/components/data-table.md:62 /stateTokens/mixed/bg
radio-group · statebgchecked · color.action.primary.bgspec/components/radio-group.md:52 /stateTokens/checked/bg
radio-group · statebgchecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/bg
settings-panel · statebgbusy · color.action.primary.bgspec/components/settings-panel.md:57 /stateTokens/busy/bg
switch · statebgchecked · color.action.primary.bgspec/components/switch.md:51 /stateTokens/checked/bg
switch · statebgchecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/bg
wizard · statebgbusy · color.action.primary.bgspec/components/wizard.md:60 /stateTokens/busy/bg

Relevant contrast declarations

heritage-ansi · heritage

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

Provenance and restrictions

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

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
badge · contrast—— · color.action.primary.bgspec/components/badge.md:58 /contrast/4
button · contrast—— · color.surface.defaultspec/components/button.md:67 /contrast/0
data-table · contrast—mixed · color.surface.defaultspec/components/data-table.md:68 /contrast/2
dialog · contrast—focus-visible · color.action.primary.bgspec/components/dialog.md:69 /contrast/7
dialog · contrast—— · color.action.primary.bgspec/components/dialog.md:66 /contrast/4
file-input · contrast—loading · color.interaction.pressed.bgspec/components/file-input.md:70 /contrast/7
filterable-table · contrast—— · color.action.primary.bgspec/components/filterable-table.md:86 /contrast/6
progress · contrast—busy · color.interaction.pressed.bgspec/components/progress.md:45 /contrast/3
progress · contrast—— · color.interaction.pressed.bgspec/components/progress.md:44 /contrast/2
wizard · contrast—focus-visible · color.action.primary.bgspec/components/wizard.md:70 /contrast/8
Shared rule · contrast—— · color.action.primary.bgspec/contrast.json:23 /pairs/19
admin-form · partcontinue.bg—spec/components/admin-form.md:58 /tokens/continue.bg
badge · partcount.bg · count—spec/components/badge.md:48 /tokens/count.bg
button · partroot.bg—spec/components/button.md:30 /tokens/root.bg
checkbox · partbox.bg-checked—spec/components/checkbox.md:37 /tokens/box.bg-checked
data-table · partcheckbox.checked-bg—spec/components/data-table.md:49 /tokens/checkbox.checked-bg
dialog · partprimary.bg—spec/components/dialog.md:44 /tokens/primary.bg
file-input · partprogress.stripe—spec/components/file-input.md:53 /tokens/progress.stripe
filterable-table · partcheck.checked-bg—spec/components/filterable-table.md:60 /tokens/check.checked-bg
filterable-table · partnew.bg—spec/components/filterable-table.md:43 /tokens/new.bg
multiselect · partdependency.role-color-action-primary-bg—spec/components/multiselect.md:35 /tokens/dependency.role-color-action-primary-bg
progress · partstripe.a—spec/components/progress.md:32 /tokens/stripe.a
progress · partvalue.bg—spec/components/progress.md:30 /tokens/value.bg
radio-group · partbox.bg-checked—spec/components/radio-group.md:35 /tokens/box.bg-checked
range · partdependency.role-color-action-primary-bg—spec/components/range.md:32 /tokens/dependency.role-color-action-primary-bg
segmented-control · partdependency.role-color-action-primary-bg—spec/components/segmented-control.md:34 /tokens/dependency.role-color-action-primary-bg
settings-panel · partapply.bg—spec/components/settings-panel.md:48 /tokens/apply.bg
settings-panel · partcontrol.checked-bg—spec/components/settings-panel.md:43 /tokens/control.checked-bg
switch · parttrack.bg-checked—spec/components/switch.md:36 /tokens/track.bg-checked
wizard · partnext.bg—spec/components/wizard.md:44 /tokens/next.bg
admin-form · statebgbusy · color.action.primary.bgspec/components/admin-form.md:68 /stateTokens/busy/bg
button · statebgdefault · color.action.primary.bgspec/components/button.md:61 /stateTokens/default/bg
button · statebgfocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/bg
button · statebgloading · color.action.primary.bgspec/components/button.md:65 /stateTokens/loading/bg
checkbox · statebgchecked · color.action.primary.bgspec/components/checkbox.md:54 /stateTokens/checked/bg
checkbox · statebgchecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/bg
checkbox · statebgmixed · color.action.primary.bgspec/components/checkbox.md:55 /stateTokens/mixed/bg
data-table · statebgmixed · color.action.primary.bgspec/components/data-table.md:62 /stateTokens/mixed/bg
radio-group · statebgchecked · color.action.primary.bgspec/components/radio-group.md:52 /stateTokens/checked/bg
radio-group · statebgchecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/bg
settings-panel · statebgbusy · color.action.primary.bgspec/components/settings-panel.md:57 /stateTokens/busy/bg
switch · statebgchecked · color.action.primary.bgspec/components/switch.md:51 /stateTokens/checked/bg
switch · statebgchecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/bg
wizard · statebgbusy · color.action.primary.bgspec/components/wizard.md:60 /stateTokens/busy/bg

Relevant contrast declarations

extended · proposed

Resolved value
#7d1310
Status
approved
Consumption
blocked — Proposed profile: preview only, not downstream delivery.
Decisions
None pending.
Source
tokens/semantic.tokens.json:383 /color/action/primary/bg
Alias chain
color.primitive.red.200
Used by aliases
No declared aliases depend on this role.

Provenance and restrictions

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

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
badge · contrast—— · color.action.primary.bgspec/components/badge.md:58 /contrast/4
button · contrast—— · color.surface.defaultspec/components/button.md:67 /contrast/0
data-table · contrast—mixed · color.surface.defaultspec/components/data-table.md:68 /contrast/2
dialog · contrast—focus-visible · color.action.primary.bgspec/components/dialog.md:69 /contrast/7
dialog · contrast—— · color.action.primary.bgspec/components/dialog.md:66 /contrast/4
file-input · contrast—loading · color.interaction.pressed.bgspec/components/file-input.md:70 /contrast/7
filterable-table · contrast—— · color.action.primary.bgspec/components/filterable-table.md:86 /contrast/6
progress · contrast—busy · color.interaction.pressed.bgspec/components/progress.md:45 /contrast/3
progress · contrast—— · color.interaction.pressed.bgspec/components/progress.md:44 /contrast/2
wizard · contrast—focus-visible · color.action.primary.bgspec/components/wizard.md:70 /contrast/8
Shared rule · contrast—— · color.action.primary.bgspec/contrast.json:23 /pairs/19
admin-form · partcontinue.bg—spec/components/admin-form.md:58 /tokens/continue.bg
badge · partcount.bg · count—spec/components/badge.md:48 /tokens/count.bg
button · partroot.bg—spec/components/button.md:30 /tokens/root.bg
checkbox · partbox.bg-checked—spec/components/checkbox.md:37 /tokens/box.bg-checked
data-table · partcheckbox.checked-bg—spec/components/data-table.md:49 /tokens/checkbox.checked-bg
dialog · partprimary.bg—spec/components/dialog.md:44 /tokens/primary.bg
file-input · partprogress.stripe—spec/components/file-input.md:53 /tokens/progress.stripe
filterable-table · partcheck.checked-bg—spec/components/filterable-table.md:60 /tokens/check.checked-bg
filterable-table · partnew.bg—spec/components/filterable-table.md:43 /tokens/new.bg
multiselect · partdependency.role-color-action-primary-bg—spec/components/multiselect.md:35 /tokens/dependency.role-color-action-primary-bg
progress · partstripe.a—spec/components/progress.md:32 /tokens/stripe.a
progress · partvalue.bg—spec/components/progress.md:30 /tokens/value.bg
radio-group · partbox.bg-checked—spec/components/radio-group.md:35 /tokens/box.bg-checked
range · partdependency.role-color-action-primary-bg—spec/components/range.md:32 /tokens/dependency.role-color-action-primary-bg
segmented-control · partdependency.role-color-action-primary-bg—spec/components/segmented-control.md:34 /tokens/dependency.role-color-action-primary-bg
settings-panel · partapply.bg—spec/components/settings-panel.md:48 /tokens/apply.bg
settings-panel · partcontrol.checked-bg—spec/components/settings-panel.md:43 /tokens/control.checked-bg
switch · parttrack.bg-checked—spec/components/switch.md:36 /tokens/track.bg-checked
wizard · partnext.bg—spec/components/wizard.md:44 /tokens/next.bg
admin-form · statebgbusy · color.action.primary.bgspec/components/admin-form.md:68 /stateTokens/busy/bg
button · statebgdefault · color.action.primary.bgspec/components/button.md:61 /stateTokens/default/bg
button · statebgfocus-visible · color.action.primary.bgspec/components/button.md:63 /stateTokens/focus-visible/bg
button · statebgloading · color.action.primary.bgspec/components/button.md:65 /stateTokens/loading/bg
checkbox · statebgchecked · color.action.primary.bgspec/components/checkbox.md:54 /stateTokens/checked/bg
checkbox · statebgchecked+focus-visible · color.action.primary.bgspec/components/checkbox.md:56 /stateTokens/checked+focus-visible/bg
checkbox · statebgmixed · color.action.primary.bgspec/components/checkbox.md:55 /stateTokens/mixed/bg
data-table · statebgmixed · color.action.primary.bgspec/components/data-table.md:62 /stateTokens/mixed/bg
radio-group · statebgchecked · color.action.primary.bgspec/components/radio-group.md:52 /stateTokens/checked/bg
radio-group · statebgchecked+focus-visible · color.action.primary.bgspec/components/radio-group.md:53 /stateTokens/checked+focus-visible/bg
settings-panel · statebgbusy · color.action.primary.bgspec/components/settings-panel.md:57 /stateTokens/busy/bg
switch · statebgchecked · color.action.primary.bgspec/components/switch.md:51 /stateTokens/checked/bg
switch · statebgchecked+focus-visible · color.action.primary.bgspec/components/switch.md:52 /stateTokens/checked+focus-visible/bg
wizard · statebgbusy · color.action.primary.bgspec/components/wizard.md:60 /stateTokens/busy/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