WordPress.org
Get WordPress

Make WordPress Core


Ignore:
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:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/colors/_admin.scss

    r61480 r61645  
    44@use 'variables';
    55@use 'mixins';
     6@use 'tokens';
    67
    78/**
    … …  
    3839}
    3940
    40 .wp-core-ui .button-link {
    41     color: variables.$link;
     41/* Link button - appears as text link, no border or background */
     42/* Matches Gutenberg's .is-link button variant */
     43.wp-core-ui .button-link,
     44.wp-core-ui .button.button-link {
     45    color: var(--wp-admin-theme-color);
    4246
    4347    &:hover,
    44     &:active,
     48    &:active {
     49        color: var(--wp-admin-theme-color-darker-20);
     50    }
     51
    4552    &:focus {
    46         color: variables.$link-focus;
     53        color: var(--wp-admin-theme-color);
     54        border-radius: tokens.$radius-s;
     55        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     56        outline: 1px solid transparent;
     57    }
     58
     59    &:disabled,
     60    &[aria-disabled="true"] {
     61        color: tokens.$gray-600;
    4762    }
    4863}
    … …  
    5267.media-modal .untrash-attachment,
    5368.wp-core-ui .button-link-delete {
    54     color: #a00;
     69    color: tokens.$alert-red;
    5570}
    5671
    … …  
    6378.wp-core-ui .button-link-delete:hover,
    6479.wp-core-ui .button-link-delete:focus {
    65     color: #dc3232;
     80    color: color.adjust(tokens.$alert-red, $lightness: 10%);
    6681}
    6782
    6883/* Forms */
     84
     85// Checkbox checked state - uses theme color
     86input[type="checkbox"]:checked {
     87    background: var(--wp-admin-theme-color);
     88    border-color: var(--wp-admin-theme-color);
     89}
    6990
    7091input[type=checkbox]:checked::before {
    … …  
    7394}
    7495
    75 input[type=radio]:checked::before {
    76     background: variables.$form-checked;
     96// Checkbox checkmark - white for visibility on theme color background
     97input[type="checkbox"]:checked::before {
     98    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") / '';
     99}
     100
     101// Radio checked state - uses theme color
     102input[type="radio"]:checked {
     103    background: var(--wp-admin-theme-color);
     104    border-color: var(--wp-admin-theme-color);
     105}
     106
     107// Radio dot - white for visibility on theme color background
     108input[type="radio"]:checked::before {
     109    background: tokens.$white;
    77110}
    78111
    … …  
    82115}
    83116
     117// Text input focus - outset focus ring matching button focus style
    84118input[type="text"]:focus,
    85119input[type="password"]:focus,
    … …  
    93127input[type="search"]:focus,
    94128input[type="tel"]:focus,
    95 input[type="text"]:focus,
    96129input[type="time"]:focus,
    97130input[type="url"]:focus,
    98131input[type="week"]:focus,
    99 input[type="checkbox"]:focus,
    100 input[type="radio"]:focus,
    101132select:focus,
    102133textarea:focus {
    103     border-color: variables.$highlight-color;
    104     box-shadow: 0 0 0 1px variables.$highlight-color;
     134    border-color: var(--wp-admin-theme-color);
     135    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     136}
     137
     138// Checkbox/Radio focus - Gutenberg-style outset focus ring
     139input[type="checkbox"]:focus,
     140input[type="radio"]:focus {
     141    border-color: tokens.$gray-900;
     142    box-shadow: 0 0 0 2px tokens.$white, 0 0 0 4px var(--wp-admin-theme-color);
     143    outline: 2px solid transparent;
     144}
     145
     146// Select focus (wp-core-ui styled selects)
     147.wp-core-ui select:focus {
     148    border-color: var(--wp-admin-theme-color);
     149    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     150}
     151
     152// Autocomplete focus state
     153.wp-tags-autocomplete .ui-state-focus,
     154.wp-tags-autocomplete [aria-selected="true"] {
     155    background-color: var(--wp-admin-theme-color);
     156}
     157
     158// Password field focus
     159#pass1:focus,
     160#pass1-text:focus {
     161    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     162}
     163
     164// Password toggle button focus
     165.mailserver-pass-wrap .button.wp-hide-pw:focus {
     166    border-color: var(--wp-admin-theme-color);
     167    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
    105168}
    106169
    … …  
    110173.wp-core-ui {
    111174
     175    /* Default button - theme color border and text (matches secondary) */
    112176    .button {
    113         border-color: #7e8993;
    114         color: #32373c;
    115     }
    116 
    117     .button.hover,
    118     .button:hover,
    119     .button.focus,
    120     .button:focus {
    121         border-color: color.adjust(#7e8993, $lightness: -5%);
    122         color: color.adjust(#32373c, $lightness: -5%);
    123     }
    124 
    125     .button.focus,
    126     .button:focus {
    127         border-color: #7e8993;
    128         color: color.adjust(#32373c, $lightness: -5%);
    129         box-shadow: 0 0 0 1px #32373c;
    130     }
    131 
    132     .button:active {
    133         border-color: #7e8993;
    134         color: color.adjust(#32373c, $lightness: -5%);
    135         box-shadow: none;
    136     }
    137 
    138     .button.active,
    139     .button.active:focus,
    140     .button.active:hover {
    141         border-color: variables.$button-color;
    142         color: color.adjust(#32373c, $lightness: -5%);
    143         box-shadow: inset 0 2px 5px -3px variables.$button-color;
    144     }
    145 
    146     .button.active:focus {
    147         box-shadow: 0 0 0 1px #32373c;
    148     }
    149 
    150     @if ( variables.$low-contrast-theme != "true" ) {
    151         .button,
    152         .button-secondary {
    153             color: variables.$highlight-color;
    154             border-color: variables.$highlight-color;
    155         }
    156 
    157         .button.hover,
    158         .button:hover,
    159         .button-secondary:hover{
    160             border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
    161             color: color.adjust(variables.$highlight-color, $lightness: -10%);
    162         }
    163 
    164         .button.focus,
    165         .button:focus,
    166         .button-secondary:focus {
    167             border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
    168             color: color.adjust(variables.$highlight-color, $lightness: -20%);
    169             box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
    170         }
    171 
    172         .button-primary {
    173             &:hover {
    174                 color: #fff;
    175             }
    176         }
    177     }
    178 
     177        @include mixins.button-secondary();
     178    }
     179
     180    /* Secondary button - same as default */
     181    .button-secondary {
     182        @include mixins.button-secondary();
     183    }
     184
     185    /* Primary button - theme color background */
    179186    .button-primary {
    180         @include mixins.button( variables.$button-color );
     187        @include mixins.button();
    181188    }
    182189
    183190    .button-group > .button.active {
    184         border-color: variables.$button-color;
     191        border-color: var(--wp-admin-theme-color);
     192        background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
    185193    }
    186194
    … …  
    216224
    217225/* List tables */
    218 @if variables.$low-contrast-theme == "true" {
    219     .wrap .page-title-action:hover {
    220         color: variables.$menu-text;
    221         background-color: variables.$menu-background;
    222     }
    223 } @else {
    224     .wrap .page-title-action,
    225     .wrap .page-title-action:active {
    226         border: 1px solid variables.$highlight-color;
    227         color: variables.$highlight-color;
    228     }
    229 
    230     .wrap .page-title-action:hover {
    231         color: color.adjust(variables.$highlight-color, $lightness: -10%);
    232         border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
    233     }
    234 
    235     .wrap .page-title-action:focus {
    236         border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
    237         color: color.adjust(variables.$highlight-color, $lightness: -20%);
    238         box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
    239     }
     226
     227// .page-title-action uses secondary button styling
     228.wrap .page-title-action {
     229    background: transparent;
     230    border: 1px solid var(--wp-admin-theme-color);
     231    border-radius: tokens.$radius-s;
     232    color: var(--wp-admin-theme-color);
     233}
     234
     235.wrap .page-title-action:hover {
     236    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
     237    border-color: var(--wp-admin-theme-color-darker-20);
     238    color: var(--wp-admin-theme-color-darker-20);
     239}
     240
     241.wrap .page-title-action:focus {
     242    background: transparent;
     243    border-color: var(--wp-admin-theme-color);
     244    color: var(--wp-admin-theme-color);
     245    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     246    outline: 1px solid transparent;
     247}
     248
     249.wrap .page-title-action:active {
     250    background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
     251    border-color: var(--wp-admin-theme-color-darker-20);
     252    color: var(--wp-admin-theme-color-darker-20);
     253    box-shadow: none;
    240254}
    241255
Note: See TracChangeset for help on using the changeset viewer.