vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-01 07:40:07 +00:00
Code Issues Actions Packages 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@49864 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers
2020-12-22 15:00:49 +00:00
parent 96555f949a
commit acbbbd18b3
12 changed files with 162 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/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
src/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
src/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
src/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
src/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
src/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
src/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
src/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
src/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
src/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
src/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
src/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;