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/02-tools/mixins.scss

    r49726 r49987  
    2121// - Applies button styles to blocks and elements that share them.
    2222@mixin button-style() {
    23     line-height: var(--button--line-height);
    24     color: var(--button--color-text);
     23    border: var(--button--border-width) solid transparent;
     24    border-radius: var(--button--border-radius);
    2525    cursor: pointer;
     26    display: block;
    2627    font-weight: var(--button--font-weight);
    2728    font-family: var(--button--font-family);
    2829    font-size: var(--button--font-size);
    29     background-color: var(--button--color-background);
    30     border-radius: var(--button--border-radius);
    31     border: var(--button--border-width) solid var(--button--color-background);
     30    line-height: var(--button--line-height);
     31    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    3232    text-decoration: none;
    33     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    3433
    35     &:focus {
    36         background: transparent;
    37         outline-offset: -6px;
    38         outline: 2px dotted currentColor;
     34    // Standard Button Color Relationship Logic
     35    &:not(:hover):not(:active) {
    3936
    40         .is-dark-theme & {
    41             color: var(--button--color-background);
     37        // Text colors
     38        &:not(.has-text-color) {
     39            color: var(--global--color-background);
     40
     41            // Nested
     42            .has-background & {
     43                color: var(--local--color-background, var(--global--color-primary));
     44
     45                &.has-background {
     46                    color: var(--global--color-primary);
     47                }
     48            }
    4249        }
    4350
     51        // Background-colors
    4452        &:not(.has-background) {
    45             color: var(--button--color-text-hover);
     53            background-color: var(--global--color-primary);
     54
     55            // Nested
     56            .has-background & {
     57                background-color: var(--local--color-primary, var(--global--color-primary));
     58            }
    4659        }
    4760    }
    4861
     62    // Hover Button color should match parent element foreground color
     63    &:hover,
     64    &:active {
     65        background-color: transparent;
     66        border-color: currentColor;
     67        color: inherit;
     68    }
     69
     70    // Focus Button outline color should always match the current text color
     71    &:focus {
     72        outline-offset: -6px;
     73        outline: 2px dotted currentColor;
     74    }
     75
     76    // Disabled Button colors
    4977    &:disabled {
    5078        background-color: var(--global--color-white-50);
Note: See TracChangeset for help on using the changeset viewer.