Leven: Add new background colours

leven/functions.php

@@ -83,15 +83,25 @@ if ( ! function_exists( 'leven_setup' ) ) :
 					'color' => '#767676',
 				),
 				array(
-					'name'  => __( 'White', 'leven' ),
-					'slug'  => 'background',
+					'name'  => __( 'Lighter Gray', 'varia' ),
+					'slug'  => 'background-dark',
+					'color' => '#DDDDDD',
+				),
+				array(
+					'name'  => __( 'White', 'varia' ),
+					'slug'  => 'background-light',
 					'color' => '#FFFFFF',
 				),
+				array(
+					'name'  => __( 'Subtle Gray', 'leven' ),
+					'slug'  => 'background',
+					'color' => '#F7F7F6',
+				),
 			)
 		);
 	}
 endif;
-add_action( 'after_setup_theme', 'leven_setup' );
+add_action( 'after_setup_theme', 'leven_setup', 12 );
 
 /**
  * Set the content width in pixels, based on the child-theme's design and stylesheet.

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

@@ -73,10 +73,14 @@ $config-global: (
 			"light": #767676, // must be accesible!
 			"dark": #111111, // must be accesible!
 		),
-		"background": #f7f7f6,
+		"background": (
+			"default": #f7f7f6,
+			"light": #FFFFFF, // must be accessible against foreground-default
+			"dark": #DDDDDD, // must be accessible against foreground-default
+		),
 		"border": (
 			"default": #DDDDDD,
-			"light": #FAFAFA,
+			"light": #FFFFFF,
 			"dark": #AAAAAA,
 		),
 		"text-selection": #d2d2cf,

leven/style-editor.css

@@ -620,6 +620,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FFFFFF !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: #f7f7f6 !important;
 }
@@ -669,6 +677,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FFFFFF !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-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: #f7f7f6 !important;
 	color: #444444;

leven/style-rtl.css

@@ -1958,6 +1958,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FFFFFF !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: #f7f7f6 !important;
 }
@@ -2007,6 +2015,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FFFFFF !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-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: #f7f7f6 !important;
 	color: #444444;

leven/style.css

@@ -1963,6 +1963,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FFFFFF !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: #f7f7f6 !important;
 }
@@ -2012,6 +2020,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FFFFFF !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-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: #f7f7f6 !important;
 	color: #444444;