Hever: Add new background colours

hever/functions.php

@@ -82,6 +82,16 @@ if ( ! function_exists( 'hever_setup' ) ) :
 					'slug'  => 'foreground-light',
 					'color' => '#757575',
 				),
+				array(
+					'name'  => __( 'Lighter Gray', 'varia' ),
+					'slug'  => 'background-dark',
+					'color' => '#C5C5C5',
+				),
+				array(
+					'name'  => __( 'Subtle Gray', 'varia' ),
+					'slug'  => 'background-light',
+					'color' => '#F8F8F8',
+				),
 				array(
 					'name'  => __( 'White', 'hever' ),
 					'slug'  => 'background',

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

@@ -70,10 +70,14 @@ $config-global: (
 		),
 		"foreground": (
 			"default": #303030,
-			"light": #757575, // must be accesible!
-			"dark": #101010, // must be accesible!
+			"light": #757575, // must be accessible against background
+			"dark": #101010, // must be accessible against background
+		),
+		"background": (
+			"default": white,
+			"light": #F8F8F8, // must be accessible against foreground-default
+			"dark": #C5C5C5, // must be accessible against foreground-default
 		),
-		"background": white,
 		"border": (
 			"default": #C5C5C5,
 			"light": #F8F8F8,
@@ -158,8 +162,8 @@ $config-elements: (
 $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"),
 	),

hever/sass/_extra-child-theme.scss

@@ -147,7 +147,7 @@ a {
 
 					& > a {
 						background: #{map-deep-get($config-global, "color", "primary", "default")};
-						color: #{map-deep-get($config-global, "color", "background")};
+						color: #{map-deep-get($config-global, "color", "background", "default")};
 					}
 
 					&:hover > a,

hever/style-editor.css

@@ -620,6 +620,14 @@ table th,
 	color: #101010 !important;
 }
 
+.has-background-light-color[class] {
+	color: #F8F8F8 !important;
+}
+
+.has-background-dark-color[class] {
+	color: #C5C5C5 !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -669,6 +677,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #F8F8F8 !important;
+	color: #303030;
+}
+
+.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: #C5C5C5 !important;
+	color: #303030;
+}
+
+.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: #303030;

hever/style-rtl.css

@@ -1958,6 +1958,14 @@ table th,
 	color: #101010 !important;
 }
 
+.has-background-light-color[class] {
+	color: #F8F8F8 !important;
+}
+
+.has-background-dark-color[class] {
+	color: #C5C5C5 !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -2007,6 +2015,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #F8F8F8 !important;
+	color: #303030;
+}
+
+.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: #C5C5C5 !important;
+	color: #303030;
+}
+
+.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: #303030;

hever/style.css

@@ -1963,6 +1963,14 @@ table th,
 	color: #101010 !important;
 }
 
+.has-background-light-color[class] {
+	color: #F8F8F8 !important;
+}
+
+.has-background-dark-color[class] {
+	color: #C5C5C5 !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -2012,6 +2020,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #F8F8F8 !important;
+	color: #303030;
+}
+
+.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: #C5C5C5 !important;
+	color: #303030;
+}
+
+.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: #303030;