WordPress.org
Get WordPress

Make WordPress Core

Changeset 61645


Ignore:
Timestamp:
02/15/2026 08:09:39 AM (6 weeks 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.

Location:
trunk/src
Files:
1 added
17 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

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

    r59656 r61645  
    11@use 'sass:color';
     2@use 'tokens';
    23
    34/*
    4  * Button mixin- creates a button effect with correct
    5  * highlights/shadows, based on a base color.
     5 * Button mixin - creates a primary button effect.
     6 * Uses CSS custom properties for theme color support across color schemes.
    67 */
    7 @mixin button( $button-color, $button-text-color: #fff ) {
    8     background: $button-color;
    9     border-color: $button-color;
     8@mixin button( $button-text-color: #fff ) {
     9    background: var(--wp-admin-theme-color);
     10    border-color: transparent;
     11    border-radius: tokens.$radius-s;
    1012    color: $button-text-color;
    1113
    12     &:hover,
    13     &:focus {
    14         background: color.adjust($button-color, $lightness: 3%);
    15         border-color: color.adjust($button-color, $lightness: -3%);
     14    &:hover {
     15        background: var(--wp-admin-theme-color-darker-10);
     16        border-color: transparent;
    1617        color: $button-text-color;
    1718    }
    1819
    1920    &:focus {
     21        background: var(--wp-admin-theme-color);
     22        border-color: transparent;
     23        color: $button-text-color;
     24        /* Gutenberg-style focus ring: outer theme color + inset white for contrast */
    2025        box-shadow:
    21             0 0 0 1px #fff,
    22             0 0 0 3px $button-color;
     26            0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color),
     27            inset 0 0 0 1px tokens.$white;
     28        /* Visible in Windows High Contrast mode */
     29        outline: 1px solid transparent;
    2330    }
    2431
    2532    &:active {
    26         background: color.adjust($button-color, $lightness: -5%);
    27         border-color: color.adjust($button-color, $lightness: -5%);
     33        background: var(--wp-admin-theme-color-darker-20);
     34        border-color: transparent;
    2835        color: $button-text-color;
     36    }
     37
     38    &:disabled,
     39    &.disabled {
     40        background: tokens.$gray-100;
     41        border-color: transparent;
     42        color: tokens.$gray-600;
     43        cursor: not-allowed;
    2944    }
    3045
    … …  
    3247    &.active:focus,
    3348    &.active:hover {
    34         background: $button-color;
     49        background: var(--wp-admin-theme-color-darker-10);
    3550        color: $button-text-color;
    36         border-color: color.adjust($button-color, $lightness: -15%);
    37         box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);
     51        border-color: transparent;
     52        box-shadow: none;
    3853    }
    3954}
     55
     56/*
     57 * Secondary button mixin - outlined style with theme color.
     58 * Matches Gutenberg's .is-secondary button variant.
     59 */
     60@mixin button-secondary() {
     61    background: transparent;
     62    border: 1px solid var(--wp-admin-theme-color);
     63    border-radius: tokens.$radius-s;
     64    color: var(--wp-admin-theme-color);
     65
     66    &:hover {
     67        background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
     68        border-color: var(--wp-admin-theme-color-darker-20);
     69        color: var(--wp-admin-theme-color-darker-20);
     70    }
     71
     72    &:focus {
     73        background: transparent;
     74        border-color: var(--wp-admin-theme-color);
     75        color: var(--wp-admin-theme-color);
     76        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     77        outline: 1px solid transparent;
     78    }
     79
     80    &:active {
     81        background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
     82        border-color: var(--wp-admin-theme-color-darker-20);
     83        color: var(--wp-admin-theme-color-darker-20);
     84        box-shadow: none;
     85    }
     86
     87    &:disabled,
     88    &.disabled {
     89        background: transparent;
     90        border-color: tokens.$gray-300;
     91        color: tokens.$gray-600;
     92        cursor: not-allowed;
     93    }
     94}
     95
     96/*
     97 * Tertiary button mixin - transparent background, gray text.
     98 */
     99@mixin button-tertiary() {
     100    background: transparent;
     101    border: 1px solid tokens.$gray-600;
     102    border-radius: tokens.$radius-s;
     103    color: tokens.$gray-900;
     104
     105    &:hover {
     106        background: rgba(0, 0, 0, 0.05);
     107        border-color: tokens.$gray-700;
     108        color: tokens.$gray-900;
     109    }
     110
     111    &:focus {
     112        background: transparent;
     113        border-color: var(--wp-admin-theme-color);
     114        color: tokens.$gray-900;
     115        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     116        outline: 1px solid transparent;
     117    }
     118
     119    &:active {
     120        background: rgba(0, 0, 0, 0.1);
     121        border-color: tokens.$gray-700;
     122        color: tokens.$gray-900;
     123    }
     124
     125    &:disabled,
     126    &.disabled {
     127        background: transparent;
     128        border-color: tokens.$gray-400;
     129        color: tokens.$gray-600;
     130        cursor: not-allowed;
     131    }
     132}

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

    r59879 r61645  
    11@use "sass:color";
     2
     3// Import design system tokens
     4@use "tokens" as *;
    25
    36// assign default value to all undefined variables
    … …  
    1619// global
    1720
    18 $body-background: #f1f1f1 !default;
     21$body-background: $gray-100 !default;
    1922
    2023$link: #0073aa !default;

  • trunk/src/wp-admin/css/common.css

    r61636 r61645  
    635635    margin-left: 4px;
    636636    border: 1px solid #2271b1;
    637     border-radius: 3px;
    638     background: #f6f7f7;
     637    border-radius: 2px;
     638    background: transparent;
    639639    font-size: 13px;
    640     font-weight: 400;
    641     line-height: 2.15384615;
     640    font-weight: 500;
     641    min-height: 32px;
     642    line-height: 2.30769231; /* 30px for 32px height */
    642643    color: #2271b1; /* use the standard color used for buttons */
    643     padding: 0 10px;
    644     min-height: 30px;
     644    padding: 0 12px;
    645645    -webkit-appearance: none;
    646646
    … …  
    653653.wrap .add-new-h2:hover, /* deprecated */
    654654.wrap .page-title-action:hover {
    655     background: #f0f0f1;
    656655    border-color: #0a4b78;
    657656    color: #0a4b78;
    … …  
    934933    border-top: 1px solid #dcdcde;
    935934    background: #f6f7f7;
     935    display: flex;
     936    align-items: center;
     937    justify-content: space-between;
    936938}
    937939
    938940#delete-action {
    939     float: left;
    940941    line-height: 2.30769231; /* 30px */
    941942}
    … …  
    954955#publishing-action {
    955956    text-align: right;
    956     float: right;
     957    margin-left: auto;
    957958    line-height: 1.9;
    958959}
    … …  
    11121113}
    11131114
    1114 /* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */
    1115 .plugin-install-php .wp-filter {
     1115.wp-filter .search-form input[type="search"] {
     1116    min-height: 32px;
     1117    line-height: 2.14285714; /* 30px for 32px height with 14px font */
     1118    padding: 0 8px;
     1119}
     1120
     1121.wp-filter .search-form select,
     1122.wp-filter .filter-items select {
     1123    min-height: 32px;
     1124    line-height: 2.14285714; /* 30px for 32px height with 14px font */
     1125    padding: 0 24px 0 8px;
     1126}
     1127
     1128.wp-filter .button {
     1129    min-height: 32px;
     1130    line-height: 2.30769231; /* 30px for 32px height with 13px font */
     1131    padding: 0 12px;
     1132}
     1133
     1134/* Use flexbox only on the plugins install page and upload page. The `filter-links` and search form children will become flex items. */
     1135.plugin-install-php .wp-filter,
     1136.upload-php .wp-filter {
    11161137    display: flex;
    11171138    flex-wrap: wrap;
    … …  
    17191740.button.activated-message:before,
    17201741.button.activating-message:before {
    1721     margin: 3px 5px 0 -2px;
     1742    margin: 0 5px 0 -2px;
     1743    line-height: 1.9; /* 38px (20px * 1.9) - matches button */
     1744    vertical-align: top;
    17221745}
    17231746
    … …  
    17371760#plugin-information-footer .button.activated-message:before,
    17381761#plugin-information-footer .button.activating-message:before {
    1739     margin: 9px 5px 0 -2px;
     1762    margin: 0 5px 0 -2px;
     1763    line-height: 1.9; /* 38px (20px * 1.9) - matches button */
     1764    vertical-align: top;
    17401765}
    17411766
    17421767#plugin-information-footer .button.update-now.updating-message:before {
    1743     margin: -3px 5px 0 -2px;
     1768    margin: 0 5px 0 -2px;
    17441769}
    17451770
    … …  
    18191844    border-top: none;
    18201845    height: auto;
     1846    min-height: 32px; /* Compact size for header buttons */
    18211847    margin-bottom: 0;
    1822     padding: 3px 6px 3px 16px;
     1848    padding: 0 6px 0 16px;
    18231849    background: #fff;
    18241850    border-radius: 0 0 4px 4px;
    18251851    color: #646970;
    1826     line-height: 1.7;
     1852    line-height: 2.30769231; /* 30px - matches compact button */
    18271853    box-shadow: 0 0 0 transparent;
    18281854    transition: box-shadow 0.1s linear;
    … …  
    18501876    content: "\f140";
    18511877    content: "\f140" / '';
    1852     font: normal 20px/1 dashicons;
     1878    font: normal 20px/1.5 dashicons; /* line-height 1.5 = 30px to match compact button */
    18531879    display: inline-block;
    18541880    padding: 0 5px 0 0;
    1855     bottom: 2px;
    1856     position: relative;
    1857     vertical-align: bottom;
     1881    vertical-align: top;
    18581882    -webkit-font-smoothing: antialiased;
    18591883    -moz-osx-font-smoothing: grayscale;

  • trunk/src/wp-admin/css/customize-controls.css

    r61636 r61645  
    7171#customize-save-button-wrapper {
    7272    float: right;
    73     margin-top: 9px;
     73    margin-top: 3px; /* Vertically center 40px button in 45px header */
    7474}
    7575
    … …  
    186186
    187187#customize-header-actions .spinner {
    188     margin-top: 13px;
     188    margin-top: 13px; /* Vertically center 20px spinner in 45px header */
    189189    margin-right: 4px;
    190190}
    … …  
    273273    margin: 0;
    274274    position: absolute;
    275     bottom: 9px;
     275    top: 50%;
     276    transform: translateY(-50%);
    276277    right: 0;
    277278}
    … …  
    284285.customize-copy-preview-link:after {
    285286    content: "";
    286     height: 28px;
     287    height: 32px;
    287288    position: absolute;
    288289    background: #fff;
    289     top: -1px;
     290    top: 0;
    290291}
    291292
    … …  
    11371138}
    11381139
     1140#available-menu-items .new-content-item-wrapper > label,
     1141.customize-control-dropdown-pages .new-content-item-wrapper > label {
     1142    margin-bottom: 4px;
     1143    display: block;
     1144}
     1145
    11391146#available-menu-items .accordion-section-content .new-content-item,
    11401147.customize-control-dropdown-pages .new-content-item {
    … …  
    11591166.customize-control-dropdown-pages .new-content-item .create-item-input {
    11601167    flex-grow: 10;
     1168    width: 100%;
     1169}
     1170
     1171#available-menu-items .new-content-item .create-item-input {
     1172    min-height: 32px;
     1173    line-height: 2.15384615; /* 28px for 32px min-height with 13px font */
    11611174}
    11621175
    11631176#available-menu-items .new-content-item .add-content,
    11641177.customize-control-dropdown-pages .new-content-item .add-content {
    1165     margin: 2px 0 2px 6px;
     1178    margin: 0 0 0 6px;
    11661179    flex-grow: 1;
     1180}
     1181
     1182#available-menu-items .new-content-item .add-content {
     1183    min-height: 32px;
     1184    line-height: 2.30769231; /* 30px for 32px min-height with 13px font */
    11671185}
    11681186
    … …  
    14491467.customize-control .attachment-media-view .upload-button {
    14501468    width: 100%;
    1451     padding: 9px 0;
     1469    text-align: center;
    14521470}
    14531471
    14541472.customize-control .attachment-media-view .upload-button.control-focus {
    14551473    width: auto;
    1456     padding: 0 10px;
    14571474}
    14581475
    14591476.customize-control.customize-control-header .actions .upload-button.button.new {
    14601477    width: 100%;
    1461     padding: 9px 0;
     1478    text-align: center;
    14621479}
    14631480
    … …  
    15971614
    15981615.customize-control-header button.random .dice {
    1599     margin-top: 4px;
     1616    margin-top: 0;
    16001617}
    16011618
    … …  
    17971814    right: 10px;
    17981815    top: 50%;
    1799     margin-top: -14px;
     1816    margin-top: -20px; /* Half of 40px button height for vertical centering */
    18001817    font-weight: 400;
    18011818}
    … …  
    22002217
    22012218.themes-filter-bar .wp-filter-search {
    2202     line-height: 1.8;
    2203     padding: 6px 10px 6px 30px;
     2219    line-height: 2.14285714; /* 30px for 32px compact input */
     2220    padding: 0 10px 0 30px;
    22042221    max-width: 100%;
    22052222    width: 40%;
    22062223    min-width: 300px;
    22072224    height: 32px;
     2225    min-height: 32px; /* Override global 40px min-height for compact bar */
    22082226    margin: 1px 0;
    22092227    top: 0;
    … …  
    26772695}
    26782696
     2697#available-widgets .accordion-section-title,
     2698#available-menu-items .accordion-section-title {
     2699    z-index: 2;
     2700}
     2701
    26792702#available-widgets .customize-section-title,
    26802703#available-menu-items .customize-section-title {
    … …  
    27282751#available-menu-items-search input {
    27292752    width: 100%;
    2730     min-height: 32px;
     2753    min-height: 40px;
    27312754    margin: 1px 0;
    27322755    padding: 0 30px;
    … …  
    27422765    display: block;
    27432766    position: absolute;
    2744     bottom: 15px; /* 13 container padding +1 input margin +1 input border */
     2767    bottom: 19px; /* 13 container padding +1 input margin +1 input border +4 centering in 40px input */
    27452768    left: 16px;
    27462769    width: 30px;
    … …  
    27542777#available-menu-items-search .accordion-section-title .clear-results {
    27552778    position: absolute;
    2756     top: 36px; /* 13 container padding +1 input margin +1 input border */
     2779    top: 40px; /* 13 container padding +1 input margin +1 input border +4 centering in 40px input */
    27572780    right: 16px;
    27582781    width: 30px;
    … …  
    29212944    #customize-control-changeset_preview_link a {
    29222945        bottom: 16px;
    2923     }
    2924 
    2925     .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
    2926         bottom: 10px;
    29272946    }
    29282947
    … …  
    30223041
    30233042    .customize-control .attachment-media-view .upload-button {
    3024         padding: 5px 0;
     3043        text-align: center;
    30253044    }
    30263045
    … …  
    30923111
    30933112    #available-menu-items-search .clear-results {
    3094         top: 36px;
     3113        top: 40px;
    30953114        right: 16px;
    30963115    }

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r61511 r61645  
    689689#available-menu-items-search .spinner {
    690690    position: absolute;
    691     bottom: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */
     691    bottom: 24px; /* 13 container padding +1 input margin +10 ( ( 40 input height - 20 spinner height ) / 2 ) */
    692692    right: 21px;
    693693    margin: 0 !important;
    … …  
    698698    position: absolute;
    699699    left: 0;
    700     top: 75px; /* below title div / search input */
     700    top: 83px; /* below title div / search input (75 + 8 for 40px input) */
    701701    bottom: 0; /* 100% height that still triggers lazy load */
    702702    max-height: none;
    … …  
    861861
    862862.customize-control-nav_menu .customize-control-nav_menu-buttons {
     863    display: flex;
     864    flex-direction: row-reverse;
     865    align-items: center;
     866    gap: 8px;
    863867    margin-top: 12px;
    864868}
    … …  
    883887@media screen and (max-width: 782px) {
    884888    #available-menu-items #available-menu-items-search .accordion-section-content {
    885         top: 63px;
     889        top: 71px; /* 63 + 8 for 40px input */
    886890    }
    887891}
    … …  
    889893@media screen and (max-width: 640px) {
    890894    #available-menu-items #available-menu-items-search .accordion-section-content {
    891         top: 146px;
     895        top: 154px; /* 146 + 8 for 40px input */
    892896    }
    893897}

  • trunk/src/wp-admin/css/dashboard.css

    r61480 r61645  
    808808    max-height: 1300px;
    809809    margin: 0 0 8px;
    810     padding: 6px 7px;
     810    padding: 8px 12px;
    811811    resize: none;
    812812}
    … …  
    12391239#dashboard_php_nag p {
    12401240    margin: 12px 0;
    1241 }
    1242 
    1243 #dashboard_php_nag .button .dashicons-external {
    1244     line-height: 25px;
    12451241}
    12461242

  • trunk/src/wp-admin/css/edit.css

    r61480 r61645  
    326326
    327327#post-body .tagsdiv #newtag {
    328     margin-right: 5px;
    329     width: 16em;
     328    margin-right: 0;
     329    flex: 1;
     330    min-width: 0;
    330331}
    331332
    … …  
    335336
    336337#side-sortables .tagsdiv #newtag {
    337     width: 68%;
     338    flex: 1;
     339    min-width: 0;
    338340}
    339341
    … …  
    14241426#poststuff .tagsdiv .ajaxtag {
    14251427    margin-top: 1em;
     1428    display: flex;
     1429    gap: 8px;
     1430    align-items: center;
    14261431}
    14271432
    … …  
    14351440
    14361441.tagsdiv .newtag {
    1437     width: 180px;
     1442    flex: 1;
     1443    min-width: 0;
    14381444}
    14391445
    … …  
    19281934    /* Tags Metabox */
    19291935    .tagsdiv .newtag {
    1930         width: 100%;
     1936        flex: 1;
     1937        min-width: 0;
    19311938        height: auto;
    1932         margin-bottom: 15px;
     1939        margin-bottom: 0;
    19331940    }
    19341941

  • trunk/src/wp-admin/css/forms.css

    r61514 r61645  
    1717textarea {
    1818    overflow: auto;
    19     padding: 2px 6px;
     19    padding: 8px 12px;
    2020    /* inherits font size 14px */
    2121    line-height: 1.42857143; /* 20px */
    … …  
    2929
    3030textarea.code {
    31     padding: 4px 6px 1px;
     31    padding: 8px 12px;
    3232}
    3333
    … …  
    4949textarea {
    5050    box-shadow: 0 0 0 transparent;
    51     border-radius: 4px;
    52     border: 1px solid #8c8f94;
     51    border-radius: 2px;
     52    border: 1px solid #949494;
    5353    background-color: #fff;
    54     color: #2c3338;
     54    color: #1e1e1e;
    5555}
    5656
    … …  
    6868input[type="url"],
    6969input[type="week"] {
    70     padding: 0 8px;
     70    padding: 0 12px;
    7171    /* inherits font size 14px */
    72     line-height: 2; /* 28px */
    73     /* Only necessary for IE11 */
    74     min-height: 30px;
     72    line-height: 2.71428571; /* 38px for 40px min-height */
     73    min-height: 40px;
     74}
     75
     76select {
     77    padding: 0 24px 0 12px;
     78    /* inherits font size 14px */
     79    line-height: 2.71428571; /* 38px for 40px min-height */
     80    min-height: 40px;
    7581}
    7682
    … …  
    94100input[type="url"]:focus,
    95101input[type="week"]:focus,
    96 input[type="checkbox"]:focus,
    97 input[type="radio"]:focus,
    98102select:focus,
    99103textarea:focus {
    100     border-color: #2271b1;
    101     box-shadow: 0 0 0 1px #2271b1;
     104    border-color: var(--wp-admin-theme-color);
     105    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     106    /* Only visible in Windows High Contrast mode */
     107    outline: 2px solid transparent;
     108}
     109
     110/* Checkbox and radio use outset focus style */
     111input[type="checkbox"]:focus,
     112input[type="radio"]:focus {
     113    border-color: #1e1e1e;
     114    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
    102115    /* Only visible in Windows High Contrast mode */
    103116    outline: 2px solid transparent;
    … …  
    112125input[type="checkbox"],
    113126input[type="radio"] {
    114     border: 1px solid #8c8f94;
    115     border-radius: 4px;
     127    border: 1px solid #1e1e1e;
     128    border-radius: 2px;
    116129    background: #fff;
    117     color: #50575e;
     130    color: #1e1e1e;
    118131    clear: none;
    119132    cursor: pointer;
    … …  
    129142    min-width: 1rem;
    130143    -webkit-appearance: none;
    131     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     144    box-shadow: none;
    132145    transition: .05s border-color ease-in-out;
    133146}
    134147
    135148input[type="radio"]:checked + label:before {
    136     color: #8c8f94;
     149    color: #949494;
    137150}
    138151
    … …  
    175188input[type="checkbox"]:checked::before {
    176189    /* Use the "Yes" SVG Dashicon */
    177     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%233582c4%27%2F%3E%3C%2Fsvg%3E");
    178     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%233582c4%27%2F%3E%3C%2Fsvg%3E") / '';
     190    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");
     191    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") / '';
    179192    margin: -0.1875rem 0 0 -0.25rem;
    180193    height: 1.3125rem;
    181194    width: 1.3125rem;
     195}
     196
     197input[type="checkbox"]:checked {
     198    background: var(--wp-admin-theme-color);
     199    border-color: var(--wp-admin-theme-color);
     200}
     201
     202input[type="radio"]:checked {
     203    background: var(--wp-admin-theme-color);
     204    border-color: var(--wp-admin-theme-color);
    182205}
    183206
    … …  
    188211    height: 0.5rem; /* 8px */
    189212    margin: 0.1875rem; /* 3px */
    190     background-color: #3582c4;
     213    background-color: #fff;
    191214    /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */
    192215    line-height: 1.14285714;
    … …  
    223246textarea.readonly,
    224247textarea[readonly] {
    225     background-color: #f0f0f1;
     248    background-color: #f0f0f0;
    226249}
    227250
    228251::-webkit-input-placeholder {
    229     color: #646970;
     252    color: #757575;
    230253}
    231254
    232255::-moz-placeholder {
    233     color: #646970;
     256    color: #757575;
    234257}
    235258
    … …  
    277300textarea:disabled,
    278301textarea.disabled {
    279     background: rgba(255, 255, 255, 0.5);
    280     border-color: rgba(220, 220, 222, 0.75);
    281     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    282     color: rgba(44, 51, 56, 0.5);
     302    background: #f0f0f0;
     303    border-color: #cccccc;
     304    box-shadow: none;
     305    color: #949494;
    283306}
    284307
    … …  
    315338.wp-core-ui select {
    316339    font-size: 14px;
    317     line-height: 2; /* 28px */
    318     color: #2c3338;
    319     border-color: #8c8f94;
     340    line-height: 2.71428571; /* 38px for 40px min-height */
     341    color: #1e1e1e;
     342    border-color: #949494;
    320343    box-shadow: none;
    321     border-radius: 3px;
    322     padding: 0 24px 0 8px;
    323     min-height: 30px;
     344    border-radius: 2px;
     345    padding: 0 24px 0 12px;
     346    min-height: 40px;
    324347    max-width: 25rem;
    325348    -webkit-appearance: none;
    326349    /* The SVG is arrow-down-alt2 from Dashicons. */
    327     background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
     350    background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%;
    328351    background-size: 16px 16px;
    329352    cursor: pointer;
    … …  
    332355
    333356.wp-core-ui select:hover {
    334     color: #2271b1;
     357    color: #1e1e1e;
     358    border-color: #1e1e1e;
    335359}
    336360
    337361.wp-core-ui select:focus {
    338     border-color: #2271b1;
    339     color: #0a4b78;
    340     box-shadow: 0 0 0 1px #2271b1;
     362    border-color: var(--wp-admin-theme-color);
     363    color: #1e1e1e;
     364    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
    341365}
    342366
    343367.wp-core-ui select:active {
    344     border-color: #8c8f94;
     368    border-color: #949494;
    345369    box-shadow: none;
    346370}
    … …  
    377401
    378402.wp-core-ui select:hover::-ms-value {
    379     color: #2271b1;
     403    color: #1e1e1e;
    380404}
    381405
    … …  
    472496input.small-text {
    473497    width: 50px;
    474     padding: 0 6px;
     498    padding: 0 8px;
    475499}
    476500
    … …  
    481505input[type="number"].small-text {
    482506    width: 65px;
    483     padding-right: 0;
     507    padding-right: 4px;
    484508}
    485509
    … …  
    497521#post-query-submit {
    498522    margin: 0 8px 0 0;
     523    min-height: 32px;
     524    line-height: 2.30769231; /* 30px for 32px height with 13px font */
     525    padding: 0 12px;
    499526}
    500527
    … …  
    513540    margin-right: 6px;
    514541    max-width: 12.5rem;
     542    min-height: 32px;
     543    line-height: 2.14285714; /* 30px for 32px height with 14px font */
     544    padding: 0 24px 0 8px;
     545}
     546
     547.tablenav .actions .button {
     548    min-height: 32px;
     549    line-height: 2.30769231; /* 30px for 32px height with 13px font */
     550    padding: 0 12px;
    515551}
    516552
    … …  
    519555}
    520556
    521 .wp-hide-pw > .dashicons,
    522 .wp-cancel-pw > .dashicons {
    523     position: relative;
    524     top: 3px;
     557.wp-core-ui .button.wp-hide-pw > .dashicons,
     558.wp-core-ui .button.wp-cancel-pw > .dashicons {
    525559    width: 1.25rem;
    526560    height: 1.25rem;
    527     top: 0.25rem;
    528561    font-size: 20px;
     562    line-height: 1;
     563    vertical-align: middle;
    529564}
    530565
    … …  
    559594.wp-pwd button {
    560595    height: min-content;
    561 }
    562 
    563 .wp-pwd button.pwd-toggle .dashicons {
    564     position: relative;
    565     top: 0.25rem;
    566596}
    567597
    … …  
    604634.mailserver-pass-wrap .button.wp-hide-pw:focus {
    605635    background: transparent;
    606     border-color: #3582c4;
    607     border-radius: 4px;
    608     box-shadow: 0 0 0 1px #3582c4;
     636    border-color: var(--wp-admin-theme-color);
     637    border-radius: 2px;
     638    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
    609639    /* Only visible in Windows High Contrast mode */
    610640    outline: 2px solid transparent;
    … …  
    622652
    623653#pass-strength-result {
    624     background-color: #f0f0f1;
    625     border: 1px solid #dcdcde;
    626     color: #1d2327;
     654    background-color: #f0f0f0;
     655    border: 1px solid #cccccc;
     656    border-radius: 2px;
     657    color: #1e1e1e;
    627658    margin: -1px 1px 5px;
    628659    padding: 3px 5px;
    … …  
    683714#pass1:focus,
    684715#pass1-text:focus {
    685     box-shadow: 0 0 0 2px #2271b1;
     716    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
    686717    /* Only visible in Windows High Contrast mode */
    687718    outline: 2px solid transparent;
    … …  
    700731    margin-bottom: 0;
    701732    /* Same height as the buttons */
    702     min-height: 30px;
     733    min-height: 40px;
    703734}
    704735
    … …  
    735766    padding: 3px 5px;
    736767    top: -4px;
    737     border-radius: 4px;
     768    border-radius: 2px;
    738769}
    739770
    … …  
    762793}
    763794
     795p.search-box input[type="search"],
     796p.search-box input[type="text"] {
     797    min-height: 32px;
     798    line-height: 2.14285714; /* 30px for 32px height with 14px font */
     799    padding: 0 8px;
     800}
     801
     802p.search-box .button {
     803    min-height: 32px;
     804    line-height: 2.30769231; /* 30px for 32px height with 13px font */
     805    padding: 0 12px;
     806}
     807
    764808.network-admin.themes-php p.search-box {
    765809    clear: left;
    766810}
    767811
    768 .tablenav .search-plugins input[name="s"],
    769 .tagsdiv .newtag {
     812.tablenav .search-plugins input[name="s"] {
    770813    float: left;
    771814    margin: 0 4px 0 0;
     815}
     816
     817.tagsdiv .newtag {
     818    margin: 0;
    772819}
    773820
    … …  
    820867.wp-tags-autocomplete .ui-state-focus,
    821868.wp-tags-autocomplete [aria-selected="true"] {
    822     background-color: #2271b1;
     869    background-color: var(--wp-admin-theme-color);
    823870    color: #fff;
    824871    /* Only visible in Windows High Contrast mode */
    … …  
    11761223    width: 56px;
    11771224    margin: -2px 0;
     1225    min-height: 24px;
     1226    line-height: 1.71428571; /* 24px for 14px font size */
    11781227}
    11791228
    … …  
    13671416
    13681417.request-filesystem-credentials-dialog .ftp-password em {
    1369     color: #8c8f94;
     1418    color: #757575;
    13701419}
    13711420
    … …  
    15321581    input[type="week"] {
    15331582        -webkit-appearance: none;
    1534         padding: 3px 10px;
    1535         /* Only necessary for IE11 */
     1583        padding: 0 12px;
    15361584        min-height: 40px;
     1585        line-height: 2.5; /* 40px for 16px font */
    15371586    }
    15381587
    … …  
    15861635        min-height: 40px;
    15871636        font-size: 16px;
    1588         line-height: 1.625; /* 26px */
    1589         padding: 5px 24px 5px 8px;
     1637        line-height: 2.5; /* 40px for 16px font */
     1638        padding: 0 24px 0 12px;
    15901639    }
    15911640

  • trunk/src/wp-admin/css/list-tables.css

    r61480 r61645  
    669669    font-size: 13px;
    670670    text-align: center;
     671    min-height: 32px;
     672    line-height: 2.30769231; /* 30px for 32px height with 13px font */
     673    padding: 0 8px;
    671674}
    672675
    … …  
    681684.tablenav {
    682685    clear: both;
    683     height: 30px;
     686    height: 32px;
    684687    margin: 6px 0 4px;
    685     padding-top: 5px;
    686688    vertical-align: middle;
    687689}
    … …  
    705707    display: inline-block;
    706708    vertical-align: baseline;
    707     min-width: 30px;
    708     min-height: 30px;
     709    min-width: 32px;
     710    min-height: 32px;
    709711    margin: 0;
    710712    padding: 0 4px;
    711713    font-size: 16px;
    712     line-height: 1.625; /* 26px */
     714    line-height: 1.875; /* 30px for 32px height */
    713715    text-align: center;
    714716}
    … …  
    14221424    content: "\f463" / '';
    14231425    display: inline-block;
    1424     font: normal 20px/1 dashicons;
    1425     margin: -3px 5px 0 -2px;
     1426    font: normal 20px/1.9 dashicons; /* line-height 1.9 = 38px to match button */
     1427    margin: 0 5px 0 -2px;
    14261428    -webkit-font-smoothing: antialiased;
    14271429    -moz-osx-font-smoothing: grayscale;
    1428     vertical-align: middle;
     1430    vertical-align: top;
    14291431}
    14301432

  • trunk/src/wp-admin/css/login.css

    r61636 r61645  
    128128    width: 1.25rem;
    129129    height: 1.25rem;
    130     top: 0.25rem;
    131130}
    132131

  • trunk/src/wp-admin/css/media.css

    r61480 r61645  
    558558.media-frame.mode-grid .media-toolbar select {
    559559    margin: 0 10px 0 0;
     560    min-height: 32px;
     561    line-height: 2.14285714; /* 30px for 32px height with 14px font */
     562    padding: 0 24px 0 8px;
     563}
     564
     565.media-frame.mode-grid .media-toolbar input[type="search"] {
     566    min-height: 32px;
     567    line-height: 2.14285714; /* 30px for 32px height with 14px font */
     568    padding: 0 8px;
     569}
     570
     571.media-frame.mode-grid .media-toolbar .button {
     572    min-height: 32px;
     573    line-height: 2.30769231; /* 30px for 32px height with 13px font */
     574    padding: 0 12px;
    560575}
    561576
    … …  
    763778}
    764779
     780.edit-attachment-frame .button {
     781    min-height: 32px;
     782    line-height: 2.30769231; /* 30px for 32px height with 13px font */
     783    padding: 0 12px;
     784}
     785
    765786.edit-attachment-frame .wp-media-wrapper {
    766787    margin-bottom: 12px;

  • trunk/src/wp-admin/css/nav-menus.css

    r59948 r61645  
    429429.list-controls {
    430430    float: left;
    431     margin-top: 5px;
    432431}
    433432
    … …  
    868867
    869868#nav-menus-frame,
    870 .button-controls,
    871869#menu-item-url-wrap,
    872870#menu-item-name-wrap {
    873871    display: block;
     872}
     873
     874.button-controls {
     875    display: flex;
     876    align-items: center;
     877    justify-content: space-between;
    874878}
    875879

  • trunk/src/wp-admin/css/themes.css

    r61598 r61645  
    8484    height: 18px;
    8585    margin: 0;
    86     padding: 15px;
     86    padding: 16px 15px;
    8787    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    8888    overflow: hidden;
    … …  
    113113}
    114114
     115/* Use compact size for space-constrained theme cards */
    115116.theme-browser .theme .theme-actions .button {
    116117    float: none;
    117118    margin-left: 3px;
     119    min-height: 32px;
     120    line-height: 2.30769231; /* 30px for 32px min-height */
     121    padding: 0 12px;
     122}
     123
     124/* Secondary buttons need white background for visibility on semi-transparent overlay */
     125.theme-browser .theme .theme-actions .button:not(.button-primary) {
     126    background: #fff;
     127}
     128
     129.theme-browser .theme .theme-actions .button:not(.button-primary):hover {
     130    background: #f0f0f0;
     131}
     132
     133.theme-browser .theme .theme-actions .button:not(.button-primary):focus {
     134    background: #fff;
    118135}
    119136
    … …  
    212229    background: #1d2327;
    213230    color: #fff;
    214     padding-right: 110px;
     231    padding-right: 115px;
    215232    font-weight: 300;
    216233    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    … …  
    241258    transform: translateY(-50%);
    242259    right: 0;
    243     padding: 9px 15px;
     260    padding: 9px 12px;
    244261    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
    245262}
    … …  
    247264.theme-browser .theme.active .theme-actions .button-primary {
    248265    margin-right: 0;
     266}
     267
     268/* Active theme secondary buttons need white background for visibility on dark overlay */
     269.theme-browser .theme.active .theme-actions .button:not(.button-primary) {
     270    background: #fff;
     271}
     272
     273.theme-browser .theme.active .theme-actions .button:not(.button-primary):hover {
     274    background: #f0f0f0;
     275}
     276
     277.theme-browser .theme.active .theme-actions .button:not(.button-primary):focus {
     278    background: #fff;
    249279}
    250280
    … …  
    13551385.background-position-control .button-group:last-child > label:last-child .dashicons {
    13561386    transform: rotate( 45deg );
    1357 }
    1358 
    1359 .background-position-control .button-group .dashicons {
    1360     margin-top: 9px;
    13611387}
    13621388
    … …  
    14761502
    14771503.wp-full-overlay-sidebar .wp-full-overlay-header a.back {
    1478     margin-top: 9px;
     1504    margin-top: 3px; /* Vertically center 40px button in 45px header */
    14791505}
    14801506
    … …  
    19241950.theme-install-overlay .wp-full-overlay-header .button {
    19251951    float: right;
    1926     margin: 8px 10px 0 0;
     1952    margin: 3px 10px 0 0; /* Vertically center 40px button in 45px header */
    19271953}
    19281954

  • trunk/src/wp-includes/css/buttons.css

    r57553 r61645  
    4747    text-decoration: none;
    4848    font-size: 13px;
    49     line-height: 2.15384615; /* 28px */
    50     min-height: 30px;
     49    font-weight: 500;
     50    line-height: 2.92307692; /* 38px - allows 40px min-height with 1px border */
     51    min-height: 40px;
    5152    margin: 0;
    52     padding: 0 10px;
     53    padding: 0 16px;
    5354    cursor: pointer;
    5455    border-width: 1px;
    5556    border-style: solid;
    5657    -webkit-appearance: none;
    57     border-radius: 3px;
     58    border-radius: 2px;
    5859    white-space: nowrap;
    5960    box-sizing: border-box;
    … …  
    7071}
    7172
     73/* Compact size - 32px, for space-constrained contexts */
     74.wp-core-ui .button.button-compact,
     75.wp-core-ui .button-group.button-compact .button {
     76    line-height: 2.30769231; /* 30px - allows 32px min-height with 1px border */
     77    min-height: 32px;
     78    padding: 0 12px;
     79}
     80
     81/* Small size - 24px */
     82.wp-core-ui .button.button-small,
     83.wp-core-ui .button-group.button-small .button {
     84    line-height: 2; /* 22px - allows 24px min-height with 1px border */
     85    min-height: 24px;
     86    padding: 0 8px;
     87    font-size: 11px;
     88}
     89
     90/* Large size - explicit 40px (same as default, for semantic clarity) */
    7291.wp-core-ui .button.button-large,
    7392.wp-core-ui .button-group.button-large .button {
    74     min-height: 32px;
    75     line-height: 2.30769231; /* 30px */
    76     padding: 0 12px;
    77 }
    78 
    79 .wp-core-ui .button.button-small,
    80 .wp-core-ui .button-group.button-small .button {
    81     min-height: 26px;
    82     line-height: 2.18181818; /* 24px */
    83     padding: 0 8px;
    84     font-size: 11px;
     93    line-height: 2.92307692; /* 38px - allows 40px min-height with 1px border */
     94    min-height: 40px;
     95    padding: 0 16px;
    8596}
    8697
    … …  
    8899.wp-core-ui .button-group.button-hero .button {
    89100    font-size: 14px;
    90     min-height: 46px;
    91     line-height: 3.14285714;
     101    line-height: 3.28571429; /* 46px - allows 48px min-height with 1px border */
     102    min-height: 48px;
    92103    padding: 0 36px;
    93104}
    … …  
    95106.wp-core-ui .button.hidden {
    96107    display: none;
     108}
     109
     110/* Button Icons - Dashicons centering for all button sizes */
     111/* Dashicons are 20px font-size, so line-height = target-height / 20 */
     112.wp-core-ui .button .dashicons,
     113.wp-core-ui .button-primary .dashicons,
     114.wp-core-ui .button-secondary .dashicons {
     115    line-height: 1.9; /* 38px (20px * 1.9) - matches default button */
     116    vertical-align: top;
     117}
     118
     119.wp-core-ui .button.button-compact .dashicons {
     120    line-height: 1.5; /* 30px (20px * 1.5) - matches compact button */
     121}
     122
     123.wp-core-ui .button.button-small .dashicons {
     124    line-height: 1.1; /* 22px (20px * 1.1) - matches small button */
     125}
     126
     127.wp-core-ui .button.button-hero .dashicons {
     128    line-height: 2.3; /* 46px (20px * 2.3) - matches hero button */
    97129}
    98130
    … …  
    116148.wp-core-ui .button,
    117149.wp-core-ui .button-secondary {
    118     color: #2271b1;
    119     border-color: #2271b1;
    120     background: #f6f7f7;
     150    color: var(--wp-admin-theme-color);
     151    border-color: var(--wp-admin-theme-color);
     152    background: transparent;
    121153    vertical-align: top;
    122154}
    … …  
    128160.wp-core-ui .button.hover,
    129161.wp-core-ui .button:hover,
    130 .wp-core-ui .button-secondary:hover{
    131     background: #f0f0f1;
    132     border-color: #0a4b78;
    133     color: #0a4b78;
     162.wp-core-ui .button-secondary:hover {
     163    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
     164    border-color: var(--wp-admin-theme-color-darker-20);
     165    color: var(--wp-admin-theme-color-darker-20);
    134166}
    135167
    … …  
    137169.wp-core-ui .button:focus,
    138170.wp-core-ui .button-secondary:focus {
    139     background: #f6f7f7;
    140     border-color: #3582c4;
    141     color: #0a4b78;
    142     box-shadow: 0 0 0 1px #3582c4;
     171    background: transparent;
     172    border-color: var(--wp-admin-theme-color);
     173    color: var(--wp-admin-theme-color);
     174    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
    143175    /* Only visible in Windows High Contrast mode */
    144     outline: 2px solid transparent;
     176    outline: 1px solid transparent;
    145177    /* Reset inherited offset from Gutenberg */
    146178    outline-offset: 0;
    … …  
    150182.wp-core-ui .button:active,
    151183.wp-core-ui .button-secondary:active {
    152     background: #f6f7f7;
    153     border-color: #8c8f94;
     184    background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
     185    border-color: var(--wp-admin-theme-color-darker-20);
     186    color: var(--wp-admin-theme-color-darker-20);
    154187    box-shadow: none;
    155188}
    … …  
    158191.wp-core-ui .button.active,
    159192.wp-core-ui .button.active:hover {
    160     background-color: #dcdcde;
    161     color: #135e96;
    162     border-color: #0a4b78;
    163     box-shadow: inset 0 2px 5px -3px #0a4b78;
     193    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
     194    color: var(--wp-admin-theme-color);
     195    border-color: var(--wp-admin-theme-color);
     196    box-shadow: none;
    164197}
    165198
    166199.wp-core-ui .button.active:focus {
    167     border-color: #3582c4;
    168     box-shadow:
    169         inset 0 2px 5px -3px #0a4b78,
    170         0 0 0 1px #3582c4;
     200    border-color: var(--wp-admin-theme-color);
     201    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
    171202}
    172203
    … …  
    178209.wp-core-ui .button-secondary.disabled,
    179210.wp-core-ui .button-disabled {
    180     color: #a7aaad !important;
    181     border-color: #dcdcde !important;
    182     background: #f6f7f7 !important;
     211    color: #949494 !important;
     212    border-color: #dddddd !important;
     213    background: transparent !important;
    183214    box-shadow: none !important;
    184215    cursor: default;
    … …  
    202233    text-align: left;
    203234    /* Mimics the default link style in common.css */
    204     color: #2271b1;
     235    color: var(--wp-admin-theme-color);
    205236    text-decoration: underline;
    206237    transition-property: border, background, color;
    … …  
    211242.wp-core-ui .button-link:hover,
    212243.wp-core-ui .button-link:active {
    213     color: #135e96;
     244    color: var(--wp-admin-theme-color-darker-20);
    214245}
    215246
    216247.wp-core-ui .button-link:focus {
    217     color: #043959;
    218     box-shadow: 0 0 0 2px #2271b1;
     248    color: var(--wp-admin-theme-color);
     249    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     250    border-radius: 2px;
    219251    /* Only visible in Windows High Contrast mode */
    220     outline: 2px solid transparent;
     252    outline: 1px solid transparent;
    221253}
    222254
    … …  
    242274
    243275.wp-core-ui .button-primary {
    244     background: #2271b1;
    245     border-color: #2271b1;
     276    background: var(--wp-admin-theme-color);
     277    border-color: var(--wp-admin-theme-color);
    246278    color: #fff;
    247279    text-decoration: none;
    … …  
    250282
    251283.wp-core-ui .button-primary.hover,
    252 .wp-core-ui .button-primary:hover,
     284.wp-core-ui .button-primary:hover {
     285    background: var(--wp-admin-theme-color-darker-10);
     286    border-color: var(--wp-admin-theme-color-darker-10);
     287    color: #fff;
     288}
     289
    253290.wp-core-ui .button-primary.focus,
    254291.wp-core-ui .button-primary:focus {
    255     background: #135e96;
    256     border-color: #135e96;
     292    background: var(--wp-admin-theme-color);
     293    border-color: var(--wp-admin-theme-color);
    257294    color: #fff;
    258 }
    259 
    260 .wp-core-ui .button-primary.focus,
    261 .wp-core-ui .button-primary:focus {
    262295    box-shadow:
    263         0 0 0 1px #fff,
    264         0 0 0 3px #2271b1;
     296        0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color),
     297        inset 0 0 0 1px #fff;
     298    outline: 1px solid transparent;
    265299}
    266300
    … …  
    269303.wp-core-ui .button-primary.active:focus,
    270304.wp-core-ui .button-primary:active {
    271     background: #135e96;
    272     border-color: #135e96;
     305    background: var(--wp-admin-theme-color-darker-20);
     306    border-color: var(--wp-admin-theme-color-darker-20);
    273307    box-shadow: none;
    274308    color: #fff;
    … …  
    279313.wp-core-ui .button-primary-disabled,
    280314.wp-core-ui .button-primary.disabled {
    281     color: #a7aaad !important;
    282     background: #f6f7f7 !important;
    283     border-color: #dcdcde !important;
     315    color: #949494 !important;
     316    background: #f0f0f0 !important;
     317    border-color: #f0f0f0 !important;
    284318    box-shadow: none !important;
    285319    text-shadow: none !important;
    … …  
    310344
    311345.wp-core-ui .button-group > .button:first-child {
    312     border-radius: 3px 0 0 3px;
     346    border-radius: 2px 0 0 2px;
    313347}
    314348
    315349.wp-core-ui .button-group > .button:last-child {
    316     border-radius: 0 3px 3px 0;
     350    border-radius: 0 2px 2px 0;
    317351}
    318352
    … …  
    354388    a.preview {
    355389        padding: 0 14px;
    356         line-height: 2.71428571; /* 38px */
     390        line-height: 2.71428571; /* 38px - allows 40px min-height with 1px border */
    357391        font-size: 14px;
    358392        vertical-align: middle;
    … …  
    361395    }
    362396
     397    /* Responsive Button Icons - Dashicons centering */
     398    .wp-core-ui .button .dashicons,
     399    .wp-core-ui .button-primary .dashicons,
     400    .wp-core-ui .button-secondary .dashicons {
     401        line-height: 1.9; /* 38px (20px * 1.9) - matches responsive button */
     402    }
     403
    363404    /* Copy attachment URL button in the legacy edit media page. */
    364405    .wp-core-ui .copy-to-clipboard-container .copy-attachment-url {
    … …  
    367408
    368409    #media-upload.wp-core-ui .button {
    369         padding: 0 10px 1px;
     410        padding: 0 10px;
     411        line-height: 1.69230769; /* 22px */
    370412        min-height: 24px;
    371         line-height: 22px;
    372413        font-size: 13px;
    373414    }
    … …  
    387428    .wp-core-ui.wp-customizer .button {
    388429        font-size: 13px;
    389         line-height: 2.15384615; /* 28px */
    390         min-height: 30px;
     430        line-height: 2.30769231; /* 30px */
     431        min-height: 32px;
    391432        margin: 0;
    392433        vertical-align: inherit;
    … …  
    405446
    406447    .interim-login .button.button-large {
    407         min-height: 30px;
    408         line-height: 2;
    409         padding: 0 12px 2px;
    410     }
    411 
    412 }
     448        min-height: 32px;
     449        line-height: 2.30769231; /* 30px */
     450        padding: 0 12px;
     451    }
     452
     453}

  • trunk/src/wp-includes/css/editor.css

    r61480 r61645  
    11611161    line-height: 1.46153846;
    11621162    height: 20px;
    1163     margin: 5px 0 0 5px;
     1163    margin: 15px 0 0 5px;
    11641164    padding: 3px 8px 4px;
    11651165    border: 1px solid #dcdcde;

  • trunk/src/wp-includes/css/media-views.css

    r61636 r61645  
    6767.media-frame input,
    6868.media-frame textarea {
    69     padding: 6px 8px;
     69    padding: 8px 12px;
    7070}
    7171
    7272.media-frame select,
    7373.wp-admin .media-frame select {
    74     min-height: 30px;
     74    min-height: 40px;
    7575    vertical-align: middle;
    7676}
    … …  
    9393.media-frame select {
    9494    box-shadow: 0 0 0 transparent;
    95     border-radius: 4px;
    96     border: 1px solid #8c8f94;
     95    border-radius: 2px;
     96    border: 1px solid #949494;
    9797    background-color: #fff;
    98     color: #2c3338;
     98    color: #1e1e1e;
    9999    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    100     font-size: 13px;
    101     line-height: 1.38461538;
     100    font-size: 14px;
     101    line-height: 1.42857143;
    102102}
    103103
    … …  
    115115.media-frame input[type="url"],
    116116.media-frame input[type="week"] {
    117     padding: 0 8px;
    118     /* inherits font size 13px */
    119     line-height: 2.15384615; /* 28px */
     117    padding: 0 12px;
     118    /* inherits font size 14px */
     119    line-height: 2.71428571; /* 38px for 40px min-height */
     120    min-height: 40px;
    120121}
    121122
    … …  
    134135.media-frame textarea:focus,
    135136.media-frame select:focus {
    136     border-color: #3582c4;
    137     box-shadow: 0 0 0 1px #3582c4;
     137    border-color: var(--wp-admin-theme-color);
     138    /* Expand border by 0.5px for total 1.5px effect */
     139    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
    138140    outline: 2px solid transparent;
    139141}
    … …  
    143145.media-frame input[readonly],
    144146.media-frame textarea[readonly] {
    145     background-color: #f0f0f1;
     147    background-color: #f0f0f0;
     148    border-color: #cccccc;
     149    color: #949494;
    146150}
    147151
    … …  
    268272}
    269273
     274.media-modal-content .button,
     275.media-modal-content .button.button-large {
     276    min-height: 32px;
     277    line-height: 2.30769231; /* 30px for 32px height with 13px font */
     278    padding: 0 12px;
     279}
     280
     281.media-toolbar input[type="text"],
     282.media-toolbar input[type="search"],
     283.media-toolbar select {
     284    min-height: 32px;
     285    line-height: 2.14285714; /* 30px for 32px height with 14px font */
     286}
     287
     288.media-toolbar input[type="text"],
     289.media-toolbar input[type="search"] {
     290    padding: 0 8px;
     291}
     292
     293.media-toolbar select {
     294    padding: 0 24px 0 8px;
     295}
     296
    270297.media-modal-content .media-frame select.attachment-filters {
    271298    margin-top: 32px;
    … …  
    298325.media-frame-toolbar .media-toolbar {
    299326    top: auto;
    300     bottom: -47px;
     327    bottom: -60px;
    301328    height: auto;
    302329    overflow: visible;
    303330    border-top: 1px solid #dcdcde;
     331    background: #fff;
     332}
     333
     334.media-frame-toolbar .media-toolbar-primary > .media-button,
     335.media-frame-toolbar .media-toolbar-primary > .media-button-group {
     336    margin-top: 14px;
     337    margin-bottom: 14px;
    304338}
    305339
    … …  
    898932 */
    899933.media-frame select.attachment-filters {
     934    min-height: 32px;
     935    line-height: 2.14285714; /* 30px for 32px height with 14px font */
     936    padding: 0 24px 0 8px;
    900937    margin-top: 11px;
    901938    margin-right: 2%;
    … …  
    27852822
    27862823    .media-frame-toolbar .media-toolbar {
    2787         bottom: -54px;
     2824        bottom: -60px;
    27882825    }
    27892826
Note: See TracChangeset for help on using the changeset viewer.