Changeset 49987 for trunk/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.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/02-tools/mixins.scss (modified) (1 diff)

trunk/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss

@@ -21 +21 @@
 // - Applies button styles to blocks and elements that share them.
 @mixin button-style() {
-    line-height: var(--button--line-height);
-    color: var(--button--color-text);
+    border: var(--button--border-width) solid transparent;
+    border-radius: var(--button--border-radius);
     cursor: pointer;
+    display: block;
     font-weight: var(--button--font-weight);
     font-family: var(--button--font-family);
     font-size: var(--button--font-size);
-    background-color: var(--button--color-background);
-    border-radius: var(--button--border-radius);
-    border: var(--button--border-width) solid var(--button--color-background);
+    line-height: var(--button--line-height);
+    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     text-decoration: none;
-    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 
-    &:focus {
-        background: transparent;
-        outline-offset: -6px;
-        outline: 2px dotted currentColor;
+    // Standard Button Color Relationship Logic 
+    &:not(:hover):not(:active) {
 
-        .is-dark-theme & {
-            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-primary));
+
+                &.has-background {
+                    color: var(--global--color-primary);
+                }
+            }
         }
 
+        // Background-colors
         &:not(.has-background) {
-            color: var(--button--color-text-hover);
+            background-color: var(--global--color-primary);
+
+            // Nested
+            .has-background & {
+                background-color: var(--local--color-primary, var(--global--color-primary));
+            }
         }
     }
 
+    // Hover Button color should match parent element foreground color
+    &:hover,
+    &:active {
+        background-color: transparent;
+        border-color: currentColor;
+        color: inherit;
+    }
+
+    // Focus Button outline color should always match the current text color
+    &:focus {
+        outline-offset: -6px;
+        outline: 2px dotted currentColor;
+    }
+
+    // Disabled Button colors
     &:disabled {
         background-color: var(--global--color-white-50);