Skip to content

Admin UI: Reskin notices to align with WordPress Design System #10784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fabiankaegy wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

Admin UI: Reskin notices to align with WordPress Design System #10784

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e814c54
Admin UI: Reskin notices to align with WordPress Design System
fabiankaegy Dec 12, 2025
9a1ccb3
Merge branch 'trunk' into admin-reskin/notices
fabiankaegy Feb 11, 2026
a9bb51c
fix use 12px top ofset for dismiss button
fabiankaegy Feb 11, 2026
bff51c5
fix use relative line height
fabiankaegy Feb 11, 2026
139105d
fix use darker color for link to ensure better contrast
fabiankaegy Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 63 additions & 31 deletions src/wp-admin/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -806,14 +806,14 @@ img.emoji {
#bulk-titles .ntdelbutton:before,
.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;
}
Expand Down Expand Up @@ -1421,11 +1421,11 @@ th.action-links {
div.updated,
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;
}

div[class="update-message"] { /* back-compat for pre-4.6 */
Expand All @@ -1438,15 +1438,31 @@ div.updated p,
div.error p,
.form-table td .notice p {
margin: 0.5em 0;
padding: 2px;
padding: 0;
font-size: 13px;
line-height: 1.54;
color: #1e1e1e;
}

.error a {
.notice a,
.error a,
.updated a {
color: var(--wp-admin-theme-color-darker-10);
text-decoration: underline;
Comment on lines +1447 to 1451
Copy link

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These link colors rely on CSS custom properties (--wp-admin-theme-color-darker-10 / -20) that don’t appear to be defined anywhere else in this repo. If they’re undefined at runtime, the color declarations will be ignored and notice links may inherit body text color. Consider switching back to existing admin link colors or providing var(..., fallback) values.

Copilot uses AI. Check for mistakes.
}

.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);
Copy link

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The focus ring here uses --wp-admin-border-width-focus and --wp-admin-theme-color, but these variables aren’t defined elsewhere in the codebase. If undefined, box-shadow becomes invalid while outline is transparent, which can result in no visible focus indicator. Please add fallbacks (e.g., var(--..., 2px) / var(--..., #2271b1)) or use existing hard-coded focus styles used elsewhere in wp-admin.

Suggested change
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #2271b1);

Copilot uses AI. Check for mistakes.
outline: 2px solid transparent;
border-radius: 2px;
}

.notice-alt {
Expand All @@ -1464,66 +1480,82 @@ div.error p,
}

.wp-core-ui .notice.is-dismissible {
padding-right: 38px;
padding-right: 48px;
position: relative;
}

.notice-dismiss {
position: absolute;
top: 0;
right: 1px;
top: 12px;
right: 12px;
border: none;
Comment on lines 1487 to 1491
Copy link

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes .notice-dismiss to a fixed 24x24 box with no padding. There is still a later mobile media-query rule in this same file (@media screen and (max-width: 782px)) that adds padding: 13px to .notice-dismiss without overriding width/height/right/top, which will inflate the button and can cause the notice content to overlap the dismiss control. Please update the responsive rule to match the new sizing/positioning approach (or remove the fixed width/height if padding is used).

Copilot uses AI. Check for mistakes.
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);
Copy link

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to notice links, this focus style depends on --wp-admin-border-width-focus / --wp-admin-theme-color which aren’t defined elsewhere in the repo. If they’re missing at runtime, the dismiss button may lose its visible focus treatment. Please add var() fallbacks or use the existing fixed values used previously for the focus ring.

Suggested change
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1px) var(--wp-admin-theme-color, #2271b1);

Copilot uses AI. Check for mistakes.
/* 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;
border-left-color: #4ab866;
background-color: #eff9f1;
}

.notice-success.notice-alt {
background-color: #edfaef;
.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;
border-left-color: #cc1818;
background-color: #fcf0f0;
}

.notice-error.notice-alt {
background-color: #fcf0f1;
.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;
}

#plugin-information-footer .update-now:not(.button-disabled):before {
Expand Down
Loading