Skip to content

Theme: Add disabled variants for brand and error interactive color tokens #79124

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
ciampo merged 6 commits into from
Jun 15, 2026
Merged

Theme: Add disabled variants for brand and error interactive color tokens #79124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e43702c
Theme: Add disabled variants for brand and error interactive color to…
ciampo Jun 11, 2026
df07bf1
Theme: Make disabled token descriptions tone-specific and adopt them …
ciampo Jun 12, 2026
9897537
ItemPopup: Use brand disabled background token for disabled items
ciampo Jun 12, 2026
1a50860
Theme: Drop stroke error-strong-disabled token for neutral parity
ciampo Jun 12, 2026
a11beb3
UI: Clarify changelog wording for disabled token adoption
ciampo Jun 12, 2026
8ee8bfc
Theme: Share a transparent primitive across interactive tokens
ciampo Jun 15, 2026
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
1 change: 1 addition & 0 deletions packages/theme/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

- Add `--wpds-border-radius-xl` for page and app shell surfaces so nested cards and notices can stay on `--wpds-border-radius-lg` without matching the parent radius ([#78913](https://github.com/WordPress/gutenberg/pull/78913)).
- Add `cornerRadius` prop to `ThemeProvider` for configuring the border-radius preset (`none`, `subtle`, `moderate`, `pronounced`) via prebuilt design token modes. [#78816](https://github.com/WordPress/gutenberg/pull/78816).
- Add disabled variants for the `brand` and `error` tones of the interactive `background`, `foreground`, and `stroke` color tokens (e.g. `--wpds-color-stroke-interactive-brand-disabled`, `--wpds-color-background-interactive-brand-strong-disabled`), for parity with the existing `neutral` disabled tokens ([#79124](https://github.com/WordPress/gutenberg/pull/79124)).

### Breaking Changes

Expand Down
21 changes: 16 additions & 5 deletions packages/theme/docs/tokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,17 +161,22 @@ The interactive state of the element. The default (no modifier) is the idle stat
| `--wpds-color-background-interactive-neutral-strong-disabled` | Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. |
| `--wpds-color-background-interactive-neutral-weak` | Background color for interactive elements with neutral tone and weak emphasis. |
| `--wpds-color-background-interactive-neutral-weak-active` | Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. |
| `--wpds-color-background-interactive-neutral-weak-disabled` | Background color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. |
| `--wpds-color-background-interactive-neutral-weak-disabled` | Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. |
| `--wpds-color-background-interactive-brand-strong` | Background color for interactive elements with brand tone and strong emphasis. |
| `--wpds-color-background-interactive-brand-strong-active` | Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. |
| `--wpds-color-background-interactive-brand-strong-disabled` | Background color for interactive elements with brand tone and strong emphasis, in their disabled state. |
| `--wpds-color-background-interactive-brand-weak` | Background color for interactive elements with brand tone and weak emphasis. |
| `--wpds-color-background-interactive-brand-weak-active` | Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. |
| `--wpds-color-background-interactive-brand-weak-disabled` | Background color for interactive elements with brand tone and weak emphasis, in their disabled state. |
| `--wpds-color-background-interactive-error` | Background color for interactive elements with error tone and normal emphasis. |
| `--wpds-color-background-interactive-error-active` | Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. |
| `--wpds-color-background-interactive-error-disabled` | Background color for interactive elements with error tone and normal emphasis, in their disabled state. |
| `--wpds-color-background-interactive-error-strong` | Background color for interactive elements with error tone and strong emphasis. |
| `--wpds-color-background-interactive-error-strong-active` | Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. |
| `--wpds-color-background-interactive-error-strong-disabled` | Background color for interactive elements with error tone and strong emphasis, in their disabled state. |
| `--wpds-color-background-interactive-error-weak` | Background color for interactive elements with error tone and weak emphasis. |
| `--wpds-color-background-interactive-error-weak-active` | Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. |
| `--wpds-color-background-interactive-error-weak-disabled` | Background color for interactive elements with error tone and weak emphasis, in their disabled state. |
| `--wpds-color-background-track-neutral-weak` | Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). |
| `--wpds-color-background-track-neutral` | Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). |
| `--wpds-color-background-thumb-neutral-weak` | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). |
Expand All @@ -193,20 +198,24 @@ The interactive state of the element. The default (no modifier) is the idle stat
| `--wpds-color-foreground-content-error-weak` | Foreground color for content like text with error tone and weak emphasis. |
| `--wpds-color-foreground-interactive-neutral` | Foreground color for interactive elements with neutral tone and normal emphasis. |
| `--wpds-color-foreground-interactive-neutral-active` | Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. |
| `--wpds-color-foreground-interactive-neutral-disabled` | Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. |
| `--wpds-color-foreground-interactive-neutral-disabled` | Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. |
| `--wpds-color-foreground-interactive-neutral-strong` | Foreground color for interactive elements with neutral tone and strong emphasis. |
| `--wpds-color-foreground-interactive-neutral-strong-active` | Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. |
| `--wpds-color-foreground-interactive-neutral-strong-disabled` | Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. |
| `--wpds-color-foreground-interactive-neutral-strong-disabled` | Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. |
| `--wpds-color-foreground-interactive-neutral-weak` | Foreground color for interactive elements with neutral tone and weak emphasis. |
| `--wpds-color-foreground-interactive-neutral-weak-disabled` | Foreground color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. |
| `--wpds-color-foreground-interactive-neutral-weak-disabled` | Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. |
| `--wpds-color-foreground-interactive-brand` | Foreground color for interactive elements with brand tone and normal emphasis. |
| `--wpds-color-foreground-interactive-brand-active` | Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. |
| `--wpds-color-foreground-interactive-brand-disabled` | Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. |
| `--wpds-color-foreground-interactive-brand-strong` | Foreground color for interactive elements with brand tone and strong emphasis. |
| `--wpds-color-foreground-interactive-brand-strong-active` | Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. |
| `--wpds-color-foreground-interactive-brand-strong-disabled` | Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. |
| `--wpds-color-foreground-interactive-error` | Foreground color for interactive elements with error tone and normal emphasis. |
| `--wpds-color-foreground-interactive-error-active` | Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. |
| `--wpds-color-foreground-interactive-error-disabled` | Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. |
| `--wpds-color-foreground-interactive-error-strong` | Foreground color for interactive elements with error tone and strong emphasis. |
| `--wpds-color-foreground-interactive-error-strong-active` | Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. |
| `--wpds-color-foreground-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 @@ -222,12 +231,14 @@ The interactive state of the element. The default (no modifier) is the idle stat
| `--wpds-color-stroke-surface-error-strong` | Decorative stroke color used to define error-toned surface boundaries with strong emphasis. |
| `--wpds-color-stroke-interactive-neutral` | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. |
| `--wpds-color-stroke-interactive-neutral-active` | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. |
| `--wpds-color-stroke-interactive-neutral-disabled` | Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. |
| `--wpds-color-stroke-interactive-neutral-disabled` | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. |
| `--wpds-color-stroke-interactive-neutral-strong` | Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. |
| `--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. |
| `--wpds-color-stroke-interactive-error-disabled` | Accessible stroke color used for interactive error-toned elements with normal emphasis, in their disabled state. |
| `--wpds-color-stroke-interactive-error-strong` | Accessible stroke color used for interactive error-toned elements with strong emphasis. |
| `--wpds-color-stroke-focus` | Accessible stroke color applied to focus rings. |

Expand Down
Loading
Loading