Admin Reskin: Buttons and Form Fields

[fabiankaegy]

Trac ticket: https://core.trac.wordpress.org/ticket/64547

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

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 props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props fabiankaegy, joedolson, audrasjb, joen, phpbits, magaliechetrit.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[audrasjb]

Hi @fabiankaegy,
This looks globally good to me.
I tested this PR on a fresh install, and I went into each individual admin screen, on both desktop and small screen views.
This looks almost good to me, I only found a few glitches:

Media Library vertical misalignment

Settings vertical misalignement on lists

Then I tested a few popular plugins, like Classic Editor, CF7, Redirection, SCF, and others. Globally settings pages are OK, I only found a few glitches, like:

Alignement bug on Visual/Code tabs on Classic Editor

Alignement bug on Redirection filters

More tests on popular plugins are welcome.
For example: back in the years, here is the list of plugins I tested when we shipped the Admin Accessible Redesign in WordPress 5.3: https://make.wordpress.org/core/2019/10/15/report-wp-5-3-admin-css-changes-tested-against-top-20-plugins/

[jasmussen]

From Jb's screenshots above, one note I'd add is that you can use either the 32px or 40px height for most of the controls, e.g. try the "compact" view here. 32px may be a better fit for many of these.

[fabiankaegy]

Thanks @jasmussen :) You can view the full thing live here: https://playground.wordpress.net/wordpress.html?pr=10783

[jasmussen]

Oh yeah, nice one. These come to mind as benefitting from 32px compact sizes:

[fabiankaegy]

Thanks @audrasjb @jasmussen @joedolson :) I've taken all your great feedback and made modifications based on it 👍

[phpbits]

@fabiankaegy I am seeing some inconsistencies regarding the secondary button style here.

Same with the link's color here.

Thanks!

[BluePraise]

1. In Users view, the "Change" button is too big.

2. Question: when we apply a new admin color scheme, should we see these changes too? @joedolson @fabiankaegy @karmatosed @audrasjb ? I've installed Twenty Nineteen theme for the next items: 3. Customizer > Site Identity: the buttons are a bit large. 4. Customizer, Menus > all add links options are badly aligned: 5. Customizer > Homepage Settings also a button that's too small.

[Copilot]

Pull request overview

Updates WordPress admin UI styles to match the “Admin Reskin” direction, primarily by adjusting button/input sizing, padding, colors, and introducing a Sass token source for consistent design values.

Changes:

• Resizes and restyles core admin buttons/inputs (40px default, 32px compact) and updates focus/disabled/active states.
• Adjusts layout/spacing in several admin screens (Media modal/toolbars, Themes cards/overlays, list tables, Customizer, nav menus).
• Adds a new Sass token module and updates color-scheme Sass mixins/admin rules to reference design tokens and (new) CSS custom properties.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/wp-includes/css/media-views.css	Updates Media modal input sizing, borders/colors, toolbar control sizing, and focus/disabled styles.
src/wp-includes/css/editor.css	Tweaks editor tab/button spacing.
src/wp-includes/css/buttons.css	Redefines button sizing (default 40px), adds compact size, updates states/colors, and dashicon alignment.
src/wp-admin/css/themes.css	Adjusts theme browser card actions button sizing and overlay/header spacing.
src/wp-admin/css/nav-menus.css	Changes button controls layout to flex for improved alignment.
src/wp-admin/css/media.css	Applies compact sizing to Media grid toolbar controls and edit-attachment buttons.
src/wp-admin/css/login.css	Adjusts login “hide password” dashicon positioning.
src/wp-admin/css/list-tables.css	Updates list-table nav/button sizing and dashicon vertical alignment.
src/wp-admin/css/forms.css	Updates global admin form field sizing, borders/colors, focus rings, and checkbox/radio styling.
src/wp-admin/css/dashboard.css	Updates dashboard textarea padding and removes a dashicon rule.
src/wp-admin/css/customize-nav-menus.css	Updates Customizer menu items search layout offsets and adds flex layout for control buttons.
src/wp-admin/css/customize-controls.css	Centers/realigns Customizer header actions and adjusts search field sizing/offsets.
src/wp-admin/css/common.css	Reskins page title action button sizing/layout and adjusts several toolbar/action layouts.
src/wp-admin/css/colors/_variables.scss	Imports tokens and switches body background to token-based gray.
src/wp-admin/css/colors/_tokens.scss	Introduces a centralized design token set (spacing/radius/colors/typography/etc).
src/wp-admin/css/colors/_mixins.scss	Reworks button mixins toward theme-color CSS custom properties and token-based radii/colors.
src/wp-admin/css/colors/_admin.scss	Updates scheme-driven admin styles for buttons/forms to use tokens and theme-color CSS custom properties.

Comments suppressed due to low confidence (1)

src/wp-admin/css/common.css:672

• .page-title-action is being restyled for the reskin, but it still hard-codes the legacy blue palette (#2271b1, #0a4b78, #3582c4) while buttons.css now uses #3858e9/new focus styling. This will make the “Add New” button visually inconsistent. Update these colors/focus styles to match the new button tokens (ideally using the same theme color variables/focus-ring width).

	border: 1px solid #2271b1;
	border-radius: 2px;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	min-height: 32px;
	line-height: 2.30769231; /* 30px for 32px height */
	color: #2271b1; /* use the standard color used for buttons */
	padding: 0 12px;
	-webkit-appearance: none;

}

.wrap .wp-heading-inline + .page-title-action {
	margin-left: 0;
}

.wrap .add-new-h2:hover, /* deprecated */
.wrap .page-title-action:hover {
	border-color: #0a4b78;
	color: #0a4b78;
}

/* lower specificity: color needs to be overridden by :hover and :active */
.page-title-action:focus {
	color: #0a4b78;
}

/* Dashicon for language options on General Settings and Profile screens */
.form-table th label[for="locale"] .dashicons,
.form-table th label[for="WPLANG"] .dashicons {
	margin-left: 5px;
}

.wrap .page-title-action:focus {
	border-color: #3582c4;
	box-shadow: 0 0 0 1px #3582c4;
	/* Only visible in Windows High Contrast mode */
	outline: 2px solid transparent;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

There are two input[type=checkbox]:checked::before rules back-to-back; the later one overrides the earlier variables.$form-checked version. This is dead code and makes it unclear which checkmark is intended. Remove the earlier rule (or consolidate into one) to avoid confusion and accidental reordering issues.

[fabiankaegy]

@phpbits @BluePraise thanks you two :) That was an oversight on my end. It now properly respects the admin scheme 👍

[BluePraise]

@fabiankaegy There seems to be an issue when I switch color schemes in Users. When I go from "Default" to any other color scheme and then back to "Default", I don't see the new reskin colors.

When researching the issue, I noticed in src/js/_enqueues/admin/user-profile.js around line 543-550 that it would be reset to "nothing". There is no stylesheet recreated.

I have looked in the Trac and could find no related issue to this since this may be unrelated to the reskin. However, it does impact the work of the reskin.

To recreate:

1. Navigate to Users > Profile
2. Switch color schemes to any color schemes
3. Go back to default color schemes.

I have pulled your latest work.

[fabiankaegy]

@BluePraise I'm not sure I understand the issue you describe.

The new color should only apply when the modern theme is applied. #10782 is responsible for changing the new default color scheme to be the modern one.

I had a mistake in the code earlier today where the modern color applied in all color schemes which is now fixed 👍

[joedolson]

The :focus state on button-link doesn't match the link focus state. See example in the row actions, where 'Quick Edit' is a button-link, but the other controls are links:

This could have effects throughout the admin, but it may also be resolved in another one of the design PRs, since this one is only addressing buttons/forms. I'm not totally sure. We're at a stage where it's pretty difficult to take all of the design refresh PRs into consideration in combination.

[joedolson]

I did find another possible issue, noted in comment, but I think the best choice is actually to commit this and get all of the design PRs merged, so we can start examining the admin with everything in place. While splitting this into discrete parts was helpful for dev and reducing the scope of review, it's now hitting a point where we need to address it holistically.

[github-actions]

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 61645
GitHub commit: 7c9a0d6

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.