Theme: Add disabled variants for brand and error interactive color tokens#79124
Conversation
|
Size Change: +151 B (0%) Total Size: 8.58 MB 📦 View Changed
|
|
Flaky tests detected in 8ee8bfc. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27578962689
|
ciampo
force-pushed
the
add/theme-interactive-brand-error-disabled-tokens
branch
from
5aea0e7 to
e71b55f
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
force-pushed
the
add/theme-interactive-brand-error-disabled-tokens
branch
from
b7d8f6c to
87225b1
Compare
aduth
left a comment
aduth
left a comment
There was a problem hiding this comment.
LGTM 👍 Importantly I think this detaches semantics from styling in a way that's true to how we structure tokens and avoids tying ourselves incidentally to "gray" as disabled in case we want to change course on that styling in the future.
|
This tokens naming consistency work had me thinking again about the AI agent confusion I mentioned in #78438 (comment). Is there a similar case to be made about adding a "duplicate" |
…kens 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).
…in consumers Now that brand/error tones have their own disabled tokens, reword the disabled `$description`s to be tone-specific (dropping "regardless of the tone" from the neutral ones, which was the shared-disabled rationale). Update the `Button` (brand) and `AlertDialog` (error) disabled states to reference the matching tone-specific disabled tokens instead of reaching into the `neutral` namespace. Values are identical, so there is no visual change. `item-popup` is left on `neutral-disabled`: its disabled color applies to the item text, which is neutral-toned in every state (only the highlight background is brand-toned, and disabled items are never highlighted).
The disabled item background is brand-toned (the highlight uses `brand-weak-active`). Reference `background-interactive-brand-weak-disabled` explicitly so the disabled state stays in sync if the token value ever changes, even though it currently resolves to transparent. The item text remains neutral-toned.
The neutral stroke tone exposes only a normal-emphasis disabled token (no strong-emphasis disabled variant), so the error tone should match. Removes the unused strong-emphasis disabled stroke token and regenerates the prebuilt artifacts and docs.
|
The disabled list-item background in Select/Autocomplete/Combobox is a newly added declaration, not a swap of an existing neutral token.
Several interactive background tokens (the weak/normal and disabled variants for the neutral, brand, and error tones) repeated the same inline fully-transparent value. Extract it into a shared `primitive.transparent` token and reference it, mirroring how the other disabled tokens already alias primitives. Internal-only: primitives are not emitted as custom properties, so there is no public API or resolved-value change.
ciampo
force-pushed
the
add/theme-interactive-brand-error-disabled-tokens
branch
from
1f850ec to
8ee8bfc
Compare
2 participants
What?
Addresses point T-M5 of #77462.
Adds
disabledvariants for thebrandanderrortones across the interactive color tokens (background,foreground,stroke), for parity with the existingneutraldisabled tokens, and adopts them in theButton,AlertDialog, andSelect/Autocomplete/Comboboxcomponents.New tokens
background.interactive--wpds-color-background-interactive-brand-strong-disabled--wpds-color-background-interactive-brand-weak-disabled--wpds-color-background-interactive-error-disabled--wpds-color-background-interactive-error-strong-disabled--wpds-color-background-interactive-error-weak-disabledforeground.interactive--wpds-color-foreground-interactive-brand-disabled--wpds-color-foreground-interactive-brand-strong-disabled--wpds-color-foreground-interactive-error-disabled--wpds-color-foreground-interactive-error-strong-disabledstroke.interactive--wpds-color-stroke-interactive-brand-disabled--wpds-color-stroke-interactive-error-disabledWhy?
disabledvariants existed only for theneutraltone, so a disabledbrand/errorelement had to borrow theneutraltoken. These parity tokens let each tone reference its own disabled state. The values match the correspondingneutraldisabled values, so there is no visual change. The stroke set mirrorsneutral, which exposes only a normal-emphasis disabled stroke (no strong-emphasis variant).How?
Testing Instructions