Try/quadrat semantic color customizations (#4090)

* Refactored blockbase color configuration from 'descriptive' to 'semantic'

* Refactored Quadrat to support Semantic Colors

* WIP experiment to allow Customizer editing of semantic colors in Quadrat

* Update the settings in theme.json not styles

* remove class variable for simplicity

* allow users to set multiple colors

* move merged colors to a class property

* Refactored to simplify and integrate changes to save everything at once

* Refactored and implemented save-all-at-once

* Refactored color customization logic from Quadrat to Blockbase

* Refactored Mayland blocks to support semantic color customizations

* Refactored Seedlet for configurable semantic colors.  Refactored meaning of 'primary' in blockbase.

* Minor color cleanups

* Fixed quadrat background color override

* Change variables to camelCase

* remove slug class property

* rename a few variables and add some comments

* remove the noop.css

* don't assume properties exist

Co-authored-by: Ben Dwyer <ben@scruffian.com>

blockbase/functions.php

@@ -80,3 +80,8 @@ function blockbase_fonts_url() {
 	// Make a single request for the theme fonts.
 	return esc_url_raw( 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families ) );
 }
+
+/**
+ * Customize Global Styles
+ */
+require get_template_directory() . '/inc/customization.php';

blockbase/inc/customization.php

@@ -0,0 +1,137 @@
+<?php
+
+require_once 'wp-customize-global-styles-setting.php';
+
+class GlobalStylesCustomizer {
+
+	private $user_color_palette;
+
+	function __construct() {
+		add_action( 'customize_register', array( $this, 'initialize' ) );
+		add_action( 'customize_preview_init', array( $this, 'customize_preview_js' ) );
+		add_action( 'wp_enqueue_scripts', array( $this, 'create_customization_style_element' ) );
+		add_action( 'customize_save_after', array( $this, 'handle_customize_save_after' ) );
+	}
+
+	function customize_preview_js() {
+		wp_enqueue_script( 'customizer-preview-color', get_template_directory_uri() . '/inc/customizer-preview.js', array( 'customize-preview' ) );
+		wp_localize_script( 'customizer-preview-color', 'userColorPalette', $this->user_color_palette );
+	}
+
+	function create_customization_style_element() {
+		wp_enqueue_style( 'global-styles-customizations', ' ', array( 'global-styles' ) ); // This needs to load after global_styles, hence the dependency
+		wp_add_inline_style( 'global-styles-customizations', '{}' );
+	}
+
+	function initialize( $wp_customize ) {
+		$this->user_color_palette = $this->build_user_color_palette();
+		$this->register_color_controls( $wp_customize, $this->user_color_palette );
+	}
+
+	function build_user_color_palette() {
+		// 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.
+		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 );
+		}
+
+		return $user_color_palette;
+	}
+
+	function get_theme_default_color_value( $slug, $palette ) {
+		foreach ( $palette as $palette_item ) {
+			if ( $palette_item['slug'] === $slug ) {
+				return $palette_item['color'];
+			}
+		}
+		return null;
+	}
+
+	function register_color_controls( $wp_customize, $palette ) {
+
+		$section_key = 'customize-global-styles';
+
+		//Add a Section to the Customizer for these bits
+		$wp_customize->add_section(
+			$section_key,
+			array(
+				'capability'  => 'edit_theme_options',
+				'description' => __( 'Color Customization for Quadrat' ),
+				'title'       => __( 'Colors' ),
+			)
+		);
+
+		foreach ( $palette as $palette_item ) {
+			$this->register_color_control( $wp_customize, $palette_item, $section_key );
+		}
+	}
+
+	function register_color_control( $wp_customize, $palette_item, $section_key ) {
+		$setting_key = $section_key . $palette_item['slug'];
+
+		$global_styles_setting = new WP_Customize_Global_Styles_Setting(
+			$wp_customize,
+			$setting_key,
+			array(
+				'default'           => $palette_item['default'],
+				'sanitize_callback' => 'sanitize_hex_color',
+				'slug'              => $palette_item['slug'],
+				'user_value'        => $palette_item['color'],
+			)
+		);
+		$wp_customize->add_setting( $global_styles_setting );
+
+		$wp_customize->add_control(
+			new WP_Customize_Color_Control(
+				$wp_customize,
+				$setting_key,
+				array(
+					'section' => $section_key,
+					'label'   => $palette_item['name'],
+				)
+			)
+		);
+	}
+
+	function handle_customize_save_after( $manager ) {
+		//update the palette based on the controls
+		foreach ( $this->user_color_palette as $key => $palette_item ) {
+			$setting = $manager->get_setting( 'customize-global-styles' . $palette_item['slug'] );
+			if ( isset( $setting->new_value ) ) {
+				$this->user_color_palette[ $key ]['color'] = $setting->new_value;
+			}
+		}
+
+		// Get the user's theme.json from the CPT.
+		$user_custom_post_type_id     = WP_Theme_JSON_Resolver_Gutenberg::get_user_custom_post_type_id();
+		$user_theme_json_post         = get_post( $user_custom_post_type_id );
+		$user_theme_json_post_content = json_decode( $user_theme_json_post->post_content );
+
+		// Create the color palette inside settings if it doesn't exist.
+		if ( property_exists( $user_theme_json_post_content, 'settings' ) ) {
+			if ( property_exists( $user_theme_json_post_content->settings, 'color' ) ) {
+				$user_theme_json_post_content->settings->color->palette = $this->user_color_palette;
+			} else {
+				$user_theme_json_post_content->settings->color = (object) array( 'palette' => $this->user_color_palette );
+			}
+		} else {
+			$user_theme_json_post_content->settings = (object) array( 'color' => (object) array( 'palette' => $this->user_color_palette ) );
+		}
+
+		// Update the theme.json with the new settings.
+		$user_theme_json_post->post_content                     = json_encode( $user_theme_json_post_content );
+		return wp_update_post( $user_theme_json_post );
+	}
+}
+
+new GlobalStylesCustomizer;

blockbase/inc/customizer-preview.js

@@ -0,0 +1,27 @@
+if ( userColorPalette ) {
+	// For each of the palette items add a listener
+	userColorPalette.forEach( ( paletteItem ) => {
+		const settingName = 'customize-global-styles' + paletteItem.slug;
+		wp.customize( settingName, ( value ) => {
+			value.bind( ( newValue ) => {
+				paletteItem.color = newValue;
+				updatePreview( userColorPalette );
+			} );
+		} );
+	} );
+}
+
+function updatePreview( palette ) {
+	// build the CSS variables to inject
+	let innerHTML = ':root,body{';
+	palette.forEach( ( paletteItem ) => {
+		innerHTML += `--wp--preset--color--${ paletteItem.slug }:${ paletteItem.color };`;
+	} );
+	innerHTML += ';}';
+
+	// inject them into the body
+	const styleElement = document.getElementById(
+		'global-styles-customizations-inline-css'
+	);
+	styleElement.innerHTML = innerHTML;
+}

blockbase/inc/wp-customize-global-styles-setting.php

@@ -0,0 +1,64 @@
+<?php
+
+if ( class_exists( 'WP_Customize_Setting' ) && ! class_exists( 'WP_Customize_Global_Styles_Setting' ) ) {
+	/**
+	 * Customize API: WP_Customize_Global_Styles_Setting class
+	 *
+	 * This handles saving and retrieving of the value.
+	 *
+	 */
+
+	/**
+	 * Custom Setting to handle WP Global_Styles.
+	 *
+	 * @see WP_Customize_Setting
+	 */
+	final class WP_Customize_Global_Styles_Setting extends WP_Customize_Setting {
+
+		/**
+		 * The setting type.
+		 *
+		 * @var string
+		 */
+		public $type = 'global_styles';
+
+		/**
+		 * Setting Transport
+		 *
+		 * @var string
+		 */
+		public $transport = 'postMessage';
+
+		/**
+		 * User value
+		 *
+		 * @var string
+		 */
+		public $user_value = '';
+
+		/**
+		 * Fetch the value of the setting.
+		 *
+		 * @see WP_Customize_Setting::value()
+		 *
+		 * @return string
+		 */
+		public function value() {
+			return $this->user_value;
+		}
+
+		/**
+		 * Store the color in the Global Styles custom post
+		 *
+		 * @param string $color The input color.
+		 * @return WP_Post|WP_Error The post or a WP_Error if the value could not be saved.
+		 */
+		public function update( $color ) {
+			if ( empty( $color ) ) {
+				return;
+			}
+
+			$this->new_value = $color;
+		}
+	}
+}

blockbase/theme.json

@@ -39,29 +39,29 @@
 			"gradients": [],
 			"palette": [
 				{
-					"slug": "black",
-					"color": "#000000",
-					"name": "Black"
+					"slug": "primary",
+					"color": "#007cba",
+					"name": "Primary"
 				},
 				{
-					"slug": "white",
-					"color": "#ffffff",
-					"name": "White"
+					"slug": "secondary",
+					"color": "#006ba1",
+					"name": "Secondary"
 				},
 				{
-					"slug": "blue",
-					"color": "#007cba",
-					"name": "Blue"
+					"slug": "foreground",
+					"color": "#333333",
+					"name": "Foreground"
 				},
 				{
-					"slug": "almost-black",
-					"color": "#333333",
-					"name": "Almost Black"
+					"slug": "background",
+					"color": "#ffffff",
+					"name": "Background"
 				},
 				{
-					"slug": "almost-white",
-					"color": "#FAFAFA",
-					"name": "Almost White"
+					"slug": "selection",
+					"color": "#c2c2c2",
+					"name": "Selection"
 				}
 			]
 		},
@@ -71,22 +71,22 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--color--secondary)",
+					"color": "var(--wp--custom--color--primary)",
 					"radius": "4px",
 					"style": "solid",
 					"width": "2px"
 				},
 				"color": {
-					"background": "var(--wp--custom--color--secondary)",
+					"background": "var(--wp--custom--color--primary)",
 					"text": "var(--wp--custom--color--background)"
 				},
 				"hover": {
 					"color": {
 						"text": "var(--wp--custom--color--background)",
-						"background": "#006ba1"
+						"background": "var(--wp--custom--color--secondary)"
 					},
 					"border": {
-						"color": "#006ba1"
+						"color": "var(--wp--custom--color--secondary)"
 					}
 				},
 				"spacing": {
@@ -110,12 +110,11 @@
 				}
 			},
 			"color": {
-				"primary": "var(--wp--preset--color--black)",
-				"secondary": "var(--wp--preset--color--blue)",
-				"tertiary": "var(--wp--preset--color--almost-white)",
-				"foreground": "var(--wp--preset--color--almost-black)",
-				"background": "var(--wp--preset--color--white)",
-				"selection": "var(--wp--preset--color--almost-white)"
+				"foreground": "var(--wp--preset--color--foreground)",
+				"background": "var(--wp--preset--color--background)",
+				"primary": "var(--wp--preset--color--primary)",
+				"secondary": "var(--wp--preset--color--secondary)",
+				"selection": "var(--wp--preset--color--selection)"
 			},
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
@@ -397,7 +396,7 @@
 			},
 			"core/quote": {
 				"border": {
-					"color": "var(--wp--custom--color--secondary)",
+					"color": "var(--wp--custom--color--primary)",
 					"style": "solid",
 					"width": "0 0 0 1px"
 				},
@@ -449,7 +448,7 @@
 			},
 			"link": {
 				"color": {
-					"text": "var(--wp--custom--color--secondary)"
+					"text": "var(--wp--custom--color--primary)"
 				}
 			}
 		},

mayland-blocks/child-theme.json

@@ -22,49 +22,42 @@
 			"gradients": [ ],
 			"palette": [
 				{
-					"slug": "black",
-					"color": "#000000",
-					"name": "Black"
+					"slug": "foreground",
+					"color": "#1a1a1a",
+					"name": "Foreground"
 				},
 				{
-					"slug": "almost-black",
-					"color": "#1a1a1a",
-					"name": "Almost Black"
+					"slug": "background",
+					"color": "#ffffff",
+					"name": "Background"
 				},
 				{
-					"slug": "white",
-					"color": "#FFFFFF",
-					"name": "White"
+					"slug": "primary",
+					"color": "#000000",
+					"name": "Primary"
 				},
 				{
-					"slug": "gray",
+					"slug": "secondary",
 					"color": "#666666",
-					"name": "Gray"
+					"name": "Secondary"
 				},
 				{
-					"slug": "dark-gray",
-					"color": "#333333",
-					"name": "Dark Gray"
+					"slug": "selection",
+					"color": "#add8e6",
+					"name": "Selection"
 				}
 			]
 		},
 		"custom": {
 			"button": {
 				"border": {
-					"radius": "5px"
+					"radius": "5px",
+					"color": "var(--wp--custom--color--foreground)"
 				},
 				"color": {
 					"text": "var(--wp--custom--color--background)",
 					"background": "var(--wp--custom--color--foreground)"
 				},
-				"hover": {
-					"color": {
-						"background": "var(--wp--custom--color--tertiary)"
-					},
-					"border": {
-						"color": "var(--wp--custom--color--tertiary)"
-					}
-				},
 				"spacing": {
 					"padding": {
 						"top": "4px",
@@ -79,12 +72,11 @@
 				}
 			},
 			"color": {
-				"primary": "var(--wp--preset--color--black)",
-				"secondary": "var(--wp--preset--color--almost-black)",
-				"tertiary": "var(--wp--preset--color--gray)",
-				"foreground": "var(--wp--preset--color--black)",
-				"background": "var(--wp--preset--color--white)",
-				"selection": "lightblue"
+				"primary": "var(--wp--preset--color--primary)",
+				"secondary": "var(--wp--preset--color--secondary)",
+				"foreground": "var(--wp--preset--color--foreground)",
+				"background": "var(--wp--preset--color--background)",
+				"selection": "var(--wp--preset--color--selection)"
 			},
 			"fontsToLoadFromGoogle": [
 				"family=Poppins:ital,wght@0,400;0,600;1,400"
@@ -188,10 +180,6 @@
 				}
 			},
 			"core/post-date": {
-				"color": {
-					"link": "var(--wp--custom--color--foreground-light)",
-					"text": "var(--wp--custom--color--foreground-light)"
-				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}

mayland-blocks/theme.json

@@ -18,6 +18,24 @@
 			"area": "Post Meta"
 		}
 	],
+	"customTemplates": [
+		{
+			"name": "blank",
+			"title": "Blank",
+			"postTypes": [
+				"page",
+				"post"
+			]
+		},
+		{
+			"name": "header-footer-only",
+			"title": "Header and Footer Only",
+			"postTypes": [
+				"page",
+				"post"
+			]
+		}
+	],
 	"settings": {
 		"border": {
 			"customColor": true,
@@ -29,29 +47,29 @@
 			"gradients": [],
 			"palette": [
 				{
-					"slug": "black",
-					"color": "#000000",
-					"name": "Black"
+					"slug": "foreground",
+					"color": "#1a1a1a",
+					"name": "Foreground"
 				},
 				{
-					"slug": "almost-black",
-					"color": "#1a1a1a",
-					"name": "Almost Black"
+					"slug": "background",
+					"color": "#ffffff",
+					"name": "Background"
 				},
 				{
-					"slug": "white",
-					"color": "#FFFFFF",
-					"name": "White"
+					"slug": "primary",
+					"color": "#000000",
+					"name": "Primary"
 				},
 				{
-					"slug": "gray",
+					"slug": "secondary",
 					"color": "#666666",
-					"name": "Gray"
+					"name": "Secondary"
 				},
 				{
-					"slug": "dark-gray",
-					"color": "#333333",
-					"name": "Dark Gray"
+					"slug": "selection",
+					"color": "#add8e6",
+					"name": "Selection"
 				}
 			]
 		},
@@ -61,7 +79,7 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--color--secondary)",
+					"color": "var(--wp--custom--color--foreground)",
 					"radius": "5px",
 					"style": "solid",
 					"width": "2px"
@@ -73,10 +91,10 @@
 				"hover": {
 					"color": {
 						"text": "var(--wp--custom--color--background)",
-						"background": "var(--wp--custom--color--tertiary)"
+						"background": "var(--wp--custom--color--secondary)"
 					},
 					"border": {
-						"color": "var(--wp--custom--color--tertiary)"
+						"color": "var(--wp--custom--color--secondary)"
 					}
 				},
 				"spacing": {
@@ -100,12 +118,11 @@
 				}
 			},
 			"color": {
-				"primary": "var(--wp--preset--color--black)",
-				"secondary": "var(--wp--preset--color--almost-black)",
-				"tertiary": "var(--wp--preset--color--gray)",
-				"foreground": "var(--wp--preset--color--black)",
-				"background": "var(--wp--preset--color--white)",
-				"selection": "lightblue"
+				"foreground": "var(--wp--preset--color--foreground)",
+				"background": "var(--wp--preset--color--background)",
+				"primary": "var(--wp--preset--color--primary)",
+				"secondary": "var(--wp--preset--color--secondary)",
+				"selection": "var(--wp--preset--color--selection)"
 			},
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
@@ -366,8 +383,8 @@
 			},
 			"core/post-date": {
 				"color": {
-					"link": "var(--wp--custom--color--foreground-light)",
-					"text": "var(--wp--custom--color--foreground-light)"
+					"link": "var(--wp--custom--color--foreground)",
+					"text": "var(--wp--custom--color--foreground)"
 				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
@@ -409,7 +426,7 @@
 			},
 			"core/quote": {
 				"border": {
-					"color": "var(--wp--custom--color--secondary)",
+					"color": "var(--wp--custom--color--primary)",
 					"style": "solid",
 					"width": "0 0 0 1px"
 				},

quadrat/child-theme.json

@@ -4,30 +4,21 @@
 			"gradients": [],
 			"palette": [
 				{
-					"slug": "black",
-					"color": "#000000",
-					"name": "Black"
-				},
-				{
-					"slug": "white",
-					"color": "#ffffff",
-					"name": "White"
-				},
-				{
-					"slug": "pink",
+					"slug": "primary",
 					"color": "#FFD1D1",
-					"name": "Pink"
+					"name": "Primary"
 				},
 				{
-					"slug": "blue",
-					"color": "#292C6D",
-					"name": "Blue"
+					"slug": "secondary",
+					"color": "#151853",
+					"name": "Secondary"
 				},
 				{
-					"slug": "darker-blue",
-					"color": "#151853",
-					"name": "Darker Blue"
+					"slug": "background",
+					"color": "#292C6D",
+					"name": "Background"
 				}
+
 			]
 		},
 		"custom": {
@@ -56,11 +47,11 @@
 				}
 			},
 			"color": {
-				"primary": "var(--wp--preset--color--pink)",
-				"secondary": "var(--wp--preset--color--darker-blue)",
-				"foreground": "var(--wp--preset--color--pink)",
-				"background": "var(--wp--preset--color--blue)",
-				"selection": "var(--wp--preset--color--darker-blue)"
+				"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)"
 			},
 			"fontsToLoadFromGoogle": [
 				"family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"

quadrat/sass/_colors.scss

@@ -1,6 +1,6 @@
 // Provide reasonable default colors when a background color is chosen 
 // that doesn't work with the default foreground color
-.has-pink-background-color,
-.has-white-background-color {
-	color: var(--wp--preset--color--blue);
+
+.has-primary-background-color {
+	color: var(--wp--preset--color--background);
 }

quadrat/theme.json

@@ -10,6 +10,24 @@
 			"area": "footer"
 		}
 	],
+	"customTemplates": [
+		{
+			"name": "blank",
+			"title": "Blank",
+			"postTypes": [
+				"page",
+				"post"
+			]
+		},
+		{
+			"name": "header-footer-only",
+			"title": "Header and Footer Only",
+			"postTypes": [
+				"page",
+				"post"
+			]
+		}
+	],
 	"settings": {
 		"border": {
 			"customColor": true,
@@ -21,29 +39,19 @@
 			"gradients": [],
 			"palette": [
 				{
-					"slug": "black",
-					"color": "#000000",
-					"name": "Black"
-				},
-				{
-					"slug": "white",
-					"color": "#ffffff",
-					"name": "White"
-				},
-				{
-					"slug": "pink",
+					"slug": "primary",
 					"color": "#FFD1D1",
-					"name": "Pink"
+					"name": "Primary"
 				},
 				{
-					"slug": "blue",
-					"color": "#292C6D",
-					"name": "Blue"
+					"slug": "secondary",
+					"color": "#151853",
+					"name": "Secondary"
 				},
 				{
-					"slug": "darker-blue",
-					"color": "#151853",
-					"name": "Darker Blue"
+					"slug": "background",
+					"color": "#292C6D",
+					"name": "Background"
 				}
 			]
 		},
@@ -92,12 +100,11 @@
 				}
 			},
 			"color": {
-				"primary": "var(--wp--preset--color--pink)",
-				"secondary": "var(--wp--preset--color--darker-blue)",
-				"tertiary": "var(--wp--preset--color--almost-white)",
-				"foreground": "var(--wp--preset--color--pink)",
-				"background": "var(--wp--preset--color--blue)",
-				"selection": "var(--wp--preset--color--darker-blue)"
+				"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)"
 			},
 			"form": {
 				"padding": "20px",
@@ -420,7 +427,7 @@
 			},
 			"core/quote": {
 				"border": {
-					"color": "var(--wp--custom--color--secondary)",
+					"color": "var(--wp--custom--color--primary)",
 					"style": "solid",
 					"width": "0px"
 				},

seedlet-blocks/child-theme.json

@@ -55,60 +55,46 @@
 			],
 			"palette": [
 				{
-					"slug": "black",
-					"color": "#000000",
-					"name": "Black"
+					"slug": "primary",
+					"color": "#3C8067",
+					"name": "Primary"
 				},
 				{
-					"slug": "white",
-					"color": "#ffffff",
-					"name": "White"
+					"slug": "secondary",
+					"color": "#336D58",
+					"name": "Secondary"
 				},
 				{
-					"slug": "green",
-					"color": "#3C8067",
-					"name": "Green"
-				},
-				{
-					"slug": "almost-black",
+					"slug": "foreground",
 					"color": "#333333",
-					"name": "Almost Black"
+					"name": "Foreground"
 				},
 				{
-					"slug": "almost-white",
-					"color": "#FAFAFA",
-					"name": "Almost White"
+					"slug": "background",
+					"color": "#ffffff",
+					"name": "Background"
 				},
 				{
-					"slug": "light-grey",
-					"color": "#EFEFEF",
-					"name": "Light Grey"
+					"slug": "selection",
+					"color": "#f2f2f2",
+					"name": "Selection"
 				}
-
 			]
 		},
 		"custom": {
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--color--secondary)"
+					"color": "var(--wp--custom--color--primary)"
 				},
 				"hover": {
 					"color": {
-						"background": "#336D58"
+						"background": "var(--wp--custom--color--secondary)"
 					},
 					"border": {
-						"color": "#336D58"
+						"color": "var(--wp--custom--color--secondary)"
 					}
 				}
 			},
-			"color": {
-				"primary": "var(--wp--preset--color--black)",
-				"secondary": "var(--wp--preset--color--green)",
-				"tertiary": "var(--wp--preset--color--almost-white)",
-				"foreground": "var(--wp--preset--color--almost-black)",
-				"background": "var(--wp--preset--color--white)",
-				"selection": "#f2f2f2"
-			},
 			"fontsToLoadFromGoogle": [
 				"family=Fira+Sans:ital,wght@0,400;0,500;1,400",
 				"family=Playfair+Display:ital,wght@0,400;0,700;1,400"
@@ -208,7 +194,7 @@
 			},
 			"core/separator": {
 				"color": {
-					"text": "var(--wp--preset--color--light-grey)"
+					"text": "#EFEFEF"
 				}
 			},
 			"core/site-title": {

seedlet-blocks/theme.json

@@ -14,6 +14,24 @@
 			"area": "Post Meta"
 		}
 	],
+	"customTemplates": [
+		{
+			"name": "blank",
+			"title": "Blank",
+			"postTypes": [
+				"page",
+				"post"
+			]
+		},
+		{
+			"name": "header-footer-only",
+			"title": "Header and Footer Only",
+			"postTypes": [
+				"page",
+				"post"
+			]
+		}
+	],
 	"settings": {
 		"border": {
 			"customColor": true,
@@ -62,34 +80,29 @@
 			],
 			"palette": [
 				{
-					"slug": "black",
-					"color": "#000000",
-					"name": "Black"
+					"slug": "primary",
+					"color": "#3C8067",
+					"name": "Primary"
 				},
 				{
-					"slug": "white",
-					"color": "#ffffff",
-					"name": "White"
+					"slug": "secondary",
+					"color": "#336D58",
+					"name": "Secondary"
 				},
 				{
-					"slug": "green",
-					"color": "#3C8067",
-					"name": "Green"
-				},
-				{
-					"slug": "almost-black",
+					"slug": "foreground",
 					"color": "#333333",
-					"name": "Almost Black"
+					"name": "Foreground"
 				},
 				{
-					"slug": "almost-white",
-					"color": "#FAFAFA",
-					"name": "Almost White"
+					"slug": "background",
+					"color": "#ffffff",
+					"name": "Background"
 				},
 				{
-					"slug": "light-grey",
-					"color": "#EFEFEF",
-					"name": "Light Grey"
+					"slug": "selection",
+					"color": "#f2f2f2",
+					"name": "Selection"
 				}
 			]
 		},
@@ -99,22 +112,22 @@
 			},
 			"button": {
 				"border": {
-					"color": "var(--wp--custom--color--secondary)",
+					"color": "var(--wp--custom--color--primary)",
 					"radius": "4px",
 					"style": "solid",
 					"width": "2px"
 				},
 				"color": {
-					"background": "var(--wp--custom--color--secondary)",
+					"background": "var(--wp--custom--color--primary)",
 					"text": "var(--wp--custom--color--background)"
 				},
 				"hover": {
 					"color": {
 						"text": "var(--wp--custom--color--background)",
-						"background": "#336D58"
+						"background": "var(--wp--custom--color--secondary)"
 					},
 					"border": {
-						"color": "#336D58"
+						"color": "var(--wp--custom--color--secondary)"
 					}
 				},
 				"spacing": {
@@ -138,12 +151,11 @@
 				}
 			},
 			"color": {
-				"primary": "var(--wp--preset--color--black)",
-				"secondary": "var(--wp--preset--color--green)",
-				"tertiary": "var(--wp--preset--color--almost-white)",
-				"foreground": "var(--wp--preset--color--almost-black)",
-				"background": "var(--wp--preset--color--white)",
-				"selection": "#f2f2f2"
+				"foreground": "var(--wp--preset--color--foreground)",
+				"background": "var(--wp--preset--color--background)",
+				"primary": "var(--wp--preset--color--primary)",
+				"secondary": "var(--wp--preset--color--secondary)",
+				"selection": "var(--wp--preset--color--selection)"
 			},
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
@@ -425,7 +437,7 @@
 			},
 			"core/separator": {
 				"color": {
-					"text": "var(--wp--preset--color--light-grey)"
+					"text": "#EFEFEF"
 				},
 				"border": {
 					"color": "currentColor",
@@ -444,7 +456,7 @@
 			},
 			"core/quote": {
 				"border": {
-					"color": "var(--wp--custom--color--secondary)",
+					"color": "var(--wp--custom--color--primary)",
 					"style": "solid",
 					"width": "0 0 0 1px"
 				},
@@ -496,7 +508,7 @@
 			},
 			"link": {
 				"color": {
-					"text": "var(--wp--custom--color--secondary)"
+					"text": "var(--wp--custom--color--primary)"
 				}
 			}
 		},