Base Styles: Reapply wpds-var Sass helper#79470
Draft
mirka wants to merge 1 commit into
Draft
Conversation
github-actions
Bot
added
[Package] Base styles
|
Size Change: +10.5 kB (+0.14%) Total Size: 7.52 MB 📦 View Changed
|
|
Flaky tests detected in 4a500d6. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/28080744102
|
aduth
reviewed
Jun 24, 2026
aduth
left a comment
aduth
left a comment
Member
There was a problem hiding this comment.
Another thought is if we could do some sort of pre-processing on base-styles so that the fallback values are injected into what's published as the _mixins.scss. That would allow us to reuse some of what already exists for wp-build instead of adding another. But I can see the value (as documented) in having something Sass specific for this.
Comment on lines
+184
to
+190
| /** | ||
| * Standard focus rings for the WordPress Design System. | ||
|
|
||
| * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | ||
| * e.g. `&:focus { @include outset-ring__focus(); }`. | ||
| */ | ||
|
|
Member
There was a problem hiding this comment.
Some extra newlines in here. (I'd at least expect the * if the newline was intentional within the comment)
Suggested change
| /** | |
| * Standard focus rings for the WordPress Design System. | |
| * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| */ | |
| /** | |
| * Standard focus rings for the WordPress Design System. | |
| * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| */ |
| The `@wordpress/theme/design-token-fallbacks` export provides a generated `wpds-var()` function that wraps token references with the same fallback map used by the build plugins — for example, `wpds.wpds-var('--wpds-color-fg-content-neutral')` compiles to `var(--wpds-color-fg-content-neutral, #1e1e1e)`. | ||
|
|
||
| ```scss | ||
| @use '@wordpress/theme/design-token-fallbacks' as wpds; |
Member
There was a problem hiding this comment.
Wonder if we'd find any value in generalizing this now to contain future utilities later, named accordingly (either as index or something like "design-tokens")? Like if they're already importing "as wpds", is this just the "wpds sass utilities" ? Maybe granularity is still useful there in a pick-and-choose sense.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Reapplies the
wpds-var()Sass helper work that was reverted in #79429.Why?
The helper is still needed so
@wordpress/base-stylesSass can compile design token references with fallback values in build environments that do not run the token fallback PostCSS plugin.This PR restores the original generated fallback map, Sass helper, base-styles mixin support, package dependency, tests, and docs. A follow-up stacked PR adjusts the public Sass entrypoint so consumers do not need to import from generated
src/prebuiltinternals.How?
Reverts the revert commit
3031bb0fa1398ee07778cfb36065a6e3950db5faon top of currenttrunk.Testing Instructions
npm run test:unit packages/theme/bin/terrazzo-plugin-ds-token-fallbacks/test.