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

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:

• trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss (modified) (3 diffs)

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

@@ -5 +5 @@
 input[type="submit"],
 input[type="reset"],
-.wp-block-search__button,
-.wp-block-button .wp-block-button__link {
+.wp-block-search .wp-block-search__button,
+.wp-block-button .wp-block-button__link,
+.wp-block-file a.wp-block-file__button {
     // Extend button style
     @include button-style();
-}
-
-.site .button,
-input[type="submit"],
-input[type="reset"],
-.wp-block-search .wp-block-search__button,
-.wp-block-file .wp-block-file__button {
-
-    &:active {
-        color: var(--button--color-text-active);
-        background-color: var(--button--color-background-active);
-    }
-
-    &:hover {
-        color: var(--button--color-text-hover);
-        background: transparent;
-    }
 }
 
@@ -36 +20 @@
     &:not(.is-style-outline) {
 
-        .wp-block-button__link {
+        .wp-block-button__link:not(:hover):not(:active) {
 
-            &:active {
-                color: var(--button--color-text-active) !important;
-                background: transparent !important;
-                border-color: var(--button--color-background);
+            // Text colors
+            &:not(.has-text-color) {
+                color: var(--global--color-background);
+
+                // Nested
+                .has-background & {
+                    color: var(--local--color-background, var(--global--color-background));
+
+                    &.has-background {
+                        color: var(--global--color-primary);
+                    }
+                }
             }
 
-            &:hover {
-                color: var(--button--color-text-hover) !important;
-                background: transparent !important;
-                border-color: var(--button--color-background);
+            // Background-colors
+            &:not(.has-background) {
+                background-color: var(--global--color-primary);
+
+                // Nested
+                .has-background & {
+                    background-color: var(--local--color-primary, var(--global--color-primary));
+                }
             }
+        }
 
-            &:focus {
-                color: var(--button--color-text) !important;
-                background: var(--button--color-background) !important;
-            }
+        // Hover Button color should match parent element foreground color 
+        .wp-block-button__link:hover,
+        .wp-block-button__link:active {
+            border-color: currentColor !important;
+            background-color: transparent !important;
+            color: inherit !important;
         }
     }
@@ -60 +59 @@
     &.is-style-outline {
 
-        .wp-block-button__link {
-            padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+        .wp-block-button__link:not(:hover):not(:active) {
 
-            &:not(.has-background) {
-                background: transparent;
+            // Border colors
+            &:not(.has-text-color),
+            &:not(.has-background),
+            &.has-background {
+                border-color: currentColor;
             }
 
-            &:not(.has-background):not(.has-text-color) {
-                background: transparent;
-                color: var(--button--color-background);
-                border-color: var(--button--color-background);
-            }
+            // Text colors
+            &:not(.has-text-color) {
+                color: var(--global--color-primary);
 
-            &.has-background:not(.has-text-color) {
-                color: currentColor;
-            }
-
-            &.has-background.has-gray-background-color:not(.has-text-color),
-            &.has-background.has-dark-gray-background-color:not(.has-text-color),
-            &.has-background.has-black-background-color:not(.has-text-color) {
-                color: var(--global--color-white);
-            }
-
-            .is-dark-theme & {
-
-                &:not(.has-text-color) {
-
-                    &.has-background {
-                        color: var(--global--color-dark-gray);
-                    }
-
-                    &.has-background.has-gray-background-color,
-                    &.has-background.has-dark-gray-background-color,
-                    &.has-background.has-black-background-color {
-                        color: var(--global--color-white);
-                    }
+                // Nested
+                .has-background & {
+                    color: var(--local--color-primary, var(--global--color-primary));
                 }
             }
 
-            &.has-text-color,
-            &.has-background.has-text-color {
-                border-color: currentColor;
-            }
-
-            &:active,
-            &:hover {
-                color: var(--button--color-text) !important;
-                background: var(--button--color-background) !important;
-                border-color: var(--button--color-background);
-
-                &.has-text-color {
-                    border-color: var(--button--color-background);
+            &.has-background {
+                // Nested
+                .has-background &:not(.has-text-color) {
+                    color: inherit;
                 }
             }
 
-            &:focus {
-                color: var(--button--color-background) !important;
-                background: transparent !important;
+            // Background-colors
+            &:not(.has-background) {
+                background-color: transparent;
+            }
+        }
+
+        .wp-block-button__link:hover,
+        .wp-block-button__link:active {
+
+            border-color: transparent !important;
+            background-color: var(--global--color-primary) !important;
+            color: var(--global--color-background) !important;
+
+            .has-background & {
+                background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+                color: var(--local--color-background, var(--global--color-background)) !important;
+            }
+
+            .has-text-color & { 
+                color: var(--local--color-background, var(--global--color-background)) !important;
             }
         }