Changeset 49987 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.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/05-blocks/file/_style.scss (modified) (1 diff)

trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss

@@ -5 +5 @@
     a.wp-block-file__button:focus,
     a.wp-block-file__button:hover {
-        color: var(--button--color-text-hover);
         opacity: inherit;
     }
 
-    a.wp-block-file__button:visited {
-        color: var(--button--color-text);
-
-        &:hover {
-            color: var(--button--color-text-hover);
-        }
-    }
-
-    .wp-block-file__button {
-        // Extend button style
-        @include button-style();
+    a.wp-block-file__button {
         display: inline-block;
     }