Changeset 61647

Timestamp:

02/15/2026 08:23:56 AM (8 weeks ago)

Author:

fabiankaegy

Message:

Admin: Update notice styles to align with the design system.

Remove the full border and box-shadow from notices, keeping only the 4px left border. Add semantic background colors to each notice type: green for success, yellow for warnings, red for errors, and transparent for info. Update border colors to match the design system tokens.

Restyle the dismiss button with a larger 24px icon, flexbox centering, and 2px border-radius. Replace the red hover color with a subtle opacity change and apply a theme-color focus ring. Increase dismissible notice right padding to accommodate the larger button.

Update notice text with consistent typography and restyle notice links to use theme color custom properties with matching focus rings.

Props fabiankaegy, mukesh27, joedolson, phpbits, sabernhardt, Joen, fcoveram, dkotter, navi161, poojapadamad.
Fixes #64548.

File:

• trunk/src/wp-admin/css/common.css (modified) (13 diffs)

trunk/src/wp-admin/css/common.css

@@ -789 +789 @@
 
 .stuffbox .hndle {
-    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
+    border-bottom: 1px solid #c3c4c7;
 }
 
@@ -808 +808 @@
 .notice-dismiss:before {
     background: none;
-    color: #787c82;
+    color: #1e1e1e;
     content: "\f153";
     content: "\f153" / '';
     display: block;
-    font: normal 16px/20px dashicons;
-    height: 20px;
+    font: normal 20px/24px dashicons;
+    height: 24px;
     text-align: center;
-    width: 20px;
+    width: 24px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -1445 +1445 @@
 div.error {
     background: #fff;
-    border: 1px solid #c3c4c7;
-    border-left-width: 4px;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+    border: none;
+    border-left: 4px solid #c3c4c7;
+    box-shadow: none;
     margin: 5px 15px 2px;
-    padding: 1px 12px;
+    padding: 8px 12px;
 }
 
@@ -1462 +1462 @@
 .form-table td .notice p {
     margin: 0.5em 0;
-    padding: 2px;
-}
-
-.error a {
+    padding: 0;
+    font-size: 13px;
+    line-height: 1.54;
+    color: #1e1e1e;
+}
+
+.notice a,
+.error a,
+.updated a {
+    color: var(--wp-admin-theme-color-darker-10);
     text-decoration: underline;
 }
 
-.updated a {
-    padding-bottom: 2px;
+.notice a:hover,
+.error a:hover,
+.updated a:hover {
+    color: var(--wp-admin-theme-color-darker-20);
+}
+
+.notice a:focus,
+.error a:focus,
+.updated a:focus {
+    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+    outline: 2px solid transparent;
+    border-radius: 2px;
 }
 
@@ -1488 +1504 @@
 
 .wp-core-ui .notice.is-dismissible {
-    padding-right: 38px;
+    padding-right: 48px;
     position: relative;
 }
@@ -1494 +1510 @@
 .notice-dismiss {
     position: absolute;
-    top: 0;
-    right: 1px;
+    top: 12px;
+    right: 12px;
     border: none;
     margin: 0;
-    padding: 9px;
+    padding: 0;
     background: none;
-    color: #787c82;
+    color: #1e1e1e;
     cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
 }
 
 .notice-dismiss:hover:before,
-.notice-dismiss:active:before,
-.notice-dismiss:focus:before {
-    color: #d63638;
+.notice-dismiss:active:before {
+    color: #1e1e1e;
+    opacity: 0.7;
 }
 
 .notice-dismiss:focus {
-    box-shadow: 0 0 0 2px #2271b1;
+    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
     /* Only visible in Windows High Contrast mode */
     outline: 2px solid transparent;
 }
 
+.notice-dismiss:focus:before {
+    color: #1e1e1e;
+}
+
 .notice-success,
 div.updated {
-    border-left-color: #00a32a;
-}
-
-.notice-success.notice-alt {
-    background-color: #edfaef;
+    border-left-color: #4ab866;
+    background-color: #eff9f1;
+}
+
+.notice-success.notice-alt,
+div.updated.notice-alt {
+    background-color: #eff9f1;
 }
 
 .notice-warning {
-    border-left-color: #dba617;
+    border-left-color: #f0b849;
+    background-color: #fef8ee;
 }
 
 .notice-warning.notice-alt {
-    background-color: #fcf9e8;
+    background-color: #fef8ee;
 }
 
 .notice-error,
 div.error {
-    border-left-color: #d63638;
-}
-
-.notice-error.notice-alt {
-    background-color: #fcf0f1;
+    border-left-color: #cc1818;
+    background-color: #fcf0f0;
+}
+
+.notice-error.notice-alt,
+div.error.notice-alt {
+    background-color: #fcf0f0;
 }
 
 .notice-info {
-    border-left-color: #72aee6;
+    border-left-color: #3858e9;
+    background-color: transparent;
 }
 
 .notice-info.notice-alt {
-    background-color: #f0f6fc;
+    background-color: transparent;
 }
 
@@ -2183 +2215 @@
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
+    border-bottom: 1px solid #c3c4c7;
 }
 
@@ -2196 +2228 @@
 .postbox-header .handle-actions {
     flex-shrink: 0;
-    padding-inline-end: 6px;
 }
 
@@ -2233 +2264 @@
 
 .sortable-placeholder {
-    border: 2px solid var(--wp-admin-theme-color);
-    border-radius: 8px;
+    border: 1px dashed #c3c4c7;
     margin-bottom: 20px;
-    background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
 }
 
@@ -2244 +2273 @@
     padding: 0;
     line-height: 1;
-    background: #ffffff;
-    border: 1px solid rgb(0, 0, 0, 0.1);
-    border-radius: 0;
-}
-
-.postbox.closed .postbox-header {
-    border-bottom: none;
+}
+
+.postbox.closed {
+    border-bottom: 0;
 }
 
@@ -2261 +2287 @@
 
 .postbox .inside {
-    padding: 16px;
+    padding: 0 12px 12px;
     line-height: 1.4;
     font-size: 13px;
@@ -2274 +2300 @@
 
 .postbox .inside {
-    margin: 0;
+    margin: 11px 0;
     position: relative;
 }
@@ -2455 +2481 @@
 .metabox-holder h2.hndle {
     font-size: 14px;
-    padding: 16px;
+    padding: 8px 12px;
     margin: 0;
     line-height: 1.4;