Merge pull request #3192 from Automattic/update/editor-styles

Varia: Copy style changes to editor styles

varia/sass/blocks/utilities/_editor.scss

@@ -68,54 +68,88 @@
 	}
 }
 
-.wp-block .has-primary-background-color,
-.has-primary-background-color {
+.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")};
 }
 
-.wp-block .has-secondary-background-color,
-.has-secondary-background-color {
+.has-primary-background-color:not(.has-text-color),
+.has-primary-background-color.has-background-dim:not(.has-text-color) {
+	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")};
+}
+
+.has-secondary-background-color:not(.has-text-color),
+.has-secondary-background-color.has-background-dim:not(.has-text-color) {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.wp-block .has-foreground-background-color,
-.has-foreground-background-color {
+.has-background-dim:not(.has-text-color),
+.has-foreground-background-color:not(.has-text-color),
+.has-foreground-background-color.has-background-dim:not(.has-text-color) {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
+}
+
+.has-background-dim,
+.has-foreground-background-color,
+.has-foreground-background-color.has-background-dim {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.wp-block .has-foreground-light-background-color,
-.has-foreground-light-background-color {
+.has-foreground-light-background-color,
+.has-foreground-light-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
+}
+
+.has-foreground-light-background-color:not(.has-text-color),
+.has-foreground-light-background-color.has-background-dim:not(.has-text-color) {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.wp-block .has-foreground-dark-background-color,
-.has-foreground-dark-background-color {
+.has-foreground-dark-background-color,
+.has-foreground-dark-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
+}
+
+.has-foreground-dark-background-color:not(.has-text-color),
+.has-foreground-dark-background-color.has-background-dim:not(.has-text-color) {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.wp-block .has-background-light-background-color,
-.has-background-light-background-color {
+.has-background-light-background-color,
+.has-background-light-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "light")};
+}
+
+.has-background-light-background-color:not(.has-text-color),
+.has-background-light-background-color.has-background-dim:not(.has-text-color) {
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.wp-block .has-background-dark-background-color,
-.has-background-dark-background-color {
+.has-background-dark-background-color,
+.has-background-dark-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
+}
+
+.has-background-dark-background-color:not(.has-text-color),
+.has-background-dark-background-color.has-background-dim:not(.has-text-color) {
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.wp-block .has-background-background-color,
-.has-background-background-color {
+.has-background-background-color,
+.has-background-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "default")};
+}
+
+.has-background-background-color:not(.has-text-color),
+.has-background-background-color.has-background-dim:not(.has-text-color) {
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
+
 // Gutenberg Font-size utility classes
 .is-small-text,
 .has-small-font-size {