fix issue in dark theme in Seedlet

seedlet/inc/wpcom-colors.php

@@ -464,9 +464,19 @@ add_color_rule( 'fg2', '#FAFBF6', array(
 function seedlet_custom_colors_extra_css() {
 	$colors_array = get_theme_mod( 'colors_manager' );
 	$color_bg = $colors_array['colors']['bg'];
+	$color_bg = $colors_array['colors']['txt'];
+	$color_bg = $colors_array['colors']['link'];
 	$color_fg1 = $colors_array['colors']['fg1'];
 	$color_fg2 = $colors_array['colors']['fg2']; ?>
 
+	:root {
+		--global--color-background: <?php echo $colors_array['colors']['bg']; ?>;
+		--global--color-foreground: <?php echo $colors_array['colors']['txt']; ?>;
+		--global--color-primary: <?php echo $colors_array['colors']['link']; ?>;
+		--global--color-secondary: <?php echo $colors_array['colors']['fg1']; ?>;
+		--global--color-tertiary: <?php echo $colors_array['colors']['fg2']; ?>;
+	}
+
 	/*
 	 * Site title text shadow.
 	*/

seedlet/inc/wpcom-customize-preview.js

@@ -22,10 +22,16 @@
 	// we need to manually override the "extra CSS" when a user selects a different color palette.
 	wp.customize( 'colors_manager[colors]', function( value ) {
 		value.bind( function( to ) {
-			const { bg, fg1, fg2 } = to;
-			const extraCSS = `/*
-				* Site title text shadow.
-				*/
+			const { bg, fg1, fg2, txt, link } = to;
+			const extraCSS = `
+				:root {
+					--global--color-background: ${ bg };
+					--global--color-foreground: ${ txt };
+					--global--color-primary: ${ link };
+					--global--color-secondary: ${ fg1 };
+					--global--color-tertiary: ${ fg2 };
+				}
+
 				.site-title a {
 					background-image: linear-gradient(to right, ${ fg1 } 100%, transparent 100%);
 					text-shadow: 1px 0px ${ bg },

seedlet/inc/wpcom-editor-colors.php

@@ -4,7 +4,7 @@
  * Custom Editor Colors: Seedlet
  */
 
-// Background Color 
+// Background Color
 // --global--color-background
 add_color_rule( 'bg', '#FFFFFF', array(
 
@@ -67,7 +67,7 @@ add_color_rule( 'bg', '#FFFFFF', array(
 ), __( 'Background Color' ) );
 
 // Foreground Color
-// --global--color-background
+// --global--color-foreground-light
 add_color_rule( 'txt', '#444444', array(
 
 	// Text-color
@@ -175,7 +175,7 @@ add_color_rule( 'fg1', '#3C8067', array(
 	// border-bottom-color
 	array( '#editor .editor-styles-wrapper .wp-block-file .wp-block-file__textlink,
 			#editor .editor-styles-wrapper a', 'border-bottom-color' ),
-	
+
 	// border-left-color
 	array( '#editor .editor-styles-wrapper .wp-block-quote,
 			#editor .editor-styles-wrapper .wp-block-quote.is-large,
@@ -226,10 +226,37 @@ add_color_rule( 'fg2', '#FAFBF6', array(
 function seedlet_custom_colors_extra_css() {
 	$colors_array = get_theme_mod( 'colors_manager' );
 	$color_bg = $colors_array['colors']['bg'];
+	$color_bg = $colors_array['colors']['txt'];
+	$color_bg = $colors_array['colors']['link'];
 	$color_fg1 = $colors_array['colors']['fg1'];
 	$color_fg2 = $colors_array['colors']['fg2']; ?>
 
-	/* 
+	:root {
+		--global--color-background: <?php echo $colors_array['colors']['bg']; ?>;
+		--global--color-foreground: <?php echo $colors_array['colors']['txt']; ?>;
+		--global--color-primary: <?php echo $colors_array['colors']['link']; ?>;
+		--global--color-secondary: <?php echo $colors_array['colors']['fg1']; ?>;
+		--global--color-tertiary: <?php echo $colors_array['colors']['fg2']; ?>;
+	}
+
+	/*
+	 * Site title text shadow.
+	*/
+	.site-title a {
+		background-image: linear-gradient(to right, <?php echo $color_fg1; ?> 100%, transparent 100%);
+		text-shadow: 1px 0px <?php echo $color_bg; ?>,
+					 -1px 0px <?php echo $color_bg; ?>,
+					 -2px 0px <?php echo $color_bg; ?>,
+					 2px 0px <?php echo $color_bg; ?>,
+					 -3px 0px <?php echo $color_bg; ?>,
+					 3px 0px <?php echo $color_bg; ?>,
+					 -4px 0px <?php echo $color_bg; ?>,
+					 4px 0px <?php echo $color_bg; ?>,
+					 -5px 0px <?php echo $color_bg; ?>,
+					 5px 0px <?php echo $color_bg; ?>;
+	}
+
+	/*
 	 * Custom gradients.
 	*/
 	#editor .editor-styles-wrapper .has-hard-diagonal-gradient-background {
@@ -268,4 +295,4 @@ function seedlet_custom_colors_extra_css() {
 		background: linear-gradient(to bottom, transparent 20%, <?php echo $color_fg1; ?> 20%, <?php echo $color_fg1; ?> 80%, transparent 80%);
 	}
 <?php }
-add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );
+add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );