Make WordPress Core

Opened 4 months ago

Last modified 4 months ago

#65444 new defect (bug)

Align admin CSS border-radius values with design system tokens

Reported by: dervishov Owned by:
Priority: normal Milestone: Awaiting Review
Component: Administration Version:
Severity: normal Keywords: has-patch
Cc: Focuses: css

Description (last modified by sabernhardt)

Several admin CSS files use legacy border-radius values (3px, 5px, 9px, 10px, 11px) that don't match the design system scale defined in _tokens.scss (1px, 2px, 4px, 8px, 12px, 9999px).

This creates subtle visual inconsistency across the admin interface. For example, the customizer save button uses 3px while standard buttons use 2px, and admin menu notification badges use 9px while dashboard widgets use 8px.

The fix aligns all non-standard values to their nearest design token:

  • 3px → 2px (radius-s) — 10 locations
  • 5px → 4px (radius-m) — 3 locations
  • 9px → 8px (radius-l) — 1 location
  • 10px → 8px (radius-l) — 1 location
  • 11px → 12px (radius-30) — 1 location

7 files, 16 replacements. Differences are 1px, barely perceptible but bring the admin in line with the design system.

GitHub PR: ​https://github.com/WordPress/wordpress-develop/pull/12139

Change History (3)

#1 @sabernhardt
4 months ago

  • Description modified (diff)
  • Focuses css added
  • Version trunk → 7.0

#2 @jorbin
4 months ago

  • Version 7.0

I spot checked the first three suggested changes and none were introduced in the last 5 years, so removing 7.0 from the version.

#3 @tusharaddweb
4 months ago

Design system cleanup looks solid. The border-radius alignments consistently map legacy values to the nearest token — 3px → 2px, 5px → 4px, 9px/10px → 8px, 11px → 12px.

The 1px differences are imperceptible but bring visual consistency across the admin.

Patch is Looks good.

Note: See TracTickets for help on using tickets.