Varia: Rework light background option by adding new $var to `background`

varia/functions.php

@@ -175,8 +175,8 @@ if ( ! function_exists( 'varia_setup' ) ) :
 					'color' => '#767676',
 				),
 				array(
-					'name'  => __( 'Lighter Gray', 'varia' ),
-					'slug'  => 'foreground-lighter',
+					'name'  => __( 'Subtle Gray', 'varia' ),
+					'slug'  => 'background-light',
 					'color' => '#FAFAFA',
 				),
 				array(

varia/sass/abstracts/_config-global.scss

@@ -63,9 +63,11 @@ $config-global: (
 			"default": #444444,
 			"light": #767676, // must be accessible against background
 			"dark": #111111, // must be accessible against background
-			"lighter": #FAFAFA, // must be accessible against foreground-default
 		),
-		"background": white,
+		"background": (
+			"default": white,
+			"light": #FAFAFA, // must be accessible against foreground-default
+		),
 		"border": (
 			"default": #DDDDDD,
 			"light": #FAFAFA,

varia/sass/base/_accessibility.scss

@@ -12,7 +12,7 @@
 	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 
 	&:focus {
-		background-color: #{map-deep-get($config-global, "color", "background")};
+		background-color: #{map-deep-get($config-global, "color", "background", "default")};
 		border-radius: 3px;
 		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 		clip: auto !important;

varia/sass/base/_editor.scss

@@ -1,6 +1,6 @@
 body {
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
-	background-color: #{map-deep-get($config-global, "color", "background")};
+	background-color: #{map-deep-get($config-global, "color", "background", "default")};
 	font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
 	font-size: #{map-deep-get($config-global, "font", "size", "root")};
 	font-weight: normal;

varia/sass/base/_reset.scss

@@ -76,7 +76,7 @@ body {
 	font-weight: normal;
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 	text-align: left;
-	background-color: #{map-deep-get($config-global, "color", "background")};
+	background-color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 /**

varia/sass/blocks/button/_config.scss

@@ -4,8 +4,8 @@
 $config-button: (
 	// Colors
 	"color": (
-		"text": map-deep-get($config-global, "color", "background"),
-		"text-hover": map-deep-get($config-global, "color", "background"),
+		"text": map-deep-get($config-global, "color", "background", "default"),
+		"text-hover": map-deep-get($config-global, "color", "background", "default"),
 		"background": map-deep-get($config-global, "color", "primary", "default"),
 		"background-hover": map-deep-get($config-global, "color", "primary", "hover"),
 	),

varia/sass/blocks/cover/_editor.scss

@@ -7,7 +7,7 @@
 	.wp-block-cover__inner-container,
 	.wp-block-cover-image-text,
 	.wp-block-cover-text {
-		color: #{map-deep-get($config-global, "color", "background")};
+		color: #{map-deep-get($config-global, "color", "background", "default")};
 
 		a {
 			color: currentColor;

varia/sass/blocks/cover/_style.scss

@@ -9,7 +9,7 @@
 	.wp-block-cover-image-text,
 	.wp-block-cover-text {
 		width: calc(100% - #{2 * map-deep-get($config-global, "spacing", "horizontal")});
-		color: #{map-deep-get($config-global, "color", "background")};
+		color: #{map-deep-get($config-global, "color", "background", "default")};
 		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 

varia/sass/blocks/posts-list/_style.scss

@@ -9,7 +9,7 @@
 }
 
 .a8c-posts-list-item__featured span {
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
 	font-family: #{map-deep-get($config-global, "font", "family", "primary")};
 	font-weight: bold;

varia/sass/blocks/pullquote/_editor.scss

@@ -43,7 +43,7 @@
 	&.is-style-solid-color {
 
 		background-color: #{map-deep-get($config-pullquote, "color", "background")};
-		color: #{map-deep-get($config-global, "color", "background")};
+		color: #{map-deep-get($config-global, "color", "background", "default")};
 
 		&:not(.alignleft):not(.alignright) blockquote {
 			// max-width: calc( var(--global--width-content) - (2 * calc( var(--global--width-content) / 12 )) );

varia/sass/blocks/pullquote/_style.scss

@@ -50,7 +50,7 @@
 	&.is-style-solid-color {
 
 		background-color: #{map-deep-get($config-pullquote, "color", "background")};
-		color: #{map-deep-get($config-global, "color", "background")};
+		color: #{map-deep-get($config-global, "color", "background", "default")};
 
 		&:not(.alignleft):not(.alignright) blockquote {
 			@extend %responsive-align-container;

varia/sass/blocks/utilities/_editor.scss

@@ -35,8 +35,12 @@
 	color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
 }
 
+.has-background-light-color[class] {
+	color: #{map-deep-get($config-global, "color", "background", "light")} !important;
+}
+
 .has-background-color[class] {
-	color: #{map-deep-get($config-global, "color", "background")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 }
 
 // Gutenberg background-color options
@@ -44,7 +48,7 @@
 
 .has-primary-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
@@ -52,7 +56,7 @@
 
 .has-secondary-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
@@ -60,7 +64,7 @@
 
 .has-foreground-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
@@ -68,7 +72,7 @@
 
 .has-foreground-light-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
@@ -76,14 +80,22 @@
 
 .has-foreground-dark-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
+	p, h1, h2, h3, h4, h5, h6 {
+		color: currentColor;
+	}
+}
+
+.has-background-light-background-color[class] {
+	background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
 }
 
 .has-background-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "background")} !important;
+	background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
@@ -121,4 +133,4 @@
 	font-family: #{map-deep-get($config-heading, "font", "family")};
 	font-size: calc(2 * #{strip-unit(map-deep-get($config-heading, "font", "size", "h1")) + 0em});
 	font-weight: #{map-deep-get($config-heading, "font", "weight")};
-}
+}

varia/sass/blocks/utilities/_style.scss

@@ -68,10 +68,6 @@
 	color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
 }
 
-.has-foreground-lighter-color[class] {
-	color: #{map-deep-get($config-global, "color", "foreground", "lighter")} !important;
-}
-
 .has-foreground-light-color[class] {
 	color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
 }
@@ -80,8 +76,12 @@
 	color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
 }
 
+.has-background-light-color[class] {
+	color: #{map-deep-get($config-global, "color", "background", "light")} !important;
+}
+
 .has-background-color[class] {
-	color: #{map-deep-get($config-global, "color", "background")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 }
 
 // Gutenberg background-color options
@@ -89,7 +89,7 @@
 
 .has-primary-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
@@ -97,7 +97,7 @@
 
 .has-secondary-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
@@ -105,38 +105,38 @@
 
 .has-foreground-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
 }
 
-.has-foreground-lighter-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "foreground", "lighter")} !important;
-	color: #{map-deep-get($config-global, "color", "foreground", "default")};
+.has-foreground-light-background-color[class] {
+	background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
 }
 
-.has-foreground-light-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+.has-foreground-dark-background-color[class] {
+	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
 }
 
-.has-foreground-dark-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
-	color: #{map-deep-get($config-global, "color", "background")};
+.has-background-light-background-color[class] {
+	background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
 }
 
 .has-background-background-color[class] {
-	background-color: #{map-deep-get($config-global, "color", "background")} !important;
+	background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;

varia/sass/child-theme/_config-child-theme-deep.scss

@@ -72,9 +72,11 @@ $config-global: (
 			"default": #444444,
 			"light": #767676, // must be accessible against background
 			"dark": #111111, // must be accessible against background
-			"lighter": #FAFAFA, // must be accessible against foreground-default
 		),
-		"background": white,
+		"background": (
+			"default": white,
+			"light": #FAFAFA, // must be accessible against foreground-default
+		),
 		"border": (
 			"default": #DDDDDD,
 			"light": #FAFAFA,

varia/sass/components/header/_site-main-navigation.scss

@@ -107,7 +107,7 @@
 			position: relative;
 
 			@include media(mobile) {
-				background: map-deep-get($config-global, "color", "background");
+				background: map-deep-get($config-global, "color", "background", "default");
 				box-shadow: map-deep-get($config-global, "elevation", "4dp");
 				left: 0;
 				top: 100%;

varia/sass/pages/_posts-and-pages.scss

@@ -3,7 +3,7 @@
 }
 
 .sticky-post {
-	color: #{map-deep-get($config-global, "color", "background")};
+	color: #{map-deep-get($config-global, "color", "background", "default")};
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
 	font-family: #{map-deep-get($config-global, "font", "family", "primary")};
 	font-weight: bold;

varia/style-editor.css

@@ -576,6 +576,10 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -625,6 +629,15 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FAFAFA !important;
+	color: #444444;
+}
+
+.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
+	color: currentColor;
+}
+
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;

varia/style-rtl.css

@@ -1909,10 +1909,6 @@ table th,
 	color: #444444 !important;
 }
 
-.has-foreground-lighter-color[class] {
-	color: #FAFAFA !important;
-}
-
 .has-foreground-light-color[class] {
 	color: #767676 !important;
 }
@@ -1921,6 +1917,10 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -1952,15 +1952,6 @@ table th,
 	color: currentColor;
 }
 
-.has-foreground-lighter-background-color[class] {
-	background-color: #FAFAFA !important;
-	color: #444444;
-}
-
-.has-foreground-lighter-background-color[class] p, .has-foreground-lighter-background-color[class] h1, .has-foreground-lighter-background-color[class] h2, .has-foreground-lighter-background-color[class] h3, .has-foreground-lighter-background-color[class] h4, .has-foreground-lighter-background-color[class] h5, .has-foreground-lighter-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
 	color: white;
@@ -1979,6 +1970,15 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FAFAFA !important;
+	color: #444444;
+}
+
+.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
+	color: currentColor;
+}
+
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;

varia/style.css

@@ -1914,10 +1914,6 @@ table th,
 	color: #444444 !important;
 }
 
-.has-foreground-lighter-color[class] {
-	color: #FAFAFA !important;
-}
-
 .has-foreground-light-color[class] {
 	color: #767676 !important;
 }
@@ -1926,6 +1922,10 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -1957,15 +1957,6 @@ table th,
 	color: currentColor;
 }
 
-.has-foreground-lighter-background-color[class] {
-	background-color: #FAFAFA !important;
-	color: #444444;
-}
-
-.has-foreground-lighter-background-color[class] p, .has-foreground-lighter-background-color[class] h1, .has-foreground-lighter-background-color[class] h2, .has-foreground-lighter-background-color[class] h3, .has-foreground-lighter-background-color[class] h4, .has-foreground-lighter-background-color[class] h5, .has-foreground-lighter-background-color[class] h6 {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
 	color: white;
@@ -1984,6 +1975,15 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FAFAFA !important;
+	color: #444444;
+}
+
+.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
+	color: currentColor;
+}
+
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;