WordPress.org
Get WordPress

Make WordPress Core

Changeset 49864 for trunk


Ignore:
Timestamp:
12/22/2020 03:00:49 PM (4 years ago)
Author:
desrosj
Message:

Twenty Twenty-One: Improve striped table styling in Dark Mode.

This change improves the display of table blocks with the “Stripes” style selected.

Previously, the text was not visible in striped rows when using Dark Mode.

Props ryelle, poena, melchoyce, celendesign, audrasjb.
Fixes #52129.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

    r49800 r49864  
    27912791}
    27922792
     2793table thead,
     2794table tfoot,
     2795.wp-block-table thead,
     2796.wp-block-table tfoot {
     2797    text-align: center;
     2798}
     2799
    27932800table th {
    27942801    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    … …  
    28192826}
    28202827
     2828table.is-style-stripes .has-background {
     2829    color: #28303d;
     2830}
     2831
    28212832table.is-style-stripes .has-background thead tr {
    28222833    color: #28303d;
    … …  
    28272838}
    28282839
    2829 table.is-style-stripes .has-background tbody tr:nth-child(even) {
     2840table.is-style-stripes .has-background tbody tr {
    28302841    color: #28303d;
    28312842}
    … …  
    28352846}
    28362847
     2848.wp-block-table.is-style-stripes .has-background {
     2849    color: #28303d;
     2850}
     2851
    28372852.wp-block-table.is-style-stripes .has-background thead tr {
    28382853    color: #28303d;
    … …  
    28432858}
    28442859
    2845 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     2860.wp-block-table.is-style-stripes .has-background tbody tr {
    28462861    color: #28303d;
    28472862}
    … …  
    28682883.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    28692884    background-color: #f0f0f0;
     2885}
     2886
     2887table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     2888    background-color: rgba(255, 255, 255, 0.9);
     2889}
     2890
     2891.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     2892    background-color: rgba(255, 255, 255, 0.9);
    28702893}
    28712894

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

    r49825 r49864  
    49864986}
    49874987
     4988table thead,
     4989table tfoot,
     4990.wp-block-table thead,
     4991.wp-block-table tfoot {
     4992    text-align: center;
     4993}
     4994
    49884995table th {
    49894996    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    … …  
    50145021}
    50155022
     5023table figcaption {
     5024    color: #28303d;
     5025    font-size: 1rem;
     5026}
     5027
     5028.wp-block-table figcaption {
     5029    color: #28303d;
     5030    font-size: 1rem;
     5031}
     5032
    50165033table.is-style-regular .has-background {
    50175034    color: #28303d;
    50185035}
    50195036
     5037table.is-style-stripes .has-background {
     5038    color: #28303d;
     5039}
     5040
    50205041table.is-style-stripes .has-background thead tr {
    50215042    color: #28303d;
    … …  
    50265047}
    50275048
    5028 table.is-style-stripes .has-background tbody tr:nth-child(even) {
     5049table.is-style-stripes .has-background tbody tr {
    50295050    color: #28303d;
    50305051}
    … …  
    50345055}
    50355056
     5057.wp-block-table.is-style-stripes .has-background {
     5058    color: #28303d;
     5059}
     5060
    50365061.wp-block-table.is-style-stripes .has-background thead tr {
    50375062    color: #28303d;
    … …  
    50425067}
    50435068
    5044 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     5069.wp-block-table.is-style-stripes .has-background tbody tr {
    50455070    color: #28303d;
    50465071}
    … …  
    50675092.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    50685093    background-color: #f0f0f0;
     5094}
     5095
     5096table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     5097    background-color: rgba(255, 255, 255, 0.9);
     5098}
     5099
     5100.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     5101    background-color: rgba(255, 255, 255, 0.9);
    50695102}
    50705103

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css

    r49726 r49864  
    1212        --button--color-background-active: var(--global--color-background);
    1313        --global--color-border: #9ea1a7;
     14
     15        /* Block: Table */
     16        --table--stripes-border-color: rgba(240, 240, 240, 0.15);
     17        --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    1418    }
    1519

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css

    r49726 r49864  
    1212        --button--color-background-active: var(--global--color-background);
    1313        --global--color-border: #9ea1a7;
     14
     15        /* Block: Table */
     16        --table--stripes-border-color: rgba(240, 240, 240, 0.15);
     17        --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    1418    }
    1519

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

    r49795 r49864  
    20312031}
    20322032
     2033table thead,
     2034table tfoot,
     2035.wp-block-table thead,
     2036.wp-block-table tfoot {
     2037    text-align: center;
     2038}
     2039
    20332040table th,
    20342041.wp-block-table th {
    … …  
    20442051
    20452052table.is-style-regular .has-background,
     2053table.is-style-stripes .has-background,
    20462054table.is-style-stripes .has-background thead tr,
    20472055table.is-style-stripes .has-background tfoot tr,
    2048 table.is-style-stripes .has-background tbody tr:nth-child(even),
     2056table.is-style-stripes .has-background tbody tr,
    20492057.wp-block-table.is-style-regular .has-background,
     2058.wp-block-table.is-style-stripes .has-background,
    20502059.wp-block-table.is-style-stripes .has-background thead tr,
    20512060.wp-block-table.is-style-stripes .has-background tfoot tr,
    2052 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     2061.wp-block-table.is-style-stripes .has-background tbody tr {
    20532062    color: var(--table--has-background-text-color);
    20542063}
    … …  
    20692078.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    20702079    background-color: var(--table--stripes-background-color);
     2080}
     2081
     2082table.is-style-stripes .has-background tbody tr:nth-child(odd),
     2083.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     2084    background-color: var(--global--color-white-90);
    20712085}
    20722086

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss

    r49574 r49864  
    11table,
    22.wp-block-table {
     3
     4    thead,
     5    tfoot {
     6        text-align: center;
     7    }
    38
    49    th {
    … …  
    1217
    1318    &.is-style-regular .has-background,
     19    &.is-style-stripes .has-background,
    1420    &.is-style-stripes .has-background thead tr,
    1521    &.is-style-stripes .has-background tfoot tr,
    16     &.is-style-stripes .has-background tbody tr:nth-child(even) {
     22    &.is-style-stripes .has-background tbody tr {
    1723        color: var(--table--has-background-text-color);
    1824    }
    … …  
    2834        tbody tr:nth-child(odd) {
    2935            background-color: var(--table--stripes-background-color);
     36        }
     37
     38        .has-background tbody tr:nth-child(odd) {
     39            background-color: var(--global--color-white-90);
    3040        }
    3141    }

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

    r49574 r49864  
    44    min-width: 240px;
    55    border-collapse: collapse;
     6
     7    thead,
     8    tfoot {
     9        text-align: center;
     10    }
    611
    712    th {
    … …  
    1520    }
    1621
     22    figcaption {
     23        color: var(--global--color-primary);
     24        font-size: var(--global--font-size-xs);
     25    }
     26
    1727    &.is-style-regular .has-background,
     28    &.is-style-stripes .has-background,
    1829    &.is-style-stripes .has-background thead tr,
    1930    &.is-style-stripes .has-background tfoot tr,
    20     &.is-style-stripes .has-background tbody tr:nth-child(even) {
     31    &.is-style-stripes .has-background tbody tr {
    2132        color: var(--table--has-background-text-color);
    2233    }
    … …  
    3243        tbody tr:nth-child(odd) {
    3344            background-color: var(--table--stripes-background-color);
     45        }
     46
     47        .has-background tbody tr:nth-child(odd) {
     48            background-color: var(--global--color-white-90);
    3449        }
    3550    }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

    r49726 r49864  
    1212        --button--color-background-active: var(--global--color-background);
    1313        --global--color-border: #9ea1a7;
     14
     15        /* Block: Table */
     16        --table--stripes-border-color: rgba(240, 240, 240, 0.15);
     17        --table--stripes-background-color: rgba(240, 240, 240, 0.15);
    1418
    1519        .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),

  • trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php

    r49826 r49864  
    7575
    7676            if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) {
    77                 $theme_css .= '--table--stripes-border-color: var(--global--color-dark-gray);';
    78                 $theme_css .= '--table--stripes-background-color: var(--global--color-dark-gray);';
     77                $theme_css .= '--table--stripes-border-color: rgba(240, 240, 240, 0.15);';
     78                $theme_css .= '--table--stripes-background-color: rgba(240, 240, 240, 0.15);';
    7979            }
    8080        }

  • trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php

    r49826 r49864  
    6666            wp_add_inline_style(
    6767                'twenty-twenty-one-custom-color-overrides',
    68                 '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; }'
     68                '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; --table--stripes-border-color: rgba(240, 240, 240, 0.15); --table--stripes-background-color: rgba(240, 240, 240, 0.15); }'
    6969            );
    7070        }

  • trunk/src/wp-content/themes/twentytwentyone/style-rtl.css

    r49825 r49864  
    35093509}
    35103510
     3511table thead,
     3512table tfoot,
     3513.wp-block-table thead,
     3514.wp-block-table tfoot {
     3515    text-align: center;
     3516}
     3517
    35113518table th,
    35123519.wp-block-table th {
    … …  
    35223529}
    35233530
     3531table figcaption,
     3532.wp-block-table figcaption {
     3533    color: var(--global--color-primary);
     3534    font-size: var(--global--font-size-xs);
     3535}
     3536
    35243537table.is-style-regular .has-background,
     3538table.is-style-stripes .has-background,
    35253539table.is-style-stripes .has-background thead tr,
    35263540table.is-style-stripes .has-background tfoot tr,
    3527 table.is-style-stripes .has-background tbody tr:nth-child(even),
     3541table.is-style-stripes .has-background tbody tr,
    35283542.wp-block-table.is-style-regular .has-background,
     3543.wp-block-table.is-style-stripes .has-background,
    35293544.wp-block-table.is-style-stripes .has-background thead tr,
    35303545.wp-block-table.is-style-stripes .has-background tfoot tr,
    3531 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     3546.wp-block-table.is-style-stripes .has-background tbody tr {
    35323547    color: var(--table--has-background-text-color);
    35333548}
    … …  
    35483563.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    35493564    background-color: var(--table--stripes-background-color);
     3565}
     3566
     3567table.is-style-stripes .has-background tbody tr:nth-child(odd),
     3568.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     3569    background-color: var(--global--color-white-90);
    35503570}
    35513571

  • trunk/src/wp-content/themes/twentytwentyone/style.css

    r49825 r49864  
    35193519}
    35203520
     3521table thead,
     3522table tfoot,
     3523.wp-block-table thead,
     3524.wp-block-table tfoot {
     3525    text-align: center;
     3526}
     3527
    35213528table th,
    35223529.wp-block-table th {
    … …  
    35323539}
    35333540
     3541table figcaption,
     3542.wp-block-table figcaption {
     3543    color: var(--global--color-primary);
     3544    font-size: var(--global--font-size-xs);
     3545}
     3546
    35343547table.is-style-regular .has-background,
     3548table.is-style-stripes .has-background,
    35353549table.is-style-stripes .has-background thead tr,
    35363550table.is-style-stripes .has-background tfoot tr,
    3537 table.is-style-stripes .has-background tbody tr:nth-child(even),
     3551table.is-style-stripes .has-background tbody tr,
    35383552.wp-block-table.is-style-regular .has-background,
     3553.wp-block-table.is-style-stripes .has-background,
    35393554.wp-block-table.is-style-stripes .has-background thead tr,
    35403555.wp-block-table.is-style-stripes .has-background tfoot tr,
    3541 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
     3556.wp-block-table.is-style-stripes .has-background tbody tr {
    35423557    color: var(--table--has-background-text-color);
    35433558}
    … …  
    35583573.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    35593574    background-color: var(--table--stripes-background-color);
     3575}
     3576
     3577table.is-style-stripes .has-background tbody tr:nth-child(odd),
     3578.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) {
     3579    background-color: var(--global--color-white-90);
    35603580}
    35613581
Note: See TracChangeset for help on using the changeset viewer.