WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/20/2021 05:49:28 AM (3 years ago)
Author:
SergeyBiryukov
Message:

Twenty Twenty-One: Clean up Button styles.

This change restructures the Button element styles for better a11y and expected color behaviors. Here what has changed:

  • The button-style() mixin is now the single source or truth for how Button should look site-wide.
    • Button Block, File Block, and Search form Blocks all rely on this one mixin.
    • The same styles is also applied to the <button> element which appears in widgets, the 404 search form and comments form.
  • Improves expected button styles for various conditions and contexts as follows:
    • User color palette selections for Buttons are retained regardless of a parent block’s color settings or dark-mode.
    • Supports both Default/Filled styles and Outline styles.
    • More consistent :hover and :active styles.
    • :focus styles are now always visible and legible.
  • Adds a --local-color color variable to scope color relationships to nested blocks.
  • Reduces selectors in style.css output.
  • 1:1 experience between editor and front end button styles.
  • Properly supports Dark-mode.

Props allancole, poena, scruffian, megphillips91.
Fixes #51927.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss

    r49574 r49987  
    88    }
    99
     10    &.wp-block-search__button-inside .wp-block-search__inside-wrapper,
    1011    .wp-block-search__input {
    1112        border: var(--form--border-width) solid var(--form--border-color);
    … …  
    2223        }
    2324
    24         .has-background.has-white-background-color &,
    25         .has-background.has-green-background-color &,
    26         .has-background.has-blue-background-color &,
    27         .has-background.has-purple-background-color &,
    28         .has-background.has-red-background-color &,
    29         .has-background.has-orange-background-color &,
    30         .has-background.has-yellow-background-color & {
    31 
    32             .is-dark-theme & {
    33                 border-color: var(--form--color-text);
    34             }
    35         }
    36 
    37         .has-background.has-gray-background-color &,
    38         .has-background.has-dark-gray-background-color &,
    39         .has-background.has-black-background-color & {
    40             border-color: var(--global--color-white);
     25        .has-background & {
     26            border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    4127        }
    4228    }
    … …  
    4632        box-shadow: none;
    4733        margin-left: 0;
    48         background-color: transparent;
    49         color: var(--button--color-text-hover);
    50 
    51         &:hover {
    52             color: var(--button--color-text);
    53             background-color: var(--button--color-background);
    54         }
    5534
    5635        &.has-icon {
    5736            padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
     37            display: inherit;
    5838
    5939            svg {
    … …  
    6343        }
    6444
    65         .has-background.has-gray-background-color &,
    66         .has-background.has-dark-gray-background-color &,
    67         .has-background.has-black-background-color & {
    68             color: var(--global--color-white);
    69             border-color: currentColor;
     45        &:hover,
     46        &:active {
    7047
    71             &:hover {
    72                 color: var(--global--color-white);
    73                 background-color: var(--button--color-background);
    74                 border-color: var(--global--color-white);
     48            .has-background & {
     49                background-color: var(--local--color-background, var(--global--color-background)) !important;
     50                color: var(--local--color-primary, var(--global--color-primary)) !important;
     51            }
    7552
    76                 .is-dark-theme & {
    77                     color: var(--button--color-text);
    78                     background-color: var(--button--color-background);
    79                 }
     53            .has-text-color & {
     54                color: var(--local--color-primary, var(--global--color-primary)) !important;
    8055            }
    8156        }
    8257
    83         .has-background.has-white-background-color &,
    84         .has-background.has-green-background-color &,
    85         .has-background.has-blue-background-color &,
    86         .has-background.has-purple-background-color &,
    87         .has-background.has-red-background-color &,
    88         .has-background.has-orange-background-color &,
    89         .has-background.has-yellow-background-color & {
    90 
    91             &:hover {
    92                 color: var(--global--color-white);
    93                 background-color: var(--form--border-color);
    94                 border-color: var(--form--border-color);
    95             }
    96 
    97             .is-dark-theme & {
    98                 color: var(--form--color-text);
    99                 border-color: currentColor;
    100 
    101                 &:hover {
    102                     color: var(--global--color-white);
    103                     background-color: var(--button--color-text);
    104                     border-color: var(--button--color-text);
    105                 }
    106             }
     58        // Remove :focus styles in the editor
     59        &:focus {
     60            outline-offset: inherit;
     61            outline: inherit;
    10762        }
    10863    }
    … …  
    11065    &.wp-block-search__button-inside {
    11166
    112         .wp-block-search__input,
    113         .has-background.has-white-background-color & .wp-block-search__input,
    114         .has-background.has-green-background-color & .wp-block-search__input,
    115         .has-background.has-blue-background-color & .wp-block-search__input,
    116         .has-background.has-purple-background-color & .wp-block-search__input,
    117         .has-background.has-red-background-color & .wp-block-search__input,
    118         .has-background.has-orange-background-color & .wp-block-search__input,
    119         .has-background.has-yellow-background-color & .wp-block-search__input {
     67        .wp-block-search__inside-wrapper {
     68            padding: var(--form--border-width);
     69        }
     70
     71        .wp-block-search__input {
    12072            border: none;
    12173        }
    12274
    123         &.wp-block-search__text-button {
     75        &.wp-block-search__text-button,
     76        &.wp-block-search__icon-button {
    12477
    12578            .wp-block-search__button {
    126                 // Match the text button size with the icon button.
    127                 padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     79                // Search button always needs black contrast against white form background
     80                &:hover {
     81                    color: var(--global--color-dark-gray);
     82                }
     83
     84                .is-dark-theme & {
     85                    color: var(--global--color-dark-gray);
     86
     87                    &:hover {
     88                        background-color: var(--global--color-dark-gray);
     89                        color: var(--global--color-white);
     90                    }
     91                }
    12892            }
    12993        }
    13094
    131         .wp-block-search__button {
    132 
    133             .is-dark-theme & {
    134                 color: var(--button--color-text);
    135                 border-color: currentColor;
    136 
    137                 &:hover {
    138                     color: var(--global--color-white);
    139                     background-color: var(--button--color-text);
    140                     border-color: var(--button--color-text);
    141                 }
    142             }
    143 
    144             .has-background.has-gray-background-color &,
    145             .has-background.has-dark-gray-background-color &,
    146             .has-background.has-black-background-color & {
    147                 color: var(--button--color-text-hover);
    148                 border-color: currentColor;
    149 
    150                 &:hover {
    151                     color: var(--global--color-white);
    152                     background-color: var(--button--color-background);
    153                     border-color: var(--button--color-background);
    154                 }
    155 
    156                 .is-dark-theme & {
    157                     color: var(--button--color-text);
    158                     border-color: currentColor;
    159 
    160                     &:hover {
    161                         color: var(--global--color-white);
    162                         background-color: var(--button--color-text);
    163                         border-color: var(--button--color-text);
    164                     }
    165                 }
    166             }
     95        &.wp-block-search__text-button .wp-block-search__button {
     96            // Match the text button size with the icon button.
     97            padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    16798        }
    16899    }
Note: See TracChangeset for help on using the changeset viewer.