Varia: Remove `!important` flags from utility classes and recompile.

varia/sass/blocks/utilities/_editor.scss

@@ -15,36 +15,36 @@
 // Gutenberg text color options
 .has-text-color {}
 
-.has-primary-color[class] {
-	color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
+.has-primary-color {
+	color: #{map-deep-get($config-global, "color", "primary", "default")};
 }
 
-.has-secondary-color[class] {
-	color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
+.has-secondary-color {
+	color: #{map-deep-get($config-global, "color", "secondary", "default")};
 }
 
-.has-foreground-color[class] {
-	color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
+.has-foreground-color {
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.has-foreground-light-color[class] {
-	color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
+.has-foreground-light-color {
+	color: #{map-deep-get($config-global, "color", "foreground", "light")};
 }
 
-.has-foreground-dark-color[class] {
-	color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
+.has-foreground-dark-color {
+	color: #{map-deep-get($config-global, "color", "foreground", "dark")};
 }
 
-.has-background-light-color[class] {
-	color: #{map-deep-get($config-global, "color", "background", "light")} !important;
+.has-background-light-color {
+	color: #{map-deep-get($config-global, "color", "background", "light")};
 }
 
-.has-background-dark-color[class] {
-	color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
+.has-background-dark-color {
+	color: #{map-deep-get($config-global, "color", "background", "dark")};
 }
 
-.has-background-color[class] {
-	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
+.has-background-color {
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 // Gutenberg background-color options
@@ -55,48 +55,48 @@
 	}
 }
 
-.has-primary-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
+.has-primary-background-color {
+	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-primary-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
+.has-primary-background-color {
+	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-secondary-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
+.has-secondary-background-color {
+	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
+.has-foreground-background-color {
+	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-light-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
+.has-foreground-light-background-color {
+	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-dark-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
+.has-foreground-dark-background-color {
+	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-background-light-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
+.has-background-light-background-color {
+	background-color: #{map-deep-get($config-global, "color", "background", "light")};
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.has-background-dark-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
+.has-background-dark-background-color {
+	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.has-background-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
+.has-background-background-color {
+	background-color: #{map-deep-get($config-global, "color", "background", "default")};
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 

varia/sass/blocks/utilities/_style.scss

@@ -108,35 +108,35 @@
 // Gutenberg text color options
 .has-text-color {}
 
-.has-primary-color[class] {
+.has-primary-color {
 	color: #{map-deep-get($config-global, "color", "primary", "default")};
 }
 
-.has-secondary-color[class] {
+.has-secondary-color {
 	color: #{map-deep-get($config-global, "color", "secondary", "default")};
 }
 
-.has-foreground-color[class] {
+.has-foreground-color {
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.has-foreground-light-color[class] {
+.has-foreground-light-color {
 	color: #{map-deep-get($config-global, "color", "foreground", "light")};
 }
 
-.has-foreground-dark-color[class] {
+.has-foreground-dark-color {
 	color: #{map-deep-get($config-global, "color", "foreground", "dark")};
 }
 
-.has-background-light-color[class] {
+.has-background-light-color {
 	color: #{map-deep-get($config-global, "color", "background", "light")};
 }
 
-.has-background-dark-color[class] {
+.has-background-dark-color {
 	color: #{map-deep-get($config-global, "color", "background", "dark")};
 }
 
-.has-background-color[class] {
+.has-background-color {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
@@ -148,42 +148,42 @@
 	}
 }
 
-.has-primary-background-color[class] {
+.has-primary-background-color {
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-secondary-background-color[class] {
+.has-secondary-background-color {
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-background-color[class] {
+.has-foreground-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-light-background-color[class] {
+.has-foreground-light-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-dark-background-color[class] {
+.has-foreground-dark-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-background-light-background-color[class] {
+.has-background-light-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "light")};
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.has-background-dark-background-color[class] {
+.has-background-dark-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.has-background-background-color[class] {
+.has-background-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "default")};
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }

varia/style-editor.css

@@ -1035,36 +1035,36 @@ table th,
 	line-height: 1.125;
 }
 
-.has-primary-color[class] {
-	color: blue !important;
+.has-primary-color {
+	color: blue;
 }
 
-.has-secondary-color[class] {
-	color: red !important;
+.has-secondary-color {
+	color: red;
 }
 
-.has-foreground-color[class] {
-	color: #444444 !important;
+.has-foreground-color {
+	color: #444444;
 }
 
-.has-foreground-light-color[class] {
-	color: #767676 !important;
+.has-foreground-light-color {
+	color: #767676;
 }
 
-.has-foreground-dark-color[class] {
-	color: #111111 !important;
+.has-foreground-dark-color {
+	color: #111111;
 }
 
-.has-background-light-color[class] {
-	color: #FAFAFA !important;
+.has-background-light-color {
+	color: #FAFAFA;
 }
 
-.has-background-dark-color[class] {
-	color: #DDDDDD !important;
+.has-background-dark-color {
+	color: #DDDDDD;
 }
 
-.has-background-color[class] {
-	color: white !important;
+.has-background-color {
+	color: white;
 }
 
 .has-background:not(.has-background-background-color) a,
@@ -1072,48 +1072,48 @@ table th,
 	color: currentColor;
 }
 
-.has-primary-background-color[class] {
-	background-color: blue !important;
+.has-primary-background-color {
+	background-color: blue;
 	color: white;
 }
 
-.has-primary-background-color[class] {
-	background-color: blue !important;
+.has-primary-background-color {
+	background-color: blue;
 	color: white;
 }
 
-.has-secondary-background-color[class] {
-	background-color: red !important;
+.has-secondary-background-color {
+	background-color: red;
 	color: white;
 }
 
-.has-foreground-background-color[class] {
-	background-color: #444444 !important;
+.has-foreground-background-color {
+	background-color: #444444;
 	color: white;
 }
 
-.has-foreground-light-background-color[class] {
-	background-color: #767676 !important;
+.has-foreground-light-background-color {
+	background-color: #767676;
 	color: white;
 }
 
-.has-foreground-dark-background-color[class] {
-	background-color: #111111 !important;
+.has-foreground-dark-background-color {
+	background-color: #111111;
 	color: white;
 }
 
-.has-background-light-background-color[class] {
-	background-color: #FAFAFA !important;
+.has-background-light-background-color {
+	background-color: #FAFAFA;
 	color: #444444;
 }
 
-.has-background-dark-background-color[class] {
-	background-color: #DDDDDD !important;
+.has-background-dark-background-color {
+	background-color: #DDDDDD;
 	color: #444444;
 }
 
-.has-background-background-color[class] {
-	background-color: white !important;
+.has-background-background-color {
+	background-color: white;
 	color: #444444;
 }
 

varia/style.css

@@ -2439,35 +2439,35 @@ table th,
 	background-attachment: fixed;
 }
 
-.has-primary-color[class] {
+.has-primary-color {
 	color: blue;
 }
 
-.has-secondary-color[class] {
+.has-secondary-color {
 	color: red;
 }
 
-.has-foreground-color[class] {
+.has-foreground-color {
 	color: #444444;
 }
 
-.has-foreground-light-color[class] {
+.has-foreground-light-color {
 	color: #767676;
 }
 
-.has-foreground-dark-color[class] {
+.has-foreground-dark-color {
 	color: #111111;
 }
 
-.has-background-light-color[class] {
+.has-background-light-color {
 	color: #FAFAFA;
 }
 
-.has-background-dark-color[class] {
+.has-background-dark-color {
 	color: #DDDDDD;
 }
 
-.has-background-color[class] {
+.has-background-color {
 	color: white;
 }
 
@@ -2476,42 +2476,42 @@ table th,
 	color: currentColor;
 }
 
-.has-primary-background-color[class] {
+.has-primary-background-color {
 	background-color: blue;
 	color: white;
 }
 
-.has-secondary-background-color[class] {
+.has-secondary-background-color {
 	background-color: red;
 	color: white;
 }
 
-.has-foreground-background-color[class] {
+.has-foreground-background-color {
 	background-color: #444444;
 	color: white;
 }
 
-.has-foreground-light-background-color[class] {
+.has-foreground-light-background-color {
 	background-color: #767676;
 	color: white;
 }
 
-.has-foreground-dark-background-color[class] {
+.has-foreground-dark-background-color {
 	background-color: #111111;
 	color: white;
 }
 
-.has-background-light-background-color[class] {
+.has-background-light-background-color {
 	background-color: #FAFAFA;
 	color: #444444;
 }
 
-.has-background-dark-background-color[class] {
+.has-background-dark-background-color {
 	background-color: #DDDDDD;
 	color: #444444;
 }
 
-.has-background-background-color[class] {
+.has-background-background-color {
 	background-color: white;
 	color: #444444;
 }