j3w1 / color.status.danger.borderVue · HTML · React · Astro

J3W1 / DESIGN SYSTEM

color.status.danger.border

Danger border, 2px on invalid inputs.

Source revision 1faefcf014c8bf01a6b27308ea796da968773a81

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

Report an issue with this token

color.status.danger.border
--color-status-danger-border

default · approved

Resolved value
#e53935
Status
observed
Consumption
use — Use within the role's documented scope and restrictions.
Decisions
None pending.
Source
tokens/semantic.tokens.json:493 /color/status/danger/border
Alias chain
color.primitive.red.800
Used by aliases
No declared aliases depend on this role.

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
admin-form · contrast—invalid · color.surface.inputspec/components/admin-form.md:78 /contrast/8
badge · contrast—— · color.surface.defaultspec/components/badge.md:64 /contrast/10
toast · contrast—— · color.status.danger.fillspec/components/toast.md:79 /contrast/16
admin-form · partinvalid.border—spec/components/admin-form.md:49 /tokens/invalid.border
admin-form · partsummary.border—spec/components/admin-form.md:41 /tokens/summary.border
alert · partdanger.border · danger—spec/components/alert.md:34 /tokens/danger.border
badge · partdanger.border—spec/components/badge.md:30 /tokens/danger.border
checkbox · partbox.border-invalid—spec/components/checkbox.md:41 /tokens/box.border-invalid
combobox · partroot.border-invalid—spec/components/combobox.md:41 /tokens/root.border-invalid
date-picker · partroot.border-invalid—spec/components/date-picker.md:37 /tokens/root.border-invalid
error-state · partdependency.role-color-status-danger-border—spec/components/error-state.md:37 /tokens/dependency.role-color-status-danger-border
field · partcontrol.border-invalid—spec/components/field.md:26 /tokens/control.border-invalid
file-input · partbutton.border-invalid—spec/components/file-input.md:37 /tokens/button.border-invalid
multiselect · partdependency.role-color-status-danger-border—spec/components/multiselect.md:43 /tokens/dependency.role-color-status-danger-border
number-field · partroot.border-invalid—spec/components/number-field.md:36 /tokens/root.border-invalid
radio-group · partbox.border-invalid—spec/components/radio-group.md:39 /tokens/box.border-invalid
segmented-control · partdependency.role-color-status-danger-border—spec/components/segmented-control.md:43 /tokens/dependency.role-color-status-danger-border
select · partroot.border-invalid—spec/components/select.md:39 /tokens/root.border-invalid
settings-panel · partinvalid.border—spec/components/settings-panel.md:45 /tokens/invalid.border
text-field · partroot.border-invalid—spec/components/text-field.md:48 /tokens/root.border-invalid
textarea · partroot.border-invalid—spec/components/textarea.md:39 /tokens/root.border-invalid
time-picker · partroot.border-invalid—spec/components/time-picker.md:32 /tokens/root.border-invalid
wizard · partstep.indicator-invalid—spec/components/wizard.md:38 /tokens/step.indicator-invalid
toast · prose——spec/components/toast.md:118 body
admin-form · stateborderinvalid · color.status.danger.tintspec/components/admin-form.md:67 /stateTokens/invalid/border
alert · stateborderdefault · color.status.danger.tintspec/components/alert.md:53 /stateTokens/default/border
checkbox · stateborderinvalid · color.surface.inputspec/components/checkbox.md:57 /stateTokens/invalid/border
combobox · stateborderinvalid · color.surface.inputspec/components/combobox.md:70 /stateTokens/invalid/border
combobox · stateborderinvalid+focus-visible · color.surface.inputspec/components/combobox.md:71 /stateTokens/invalid+focus-visible/border
date-picker · stateborderinvalid · color.surface.inputspec/components/date-picker.md:72 /stateTokens/invalid/border
date-picker · stateborderinvalid+focus-visible · color.surface.inputspec/components/date-picker.md:76 /stateTokens/invalid+focus-visible/border
file-input · stateborderinvalid · color.surface.canvasspec/components/file-input.md:61 /stateTokens/invalid/border
number-field · stateborderinvalid · color.surface.inputspec/components/number-field.md:56 /stateTokens/invalid/border
number-field · stateborderinvalid+focus-visible · color.surface.inputspec/components/number-field.md:57 /stateTokens/invalid+focus-visible/border
progress · statebordererror · color.surface.canvasspec/components/progress.md:40 /stateTokens/error/border
radio-group · stateborderinvalid · color.surface.inputspec/components/radio-group.md:54 /stateTokens/invalid/border
select · stateborderinvalid · color.surface.inputspec/components/select.md:59 /stateTokens/invalid/border
select · stateborderinvalid+focus-visible · color.surface.inputspec/components/select.md:60 /stateTokens/invalid+focus-visible/border
settings-panel · stateborderinvalid · color.surface.inputspec/components/settings-panel.md:56 /stateTokens/invalid/border
text-field · stateborderinvalid · color.surface.inputspec/components/text-field.md:72 /stateTokens/invalid/border
text-field · stateborderinvalid+focus-visible · color.surface.inputspec/components/text-field.md:73 /stateTokens/invalid+focus-visible/border
textarea · stateborderinvalid · color.surface.inputspec/components/textarea.md:61 /stateTokens/invalid/border
textarea · stateborderinvalid+focus-visible · color.surface.inputspec/components/textarea.md:62 /stateTokens/invalid+focus-visible/border
time-picker · stateborderinvalid · color.surface.inputspec/components/time-picker.md:58 /stateTokens/invalid/border
wizard · stateborderinvalid · color.surface.canvasspec/components/wizard.md:59 /stateTokens/invalid/border

Relevant contrast declarations

heritage-ansi · heritage

Resolved value
#e53935
Status
observed
Consumption
historical-only — Historical fidelity only; preserve all documented limitations and deprecations.
Decisions
None pending.
Source
tokens/semantic.tokens.json:493 /color/status/danger/border
Alias chain
color.primitive.red.800
Used by aliases
No declared aliases depend on this role.

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
admin-form · contrast—invalid · color.surface.inputspec/components/admin-form.md:78 /contrast/8
badge · contrast—— · color.surface.defaultspec/components/badge.md:64 /contrast/10
toast · contrast—— · color.status.danger.fillspec/components/toast.md:79 /contrast/16
admin-form · partinvalid.border—spec/components/admin-form.md:49 /tokens/invalid.border
admin-form · partsummary.border—spec/components/admin-form.md:41 /tokens/summary.border
alert · partdanger.border · danger—spec/components/alert.md:34 /tokens/danger.border
badge · partdanger.border—spec/components/badge.md:30 /tokens/danger.border
checkbox · partbox.border-invalid—spec/components/checkbox.md:41 /tokens/box.border-invalid
combobox · partroot.border-invalid—spec/components/combobox.md:41 /tokens/root.border-invalid
date-picker · partroot.border-invalid—spec/components/date-picker.md:37 /tokens/root.border-invalid
error-state · partdependency.role-color-status-danger-border—spec/components/error-state.md:37 /tokens/dependency.role-color-status-danger-border
field · partcontrol.border-invalid—spec/components/field.md:26 /tokens/control.border-invalid
file-input · partbutton.border-invalid—spec/components/file-input.md:37 /tokens/button.border-invalid
multiselect · partdependency.role-color-status-danger-border—spec/components/multiselect.md:43 /tokens/dependency.role-color-status-danger-border
number-field · partroot.border-invalid—spec/components/number-field.md:36 /tokens/root.border-invalid
radio-group · partbox.border-invalid—spec/components/radio-group.md:39 /tokens/box.border-invalid
segmented-control · partdependency.role-color-status-danger-border—spec/components/segmented-control.md:43 /tokens/dependency.role-color-status-danger-border
select · partroot.border-invalid—spec/components/select.md:39 /tokens/root.border-invalid
settings-panel · partinvalid.border—spec/components/settings-panel.md:45 /tokens/invalid.border
text-field · partroot.border-invalid—spec/components/text-field.md:48 /tokens/root.border-invalid
textarea · partroot.border-invalid—spec/components/textarea.md:39 /tokens/root.border-invalid
time-picker · partroot.border-invalid—spec/components/time-picker.md:32 /tokens/root.border-invalid
wizard · partstep.indicator-invalid—spec/components/wizard.md:38 /tokens/step.indicator-invalid
toast · prose——spec/components/toast.md:118 body
admin-form · stateborderinvalid · color.status.danger.tintspec/components/admin-form.md:67 /stateTokens/invalid/border
alert · stateborderdefault · color.status.danger.tintspec/components/alert.md:53 /stateTokens/default/border
checkbox · stateborderinvalid · color.surface.inputspec/components/checkbox.md:57 /stateTokens/invalid/border
combobox · stateborderinvalid · color.surface.inputspec/components/combobox.md:70 /stateTokens/invalid/border
combobox · stateborderinvalid+focus-visible · color.surface.inputspec/components/combobox.md:71 /stateTokens/invalid+focus-visible/border
date-picker · stateborderinvalid · color.surface.inputspec/components/date-picker.md:72 /stateTokens/invalid/border
date-picker · stateborderinvalid+focus-visible · color.surface.inputspec/components/date-picker.md:76 /stateTokens/invalid+focus-visible/border
file-input · stateborderinvalid · color.surface.canvasspec/components/file-input.md:61 /stateTokens/invalid/border
number-field · stateborderinvalid · color.surface.inputspec/components/number-field.md:56 /stateTokens/invalid/border
number-field · stateborderinvalid+focus-visible · color.surface.inputspec/components/number-field.md:57 /stateTokens/invalid+focus-visible/border
progress · statebordererror · color.surface.canvasspec/components/progress.md:40 /stateTokens/error/border
radio-group · stateborderinvalid · color.surface.inputspec/components/radio-group.md:54 /stateTokens/invalid/border
select · stateborderinvalid · color.surface.inputspec/components/select.md:59 /stateTokens/invalid/border
select · stateborderinvalid+focus-visible · color.surface.inputspec/components/select.md:60 /stateTokens/invalid+focus-visible/border
settings-panel · stateborderinvalid · color.surface.inputspec/components/settings-panel.md:56 /stateTokens/invalid/border
text-field · stateborderinvalid · color.surface.inputspec/components/text-field.md:72 /stateTokens/invalid/border
text-field · stateborderinvalid+focus-visible · color.surface.inputspec/components/text-field.md:73 /stateTokens/invalid+focus-visible/border
textarea · stateborderinvalid · color.surface.inputspec/components/textarea.md:61 /stateTokens/invalid/border
textarea · stateborderinvalid+focus-visible · color.surface.inputspec/components/textarea.md:62 /stateTokens/invalid+focus-visible/border
time-picker · stateborderinvalid · color.surface.inputspec/components/time-picker.md:58 /stateTokens/invalid/border
wizard · stateborderinvalid · color.surface.canvasspec/components/wizard.md:59 /stateTokens/invalid/border

Relevant contrast declarations

extended · proposed

Resolved value
#e53935
Status
observed
Consumption
blocked — Proposed profile: preview only, not downstream delivery.
Decisions
None pending.
Source
tokens/semantic.tokens.json:493 /color/status/danger/border
Alias chain
color.primitive.red.800
Used by aliases
No declared aliases depend on this role.

Provenance and restrictions

null

Declared component and port usage

Consumer / kindPart / variantState / surfaceSource declaration
admin-form · contrast—invalid · color.surface.inputspec/components/admin-form.md:78 /contrast/8
badge · contrast—— · color.surface.defaultspec/components/badge.md:64 /contrast/10
toast · contrast—— · color.status.danger.fillspec/components/toast.md:79 /contrast/16
admin-form · partinvalid.border—spec/components/admin-form.md:49 /tokens/invalid.border
admin-form · partsummary.border—spec/components/admin-form.md:41 /tokens/summary.border
alert · partdanger.border · danger—spec/components/alert.md:34 /tokens/danger.border
badge · partdanger.border—spec/components/badge.md:30 /tokens/danger.border
checkbox · partbox.border-invalid—spec/components/checkbox.md:41 /tokens/box.border-invalid
combobox · partroot.border-invalid—spec/components/combobox.md:41 /tokens/root.border-invalid
date-picker · partroot.border-invalid—spec/components/date-picker.md:37 /tokens/root.border-invalid
error-state · partdependency.role-color-status-danger-border—spec/components/error-state.md:37 /tokens/dependency.role-color-status-danger-border
field · partcontrol.border-invalid—spec/components/field.md:26 /tokens/control.border-invalid
file-input · partbutton.border-invalid—spec/components/file-input.md:37 /tokens/button.border-invalid
multiselect · partdependency.role-color-status-danger-border—spec/components/multiselect.md:43 /tokens/dependency.role-color-status-danger-border
number-field · partroot.border-invalid—spec/components/number-field.md:36 /tokens/root.border-invalid
radio-group · partbox.border-invalid—spec/components/radio-group.md:39 /tokens/box.border-invalid
segmented-control · partdependency.role-color-status-danger-border—spec/components/segmented-control.md:43 /tokens/dependency.role-color-status-danger-border
select · partroot.border-invalid—spec/components/select.md:39 /tokens/root.border-invalid
settings-panel · partinvalid.border—spec/components/settings-panel.md:45 /tokens/invalid.border
text-field · partroot.border-invalid—spec/components/text-field.md:48 /tokens/root.border-invalid
textarea · partroot.border-invalid—spec/components/textarea.md:39 /tokens/root.border-invalid
time-picker · partroot.border-invalid—spec/components/time-picker.md:32 /tokens/root.border-invalid
wizard · partstep.indicator-invalid—spec/components/wizard.md:38 /tokens/step.indicator-invalid
toast · prose——spec/components/toast.md:118 body
admin-form · stateborderinvalid · color.status.danger.tintspec/components/admin-form.md:67 /stateTokens/invalid/border
alert · stateborderdefault · color.status.danger.tintspec/components/alert.md:53 /stateTokens/default/border
checkbox · stateborderinvalid · color.surface.inputspec/components/checkbox.md:57 /stateTokens/invalid/border
combobox · stateborderinvalid · color.surface.inputspec/components/combobox.md:70 /stateTokens/invalid/border
combobox · stateborderinvalid+focus-visible · color.surface.inputspec/components/combobox.md:71 /stateTokens/invalid+focus-visible/border
date-picker · stateborderinvalid · color.surface.inputspec/components/date-picker.md:72 /stateTokens/invalid/border
date-picker · stateborderinvalid+focus-visible · color.surface.inputspec/components/date-picker.md:76 /stateTokens/invalid+focus-visible/border
file-input · stateborderinvalid · color.surface.canvasspec/components/file-input.md:61 /stateTokens/invalid/border
number-field · stateborderinvalid · color.surface.inputspec/components/number-field.md:56 /stateTokens/invalid/border
number-field · stateborderinvalid+focus-visible · color.surface.inputspec/components/number-field.md:57 /stateTokens/invalid+focus-visible/border
progress · statebordererror · color.surface.canvasspec/components/progress.md:40 /stateTokens/error/border
radio-group · stateborderinvalid · color.surface.inputspec/components/radio-group.md:54 /stateTokens/invalid/border
select · stateborderinvalid · color.surface.inputspec/components/select.md:59 /stateTokens/invalid/border
select · stateborderinvalid+focus-visible · color.surface.inputspec/components/select.md:60 /stateTokens/invalid+focus-visible/border
settings-panel · stateborderinvalid · color.surface.inputspec/components/settings-panel.md:56 /stateTokens/invalid/border
text-field · stateborderinvalid · color.surface.inputspec/components/text-field.md:72 /stateTokens/invalid/border
text-field · stateborderinvalid+focus-visible · color.surface.inputspec/components/text-field.md:73 /stateTokens/invalid+focus-visible/border
textarea · stateborderinvalid · color.surface.inputspec/components/textarea.md:61 /stateTokens/invalid/border
textarea · stateborderinvalid+focus-visible · color.surface.inputspec/components/textarea.md:62 /stateTokens/invalid+focus-visible/border
time-picker · stateborderinvalid · color.surface.inputspec/components/time-picker.md:58 /stateTokens/invalid/border
wizard · stateborderinvalid · color.surface.canvasspec/components/wizard.md:59 /stateTokens/invalid/border

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