WordPress.org
Get WordPress

Make WordPress Core

Changeset 61645


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

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.