Repository navigation
Experiment: restyle classic wp-admin controls from design system tokens #82425
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.
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
+1,824
−2
Merged
Changes from all commits
Commits
Show all changes
26 commits
Select commit
Hold shift + click to select a range
2c36431
Add an experiment that restyles wp-admin from design system tokens
jasmussen 15d7d34
Grey the dropdown arrow on aria-disabled selects
jasmussen 311e41b
Let form controls inherit their font size
jasmussen 96e9e33
Load the restyle stylesheets in filename order
jasmussen e35fa8a
Leave the media handle undemoted
jasmussen 40c56ef
Name the experiment for what it does
jasmussen 81df8dd
Name the harness for what it shows
jasmussen 6b1606b
Use the design system's field background and placeholder tokens
jasmussen ff4a281
Scope disabled field styles to text-like inputs
jasmussen a056b6f
Give invalid fields an error-coloured focus ring
jasmussen e1ce4e9
Keep grouped buttons joined
jasmussen 6bcceca
Stop aria-disabled harness specimens from responding to input
jasmussen 071f5ca
Update @since tags to 24.1.0
jasmussen 3bfc605
Derive design tokens for each admin colour scheme
jasmussen c417b95
Pair button and checkbox colours as the design system does
jasmussen cd72bbf
Show a selected button in the harness's button groups
jasmussen 057fcfb
Move the scheme token generator into the monorepo tools workspace
jasmussen fd36080
Describe the experiment without calling the admin classic or Core
jasmussen 40349df
Read the admin colour schemes from admin-ui instead of a copied list
jasmussen d26d84e
Declare the scheme token generator's package dependencies
jasmussen 02ae43a
Move the experiment's stylelint rules into the shared config
jasmussen 31bbb3a
Add a changelog entry for the admin-ui scheme map export
jasmussen 79dc2f8
Address feedback
jasmussen 38f0bc7
Take tokens for the button metrics, and fix two control inconsistencies
jasmussen 160d036
Say in the experiment description that it is not for live sites
jasmussen 49cccdf
Fix the demoted URL escaping, the colour scheme preview and a harness…
jasmussen File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| /** | ||
| * Design tokens for each bundled admin colour scheme. | ||
| * | ||
| * GENERATED FILE. Do not edit. Regenerate with: | ||
| * | ||
| * npm run wpds:admin-scheme-tokens --workspace @wordpress/monorepo-tools | ||
| * | ||
| * React admin screens derive these values at runtime through ThemeProvider. | ||
| * PHP-rendered screens have no provider, so without this file every token | ||
| * would keep the default scheme's value, and scheme-coloured controls would | ||
| * pair the scheme's background with text chosen for the default blue. Only | ||
| * tokens that differ from the default scheme are listed. | ||
| * | ||
| * Setting `--wpds-*` properties is reserved for the theme package. | ||
| * | ||
| * DELETE WHEN: `@wordpress/theme` can generate these tokens outside React and | ||
| * wp-admin loads them for the active colour scheme, which will also need to | ||
| * cover custom colour seeds (Core-66026, Core-65776). | ||
| */ | ||
|
|
||
| /* stylelint-disable plugin-wpds/no-setting-wpds-custom-properties -- Generated equivalent of ThemeProvider's runtime output. */ | ||
|
|
||
| @layer wpds-overrides, wp-legacy, wpds; | ||
|
|
||
| @layer wpds { | ||
| body.admin-color-fresh, | ||
| body.admin-color-light { | ||
| --wpds-color-background-interactive-brand-strong: #007cba; | ||
| --wpds-color-background-interactive-brand-strong-active: #006daa; | ||
| --wpds-color-background-interactive-brand-weak-active: #daecfb; | ||
| --wpds-color-background-surface-brand: #e4f2fd; | ||
| --wpds-color-background-thumb-brand: #0073b0; | ||
| --wpds-color-background-thumb-brand-active: #0073b0; | ||
| --wpds-color-foreground-interactive-brand: #0073b0; | ||
| --wpds-color-foreground-interactive-brand-active: #002041; | ||
| --wpds-color-foreground-interactive-brand-strong: #fff; | ||
| --wpds-color-foreground-interactive-brand-strong-active: #fff; | ||
| --wpds-color-stroke-focus: #0073b0; | ||
| --wpds-color-stroke-interactive-brand: #0073b0; | ||
| --wpds-color-stroke-interactive-brand-active: #00558f; | ||
| --wpds-color-stroke-surface-brand: #a6c7e1; | ||
| --wpds-color-stroke-surface-brand-strong: #0073b0; | ||
| } | ||
|
|
||
| body.admin-color-midnight { | ||
| --wpds-color-background-interactive-brand-strong: #cf4339; | ||
| --wpds-color-background-interactive-brand-strong-active: #bf332b; | ||
| --wpds-color-background-interactive-brand-weak-active: #f8e5e2; | ||
| --wpds-color-background-surface-brand: #fbecea; | ||
| --wpds-color-background-thumb-brand: #c63a31; | ||
| --wpds-color-background-thumb-brand-active: #c63a31; | ||
| --wpds-color-foreground-interactive-brand: #c63a31; | ||
| --wpds-color-foreground-interactive-brand-active: #470000; | ||
| --wpds-color-foreground-interactive-brand-strong: #fefdfd; | ||
| --wpds-color-foreground-interactive-brand-strong-active: #fefdfd; | ||
| --wpds-color-stroke-focus: #c63a31; | ||
| --wpds-color-stroke-interactive-brand: #c63a31; | ||
| --wpds-color-stroke-interactive-brand-active: #a41111; | ||
| --wpds-color-stroke-surface-brand: #e0bab4; | ||
| --wpds-color-stroke-surface-brand-strong: #c63a31; | ||
| } | ||
|
|
||
| body.admin-color-coffee { | ||
| --wpds-color-background-interactive-brand-strong: #916745; | ||
| --wpds-color-background-interactive-brand-strong-active: #835a38; | ||
| --wpds-color-background-interactive-brand-weak-active: #f8e6d9; | ||
| --wpds-color-background-surface-brand: #fbede2; | ||
| --wpds-color-background-thumb-brand: #8e6442; | ||
| --wpds-color-background-thumb-brand-active: #8e6442; | ||
| --wpds-color-foreground-interactive-brand: #8e6442; | ||
| --wpds-color-foreground-interactive-brand-active: #361300; | ||
| --wpds-color-foreground-interactive-brand-strong: #f7f5f4; | ||
| --wpds-color-foreground-interactive-brand-strong-active: #f7f5f4; | ||
| --wpds-color-stroke-focus: #8e6442; | ||
| --wpds-color-stroke-interactive-brand: #8e6442; | ||
| --wpds-color-stroke-interactive-brand-active: #704827; | ||
| --wpds-color-stroke-surface-brand: #dcbda4; | ||
| --wpds-color-stroke-surface-brand-strong: #8e6442; | ||
| } | ||
|
|
||
| body.admin-color-ocean { | ||
| --wpds-color-background-interactive-brand-strong: #567958; | ||
| --wpds-color-background-interactive-brand-strong-active: #496b4b; | ||
| --wpds-color-background-interactive-brand-weak-active: #d0f4d2; | ||
| --wpds-color-background-surface-brand: #ddf7de; | ||
| --wpds-color-background-thumb-brand: #537655; | ||
| --wpds-color-background-thumb-brand-active: #537655; | ||
| --wpds-color-foreground-interactive-brand: #537655; | ||
| --wpds-color-foreground-interactive-brand-active: #042609; | ||
| --wpds-color-foreground-interactive-brand-strong: #f5f8f5; | ||
| --wpds-color-foreground-interactive-brand-strong-active: #f5f8f5; | ||
| --wpds-color-stroke-focus: #537655; | ||
| --wpds-color-stroke-interactive-brand: #537655; | ||
| --wpds-color-stroke-interactive-brand-active: #385a3b; | ||
| --wpds-color-stroke-surface-brand: #a2cfa4; | ||
| --wpds-color-stroke-surface-brand-strong: #537655; | ||
| } | ||
|
|
||
| body.admin-color-blue { | ||
| --wpds-color-background-interactive-brand-strong: #437aa8; | ||
| --wpds-color-background-interactive-brand-strong-active: #356c99; | ||
| --wpds-color-background-interactive-brand-weak-active: #dfebf7; | ||
| --wpds-color-background-surface-brand: #e8f1fa; | ||
| --wpds-color-background-thumb-brand: #3b729f; | ||
| --wpds-color-background-thumb-brand-active: #3b729f; | ||
| --wpds-color-foreground-interactive-brand: #3b729f; | ||
| --wpds-color-foreground-interactive-brand-active: #001f46; | ||
| --wpds-color-foreground-interactive-brand-strong: #fff; | ||
| --wpds-color-foreground-interactive-brand-strong-active: #fff; | ||
| --wpds-color-stroke-focus: #3b729f; | ||
| --wpds-color-stroke-interactive-brand: #3b729f; | ||
| --wpds-color-stroke-interactive-brand-active: #1d5581; | ||
| --wpds-color-stroke-surface-brand: #afc6db; | ||
| --wpds-color-stroke-surface-brand-strong: #3b729f; | ||
| } | ||
|
|
||
| body.admin-color-ectoplasm { | ||
| --wpds-color-background-interactive-brand-strong: #646c3e; | ||
| --wpds-color-background-interactive-brand-strong-active: #575f31; | ||
| --wpds-color-background-interactive-brand-weak-active: #e4f2a2; | ||
| --wpds-color-background-surface-brand: #e9f8a7; | ||
| --wpds-color-background-thumb-brand: #646c3e; | ||
| --wpds-color-background-thumb-brand-active: #646c3e; | ||
| --wpds-color-foreground-interactive-brand: #646c3e; | ||
| --wpds-color-foreground-interactive-brand-active: #1c2100; | ||
| --wpds-color-foreground-interactive-brand-strong: #eff2e3; | ||
| --wpds-color-foreground-interactive-brand-strong-active: #eff2e3; | ||
| --wpds-color-stroke-focus: #646c3e; | ||
| --wpds-color-stroke-interactive-brand: #646c3e; | ||
| --wpds-color-stroke-interactive-brand-active: #495023; | ||
| --wpds-color-stroke-surface-brand: #b7c090; | ||
| --wpds-color-stroke-surface-brand-strong: #646c3e; | ||
| } | ||
|
|
||
| body.admin-color-sunrise { | ||
| --wpds-color-background-interactive-brand-strong: #ad631e; | ||
| --wpds-color-background-interactive-brand-strong-active: #9e5505; | ||
| --wpds-color-background-interactive-brand-weak-active: #fbe5d5; | ||
| --wpds-color-background-surface-brand: #feecdf; | ||
| --wpds-color-background-thumb-brand: #a35a10; | ||
| --wpds-color-background-thumb-brand-active: #a35a10; | ||
| --wpds-color-foreground-interactive-brand: #a35a10; | ||
| --wpds-color-foreground-interactive-brand-active: #371100; | ||
| --wpds-color-foreground-interactive-brand-strong: #fff; | ||
| --wpds-color-foreground-interactive-brand-strong-active: #fff; | ||
| --wpds-color-stroke-focus: #a35a10; | ||
| --wpds-color-stroke-interactive-brand: #a35a10; | ||
| --wpds-color-stroke-interactive-brand-active: #843d00; | ||
| --wpds-color-stroke-surface-brand: #e3ba9c; | ||
| --wpds-color-stroke-surface-brand-strong: #a35a10; | ||
| } | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure about the use of layering here. None of what we do today in
design-tokens.cssorThemeProviderdeals with layers. We've treated layers as a concern of@wordpress/ui, not@wordpress/theme.I also don't think these layers are valid, unless I'm missing something. Particularly
wpds-overrides, which I expect may be referring to the nestedwpds.overrides.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good stuff, and you're right. The layer buys nothing, and it shouldn't imply that
@wordpress/themehas a layering model.On the names: wpds, wpds-overrides and wp-legacy are the experiment's own. That you read wpds-overrides as a nested overrides layer tells me the naming is misleading, so I'll rename them to something unmistakably local, such as admin-tokens, admin-legacy and admin-tokens-overrides. Open to suggestions.
Why the other stylesheets are layered at all: it isn't an extension of the design system's layering, it's how the experiment reaches wp-admin's stylesheets from a plugin. Unlayered CSS beats layered CSS, so wp-admin's own sheets are imported into a lower layer and ours sit above, which also keeps unlayered plugin CSS winning over both. It's scaffolding, and it goes away when these styles move into WordPress itself.
I'll make both changes after #83114 lands, since it touches the same file and the generator. OR, feel free to push and commit directly to this branch if you prefer.
I want to convey that I'm laissez faire about this branch and experiment: it exists to serve a purpose which is to validate and test tokens in the admin. But the actual PRs to bring tokens to the admin are not this PR, but separate individual PRs to wp-develop, where we can point to this branch or experiment as a first testbed to validate the safety and contrast benefits. Is that fair?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Depending on your own timelines, it might be better to keep #83114 separate from this one. Since that adds a new API, I think it'll need a thorough vetting before we choose to land it. It might also be something we end up adding as a private API so we can shake out any issues with the approach before it becomes available in a stable WordPress release (including this experiment itself as part of that validation work).
I still don't know that I'm entirely sold on the use of layers, or maybe I'm not fully following the approach. My hunch is that we could solve this without layering via either selector specificity or stylesheet load order.