WordPress.org
Get WordPress

Make WordPress Core


Ignore:
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:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss

    r49726 r49987  
    22
    33.has-black-color[class] {
     4    // Localize CSS-variables to limit relationship scope
     5    [class*="__inner-container"] {
     6        --local--color-primary: var(--global--color-black, #000000);
     7        color: var(--local--color-primary);
     8    }
    49    color: var(--global--color-black);
    510}
    611
    712.has-gray-color[class] {
     13    // Localize CSS-variables to limit relationship scope
     14    [class*="__inner-container"] {
     15        --local--color-primary: var(--global--color-gray, #000000);
     16        color: var(--local--color-primary);
     17    }
    818    color: var(--global--color-gray);
    919}
    1020
    1121.has-dark-gray-color[class] {
     22    // Localize CSS-variables to limit relationship scope
     23    [class*="__inner-container"] {
     24        --local--color-primary: var(--global--color-dark-gray, #000000);
     25        color: var(--local--color-primary);
     26    }
    1227    color: var(--global--color-dark-gray);
    1328}
    1429
    1530.has-green-color[class] {
     31    // Localize CSS-variables to limit relationship scope
     32    [class*="__inner-container"] {
     33        --local--color-primary: var(--global--color-green, #FFFFFF);
     34        color: var(--local--color-primary);
     35    }
    1636    color: var(--global--color-green);
    1737}
    1838
    1939.has-blue-color[class] {
     40    // Localize CSS-variables to limit relationship scope
     41    [class*="__inner-container"] {
     42        --local--color-primary: var(--global--color-blue, #FFFFFF);
     43        color: var(--local--color-primary);
     44    }
    2045    color: var(--global--color-blue);
    2146}
    2247
    2348.has-purple-color[class] {
     49    // Localize CSS-variables to limit relationship scope
     50    [class*="__inner-container"] {
     51        --local--color-primary: var(--global--color-purple, #FFFFFF);
     52        color: var(--local--color-primary);
     53    }
    2454    color: var(--global--color-purple);
    2555}
    2656
    2757.has-red-color[class] {
     58    // Localize CSS-variables to limit relationship scope
     59    [class*="__inner-container"] {
     60        --local--color-primary: var(--global--color-red, #FFFFFF);
     61        color: var(--local--color-primary);
     62    }
    2863    color: var(--global--color-red);
    2964}
    3065
    3166.has-orange-color[class] {
     67    // Localize CSS-variables to limit relationship scope
     68    [class*="__inner-container"] {
     69        --local--color-primary: var(--global--color-orange, #FFFFFF);
     70        color: var(--local--color-primary);
     71    }
    3272    color: var(--global--color-orange);
    3373}
    3474
    3575.has-yellow-color[class] {
     76    // Localize CSS-variables to limit relationship scope
     77    [class*="__inner-container"] {
     78        --local--color-primary: var(--global--color-yellow, #FFFFFF);
     79        color: var(--local--color-primary);
     80    }
    3681    color: var(--global--color-yellow);
    3782}
    3883
    3984.has-white-color[class] {
     85    // Localize CSS-variables to limit relationship scope
     86    [class*="__inner-container"] {
     87        --local--color-primary: var(--global--color-white, #FFFFFF);
     88        color: var(--local--color-primary);
     89    }
    4090    color: var(--global--color-white);
    4191}
    … …  
    57107
    58108.has-black-background-color[class] {
     109    // Localize CSS-variables to limit relationship scope
     110    [class*="__inner-container"] {
     111        --local--color-background: var(--global--color-black, #000000);
     112        background-color: var(--local--color-background);
     113    }
    59114    background-color: var(--global--color-black);
    60115}
    61116
     117.has-dark-gray-background-color[class] {
     118    // Localize CSS-variables to limit relationship scope
     119    [class*="__inner-container"] {
     120        --local--color-background: var(--global--color-dark-gray, #000000);
     121        background-color: var(--local--color-background);
     122    }
     123    background-color: var(--global--color-dark-gray);
     124}
     125
    62126.has-gray-background-color[class] {
     127    // Localize CSS-variables to limit relationship scope
     128    [class*="__inner-container"] {
     129        --local--color-background: var(--global--color-gray, #000000);
     130        background-color: var(--local--color-background);
     131    }
    63132    background-color: var(--global--color-gray);
    64133}
    65134
    66 .has-dark-gray-background-color[class] {
    67     background-color: var(--global--color-dark-gray);
     135.has-light-gray-background-color[class] {
     136    // Localize CSS-variables to limit relationship scope
     137    [class*="__inner-container"] {
     138        --local--color-background: var(--global--color-light-gray, #FFFFFF);
     139        background-color: var(--local--color-background);
     140    }
     141    background-color: var(--global--color-light-gray);
    68142}
    69143
    70144.has-green-background-color[class] {
     145    // Localize CSS-variables to limit relationship scope
     146    [class*="__inner-container"] {
     147        --local--color-background: var(--global--color-green, #FFFFFF);
     148        background-color: var(--local--color-background);
     149    }
    71150    background-color: var(--global--color-green);
    72151}
    73152
    74153.has-blue-background-color[class] {
     154    // Localize CSS-variables to limit relationship scope
     155    [class*="__inner-container"] {
     156        --local--color-background: var(--global--color-blue, #FFFFFF);
     157        background-color: var(--local--color-background);
     158    }
    75159    background-color: var(--global--color-blue);
    76160}
    77161
    78162.has-purple-background-color[class] {
     163    // Localize CSS-variables to limit relationship scope
     164    [class*="__inner-container"] {
     165        --local--color-background: var(--global--color-purple, #FFFFFF);
     166        background-color: var(--local--color-background);
     167    }
    79168    background-color: var(--global--color-purple);
    80169}
    81170
    82171.has-red-background-color[class] {
     172    // Localize CSS-variables to limit relationship scope
     173    [class*="__inner-container"] {
     174        --local--color-background: var(--global--color-red, #FFFFFF);
     175        background-color: var(--local--color-background);
     176    }
    83177    background-color: var(--global--color-red);
    84178}
    85179
    86180.has-orange-background-color[class] {
     181    // Localize CSS-variables to limit relationship scope
     182    [class*="__inner-container"] {
     183        --local--color-background: var(--global--color-orange, #FFFFFF);
     184        background-color: var(--local--color-background);
     185    }
    87186    background-color: var(--global--color-orange);
    88187}
    89188
    90189.has-yellow-background-color[class] {
     190    // Localize CSS-variables to limit relationship scope
     191    [class*="__inner-container"] {
     192        --local--color-background: var(--global--color-yellow, #FFFFFF);
     193        background-color: var(--local--color-background);
     194    }
    91195    background-color: var(--global--color-yellow);
    92196}
    93197
    94198.has-white-background-color[class] {
     199    // Localize CSS-variables to limit relationship scope
     200    [class*="__inner-container"] {
     201        --local--color-background: var(--global--color-white, #FFFFFF);
     202        background-color: var(--local--color-background);
     203    }
    95204    background-color: var(--global--color-white);
    96205}
    97206
    98 :not(.has-text-color) {
     207.has-background:not(.has-text-color) {
    99208
    100209    &.has-black-background-color[class],
    101210    &.has-gray-background-color[class],
    102211    &.has-dark-gray-background-color[class] {
    103         color: var(--global--color-white);
     212        // Localize CSS-variables to limit relationship scope
     213        [class*="__inner-container"] {
     214            --local--color-primary: var(--global--color-background, #FFFFFF);
     215            // Reverse the local foreground color in darkmode
     216            .is-dark-theme & {
     217                --local--color-primary: var(--global--color-primary, #000000);
     218            }
     219            color: var(--local--color-primary, var(--global--color-primary));
     220        }
    104221    }
    105222
    … …  
    111228    &.has-yellow-background-color[class],
    112229    &.has-white-background-color[class] {
    113         color: var(--global--color-dark-gray);
     230        // Localize CSS-variables to limit relationship scope
     231        [class*="__inner-container"] {
     232            --local--color-primary: var(--global--color-primary, #000000);
     233            // Reverse the local foreground color in darkmode
     234            .is-dark-theme & {
     235                --local--color-primary: var(--global--color-background, #FFFFFF);
     236            }
     237            color: var(--local--color-primary, var(--global--color-primary));
     238        }
    114239    }
    115240}
Note: See TracChangeset for help on using the changeset viewer.