Changeset 61645 for trunk/src/wp-admin/css/colors/_mixins.scss

Timestamp:

02/15/2026 08:09:39 AM (3 months ago)

Author:

fabiankaegy

Message:

Admin: Update button and form field styles to align with the design system.

Introduce a design system tokens file (_tokens.scss) based on the WordPress Design System, providing standardized values for colors, spacing, typography, border-radius, and elevation.

Update buttons to use CSS custom properties for theme color support across all admin color schemes. Restyle primary buttons with filled theme-color backgrounds, secondary buttons with outlined borders, and add a tertiary button mixin. Adopt Gutenberg-style focus rings with outset box-shadows and transparent outlines for Windows High Contrast mode compatibility.

Increase default input and select height from 30px to 40px, apply 2px border-radius, and update border and placeholder colors to match the design system. Restyle checkboxes and radios with filled theme-color checked states and white indicator marks, using outset double-ring focus styles consistent with Gutenberg.

Apply compact 32px sizing to list table controls, page-title-action buttons, and toolbar elements. Convert tag input layouts and the major-publishing-actions bar to flexbox.

Props fabiankaegy, joedolson, audrasjb, joen, phpbits, magaliechetrit, karmatosed.
Fixes #64547.

File:

• trunk/src/wp-admin/css/colors/_mixins.scss (modified) (2 diffs)

trunk/src/wp-admin/css/colors/_mixins.scss

@@ -1 +1 @@
 @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;
+@mixin button( $button-text-color: #fff ) {
+    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, 1.5px) 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;
     }
 
@@ -32 +47 @@
     &.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, 1.5px) 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, 1.5px) 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;
+    }
+}