[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:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:
  Focuses:  ui, css         |
----------------------------+-----------------------------
 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>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform