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

Open
fabiankaegy wants to merge 19 commits into
base: trunk
Choose a base branch
from
+683 −277
Open

Admin Reskin: Buttons and Form Fields #10783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 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
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
202 changes: 108 additions & 94 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) 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") / '';
}

// 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 - Gutenberg-style 1.5px border effect
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 0.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 0.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 0.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 0.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 );
}

.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) 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