Admin Reskin: Update card and metabox styling to align with WordPress Design System

[fabiankaegy]

This ticket covers the visual reskin of cards, metaboxes, and dashboard widgets in wp-admin as part of the WordPress 7.0 admin visual refresh (#64308).

Why This Matters

Cards, metaboxes, and dashboard widgets are the primary layout containers across wp-admin. They appear on the Dashboard, in the post editor, on plugin and theme screens, and throughout settings pages. Container styling influences the entire perceived quality of the admin interface.

Updating these surfaces creates a strong sense of cohesion between older admin screens and newer block editor interfaces while preserving all existing markup and behavior.

Proposed Scope

Container types:

• Postboxes and metaboxes (.postbox)
• Dashboard widgets
• Welcome panel
• Plugin cards (Plugins > Add New)
• Theme cards (Appearance > Themes)
• Generic boxed sections that behave like cards

Styling updates:

• Surface background and borders
• Border radius (rounded corners for dashboard, square for metaboxes)
• Header and divider styling
• Internal padding and spacing

Key Principles

• CSS-Only Changes: No markup or JavaScript modifications
• Backward Compatibility: All existing selectors preserved, collapse and drag-drop behavior unchanged
• Subtle Refinement: White backgrounds with subtle borders create a clean, modern appearance
• Accessibility: Collapse toggle buttons retain visible focus states

What This Is NOT

• No changes to collapse behavior or drag-and-drop interactions
• No new CSS custom properties for surfaces, borders, or elevation
• No changes to markup structure

Testing Approach

Test cards in screens where they are heavily used:

• Dashboard (Quick Draft, At a Glance, Activity widgets)
• Post editor metaboxes (Publish, Categories, Tags)
• Plugins > Add New (plugin card grid)
• Appearance > Themes (theme card grid)
• Widgets screen

Verify collapsed states, drag-and-drop reordering, and focus states on toggle buttons. Test in at least two color schemes (modern and light).

Related Resources

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

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