Merge pull request #3105 from Automattic/fix/2819

Spearhead: Use the background color for sticky posts and menus

seedlet/inc/wpcom-customize-preview.js

@@ -70,6 +70,7 @@ function changeColorLuminescence( hex, amount ) {
 			var secondaryHover = changeColorLuminescence( secondary, 10 );
 			const extraCSS = ':root {' +
 					'--global--color-background: ' + background + ';' +
+					'--global--color-background-high-contrast: ' + background + ';' +
 					'--global--color-foreground: ' + foreground + ';' +
 					'--global--color-foreground-low-contrast: ' + foregroundLowContrast + ';' +
 					'--global--color-foreground-high-contrast: ' + foregroundHighContrast + ';' +

spearhead/inc/wpcom-colors-utils.php

@@ -140,6 +140,7 @@ function seedlet_custom_colors_extra_css() {
 	:root,
 	#editor .editor-styles-wrapper {
 		--global--color-background: <?php echo $background; ?>;
+		--global--color-background-high-contrast: <?php echo $background; ?>;
 		--global--color-foreground: <?php echo $foreground; ?>;
 		--global--color-foreground-low-contrast: <?php echo $foreground_low_contrast; ?>;
 		--global--color-foreground-high-contrast: <?php echo $foreground_high_contrast; ?>;

spearhead/variables.css

@@ -11,6 +11,7 @@
 	--global--color-foreground: #000000;
 	--global--color-foreground-low-contrast: #333333;
 	--global--color-background: #fff;
+	--global--color-background-high-contrast: #F9F9F9;
 	--global--color-border: var(--global--color-secondary);
 	/* Font Weight */
 	--global--font-weight: 500;
@@ -89,7 +90,7 @@
 	--list--font-family: var(--global--font-secondary);
 
 	/* Sticky Posts */
-	--sticky-posts--color-background: #F9F9F9;
+	--sticky-posts--color-background: var(--global--color-background-high-contrast);
 	--sticky-posts--entry-title-font-size: 24px;
 	--sticky-posts--entry-content-font-size: 20px;
 	--sticky-posts--alt-color-background: var(--global--color-background);
@@ -111,10 +112,11 @@
 		--global--color-foreground: #ffffff;
 		--global--color-foreground-low-contrast: #b2b2b2;
 		--global--color-background: #1e1f21;
+		--global--color-background-high-contrast: #2d3139;
 		--global--color-text-selection: #000000;
 		--sticky-posts--color-background: var(--global--color-background);
-		--sticky-posts--alt-color-background: #2d3139;
-		--primary-nav--color-background: var(--sticky-posts--alt-color-background);
+		--sticky-posts--alt-color-background: var(--global--color-background-high-contrast);
+		--primary-nav--color-background: var(--global--color-background-high-contrast);
 		--primary-nav--dropdown-color-link: var(--global--color-foreground);
 	}
 }