[wp-trac] [WordPress Trac] #64547: Admin Reskin: Update button and input field styling to align with WordPress Design System

[WordPress Trac]

#64547: Admin Reskin: Update button and input field styling to align with WordPress
Design System
----------------------------+-------------------------------------
 Reporter:  fabiankaegy     |       Owner:  (none)
     Type:  enhancement     |      Status:  new
 Priority:  normal          |   Milestone:  7.0
Component:  Administration  |     Version:
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:  ui, accessibility, css
----------------------------+-------------------------------------
Changes (by sabernhardt):

 * focuses:  ui, css => ui, accessibility, css
 * milestone:  Awaiting Review => 7.0


Old description:

> 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

New description:

 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

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64547#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform