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

Add `disabled` variants for the `brand` and `error` tones across the
interactive `bg`, `fg`, and `stroke` color tokens, mirroring the existing
tone-agnostic `neutral` disabled tokens. This brings brand/error to parity
with neutral (T-M5).

Author: ciampo

packages/theme/CHANGELOG.md

@@ -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.
 
 ### Breaking Changes
 

packages/theme/docs/tokens.md

@@ -164,14 +164,19 @@ The interactive state of the element. The default (no modifier) is the idle stat
 | `--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-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 strong emphasis, in their disabled state, regardless of the tone.                            |
 | `--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 weak emphasis, in their disabled state, regardless of the tone.                              |
 | `--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 normal emphasis, in their disabled state, regardless of the tone.                            |
 | `--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 strong emphasis, in their disabled state, regardless of the tone.                            |
 | `--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 weak emphasis, in their disabled state, regardless of the tone.                              |
 | `--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).                                                    |
@@ -201,12 +206,16 @@ The interactive state of the element. The default (no modifier) is the idle stat
 | `--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-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 normal emphasis, in their disabled state, regardless of the tone.                            |
 | `--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 strong emphasis, in their disabled state, regardless of the tone.                            |
 | `--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 normal emphasis, in their disabled state, regardless of the tone.                            |
 | `--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 strong emphasis, in their disabled state, regardless of the tone.                            |
 | `--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.                                             |
@@ -226,9 +235,12 @@ The interactive state of the element. The default (no modifier) is the idle stat
 | `--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 elements with normal emphasis, in their disabled state, regardless of the tone.                |
 | `--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 elements with normal emphasis, in their disabled state, regardless of the tone.                |
 | `--wpds-color-stroke-interactive-error-strong`                | Accessible stroke color used for interactive error-toned elements with strong emphasis.                                                     |
+| `--wpds-color-stroke-interactive-error-strong-disabled`       | Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone.                |
 | `--wpds-color-stroke-focus`                                   | Accessible stroke color applied to focus rings.                                                                                             |
 
 ### Cursor

packages/theme/src/prebuilt/css/design-tokens.css

@@ -67,22 +67,32 @@
 	--wpds-color-background-interactive-brand-strong: #3858e9;
 	/* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-background-interactive-brand-strong-active: #2e49d9;
+	/* Background color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-background-interactive-brand-strong-disabled: #e6e6e6;
 	/* Background color for interactive elements with brand tone and weak emphasis. */
 	--wpds-color-background-interactive-brand-weak: #0000;
 	/* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
 	--wpds-color-background-interactive-brand-weak-active: #e6eaf4;
+	/* Background color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-background-interactive-brand-weak-disabled: #0000;
 	/* Background color for interactive elements with error tone and normal emphasis. */
 	--wpds-color-background-interactive-error: #0000;
 	/* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-background-interactive-error-active: #fff6f5;
+	/* Background color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-background-interactive-error-disabled: #0000;
 	/* Background color for interactive elements with error tone and strong emphasis. */
 	--wpds-color-background-interactive-error-strong: #cc1818;
 	/* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-background-interactive-error-strong-active: #b90000;
+	/* Background color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-background-interactive-error-strong-disabled: #e6e6e6;
 	/* Background color for interactive elements with error tone and weak emphasis. */
 	--wpds-color-background-interactive-error-weak: #0000;
 	/* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
 	--wpds-color-background-interactive-error-weak-active: #f6e6e3;
+	/* Background color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-background-interactive-error-weak-disabled: #0000;
 	/* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
 	--wpds-color-background-track-neutral-weak: #f0f0f0;
 	/* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
@@ -141,18 +151,26 @@
 	--wpds-color-foreground-interactive-brand: #3858e9;
 	/* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-foreground-interactive-brand-active: #3858e9;
+	/* Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-foreground-interactive-brand-disabled: #8d8d8d;
 	/* Foreground color for interactive elements with brand tone and strong emphasis. */
 	--wpds-color-foreground-interactive-brand-strong: #eff0f2;
 	/* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-foreground-interactive-brand-strong-active: #eff0f2;
+	/* Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-foreground-interactive-brand-strong-disabled: #8d8d8d;
 	/* Foreground color for interactive elements with error tone and normal emphasis. */
 	--wpds-color-foreground-interactive-error: #cc1818;
 	/* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-foreground-interactive-error-active: #cc1818;
+	/* Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-foreground-interactive-error-disabled: #8d8d8d;
 	/* Foreground color for interactive elements with error tone and strong emphasis. */
 	--wpds-color-foreground-interactive-error-strong: #f2efef;
 	/* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-foreground-interactive-error-strong-active: #f2efef;
+	/* Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-foreground-interactive-error-strong-disabled: #8d8d8d;
 	/* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-neutral: #dbdbdb;
 	/* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
@@ -191,12 +209,18 @@
 	--wpds-color-stroke-interactive-brand: #3858e9;
 	/* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
 	--wpds-color-stroke-interactive-brand-active: #2337c8;
+	/* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-stroke-interactive-brand-disabled: #dbdbdb;
 	/* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
 	--wpds-color-stroke-interactive-error: #cc1818;
 	/* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
 	--wpds-color-stroke-interactive-error-active: #9d0000;
+	/* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-stroke-interactive-error-disabled: #dbdbdb;
 	/* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
 	--wpds-color-stroke-interactive-error-strong: #cc1818;
+	/* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
+	--wpds-color-stroke-interactive-error-strong-disabled: #dbdbdb;
 	/* Accessible stroke color applied to focus rings. */
 	--wpds-color-stroke-focus: #3858e9;
 	/* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */

packages/theme/src/prebuilt/js/design-token-fallbacks.mjs

@@ -18,15 +18,20 @@ export default {
 		'var(--wp-admin-theme-color, #3858e9)',
 	'--wpds-color-background-interactive-brand-strong-active':
 		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)',
+	'--wpds-color-background-interactive-brand-strong-disabled': '#e6e6e6',
 	'--wpds-color-background-interactive-brand-weak': '#0000',
 	'--wpds-color-background-interactive-brand-weak-active':
 		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)',
+	'--wpds-color-background-interactive-brand-weak-disabled': '#0000',
 	'--wpds-color-background-interactive-error': '#0000',
 	'--wpds-color-background-interactive-error-active': '#fff6f5',
+	'--wpds-color-background-interactive-error-disabled': '#0000',
 	'--wpds-color-background-interactive-error-strong': '#cc1818',
 	'--wpds-color-background-interactive-error-strong-active': '#b90000',
+	'--wpds-color-background-interactive-error-strong-disabled': '#e6e6e6',
 	'--wpds-color-background-interactive-error-weak': '#0000',
 	'--wpds-color-background-interactive-error-weak-active': '#f6e6e3',
+	'--wpds-color-background-interactive-error-weak-disabled': '#0000',
 	'--wpds-color-background-interactive-neutral-strong': '#2d2d2d',
 	'--wpds-color-background-interactive-neutral-strong-active': '#1e1e1e',
 	'--wpds-color-background-interactive-neutral-strong-disabled': '#e6e6e6',
@@ -73,12 +78,16 @@ export default {
 		'var(--wp-admin-theme-color, #3858e9)',
 	'--wpds-color-foreground-interactive-brand-active':
 		'var(--wp-admin-theme-color, #3858e9)',
+	'--wpds-color-foreground-interactive-brand-disabled': '#8d8d8d',
 	'--wpds-color-foreground-interactive-brand-strong': '#fff',
 	'--wpds-color-foreground-interactive-brand-strong-active': '#fff',
+	'--wpds-color-foreground-interactive-brand-strong-disabled': '#8d8d8d',
 	'--wpds-color-foreground-interactive-error': '#cc1818',
 	'--wpds-color-foreground-interactive-error-active': '#cc1818',
+	'--wpds-color-foreground-interactive-error-disabled': '#8d8d8d',
 	'--wpds-color-foreground-interactive-error-strong': '#f2efef',
 	'--wpds-color-foreground-interactive-error-strong-active': '#f2efef',
+	'--wpds-color-foreground-interactive-error-strong-disabled': '#8d8d8d',
 	'--wpds-color-foreground-interactive-neutral': '#1e1e1e',
 	'--wpds-color-foreground-interactive-neutral-active': '#1e1e1e',
 	'--wpds-color-foreground-interactive-neutral-disabled': '#8d8d8d',
@@ -92,9 +101,12 @@ export default {
 		'var(--wp-admin-theme-color, #3858e9)',
 	'--wpds-color-stroke-interactive-brand-active':
 		'color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black)',
+	'--wpds-color-stroke-interactive-brand-disabled': '#dbdbdb',
 	'--wpds-color-stroke-interactive-error': '#cc1818',
 	'--wpds-color-stroke-interactive-error-active': '#9d0000',
+	'--wpds-color-stroke-interactive-error-disabled': '#dbdbdb',
 	'--wpds-color-stroke-interactive-error-strong': '#cc1818',
+	'--wpds-color-stroke-interactive-error-strong-disabled': '#dbdbdb',
 	'--wpds-color-stroke-interactive-neutral': '#8d8d8d',
 	'--wpds-color-stroke-interactive-neutral-active': '#6e6e6e',
 	'--wpds-color-stroke-interactive-neutral-disabled': '#dbdbdb',