Changeset 61645 for trunk/src/wp-admin/css/colors/_variables.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/_variables.scss (modified) (2 diffs)

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

@@ -1 +1 @@
 @use "sass:color";
+
+// Import design system tokens
+@use "tokens" as *;
 
 // assign default value to all undefined variables
@@ -16 +19 @@
 // global
 
-$body-background: #f1f1f1 !default;
+$body-background: $gray-100 !default;
 
 $link: #0073aa !default;