Merge pull request #2155 from Automattic/varia/restore-foreground-color-rules

Varia/Coutoire/Alves: Restore foreground color rules

alves/inc/wpcom-editor-colors.php

@@ -38,7 +38,9 @@ add_editor_color_rule( 'bg', '#ffffff', array(
 			#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', 'color' ),
+			#editor .editor-styles-wrapper .wp-block-cover.has-background-dim a,
+			#editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
+			#editor .editor-styles-wrapper .has-background a', 'color' ),
 
 	/**
 	 * Utility Classes
@@ -167,7 +169,8 @@ add_editor_color_rule( 'txt', '#394d55', array(
 	array( '#editor .editor-styles-wrapper .has-background-background-color[class],
 			#editor .editor-styles-wrapper .has-background-dark-background-color[class],
 			#editor .editor-styles-wrapper .has-background-light-background-color[class],
-			#editor .editor-styles-wrapper .has-foreground-color[class]', 'color' ),
+			#editor .editor-styles-wrapper .has-foreground-color[class],
+			#editor .editor-styles-wrapper .has-background-background-color[class] a', 'color' ),
 
 	// Background-color
 	array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),

alves/style-editor.css

@@ -1082,7 +1082,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -1096,41 +1095,49 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block .has-primary-background-color,
 .has-primary-background-color {
 	background-color: #3E7D98;
+	color: #ffffff;
 }
 
 .wp-block .has-secondary-background-color,
 .has-secondary-background-color {
 	background-color: #9B6A36;
+	color: #ffffff;
 }
 
 .wp-block .has-foreground-background-color,
 .has-foreground-background-color {
 	background-color: #394d55;
+	color: #ffffff;
 }
 
 .wp-block .has-foreground-light-background-color,
 .has-foreground-light-background-color {
 	background-color: #4d6974;
+	color: #ffffff;
 }
 
 .wp-block .has-foreground-dark-background-color,
 .has-foreground-dark-background-color {
 	background-color: #253136;
+	color: #ffffff;
 }
 
 .wp-block .has-background-light-background-color,
 .has-background-light-background-color {
 	background-color: #fafafa;
+	color: #394d55;
 }
 
 .wp-block .has-background-dark-background-color,
 .has-background-dark-background-color {
 	background-color: #d9d9d9;
+	color: #394d55;
 }
 
 .wp-block .has-background-background-color,
 .has-background-background-color {
 	background-color: #ffffff;
+	color: #394d55;
 }
 
 .is-small-text,

alves/style-rtl.css

@@ -2452,7 +2452,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -2466,42 +2465,50 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
 	background-color: #3E7D98;
+	color: #ffffff;
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
 	background-color: #9B6A36;
+	color: #ffffff;
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #394d55;
+	color: #ffffff;
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
 	background-color: #4d6974;
+	color: #ffffff;
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
 	background-color: #253136;
+	color: #ffffff;
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
 	background-color: #fafafa;
+	color: #394d55;
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
 	background-color: #d9d9d9;
+	color: #394d55;
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
 	background-color: #ffffff;
+	color: #394d55;
 }
 
 .is-small-text,

alves/style.css

@@ -2457,7 +2457,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -2471,42 +2470,50 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
 	background-color: #3E7D98;
+	color: #ffffff;
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
 	background-color: #9B6A36;
+	color: #ffffff;
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #394d55;
+	color: #ffffff;
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
 	background-color: #4d6974;
+	color: #ffffff;
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
 	background-color: #253136;
+	color: #ffffff;
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
 	background-color: #fafafa;
+	color: #394d55;
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
 	background-color: #d9d9d9;
+	color: #394d55;
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
 	background-color: #ffffff;
+	color: #394d55;
 }
 
 .is-small-text,

coutoire/inc/wpcom-colors.php

@@ -172,7 +172,8 @@ add_color_rule( 'link', '#000000', array(
 	 * Utility Classes
 	 */
 	// Background-color
-	array( '.has-primary-background-color[class]', 'background-color' ),
+	array( '.has-primary-background-color[class],
+			.wp-block-cover.has-background-dim.has-primary-background-color[class]', 'background-color' ),
 	// Text-color
 	array( '.has-primary-color[class]', 'color' ),
 
@@ -242,6 +243,11 @@ add_color_rule( 'txt', '#444444', array(
 			.has-background-light-background-color[class]', 'color' ),
 	array( '.has-foreground-background-color[class]', 'background-color' ),
 
+	// Text color
+ 	array( '.has-background-background-color[class],
+			.has-background-light-background-color[class],
+			.has-background-dark-background-color[class]', 'color' ),
+
 	// Text-color darkened
 	array( '.has-foreground-dark-color[class]', 'color', '-1' ),
 	// Background-color darkened

coutoire/inc/wpcom-editor-colors.php

@@ -34,7 +34,9 @@ add_editor_color_rule( 'bg', '#FFFFFF', array(
 			#editor .editor-styles-wrapper .wp-block-cover:not([class="has-background-background-color"]) .wp-block-cover-text,
 			#editor .editor-styles-wrapper .wp-block-cover:not([class="has-background-background-color"]) .wp-block-cover__inner-container,
 			#editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
+			#editor .editor-styles-wrapper .wp-block-cover.has-background-dim a,
 			#editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
+			#editor .editor-styles-wrapper .has-background a,
 			#editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'color' ),
 
 	/**
@@ -145,7 +147,11 @@ add_editor_color_rule( 'txt', '#444444', array(
 	 * Utility Classes
 	 */
 	// Text-color
-	array( '#editor .editor-styles-wrapper .has-foreground-color[class]', 'color' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-color[class],
+			#editor .editor-styles-wrapper .has-background-background-color[class],
+			#editor .editor-styles-wrapper .has-background-dark-background-color[class],
+			#editor .editor-styles-wrapper .has-background-light-background-color[class],
+			#editor .editor-styles-wrapper .has-background-background-color[class] a', 'color' ),
 	// Background-color
 	array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),
 	// Text-color darkened

coutoire/style-editor.css

@@ -1079,7 +1079,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -1093,41 +1092,49 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block .has-primary-background-color,
 .has-primary-background-color {
 	background-color: #000000;
+	color: #FFFFFF;
 }
 
 .wp-block .has-secondary-background-color,
 .has-secondary-background-color {
 	background-color: #FF7A5C;
+	color: #FFFFFF;
 }
 
 .wp-block .has-foreground-background-color,
 .has-foreground-background-color {
 	background-color: #444444;
+	color: #FFFFFF;
 }
 
 .wp-block .has-foreground-light-background-color,
 .has-foreground-light-background-color {
 	background-color: #767676;
+	color: #FFFFFF;
 }
 
 .wp-block .has-foreground-dark-background-color,
 .has-foreground-dark-background-color {
 	background-color: #111111;
+	color: #FFFFFF;
 }
 
 .wp-block .has-background-light-background-color,
 .has-background-light-background-color {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 .wp-block .has-background-dark-background-color,
 .has-background-dark-background-color {
 	background-color: #DDDDDD;
+	color: #444444;
 }
 
 .wp-block .has-background-background-color,
 .has-background-background-color {
 	background-color: #FFFFFF;
+	color: #444444;
 }
 
 .is-small-text,

coutoire/style-rtl.css

@@ -2450,7 +2450,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -2464,42 +2463,50 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
 	background-color: #000000;
+	color: #FFFFFF;
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
 	background-color: #FF7A5C;
+	color: #FFFFFF;
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #444444;
+	color: #FFFFFF;
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
 	background-color: #767676;
+	color: #FFFFFF;
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
 	background-color: #111111;
+	color: #FFFFFF;
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
 	background-color: #DDDDDD;
+	color: #444444;
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
 	background-color: #FFFFFF;
+	color: #444444;
 }
 
 .is-small-text,

coutoire/style.css

@@ -2455,7 +2455,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -2469,42 +2468,50 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
 	background-color: #000000;
+	color: #FFFFFF;
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
 	background-color: #FF7A5C;
+	color: #FFFFFF;
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #444444;
+	color: #FFFFFF;
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
 	background-color: #767676;
+	color: #FFFFFF;
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
 	background-color: #111111;
+	color: #FFFFFF;
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
 	background-color: #DDDDDD;
+	color: #444444;
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
 	background-color: #FFFFFF;
+	color: #444444;
 }
 
 .is-small-text,

varia/sass/blocks/utilities/_editor.scss

@@ -58,7 +58,6 @@
 // Gutenberg background-color options
 .has-background {
 	&:not(.has-background-background-color) a:not(.wp-block-button__link),
-	a:not(.wp-block-button__link),
 	p:not(.has-text-color),
 	h1:not(.has-text-color),
 	h2:not(.has-text-color),
@@ -73,41 +72,49 @@
 .wp-block .has-primary-background-color,
 .has-primary-background-color {
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .wp-block .has-secondary-background-color,
 .has-secondary-background-color {
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .wp-block .has-foreground-background-color,
 .has-foreground-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .wp-block .has-foreground-light-background-color,
 .has-foreground-light-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .wp-block .has-foreground-dark-background-color,
 .has-foreground-dark-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .wp-block .has-background-light-background-color,
 .has-background-light-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "light")};
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 .wp-block .has-background-dark-background-color,
 .has-background-dark-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 .wp-block .has-background-background-color,
 .has-background-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "default")};
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 // Gutenberg Font-size utility classes

varia/sass/blocks/utilities/_style.scss

@@ -144,7 +144,6 @@
 // Gutenberg background-color options
 .has-background {
 	&:not(.has-background-background-color) a:not(.wp-block-button__link),
-	a:not(.wp-block-button__link),
 	p:not(.has-text-color),
 	h1:not(.has-text-color),
 	h2:not(.has-text-color),
@@ -159,42 +158,50 @@
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
+	color: #{map-deep-get($config-global, "color", "background", "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")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "light")};
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "default")};
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 // Gutenberg Font-size options

varia/style-editor.css

@@ -1088,7 +1088,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -1102,41 +1101,49 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .wp-block .has-primary-background-color,
 .has-primary-background-color {
 	background-color: blue;
+	color: white;
 }
 
 .wp-block .has-secondary-background-color,
 .has-secondary-background-color {
 	background-color: red;
+	color: white;
 }
 
 .wp-block .has-foreground-background-color,
 .has-foreground-background-color {
 	background-color: #444444;
+	color: white;
 }
 
 .wp-block .has-foreground-light-background-color,
 .has-foreground-light-background-color {
 	background-color: #767676;
+	color: white;
 }
 
 .wp-block .has-foreground-dark-background-color,
 .has-foreground-dark-background-color {
 	background-color: #111111;
+	color: white;
 }
 
 .wp-block .has-background-light-background-color,
 .has-background-light-background-color {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 .wp-block .has-background-dark-background-color,
 .has-background-dark-background-color {
 	background-color: #DDDDDD;
+	color: #444444;
 }
 
 .wp-block .has-background-background-color,
 .has-background-background-color {
 	background-color: white;
+	color: #444444;
 }
 
 .is-small-text,

varia/style-rtl.css

@@ -2485,7 +2485,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -2499,42 +2498,50 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
 	background-color: blue;
+	color: white;
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
 	background-color: red;
+	color: white;
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #444444;
+	color: white;
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
 	background-color: #767676;
+	color: white;
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
 	background-color: #111111;
+	color: white;
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
 	background-color: #DDDDDD;
+	color: #444444;
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
 	background-color: white;
+	color: #444444;
 }
 
 .is-small-text,

varia/style.css

@@ -2490,7 +2490,6 @@ table.is-style-stripes tbody tr:nth-child(odd),
 }
 
 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
-.has-background a:not(.wp-block-button__link),
 .has-background p:not(.has-text-color),
 .has-background h1:not(.has-text-color),
 .has-background h2:not(.has-text-color),
@@ -2504,42 +2503,50 @@ table.is-style-stripes tbody tr:nth-child(odd),
 .has-primary-background-color,
 .has-primary-background-color.has-background-dim {
 	background-color: blue;
+	color: white;
 }
 
 .has-secondary-background-color,
 .has-secondary-background-color.has-background-dim {
 	background-color: red;
+	color: white;
 }
 
 .has-background-dim,
 .has-foreground-background-color,
 .has-foreground-background-color.has-background-dim {
 	background-color: #444444;
+	color: white;
 }
 
 .has-foreground-light-background-color,
 .has-foreground-light-background-color.has-background-dim {
 	background-color: #767676;
+	color: white;
 }
 
 .has-foreground-dark-background-color,
 .has-foreground-dark-background-color.has-background-dim {
 	background-color: #111111;
+	color: white;
 }
 
 .has-background-light-background-color,
 .has-background-light-background-color.has-background-dim {
 	background-color: #FAFAFA;
+	color: #444444;
 }
 
 .has-background-dark-background-color,
 .has-background-dark-background-color.has-background-dim {
 	background-color: #DDDDDD;
+	color: #444444;
 }
 
 .has-background-background-color,
 .has-background-background-color.has-background-dim {
 	background-color: white;
+	color: #444444;
 }
 
 .is-small-text,