Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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 Aug 28, 2026
15d7d34
Grey the dropdown arrow on aria-disabled selects
jasmussen Aug 28, 2026
311e41b
Let form controls inherit their font size
jasmussen Aug 28, 2026
96e9e33
Load the restyle stylesheets in filename order
jasmussen Sep 3, 2026
e35fa8a
Leave the media handle undemoted
jasmussen Sep 4, 2026
40c56ef
Name the experiment for what it does
jasmussen Sep 4, 2026
81df8dd
Name the harness for what it shows
jasmussen Sep 4, 2026
6b1606b
Use the design system's field background and placeholder tokens
jasmussen Sep 16, 2026
ff4a281
Scope disabled field styles to text-like inputs
jasmussen Sep 16, 2026
a056b6f
Give invalid fields an error-coloured focus ring
jasmussen Sep 16, 2026
e1ce4e9
Keep grouped buttons joined
jasmussen Sep 16, 2026
6bcceca
Stop aria-disabled harness specimens from responding to input
jasmussen Sep 16, 2026
071f5ca
Update @since tags to 24.1.0
jasmussen Sep 16, 2026
3bfc605
Derive design tokens for each admin colour scheme
jasmussen Sep 16, 2026
c417b95
Pair button and checkbox colours as the design system does
jasmussen Sep 16, 2026
cd72bbf
Show a selected button in the harness's button groups
jasmussen Sep 16, 2026
057fcfb
Move the scheme token generator into the monorepo tools workspace
jasmussen Sep 17, 2026
fd36080
Describe the experiment without calling the admin classic or Core
jasmussen Sep 17, 2026
40349df
Read the admin colour schemes from admin-ui instead of a copied list
jasmussen Sep 17, 2026
d26d84e
Declare the scheme token generator's package dependencies
jasmussen Sep 17, 2026
02ae43a
Move the experiment's stylelint rules into the shared config
jasmussen Sep 17, 2026
31bbb3a
Add a changelog entry for the admin-ui scheme map export
jasmussen Sep 17, 2026
79dc2f8
Address feedback
jasmussen Sep 29, 2026
38f0bc7
Take tokens for the button metrics, and fix two control inconsistencies
jasmussen Sep 29, 2026
160d036
Say in the experiment description that it is not for live sites
jasmussen Sep 29, 2026
49cccdf
Fix the demoted URL escaping, the colour scheme preview and a harness…
jasmussen Oct 1, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Address feedback
  • Loading branch information
jasmussen committed Oct 1, 2026
commit 79dc2f898add706432f728bb8809709802de1d00
32 changes: 30 additions & 2 deletions lib/experimental/wpds-admin/css/10-button.css
Original file line number Diff line number Diff line change
Expand Up @@ -160,10 +160,17 @@
background: var(--wpds-color-background-interactive-brand-weak-active);
}

/* Hide the border while pressed, keeping its width so nothing shifts. */
/*
* Pressed takes the same border as hover. `@wordpress/ui` Button drives
* hover, active and focus from one `border-color-active` custom property,
* and the persistent `.active` rule below already uses that value, so an
* earlier `border-color: transparent` here was the only state in this file
* that dropped the edge — the button appeared to lose its outline for as
* long as the pointer was down.
*/
.wp-core-ui .button:active,
.wp-core-ui .button-secondary:active {
border-color: transparent;
border-color: var(--wpds-color-stroke-interactive-brand-active);
background: var(--wpds-color-background-interactive-brand-weak-active);
}

Expand All @@ -178,6 +185,27 @@
background: var(--wpds-color-background-interactive-brand-weak-active);
}

/* -----------------------------------------------------------------------
The page title action — appearance only

"Add Post" and its siblings are `<a class="page-title-action">` with no
`button` class, so none of the rules above reach them. They still look
like our buttons, because WordPress draws them with
`var(--wp-admin-theme-color)` and the scheme tokens now feed that — but
the weight stays WordPress's 500 while every real button is at the emphasis
token, which is the difference you see side by side in a list table header.

Only the weight is taken. WordPress gives this control `min-height: 40px`,
`line-height: 2.71428571` and `top: -3px` to sit it against the page
title, and adopting it properly means taking on that geometry — which is
the contextual sizing this experiment leaves alone on purpose. Covering
the control fully is a separate question; matching the weight is not.
----------------------------------------------------------------------- */

.wrap .page-title-action {
font-weight: var(--wpds-typography-font-weight-emphasis);
}

/* -----------------------------------------------------------------------
Primary — `@wordpress/ui` Button, brand tone, solid. The border takes
the background colour, as it does there.
Expand Down
17 changes: 16 additions & 1 deletion lib/experimental/wpds-admin/css/20-input.css
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,22 @@
* know what those contexts are. WordPress also handles the mobile case, raising
* inputs to 16px below 782px so iOS does not zoom on focus.
*/
line-height: 1;

/*
* `normal`, not `1`. The `@wordpress/ui` input primitive uses `line-height: 1`,
* but it sets it on a wrapper that lays out a separate inner `<input>`, where
* the text has room regardless. wp-admin has no wrapper: the declaration lands
* on the bare control, and a line box exactly as tall as the font is shorter
* than the font's own ascender-plus-descender, so descenders are clipped by the
* control's chrome — visibly on `<select>` in Firefox, and on number fields in
* Settings > Media.
*
* `normal` lets the font's metrics size the line box, which cannot clip, and
* unlike a pixel value it does not compete with the contextual heights
* WordPress sets per control. Worth raising against the primitive too: `1` is
* only safe there because of the markup around it.
*/
line-height: normal;
}

/* -----------------------------------------------------------------------
Expand Down