Merge pull request #2608 from Automattic/update/spearhead-dark-mode

Spearhead: Update dark mode colors

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

@@ -36,9 +36,13 @@
 }
 
 // Sticky posts
-.has-sticky-post .site-main > *:first-child {
-	margin-top: calc( 0px - var(--global--spacing-vertical) );
-	padding-top: var(--global--spacing-vertical);
+.has-sticky-post .site-main {
+	background: var(--sticky-posts--alt-color-background);
+
+	> *:first-child {
+		margin-top: calc( 0px - var(--global--spacing-vertical) );
+		padding-top: var(--global--spacing-vertical);
+	}
 }
 
 .post.sticky { // .post class needed to make this stronger
@@ -49,6 +53,7 @@
 	}
 
 	.entry-content {
+		color: var(--sticky-posts--color-text);
 		font-size: var(--sticky-posts--entry-content-font-size);
 		> * {
 			color: var(--global--color-foreground-light);
@@ -90,4 +95,8 @@
 			margin-left: 1rem;
 		}
 	}
-}
+}
+
+.single {
+	color: var(--global--color-foreground-light);
+}

spearhead/style-rtl.css

@@ -69,6 +69,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	padding-top: 0;
 }
 
+.has-sticky-post .site-main {
+	background: var(--sticky-posts--alt-color-background);
+}
+
 .has-sticky-post .site-main > *:first-child {
 	margin-top: calc( 0px - var(--global--spacing-vertical));
 	padding-top: var(--global--spacing-vertical);
@@ -83,6 +87,7 @@ 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);
 }
 
@@ -122,6 +127,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin-right: 1rem;
 }
 
+.single {
+	color: var(--global--color-foreground-light);
+}
+
 .has-link-color a, a {
 	border-bottom: 1px solid transparent;
 	transition: all 0.1s ease;

spearhead/style.css

@@ -69,6 +69,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	padding-top: 0;
 }
 
+.has-sticky-post .site-main {
+	background: var(--sticky-posts--alt-color-background);
+}
+
 .has-sticky-post .site-main > *:first-child {
 	margin-top: calc( 0px - var(--global--spacing-vertical));
 	padding-top: var(--global--spacing-vertical);
@@ -83,6 +87,7 @@ 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);
 }
 
@@ -122,6 +127,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin-left: 1rem;
 }
 
+.single {
+	color: var(--global--color-foreground-light);
+}
+
 .has-link-color a, a {
 	border-bottom: 1px solid transparent;
 	transition: all 0.1s ease;

spearhead/variables.css

@@ -83,9 +83,11 @@
 	--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;
+	--sticky-posts--alt-color-background: var(--global--color-background);
 
 	/* Forms */
 	--form--border-color: var(--global--color-secondary);
@@ -97,17 +99,19 @@
 
 @media ( prefers-color-scheme: dark ) {
 	:root {
-		--global--color-primary: #f00048;
+		--global--color-primary: #ff6a81;
 		--global--color-primary-hover: #ffffff;
-		--global--color-secondary: #c0c0c0;
+		--global--color-secondary: #b2b2b2;
 		--global--color-secondary-hover: #cccccc;
 		--global--color-foreground: #b2b2b2;
 		--global--color-foreground-light: #ffffff;
-		--global--color-background: #080b11;
+		--global--color-background: #1e1f21;
 		--global--color-text-selection: #000000;
 		--primary-nav--color-background: var(--global--color-foreground-light);
-		--sticky-posts--color-background: #1E1F21;
 		--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;
 	}
 }