From e975904beff86078fe9142b017dde978577ca9b8 Mon Sep 17 00:00:00 2001 From: d3rv1sh Date: Tue, 9 Jun 2026 17:10:56 +0400 Subject: [PATCH] Administration: Align border-radius values with design system tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace non-standard border-radius values with their nearest design system equivalents as defined in _tokens.scss. The WordPress design system defines these border-radius tokens: - 1px (radius-xs) - 2px (radius-s) — buttons, inputs - 4px (radius-m) — focus rings - 8px (radius-l) — cards, dashboard widgets - 12px (radius-30) - 9999px (radius-full) — pills, avatars This changeset replaces values that fall outside this scale: - 3px → 2px (radius-s) in 10 locations across 4 files - 5px → 4px (radius-m) in 3 locations across 2 files - 9px → 8px (radius-l) in admin-menu.css notification badges - 10px → 8px (radius-l) in site-icon.css previews - 11px → 12px (radius-30) in list-tables.css comment badges 7 files changed, 16 replacements total. Props dervishov. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/wp-admin/css/admin-menu.css | 2 +- src/wp-admin/css/customize-controls.css | 6 +++--- src/wp-admin/css/forms.css | 2 +- src/wp-admin/css/list-tables.css | 8 ++++---- src/wp-admin/css/nav-menus.css | 2 +- src/wp-admin/css/site-icon.css | 2 +- src/wp-admin/css/themes.css | 10 +++++----- 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index c4b32ac4b9e87..e148e552ef149 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -433,7 +433,7 @@ ul#adminmenu > li.current > a.current:after { padding: 0 5px; min-width: 18px; height: 18px; - border-radius: 9px; + border-radius: 8px; background-color: #d63638; color: #fff; font-size: 11px; diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 3dfdfea790fb3..376cd01f7e358 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -78,13 +78,13 @@ body:not(.ready) #customize-save-button-wrapper .save { } #customize-save-button-wrapper .save { float: left; - border-radius: 3px; + border-radius: 2px; box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ margin-top: 0; } #customize-save-button-wrapper .save.has-next-sibling { - border-radius: 3px 0 0 3px; + border-radius: 2px 0 0 2px; } #customize-sidebar-outer-content { @@ -162,7 +162,7 @@ body:not(.ready) #customize-save-button-wrapper .save { #publish-settings { text-indent: 0; - border-radius: 0 3px 3px 0; + border-radius: 0 2px 2px 0; padding-left: 0; padding-right: 0; box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */ diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index f2e5f9dcc5b53..c6c8dd4eff72a 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -1150,7 +1150,7 @@ table.form-table td .updated p { cursor: move; color: #2c3338; background: #dcdcde; - border-radius: 5px; + border-radius: 4px; border: 1px solid #c3c4c7; font-style: normal; line-height: 16px; diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 56d88d6801ddb..e22a5bcc383bf 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -54,7 +54,7 @@ padding: 0 8px; min-width: 24px; height: 2em; - border-radius: 5px; + border-radius: 4px; background-color: #646970; color: #fff; font-size: 11px; @@ -98,7 +98,7 @@ min-width: 7px; height: 17px; border: 2px solid #fff; - border-radius: 11px; + border-radius: 12px; background: #d63638; color: #fff; font-size: 9px; @@ -396,7 +396,7 @@ table.media .column-title .filename { transform: translate(-50%, -100%); background: #000; color: #fff; - border-radius: 5px; + border-radius: 4px; margin: 0; padding: 2px 5px; } @@ -1196,7 +1196,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { height: 26px; margin: 0 0 0 -26px; text-align: center; - border-radius: 3px; + border-radius: 2px; } #bulk-titles .ntdelbutton:before { diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css index 8e3eadaad53bc..dd651175f3e46 100644 --- a/src/wp-admin/css/nav-menus.css +++ b/src/wp-admin/css/nav-menus.css @@ -144,7 +144,7 @@ ul.add-menu-item-tabs li { border: 1px solid #dcdcde; margin: 0; cursor: pointer; - border-radius: 3px; + border-radius: 2px; white-space: nowrap; box-sizing: border-box; } diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css index 93f36f093caf9..bf443f30ad134 100644 --- a/src/wp-admin/css/site-icon.css +++ b/src/wp-admin/css/site-icon.css @@ -96,7 +96,7 @@ .site-icon-preview .app-icon-preview { aspect-ratio: 1/1; - border-radius: 10px; + border-radius: 8px; box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3); flex-shrink: 0; width: 100%; diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 4a644974c50c4..ed01538e7bcb0 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -201,7 +201,7 @@ body.js .theme-browser.search-loading { font-weight: 600; padding: 15px 12px; text-align: center; - border-radius: 3px; + border-radius: 2px; border: none; transition: opacity 0.1s ease-in-out; cursor: pointer; @@ -1373,7 +1373,7 @@ div#custom-background-image img { } .background-position-control .button-group:first-child > label:first-child .button { - border-radius: 3px 0 0; + border-radius: 2px 0 0; } .background-position-control .button-group:first-child > label:first-child .dashicons { @@ -1381,7 +1381,7 @@ div#custom-background-image img { } .background-position-control .button-group:first-child > label:last-child .button { - border-radius: 0 3px 0 0; + border-radius: 0 2px 0 0; } .background-position-control .button-group:first-child > label:last-child .dashicons { @@ -1389,7 +1389,7 @@ div#custom-background-image img { } .background-position-control .button-group:last-child > label:first-child .button { - border-radius: 0 0 0 3px; + border-radius: 0 0 0 2px; } .background-position-control .button-group:last-child > label:first-child .dashicons { @@ -1397,7 +1397,7 @@ div#custom-background-image img { } .background-position-control .button-group:last-child > label:last-child .button { - border-radius: 0 0 3px; + border-radius: 0 0 2px; } .background-position-control .button-group:last-child > label:last-child .dashicons {