Skip to content

Expand error family of tokens #73793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jameskoster merged 2 commits into from
Dec 10, 2025
Merged

Expand error family of tokens #73793

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4752cbe
Expand error family of tokens
jameskoster Dec 5, 2025
4e18650
Remove --wpds-color-stroke-interactive-brand-disabled
jameskoster Dec 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions packages/theme/docs/ds-tokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,15 @@ Do not edit directly.
| `--wpds-color-bg-interactive-brand-weak` | Background color for interactive elements with brand tone and weak emphasis. |
| `--wpds-color-bg-interactive-brand-weak-active` | Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. |
| `--wpds-color-bg-interactive-brand-weak-disabled` | Background color for interactive elements with brand tone and weak emphasis, in their disabled state. |
| `--wpds-color-bg-interactive-error` | Background color for interactive elements with error tone and normal emphasis. |
| `--wpds-color-bg-interactive-error-active` | Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. |
| `--wpds-color-bg-interactive-error-disabled` | Background color for interactive elements with error tone and normal emphasis, in their disabled state. |
| `--wpds-color-bg-interactive-error-strong` | Background color for interactive elements with error tone and strong emphasis. |
| `--wpds-color-bg-interactive-error-strong-active` | Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. |
| `--wpds-color-bg-interactive-error-strong-disabled` | Background color for interactive elements with error tone and strong emphasis, in their disabled state. |
| `--wpds-color-bg-interactive-error-weak` | Background color for interactive elements with error tone and weak emphasis. |
| `--wpds-color-bg-interactive-error-weak-active` | Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. |
| `--wpds-color-bg-interactive-error-weak-disabled` | Background color for interactive elements with error tone and weak emphasis, in their disabled state. |
| `--wpds-color-bg-track-neutral-weak` | Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). |
| `--wpds-color-bg-track-neutral` | Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). |
| `--wpds-color-bg-thumb-neutral-weak` | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). |
Expand Down Expand Up @@ -90,6 +99,12 @@ Do not edit directly.
| `--wpds-color-fg-interactive-brand-strong` | Foreground color for interactive elements with brand tone and strong emphasis. |
| `--wpds-color-fg-interactive-brand-strong-active` | Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. |
| `--wpds-color-fg-interactive-brand-strong-disabled` | Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. |
| `--wpds-color-fg-interactive-error` | Foreground color for interactive elements with error tone and normal emphasis. |
| `--wpds-color-fg-interactive-error-active` | Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. |
| `--wpds-color-fg-interactive-error-disabled` | Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. |
| `--wpds-color-fg-interactive-error-strong` | Foreground color for interactive elements with error tone and strong emphasis. |
| `--wpds-color-fg-interactive-error-strong-active` | Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. |
| `--wpds-color-fg-interactive-error-strong-disabled` | Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. |
| `--wpds-color-stroke-surface-neutral` | Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. |
| `--wpds-color-stroke-surface-neutral-weak` | Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. |
| `--wpds-color-stroke-surface-neutral-strong` | Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. |
Expand All @@ -110,6 +125,8 @@ Do not edit directly.
| `--wpds-color-stroke-interactive-brand` | Accessible stroke color used for interactive brand-toned elements with normal emphasis. |
| `--wpds-color-stroke-interactive-brand-active` | Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. |
| `--wpds-color-stroke-interactive-brand-disabled` | Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. |
| `--wpds-color-stroke-interactive-error` | Accessible stroke color used for interactive error-toned elements with normal emphasis. |
| `--wpds-color-stroke-interactive-error-active` | Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. |

@aduth aduth Dec 5, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to clarify, we don't need a disabled token here? And if not, how come we need one for brand ?

@jameskoster jameskoster Dec 8, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With one eye on adding 'neutral' toned button I think we'll want all disabled buttons to have the same visual style; light gray background and gray text, no stroke, regardless of variant. This will ensure a disabled brand outline button doesn't look too similar to a neutral secondary button. So we won't need the disabled stroke token.

And if not, how come we need one for brand ?

Good question. I can't think of a use case for that off the top of my head. Do you think we should remove it?

@aduth aduth Dec 8, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And if not, how come we need one for brand ?

Good question. I can't think of a use case for that off the top of my head. Do you think we should remove it?

Yeah, I had a hunch about your answer, and I think it makes sense as a logical action item for consistency if we don't think we'll need these disabled states.

@jameskoster jameskoster Dec 9, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed.

| `--wpds-color-stroke-interactive-error-strong` | Accessible stroke color used for interactive error-toned elements with strong emphasis. |
| `--wpds-color-stroke-focus-brand` | Accessible stroke color applied to focus rings. |

Expand Down
17 changes: 17 additions & 0 deletions packages/theme/src/prebuilt/css/design-tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,15 @@
--wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
--wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
--wpds-color-bg-interactive-brand-weak-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
--wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
--wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
--wpds-color-bg-interactive-error-disabled: #e2e2e2; /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
--wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
--wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
--wpds-color-bg-interactive-error-strong-disabled: #d2d2d2; /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
--wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
--wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
--wpds-color-bg-interactive-error-weak-disabled: #e2e2e2; /* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */
--wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */
--wpds-color-bg-interactive-neutral-active: #eaeaea; /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
--wpds-color-bg-interactive-neutral-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
Expand Down Expand Up @@ -69,6 +78,12 @@
--wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
--wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
--wpds-color-fg-interactive-brand-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
--wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
--wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
--wpds-color-fg-interactive-error-disabled: #8a8a8a; /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
--wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
--wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
--wpds-color-fg-interactive-error-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */
--wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
--wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
--wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
Expand All @@ -81,6 +96,8 @@
--wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
--wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
--wpds-color-stroke-interactive-brand-disabled: #d8d8d8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
--wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
--wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
--wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
--wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
--wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
Expand Down
17 changes: 17 additions & 0 deletions packages/theme/src/prebuilt/js/design-tokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,15 @@ export default [
'--wpds-color-bg-interactive-brand-weak',
'--wpds-color-bg-interactive-brand-weak-active',
'--wpds-color-bg-interactive-brand-weak-disabled',
'--wpds-color-bg-interactive-error',
'--wpds-color-bg-interactive-error-active',
'--wpds-color-bg-interactive-error-disabled',
'--wpds-color-bg-interactive-error-strong',
'--wpds-color-bg-interactive-error-strong-active',
'--wpds-color-bg-interactive-error-strong-disabled',
'--wpds-color-bg-interactive-error-weak',
'--wpds-color-bg-interactive-error-weak-active',
'--wpds-color-bg-interactive-error-weak-disabled',
'--wpds-color-bg-track-neutral-weak',
'--wpds-color-bg-track-neutral',
'--wpds-color-bg-thumb-neutral-weak',
Expand Down Expand Up @@ -78,6 +87,12 @@ export default [
'--wpds-color-fg-interactive-brand-strong',
'--wpds-color-fg-interactive-brand-strong-active',
'--wpds-color-fg-interactive-brand-strong-disabled',
'--wpds-color-fg-interactive-error',
'--wpds-color-fg-interactive-error-active',
'--wpds-color-fg-interactive-error-disabled',
'--wpds-color-fg-interactive-error-strong',
'--wpds-color-fg-interactive-error-strong-active',
'--wpds-color-fg-interactive-error-strong-disabled',
'--wpds-color-stroke-surface-neutral',
'--wpds-color-stroke-surface-neutral-weak',
'--wpds-color-stroke-surface-neutral-strong',
Expand All @@ -98,6 +113,8 @@ export default [
'--wpds-color-stroke-interactive-brand',
'--wpds-color-stroke-interactive-brand-active',
'--wpds-color-stroke-interactive-brand-disabled',
'--wpds-color-stroke-interactive-error',
'--wpds-color-stroke-interactive-error-active',
'--wpds-color-stroke-interactive-error-strong',
'--wpds-color-stroke-focus-brand',
'--wpds-dimension-base',
Expand Down
102 changes: 102 additions & 0 deletions packages/theme/src/prebuilt/json/figma.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,60 @@
},
"description": "Background color for interactive elements with brand tone and weak emphasis, in their disabled state."
},
"Color/Semantic/Background/Error/bgInt-error": {
"value": {
".": "#0000"
},
"description": "Background color for interactive elements with error tone and normal emphasis."
},
"Color/Semantic/Background/Error/bgInt-error-active": {
"value": {
".": "#fff6f4"
},
"description": "Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active."
},
"Color/Semantic/Background/Error/bgInt-error-disabled": {
"value": {
".": "#e2e2e2"
},
"description": "Background color for interactive elements with error tone and normal emphasis, in their disabled state."
},
"Color/Semantic/Background/Error/bgInt-error-strong": {
"value": {
".": "#cc1818"
},
"description": "Background color for interactive elements with error tone and strong emphasis."
},
"Color/Semantic/Background/Error/bgInt-error-strong-active": {
"value": {
".": "#b90000"
},
"description": "Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active."
},
"Color/Semantic/Background/Error/bgInt-error-strong-disabled": {
"value": {
".": "#d2d2d2"
},
"description": "Background color for interactive elements with error tone and strong emphasis, in their disabled state."
},
"Color/Semantic/Background/Error/bgInt-error-weak": {
"value": {
".": "#0000"
},
"description": "Background color for interactive elements with error tone and weak emphasis."
},
"Color/Semantic/Background/Error/bgInt-error-weak-active": {
"value": {
".": "#f6e6e3"
},
"description": "Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active."
},
"Color/Semantic/Background/Error/bgInt-error-weak-disabled": {
"value": {
".": "#e2e2e2"
},
"description": "Background color for interactive elements with error tone and weak emphasis, in their disabled state."
},
"Color/Semantic/Background/Neutral/bgTra-neutral-weak": {
"value": {
".": "#e0e0e0"
Expand Down Expand Up @@ -444,6 +498,42 @@
},
"description": "Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state."
},
"Color/Semantic/Foreground/Error/fgInt-error": {
"value": {
".": "#cc1818"
},
"description": "Foreground color for interactive elements with error tone and normal emphasis."
},
"Color/Semantic/Foreground/Error/fgInt-error-active": {
"value": {
".": "#cc1818"
},
"description": "Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active."
},
"Color/Semantic/Foreground/Error/fgInt-error-disabled": {
"value": {
".": "#8a8a8a"
},
"description": "Foreground color for interactive elements with error tone and normal emphasis, in their disabled state."
},
"Color/Semantic/Foreground/Error/fgInt-error-strong": {
"value": {
".": "#f2efef"
},
"description": "Foreground color for interactive elements with error tone and strong emphasis."
},
"Color/Semantic/Foreground/Error/fgInt-error-strong-active": {
"value": {
".": "#f2efef"
},
"description": "Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active."
},
"Color/Semantic/Foreground/Error/fgInt-error-strong-disabled": {
"value": {
".": "#6d6d6d"
},
"description": "Foreground color for interactive elements with error tone and strong emphasis, in their disabled state."
},
"Color/Semantic/Stroke/Neutral/strokeSur-neutral": {
"value": {
".": "#d8d8d8"
Expand Down Expand Up @@ -564,6 +654,18 @@
},
"description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state."
},
"Color/Semantic/Stroke/Error/strokeInt-error": {
"value": {
".": "#cc1818"
},
"description": "Accessible stroke color used for interactive error-toned elements with normal emphasis."
},
"Color/Semantic/Stroke/Error/strokeInt-error-active": {
"value": {
".": "#9d0000"
},
"description": "Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active."
},
"Color/Semantic/Stroke/Error/strokeInt-error-strong": {
"value": {
".": "#cc1818"
Expand Down
Loading
Loading