Add Theme Style Variation: Onyx

patterns/page-04-newsletter-landing.php

@@ -20,8 +20,8 @@
 <div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"right":"0","left":"0"},"padding":{"right":"0","left":"0"}}},"fontSize":"x-large"} -->
-<h2 class="wp-block-heading has-text-align-center has-x-large-font-size" style="margin-right:0;margin-left:0;padding-right:0;padding-left:0"><?php echo esc_html_x( 'Subscribe to the newsletter and stay connected with our community', 'sample content for newsletter subscription', 'twentytwentyfour' ); ?></h2>
+<!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"right":"0","left":"0"},"padding":{"right":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast","fontSize":"x-large"} -->
+<h2 class="wp-block-heading has-text-align-center has-contrast-color has-text-color has-link-color has-x-large-font-size" style="margin-right:0;margin-left:0;padding-right:0;padding-left:0"><?php echo esc_html_x( 'Subscribe to the newsletter and stay connected with our community', 'sample content for newsletter subscription', 'twentytwentyfour' ); ?></h2>
 <!-- /wp:heading -->
 
 <!-- wp:spacer {"height":"var:preset|spacing|10"} -->

patterns/services-cta.php

@@ -10,8 +10,8 @@
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"backgroundColor":"contrast-3","layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull has-contrast-3-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns {"verticalAlignment":null,"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"}}}} -->
 <div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center","width":"60%"} -->
-<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|black-and-white"}},"className":"is-style-rounded"} -->
-<figure class="wp-block-image size-full is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/services.webp" alt="<?php echo esc_attr__( 'A man holding some paper', 'twentytwentyfour' ); ?>" style="aspect-ratio:4/3;object-fit:cover"/></figure>
+<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|duotone-1"}},"className":"is-style-rounded"} -->
+<figure class="wp-block-image size-full is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/services.webp" alt="<?php echo esc_attr( 'A man holding some paper', 'twentytwentyfour' ); ?>" style="aspect-ratio:4/3;object-fit:cover"/></figure>
 <!-- /wp:image --></div>
 <!-- /wp:column -->
 

styles/onyx.json

@@ -0,0 +1,170 @@
+{
+	"version": 2,
+	"title": "Onyx",
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"settings": {
+		"color": {
+			"duotone": [
+				{
+					"colors": [
+						"#272727",
+						"#f9f9f9"
+					],
+					"slug": "duotone-1",
+					"name": "Dark gray and white"
+				},
+				{
+					"colors": [
+						"#272727",
+						"#5F584F"
+					],
+					"slug": "duotone-2",
+					"name": "Dark gray and walnut"
+				},
+				{
+					"colors": [
+						"#272727",
+						"#973C20"
+					],
+					"slug": "duotone-3",
+					"name": "Dark gray and cinnamon"
+				},
+				{
+					"colors": [
+						"#272727",
+						"#4D5B48"
+					],
+					"slug": "duotone-4",
+					"name": "Dark gray and olive"
+				},
+				{
+					"colors": [
+						"#272727",
+						"#4F5959"
+					],
+					"slug": "duotone-5",
+					"name": "Dark gray and steel"
+				}
+			],
+			"gradients": [
+				{
+					"slug": "gradient-1",
+					"gradient": "linear-gradient(to bottom, #5F584F 0%, #272727 100%)",
+					"name": "Vertical soft driftwood to dark gray"
+				},
+				{
+					"slug": "gradient-2",
+					"gradient": "linear-gradient(to bottom, #6D533C 0%, #272727 100%)",
+					"name": "Vertical soft walnut to dark gray"
+				},
+				{
+					"slug": "gradient-3",
+					"gradient": "linear-gradient(to bottom, #973C20 0%, #272727 100%)",
+					"name": "Vertical soft cinnamon to dark gray"
+				},
+				{
+					"slug": "gradient-4",
+					"gradient": "linear-gradient(to bottom, #4D5B48 0%, #272727 100%)",
+					"name": "Vertical soft olive to dark gray"
+				},
+				{
+					"slug": "gradient-5",
+					"gradient": "linear-gradient(to bottom, #4F5959 0%, #272727 100%)",
+					"name": "Vertical soft steel to dark gray"
+				},
+				{
+					"slug": "gradient-6",
+					"gradient": "linear-gradient(to bottom, #909090 0%, #272727 100%)",
+					"name": "Vertical soft pewter to dark gray"
+				},
+				{
+					"slug": "gradient-7",
+					"gradient": "linear-gradient(to bottom, #5F584F 50%, #272727 50%)",
+					"name": "Vertical hard beige to dark gray"
+				},
+				{
+					"slug": "gradient-8",
+					"gradient": "linear-gradient(to bottom, #6D533C 50%, #272727 50%)",
+					"name": "Vertical hard walnut to dark gray"
+				},
+				{
+					"slug": "gradient-9",
+					"gradient": "linear-gradient(to bottom, #973C20 50%, #272727 50%)",
+					"name": "Vertical hard cinnamon to dark gray"
+				},
+				{
+					"slug": "gradient-10",
+					"gradient": "linear-gradient(to bottom, #4D5B48 50%, #272727 50%)",
+					"name": "Vertical hard olive to dark gray"
+				},
+				{
+					"slug": "gradient-11",
+					"gradient": "linear-gradient(to bottom, #4F5959 50%, #272727 50%)",
+					"name": "Vertical hard steel to dark gray"
+				},
+				{
+					"slug": "gradient-12",
+					"gradient": "linear-gradient(to bottom, #A4A4A4 50%, #272727 50%)",
+					"name": "Vertical hard pewter to dark gray"
+				}
+			],
+			"palette": [
+				{
+					"color": "#272727",
+					"name": "Base",
+					"slug": "base"
+				},
+				{
+					"color": "#303030",
+					"name": "Base / Two",
+					"slug": "base-2"
+				},
+				{
+					"color": "#ffffff26",
+					"name": "Base / Three",
+					"slug": "base-3"
+				},
+				{
+					"color": "#f9f9f9",
+					"name": "Contrast",
+					"slug": "contrast"
+				},
+				{
+					"color": "#B7B7B7",
+					"name": "Contrast / Two",
+					"slug": "contrast-2"
+				},
+				{
+					"color": "#909090",
+					"name": "Contrast / Three",
+					"slug": "contrast-3"
+				},
+				{
+					"color": "#5F584F",
+					"name": "Accent",
+					"slug": "accent"
+				},
+				{
+					"color": "#6D533C",
+					"name": "Accent / Two",
+					"slug": "accent-2"
+				},
+				{
+					"color": "#973C20",
+					"name": "Accent / Three",
+					"slug": "accent-3"
+				},
+				{
+					"color": "#4D5B48",
+					"name": "Accent / Four",
+					"slug": "accent-4"
+				},
+				{
+					"color": "#4F5959",
+					"name": "Accent / Five",
+					"slug": "accent-5"
+				}
+			]
+		}
+	}
+}

theme.json

@@ -13,100 +13,100 @@
 						"#111111",
 						"#ffffff"
 					],
-					"slug": "black-and-white",
+					"slug": "duotone-1",
 					"name": "Black and white"
 				},
 				{
 					"colors": [
 						"#111111",
 						"#C2A990"
 					],
-					"slug": "black-and-sandstone",
+					"slug": "duotone-2",
 					"name": "Black and sandstone"
 				},
 				{
 					"colors": [
 						"#111111",
 						"#D8613C"
 					],
-					"slug": "black-and-rust",
+					"slug": "duotone-3",
 					"name": "Black and rust"
 				},
 				{
 					"colors": [
 						"#111111",
 						"#B1C5A4"
 					],
-					"slug": "black-and-sage",
+					"slug": "duotone-4",
 					"name": "Black and sage"
 				},
 				{
 					"colors": [
 						"#111111",
 						"#B5BDBC"
 					],
-					"slug": "black-and-pastel-blue",
+					"slug": "duotone-5",
 					"name": "Black and pastel blue"
 				}
 			],
 			"gradients": [
 				{
-					"slug": "vertical-soft-beige-to-white",
+					"slug": "gradient-1",
 					"gradient": "linear-gradient(to bottom, #cfcabe 0%, #F9F9F9 100%)",
 					"name": "Vertical soft beige to white"
 				},
 				{
-					"slug": "vertical-soft-sandstone-to-white",
+					"slug": "gradient-2",
 					"gradient": "linear-gradient(to bottom, #C2A990 0%, #F9F9F9 100%)",
 					"name": "Vertical soft sandstone to white"
 				},
 				{
-					"slug": "vertical-soft-rust-to-white",
+					"slug": "gradient-3",
 					"gradient": "linear-gradient(to bottom, #D8613C 0%, #F9F9F9 100%)",
 					"name": "Vertical soft rust to white"
 				},
 				{
-					"slug": "vertical-soft-sage-to-white",
+					"slug": "gradient-4",
 					"gradient": "linear-gradient(to bottom, #B1C5A4 0%, #F9F9F9 100%)",
 					"name": "Vertical soft sage to white"
 				},
 				{
-					"slug": "vertical-soft-mint-to-white",
+					"slug": "gradient-5",
 					"gradient": "linear-gradient(to bottom, #B5BDBC 0%, #F9F9F9 100%)",
 					"name": "Vertical soft mint to white"
 				},
 				{
-					"slug": "vertical-soft-pewter-to-white",
+					"slug": "gradient-6",
 					"gradient": "linear-gradient(to bottom, #A4A4A4 0%, #F9F9F9 100%)",
 					"name": "Vertical soft pewter to white"
 				},
 				{
-					"slug": "vertical-hard-beige-to-white",
+					"slug": "gradient-7",
 					"gradient": "linear-gradient(to bottom, #cfcabe 50%, #F9F9F9 50%)",
 					"name": "Vertical hard beige to white"
 				},
 				{
-					"slug": "vertical-hard-sandstone-to-white",
+					"slug": "gradient-8",
 					"gradient": "linear-gradient(to bottom, #C2A990 50%, #F9F9F9 50%)",
 					"name": "Vertical hard sandstone to white"
 				},
 				{
-					"slug": "vertical-hard-rust-to-white",
+					"slug": "gradient-9",
 					"gradient": "linear-gradient(to bottom, #D8613C 50%, #F9F9F9 50%)",
 					"name": "Vertical hard rust to white"
 				},
 				{
-					"slug": "vertical-hard-sage-to-white",
+					"slug": "gradient-10",
 					"gradient": "linear-gradient(to bottom, #B1C5A4 50%, #F9F9F9 50%)",
 					"name": "Vertical hard sage to white"
 				},
 				{
-					"slug": "vertical-hard-mint-to-white",
+					"slug": "gradient-11",
 					"gradient": "linear-gradient(to bottom, #B5BDBC 50%, #F9F9F9 50%)",
 					"name": "Vertical hard mint to white"
 				},
 				{
-					"slug": "vertical-hard-pewter-to-white",
+					"slug": "gradient-12",
 					"gradient": "linear-gradient(to bottom, #A4A4A4 50%, #F9F9F9 50%)",
 					"name": "Vertical hard pewter to white"
 				}