Varia: Remove `!important` from utility color rules in frontend styles.

varia/sass/blocks/utilities/_style.scss

@@ -109,35 +109,35 @@
 .has-text-color {}
 
 .has-primary-color[class] {
-	color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
+	color: #{map-deep-get($config-global, "color", "primary", "default")};
 }
 
 .has-secondary-color[class] {
-	color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
+	color: #{map-deep-get($config-global, "color", "secondary", "default")};
 }
 
 .has-foreground-color[class] {
-	color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 .has-foreground-light-color[class] {
-	color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
+	color: #{map-deep-get($config-global, "color", "foreground", "light")};
 }
 
 .has-foreground-dark-color[class] {
-	color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
+	color: #{map-deep-get($config-global, "color", "foreground", "dark")};
 }
 
 .has-background-light-color[class] {
-	color: #{map-deep-get($config-global, "color", "background", "light")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "light")};
 }
 
 .has-background-dark-color[class] {
-	color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "dark")};
 }
 
 .has-background-color[class] {
-	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 // Gutenberg background-color options
@@ -149,42 +149,42 @@
 }
 
 .has-primary-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
+	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;
+	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;
+	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;
+	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;
+	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;
+	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;
+	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;
+	background-color: #{map-deep-get($config-global, "color", "background", "default")};
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 

varia/style-rtl.css

@@ -2431,35 +2431,35 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: blue !important;
+	color: blue;
 }
 
 .has-secondary-color[class] {
-	color: red !important;
+	color: red;
 }
 
 .has-foreground-color[class] {
-	color: #444444 !important;
+	color: #444444;
 }
 
 .has-foreground-light-color[class] {
-	color: #767676 !important;
+	color: #767676;
 }
 
 .has-foreground-dark-color[class] {
-	color: #111111 !important;
+	color: #111111;
 }
 
 .has-background-light-color[class] {
-	color: #FAFAFA !important;
+	color: #FAFAFA;
 }
 
 .has-background-dark-color[class] {
-	color: #DDDDDD !important;
+	color: #DDDDDD;
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: white;
 }
 
 .has-background:not(.has-background-background-color) a,
@@ -2468,42 +2468,42 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: blue !important;
+	background-color: blue;
 	color: white;
 }
 
 .has-secondary-background-color[class] {
-	background-color: red !important;
+	background-color: red;
 	color: white;
 }
 
 .has-foreground-background-color[class] {
-	background-color: #444444 !important;
+	background-color: #444444;
 	color: white;
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #767676 !important;
+	background-color: #767676;
 	color: white;
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: #111111 !important;
+	background-color: #111111;
 	color: white;
 }
 
 .has-background-light-background-color[class] {
-	background-color: #FAFAFA !important;
+	background-color: #FAFAFA;
 	color: #444444;
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #DDDDDD !important;
+	background-color: #DDDDDD;
 	color: #444444;
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
+	background-color: white;
 	color: #444444;
 }
 

varia/style.css

@@ -2436,35 +2436,35 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: blue !important;
+	color: blue;
 }
 
 .has-secondary-color[class] {
-	color: red !important;
+	color: red;
 }
 
 .has-foreground-color[class] {
-	color: #444444 !important;
+	color: #444444;
 }
 
 .has-foreground-light-color[class] {
-	color: #767676 !important;
+	color: #767676;
 }
 
 .has-foreground-dark-color[class] {
-	color: #111111 !important;
+	color: #111111;
 }
 
 .has-background-light-color[class] {
-	color: #FAFAFA !important;
+	color: #FAFAFA;
 }
 
 .has-background-dark-color[class] {
-	color: #DDDDDD !important;
+	color: #DDDDDD;
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: white;
 }
 
 .has-background:not(.has-background-background-color) a,
@@ -2473,42 +2473,42 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: blue !important;
+	background-color: blue;
 	color: white;
 }
 
 .has-secondary-background-color[class] {
-	background-color: red !important;
+	background-color: red;
 	color: white;
 }
 
 .has-foreground-background-color[class] {
-	background-color: #444444 !important;
+	background-color: #444444;
 	color: white;
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #767676 !important;
+	background-color: #767676;
 	color: white;
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: #111111 !important;
+	background-color: #111111;
 	color: white;
 }
 
 .has-background-light-background-color[class] {
-	background-color: #FAFAFA !important;
+	background-color: #FAFAFA;
 	color: #444444;
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #DDDDDD !important;
+	background-color: #DDDDDD;
 	color: #444444;
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
+	background-color: white;
 	color: #444444;
 }