Blockbase + Quadrat: remap quadrat colors, refactor selection to tertiary (#4570)

* remap quadrat colors, refactor selection to tertiary

* Refactored color customizations to exclusively use THEME provided values as the basis for colors to configure rather than optionally using USER provided values.

* Changed blockbase's tertiary color to match blank-canvas
* Changed seedlet-blocks tertiary color to match seedlet's

* Eliminated any text selection styling for Blockbase and children (with the exception of Skatepark)

Co-authored-by: Jason Crist <jcrist@pbking.com>

blockbase/assets/ponyfill.css

@@ -106,6 +106,46 @@ img {
 	margin-right: auto !important;
 }
 
+.has-primary-background-color {
+	background-color: var(--wp--custom--color--primary) !important;
+}
+
+.has-secondary-background-color {
+	background-color: var(--wp--custom--color--secondary) !important;
+}
+
+.has-foreground-background-color {
+	background-color: var(--wp--custom--color--foreground) !important;
+}
+
+.has-background-background-color {
+	background-color: var(--wp--custom--color--background) !important;
+}
+
+.has-tertiary-background-color {
+	background-color: var(--wp--custom--color--tertiary) !important;
+}
+
+.has-primary-color {
+	color: var(--wp--custom--color--primary) !important;
+}
+
+.has-secondary-color {
+	color: var(--wp--custom--color--secondary) !important;
+}
+
+.has-foreground-color {
+	color: var(--wp--custom--color--foreground) !important;
+}
+
+.has-background-color {
+	color: var(--wp--custom--color--background) !important;
+}
+
+.has-tertiary-color {
+	color: var(--wp--custom--color--tertiary) !important;
+}
+
 .site-header {
 	justify-content: space-between;
 	overflow: inherit;
@@ -143,14 +183,6 @@ body.admin-bar .wp-site-blocks {
 	min-height: calc( 100vh - var(--wpadmin-bar--height));
 }
 
-::selection {
-	background-color: var(--wp--custom--color--selection);
-}
-
-::-moz-selection {
-	background-color: var(--wp--custom--color--selection);
-}
-
 p {
 	margin-top: var(--wp--custom--gap--vertical);
 	margin-bottom: var(--wp--custom--gap--vertical);

blockbase/inc/customizer/wp-customize-colors.php

@@ -55,23 +55,30 @@ class GlobalStylesColorCustomizer {
 		// Get the merged theme.json.
 		$theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
 
-		$theme_color_palette = $theme_json['settings']['color']['palette']['theme'];
-		$user_color_palette  = $theme_json['settings']['color']['palette']['theme'];
-
-		// Create a user color palette from user settings, if there are any.
+		$combined_color_palette = $theme_json['settings']['color']['palette']['theme'];
+		$user_color_palette     = null;
 		if ( isset( $theme_json['settings']['color']['palette']['user'] ) ) {
 			$user_color_palette = $theme_json['settings']['color']['palette']['user'];
 		}
 
 		// Combine theme settings with user settings.
-		foreach ( $user_color_palette as $key => $palette_item ) {
-			$user_color_palette[ $key ]['default'] = $this->get_theme_default_color_value( $palette_item['slug'], $theme_color_palette );
+		foreach ( $combined_color_palette as $key => $palette_item ) {
+			//make theme color value the default
+			$combined_color_palette[ $key ]['default'] = $combined_color_palette[ $key ]['color'];
+			//use user color value if there is one
+			$user_color_value = $this->get_user_color_value( $palette_item['slug'], $user_color_palette );
+			if ( isset( $user_color_value ) ) {
+				$combined_color_palette[ $key ]['color'] = $user_color_value;
+			}
 		}
 
-		return $user_color_palette;
+		return $combined_color_palette;
 	}
 
-	function get_theme_default_color_value( $slug, $palette ) {
+	function get_user_color_value( $slug, $palette ) {
+		if ( ! isset( $palette ) ) {
+			return null;
+		}
 		foreach ( $palette as $palette_item ) {
 			if ( $palette_item['slug'] === $slug ) {
 				return $palette_item['color'];
@@ -137,16 +144,16 @@ class GlobalStylesColorCustomizer {
 		$user_theme_json_post_content->version                     = 1;
 		$user_theme_json_post_content->isGlobalStylesUserThemeJSON = true;
 
-		// Set palette settings.
-		$user_theme_json_post_content = set_settings_array(
-			$user_theme_json_post_content,
-			array( 'settings', 'color', 'palette' ),
-			$this->user_color_palette
-		);
+		// Start with reset palette settings.
+		unset( $user_theme_json_post_content->settings->color->palette );
 
-		//If the color palette is === the default then we remove it instead
-		if ( $this->check_if_colors_are_default() ) {
-			unset( $user_theme_json_post_content->settings->color->palette );
+		//Set the color palette if it is !== the default
+		if ( ! $this->check_if_colors_are_default() ) {
+			$user_theme_json_post_content = set_settings_array(
+				$user_theme_json_post_content,
+				array( 'settings', 'color', 'palette' ),
+				$this->user_color_palette
+			);
 		}
 
 		// Update the theme.json with the new settings.

blockbase/sass/base/_colors.scss

@@ -0,0 +1,38 @@
+// This CSS is usually generated by Global Styles.
+// However when a colors is not defined, the CSS for that color isn't output.
+// This means that when users switch between themes colors set in one theme won't be carried over to another.
+// By including all this CSS in every theme we ensure that these colors work across themes.
+// The difference between this and the Global Styles CSS is that we reference the custom variables not the preset ones.
+// This means that undefined colors are mapped to defined ones.
+
+.has-primary-background-color {
+	background-color: var(--wp--custom--color--primary) !important
+}
+.has-secondary-background-color {
+	background-color: var(--wp--custom--color--secondary) !important
+}
+.has-foreground-background-color {
+	background-color: var(--wp--custom--color--foreground) !important
+}
+.has-background-background-color {
+	background-color: var(--wp--custom--color--background) !important
+}
+.has-tertiary-background-color {
+	background-color: var(--wp--custom--color--tertiary) !important
+}
+
+.has-primary-color {
+	color: var(--wp--custom--color--primary) !important;
+}
+.has-secondary-color {
+	color: var(--wp--custom--color--secondary) !important;
+}
+.has-foreground-color {
+	color: var(--wp--custom--color--foreground) !important;
+}
+.has-background-color {
+	color: var(--wp--custom--color--background) !important;
+}
+.has-tertiary-color {
+	color: var(--wp--custom--color--tertiary) !important;
+}

blockbase/sass/base/_style.scss

@@ -8,6 +8,7 @@
 @import "breakpoints";
 
 @import "alignment";
+@import "colors";
 @import "header";
 @import "layout";
 @import "text";

blockbase/sass/base/_text.scss

@@ -1,12 +1,3 @@
-// Text selection background color
-
-::selection {
-	background-color: var(--wp--custom--color--selection);
-}
-::-moz-selection {
-	background-color: var(--wp--custom--color--selection);
-}
-
 p {
 	margin-top: var(--wp--custom--gap--vertical);
 	margin-bottom: var(--wp--custom--gap--vertical);

blockbase/theme.json

@@ -59,9 +59,9 @@
 					"name": "Background"
 				},
 				{
-					"slug": "selection",
-					"color": "#c2c2c2",
-					"name": "Selection"
+					"slug": "tertiary",
+					"color": "#FAFAFA",
+					"name": "Tertiary"
 				}
 			]
 		},
@@ -108,7 +108,7 @@
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
 				"secondary": "var(--wp--preset--color--secondary)",
-				"selection": "var(--wp--preset--color--selection)"
+				"tertiary": "var(--wp--preset--color--tertiary)"
 			},
 			"colorPalettes": [
 				{
@@ -119,7 +119,7 @@
 						"secondary": "#4E2F4B",
 						"foreground": "#1D1E1E",
 						"background": "#FFFFFF",
-						"selection": "#F9F9F9"
+						"tertiary": "#F9F9F9"
 					}
 				},
 				{
@@ -130,7 +130,7 @@
 						"secondary": "#233252",
 						"foreground": "#242527",
 						"background": "#EEF4F7",
-						"selection": "#F9F9F9"
+						"tertiary": "#F9F9F9"
 					}
 				},
 				{
@@ -141,7 +141,7 @@
 						"secondary": "#FBE6AA",
 						"foreground": "#FFFFFF",
 						"background": "#1F2527",
-						"selection": "#364043"
+						"tertiary": "#364043"
 					}
 				}
 			],

geologist/assets/theme.css

@@ -85,13 +85,13 @@
 }
 
 .wp-block-calendar table th {
-	background-color: var(--wp--custom--color--secondary);
-	border-color: var(--wp--custom--color--secondary);
+	background-color: var(--wp--custom--color--tertiary);
+	border-color: var(--wp--custom--color--tertiary);
 }
 
 .wp-block-calendar table td {
 	color: var(--wp--custom--color--primary);
-	border-color: var(--wp--custom--color--secondary);
+	border-color: var(--wp--custom--color--tertiary);
 }
 
 ul ul {
@@ -121,7 +121,7 @@ ul ul {
 .wp-block-navigation:not(.has-background) .wp-block-navigation__container .submenu-container,
 .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
 	background-color: var(--wp--custom--color--background);
-	border-color: var(--wp--custom--color--secondary);
+	border-color: var(--wp--custom--color--tertiary);
 }
 
 .wp-block-navigation .wp-block-navigation__mobile-menu-open-button {
@@ -129,7 +129,7 @@ ul ul {
 }
 
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
-	background-color: var(--wp--custom--color--secondary);
+	background-color: var(--wp--custom--color--tertiary);
 }
 
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item,
@@ -292,7 +292,7 @@ ul ul {
 }
 
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
-	background-color: var(--wp--preset--color--secondary);
+	background-color: var(--wp--preset--color--tertiary);
 }
 
 .wp-block-pullquote.is-style-solid-color {

geologist/child-theme.json

@@ -19,9 +19,9 @@
 					"name": "Primary"
 				},
 				{
-					"slug": "secondary",
+					"slug": "tertiary",
 					"color": "#FFFFFF",
-					"name": "Secondary"
+					"name": "Tertiary"
 				},
 				{
 					"slug": "background",
@@ -29,9 +29,9 @@
 					"name": "Background"
 				},
 				{
-					"slug": "selection",
+					"slug": "tertiary",
 					"color": "#535059",
-					"name": "Selection"
+					"name": "tertiary"
 				}
 			]
 		},
@@ -64,8 +64,8 @@
 				"foreground": "var(--wp--preset--color--primary)",
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
-				"secondary": "var(--wp--preset--color--secondary)",
-				"selection": "var(--wp--preset--color--selection)"
+				"secondary": "var(--wp--preset--color--primary)",
+				"tertiary": "var(--wp--preset--color--tertiary)"
 			},
 			"colorPalettes": [
 				{
@@ -73,7 +73,7 @@
 					"slug": "blue",
 					"colors": {
 						"primary": "#FDF5E2",
-						"secondary": "#123B62",
+						"tertiary": "#123B62",
 						"background": "#204A72"
 					}
 				},
@@ -82,7 +82,7 @@
 					"slug": "dark-blue",
 					"colors": {
 						"primary": "#F9DAAD",
-						"secondary": "#071F2C",
+						"tertiary": "#071F2C",
 						"background": "#0E2B3B"
 					}
 				},
@@ -91,7 +91,7 @@
 					"slug": "green",
 					"colors": {
 						"primary": "#F5D5CA",
-						"secondary": "#0A2C25",
+						"tertiary": "#0A2C25",
 						"background": "#103931"
 					}
 				},
@@ -100,7 +100,7 @@
 					"slug": "red",
 					"colors": {
 						"primary": "#CEEDFF",
-						"secondary": "#721A18",
+						"tertiary": "#721A18",
 						"background": "#822726"
 					}
 				},
@@ -109,7 +109,7 @@
 					"slug": "light-green",
 					"colors": {
 						"primary": "#0C1946",
-						"secondary": "#DBE9DD",
+						"tertiary": "#DBE9DD",
 						"background": "#EBF3EC"
 					}
 				},
@@ -118,7 +118,7 @@
 					"slug": "white",
 					"colors": {
 						"primary": "#2B2B2B",
-						"secondary": "#F8F8F8",
+						"tertiary": "#F8F8F8",
 						"background": "#FFFFFF"
 					}
 				},
@@ -127,7 +127,7 @@
 					"slug": "light-pink",
 					"colors": {
 						"primary": "#151853",
-						"secondary": "#FCD0D0",
+						"tertiary": "#FCD0D0",
 						"background": "#FFE2E2"
 					}
 				},
@@ -136,7 +136,7 @@
 					"slug": "light-yellow",
 					"colors": {
 						"primary": "#0E2B3B",
-						"secondary": "#FBEAD2",
+						"tertiary": "#FBEAD2",
 						"background": "#FFF4E3"
 					}
 				},
@@ -145,7 +145,7 @@
 					"slug": "light-blue",
 					"colors": {
 						"primary": "#460707",
-						"secondary": "#DEE9F1",
+						"tertiary": "#DEE9F1",
 						"background": "#EDF4F9"
 					}
 				}
@@ -272,7 +272,7 @@
 					"width": "0px"
 				},
 				"color": {
-					"background": "var(--wp--custom--color--secondary)"
+					"background": "var(--wp--custom--color--tertiary)"
 				},
 				"typography": {
 					"fontSize": "20px",

geologist/sass/blocks/_calendar.scss

@@ -4,12 +4,12 @@
 			color: var(--wp--custom--color--primary);
 		}
 		th {
-			background-color: var(--wp--custom--color--secondary);
-			border-color: var(--wp--custom--color--secondary);
+			background-color: var(--wp--custom--color--tertiary);
+			border-color: var(--wp--custom--color--tertiary);
 		}
 		td {
 			color: var(--wp--custom--color--primary);
-			border-color: var(--wp--custom--color--secondary);
+			border-color: var(--wp--custom--color--tertiary);
 		}
 	}
 }

geologist/sass/blocks/_navigation.scss

@@ -14,7 +14,7 @@
 			.submenu-container,
 			.wp-block-navigation-link__container {
 				background-color: var(--wp--custom--color--background);
-				border-color: var(--wp--custom--color--secondary);
+				border-color: var(--wp--custom--color--tertiary);
 			}
 		}
 	}
@@ -24,7 +24,7 @@
 	}
 
 	&.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
-		background-color: var(--wp--custom--color--secondary);
+		background-color: var(--wp--custom--color--tertiary);
 		&.has-modal-open {
 			.wp-block-pages-list__item,
 			.wp-block-navigation-link {

geologist/sass/blocks/_table.scss

@@ -29,7 +29,7 @@
 .wp-block-table.is-style-stripes {
 	tbody {
 		tr:nth-child(odd) {
-			background-color: var(--wp--preset--color--secondary);
+			background-color: var(--wp--preset--color--tertiary);
 		}
 	}
 }

geologist/theme.json

@@ -52,9 +52,9 @@
 					"name": "Primary"
 				},
 				{
-					"slug": "secondary",
+					"slug": "tertiary",
 					"color": "#FFFFFF",
-					"name": "Secondary"
+					"name": "Tertiary"
 				},
 				{
 					"slug": "background",
@@ -62,9 +62,9 @@
 					"name": "Background"
 				},
 				{
-					"slug": "selection",
+					"slug": "tertiary",
 					"color": "#535059",
-					"name": "Selection"
+					"name": "tertiary"
 				}
 			]
 		},
@@ -110,8 +110,8 @@
 				"foreground": "var(--wp--preset--color--primary)",
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
-				"secondary": "var(--wp--preset--color--secondary)",
-				"selection": "var(--wp--preset--color--selection)"
+				"secondary": "var(--wp--preset--color--primary)",
+				"tertiary": "var(--wp--preset--color--tertiary)"
 			},
 			"colorPalettes": [
 				{
@@ -119,7 +119,7 @@
 					"slug": "blue",
 					"colors": {
 						"primary": "#FDF5E2",
-						"secondary": "#123B62",
+						"tertiary": "#123B62",
 						"background": "#204A72"
 					}
 				},
@@ -128,7 +128,7 @@
 					"slug": "dark-blue",
 					"colors": {
 						"primary": "#F9DAAD",
-						"secondary": "#071F2C",
+						"tertiary": "#071F2C",
 						"background": "#0E2B3B"
 					}
 				},
@@ -137,7 +137,7 @@
 					"slug": "green",
 					"colors": {
 						"primary": "#F5D5CA",
-						"secondary": "#0A2C25",
+						"tertiary": "#0A2C25",
 						"background": "#103931"
 					}
 				},
@@ -146,7 +146,7 @@
 					"slug": "red",
 					"colors": {
 						"primary": "#CEEDFF",
-						"secondary": "#721A18",
+						"tertiary": "#721A18",
 						"background": "#822726"
 					}
 				},
@@ -155,7 +155,7 @@
 					"slug": "light-green",
 					"colors": {
 						"primary": "#0C1946",
-						"secondary": "#DBE9DD",
+						"tertiary": "#DBE9DD",
 						"background": "#EBF3EC"
 					}
 				},
@@ -164,7 +164,7 @@
 					"slug": "white",
 					"colors": {
 						"primary": "#2B2B2B",
-						"secondary": "#F8F8F8",
+						"tertiary": "#F8F8F8",
 						"background": "#FFFFFF"
 					}
 				},
@@ -173,7 +173,7 @@
 					"slug": "light-pink",
 					"colors": {
 						"primary": "#151853",
-						"secondary": "#FCD0D0",
+						"tertiary": "#FCD0D0",
 						"background": "#FFE2E2"
 					}
 				},
@@ -182,7 +182,7 @@
 					"slug": "light-yellow",
 					"colors": {
 						"primary": "#0E2B3B",
-						"secondary": "#FBEAD2",
+						"tertiary": "#FBEAD2",
 						"background": "#FFF4E3"
 					}
 				},
@@ -191,7 +191,7 @@
 					"slug": "light-blue",
 					"colors": {
 						"primary": "#460707",
-						"secondary": "#DEE9F1",
+						"tertiary": "#DEE9F1",
 						"background": "#EDF4F9"
 					}
 				}
@@ -460,7 +460,7 @@
 					"lineHeight": "1.6"
 				},
 				"color": {
-					"background": "var(--wp--custom--color--secondary)"
+					"background": "var(--wp--custom--color--tertiary)"
 				}
 			},
 			"core/navigation": {

mayland-blocks/child-theme.json

@@ -42,9 +42,9 @@
 					"name": "Secondary"
 				},
 				{
-					"slug": "selection",
+					"slug": "tertiary",
 					"color": "#add8e6",
-					"name": "Selection"
+					"name": "tertiary"
 				}
 			]
 		},
@@ -76,7 +76,7 @@
 				"secondary": "var(--wp--preset--color--secondary)",
 				"foreground": "var(--wp--preset--color--foreground)",
 				"background": "var(--wp--preset--color--background)",
-				"selection": "var(--wp--preset--color--selection)"
+				"tertiary": "var(--wp--preset--color--tertiary)"
 			},
 			"gap": {
 				"horizontal": "min(32px, 5vw)"

mayland-blocks/theme.json

@@ -67,9 +67,9 @@
 					"name": "Secondary"
 				},
 				{
-					"slug": "selection",
+					"slug": "tertiary",
 					"color": "#add8e6",
-					"name": "Selection"
+					"name": "tertiary"
 				}
 			]
 		},
@@ -116,7 +116,7 @@
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
 				"secondary": "var(--wp--preset--color--secondary)",
-				"selection": "var(--wp--preset--color--selection)"
+				"tertiary": "var(--wp--preset--color--tertiary)"
 			},
 			"colorPalettes": [
 				{
@@ -127,7 +127,7 @@
 						"secondary": "#4E2F4B",
 						"foreground": "#1D1E1E",
 						"background": "#FFFFFF",
-						"selection": "#F9F9F9"
+						"tertiary": "#F9F9F9"
 					}
 				},
 				{
@@ -138,7 +138,7 @@
 						"secondary": "#233252",
 						"foreground": "#242527",
 						"background": "#EEF4F7",
-						"selection": "#F9F9F9"
+						"tertiary": "#F9F9F9"
 					}
 				},
 				{
@@ -149,7 +149,7 @@
 						"secondary": "#FBE6AA",
 						"foreground": "#FFFFFF",
 						"background": "#1F2527",
-						"selection": "#364043"
+						"tertiary": "#364043"
 					}
 				}
 			],

quadrat/assets/theme.css

@@ -141,7 +141,7 @@
 
 .is-style-quadrat-diamond-posts .wp-block-post-template li:before {
 	content: "";
-	background: var(--wp--preset--color--secondary);
+	background: var(--wp--preset--color--tertiary);
 	width: 375px;
 	height: 375px;
 	position: absolute;
@@ -221,13 +221,13 @@
 }
 
 .wp-block-calendar table th {
-	background-color: var(--wp--custom--color--secondary);
-	border-color: var(--wp--custom--color--secondary);
+	background-color: var(--wp--custom--color--tertiary);
+	border-color: var(--wp--custom--color--tertiary);
 }
 
 .wp-block-calendar table td {
 	color: var(--wp--custom--color--primary);
-	border-color: var(--wp--custom--color--secondary);
+	border-color: var(--wp--custom--color--tertiary);
 }
 
 ul ul {
@@ -257,7 +257,7 @@ ul ul {
 .wp-block-navigation:not(.has-background) .wp-block-navigation__container .submenu-container,
 .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
 	background-color: var(--wp--custom--color--background);
-	border-color: var(--wp--custom--color--secondary);
+	border-color: var(--wp--custom--color--tertiary);
 }
 
 .wp-block-navigation .wp-block-navigation__mobile-menu-open-button {
@@ -265,7 +265,7 @@ ul ul {
 }
 
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
-	background-color: var(--wp--custom--color--secondary);
+	background-color: var(--wp--custom--color--tertiary);
 }
 
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item,
@@ -313,7 +313,7 @@ ul ul {
 .wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
 .wp-block-post-comments form textarea {
 	border: none;
-	background: var(--wp--custom--color--secondary);
+	background: var(--wp--custom--color--tertiary);
 }
 
 .wp-block-post-comments .comment-body > p > a,
@@ -428,7 +428,7 @@ ul ul {
 }
 
 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
-	background-color: var(--wp--preset--color--secondary);
+	background-color: var(--wp--preset--color--tertiary);
 }
 
 .wp-block-pullquote.is-style-solid-color {
@@ -475,7 +475,7 @@ textarea:focus {
 
 .home .site-footer.wp-block-group:before {
 	content: "";
-	background-color: var(--wp--custom--color--secondary);
+	background-color: var(--wp--custom--color--tertiary);
 	-webkit-clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
 	        clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
 	position: absolute;
@@ -541,7 +541,7 @@ textarea:focus {
 
 .wp-site-blocks .site-header:before {
 	content: "";
-	background-color: var(--wp--custom--color--secondary);
+	background-color: var(--wp--custom--color--tertiary);
 	position: absolute;
 	bottom: 0;
 	top: 0;

quadrat/child-theme.json

@@ -19,9 +19,9 @@
 					"name": "Primary"
 				},
 				{
-					"slug": "secondary",
+					"slug": "tertiary",
 					"color": "#151853",
-					"name": "Secondary"
+					"name": "Tertiary"
 				},
 				{
 					"slug": "background",
@@ -60,8 +60,8 @@
 				"foreground": "var(--wp--preset--color--primary)",
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
-				"secondary": "var(--wp--preset--color--secondary)",
-				"selection": "var(--wp--preset--color--secondary)"
+				"secondary": "var(--wp--preset--color--primary)",
+				"tertiary": "var(--wp--preset--color--tertiary)"
 			},
 			"colorPalettes": [
 				{
@@ -69,7 +69,7 @@
 					"slug": "blue",
 					"colors": {
 						"primary": "#FDF5E2",
-						"secondary": "#123B62",
+						"tertiary": "#123B62",
 						"background": "#204A72"
 					}
 				},
@@ -78,7 +78,7 @@
 					"slug": "dark-blue",
 					"colors": {
 						"primary": "#F9DAAD",
-						"secondary": "#071F2C",
+						"tertiary": "#071F2C",
 						"background": "#0E2B3B"
 					}
 				},
@@ -87,7 +87,7 @@
 					"slug": "green",
 					"colors": {
 						"primary": "#F5D5CA",
-						"secondary": "#0A2C25",
+						"tertiary": "#0A2C25",
 						"background": "#103931"
 					}
 				},
@@ -96,7 +96,7 @@
 					"slug": "red",
 					"colors": {
 						"primary": "#CEEDFF",
-						"secondary": "#721A18",
+						"tertiary": "#721A18",
 						"background": "#822726"
 					}
 				},
@@ -105,7 +105,7 @@
 					"slug": "light-green",
 					"colors": {
 						"primary": "#0C1946",
-						"secondary": "#DBE9DD",
+						"tertiary": "#DBE9DD",
 						"background": "#EBF3EC"
 					}
 				},
@@ -114,7 +114,7 @@
 					"slug": "white",
 					"colors": {
 						"primary": "#2B2B2B",
-						"secondary": "#F8F8F8",
+						"tertiary": "#F8F8F8",
 						"background": "#FFFFFF"
 					}
 				},
@@ -123,7 +123,7 @@
 					"slug": "light-pink",
 					"colors": {
 						"primary": "#151853",
-						"secondary": "#FCD0D0",
+						"tertiary": "#FCD0D0",
 						"background": "#FFE2E2"
 					}
 				},
@@ -132,7 +132,7 @@
 					"slug": "light-yellow",
 					"colors": {
 						"primary": "#0E2B3B",
-						"secondary": "#FBEAD2",
+						"tertiary": "#FBEAD2",
 						"background": "#FFF4E3"
 					}
 				},
@@ -141,7 +141,7 @@
 					"slug": "light-blue",
 					"colors": {
 						"primary": "#460707",
-						"secondary": "#DEE9F1",
+						"tertiary": "#DEE9F1",
 						"background": "#EDF4F9"
 					}
 				}
@@ -268,7 +268,7 @@
 					"width": "0px"
 				},
 				"color": {
-					"background": "var(--wp--custom--color--secondary)"
+					"background": "var(--wp--custom--color--tertiary)"
 				},
 				"typography": {
 					"fontSize": "20px",

quadrat/inc/patterns/episode.php

@@ -8,8 +8,8 @@
 return array(
 	'title'      => __( 'Episode', 'quadrat' ),
 	'categories' => array( 'quadrat' ),
-	'content'    => '<!-- wp:media-text {"mediaLink":"' . get_stylesheet_directory_uri() . '/assets/illustrations/introspection-scaled.jpeg","mediaType":"image","mediaWidth":40,"mediaSizeSlug":"large","imageFill":false,"className":"has-primary-color has-secondary-background-color has-text-color has-background is-style-default"} -->
-	<div class="wp-block-media-text alignwide is-stacked-on-mobile has-primary-color has-secondary-background-color has-text-color has-background is-style-default" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="' . get_stylesheet_directory_uri() . '/assets/illustrations/introspection-scaled.jpeg" alt="' . esc_attr__( 'Illustration of an introspective woman.', 'quadrat') . '"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":3} -->
+	'content'    => '<!-- wp:media-text {"mediaLink":"' . get_stylesheet_directory_uri() . '/assets/illustrations/introspection-scaled.jpeg","mediaType":"image","mediaWidth":40,"mediaSizeSlug":"large","imageFill":false,"className":"has-primary-color has-tertiary-background-color has-text-color has-background is-style-default"} -->
+	<div class="wp-block-media-text alignwide is-stacked-on-mobile has-primary-color has-tertiary-background-color has-text-color has-background is-style-default" style="grid-template-columns:40% auto"><figure class="wp-block-media-text__media"><img src="' . get_stylesheet_directory_uri() . '/assets/illustrations/introspection-scaled.jpeg" alt="' . esc_attr__( 'Illustration of an introspective woman.', 'quadrat') . '"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":3} -->
 	<h3>' . esc_html__( 'Episode 3: A Cycle of Emotions', 'quadrat' ) . '</h3>
 	<!-- /wp:heading -->
 	

quadrat/inc/patterns/latest-episodes.php

@@ -15,8 +15,8 @@ return array(
 	<figure class="wp-block-image size-large image-no-margin mb-0"><img src="' . get_stylesheet_directory_uri() . '/assets/illustrations/screen-usage.jpeg" alt="' . esc_attr__( 'Illustration of a woman working on a laptop.', 'quadrat' ) . '" class="wp-image-1438"/></figure>
 	<!-- /wp:image -->
 
-	<!-- wp:cover {"overlayColor":"secondary","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"20px","left":"40px"}}}} -->
-	<div class="wp-block-cover has-secondary-background-color has-background-dim mt-0" style="padding-top:30px;padding-right:40px;padding-bottom:20px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"level":3,"textColor":"primary"} -->
+	<!-- wp:cover {"overlayColor":"tertiary","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"20px","left":"40px"}}}} -->
+	<div class="wp-block-cover has-tertiary-background-color has-background-dim mt-0" style="padding-top:30px;padding-right:40px;padding-bottom:20px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"level":3,"textColor":"primary"} -->
 	<h3 class="has-primary-color has-text-color">' . esc_html__( 'Episode 1: How Screens Affect Hormones', 'quadrat' ) . '</h3>
 	<!-- /wp:heading -->
 
@@ -33,8 +33,8 @@ return array(
 	<figure class="wp-block-image size-large image-no-margin mb-0"><img src="' . get_stylesheet_directory_uri() . '/assets/illustrations/leadership.jpeg" alt="' . esc_attr__( 'Illustration of a woman climbing steps.', 'quadrat' ) . '" class="wp-image-1439"/></figure>
 	<!-- /wp:image -->
 
-	<!-- wp:cover {"overlayColor":"secondary","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"20px","left":"40px"}}}} -->
-	<div class="wp-block-cover has-secondary-background-color has-background-dim mt-0" style="padding-top:30px;padding-right:40px;padding-bottom:20px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"level":3,"textColor":"primary"} -->
+	<!-- wp:cover {"overlayColor":"tertiary","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"20px","left":"40px"}}}} -->
+	<div class="wp-block-cover has-tertiary-background-color has-background-dim mt-0" style="padding-top:30px;padding-right:40px;padding-bottom:20px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"level":3,"textColor":"primary"} -->
 	<h3 class="has-primary-color has-text-color">' . esc_html__( 'Episode 2: Female Leaders, Where Are They?', 'quadrat' ) . '</h3>
 	<!-- /wp:heading -->
 

quadrat/sass/block-styles/_query.scss

@@ -47,7 +47,7 @@
 			}
 			&:before {
 				content: "";
-				background: var(--wp--preset--color--secondary);
+				background: var(--wp--preset--color--tertiary);
 				width: 375px;
 				height: 375px;
 				position: absolute;

quadrat/sass/blocks/_calendar.scss

@@ -4,12 +4,12 @@
 			color: var(--wp--custom--color--primary);
 		}
 		th {
-			background-color: var(--wp--custom--color--secondary);
-			border-color: var(--wp--custom--color--secondary);
+			background-color: var(--wp--custom--color--tertiary);
+			border-color: var(--wp--custom--color--tertiary);
 		}
 		td {
 			color: var(--wp--custom--color--primary);
-			border-color: var(--wp--custom--color--secondary);
+			border-color: var(--wp--custom--color--tertiary);
 		}
 	}
 }

quadrat/sass/blocks/_navigation.scss

@@ -14,7 +14,7 @@
 			.submenu-container,
 			.wp-block-navigation-link__container {
 				background-color: var(--wp--custom--color--background);
-				border-color: var(--wp--custom--color--secondary);
+				border-color: var(--wp--custom--color--tertiary);
 			}
 		}
 	}
@@ -24,7 +24,7 @@
 	}
 
 	&.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
-		background-color: var(--wp--custom--color--secondary);
+		background-color: var(--wp--custom--color--tertiary);
 		&.has-modal-open {
 			.wp-block-pages-list__item,
 			.wp-block-navigation-link {

quadrat/sass/blocks/_post-comments.scss

@@ -4,7 +4,7 @@
 		input:not([type=submit]):not([type=checkbox]),
 		textarea {
 			border: none;
-			background: var(--wp--custom--color--secondary);
+			background: var(--wp--custom--color--tertiary);
 		}
 	}
 

quadrat/sass/blocks/_table.scss

@@ -29,7 +29,7 @@
 .wp-block-table.is-style-stripes {
 	tbody {
 		tr:nth-child(odd) {
-			background-color: var(--wp--preset--color--secondary);
+			background-color: var(--wp--preset--color--tertiary);
 		}
 	}
 }

quadrat/sass/templates/_footer.scss

@@ -2,7 +2,7 @@
 	.site-footer.wp-block-group {
 		&:before {
 			content: "";
-			background-color: var(--wp--custom--color--secondary);
+			background-color: var(--wp--custom--color--tertiary);
 			clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
 			position: absolute;
 			height: 100vw;

quadrat/sass/templates/_header.scss

@@ -46,7 +46,7 @@
 
 	&:before {
 		content: "";
-		background-color: var(--wp--custom--color--secondary);
+		background-color: var(--wp--custom--color--tertiary);
 		position: absolute;
 		bottom: 0;
 		top: 0;

quadrat/theme.json

@@ -52,9 +52,9 @@
 					"name": "Primary"
 				},
 				{
-					"slug": "secondary",
+					"slug": "tertiary",
 					"color": "#151853",
-					"name": "Secondary"
+					"name": "Tertiary"
 				},
 				{
 					"slug": "background",
@@ -105,8 +105,8 @@
 				"foreground": "var(--wp--preset--color--primary)",
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
-				"secondary": "var(--wp--preset--color--secondary)",
-				"selection": "var(--wp--preset--color--secondary)"
+				"secondary": "var(--wp--preset--color--primary)",
+				"tertiary": "var(--wp--preset--color--tertiary)"
 			},
 			"colorPalettes": [
 				{
@@ -114,7 +114,7 @@
 					"slug": "blue",
 					"colors": {
 						"primary": "#FDF5E2",
-						"secondary": "#123B62",
+						"tertiary": "#123B62",
 						"background": "#204A72"
 					}
 				},
@@ -123,7 +123,7 @@
 					"slug": "dark-blue",
 					"colors": {
 						"primary": "#F9DAAD",
-						"secondary": "#071F2C",
+						"tertiary": "#071F2C",
 						"background": "#0E2B3B"
 					}
 				},
@@ -132,7 +132,7 @@
 					"slug": "green",
 					"colors": {
 						"primary": "#F5D5CA",
-						"secondary": "#0A2C25",
+						"tertiary": "#0A2C25",
 						"background": "#103931"
 					}
 				},
@@ -141,7 +141,7 @@
 					"slug": "red",
 					"colors": {
 						"primary": "#CEEDFF",
-						"secondary": "#721A18",
+						"tertiary": "#721A18",
 						"background": "#822726"
 					}
 				},
@@ -150,7 +150,7 @@
 					"slug": "light-green",
 					"colors": {
 						"primary": "#0C1946",
-						"secondary": "#DBE9DD",
+						"tertiary": "#DBE9DD",
 						"background": "#EBF3EC"
 					}
 				},
@@ -159,7 +159,7 @@
 					"slug": "white",
 					"colors": {
 						"primary": "#2B2B2B",
-						"secondary": "#F8F8F8",
+						"tertiary": "#F8F8F8",
 						"background": "#FFFFFF"
 					}
 				},
@@ -168,7 +168,7 @@
 					"slug": "light-pink",
 					"colors": {
 						"primary": "#151853",
-						"secondary": "#FCD0D0",
+						"tertiary": "#FCD0D0",
 						"background": "#FFE2E2"
 					}
 				},
@@ -177,7 +177,7 @@
 					"slug": "light-yellow",
 					"colors": {
 						"primary": "#0E2B3B",
-						"secondary": "#FBEAD2",
+						"tertiary": "#FBEAD2",
 						"background": "#FFF4E3"
 					}
 				},
@@ -186,7 +186,7 @@
 					"slug": "light-blue",
 					"colors": {
 						"primary": "#460707",
-						"secondary": "#DEE9F1",
+						"tertiary": "#DEE9F1",
 						"background": "#EDF4F9"
 					}
 				}
@@ -455,7 +455,7 @@
 					"lineHeight": "1.6"
 				},
 				"color": {
-					"background": "var(--wp--custom--color--secondary)"
+					"background": "var(--wp--custom--color--tertiary)"
 				}
 			},
 			"core/navigation": {

seedlet-blocks/child-theme.json

@@ -75,9 +75,9 @@
 					"name": "Background"
 				},
 				{
-					"slug": "selection",
-					"color": "#f2f2f2",
-					"name": "Selection"
+					"slug": "tertiary",
+					"color": "#FAFBF6",
+					"name": "tertiary"
 				}
 			]
 		},

seedlet-blocks/theme.json

@@ -100,9 +100,9 @@
 					"name": "Background"
 				},
 				{
-					"slug": "selection",
-					"color": "#f2f2f2",
-					"name": "Selection"
+					"slug": "tertiary",
+					"color": "#FAFBF6",
+					"name": "tertiary"
 				}
 			]
 		},
@@ -149,7 +149,7 @@
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
 				"secondary": "var(--wp--preset--color--secondary)",
-				"selection": "var(--wp--preset--color--selection)"
+				"tertiary": "var(--wp--preset--color--tertiary)"
 			},
 			"colorPalettes": [
 				{
@@ -160,7 +160,7 @@
 						"secondary": "#4E2F4B",
 						"foreground": "#1D1E1E",
 						"background": "#FFFFFF",
-						"selection": "#F9F9F9"
+						"tertiary": "#F9F9F9"
 					}
 				},
 				{
@@ -171,7 +171,7 @@
 						"secondary": "#233252",
 						"foreground": "#242527",
 						"background": "#EEF4F7",
-						"selection": "#F9F9F9"
+						"tertiary": "#F9F9F9"
 					}
 				},
 				{
@@ -182,7 +182,7 @@
 						"secondary": "#FBE6AA",
 						"foreground": "#FFFFFF",
 						"background": "#1F2527",
-						"selection": "#364043"
+						"tertiary": "#364043"
 					}
 				}
 			],

skatepark/assets/theme.css

@@ -37,15 +37,12 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 ::-moz-selection {
-	color: var(--wp--preset--color--background);
+	color: var(--wp--custom--color--background);
+	background-color: var(--wp--custom--color--foreground);
 }
 ::selection {
-	color: var(--wp--preset--color--background);
-}
-
-p {
-	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
-	margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical));
+	color: var(--wp--custom--color--background);
+	background-color: var(--wp--custom--color--foreground);
 }
 
 .wp-block-post-author__content {

skatepark/child-theme.json

@@ -88,7 +88,7 @@
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
 				"secondary": "var(--wp--preset--color--primary)",
-				"selection": "var(--wp--preset--color--primary)"
+				"tertiary": "var(--wp--preset--color--background)"
 			},
 			"colorPalettes": [
 				{

skatepark/sass/base/_text.scss

@@ -1,9 +1,5 @@
 // Text selection text color
 ::selection {
-	color: var(--wp--preset--color--background);
-}
-
-p {
-	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
-	margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
-}
+	color: var(--wp--custom--color--background);
+	background-color: var(--wp--custom--color--foreground);
+}

skatepark/theme.json

@@ -143,7 +143,7 @@
 				"background": "var(--wp--preset--color--background)",
 				"primary": "var(--wp--preset--color--primary)",
 				"secondary": "var(--wp--preset--color--primary)",
-				"selection": "var(--wp--preset--color--primary)"
+				"tertiary": "var(--wp--preset--color--background)"
 			},
 			"colorPalettes": [
 				{