Changeset 49987 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss

Timestamp:

01/20/2021 05:49:28 AM (4 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:

• trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss (modified) (1 diff)

trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss

@@ -118 +118 @@
     .search-submit {
         margin-left: 0;
-        background-color: transparent;
-        color: var(--button--color-text-hover);
         margin-bottom: calc(0.5 * var(--global--spacing-vertical));
-
-        &:hover {
-            background-color: var(--button--color-background);
-            color: var(--button--color-text);
-        }
     }
 }