Brompton: Add new background colours

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;
 }
@@ -3443,7 +3469,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 +3531,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 +3632,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 +3702,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 +3760,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 +3780,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;
 }
@@ -3448,7 +3474,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 +3536,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 +3637,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 +3707,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 +3765,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 +3785,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;
 }