Admin Reskin: Update button and input field styling to align with WordPress Design System

[fabiankaegy]

This ticket covers the visual reskin of buttons and input fields in wp-admin as part of the WordPress 7.0 admin visual refresh (#64308).

Why This Matters

Buttons and input fields are the most common interactive elements in wp-admin. Consistent styling improves usability, reduces cognitive load, and makes older screens feel closer to the editor experience users already know.

Why Buttons and Inputs Are Grouped

These two components frequently appear adjacent to one another in the admin interface:

• Search boxes with submit buttons
• Bulk action dropdowns with Apply buttons
• Settings pages with text inputs and Save Changes buttons
• Password fields with toggle buttons

Updating the height or density of one component without the other creates visual misalignment. This ticket addresses both together to ensure a cohesive result.

Proposed Scope

Buttons:

• Primary, secondary, tertiary, and link buttons
• Destructive variants
• All interactive states (default, hover, focus, active, disabled)

Inputs:

• Text inputs, URL, email, password, number, search
• Select dropdowns and textareas
• Checkboxes and radio buttons
• Disabled and readonly states

Key Principles

• CSS-Only Changes: No markup or JavaScript modifications
• Backward Compatibility: All existing selectors and admin color schemes preserved
• Design System Alignment: Heights, spacing, and focus treatment aligned with Gutenberg components
• Accessibility: Focus rings visible at all zoom levels, proper contrast ratios maintained

What This Is NOT

• No new CSS custom properties
• No changes to functional behavior (validation, keyboard interactions)
• No selector removals or renames

Testing Approach

Test in real admin workflows across multiple screens:

• Dashboard widgets and bulk actions
• Settings pages (General, Reading, Discussion)
• Plugin search and install
• Post editor meta boxes

Verify in at least two color schemes (modern and light), at 100% and 200% zoom, and in RTL layout.

Related Resources

• Parent ticket: #64308
• Figma: ​https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-System?node-id=16507-33913
• Gutenberg Storybook: ​https://wordpress.github.io/gutenberg/?path=/docs/components-button--docs

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

[Joen]

Thanks for this work. Designwise, I support this, and appreciate that this is not a new custom properties effort: those become public APIs to support forever which needs an extremely carefully considered approach. And at the same time, this effort does not preclude a color system modernization happening in the future, it's just CSS to modernize and make uniform the work.

I'm a bit short for time on testing, are there screenshots or visuals to aid that process? Otherwise I'll try and come back when I have a moment.

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/

[audrasjb]

Hi there,
I tested this changeset on each admin screen on both dsektop and small screens, then I installed a few popular plugins like Classic Editor, CF7, Redirection, SCF, and others. Globally notifices are OK.

I didn't find any accessibility issue as well.

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.

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

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

[karmatosed]

Coming in to support this design wise and to say that even in testing initially the only hitch was around compact which I suspected was going to happen based on previous explorations:

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.

This would also be my recommendation.

The media modal 'edit image' button might be another candidate for a compact button. Otherwise, it can land uncomfortably close to the bottom of the modal.

'Move to trash' is out of alignment with Update in the classic editor.

Attachment display settings have new borders, but the other media modal fields don't.

Alignment issue in theme selector in customizer:

Search icon alignment in customizer

Larger input size causing overflow in customizer menus

Publish button overflow in customizer

Search themes misalignment (installed)

Classic widgets pushed out of alignment

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

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

Same with the link's color here.

Thanks!

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.

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

@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.

[magaliechetrit]

Hello hello, to help Fabian and all of us out, I have started a spreadsheet of the issues reported. But since it is becoming quite time consuming to check each issue in regards to status I am offering the spreadsheet here: ​https://docs.google.com/spreadsheets/d/1WtgYvtqP7nYV-n_DjKe2w8bPnIsooPHoGU4617ND_8g/edit?usp=sharing Feel free to look through the spreadsheet to see if any screen or area has been checked.

Keep in mind that I am first of all just copy pasting all comments and reorganizing the columns on the fly as it makes sense.
Am open to help or input!

[poojapadamad]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/10783.diff

Environment

• WordPress: 7.0-alpha-20260211.193508
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 144.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Actual Results

• Dashboard widgets and bulk actions✅
• Settings pages (General, Reading, Discussion)✅
• Plugin search and install✅
• Post editor meta boxes✅

Issue noticed:
In the Media Library, when List View is selected, the "Filter" button appears smaller than the "All media items" button.

Screenshots is attached for reference:

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

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'm marking this for commit. While I fully expect we'll continue to find issues through the beta and RC window, I think everything is far enough along that we'll be more productive getting a broader look in core holistically.

Taking ownership to help guide it, but I'll leave it to @fabiankaegy to handle commit, unless he wants to pass it on.

[fabiankaegy]

In 61645:

Admin: Update button and form field styles to align with the design system.

Introduce a design system tokens file (_tokens.scss) based on the WordPress Design System, providing standardized values for colors, spacing, typography, border-radius, and elevation.

Update buttons to use CSS custom properties for theme color support across all admin color schemes. Restyle primary buttons with filled theme-color backgrounds, secondary buttons with outlined borders, and add a tertiary button mixin. Adopt Gutenberg-style focus rings with outset box-shadows and transparent outlines for Windows High Contrast mode compatibility.

Increase default input and select height from 30px to 40px, apply 2px border-radius, and update border and placeholder colors to match the design system. Restyle checkboxes and radios with filled theme-color checked states and white indicator marks, using outset double-ring focus styles consistent with Gutenberg.

Apply compact 32px sizing to list table controls, page-title-action buttons, and toolbar elements. Convert tag input layouts and the major-publishing-actions bar to flexbox.

Props fabiankaegy, joedolson, audrasjb, joen, phpbits, magaliechetrit, karmatosed.
Fixes #64547.

[peterwilsoncc]

A git bisect shows that this commit broke the login button and checkbox on the login form, including the screens in the reset password flow. See the screenshot above. It also broke the button on the db upgrade screen.

I've reopened the ticket to investigate:

• WordPress: 7.0-alpha-61645
• Installation type: ​WordPress installed in a sub-directory
• PHP: 8.4.16
• Server: nginx/1.18.0
• Database: mysqli (Server: 8.0.36-0ubuntu0.22.04.1 / Client: mysqlnd 8.4.16)
• Browser: Firefox 147.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins:
  • _qm-mappings.php
• Plugins:
  • Query Monitor 3.19.0
  • Test Reports 1.2.1

[joedolson]

@peterwilsoncc See also https://core.trac.wordpress.org/ticket/64640

[peterwilsoncc]

@joedolson Thanks Joe, I missed that ticket. I'll reclose this for work to continue on the follow up.

[Otto42]

Additional note: the addition of display:flex to #major-publish-actions has caused us some issues with the photo directory. In particular some of the actions we added to do that work has gone wonky.

We can override the styling, but I'm wondering if this was intended. And if so, what about back compatibility? Might need some additional design work here.

[joedolson]

To some degree, getting this shipped in beta is a way to find out the scope of issues like this. I'm not sure we can give a lot of thought to back compat issues like this; where would we draw the line? The color changes themselves are going to be a back compat issue for some extenders. To me, this falls within a reasonable scope of what we might expect an extender to adapt for.

The feature isn't broken; it just looks weird.

[Otto42]

Replying to joedolson:

The feature isn't broken; it just looks weird.

Well, I mean, you're not wrong, however that's not the way users will see it. The functionality still works fine, but you had to scroll to the side in the browser to use it, which it did not have a scroll bar for. Basically you had to know how to use your browser to see that part of the screen and click thing theres because it was overflowing the screen.

And while all the functionality still continue to work, it was impossible to use to the point that the people that we expect to use it couldn't figure out how to use it. Thus the complaints and us having to figure out WTF happened.

We fixed it already in the plugins necessary, it was an easy fix, however, this is going to cause breakage and you need to be prepared to deal with that.if you're only depending on beta, you're not going to find it out. This will absolutely cause breaking changes only when 7.0 is released, for a whole lot of plugins.

In other words, if you want to release something like this, which clearly breaks the admin screens for a lot of things, then you really need to push a lot more plugins to test and fix the problems beforehand. This is a MAJOR, and MASSIVE, breaking change. You cannot depend on minor announcements to get it fixed beforehand. Basically, you have to set up your game on this one.