Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-25 22:02:57 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
desrosj 2020-12-22 15:02:05 +00:00
parent aedf6c6443
commit c58be3c57e
13 changed files with 163 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
wp-content/themes/twentytwentyone/assets/css/ie-editor.css
View File

@ -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;

37
wp-content/themes/twentytwentyone/assets/css/ie.css
View File

@ -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;

4
wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css
View File

@ -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),

4
wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css
View File

@ -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),

18
wp-content/themes/twentytwentyone/assets/css/style-editor.css
View File

@ -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;

12
wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss
View File

@ -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);
}
}
}

17
wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss
View File

@ -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);
}
}
}

4
wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss
View File

@ -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;

4
wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php
View File

@ -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);';
}
}

2
wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php
View File

@ -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(

24
wp-content/themes/twentytwentyone/style-rtl.css
View File

@ -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;

24
wp-content/themes/twentytwentyone/style.css
View File

@ -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;

2
wp-includes/version.php
View File

@ -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.