Varia: Clean up cover and utility styles for dim.

varia/inc/wpcom-colors.php

@@ -36,6 +36,8 @@ add_color_rule( 'bg', '#ffffff', array(
 			.wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
 			.wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
 			.wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container,
+			.wp-block-cover.has-background-dim,
+			.wp-block-cover-image.has-background-dim,
 			.wp-block-file .wp-block-file__button,
 			.wp-block-file a.wp-block-file__button:active,
 			.wp-block-file a.wp-block-file__button:focus,
@@ -324,7 +326,9 @@ add_color_rule( 'txt', '#444444', array(
 			hr.wp-block-separator', 'border-bottom-color', 0.8 ),
 
 	// Background-color
-	array( 'table.is-style-stripes tbody tr:nth-child(odd),
+	array( '.wp-block-cover.has-background-dim,
+			.wp-block-cover-image.has-background-dim,
+			table.is-style-stripes tbody tr:nth-child(odd),
 			.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
 			body .widget_eu_cookie_law_widget #eu-cookie-law.negative', 'background-color' ),
 

varia/inc/wpcom-editor-colors.php

@@ -43,6 +43,8 @@ add_editor_color_rule( 'bg', '#ffffff', array(
 			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
 			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
 			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container,
+			#editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
+			#editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
 			#editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'color' ),
 
 	// Background-color
@@ -194,7 +196,9 @@ add_editor_color_rule( 'txt', '#444444', array(
 			#editor .editor-styles-wrapper .wp-block-separator', 'border-bottom-color', 0.8 ),
 
 	// Background-color
-	array( '#editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
+	array( '#editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
+			#editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
+			#editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
 			#editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd)', 'background-color' ),
 
 	/**

varia/sass/blocks/cover/_editor.scss

@@ -7,6 +7,11 @@
 	margin-top: inherit;
 	margin-bottom: inherit;
 
+	&.has-background-dim {
+		background-color: #{map-deep-get($config-cover, "color", "background")};
+		color: #{map-deep-get($config-cover, "color", "foreground")};
+	}
+
 	.wp-block-cover__inner-container,
 	.wp-block-cover-image-text,
 	.wp-block-cover-text,

varia/sass/blocks/cover/_style.scss

@@ -6,6 +6,11 @@
 	margin-top: inherit;
 	margin-bottom: inherit;
 
+	&.has-background-dim {
+		background-color: #{map-deep-get($config-cover, "color", "background")};
+		color: #{map-deep-get($config-cover, "color", "foreground")};
+	}
+
 	.wp-block-cover__inner-container,
 	.wp-block-cover-image-text,
 	.wp-block-cover-text {

varia/sass/blocks/utilities/_style.scss

@@ -160,6 +160,7 @@
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
 }
 
+.has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};

varia/style-editor.css

@@ -602,6 +602,12 @@ object {
 	/* Treating H2 separately to account for legacy /core styles */
 }
 
+.wp-block-cover.has-background-dim,
+.wp-block-cover-image.has-background-dim {
+	background-color: black;
+	color: white;
+}
+
 .wp-block-cover .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover-image-text,
 .wp-block-cover .wp-block-cover-text,
@@ -1024,6 +1030,7 @@ table th,
 table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 /**

varia/style-rtl.css

@@ -1549,6 +1549,12 @@ button[data-load-more-btn], .button {
 	 */
 }
 
+.wp-block-cover.has-background-dim,
+.wp-block-cover-image.has-background-dim {
+	background-color: black;
+	color: white;
+}
+
 .wp-block-cover .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover-image-text,
 .wp-block-cover .wp-block-cover-text,
@@ -2360,6 +2366,7 @@ table th,
 table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 .wp-block-video figcaption {
@@ -2493,6 +2500,7 @@ table.is-style-stripes tbody tr:nth-child(odd),
 	background-color: red;
 }
 
+.has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #444444;

varia/style.css

@@ -1549,6 +1549,12 @@ button[data-load-more-btn], .button {
 	 */
 }
 
+.wp-block-cover.has-background-dim,
+.wp-block-cover-image.has-background-dim {
+	background-color: black;
+	color: white;
+}
+
 .wp-block-cover .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover-image-text,
 .wp-block-cover .wp-block-cover-text,
@@ -2360,6 +2366,7 @@ table th,
 table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 .wp-block-video figcaption {
@@ -2498,6 +2505,7 @@ table.is-style-stripes tbody tr:nth-child(odd),
 	background-color: red;
 }
 
+.has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #444444;