Merge pull request #2684 from Automattic/update/spearhead-colors

Spearhead: Update colors

spearhead/assets/sass/_posts-and-pages.scss

@@ -19,7 +19,7 @@
 				display: none;
 			}
 			a {
-				color: var(--global--color-foreground-light);
+				color: var(--global--color-foreground-low-contrast);
 				font-family: var(--global--font-primary);
 				font-size: var(--global--font-size-md);
 			}
@@ -65,11 +65,7 @@
 	}
 
 	.entry-content {
-		color: var(--sticky-posts--color-text);
 		font-size: var(--sticky-posts--entry-content-font-size);
-		> * {
-			color: var(--global--color-foreground-light);
-		}
 	}
 }
 

spearhead/assets/sass/block-extends/_latest-posts.scss

@@ -6,7 +6,7 @@
 		}
 
 		> a {
-			color: var(--global--color-foreground-light);
+			color: var(--global--color-foreground-low-contrast);
 			font-size: var(--global--font-size-lg);
 			font-weight: 500;
 

spearhead/inc/wpcom-colors.php

@@ -4,7 +4,7 @@ require_once get_template_directory() . '/inc/wpcom-colors-utils.php';
 
 seedlet_define_color_annotations( [
 	'background' => '#FFFFFF',
-	'foreground' => '#333333',
+	'foreground' => '#000000',
 	'primary' => '#DB0042',
 	'secondary' => '#555555',
 	'tertiary' => '#FAFBF6',

spearhead/style-rtl.css

@@ -55,7 +55,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .post .entry-header .entry-meta .posted-on a {
-	color: var(--global--color-foreground-light);
+	color: var(--global--color-foreground-low-contrast);
 	font-family: var(--global--font-primary);
 	font-size: var(--global--font-size-md);
 }
@@ -100,14 +100,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .post.sticky .entry-content {
-	color: var(--sticky-posts--color-text);
 	font-size: var(--sticky-posts--entry-content-font-size);
 }
 
-.post.sticky .entry-content > * {
-	color: var(--global--color-foreground-light);
-}
-
 .sticky-post {
 	display: none;
 }
@@ -366,7 +361,7 @@ ul.wp-block-categories,
 }
 
 .wp-block-latest-posts > li > a {
-	color: var(--global--color-foreground-light);
+	color: var(--global--color-foreground-low-contrast);
 	font-size: var(--global--font-size-lg);
 	font-weight: 500;
 }

spearhead/style.css

@@ -55,7 +55,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .post .entry-header .entry-meta .posted-on a {
-	color: var(--global--color-foreground-light);
+	color: var(--global--color-foreground-low-contrast);
 	font-family: var(--global--font-primary);
 	font-size: var(--global--font-size-md);
 }
@@ -100,14 +100,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .post.sticky .entry-content {
-	color: var(--sticky-posts--color-text);
 	font-size: var(--sticky-posts--entry-content-font-size);
 }
 
-.post.sticky .entry-content > * {
-	color: var(--global--color-foreground-light);
-}
-
 .sticky-post {
 	display: none;
 }
@@ -366,7 +361,7 @@ ul.wp-block-categories,
 }
 
 .wp-block-latest-posts > li > a {
-	color: var(--global--color-foreground-light);
+	color: var(--global--color-foreground-low-contrast);
 	font-size: var(--global--font-size-lg);
 	font-weight: 500;
 }

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 Weight */
@@ -50,7 +50,7 @@
 	--heading--line-height-h3: 1.4;
 
 	--entry-header--font-size: var(--heading--font-size-h1);
-	--entry-header--color: var(--global--color-foreground-light);
+	--entry-header--color: var(--global--color-foreground);
 
 	--button--border-radius: 0px;
 	--button--color-text: var(--global--color-background);
@@ -85,7 +85,6 @@
 	--list--font-family: var(--global--font-secondary);
 
 	/* Sticky Posts */
-	--sticky-posts--color-text: var(--global--color-foreground);
 	--sticky-posts--color-background: #F9F9F9;
 	--sticky-posts--entry-title-font-size: 24px;
 	--sticky-posts--entry-content-font-size: 20px;
@@ -105,15 +104,14 @@
 		--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--alt-color-background: #2d3139;
 	}
 }