Changeset 49987 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss

Timestamp:

01/20/2021 05:49:28 AM (5 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/_editor.scss (modified) (1 diff)

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

@@ -16 +16 @@
         @include button-style();
         display: inline-block;
-
-        &:hover {
-            color: var(--button--color-text-hover);
-            background: transparent;
+        
+        // Remove :focus styles in the editor
+        &:focus {
+            outline-offset: inherit;
+            outline: inherit;
         }
     }