Spearhead: Update light and dark colors

spearhead/navigation-rtl.css

@@ -41,12 +41,12 @@
 
 .has-marketing-bar.lock-scrolling .menu-button-container > .button,
 .has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
-	top: var(--marketing-bar--height);
+	top: var(--wpcom-marketing-bar--height);
 }
 
 .admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
-	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 .menu-button-container .button,
@@ -76,7 +76,7 @@
 .has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
 .primary-navigation .button.close, .has-marketing-bar
 .woo-navigation .button.close {
-	top: calc(-1 * var(--marketing-bar--height));
+	top: calc(-1 * var(--wpcom-marketing-bar--height));
 }
 
 .admin-bar .menu-button-container .button.close, .admin-bar
@@ -88,7 +88,7 @@
 .admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
 .primary-navigation .button.close, .admin-bar.has-marketing-bar
 .woo-navigation .button.close {
-	top: calc(-1 * (var(--wpadmin-bar--height) + var(--marketing-bar--height)));
+	top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
 }
 
 .menu-button-container .button#woo-open-menu,
@@ -223,7 +223,7 @@
 .woo-navigation,
 .has-marketing-bar
 .woo-navigation > div {
-	top: var(--marketing-bar--height);
+	top: var(--wpcom-marketing-bar--height);
 }
 
 .admin-bar .primary-navigation,
@@ -239,7 +239,7 @@
 .woo-navigation,
 .admin-bar.has-marketing-bar
 .woo-navigation > div {
-	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 @media only screen and (min-width: 830px) {

spearhead/navigation.css

@@ -41,12 +41,12 @@
 
 .has-marketing-bar.lock-scrolling .menu-button-container > .button,
 .has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
-	top: var(--marketing-bar--height);
+	top: var(--wpcom-marketing-bar--height);
 }
 
 .admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
-	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 .menu-button-container .button,
@@ -76,7 +76,7 @@
 .has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
 .primary-navigation .button.close, .has-marketing-bar
 .woo-navigation .button.close {
-	top: calc(-1 * var(--marketing-bar--height));
+	top: calc(-1 * var(--wpcom-marketing-bar--height));
 }
 
 .admin-bar .menu-button-container .button.close, .admin-bar
@@ -88,7 +88,7 @@
 .admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
 .primary-navigation .button.close, .admin-bar.has-marketing-bar
 .woo-navigation .button.close {
-	top: calc(-1 * (var(--wpadmin-bar--height) + var(--marketing-bar--height)));
+	top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
 }
 
 .menu-button-container .button#woo-open-menu,
@@ -223,7 +223,7 @@
 .woo-navigation,
 .has-marketing-bar
 .woo-navigation > div {
-	top: var(--marketing-bar--height);
+	top: var(--wpcom-marketing-bar--height);
 }
 
 .admin-bar .primary-navigation,
@@ -239,7 +239,7 @@
 .woo-navigation,
 .admin-bar.has-marketing-bar
 .woo-navigation > div {
-	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 @media only screen and (min-width: 830px) {

spearhead/variables.css

@@ -9,7 +9,7 @@
 	--global--color-secondary: #555555;
 	--global--color-secondary-hover: #333333;
 	--global--color-foreground: #000000;
-	--global--color-foreground-light: #333333;
+	--global--color-foreground-low-contrast: #333333;
 	--global--color-background: #fff;
 	--global--color-border: var(--global--color-secondary);
 	/* Font Size */
@@ -103,15 +103,15 @@
 		--global--color-primary-hover: #ffffff;
 		--global--color-secondary: #b2b2b2;
 		--global--color-secondary-hover: #cccccc;
-		--global--color-foreground: #b2b2b2;
-		--global--color-foreground-light: #ffffff;
+		--global--color-foreground: #ffffff;
+		--global--color-foreground-low-contrast: #b2b2b2;
 		--global--color-background: #1e1f21;
 		--global--color-text-selection: #000000;
-		--primary-nav--color-background: var(--global--color-foreground-light);
+		--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--color-text: var(--global--color-foreground-light);
+		--sticky-posts--color-text: var(--global--color-foreground-low-contrast);
 		--sticky-posts--alt-color-background: #2d3139;
 	}
 }