WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/20/2021 05:49:28 AM (6 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/button/_editor.scss

    r49574 r49987  
    2828        &:not(.is-style-outline) {
    2929
    30                 .wp-block-button__link {
     30                .wp-block-button__link:not(:hover):not(:active) {
    3131
    32                         &:active {
    33                                 color: var(--button--color-text-active) !important;
    34                                 background: transparent !important;
    35                                 border-color: var(--button--color-background);
     32                        // Text colors
     33                        &:not(.has-text-color) {
     34                                color: var(--global--color-background);
     35
     36                                // Nested
     37                                .has-background & {
     38                                        color: var(--local--color-background, var(--global--color-background));
     39
     40                                        &.has-background {
     41                                                color: var(--global--color-primary);
     42                                        }
     43                                }
    3644                        }
    3745
    38                         &:hover {
    39                                 color: var(--button--color-text-hover) !important;
    40                                 background: transparent !important;
    41                                 border-color: var(--button--color-background);
     46                        // Background-colors
     47                        &:not(.has-background) {
     48                                background-color: var(--global--color-primary);
     49
     50                                // Nested
     51                                .has-background & {
     52                                        background-color: var(--local--color-primary, var(--global--color-primary));
     53                                }
    4254                        }
     55                }
     56
     57                // Hover Button color should match parent element foreground color
     58                .wp-block-button__link:hover,
     59                .wp-block-button__link:active {
     60                        border-color: currentColor !important;
     61                        background-color: transparent !important;
     62                        color: inherit !important;
     63                }
     64               
     65                // Remove :focus styles in the editor
     66                .wp-block-button__link:focus {
     67                        outline-offset: inherit;
     68                        outline: inherit;
    4369                }
    4470        }
    … …  
    4773        &.is-style-outline {
    4874
    49                 .wp-block-button__link {
    50                         color: var(--button--color-background);
    51                         background: transparent;
    52                         border: var(--button--border-width) solid currentColor;
    53                         padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     75                .wp-block-button__link:not(:hover):not(:active) {
    5476
    55                         &:active,
    56                         &:hover {
    57                                 background-color: var(--button--color-background);
    58                                 color: var(--button--color-text);
    59                                 border-color: var(--button--color-background);
     77                        // Border colors
     78                        &:not(.has-text-color),
     79                        &:not(.has-background),
     80                        &.has-background {
     81                                border-color: currentColor;
     82                        }
     83
     84                        // Text colors
     85                        &:not(.has-text-color) {
     86                                color: var(--global--color-primary);
     87
     88                                // Nested
     89                                .has-background & {
     90                                        color: var(--local--color-primary, var(--global--color-primary));
     91                                }
    6092                        }
    6193
    6294                        &.has-background {
    63                                 border-color: var(--button--color-background);
    64 
    65                                 &:active,
    66                                 &:hover {
    67                                         background-color: var(--button--color-background) !important;
     95                                // Nested
     96                                .has-background &:not(.has-text-color) {
     97                                        color: inherit;
    6898                                }
    6999                        }
    70100
    71                         &.has-background:not(.has-text-color) {
    72                                 color: var(--global--color-dark-gray);
     101                        // Background-colors
     102                        &:not(.has-background) {
     103                                background-color: transparent;
     104                        }
     105                }
     106
     107                // Hover Button color should match default button style
     108                .wp-block-button__link:hover,
     109                .wp-block-button__link:active {
     110
     111                        background-color: var(--global--color-primary) !important;
     112                        border-color: transparent !important;
     113                        color: var(--global--color-background) !important;
     114
     115                        .has-background & {
     116                                background-color: var(--local--color-primary, var(--global--color-primary)) !important;
     117                                color: var(--local--color-background, var(--global--color-background)) !important;
    73118                        }
    74119
    75                         &.has-background.has-gray-background-color:not(.has-text-color),
    76                         &.has-background.has-dark-gray-background-color:not(.has-text-color),
    77                         &.has-background.has-black-background-color:not(.has-text-color) {
    78                                 color: var(--global--color-white);
     120                        .has-text-color & {     
     121                                color: var(--local--color-background, var(--global--color-background)) !important;
    79122                        }
     123                }
    80124
    81                         .is-dark-theme & {
    82 
    83                                 &:not(.has-text-color) {
    84 
    85                                         &.has-background.has-white-background-color,
    86                                         &.has-background.has-green-background-color,
    87                                         &.has-background.has-blue-background-color,
    88                                         &.has-background.has-purple-background-color,
    89                                         &.has-background.has-red-background-color,
    90                                         &.has-background.has-orange-background-color,
    91                                         &.has-background.has-yellow-background-color {
    92                                                 color: var(--global--color-dark-gray);
    93                                         }
    94                                 }
    95                         }
    96 
    97                         &.has-text-color {
    98                                 border-color: currentColor;
    99 
    100                                 &:active,
    101                                 &:hover {
    102                                         color: var(--button--color-text) !important;
    103                                         border-color: var(--button--color-background);
    104                                 }
    105                         }
     125                // Remove :focus styles in the editor
     126                .wp-block-button__link:focus {
     127                        outline-offset: inherit;
     128                        outline: inherit;
    106129                }
    107130        }
Note: See TracChangeset for help on using the changeset viewer.