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

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

@@ -29 +29 @@
         }
 
-        .has-background &,
-        [class*="background-color"] &,
-        [style*="background-color"] &,
-        .wp-block-cover[style*="background-image"] & {
-            border-color: currentColor;
-        }
-
-        .has-background.has-gray-background-color &,
-        .has-background.has-dark-gray-background-color &,
-        .has-background.has-black-background-color & {
-            border-color: var(--global--color-white);
+        .has-background & {
+            border-color: var(--local--color-primary, var(--global--color-primary)) !important;
         }
     }
@@ -45 +36 @@
     button.wp-block-search__button {
         margin-left: 0;
-        background-color: transparent;
-        color: var(--button--color-text-hover);
         line-height: 1;
-
-        &:hover {
-            background-color: var(--button--color-background);
-            color: var(--button--color-text);
-        }
 
         &.has-icon {
@@ -64 +48 @@
         }
 
-        .has-background.has-gray-background-color &,
-        .has-background.has-dark-gray-background-color &,
-        .has-background.has-black-background-color & {
-            color: var(--global--color-white);
-            border-color: currentColor;
+        &:hover,
+        &:active {
 
-            &:hover {
-                background-color: var(--button--color-background);
-                border-color: var(--global--color-white);
-                color: var(--global--color-white);
+            .has-background & {
+                background-color: var(--local--color-background, var(--global--color-background)) !important;
+                color: var(--local--color-primary, var(--global--color-primary)) !important;
+            }
 
-                .is-dark-theme & {
-                    color: var(--button--color-text);
-                }
-            }
-        }
-
-        .has-background.has-white-background-color &,
-        .has-background.has-green-background-color &,
-        .has-background.has-blue-background-color &,
-        .has-background.has-purple-background-color &,
-        .has-background.has-red-background-color &,
-        .has-background.has-orange-background-color &,
-        .has-background.has-yellow-background-color & {
-            border-color: currentColor;
-            color: currentColor;
-
-            &:hover {
-                background-color: var(--form--border-color);
-                border-color: var(--form--border-color);
-                color: var(--global--color-white);
-
-                .is-dark-theme & {
-                    border-color: var(--button--color-text);
-                    background-color: var(--button--color-text);
-                    color: var(--button--color-background);
-                }
+            .has-text-color & {
+                color: var(--local--color-primary, var(--global--color-primary)) !important;
             }
         }
@@ -111 +68 @@
             border: var(--form--border-width) solid var(--form--border-color);
             border-radius: var(--form--border-radius);
+            padding: var(--form--border-width);
+
+            .has-background & {
+                border-color: var(--local--color-primary, var(--global--color-primary)) !important;
+            }
 
             .wp-block-search__input {
+                margin-left: 0;
                 margin-right: 0;
+                padding-left: var(--form--spacing-unit);
 
+                // Add outline for focus styles to override default
                 &:focus {
+                    color: var(--form--color-text);
+                    outline-offset: -2px;
                     outline: 2px dotted var(--form--border-color);
-                    outline-offset: -5px;
-
-                    .is-dark-theme & {
-                        outline-color: currentColor;
-                    }
                 }
             }
-        }
-
-        &.wp-block-search__text-button {
 
             button.wp-block-search__button {
-                // Match the text button size with the icon button.
                 padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-            }
-        }
 
-        button.wp-block-search__button {
-
-            .has-background.has-gray-background-color &,
-            .has-background.has-dark-gray-background-color &,
-            .has-background.has-black-background-color & {
-                border-color: var(--button--color-background);
-                color: var(--button--color-background);
-
+                // Search button always needs black contrast against white form background
                 &:hover {
-                    color: var(--global--color-white);
+                    color: var(--global--color-dark-gray);
                 }
 
                 .is-dark-theme & {
-                    border-color: var(--button--color-text);
-                    color: var(--button--color-text);
+                    color: var(--global--color-dark-gray);
 
                     &:hover {
+                        background-color: var(--global--color-dark-gray);
                         color: var(--global--color-white);
                     }
                 }
-            }
 
-            .is-dark-theme & {
-                border-color: var(--button--color-text);
-                color: var(--button--color-text);
-
-                &:hover {
-                    border-color: var(--button--color-text);
-                    background-color: var(--button--color-text);
-                    color: var(--button--color-background);
+                &.has-icon {
+                    padding: 6px calc(0.5 * var(--button--padding-horizontal));
                 }
             }