Skip to content

Admin reskin: Buttons #10754

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 3 commits into
base: trunk
Choose a base branch
from
Open

Admin reskin: Buttons #10754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
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
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
144 changes: 55 additions & 89 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,7 +77,7 @@ 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 */
Expand Down Expand Up @@ -109,79 +124,24 @@ textarea:focus {

.wp-core-ui {

/* Default button - theme color border and text (matches secondary) */
.button {
border-color: #7e8993;
color: #32373c;
}

.button.hover,
.button:hover,
.button.focus,
.button:focus {
border-color: color.adjust(#7e8993, $lightness: -5%);
color: color.adjust(#32373c, $lightness: -5%);
}

.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;
}

.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;
@include mixins.button-secondary();
}

.button.active:focus {
box-shadow: 0 0 0 1px #32373c;
}

@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 +175,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
123 changes: 108 additions & 15 deletions src/wp-admin/css/colors/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,132 @@
@use 'sass:color';
@use 'tokens';

/*
* Button mixin- creates a button effect with correct
* highlights/shadows, based on a base color.
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
*/
@mixin button( $button-color, $button-text-color: #fff ) {
background: $button-color;
border-color: $button-color;
background: var(--wp-admin-theme-color);
border-color: transparent;
border-radius: tokens.$radius-s;
color: $button-text-color;

&:hover,
&:focus {
background: color.adjust($button-color, $lightness: 3%);
border-color: color.adjust($button-color, $lightness: -3%);
&:hover {
background: var(--wp-admin-theme-color-darker-10);
border-color: transparent;
color: $button-text-color;
}

&:focus {
background: var(--wp-admin-theme-color);
border-color: transparent;
color: $button-text-color;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
box-shadow:
0 0 0 1px #fff,
0 0 0 3px $button-color;
0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),
inset 0 0 0 1px tokens.$white;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}

&:active {
background: color.adjust($button-color, $lightness: -5%);
border-color: color.adjust($button-color, $lightness: -5%);
background: var(--wp-admin-theme-color-darker-20);
border-color: transparent;
color: $button-text-color;
}

&:disabled,
&.disabled {
background: tokens.$gray-100;
border-color: transparent;
color: tokens.$gray-600;
cursor: not-allowed;
}

&.active,
&.active:focus,
&.active:hover {
background: $button-color;
background: var(--wp-admin-theme-color-darker-10);
color: $button-text-color;
border-color: color.adjust($button-color, $lightness: -15%);
box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);
border-color: transparent;
box-shadow: none;
}
}

/*
* Secondary button mixin - outlined style with theme color.
* Matches Gutenberg's .is-secondary button variant.
*/
@mixin button-secondary() {
background: transparent;
border: 1px solid var(--wp-admin-theme-color);
border-radius: tokens.$radius-s;
color: var(--wp-admin-theme-color);

&: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);
}

&: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;
}

&: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;
}

&:disabled,
&.disabled {
background: transparent;
border-color: tokens.$gray-300;
color: tokens.$gray-600;
cursor: not-allowed;
}
}

/*
* Tertiary button mixin - transparent background, gray text.
*/
@mixin button-tertiary() {
background: transparent;
border: 1px solid tokens.$gray-600;
border-radius: tokens.$radius-s;
color: tokens.$gray-900;

&:hover {
background: rgba(0, 0, 0, 0.05);
border-color: tokens.$gray-700;
color: tokens.$gray-900;
}

&:focus {
background: transparent;
border-color: var(--wp-admin-theme-color);
color: tokens.$gray-900;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: 1px solid transparent;
}

&:active {
background: rgba(0, 0, 0, 0.1);
border-color: tokens.$gray-700;
color: tokens.$gray-900;
}

&:disabled,
&.disabled {
background: transparent;
border-color: tokens.$gray-400;
color: tokens.$gray-600;
cursor: not-allowed;
}
}
Loading
Loading