Skip to content

Admin Reskin: Buttons and Form Fields #10783

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

Closed
fabiankaegy wants to merge 42 commits into from
Closed

Admin Reskin: Buttons and Form Fields #10783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
79b5a9b
Admin UI: Add design system tokens for admin reskin
fabiankaegy Dec 12, 2025
1fbb287
Admin UI: Reskin buttons to align with WordPress Design System
fabiankaegy Dec 12, 2025
f3e2bdb
Admin UI: Fix theme card button sizing and visibility
fabiankaegy Dec 12, 2025
b4106d3
Admin UI: Reskin form controls to align with WordPress Design System
fabiankaegy Dec 12, 2025
62f0c5e
Admin UI: Add design system tokens for admin reskin
fabiankaegy Dec 12, 2025
24579b7
Admin UI: Reskin buttons to align with WordPress Design System
fabiankaegy Dec 12, 2025
646d998
Admin UI: Fix theme card button sizing and visibility
fabiankaegy Dec 12, 2025
23472a1
Admin UI: Add design system tokens for admin reskin
fabiankaegy Dec 12, 2025
a91510a
Admin UI: Reskin buttons to align with WordPress Design System
fabiankaegy Dec 12, 2025
f66c7b6
Admin UI: Fix theme card button sizing and visibility
fabiankaegy Dec 12, 2025
f2d45f8
Merge branch 'admin-reskin/buttons' of github.com:fabiankaegy/wordpre…
fabiankaegy Jan 23, 2026
1de4175
Merge branch 'admin-reskin/buttons' into admin-reskin/form-fields
fabiankaegy Jan 23, 2026
0cb4593
Admin UI: Add global dashicons centering for buttons
fabiankaegy Jan 23, 2026
b3cd5e0
Admin UI: Fix dashicon line-height calculation in buttons
fabiankaegy Jan 23, 2026
fa76e97
Admin UI: Fix button state icon centering
fabiankaegy Jan 23, 2026
dc30cee
Admin UI: Fix tablenav and plugin card for 40px buttons
fabiankaegy Jan 23, 2026
feb17ab
Admin UI: Use compact size for Screen Options and Help buttons
fabiankaegy Jan 23, 2026
0a001e5
Merge branch 'trunk' into admin-reskin/buttons-and-form-fields
fabiankaegy Jan 23, 2026
3754782
fix positioning of password hide / show icon
fabiankaegy Jan 23, 2026
81b5f88
Merge branch 'trunk' into admin-reskin/buttons-and-form-fields
fabiankaegy Jan 31, 2026
3e26101
fix: reduce height of custom date format input to match radio controls
fabiankaegy Jan 31, 2026
8a4affd
fix: add flexbox layout to media library filter toolbar
fabiankaegy Jan 31, 2026
1b59ed9
fix spacing of classic editor tabs
fabiankaegy Jan 31, 2026
1839e56
Merge branch 'trunk' into admin-reskin/buttons-and-form-fields
fabiankaegy Feb 11, 2026
3ff0334
fix use compact site for screen options
fabiankaegy Feb 11, 2026
1c0b1f7
fix use compact size more
fabiankaegy Feb 11, 2026
efcfe48
fix position of actions in classic editor
fabiankaegy Feb 11, 2026
e6888a9
fix media modal styles
fabiankaegy Feb 11, 2026
4f9315f
clean up customizer sizes
fabiankaegy Feb 11, 2026
98cc3b6
fix focus state
fabiankaegy Feb 11, 2026
693bec2
more customizer fixes
fabiankaegy Feb 11, 2026
33dde30
fix align buttons in menu editor
fabiankaegy Feb 11, 2026
f9f88f3
fix properly use admin theme color
fabiankaegy Feb 11, 2026
a5f83e6
fix add fallback value for focal point
fabiankaegy Feb 11, 2026
70a1b81
fix size of button in cuszomizer
fabiankaegy Feb 11, 2026
2e2bef5
fix icon alignment inside header background cuszomize button
fabiankaegy Feb 11, 2026
91a5a94
fix size of button in customizer menu editor
fabiankaegy Feb 11, 2026
e1768ab
fix overlap in customizer nav menu editor
fabiankaegy Feb 11, 2026
05e5e63
fix remove unused variable from mixin
fabiankaegy Feb 11, 2026
5bd37ec
fix height of select controls inside list view of media filter bar
fabiankaegy Feb 12, 2026
a46afb1
fix update width of tags in classic editor
fabiankaegy Feb 12, 2026
8737de0
Merge branch 'trunk' into admin-reskin/buttons-and-form-fields
fabiankaegy Feb 15, 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
204 changes: 109 additions & 95 deletions src/wp-admin/css/colors/_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@forward 'variables' show $scheme-name, $base-color, $body-background, $button-color, $custom-welcome-panel, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $form-checked, $highlight-color, $icon-color, $link, $link-focus, $low-contrast-theme, $menu-bubble-text, $menu-collapse-focus-icon, $menu-collapse-text, $menu-highlight-background, $menu-highlight-icon, $menu-highlight-text, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background, $notification-color, $text-color;
@use 'variables';
@use 'mixins';
@use 'tokens';

/**
* This function name uses British English to maintain backward compatibility, as developers
Expand Down Expand Up @@ -37,21 +38,35 @@ span.wp-media-buttons-icon:before {
color: currentColor;
}

.wp-core-ui .button-link {
color: variables.$link;
/* Link button - appears as text link, no border or background */
/* Matches Gutenberg's .is-link button variant */
.wp-core-ui .button-link,
.wp-core-ui .button.button-link {
color: var(--wp-admin-theme-color);

&:hover,
&:active,
&:active {
color: var(--wp-admin-theme-color-darker-20);
}

&:focus {
color: variables.$link-focus;
color: var(--wp-admin-theme-color);
border-radius: tokens.$radius-s;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
outline: 1px solid transparent;
}

&:disabled,
&[aria-disabled="true"] {
color: tokens.$gray-600;
}
}

.media-modal .delete-attachment,
.media-modal .trash-attachment,
.media-modal .untrash-attachment,
.wp-core-ui .button-link-delete {
color: #a00;
color: tokens.$alert-red;
}

.media-modal .delete-attachment:hover,
Expand All @@ -62,25 +77,44 @@ span.wp-media-buttons-icon:before {
.media-modal .untrash-attachment:focus,
.wp-core-ui .button-link-delete:hover,
.wp-core-ui .button-link-delete:focus {
color: #dc3232;
color: color.adjust(tokens.$alert-red, $lightness: 10%);
}

/* Forms */

// Checkbox checked state - uses theme color
input[type="checkbox"]:checked {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
}

input[type=checkbox]:checked::before {
content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E");
content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E") / '';
}

input[type=radio]:checked::before {
background: variables.$form-checked;
// Checkbox checkmark - white for visibility on theme color background
input[type="checkbox"]:checked::before {
content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") / '';
}
Comment on lines 91 to +99
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.

There are two input[type=checkbox]:checked::before rules back-to-back; the later one overrides the earlier variables.$form-checked version. This is dead code and makes it unclear which checkmark is intended. Remove the earlier rule (or consolidate into one) to avoid confusion and accidental reordering issues.

Copilot uses AI. Check for mistakes.

// Radio checked state - uses theme color
input[type="radio"]:checked {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
}

// Radio dot - white for visibility on theme color background
input[type="radio"]:checked::before {
background: tokens.$white;
}

.wp-core-ui input[type="reset"]:hover,
.wp-core-ui input[type="reset"]:active {
color: variables.$link-focus;
}

// Text input focus - outset focus ring matching button focus style
input[type="text"]:focus,
input[type="password"]:focus,
input[type="color"]:focus,
Expand All @@ -92,96 +126,70 @@ input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus,
textarea:focus {
border-color: variables.$highlight-color;
box-shadow: 0 0 0 1px variables.$highlight-color;
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
}

// Checkbox/Radio focus - Gutenberg-style outset focus ring
input[type="checkbox"]:focus,
input[type="radio"]:focus {
border-color: tokens.$gray-900;
box-shadow: 0 0 0 2px tokens.$white, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}

/* Core UI */
// Select focus (wp-core-ui styled selects)
.wp-core-ui select:focus {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
}

.wp-core-ui {
// Autocomplete focus state
.wp-tags-autocomplete .ui-state-focus,
.wp-tags-autocomplete [aria-selected="true"] {
background-color: var(--wp-admin-theme-color);
}

.button {
border-color: #7e8993;
color: #32373c;
}
// Password field focus
#pass1:focus,
#pass1-text:focus {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
}

.button.hover,
.button:hover,
.button.focus,
.button:focus {
border-color: color.adjust(#7e8993, $lightness: -5%);
color: color.adjust(#32373c, $lightness: -5%);
}
// Password toggle button focus
.mailserver-pass-wrap .button.wp-hide-pw:focus {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
}

.button.focus,
.button:focus {
border-color: #7e8993;
color: color.adjust(#32373c, $lightness: -5%);
box-shadow: 0 0 0 1px #32373c;
}

.button:active {
border-color: #7e8993;
color: color.adjust(#32373c, $lightness: -5%);
box-shadow: none;
}
/* Core UI */

.button.active,
.button.active:focus,
.button.active:hover {
border-color: variables.$button-color;
color: color.adjust(#32373c, $lightness: -5%);
box-shadow: inset 0 2px 5px -3px variables.$button-color;
}
.wp-core-ui {

.button.active:focus {
box-shadow: 0 0 0 1px #32373c;
/* Default button - theme color border and text (matches secondary) */
.button {
@include mixins.button-secondary();
}

@if ( variables.$low-contrast-theme != "true" ) {
.button,
.button-secondary {
color: variables.$highlight-color;
border-color: variables.$highlight-color;
}

.button.hover,
.button:hover,
.button-secondary:hover{
border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
color: color.adjust(variables.$highlight-color, $lightness: -10%);
}

.button.focus,
.button:focus,
.button-secondary:focus {
border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
color: color.adjust(variables.$highlight-color, $lightness: -20%);
box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
}

.button-primary {
&:hover {
color: #fff;
}
}
/* Secondary button - same as default */
.button-secondary {
@include mixins.button-secondary();
}

/* Primary button - theme color background */
.button-primary {
@include mixins.button( variables.$button-color );
@include mixins.button();
}

.button-group > .button.active {
border-color: variables.$button-color;
border-color: var(--wp-admin-theme-color);
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
}

.wp-ui-primary {
Expand Down Expand Up @@ -215,28 +223,34 @@ textarea:focus {


/* List tables */
@if variables.$low-contrast-theme == "true" {
.wrap .page-title-action:hover {
color: variables.$menu-text;
background-color: variables.$menu-background;
}
} @else {
.wrap .page-title-action,
.wrap .page-title-action:active {
border: 1px solid variables.$highlight-color;
color: variables.$highlight-color;
}

.wrap .page-title-action:hover {
color: color.adjust(variables.$highlight-color, $lightness: -10%);
border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
}
// .page-title-action uses secondary button styling
.wrap .page-title-action {
background: transparent;
border: 1px solid var(--wp-admin-theme-color);
border-radius: tokens.$radius-s;
color: var(--wp-admin-theme-color);
}

.wrap .page-title-action:focus {
border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
color: color.adjust(variables.$highlight-color, $lightness: -20%);
box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
}
.wrap .page-title-action:hover {
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
border-color: var(--wp-admin-theme-color-darker-20);
color: var(--wp-admin-theme-color-darker-20);
}

.wrap .page-title-action:focus {
background: transparent;
border-color: var(--wp-admin-theme-color);
color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
outline: 1px solid transparent;
}

.wrap .page-title-action:active {
background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
border-color: var(--wp-admin-theme-color-darker-20);
color: var(--wp-admin-theme-color-darker-20);
box-shadow: none;
}

.view-switch a.current:before {
Expand Down
Loading
Loading