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

Timestamp:

01/20/2021 05:49:28 AM (6 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));
                                 }
                         }