Theme: Restructure theme tokens to embed prefix, flattened modifiers #73859
Conversation
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
|
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. |
|
Size Change: +370 B (+0.01%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
aduth
added
[Type] Task
Contributor
|
Importing the tokens is working for me. Is it expected that;
|
Member
Author
It's not my preference, but it is expected, yes. We can't really "hide" values when using the raw DTCG JSON like this.
This was somewhat surprising, but it does at least scope for valid fields for the type (i.e. can't use dimension values for colors). But yeah, this does regress slightly that it no longer scopes stroke colors to stroke fields, for example. Through some reverse-engineering, I know that Figma can support us controlling this, through additional extension values. Specifically, they have a
This is rather surprising, actually. Since we use the standard |
aduth
force-pushed
the
update/theme-dtcg-restructure-prefix
branch
from
ab6c2c3 to
eb3aa94
Compare
mirka
approved these changes
Dec 10, 2025
Member
mirka
left a comment
mirka
left a comment
There was a problem hiding this comment.
I'll leave it to the design folks on whether or not the (temporary?) feature regressions are acceptable, but code-wise this looks ok to me.
Member
Author
|
I'll be happy to address feedback asynchronously, but since this is a pretty large restructuring prone to merge conflicts (already had to reconcile #73793), I'm hesitant to leave this open longer than it needs to be and will plan to merge this as-is. To put some potential concerns at ease:
|
This was referenced Dec 10, 2025
Member
Author
Follow-up at #73897 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
Restructures design token JSON files to improve consistency of token structure and align to expected conventions:
Example:
color.semantic.bg-surface.neutral.resting➡️wpds-color.bg.surface.neutralcolor.semantic.fg.interactive.neutral.strong.active➡️wpds-color.fg.interactive.neutral-strong-activeBuilds on #73858
This is aimed at serving as an alternative to #73407, reflecting assumptions about how we want to represent tokens within the source tokens themselves.
Why?
How?
surface.neutral.resting, eliminating default states in the process (resting)Testing Instructions
Observe that there is no impact to
packages/theme/src/prebuilt/css/design-tokens.css(aside from code comment correction), even after runningnpm run --workspace @wordpress/theme build.Since this builds on #73858, optionally test how the resulting
color.jsonis imported into Figma if you have means to do so, where the resulting variables look like e.g.wpds-color/bg/interactive/neutral-strong-active.