Merge pull request #1152 from Automattic/new/introduce-lighter-foreground

Varia: Introduce a lighter foreground `#FAFAFA` and extend the background color variables array.

brompton/functions.php

@@ -92,7 +92,17 @@ if ( ! function_exists( 'brompton_setup' ) ) :
 					'color' => '#666666',
 				),
 				array(
-					'name'  => __( 'Ivory', 'brompton' ),
+					'name'  => __( 'Dark Ivory', 'varia' ),
+					'slug'  => 'background-dark',
+					'color' => '#B9B6B2',
+				),
+				array(
+					'name'  => __( 'Ivory', 'varia' ),
+					'slug'  => 'background-light',
+					'color' => '#CFCDC7',
+				),
+				array(
+					'name'  => __( 'Light Ivory', 'brompton' ),
 					'slug'  => 'background',
 					'color' => '#E8E4DD',
 				),

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

@@ -73,11 +73,15 @@ $config-global: (
 			"light": #666666, // must be accesible!
 			"dark": #474747, // must be accesible!
 		),
-		"background": #E8E4DD,
+		"background": (
+			"default": #E8E4DD,
+			"light": #CFCDC7, // must be accessible against foreground-default
+			"dark": #B9B6B2, // must be accessible against foreground-default
+		),
 		"border": (
-			"default": rgba(#000, 0.25),
-			"light": rgba(#000, 0.1),
-			"dark": rgba(#000, 0.5),
+			"default": #B9B6B2,
+			"light": #CFCDC7,
+			"dark": #8B8985,
 		),
 		"text-selection": #F1D6D0,
 		"black": black,
@@ -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", "foreground", "default"),
 		"background-hover": map-deep-get($config-global, "color", "primary", "default"),
 	),

brompton/sass/style-child-theme.scss

@@ -15,7 +15,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Varia is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
+Bromtpon is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of

brompton/style-editor.css

@@ -459,9 +459,9 @@ p.has-background:not(.has-background-background-color) a {
 	margin-left: 0;
 	margin-right: 0;
 	text-align: center;
-	border-top-color: rgba(0, 0, 0, 0.25);
+	border-top-color: #B9B6B2;
 	border-top-width: 5px;
-	border-bottom-color: rgba(0, 0, 0, 0.25);
+	border-bottom-color: #B9B6B2;
 	border-bottom-width: 5px;
 	color: #252E36;
 	/**
@@ -550,14 +550,14 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-separator,
 hr {
-	border-bottom: 2px solid rgba(0, 0, 0, 0.25);
+	border-bottom: 2px solid #B9B6B2;
 	clear: both;
 }
 
 .wp-block-separator[style*="text-align:right"], .wp-block-separator[style*="text-align: right"],
 hr[style*="text-align:right"],
 hr[style*="text-align: right"] {
-	border-right-color: rgba(0, 0, 0, 0.25);
+	border-right-color: #B9B6B2;
 }
 
 .wp-block-separator.is-style-wide,
@@ -572,7 +572,7 @@ hr.is-style-dots {
 
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
-	color: rgba(0, 0, 0, 0.25);
+	color: #B9B6B2;
 }
 
 table th,
@@ -620,6 +620,14 @@ table th,
 	color: #474747 !important;
 }
 
+.has-background-light-color[class] {
+	color: #CFCDC7 !important;
+}
+
+.has-background-dark-color[class] {
+	color: #B9B6B2 !important;
+}
+
 .has-background-color[class] {
 	color: #E8E4DD !important;
 }
@@ -669,6 +677,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #CFCDC7 !important;
+	color: #252E36;
+}
+
+.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: #B9B6B2 !important;
+	color: #252E36;
+}
+
+.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: #E8E4DD !important;
 	color: #252E36;

brompton/style-rtl.css

@@ -16,7 +16,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Varia is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
+Bromtpon is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -970,7 +970,7 @@ input[type="datetime-local"],
 input[type="color"],
 textarea {
 	color: #252E36;
-	border: 1px solid rgba(0, 0, 0, 0.25);
+	border: 1px solid #B9B6B2;
 	border-radius: 3px;
 	padding: 16px;
 }
@@ -996,7 +996,7 @@ textarea:focus {
 }
 
 select {
-	border: 1px solid rgba(0, 0, 0, 0.25);
+	border: 1px solid #B9B6B2;
 }
 
 textarea {
@@ -1155,7 +1155,7 @@ input.has-focus[type="submit"],
 	color: #252E36;
 	font-size: 0.83333rem;
 	padding: 16px;
-	border-color: rgba(0, 0, 0, 0.25);
+	border-color: #B9B6B2;
 }
 
 .wp-block-code pre {
@@ -1694,9 +1694,9 @@ p.has-background:not(.has-background-background-color) a {
 	margin-right: 0;
 	margin-left: 0;
 	text-align: center;
-	border-top-color: rgba(0, 0, 0, 0.25);
+	border-top-color: #B9B6B2;
 	border-top-width: 5px;
-	border-bottom-color: rgba(0, 0, 0, 0.25);
+	border-bottom-color: #B9B6B2;
 	border-bottom-width: 5px;
 	color: #252E36;
 	/**
@@ -1822,7 +1822,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-separator,
 hr {
-	border-bottom: 2px solid rgba(0, 0, 0, 0.25);
+	border-bottom: 2px solid #B9B6B2;
 	clear: both;
 	margin-right: auto;
 	margin-left: auto;
@@ -1838,7 +1838,7 @@ hr.is-style-wide {
 
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
-	color: rgba(0, 0, 0, 0.25);
+	color: #B9B6B2;
 	font-size: 1.728rem;
 	letter-spacing: 0.83333rem;
 	padding-right: 0.83333rem;
@@ -1958,6 +1958,14 @@ table th,
 	color: #474747 !important;
 }
 
+.has-background-light-color[class] {
+	color: #CFCDC7 !important;
+}
+
+.has-background-dark-color[class] {
+	color: #B9B6B2 !important;
+}
+
 .has-background-color[class] {
 	color: #E8E4DD !important;
 }
@@ -2007,6 +2015,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #CFCDC7 !important;
+	color: #252E36;
+}
+
+.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: #B9B6B2 !important;
+	color: #252E36;
+}
+
+.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: #E8E4DD !important;
 	color: #252E36;
@@ -2636,13 +2662,13 @@ table th,
  * Comment Lists
  */
 .comment-list {
-	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+	border-bottom: 1px solid #B9B6B2;
 	margin-right: 0;
 	list-style: none;
 }
 
 .comment-list > li {
-	border-top: 1px solid rgba(0, 0, 0, 0.25);
+	border-top: 1px solid #B9B6B2;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -2653,7 +2679,7 @@ table th,
 }
 
 .children > li {
-	border-top: 1px solid rgba(0, 0, 0, 0.25);
+	border-top: 1px solid #B9B6B2;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -2857,6 +2883,17 @@ table th,
 	flex: 0 0 100%;
 }
 
+/* Utilities */
+img#wpstats {
+	position: absolute !important;
+	clip: rect(0, 0, 0, 0);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 0 !important;
+	width: 0 !important;
+	overflow: hidden;
+}
+
 /**
  * Site Pages
  * - Page specific styles
@@ -3443,7 +3480,7 @@ table td,
 table th,
 .wp-block-table td,
 .wp-block-table th {
-	border-color: rgba(0, 0, 0, 0.25);
+	border-color: #B9B6B2;
 }
 
 .a8c-posts-list {
@@ -3505,7 +3542,7 @@ table th,
 }
 
 .post-navigation {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-top: 1px solid #CFCDC7;
 	margin-top: -64px;
 	padding-top: 32px;
 }
@@ -3606,7 +3643,7 @@ table th,
 
 .comments-area .comment-list > li .comment-body,
 .comments-area .children > li .comment-body {
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid #CFCDC7;
 	padding: 0 32px;
 }
 
@@ -3676,7 +3713,7 @@ table th,
 }
 
 .widget-area {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-top: 1px solid #CFCDC7;
 	padding-top: 32px;
 	width: 100%;
 }
@@ -3734,7 +3771,7 @@ table th,
 .widget_jp_blogs_i_follow ul,
 .widget_top-click ul,
 .widget_upcoming_events_widget ul {
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	border-bottom: 1px solid #CFCDC7;
 	list-style: none;
 	margin-right: 0;
 }
@@ -3754,7 +3791,7 @@ table th,
 .widget_jp_blogs_i_follow li,
 .widget_top-click li,
 .widget_upcoming_events_widget li {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-top: 1px solid #CFCDC7;
 	padding: 8px 0;
 }
 

brompton/style.css

@@ -16,7 +16,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Varia is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
+Bromtpon is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -970,7 +970,7 @@ input[type="datetime-local"],
 input[type="color"],
 textarea {
 	color: #252E36;
-	border: 1px solid rgba(0, 0, 0, 0.25);
+	border: 1px solid #B9B6B2;
 	border-radius: 3px;
 	padding: 16px;
 }
@@ -996,7 +996,7 @@ textarea:focus {
 }
 
 select {
-	border: 1px solid rgba(0, 0, 0, 0.25);
+	border: 1px solid #B9B6B2;
 }
 
 textarea {
@@ -1155,7 +1155,7 @@ input.has-focus[type="submit"],
 	color: #252E36;
 	font-size: 0.83333rem;
 	padding: 16px;
-	border-color: rgba(0, 0, 0, 0.25);
+	border-color: #B9B6B2;
 }
 
 .wp-block-code pre {
@@ -1694,9 +1694,9 @@ p.has-background:not(.has-background-background-color) a {
 	margin-left: 0;
 	margin-right: 0;
 	text-align: center;
-	border-top-color: rgba(0, 0, 0, 0.25);
+	border-top-color: #B9B6B2;
 	border-top-width: 5px;
-	border-bottom-color: rgba(0, 0, 0, 0.25);
+	border-bottom-color: #B9B6B2;
 	border-bottom-width: 5px;
 	color: #252E36;
 	/**
@@ -1822,7 +1822,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-separator,
 hr {
-	border-bottom: 2px solid rgba(0, 0, 0, 0.25);
+	border-bottom: 2px solid #B9B6B2;
 	clear: both;
 	margin-left: auto;
 	margin-right: auto;
@@ -1838,7 +1838,7 @@ hr.is-style-wide {
 
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
-	color: rgba(0, 0, 0, 0.25);
+	color: #B9B6B2;
 	font-size: 1.728rem;
 	letter-spacing: 0.83333rem;
 	padding-left: 0.83333rem;
@@ -1963,6 +1963,14 @@ table th,
 	color: #474747 !important;
 }
 
+.has-background-light-color[class] {
+	color: #CFCDC7 !important;
+}
+
+.has-background-dark-color[class] {
+	color: #B9B6B2 !important;
+}
+
 .has-background-color[class] {
 	color: #E8E4DD !important;
 }
@@ -2012,6 +2020,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #CFCDC7 !important;
+	color: #252E36;
+}
+
+.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: #B9B6B2 !important;
+	color: #252E36;
+}
+
+.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: #E8E4DD !important;
 	color: #252E36;
@@ -2641,13 +2667,13 @@ table th,
  * Comment Lists
  */
 .comment-list {
-	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+	border-bottom: 1px solid #B9B6B2;
 	margin-left: 0;
 	list-style: none;
 }
 
 .comment-list > li {
-	border-top: 1px solid rgba(0, 0, 0, 0.25);
+	border-top: 1px solid #B9B6B2;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -2658,7 +2684,7 @@ table th,
 }
 
 .children > li {
-	border-top: 1px solid rgba(0, 0, 0, 0.25);
+	border-top: 1px solid #B9B6B2;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -2862,6 +2888,17 @@ table th,
 	flex: 0 0 100%;
 }
 
+/* Utilities */
+img#wpstats {
+	position: absolute !important;
+	clip: rect(0, 0, 0, 0);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 0 !important;
+	width: 0 !important;
+	overflow: hidden;
+}
+
 /**
  * Site Pages
  * - Page specific styles
@@ -3448,7 +3485,7 @@ table td,
 table th,
 .wp-block-table td,
 .wp-block-table th {
-	border-color: rgba(0, 0, 0, 0.25);
+	border-color: #B9B6B2;
 }
 
 .a8c-posts-list {
@@ -3510,7 +3547,7 @@ table th,
 }
 
 .post-navigation {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-top: 1px solid #CFCDC7;
 	margin-top: -64px;
 	padding-top: 32px;
 }
@@ -3611,7 +3648,7 @@ table th,
 
 .comments-area .comment-list > li .comment-body,
 .comments-area .children > li .comment-body {
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid #CFCDC7;
 	padding: 0 32px;
 }
 
@@ -3681,7 +3718,7 @@ table th,
 }
 
 .widget-area {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-top: 1px solid #CFCDC7;
 	padding-top: 32px;
 	width: 100%;
 }
@@ -3739,7 +3776,7 @@ table th,
 .widget_jp_blogs_i_follow ul,
 .widget_top-click ul,
 .widget_upcoming_events_widget ul {
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	border-bottom: 1px solid #CFCDC7;
 	list-style: none;
 	margin-left: 0;
 }
@@ -3759,7 +3796,7 @@ table th,
 .widget_jp_blogs_i_follow li,
 .widget_top-click li,
 .widget_upcoming_events_widget li {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-top: 1px solid #CFCDC7;
 	padding: 8px 0;
 }
 

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;

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;
@@ -2857,6 +2883,17 @@ table th,
 	flex: 0 0 100%;
 }
 
+/* Utilities */
+img#wpstats {
+	position: absolute !important;
+	clip: rect(0, 0, 0, 0);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 0 !important;
+	width: 0 !important;
+	overflow: hidden;
+}
+
 /**
  * Site Pages
  * - Page specific styles

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;
@@ -2862,6 +2888,17 @@ table th,
 	flex: 0 0 100%;
 }
 
+/* Utilities */
+img#wpstats {
+	position: absolute !important;
+	clip: rect(0, 0, 0, 0);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 0 !important;
+	width: 0 !important;
+	overflow: hidden;
+}
+
 /**
  * Site Pages
  * - Page specific styles

redhill/functions.php

@@ -90,6 +90,16 @@
 					'slug'  => 'foreground-light',
 					'color' => '#666666',
 				),
+				array(
+					'name'  => __( 'Lighter Gray', 'varia' ),
+					'slug'  => 'background-dark',
+					'color' => '#DDDDDD',
+				),
+				array(
+					'name'  => __( 'Subtle Gray', 'varia' ),
+					'slug'  => 'background-light',
+					'color' => '#FAFAFA',
+				),
 				array(
 					'name'  => __( 'White', 'redhill' ),
 					'slug'  => 'background',

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

@@ -73,7 +73,11 @@ $config-global: (
 			"light": #666666, // must be accesible!
 			"dark": #111111, // must be accesible!
 		),
-		"background": white,
+		"background": (
+			"default": white,
+			"light": #FAFAFA, // must be accessible against foreground-default
+			"dark": #DDDDDD, // must be accessible against foreground-default
+		),
 		"border": (
 			"default": #DDDDDD,
 			"light": #FAFAFA,
@@ -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"),
 	),

redhill/sass/_extra-child-theme.scss

@@ -134,7 +134,7 @@ a {
 			& > a {
 				background: #{map-deep-get($config-global, "color", "primary", "default")};
 				border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
-				color: #{map-deep-get($config-global, "color", "background")};
+				color: #{map-deep-get($config-global, "color", "background", "default")};
 			}
 
 			& > ul {
@@ -146,7 +146,7 @@ a {
 
 				& > a {
 					background: #{map-deep-get($config-global, "color", "foreground", "default")};
-					color: #{map-deep-get($config-global, "color", "background")};
+					color: #{map-deep-get($config-global, "color", "background", "default")};
 					font-weight: normal;
 				}
 

redhill/style-editor.css

@@ -630,6 +630,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -679,6 +687,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FAFAFA !important;
+	color: #222222;
+}
+
+.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: #222222;
+}
+
+.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: #222222;

redhill/style-rtl.css

@@ -1215,6 +1215,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
+	width: calc(100% - 32px);
 	color: white;
 	margin-top: 32px;
 	margin-bottom: 32px;
@@ -1312,6 +1313,10 @@ input.has-focus[type="submit"],
 	width: calc( (100% - 16px) / 2);
 }
 
+.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
+	max-width: 50%;
+}
+
 .wp-block-group .wp-block-group__inner-container {
 	margin-right: auto;
 	margin-left: auto;
@@ -1732,17 +1737,12 @@ p.has-background:not(.has-background-background-color) a {
 	color: white;
 }
 
-.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
-.wp-block-pullquote.is-style-solid-color.alignright blockquote {
+.wp-block-pullquote.is-style-solid-color blockquote {
 	padding-right: 16px;
 	padding-left: 16px;
 	max-width: inherit;
 }
 
-.wp-block-pullquote.is-style-solid-color blockquote {
-	padding-right: 0;
-}
-
 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
 .wp-block-pullquote.is-style-solid-color cite,
 .wp-block-pullquote.is-style-solid-color footer {
@@ -1851,8 +1851,14 @@ hr.is-style-dots:before {
 
 .wp-block-spacer {
 	display: block;
-	margin-bottom: 0;
-	margin-top: 0;
+	margin-bottom: 0 !important;
+	margin-top: 0 !important;
+}
+
+@media only screen and (max-width: 559px) {
+	.wp-block-spacer[style] {
+		height: 16px !important;
+	}
 }
 
 table,
@@ -1952,6 +1958,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -2001,6 +2015,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FAFAFA !important;
+	color: #222222;
+}
+
+.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: #222222;
+}
+
+.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: #222222;
@@ -2851,6 +2883,17 @@ table th,
 	flex: 0 0 100%;
 }
 
+/* Utilities */
+img#wpstats {
+	position: absolute !important;
+	clip: rect(0, 0, 0, 0);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 0 !important;
+	width: 0 !important;
+	overflow: hidden;
+}
+
 /**
  * Site Pages
  * - Page specific styles
@@ -2881,36 +2924,36 @@ table th,
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+.responsive-max-width {
 	max-width: 100%;
 }
 
 @media only screen and (min-width: 560px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 640px - 32px);
 	}
 }
 
 @media only screen and (min-width: 772px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 772px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 772px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 772px - 32px);
 	}
 }
@@ -3031,73 +3074,127 @@ table th,
 	}
 }
 
-.wp-block-cover__inner-container,
-.wp-block-cover-image-text,
-.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+.wp-block-cover.alignwide .wp-block-cover__inner-container,
+.wp-block-cover.alignwide .wp-block-cover-image-text,
+.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+.wp-block-cover.alignfull .wp-block-cover-image-text,
+.wp-block-cover.alignfull .wp-block-cover-text,
+.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+.wp-block-cover-image.alignwide .wp-block-cover-text,
+.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 .wp-block-pullquote.alignfull > p,
 .wp-block-pullquote.alignwide blockquote,
 .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-	max-width: calc( 100% - (2 * ( 100% / 12 )));
-	width: calc( 100% - (2 * ( 100% / 12 )));
+	max-width: calc( calc( 100% - 32px));
+	width: calc( calc( 100% - 32px));
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 )));
-		width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 )));
+		max-width: calc( calc( 560px - 32px));
+		width: calc( calc( 560px - 32px));
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 )));
-		width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 )));
+		max-width: calc( calc( 640px - 32px));
+		width: calc( calc( 640px - 32px));
 	}
 }
 
 @media only screen and (min-width: 772px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
-		width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
+		max-width: calc( calc( 772px - 32px));
+		width: calc( calc( 772px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
-		width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
+		max-width: calc( calc( 772px - 32px));
+		width: calc( calc( 772px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
-		width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
+		max-width: calc( calc( 772px - 32px));
+		width: calc( calc( 772px - 32px));
 	}
 }
 

redhill/style.css

@@ -1215,6 +1215,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
+	width: calc(100% - 32px);
 	color: white;
 	margin-top: 32px;
 	margin-bottom: 32px;
@@ -1312,6 +1313,10 @@ input.has-focus[type="submit"],
 	width: calc( (100% - 16px) / 2);
 }
 
+.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
+	max-width: 50%;
+}
+
 .wp-block-group .wp-block-group__inner-container {
 	margin-left: auto;
 	margin-right: auto;
@@ -1732,17 +1737,12 @@ p.has-background:not(.has-background-background-color) a {
 	color: white;
 }
 
-.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
-.wp-block-pullquote.is-style-solid-color.alignright blockquote {
+.wp-block-pullquote.is-style-solid-color blockquote {
 	padding-left: 16px;
 	padding-right: 16px;
 	max-width: inherit;
 }
 
-.wp-block-pullquote.is-style-solid-color blockquote {
-	padding-left: 0;
-}
-
 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
 .wp-block-pullquote.is-style-solid-color cite,
 .wp-block-pullquote.is-style-solid-color footer {
@@ -1851,8 +1851,14 @@ hr.is-style-dots:before {
 
 .wp-block-spacer {
 	display: block;
-	margin-bottom: 0;
-	margin-top: 0;
+	margin-bottom: 0 !important;
+	margin-top: 0 !important;
+}
+
+@media only screen and (max-width: 559px) {
+	.wp-block-spacer[style] {
+		height: 16px !important;
+	}
 }
 
 table,
@@ -1957,6 +1963,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -2006,6 +2020,24 @@ table th,
 	color: currentColor;
 }
 
+.has-background-light-background-color[class] {
+	background-color: #FAFAFA !important;
+	color: #222222;
+}
+
+.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: #222222;
+}
+
+.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: #222222;
@@ -2856,6 +2888,17 @@ table th,
 	flex: 0 0 100%;
 }
 
+/* Utilities */
+img#wpstats {
+	position: absolute !important;
+	clip: rect(0, 0, 0, 0);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 0 !important;
+	width: 0 !important;
+	overflow: hidden;
+}
+
 /**
  * Site Pages
  * - Page specific styles
@@ -2886,36 +2929,36 @@ table th,
  * Page Layout Styles & Repsonsive Styles
  */
 /* Responsive width-content overrides */
-.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+.responsive-max-width {
 	max-width: 100%;
 }
 
 @media only screen and (min-width: 560px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 560px - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 640px - 32px);
 	}
 }
 
 @media only screen and (min-width: 772px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 772px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 772px - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.responsive-max-width, .wp-block-group .wp-block-group__inner-container {
+	.responsive-max-width {
 		max-width: calc( 772px - 32px);
 	}
 }
@@ -3036,73 +3079,127 @@ table th,
 	}
 }
 
-.wp-block-cover__inner-container,
-.wp-block-cover-image-text,
-.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+.wp-block-cover.alignwide .wp-block-cover__inner-container,
+.wp-block-cover.alignwide .wp-block-cover-image-text,
+.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+.wp-block-cover.alignfull .wp-block-cover-image-text,
+.wp-block-cover.alignfull .wp-block-cover-text,
+.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+.wp-block-cover-image.alignwide .wp-block-cover-text,
+.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 .wp-block-pullquote.alignfull > p,
 .wp-block-pullquote.alignwide blockquote,
 .wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-	max-width: calc( 100% - (2 * ( 100% / 12 )));
-	width: calc( 100% - (2 * ( 100% / 12 )));
+	max-width: calc( calc( 100% - 32px));
+	width: calc( calc( 100% - 32px));
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 )));
-		width: calc( calc( 560px - 32px) - (2 * ( calc( 560px - 32px) / 12 )));
+		max-width: calc( calc( 560px - 32px));
+		width: calc( calc( 560px - 32px));
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 )));
-		width: calc( calc( 640px - 32px) - (2 * ( calc( 640px - 32px) / 12 )));
+		max-width: calc( calc( 640px - 32px));
+		width: calc( calc( 640px - 32px));
 	}
 }
 
 @media only screen and (min-width: 772px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
-		width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
+		max-width: calc( calc( 772px - 32px));
+		width: calc( calc( 772px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
-		width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
+		max-width: calc( calc( 772px - 32px));
+		width: calc( calc( 772px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-cover__inner-container,
-	.wp-block-cover-image-text,
-	.wp-block-cover-text, .wp-block-gallery.alignleft, .wp-block-gallery.alignright, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
+	.wp-block-cover.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover.alignwide .wp-block-cover-image-text,
+	.wp-block-cover.alignwide .wp-block-cover-text, .wp-block-cover.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover.alignfull .wp-block-cover-image-text,
+	.wp-block-cover.alignfull .wp-block-cover-text,
+	.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignwide .wp-block-cover-image-text,
+	.wp-block-cover-image.alignwide .wp-block-cover-text,
+	.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
+	.wp-block-cover-image.alignfull .wp-block-cover-image-text,
+	.wp-block-cover-image.alignfull .wp-block-cover-text, .wp-block-group.alignwide .wp-block-group__inner-container,
+	.wp-block-group.alignfull .wp-block-group__inner-container, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p,
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content .wp-audio-shortcode {
-		max-width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
-		width: calc( calc( 772px - 32px) - (2 * ( calc( 772px - 32px) / 12 )));
+		max-width: calc( calc( 772px - 32px));
+		width: calc( calc( 772px - 32px));
 	}
 }
 

varia/functions.php

@@ -174,6 +174,16 @@ 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',
+					'color' => '#FAFAFA',
+				),
 				array(
 					'name'  => __( 'White', 'varia' ),
 					'slug'  => 'background',

varia/sass/abstracts/_config-global.scss

@@ -61,10 +61,14 @@ $config-global: (
 		),
 		"foreground": (
 			"default": #444444,
-			"light": #767676, // must be accesible!
-			"dark": #111111, // must be accesible!
+			"light": #767676, // must be accessible against background
+			"dark": #111111, // must be accessible against background
+		),
+		"background": (
+			"default": white,
+			"light": #FAFAFA, // must be accessible against foreground-default
+			"dark": #DDDDDD, // must be accessible against foreground-default
 		),
-		"background": white,
 		"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,16 @@
 	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-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")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 }
 
 // Gutenberg background-color options
@@ -44,7 +52,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 +60,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 +68,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 +76,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 +84,30 @@
 
 .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-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")} !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 +145,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

@@ -76,8 +76,16 @@
 	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-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")} !important;
+	color: #{map-deep-get($config-global, "color", "background", "default")} !important;
 }
 
 // Gutenberg background-color options
@@ -85,7 +93,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;
 	}
@@ -93,7 +101,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;
 	}
@@ -101,7 +109,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;
 	}
@@ -109,7 +117,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;
 	}
@@ -117,14 +125,30 @@
 
 .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-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")} !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;
@@ -182,4 +206,4 @@
 	@include media(mobile) {
 		display: block;
 	}
-}
+}

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

@@ -70,10 +70,14 @@ $config-global: (
 		),
 		"foreground": (
 			"default": #444444,
-			"light": #767676, // must be accesible!
-			"dark": #111111, // must be accesible!
+			"light": #767676, // must be accessible against background
+			"dark": #111111, // must be accessible against background
+		),
+		"background": (
+			"default": white,
+			"light": #FAFAFA, // must be accessible against foreground-default
+			"dark": #DDDDDD, // must be accessible against foreground-default
 		),
-		"background": white,
 		"border": (
 			"default": #DDDDDD,
 			"light": #FAFAFA,

varia/sass/child-theme/style-child-theme-editor.scss

@@ -12,7 +12,6 @@
  * Child Theme Name
  */
 @import "config-child-theme-deep";
-//@import "config-child-theme";
 
 /**
  * Base
@@ -38,4 +37,4 @@
  */
 .editor-post-title__input {
 	text-align: center;
-}
+}

varia/sass/child-theme/style-child-theme.scss

@@ -1,8 +1,8 @@
 /*
 Theme Name: Varia CHILD THEME TEST
 Theme URI: https://github.com/Automattic/themes/varia
-Author: the WordPress team
-Author URI: https://wordpress.org/
+Author: Automattic
+Author URI: https://automattic.com/
 Description: A design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
 Version: 1.0
@@ -15,7 +15,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Varia is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
+Varia is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of

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,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -625,6 +633,24 @@ 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-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

@@ -1917,6 +1917,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -1966,6 +1974,24 @@ 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-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

@@ -1922,6 +1922,14 @@ table th,
 	color: #111111 !important;
 }
 
+.has-background-light-color[class] {
+	color: #FAFAFA !important;
+}
+
+.has-background-dark-color[class] {
+	color: #DDDDDD !important;
+}
+
 .has-background-color[class] {
 	color: white !important;
 }
@@ -1971,6 +1979,24 @@ 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-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;