Merge pull request #2708 from Automattic/add/spearhead-menu-dark-mobile

Spearhead: change colors for dark mode mobile menu

spearhead/assets/sass/_header.scss

@@ -62,7 +62,7 @@ $site-branding-height: 68px;
 				}
 
 				a {
-					color: var(--global--color-background);
+					color: var(--primary-nav--dropdown-color-link);
 				}
 			}
 		}

spearhead/style-rtl.css

@@ -251,7 +251,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 		top: 114px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {
-		color: var(--global--color-background);
+		color: var(--primary-nav--dropdown-color-link);
 	}
 }
 

spearhead/style.css

@@ -251,7 +251,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 		top: 114px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {
-		color: var(--global--color-background);
+		color: var(--primary-nav--dropdown-color-link);
 	}
 }
 

spearhead/variables.css

@@ -69,6 +69,7 @@
 
 	--primary-nav--justify-content: flex-end;
 	--primary-nav--color-link: var(--global--color-secondary);
+	--primary-nav--dropdown-color-link: var(--global--color-background);
 	--primary-nav--color-background: var(--global--color-foreground);
 	--primary-nav--padding: 6px;
 	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
@@ -108,10 +109,11 @@
 		--global--color-foreground-low-contrast: #b2b2b2;
 		--global--color-background: #1e1f21;
 		--global--color-text-selection: #000000;
-		--primary-nav--color-background: var(--global--color-foreground-low-contrast);
-		--button--padding-vertical: 24px;
-		--button--padding-horizontal: 32px;
 		--sticky-posts--color-background: var(--global--color-background);
 		--sticky-posts--alt-color-background: #2d3139;
+		--primary-nav--color-background: var(--sticky-posts--alt-color-background);
+		--primary-nav--dropdown-color-link: var(--global--color-foreground);
+		--button--padding-vertical: 24px;
+		--button--padding-horizontal: 32px;
 	}
 }