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: