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.
Built from https://develop.svn.wordpress.org/trunk@49864


git-svn-id: http://core.svn.wordpress.org/trunk@49583 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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;

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;

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

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

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;

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

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

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;

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-border-color: rgba(240, 240, 240, 0.15);';
-				$theme_css .= '--table--stripes-background-color: var(--global--color-dark-gray);';
+				$theme_css .= '--table--stripes-background-color: rgba(240, 240, 240, 0.15);';
 			}
 		}
 

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(

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;

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;

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.