Varia: Introduce a Lighter Foreground (#FAFAFA)

This allows users to create blocks with a very subtle background colour for example.

varia/functions.php

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

varia/sass/abstracts/_config-global.scss

@@ -63,6 +63,7 @@ $config-global: (
 			"default": #444444,
 			"light": #767676, // must be accesible!
 			"dark": #111111, // must be accesible!
+			"lighter": #FAFAFA,
 		),
 		"background": white,
 		"border": (

varia/sass/blocks/utilities/_style.scss

@@ -68,6 +68,10 @@
 	color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
 }
 
+.has-foreground-lighter-color[class] {
+	color: #{map-deep-get($config-global, "color", "foreground", "lighter")} !important;
+}
+
 .has-foreground-light-color[class] {
 	color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
 }
@@ -107,6 +111,14 @@
 	}
 }
 
+.has-foreground-lighter-background-color[class] {
+	background-color: #{map-deep-get($config-global, "color", "foreground", "lighter")} !important;
+	color: #{map-deep-get($config-global, "color", "foreground", "default")};
+	p, h1, h2, h3, h4, h5, h6 {
+		color: currentColor;
+	}
+}
+
 .has-foreground-light-background-color[class] {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
 	color: #{map-deep-get($config-global, "color", "background")};
@@ -182,4 +194,4 @@
 	@include media(mobile) {
 		display: block;
 	}
-}
+}

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

@@ -72,6 +72,7 @@ $config-global: (
 			"default": #444444,
 			"light": #767676, // must be accesible!
 			"dark": #111111, // must be accesible!
+			"lighter": #FAFAFA,
 		),
 		"background": white,
 		"border": (

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/style-rtl.css

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

varia/style.css

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