From c58be3c57e531086ab8f600f732b90d3caaa0d59 Mon Sep 17 00:00:00 2001 From: desrosj Date: Tue, 22 Dec 2020 15:02:05 +0000 Subject: [PATCH] Twenty Twenty-One: Improve striped table styling in Dark Mode. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. Built from https://develop.svn.wordpress.org/trunk@49864 git-svn-id: http://core.svn.wordpress.org/trunk@49583 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../twentytwentyone/assets/css/ie-editor.css | 27 +++++++++++++- .../themes/twentytwentyone/assets/css/ie.css | 37 ++++++++++++++++++- .../assets/css/style-dark-mode-rtl.css | 4 ++ .../assets/css/style-dark-mode.css | 4 ++ .../assets/css/style-editor.css | 18 ++++++++- .../assets/sass/05-blocks/table/_editor.scss | 12 +++++- .../assets/sass/05-blocks/table/_style.scss | 17 ++++++++- .../assets/sass/style-dark-mode.scss | 4 ++ .../class-twenty-twenty-one-custom-colors.php | 4 +- .../class-twenty-twenty-one-dark-mode.php | 2 +- .../themes/twentytwentyone/style-rtl.css | 24 +++++++++++- wp-content/themes/twentytwentyone/style.css | 24 +++++++++++- wp-includes/version.php | 2 +- 13 files changed, 163 insertions(+), 16 deletions(-) diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index 8185dfddbd..1333b0be25 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -2790,6 +2790,13 @@ hr.is-style-dots:before { background: none; } +table thead, +table tfoot, +.wp-block-table thead, +.wp-block-table tfoot { + text-align: center; +} + table th { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } @@ -2818,6 +2825,10 @@ table.is-style-regular .has-background { color: #28303d; } +table.is-style-stripes .has-background { + color: #28303d; +} + table.is-style-stripes .has-background thead tr { color: #28303d; } @@ -2826,7 +2837,7 @@ table.is-style-stripes .has-background tfoot tr { color: #28303d; } -table.is-style-stripes .has-background tbody tr:nth-child(even) { +table.is-style-stripes .has-background tbody tr { color: #28303d; } @@ -2834,6 +2845,10 @@ table.is-style-stripes .has-background tbody tr:nth-child(even) { color: #28303d; } +.wp-block-table.is-style-stripes .has-background { + color: #28303d; +} + .wp-block-table.is-style-stripes .has-background thead tr { color: #28303d; } @@ -2842,7 +2857,7 @@ table.is-style-stripes .has-background tbody tr:nth-child(even) { color: #28303d; } -.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) { +.wp-block-table.is-style-stripes .has-background tbody tr { color: #28303d; } @@ -2869,6 +2884,14 @@ table.is-style-stripes tbody tr:nth-child(odd) { background-color: #f0f0f0; } +table.is-style-stripes .has-background tbody tr:nth-child(odd) { + background-color: rgba(255, 255, 255, 0.9); +} + +.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { + background-color: rgba(255, 255, 255, 0.9); +} + table.wp-calendar-table td, table.wp-calendar-table th { background: transparent; diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index 61ea77b3e7..c34188e6d8 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -4985,6 +4985,13 @@ table, border-collapse: collapse; } +table thead, +table tfoot, +.wp-block-table thead, +.wp-block-table tfoot { + text-align: center; +} + table th { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } @@ -5013,10 +5020,24 @@ table th { border: 1px solid; } +table figcaption { + color: #28303d; + font-size: 1rem; +} + +.wp-block-table figcaption { + color: #28303d; + font-size: 1rem; +} + table.is-style-regular .has-background { color: #28303d; } +table.is-style-stripes .has-background { + color: #28303d; +} + table.is-style-stripes .has-background thead tr { color: #28303d; } @@ -5025,7 +5046,7 @@ table.is-style-stripes .has-background tfoot tr { color: #28303d; } -table.is-style-stripes .has-background tbody tr:nth-child(even) { +table.is-style-stripes .has-background tbody tr { color: #28303d; } @@ -5033,6 +5054,10 @@ table.is-style-stripes .has-background tbody tr:nth-child(even) { color: #28303d; } +.wp-block-table.is-style-stripes .has-background { + color: #28303d; +} + .wp-block-table.is-style-stripes .has-background thead tr { color: #28303d; } @@ -5041,7 +5066,7 @@ table.is-style-stripes .has-background tbody tr:nth-child(even) { color: #28303d; } -.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) { +.wp-block-table.is-style-stripes .has-background tbody tr { color: #28303d; } @@ -5068,6 +5093,14 @@ table.is-style-stripes tbody tr:nth-child(odd) { background-color: #f0f0f0; } +table.is-style-stripes .has-background tbody tr:nth-child(odd) { + background-color: rgba(255, 255, 255, 0.9); +} + +.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { + background-color: rgba(255, 255, 255, 0.9); +} + table.wp-calendar-table td, table.wp-calendar-table th { background: transparent; diff --git a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css index e3998da3ab..fd9870c1ba 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css @@ -11,6 +11,10 @@ --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; + + /* Block: Table */ + --table--stripes-border-color: rgba(240, 240, 240, 0.15); + --table--stripes-background-color: rgba(240, 240, 240, 0.15); } .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), diff --git a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css index 25e7e90f51..6ec1fa97e5 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css @@ -11,6 +11,10 @@ --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; + + /* Block: Table */ + --table--stripes-border-color: rgba(240, 240, 240, 0.15); + --table--stripes-background-color: rgba(240, 240, 240, 0.15); } .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 54693391b7..58d1859664 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -2030,6 +2030,13 @@ hr.is-style-dots:before { background: none; } +table thead, +table tfoot, +.wp-block-table thead, +.wp-block-table tfoot { + text-align: center; +} + table th, .wp-block-table th { font-family: var(--heading--font-family); @@ -2043,13 +2050,15 @@ table th, } table.is-style-regular .has-background, +table.is-style-stripes .has-background, table.is-style-stripes .has-background thead tr, table.is-style-stripes .has-background tfoot tr, -table.is-style-stripes .has-background tbody tr:nth-child(even), +table.is-style-stripes .has-background tbody tr, .wp-block-table.is-style-regular .has-background, +.wp-block-table.is-style-stripes .has-background, .wp-block-table.is-style-stripes .has-background thead tr, .wp-block-table.is-style-stripes .has-background tfoot tr, -.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) { +.wp-block-table.is-style-stripes .has-background tbody tr { color: var(--table--has-background-text-color); } @@ -2070,6 +2079,11 @@ table.is-style-stripes tbody tr:nth-child(odd), background-color: var(--table--stripes-background-color); } +table.is-style-stripes .has-background tbody tr:nth-child(odd), +.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { + background-color: var(--global--color-white-90); +} + table.wp-calendar-table td, table.wp-calendar-table th { background: transparent; diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss index 37b295ecb2..a0c7cfcdbd 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss @@ -1,6 +1,11 @@ table, .wp-block-table { + thead, + tfoot { + text-align: center; + } + th { font-family: var(--heading--font-family); } @@ -11,9 +16,10 @@ table, } &.is-style-regular .has-background, + &.is-style-stripes .has-background, &.is-style-stripes .has-background thead tr, &.is-style-stripes .has-background tfoot tr, - &.is-style-stripes .has-background tbody tr:nth-child(even) { + &.is-style-stripes .has-background tbody tr { color: var(--table--has-background-text-color); } @@ -28,6 +34,10 @@ table, tbody tr:nth-child(odd) { background-color: var(--table--stripes-background-color); } + + .has-background tbody tr:nth-child(odd) { + background-color: var(--global--color-white-90); + } } } diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss index 36558db0d5..04173970bd 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss @@ -4,6 +4,11 @@ table, min-width: 240px; border-collapse: collapse; + thead, + tfoot { + text-align: center; + } + th { font-family: var(--heading--font-family); } @@ -14,10 +19,16 @@ table, border: 1px solid; } + figcaption { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + } + &.is-style-regular .has-background, + &.is-style-stripes .has-background, &.is-style-stripes .has-background thead tr, &.is-style-stripes .has-background tfoot tr, - &.is-style-stripes .has-background tbody tr:nth-child(even) { + &.is-style-stripes .has-background tbody tr { color: var(--table--has-background-text-color); } @@ -32,6 +43,10 @@ table, tbody tr:nth-child(odd) { background-color: var(--table--stripes-background-color); } + + .has-background tbody tr:nth-child(odd) { + background-color: var(--global--color-white-90); + } } } diff --git a/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss b/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss index 18f0033e7e..6cc9227a03 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss @@ -12,6 +12,10 @@ --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; + /* Block: Table */ + --table--stripes-border-color: rgba(240, 240, 240, 0.15); + --table--stripes-background-color: rgba(240, 240, 240, 0.15); + .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { background: #000; diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php index def9025ceb..ad02f4e0eb 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php +++ b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php @@ -74,8 +74,8 @@ class Twenty_Twenty_One_Custom_Colors { $theme_css .= '--button--color-text-hover: ' . $this->custom_get_readable_color( $background_color ) . ';'; if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) { - $theme_css .= '--table--stripes-border-color: var(--global--color-dark-gray);'; - $theme_css .= '--table--stripes-background-color: var(--global--color-dark-gray);'; + $theme_css .= '--table--stripes-border-color: rgba(240, 240, 240, 0.15);'; + $theme_css .= '--table--stripes-background-color: rgba(240, 240, 240, 0.15);'; } } diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php index 7dc7920472..7bd9568992 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php +++ b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php @@ -65,7 +65,7 @@ class Twenty_Twenty_One_Dark_Mode { // Add Dark Mode variable overrides. wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', - '.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; }' + '.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); }' ); } wp_enqueue_script( diff --git a/wp-content/themes/twentytwentyone/style-rtl.css b/wp-content/themes/twentytwentyone/style-rtl.css index b1d08af057..4b2fe9f993 100644 --- a/wp-content/themes/twentytwentyone/style-rtl.css +++ b/wp-content/themes/twentytwentyone/style-rtl.css @@ -3508,6 +3508,13 @@ table, border-collapse: collapse; } +table thead, +table tfoot, +.wp-block-table thead, +.wp-block-table tfoot { + text-align: center; +} + table th, .wp-block-table th { font-family: var(--heading--font-family); @@ -3521,14 +3528,22 @@ table th, border: 1px solid; } +table figcaption, +.wp-block-table figcaption { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); +} + table.is-style-regular .has-background, +table.is-style-stripes .has-background, table.is-style-stripes .has-background thead tr, table.is-style-stripes .has-background tfoot tr, -table.is-style-stripes .has-background tbody tr:nth-child(even), +table.is-style-stripes .has-background tbody tr, .wp-block-table.is-style-regular .has-background, +.wp-block-table.is-style-stripes .has-background, .wp-block-table.is-style-stripes .has-background thead tr, .wp-block-table.is-style-stripes .has-background tfoot tr, -.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) { +.wp-block-table.is-style-stripes .has-background tbody tr { color: var(--table--has-background-text-color); } @@ -3549,6 +3564,11 @@ table.is-style-stripes tbody tr:nth-child(odd), background-color: var(--table--stripes-background-color); } +table.is-style-stripes .has-background tbody tr:nth-child(odd), +.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { + background-color: var(--global--color-white-90); +} + table.wp-calendar-table td, table.wp-calendar-table th { background: transparent; diff --git a/wp-content/themes/twentytwentyone/style.css b/wp-content/themes/twentytwentyone/style.css index 747d34d103..ebf07438fc 100644 --- a/wp-content/themes/twentytwentyone/style.css +++ b/wp-content/themes/twentytwentyone/style.css @@ -3518,6 +3518,13 @@ table, border-collapse: collapse; } +table thead, +table tfoot, +.wp-block-table thead, +.wp-block-table tfoot { + text-align: center; +} + table th, .wp-block-table th { font-family: var(--heading--font-family); @@ -3531,14 +3538,22 @@ table th, border: 1px solid; } +table figcaption, +.wp-block-table figcaption { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); +} + table.is-style-regular .has-background, +table.is-style-stripes .has-background, table.is-style-stripes .has-background thead tr, table.is-style-stripes .has-background tfoot tr, -table.is-style-stripes .has-background tbody tr:nth-child(even), +table.is-style-stripes .has-background tbody tr, .wp-block-table.is-style-regular .has-background, +.wp-block-table.is-style-stripes .has-background, .wp-block-table.is-style-stripes .has-background thead tr, .wp-block-table.is-style-stripes .has-background tfoot tr, -.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) { +.wp-block-table.is-style-stripes .has-background tbody tr { color: var(--table--has-background-text-color); } @@ -3559,6 +3574,11 @@ table.is-style-stripes tbody tr:nth-child(odd), background-color: var(--table--stripes-background-color); } +table.is-style-stripes .has-background tbody tr:nth-child(odd), +.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { + background-color: var(--global--color-white-90); +} + table.wp-calendar-table td, table.wp-calendar-table th { background: transparent; diff --git a/wp-includes/version.php b/wp-includes/version.php index 1770d8b5f8..a7ff2cce13 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.7-alpha-49863'; +$wp_version = '5.7-alpha-49864'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.