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/file/_editor.scss

    r49574 r49987  
    1616        @include button-style();
    1717        display: inline-block;
    18 
    19         &:hover {
    20             color: var(--button--color-text-hover);
    21             background: transparent;
     18       
     19        // Remove :focus styles in the editor
     20        &:focus {
     21            outline-offset: inherit;
     22            outline: inherit;
    2223        }
    2324    }
Note: See TracChangeset for help on using the changeset viewer.