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/_style.scss

    r49726 r49987  
    2929        }
    3030
    31         .has-background &,
    32         [class*="background-color"] &,
    33         [style*="background-color"] &,
    34         .wp-block-cover[style*="background-image"] & {
    35             border-color: currentColor;
    36         }
    37 
    38         .has-background.has-gray-background-color &,
    39         .has-background.has-dark-gray-background-color &,
    40         .has-background.has-black-background-color & {
    41             border-color: var(--global--color-white);
     31        .has-background & {
     32            border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    4233        }
    4334    }
     
    4536    button.wp-block-search__button {
    4637        margin-left: 0;
    47         background-color: transparent;
    48         color: var(--button--color-text-hover);
    4938        line-height: 1;
    50 
    51         &:hover {
    52             background-color: var(--button--color-background);
    53             color: var(--button--color-text);
    54         }
    5539
    5640        &.has-icon {
     
    6448        }
    6549
    66         .has-background.has-gray-background-color &,
    67         .has-background.has-dark-gray-background-color &,
    68         .has-background.has-black-background-color & {
    69             color: var(--global--color-white);
    70             border-color: currentColor;
     50        &:hover,
     51        &:active {
    7152
    72             &:hover {
    73                 background-color: var(--button--color-background);
    74                 border-color: var(--global--color-white);
    75                 color: var(--global--color-white);
     53            .has-background & {
     54                background-color: var(--local--color-background, var(--global--color-background)) !important;
     55                color: var(--local--color-primary, var(--global--color-primary)) !important;
     56            }
    7657
    77                 .is-dark-theme & {
    78                     color: var(--button--color-text);
    79                 }
    80             }
    81         }
    82 
    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             border-color: currentColor;
    91             color: currentColor;
    92 
    93             &:hover {
    94                 background-color: var(--form--border-color);
    95                 border-color: var(--form--border-color);
    96                 color: var(--global--color-white);
    97 
    98                 .is-dark-theme & {
    99                     border-color: var(--button--color-text);
    100                     background-color: var(--button--color-text);
    101                     color: var(--button--color-background);
    102                 }
     58            .has-text-color & {
     59                color: var(--local--color-primary, var(--global--color-primary)) !important;
    10360            }
    10461        }
     
    11168            border: var(--form--border-width) solid var(--form--border-color);
    11269            border-radius: var(--form--border-radius);
     70            padding: var(--form--border-width);
     71
     72            .has-background & {
     73                border-color: var(--local--color-primary, var(--global--color-primary)) !important;
     74            }
    11375
    11476            .wp-block-search__input {
     77                margin-left: 0;
    11578                margin-right: 0;
     79                padding-left: var(--form--spacing-unit);
    11680
     81                // Add outline for focus styles to override default
    11782                &:focus {
     83                    color: var(--form--color-text);
     84                    outline-offset: -2px;
    11885                    outline: 2px dotted var(--form--border-color);
    119                     outline-offset: -5px;
    120 
    121                     .is-dark-theme & {
    122                         outline-color: currentColor;
    123                     }
    12486                }
    12587            }
    126         }
    127 
    128         &.wp-block-search__text-button {
    12988
    13089            button.wp-block-search__button {
    131                 // Match the text button size with the icon button.
    13290                padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    133             }
    134         }
    13591
    136         button.wp-block-search__button {
    137 
    138             .has-background.has-gray-background-color &,
    139             .has-background.has-dark-gray-background-color &,
    140             .has-background.has-black-background-color & {
    141                 border-color: var(--button--color-background);
    142                 color: var(--button--color-background);
    143 
     92                // Search button always needs black contrast against white form background
    14493                &:hover {
    145                     color: var(--global--color-white);
     94                    color: var(--global--color-dark-gray);
    14695                }
    14796
    14897                .is-dark-theme & {
    149                     border-color: var(--button--color-text);
    150                     color: var(--button--color-text);
     98                    color: var(--global--color-dark-gray);
    15199
    152100                    &:hover {
     101                        background-color: var(--global--color-dark-gray);
    153102                        color: var(--global--color-white);
    154103                    }
    155104                }
    156             }
    157105
    158             .is-dark-theme & {
    159                 border-color: var(--button--color-text);
    160                 color: var(--button--color-text);
    161 
    162                 &:hover {
    163                     border-color: var(--button--color-text);
    164                     background-color: var(--button--color-text);
    165                     color: var(--button--color-background);
     106                &.has-icon {
     107                    padding: 6px calc(0.5 * var(--button--padding-horizontal));
    166108                }
    167109            }
Note: See TracChangeset for help on using the changeset viewer.