Skip to content

Commit a5d73c3

Browse files
fabiankaegyfabiankaegy
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@61647 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 5a8762c commit a5d73c3

1 file changed

Lines changed: 71 additions & 45 deletions

File tree

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

Lines changed: 71 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -788,7 +788,7 @@ img.emoji {
788788
}
789789

790790
.stuffbox .hndle {
791-
border-bottom: 1px solid rgb(0, 0, 0, 0.1);
791+
border-bottom: 1px solid #c3c4c7;
792792
}
793793

794794
.quicktags {
@@ -807,14 +807,14 @@ img.emoji {
807807
#bulk-titles .ntdelbutton:before,
808808
.notice-dismiss:before {
809809
background: none;
810-
color: #787c82;
810+
color: #1e1e1e;
811811
content: "\f153";
812812
content: "\f153" / '';
813813
display: block;
814-
font: normal 16px/20px dashicons;
815-
height: 20px;
814+
font: normal 20px/24px dashicons;
815+
height: 24px;
816816
text-align: center;
817-
width: 20px;
817+
width: 24px;
818818
-webkit-font-smoothing: antialiased;
819819
-moz-osx-font-smoothing: grayscale;
820820
}
@@ -1444,11 +1444,11 @@ th.action-links {
14441444
div.updated,
14451445
div.error {
14461446
background: #fff;
1447-
border: 1px solid #c3c4c7;
1448-
border-left-width: 4px;
1449-
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1447+
border: none;
1448+
border-left: 4px solid #c3c4c7;
1449+
box-shadow: none;
14501450
margin: 5px 15px 2px;
1451-
padding: 1px 12px;
1451+
padding: 8px 12px;
14521452
}
14531453

14541454
div[class="update-message"] { /* back-compat for pre-4.6 */
@@ -1461,15 +1461,31 @@ div.updated p,
14611461
div.error p,
14621462
.form-table td .notice p {
14631463
margin: 0.5em 0;
1464-
padding: 2px;
1464+
padding: 0;
1465+
font-size: 13px;
1466+
line-height: 1.54;
1467+
color: #1e1e1e;
14651468
}
14661469

1467-
.error a {
1470+
.notice a,
1471+
.error a,
1472+
.updated a {
1473+
color: var(--wp-admin-theme-color-darker-10);
14681474
text-decoration: underline;
14691475
}
14701476

1471-
.updated a {
1472-
padding-bottom: 2px;
1477+
.notice a:hover,
1478+
.error a:hover,
1479+
.updated a:hover {
1480+
color: var(--wp-admin-theme-color-darker-20);
1481+
}
1482+
1483+
.notice a:focus,
1484+
.error a:focus,
1485+
.updated a:focus {
1486+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1487+
outline: 2px solid transparent;
1488+
border-radius: 2px;
14731489
}
14741490

14751491
.notice-alt {
@@ -1487,66 +1503,82 @@ div.error p,
14871503
}
14881504

14891505
.wp-core-ui .notice.is-dismissible {
1490-
padding-right: 38px;
1506+
padding-right: 48px;
14911507
position: relative;
14921508
}
14931509

14941510
.notice-dismiss {
14951511
position: absolute;
1496-
top: 0;
1497-
right: 1px;
1512+
top: 12px;
1513+
right: 12px;
14981514
border: none;
14991515
margin: 0;
1500-
padding: 9px;
1516+
padding: 0;
15011517
background: none;
1502-
color: #787c82;
1518+
color: #1e1e1e;
15031519
cursor: pointer;
1520+
width: 24px;
1521+
height: 24px;
1522+
display: flex;
1523+
align-items: center;
1524+
justify-content: center;
1525+
border-radius: 2px;
15041526
}
15051527

15061528
.notice-dismiss:hover:before,
1507-
.notice-dismiss:active:before,
1508-
.notice-dismiss:focus:before {
1509-
color: #d63638;
1529+
.notice-dismiss:active:before {
1530+
color: #1e1e1e;
1531+
opacity: 0.7;
15101532
}
15111533

15121534
.notice-dismiss:focus {
1513-
box-shadow: 0 0 0 2px #2271b1;
1535+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
15141536
/* Only visible in Windows High Contrast mode */
15151537
outline: 2px solid transparent;
15161538
}
15171539

1540+
.notice-dismiss:focus:before {
1541+
color: #1e1e1e;
1542+
}
1543+
15181544
.notice-success,
15191545
div.updated {
1520-
border-left-color: #00a32a;
1546+
border-left-color: #4ab866;
1547+
background-color: #eff9f1;
15211548
}
15221549

1523-
.notice-success.notice-alt {
1524-
background-color: #edfaef;
1550+
.notice-success.notice-alt,
1551+
div.updated.notice-alt {
1552+
background-color: #eff9f1;
15251553
}
15261554

15271555
.notice-warning {
1528-
border-left-color: #dba617;
1556+
border-left-color: #f0b849;
1557+
background-color: #fef8ee;
15291558
}
15301559

15311560
.notice-warning.notice-alt {
1532-
background-color: #fcf9e8;
1561+
background-color: #fef8ee;
15331562
}
15341563

15351564
.notice-error,
15361565
div.error {
1537-
border-left-color: #d63638;
1566+
border-left-color: #cc1818;
1567+
background-color: #fcf0f0;
15381568
}
15391569

1540-
.notice-error.notice-alt {
1541-
background-color: #fcf0f1;
1570+
.notice-error.notice-alt,
1571+
div.error.notice-alt {
1572+
background-color: #fcf0f0;
15421573
}
15431574

15441575
.notice-info {
1545-
border-left-color: #72aee6;
1576+
border-left-color: #3858e9;
1577+
background-color: transparent;
15461578
}
15471579

15481580
.notice-info.notice-alt {
1549-
background-color: #f0f6fc;
1581+
background-color: transparent;
15501582
}
15511583

15521584
#plugin-information-footer .update-now:not(.button-disabled):before {
@@ -2182,7 +2214,7 @@ html.wp-toolbar {
21822214
display: flex;
21832215
align-items: center;
21842216
justify-content: space-between;
2185-
border-bottom: 1px solid rgb(0, 0, 0, 0.1);
2217+
border-bottom: 1px solid #c3c4c7;
21862218
}
21872219

21882220
.postbox-header .hndle {
@@ -2195,7 +2227,6 @@ html.wp-toolbar {
21952227

21962228
.postbox-header .handle-actions {
21972229
flex-shrink: 0;
2198-
padding-inline-end: 6px;
21992230
}
22002231

22012232
/* Post box order and toggle buttons. */
@@ -2232,24 +2263,19 @@ html.wp-toolbar {
22322263
}
22332264

22342265
.sortable-placeholder {
2235-
border: 2px solid var(--wp-admin-theme-color);
2236-
border-radius: 8px;
2266+
border: 1px dashed #c3c4c7;
22372267
margin-bottom: 20px;
2238-
background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
22392268
}
22402269

22412270
.postbox,
22422271
.stuffbox {
22432272
margin-bottom: 20px;
22442273
padding: 0;
22452274
line-height: 1;
2246-
background: #ffffff;
2247-
border: 1px solid rgb(0, 0, 0, 0.1);
2248-
border-radius: 0;
22492275
}
22502276

2251-
.postbox.closed .postbox-header {
2252-
border-bottom: none;
2277+
.postbox.closed {
2278+
border-bottom: 0;
22532279
}
22542280

22552281
/* user-select is not a part of the CSS standard - may change behavior in the future */
@@ -2260,7 +2286,7 @@ html.wp-toolbar {
22602286
}
22612287

22622288
.postbox .inside {
2263-
padding: 16px;
2289+
padding: 0 12px 12px;
22642290
line-height: 1.4;
22652291
font-size: 13px;
22662292
}
@@ -2273,7 +2299,7 @@ html.wp-toolbar {
22732299
}
22742300

22752301
.postbox .inside {
2276-
margin: 0;
2302+
margin: 11px 0;
22772303
position: relative;
22782304
}
22792305

@@ -2454,7 +2480,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
24542480
.metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
24552481
.metabox-holder h2.hndle {
24562482
font-size: 14px;
2457-
padding: 16px;
2483+
padding: 8px 12px;
24582484
margin: 0;
24592485
line-height: 1.4;
24602486
}

0 commit comments

Comments
 (0)