Skip to content
This repository has been archived by the owner on Jan 24, 2024. It is now read-only.

Commit

Permalink
Add Theme Style Variation: Onyx (#357)
Browse files Browse the repository at this point in the history
* initial style variations

* add css for paragraph variation

* Use AAA accent colors

* Rename to onyx

* Update duotone and gradients

Makes sure they work across variations

* Remove extra variations

* Proper color names

---------

Co-authored-by: Rich Tabor <[email protected]>
  • Loading branch information
MaggieCabrera and richtabor authored Sep 17, 2023
1 parent 7d3082c commit 20f62f5
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 21 deletions.
4 changes: 2 additions & 2 deletions patterns/page-04-newsletter-landing.php
Original file line number Diff line number Diff line change
Expand Up @@ -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"} -->
Expand Down
4 changes: 2 additions & 2 deletions patterns/services-cta.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->

Expand Down
170 changes: 170 additions & 0 deletions styles/onyx.json
Original file line number Diff line number Diff line change
@@ -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"
}
]
}
}
}
34 changes: 17 additions & 17 deletions theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down

0 comments on commit 20f62f5

Please sign in to comment.