From edea05695ef40332b30efb608a5f19685808d5a6 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 13 Sep 2023 18:39:49 +0200 Subject: [PATCH 1/7] initial style variations --- styles/dark-sans-serif.json | 87 ++++++++++++++++++++++++++++++++++++ styles/dark-serif.json | 66 +++++++++++++++++++++++++++ styles/light-sans-serif.json | 26 +++++++++++ 3 files changed, 179 insertions(+) create mode 100644 styles/dark-sans-serif.json create mode 100644 styles/dark-serif.json create mode 100644 styles/light-sans-serif.json diff --git a/styles/dark-sans-serif.json b/styles/dark-sans-serif.json new file mode 100644 index 00000000..69e0f4a6 --- /dev/null +++ b/styles/dark-sans-serif.json @@ -0,0 +1,87 @@ +{ + "version": 2, + "title": "Dark Sans Serif", + "$schema": "https://schemas.wp.org/trunk/theme.json", + "settings": { + "color": { + "palette": [ + { + "color": "#222222", + "name": "Base", + "slug": "base" + }, + { + "color": "#303030", + "name": "Base / Two", + "slug": "base-2" + }, + { + "color": "#ffffff26", + "name": "Base / Three", + "slug": "base-3" + }, + { + "color": "#ffffff", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#a2a2a2", + "name": "Contrast / Two", + "slug": "contrast-2" + }, + { + "color": "#A4A4A4", + "name": "Contrast / Three", + "slug": "contrast-3" + }, + { + "color": "#cfcabe", + "name": "Accent", + "slug": "accent" + }, + { + "color": "#c2a990", + "name": "Accent / Two", + "slug": "accent-2" + }, + { + "color": "#d8613c", + "name": "Accent / Three", + "slug": "accent-3" + }, + { + "color": "#b1c5a4", + "name": "Accent / Four", + "slug": "accent-4" + }, + { + "color": "#b5bdbc", + "name": "Accent / Five", + "slug": "accent-5" + } + ] + } + }, + "styles": { + "blocks": { + "core/pullquote": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)" + } + }, + "core/quote": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)" + } + } + }, + "elements": { + "heading": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)" + } + } + } + } +} \ No newline at end of file diff --git a/styles/dark-serif.json b/styles/dark-serif.json new file mode 100644 index 00000000..1b29639b --- /dev/null +++ b/styles/dark-serif.json @@ -0,0 +1,66 @@ +{ + "version": 2, + "title": "Dark Serif", + "$schema": "https://schemas.wp.org/trunk/theme.json", + "settings": { + "color": { + "palette": [ + { + "color": "#222222", + "name": "Base", + "slug": "base" + }, + { + "color": "#303030", + "name": "Base / Two", + "slug": "base-2" + }, + { + "color": "#ffffff26", + "name": "Base / Three", + "slug": "base-3" + }, + { + "color": "#ffffff", + "name": "Contrast", + "slug": "contrast" + }, + { + "color": "#a2a2a2", + "name": "Contrast / Two", + "slug": "contrast-2" + }, + { + "color": "#A4A4A4", + "name": "Contrast / Three", + "slug": "contrast-3" + }, + { + "color": "#cfcabe", + "name": "Accent", + "slug": "accent" + }, + { + "color": "#c2a990", + "name": "Accent / Two", + "slug": "accent-2" + }, + { + "color": "#d8613c", + "name": "Accent / Three", + "slug": "accent-3" + }, + { + "color": "#b1c5a4", + "name": "Accent / Four", + "slug": "accent-4" + }, + { + "color": "#b5bdbc", + "name": "Accent / Five", + "slug": "accent-5" + } + ] + } + } +} \ No newline at end of file diff --git a/styles/light-sans-serif.json b/styles/light-sans-serif.json new file mode 100644 index 00000000..8b393f06 --- /dev/null +++ b/styles/light-sans-serif.json @@ -0,0 +1,26 @@ +{ + "version": 2, + "title": "Light Sans Serif", + "$schema": "https://schemas.wp.org/trunk/theme.json", + "styles": { + "blocks": { + "core/pullquote": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)" + } + }, + "core/quote": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)" + } + } + }, + "elements": { + "heading": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system-font)" + } + } + } + } +} \ No newline at end of file From d627d9e840c6d74c8e93c28a8a1e94bc236deebb Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 14 Sep 2023 18:16:47 +0200 Subject: [PATCH 2/7] add css for paragraph variation --- styles/dark-sans-serif.json | 3 +++ styles/light-sans-serif.json | 3 +++ 2 files changed, 6 insertions(+) diff --git a/styles/dark-sans-serif.json b/styles/dark-sans-serif.json index 69e0f4a6..b868b0b5 100644 --- a/styles/dark-sans-serif.json +++ b/styles/dark-sans-serif.json @@ -65,6 +65,9 @@ }, "styles": { "blocks": { + "core/paragraph": { + "css": "&.is-style-heading {font-family: var(--wp--preset--font-family--system-font)}" + }, "core/pullquote": { "typography": { "fontFamily": "var(--wp--preset--font-family--system-font)" diff --git a/styles/light-sans-serif.json b/styles/light-sans-serif.json index 8b393f06..a1484a8a 100644 --- a/styles/light-sans-serif.json +++ b/styles/light-sans-serif.json @@ -4,6 +4,9 @@ "$schema": "https://schemas.wp.org/trunk/theme.json", "styles": { "blocks": { + "core/paragraph": { + "css": "&.is-style-heading {font-family: var(--wp--preset--font-family--system-font)}" + }, "core/pullquote": { "typography": { "fontFamily": "var(--wp--preset--font-family--system-font)" From 33804c7de588cb38e46757d873a9162e9c6eb6f0 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 14 Sep 2023 14:13:27 -0400 Subject: [PATCH 3/7] Use AAA accent colors --- styles/dark-sans-serif.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/styles/dark-sans-serif.json b/styles/dark-sans-serif.json index b868b0b5..efdeb79f 100644 --- a/styles/dark-sans-serif.json +++ b/styles/dark-sans-serif.json @@ -1,12 +1,12 @@ { "version": 2, - "title": "Dark Sans Serif", + "title": "Onyx", "$schema": "https://schemas.wp.org/trunk/theme.json", "settings": { "color": { "palette": [ { - "color": "#222222", + "color": "#272727", "name": "Base", "slug": "base" }, @@ -21,42 +21,42 @@ "slug": "base-3" }, { - "color": "#ffffff", + "color": "#f8f8f8", "name": "Contrast", "slug": "contrast" }, { - "color": "#a2a2a2", + "color": "#B7B7B7", "name": "Contrast / Two", "slug": "contrast-2" }, { - "color": "#A4A4A4", + "color": "#909090", "name": "Contrast / Three", "slug": "contrast-3" }, { - "color": "#cfcabe", + "color": "#5F584F", "name": "Accent", "slug": "accent" }, { - "color": "#c2a990", + "color": "#6D533C", "name": "Accent / Two", "slug": "accent-2" }, { - "color": "#d8613c", + "color": "#973C20", "name": "Accent / Three", "slug": "accent-3" }, { - "color": "#b1c5a4", + "color": "#4D5B48", "name": "Accent / Four", "slug": "accent-4" }, { - "color": "#b5bdbc", + "color": "#4F5959", "name": "Accent / Five", "slug": "accent-5" } @@ -87,4 +87,4 @@ } } } -} \ No newline at end of file +} From 40f0009b5591409afdad5509ff3ef3fbe7e17f28 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 14 Sep 2023 14:14:08 -0400 Subject: [PATCH 4/7] Rename to onyx --- styles/{dark-sans-serif.json => onyx.json} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename styles/{dark-sans-serif.json => onyx.json} (100%) diff --git a/styles/dark-sans-serif.json b/styles/onyx.json similarity index 100% rename from styles/dark-sans-serif.json rename to styles/onyx.json From 7b8188614347c88caa6012ebc43d7ad8d0d5618f Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 14 Sep 2023 14:36:42 -0400 Subject: [PATCH 5/7] Update duotone and gradients Makes sure they work across variations --- patterns/page-04-newsletter-landing.php | 4 +- patterns/services-cta.php | 2 +- styles/onyx.json | 130 +++++++++++++++++++----- theme.json | 34 +++---- 4 files changed, 125 insertions(+), 45 deletions(-) diff --git a/patterns/page-04-newsletter-landing.php b/patterns/page-04-newsletter-landing.php index 345e5574..324cd281 100644 --- a/patterns/page-04-newsletter-landing.php +++ b/patterns/page-04-newsletter-landing.php @@ -20,8 +20,8 @@ - -

+ + diff --git a/patterns/services-cta.php b/patterns/services-cta.php index 37cc9ffc..8521d468 100644 --- a/patterns/services-cta.php +++ b/patterns/services-cta.php @@ -10,7 +10,7 @@
-
+
<?php echo esc_attr( 'A man holding some paper', 'twentytwentyfour' ); ?>
diff --git a/styles/onyx.json b/styles/onyx.json index efdeb79f..b38eaab6 100644 --- a/styles/onyx.json +++ b/styles/onyx.json @@ -4,6 +4,110 @@ "$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 rust" + }, + { + "colors": [ + "#272727", + "#4D5B48" + ], + "slug": "duotone-4", + "name": "Dark gray and sage" + }, + { + "colors": [ + "#272727", + "#4F5959" + ], + "slug": "duotone-5", + "name": "Dark gray and mint" + } + ], + "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", @@ -21,7 +125,7 @@ "slug": "base-3" }, { - "color": "#f8f8f8", + "color": "#f9f9f9", "name": "Contrast", "slug": "contrast" }, @@ -62,29 +166,5 @@ } ] } - }, - "styles": { - "blocks": { - "core/paragraph": { - "css": "&.is-style-heading {font-family: var(--wp--preset--font-family--system-font)}" - }, - "core/pullquote": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system-font)" - } - }, - "core/quote": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system-font)" - } - } - }, - "elements": { - "heading": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system-font)" - } - } - } } } diff --git a/theme.json b/theme.json index 679cfc2c..d9022c88 100644 --- a/theme.json +++ b/theme.json @@ -13,7 +13,7 @@ "#111111", "#ffffff" ], - "slug": "black-and-white", + "slug": "duotone-1", "name": "Black and white" }, { @@ -21,7 +21,7 @@ "#111111", "#C2A990" ], - "slug": "black-and-sandstone", + "slug": "duotone-2", "name": "Black and sandstone" }, { @@ -29,7 +29,7 @@ "#111111", "#D8613C" ], - "slug": "black-and-rust", + "slug": "duotone-3", "name": "Black and rust" }, { @@ -37,7 +37,7 @@ "#111111", "#B1C5A4" ], - "slug": "black-and-sage", + "slug": "duotone-4", "name": "Black and sage" }, { @@ -45,68 +45,68 @@ "#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" } From 17bbe788e50067477886db8689acba939260b729 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 14 Sep 2023 14:37:12 -0400 Subject: [PATCH 6/7] Remove extra variations --- styles/dark-serif.json | 66 ------------------------------------ styles/light-sans-serif.json | 29 ---------------- 2 files changed, 95 deletions(-) delete mode 100644 styles/dark-serif.json delete mode 100644 styles/light-sans-serif.json diff --git a/styles/dark-serif.json b/styles/dark-serif.json deleted file mode 100644 index 1b29639b..00000000 --- a/styles/dark-serif.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "version": 2, - "title": "Dark Serif", - "$schema": "https://schemas.wp.org/trunk/theme.json", - "settings": { - "color": { - "palette": [ - { - "color": "#222222", - "name": "Base", - "slug": "base" - }, - { - "color": "#303030", - "name": "Base / Two", - "slug": "base-2" - }, - { - "color": "#ffffff26", - "name": "Base / Three", - "slug": "base-3" - }, - { - "color": "#ffffff", - "name": "Contrast", - "slug": "contrast" - }, - { - "color": "#a2a2a2", - "name": "Contrast / Two", - "slug": "contrast-2" - }, - { - "color": "#A4A4A4", - "name": "Contrast / Three", - "slug": "contrast-3" - }, - { - "color": "#cfcabe", - "name": "Accent", - "slug": "accent" - }, - { - "color": "#c2a990", - "name": "Accent / Two", - "slug": "accent-2" - }, - { - "color": "#d8613c", - "name": "Accent / Three", - "slug": "accent-3" - }, - { - "color": "#b1c5a4", - "name": "Accent / Four", - "slug": "accent-4" - }, - { - "color": "#b5bdbc", - "name": "Accent / Five", - "slug": "accent-5" - } - ] - } - } -} \ No newline at end of file diff --git a/styles/light-sans-serif.json b/styles/light-sans-serif.json deleted file mode 100644 index a1484a8a..00000000 --- a/styles/light-sans-serif.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "version": 2, - "title": "Light Sans Serif", - "$schema": "https://schemas.wp.org/trunk/theme.json", - "styles": { - "blocks": { - "core/paragraph": { - "css": "&.is-style-heading {font-family: var(--wp--preset--font-family--system-font)}" - }, - "core/pullquote": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system-font)" - } - }, - "core/quote": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system-font)" - } - } - }, - "elements": { - "heading": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system-font)" - } - } - } - } -} \ No newline at end of file From 5bdc479eda77fcd3dcca5acaf89160ba86e6b303 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Thu, 14 Sep 2023 14:43:20 -0400 Subject: [PATCH 7/7] Proper color names --- styles/onyx.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styles/onyx.json b/styles/onyx.json index b38eaab6..84e7ed23 100644 --- a/styles/onyx.json +++ b/styles/onyx.json @@ -27,7 +27,7 @@ "#973C20" ], "slug": "duotone-3", - "name": "Dark gray and rust" + "name": "Dark gray and cinnamon" }, { "colors": [ @@ -35,7 +35,7 @@ "#4D5B48" ], "slug": "duotone-4", - "name": "Dark gray and sage" + "name": "Dark gray and olive" }, { "colors": [ @@ -43,7 +43,7 @@ "#4F5959" ], "slug": "duotone-5", - "name": "Dark gray and mint" + "name": "Dark gray and steel" } ], "gradients": [