Varia: Add a `dark` option to the `background`

varia/functions.php

@@ -174,6 +174,11 @@ if ( ! function_exists( 'varia_setup' ) ) :
 					'slug'  => 'foreground-light',
 					'color' => '#767676',
 				),
+				array(
+					'name'  => __( 'Lighter Gray', 'varia' ),
+					'slug'  => 'background-dark',
+					'color' => '#DDDDDD',
+				),
 				array(
 					'name'  => __( 'Subtle Gray', 'varia' ),
 					'slug'  => 'background-light',

varia/sass/abstracts/_config-global.scss

@@ -67,6 +67,7 @@ $config-global: (
 		"background": (
 			"default": white,
 			"light": #FAFAFA, // must be accessible against foreground-default
+			"dark": #DDDDDD, // must be accessible against foreground-default
 		),
 		"border": (
 			"default": #DDDDDD,

varia/sass/blocks/utilities/_editor.scss

@@ -39,6 +39,10 @@
 	color: #{map-deep-get($config-global, "color", "background", "light")} !important;
 }
 
+.has-background-dark-color[class] {
+	color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
+}
+
 .has-background-color[class] {
 	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 }
@@ -94,6 +98,14 @@
 	}
 }
 
+.has-background-dark-background-color[class] {
+	background-color: #{map-deep-get($config-global, "color", "background", "dark")} !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", "default")} !important;
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};

varia/sass/blocks/utilities/_style.scss

@@ -80,6 +80,10 @@
 	color: #{map-deep-get($config-global, "color", "background", "light")} !important;
 }
 
+.has-background-dark-color[class] {
+	color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
+}
+
 .has-background-color[class] {
 	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 }
@@ -135,6 +139,14 @@
 	}
 }
 
+.has-background-dark-background-color[class] {
+	background-color: #{map-deep-get($config-global, "color", "background", "dark")} !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", "default")} !important;
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};

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

@@ -76,6 +76,7 @@ $config-global: (
 		"background": (
 			"default": white,
 			"light": #FAFAFA, // must be accessible against foreground-default
+			"dark": #DDDDDD, // must be accessible against foreground-default
 		),
 		"border": (
 			"default": #DDDDDD,

varia/style-editor.css

@@ -580,6 +580,10 @@ table th,
 	color: #FAFAFA !important;
 }
 
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -638,6 +642,15 @@ table th,
 	color: currentColor;
 }
 
+.has-background-dark-background-color[class] {
+	background-color: #DDDDDD !important;
+	color: #444444;
+}
+
+.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
+	color: currentColor;
+}
+
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;

varia/style-rtl.css

@@ -1921,6 +1921,10 @@ table th,
 	color: #FAFAFA !important;
 }
 
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -1979,6 +1983,15 @@ table th,
 	color: currentColor;
 }
 
+.has-background-dark-background-color[class] {
+	background-color: #DDDDDD !important;
+	color: #444444;
+}
+
+.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
+	color: currentColor;
+}
+
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;

varia/style.css

@@ -1926,6 +1926,10 @@ table th,
 	color: #FAFAFA !important;
 }
 
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -1984,6 +1988,15 @@ table th,
 	color: currentColor;
 }
 
+.has-background-dark-background-color[class] {
+	background-color: #DDDDDD !important;
+	color: #444444;
+}
+
+.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
+	color: currentColor;
+}
+
 .has-background-background-color[class] {
 	background-color: white !important;
 	color: #444444;