Separate background & color

This changese creates a more specific selector for applying the color of
an element with a background color applied.

Previously the class that applied the background color also applied a
reasonable color color.

With this change only matches that also do not also supply a
'has-text-color' class will set a color property for a .has-*-background

varia/sass/blocks/utilities/_style.scss

@@ -164,49 +164,81 @@
 .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-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")};
 }
 
+.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 {
-	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")};
+}
+
+.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")};
 }
 
 .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")};
 }
 
 .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")};
 }
 
 .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")};
 }
 
 .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")};
 }