Merge pull request #2143 from Automattic/seedlet/fix/array-to-string

Seedlet: fixes logic and warnings around custom colors

seedlet/assets/css/variables-editor.css

@@ -45,8 +45,8 @@ body {
 	--global--line-height-heading: 1.3;
 	/* Colors */
 	--global--color-primary: #000000;
-	--global--color-primary-hover: #3C8067;
 	--global--color-secondary: #3C8067;
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;

seedlet/assets/css/variables.css

@@ -45,8 +45,8 @@
 	--global--line-height-heading: 1.3;
 	/* Colors */
 	--global--color-primary: #000000;
-	--global--color-primary-hover: #3C8067;
 	--global--color-secondary: #3C8067;
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;

seedlet/assets/sass/abstracts/_config.scss

@@ -32,8 +32,8 @@ $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-
 
 	/* Colors */
 	--global--color-primary: #000000;
-	--global--color-primary-hover: #3C8067;
 	--global--color-secondary: #3C8067;
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;

seedlet/assets/sass/child-theme/variables-editor.css

@@ -45,8 +45,8 @@ body {
 	--global--line-height-heading: 1.3;
 	/* Colors */
 	--global--color-primary: #000000;
-	--global--color-primary-hover: #3C8067;
 	--global--color-secondary: #3C8067;
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;

seedlet/assets/sass/child-theme/variables.css

@@ -45,8 +45,8 @@
 	--global--line-height-heading: 1.3;
 	/* Colors */
 	--global--color-primary: #000000;
-	--global--color-primary-hover: #3C8067;
 	--global--color-secondary: #3C8067;
+	--global--color-primary-hover: var( --global--color-secondary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;

seedlet/classes/class-seedlet-custom-colors.php

@@ -212,14 +212,17 @@ class Seedlet_Custom_Colors {
 			$theme_css = ':root {';
 		}
 
+		// Check to see if a custom background color has been set that is needed for our color calculation
+		// If this check isn't present, the color calculation generates a warning that an invalid color has been supplied
+		$theme_mod_bg_color = empty( get_theme_mod( "seedlet_--global--color-background" ) ) ? '#FFFFFF' : get_theme_mod( "seedlet_--global--color-background" );
+
 		foreach ( $this->seedlet_custom_color_variables as $variable ) {
 
-			if ( '' !== get_theme_mod( "seedlet_$variable" ) ) {
+			if ( ! empty ( get_theme_mod( "seedlet_$variable[0]" )  ) ) {
 
 				$theme_mod_variable_name = $variable[0];
 				$theme_mod_default_color = $variable[1];
 				$theme_mod_custom_color  = get_theme_mod( "seedlet_$variable[0]" );
-				$theme_mod_bg_color      = get_theme_mod( "seedlet_--global--color-background" );
 				$opacity_integer         = 70;
 				$adjusted_color          = $this->seedlet_color_blend_by_opacity( $theme_mod_custom_color, $opacity_integer, $theme_mod_bg_color );