From 915b260b57314d542a1cf8c2cd1b67b57aca335c Mon Sep 17 00:00:00 2001 From: Warwick Date: Thu, 29 Feb 2024 16:24:25 +0200 Subject: [PATCH] Adding in the CTA button variables. --- .gitignore | 1 + assets/css/blocks/button.css | 128 +++++++++++++---------------------- theme.json | 97 +++++++++++++------------- 3 files changed, 100 insertions(+), 126 deletions(-) diff --git a/.gitignore b/.gitignore index b5e03789..f59a53c5 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,4 @@ templates/.DS_Store .DS_Store assets/.DS_Store .DS_Store +.DS_Store diff --git a/assets/css/blocks/button.css b/assets/css/blocks/button.css index 020a8134..839761f6 100644 --- a/assets/css/blocks/button.css +++ b/assets/css/blocks/button.css @@ -22,7 +22,7 @@ body .alignfull.is-layout-flow { margin-block-start: 0px !important; } -/* Button +/* Button Generall --------------------------------------------- */ body a.wp-element-button, @@ -30,12 +30,14 @@ body a.wp-block-button__link { color: var(--wp--preset--color--base); } +/* CTA Button +--------------------------------------------- */ + .wp-block-button.is-style-cta .wp-element-button { background-color: var(--wp--preset--color--cta); color: var(--wp--preset--color--base); - border:2px solid var(--wp--custom--colour--cta--800); + border: var(--wp--custom--button--cta--border--width) var(--wp--custom--button--cta--border--style) var(--wp--custom--button--cta--border--color); } - .wp-block-button.is-style-cta .wp-element-button:after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' viewBox='0 0 28 29' fill='none'%3E%3Ccircle cx='14.5' cy='15' r='12' stroke='white' stroke-width='2'/%3E%3Cpath d='M13.4887 11.0045L16.3617 13.7766H9.41327C8.90717 13.7766 8.5 14.1863 8.5 14.6956V15.3082C8.5 15.8175 8.90717 16.2272 9.41327 16.2272H16.3617L13.4887 18.9994C13.1196 19.3555 13.112 19.9489 13.4735 20.3127L13.8921 20.7301C14.2498 21.09 14.8282 21.09 15.1821 20.7301L20.2317 15.6528C20.5894 15.2929 20.5894 14.7109 20.2317 14.3548L15.1821 9.26994C14.8244 8.91002 14.246 8.91002 13.8921 9.26994L13.4735 9.6873C13.112 10.0549 13.1196 10.6484 13.4887 11.0045Z' fill='white'/%3E%3C/svg%3E"); stroke: #fff !important; @@ -54,7 +56,7 @@ body a.wp-block-button__link { } .wp-block-button .has-cta-background-color { color: var(--wp--preset--color--base); - border:2px solid var(--wp--custom--colour--cta--800); + border: var(--wp--custom--button--cta--border--width) var(--wp--custom--button--cta--border--style) var(--wp--custom--button--cta--border--color); } .wp-block-button .has-cta-background-color:after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' viewBox='0 0 28 29' fill='none'%3E%3Ccircle cx='14.5' cy='15' r='12' stroke='white' stroke-width='2'/%3E%3Cpath d='M13.4887 11.0045L16.3617 13.7766H9.41327C8.90717 13.7766 8.5 14.1863 8.5 14.6956V15.3082C8.5 15.8175 8.90717 16.2272 9.41327 16.2272H16.3617L13.4887 18.9994C13.1196 19.3555 13.112 19.9489 13.4735 20.3127L13.8921 20.7301C14.2498 21.09 14.8282 21.09 15.1821 20.7301L20.2317 15.6528C20.5894 15.2929 20.5894 14.7109 20.2317 14.3548L15.1821 9.26994C14.8244 8.91002 14.246 8.91002 13.8921 9.26994L13.4735 9.6873C13.112 10.0549 13.1196 10.6484 13.4887 11.0045Z' fill='white'/%3E%3C/svg%3E"); @@ -71,14 +73,19 @@ body a.wp-block-button__link { margin-left: 6px; margin-top:-5px; vertical-align: middle; - } +} + +.wp-block-button.is-style-outline .has-cta-color.has-base-background-color::after{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' viewBox='0 0 28 29' fill='none'%3E%3Ccircle cx='14.5' cy='15' r='12' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M13.4887 11.0045L16.3617 13.7766H9.41327C8.90717 13.7766 8.5 14.1863 8.5 14.6956V15.3082C8.5 15.8175 8.90717 16.2272 9.41327 16.2272H16.3617L13.4887 18.9994C13.1196 19.3555 13.112 19.9489 13.4735 20.3127L13.8921 20.7301C14.2498 21.09 14.8282 21.09 15.1821 20.7301L20.2317 15.6528C20.5894 15.2929 20.5894 14.7109 20.2317 14.3548L15.1821 9.26994C14.8244 8.91002 14.246 8.91002 13.8921 9.26994L13.4735 9.6873C13.112 10.0549 13.1196 10.6484 13.4887 11.0045Z' fill='currentColor'/%3E%3C/svg%3E"); + stroke: var(--wp--preset--color--cta) !important; + fill: var(--wp--preset--color--cta) !important; + filter: var(--wp--preset--color--cta) !important; +} + + +/* Other Buttons +--------------------------------------------- */ - .wp-block-button.is-style-outline .has-cta-color.has-base-background-color::after{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' viewBox='0 0 28 29' fill='none'%3E%3Ccircle cx='14.5' cy='15' r='12' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M13.4887 11.0045L16.3617 13.7766H9.41327C8.90717 13.7766 8.5 14.1863 8.5 14.6956V15.3082C8.5 15.8175 8.90717 16.2272 9.41327 16.2272H16.3617L13.4887 18.9994C13.1196 19.3555 13.112 19.9489 13.4735 20.3127L13.8921 20.7301C14.2498 21.09 14.8282 21.09 15.1821 20.7301L20.2317 15.6528C20.5894 15.2929 20.5894 14.7109 20.2317 14.3548L15.1821 9.26994C14.8244 8.91002 14.246 8.91002 13.8921 9.26994L13.4735 9.6873C13.112 10.0549 13.1196 10.6484 13.4887 11.0045Z' fill='currentColor'/%3E%3C/svg%3E"); - stroke: var(--wp--preset--color--cta) !important; - fill: var(--wp--preset--color--cta) !important; - filter: var(--wp--preset--color--cta) !important; - } .wp-block-button .has-primary-background-color { color: var(--wp--preset--color--base); border:2px solid var(--wp--custom--colour--primary--800); @@ -104,7 +111,10 @@ vertical-align: middle; border:2px solid var(--wp--custom--colour--secondary--800); color:var(--wp--custom--colour--secondary--800); } - +.wp-block-button .has-secondary-background-color:after{ + stroke: #fff !important; + fill: #fff !important; + } .wp-block-button .has-tertiary-background-color { color: var(--wp--preset--color--base); border:2px solid var(--wp--custom--colour--tertiary--800); @@ -236,14 +246,16 @@ vertical-align: middle; border: 2px solid; border-color: currentColor; } + .wp-block-button.is-style-outline-shadow .wp-element-button { background-color: transparent; border: 2px solid; color: #000; border-color: #000; } + .wp-block-button.is-style-outline .wp-element-button.has-cta-color:hover{ - background-color: var(--wp--custom--colour--cta--100) !important; + background-color: var( --wp--custom--button--cta--hover--border--color ) !important; border-color: var(--wp--preset--color--cta) !important; box-shadow: 0px 2px var(--wp--preset--color--cta); -webkit-box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--preset--color--cta),0 var(--animation-depth,.275em) 0 0 var(--wp--preset--color--cta); @@ -252,9 +264,10 @@ vertical-align: middle; -ms-transform: translateY(calc(-1*var(--animation-depth, .275em))); transform: translateY(calc(-1*var(--animation-depth, .275em))); } + .wp-block-button.is-style-outline .wp-element-button.has-cta-color:focus{ background-color: var(--wp--preset--color--cta) !important; - border-color: var(--wp--custom--colour--cta--300) !important; + border-color: var( --wp--custom--button--cta--focus--border--color ) !important; box-shadow: 0px 0px var(--wp--preset--color--cta); color:#fff!important; } @@ -263,9 +276,6 @@ vertical-align: middle; border-color: var(--wp--preset--color--cta) !important; box-shadow: 0px 2px var(--wp--preset--color--cta); color:var(--wp--preset--color--cta) !important; - -webkit-transform: translateY(calc(-1*var(--animation-depth, .075em))); - -ms-transform: translateY(calc(-1*var(--animation-depth, .075em))); - transform: translateY(calc(-1*var(--animation-depth, .075em))); } .wp-block-button.is-style-outline .wp-element-button.has-primary-color:active{ background-color: #fff !important; @@ -313,6 +323,7 @@ vertical-align: middle; color: var(--wp--preset--color--base); border: 2px solid var(--wp--custom--colour--primary--800); } + .wp-block-button.is-style-outline-shadow .wp-element-button.has-secondary-color { box-shadow: 5px 5px var(--wp--custom--colour--secondary--800); border: 2px solid var(--wp--preset--color--secondary); @@ -340,6 +351,7 @@ vertical-align: middle; .wp-block-button .has-primary-background-color:hover { background-color: var(--wp--custom--colour--cta--600) !important; } + .wp-block-button.is-style-outline-shadow .has-primary-color:hover { background-color: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--base) !important; @@ -369,10 +381,10 @@ vertical-align: middle; .wp-block-button.is-style-cta .wp-element-button:hover, .wp-block-button .has-cta-background-color:hover, .wp-block-button.is-style-pill .has-cta-background-color:hover { - background-color: var(--wp--custom--colour--cta--600) !important; - border-color: var(--wp--custom--colour--cta--800) !important; - -webkit-box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--custom--colour--cta--800),0 var(--animation-depth,.275em) 0 0 var(--wp--custom--colour--cta--800); - box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--custom--colour--cta--800),0 var(--animation-depth,.275em) 0 0 var(--wp--custom--colour--cta--800); + background-color: var( --wp--custom--button--cta--hover--background--color ) !important; + border-color: var( --wp--custom--button--cta--hover--border--color ) !important; + -webkit-box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--custom--button--cta--hover--shadow--color),0 var(--animation-depth,.275em) 0 0 var(--wp--custom--button--cta--hover--shadow--color); + box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--custom--button--cta--hover--shadow--color),0 var(--animation-depth,.275em) 0 0 var(--wp--custom--button--cta--hover--shadow--color); -webkit-transform: translateY(calc(-1*var(--animation-depth, .275em))); -ms-transform: translateY(calc(-1*var(--animation-depth, .275em))); transform: translateY(calc(-1*var(--animation-depth, .275em))); @@ -380,34 +392,31 @@ vertical-align: middle; .wp-block-button.is-style-cta .wp-element-button:active, .wp-block-button .has-cta-background-color:active, .wp-block-button.is-style-pill .has-cta-background-color:active { - background-color: var(--wp--custom--colour--cta--600) !important; - border-color: var(--wp--custom--colour--cta--800) !important; - box-shadow: 0px 2px var(--wp--custom--colour--cta--800); - -webkit-transform: translateY(calc(-1*var(--animation-depth, .075em))); - -ms-transform: translateY(calc(-1*var(--animation-depth, .075em))); - transform: translateY(calc(-1*var(--animation-depth, .075em))); + background-color: var(--wp--custom--button--cta--active--background--color) !important; + border-color: var(--wp--custom--button--cta--active--border--color) !important; + box-shadow: 0px 2px var(--wp--custom--button--cta--active--shadow--color); } .wp-block-button.is-style-cta .wp-element-button:focus, .wp-block-button .has-cta-background-color:focus, .wp-block-button.is-style-pill .has-cta-background-color:focus { - background-color: var(--wp--custom--colour--cta--400) !important; - border-color: var(--wp--custom--colour--cta--300) !important; - box-shadow: 0px 0px var(--wp--custom--colour--cta--800); + background-color: var(--wp--custom--button--cta--focus--background--color) !important; + border-color: var(--wp--custom--button--cta--focus--border--color) !important; + box-shadow: 0px 0px var(--wp--custom--button--cta--focus--shadow--color); } /* CTA Style outline */ .wp-block-button.is-style-outline .has-cta-color:hover, .wp-block-button.is-style-pill-outline .has-cta-color:hover { - background-color: var(--wp--custom--colour--cta--100) !important; - border-color: var(--wp--preset--color--cta) !important; + background-color: var( --wp--custom--button--cta--hover--background-color ) !important; + border-color: var( --wp--preset--color--cta ) !important; color:var(--wp--preset--color--cta) !important; -webkit-box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--preset--color--cta),0 var(--animation-depth,.275em) 0 0 var(--wp--preset--color--cta); box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--preset--color--cta),0 var(--animation-depth,.275em) 0 0 var(--wp--preset--color--cta); -webkit-transform: translateY(calc(-1*var(--animation-depth, .275em))); -ms-transform: translateY(calc(-1*var(--animation-depth, .275em))); transform: translateY(calc(-1*var(--animation-depth, .275em))); - } + .wp-block-button.is-style-outline .has-cta-color:focus, .wp-block-button.is-style-pill-outline .has-cta-color:focus { border-color: var(--wp--custom--colour--cta--700) !important; @@ -419,9 +428,6 @@ vertical-align: middle; border-color: var(--wp--preset--color--cta) !important; box-shadow: 0px 2px var(--wp--preset--color--cta); color: var(--wp--preset--color--cta) !important; - -webkit-transform: translateY(calc(-1*var(--animation-depth, .075em))); - -ms-transform: translateY(calc(-1*var(--animation-depth, .075em))); - transform: translateY(calc(-1*var(--animation-depth, .075em))); } /* CTA Others */ @@ -437,6 +443,7 @@ vertical-align: middle; color: var(--wp--preset--color--base) !important; } + .wp-element-button.has-primary-background-color:hover { background-color: var(--wp--custom--colour--primary--600) !important; border: 2px solid var(--wp--custom--colour--primary--800); @@ -579,72 +586,33 @@ vertical-align: middle; .wp-block-button.is-style-outline-shadow .has-cta-color:active { - box-shadow: 0px 2px var(--wp--custom--colour--cta--800) !important; + box-shadow: 2px 2px var( --wp--custom--button--cta--active-shadow-color ) !important; top: 3px; transition: 0.1s; position: relative; } .wp-block-button.is-style-outline-shadow .has-primary-color:active { - box-shadow: 0px 2px var(--wp--custom--colour--primary--800) !important; + box-shadow: 2px 2px var(--wp--custom--colour--primary--800) !important; top: 3px; transition: 0.1s; position: relative; } .wp-block-button.is-style-outline-shadow .has-secondary-color:active { - box-shadow: 0px 2px var(--wp--custom--colour--secondary--800) !important; + box-shadow: 2px 2px var(--wp--custom--colour--secondary--800) !important; top: 3px; transition: 0.1s; position: relative; } .wp-block-button.is-style-outline-shadow .has-tertiary-color:active { - box-shadow: 0px 2px var(--wp--custom--colour--tertiary--800) !important; + box-shadow: 2px 2px var(--wp--custom--colour--tertiary--800) !important; top: 3px; transition: 0.1s; position: relative; } .wp-block-button.is-style-shadow .wp-element-button:active { - box-shadow: 0px 2px var(--wp--preset--color--contrast) !important; + box-shadow: 2px 2px var(--wp--preset--color--contrast) !important; top: 3px; transition: 0.1s; position: relative; } - -/* Contrast Backgrounds */ -.has-contrast-background-color .wp-block-button.is-style-cta .wp-element-button, .has-contrast-background-color .wp-block-button .has-cta-background-color{ - border: 2px solid var(--wp--custom--colour--cta--300)!important; -} -.has-contrast-background-color .wp-block-button.is-style-shadow .wp-element-button{ - box-shadow:5px 5px var(--wp--custom--colour--base--500); -} - -.has-contrast-background-color .wp-block-button.is-style-shadow .wp-element-button:active{ -box-shadow:0px 2px var(--wp--custom--colour--base--500)!important; -} - -.has-contrast-background-color .wp-block-button.is-style-cta .wp-element-button:hover, .has-contrast-background-color .wp-block-button .has-cta-background-color:hover, .has-contrast-background-color .wp-block-button.is-style-pill .has-cta-background-color:hover{ background-color: var(--wp--custom--colour--cta--600) !important; - border-color: var(--wp--custom--colour--cta--300) !important; - -webkit-box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--custom--colour--cta--300),0 var(--animation-depth,.275em) 0 0 var(--wp--custom--colour--cta--300); - box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--custom--colour--cta--300),0 var(--animation-depth,.275em) 0 0 var(--wp--custom--colour--cta--300); - -webkit-transform: translateY(calc(-1*var(--animation-depth, .275em))); - -ms-transform: translateY(calc(-1*var(--animation-depth, .275em))); - transform: translateY(calc(-1*var(--animation-depth, .275em))); -} - -.has-contrast-background-color .wp-block-button.is-style-cta .wp-element-button:active, .has-contrast-background-color .wp-block-button .has-cta-background-color:active, .has-contrast-background-color .wp-block-button.is-style-pill .has-cta-background-color:active{ - background-color: var(--wp--custom--colour--cta--600) !important; - border-color: var(--wp--custom--colour--cta--300) !important; - -webkit-box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--custom--colour--cta--300),0 var(--animation-depth,.075em) 0 0 var(--wp--custom--colour--cta--300); - box-shadow: 0 0 0 var(--cta-stroke-width,0) var(--wp--custom--colour--cta--300),0 var(--animation-depth,.075em) 0 0 var(--wp--custom--colour--cta--300); - -webkit-transform: translateY(calc(-1*var(--animation-depth, .075em))); - -ms-transform: translateY(calc(-1*var(--animation-depth, .075em))); - transform: translateY(calc(-1*var(--animation-depth, .075em))); -} - -.has-contrast-background-color .wp-block-button.is-style-outline-shadow .wp-element-button.has-cta-color{ - box-shadow: 5px 5px var(--wp--custom--colour--cta--300); -} - -.has-contrast-background-color .wp-block-button.is-style-outline-shadow .has-cta-color:active { - box-shadow: 0px 2px var(--wp--custom--colour--cta--300)!important; -} \ No newline at end of file diff --git a/theme.json b/theme.json index 56fd2b3b..0578f250 100644 --- a/theme.json +++ b/theme.json @@ -153,37 +153,37 @@ ], "palette": [ { - "color": "var( --wp--custom--colour--base--100 )", + "color": "#ffffff", "name": "Base", "slug": "base" }, { - "color": "var( --wp--custom--colour--contrast--900 )", + "color": "#000000", "name": "Contrast", "slug": "contrast" }, { - "color": "var( --wp--custom--colour--primary--500 )", + "color": "#1E6AFF", "name": "Primary", "slug": "primary" }, { - "color": "var( --wp--custom--colour--secondary--500 )", + "color": "#7BE7FF", "name": "Secondary", "slug": "secondary" }, { - "color": "var( --wp--custom--colour--tertiary--500 )", + "color": "#19DFC1", "name": "Tertiary", "slug": "tertiary" }, { - "color": "var( --wp--custom--colour--quaternary--500 )", + "color": "#E694FF", "name": "Quaternary", "slug": "quaternary" }, { - "color": "var( --wp--custom--colour--quinary--500 )", + "color": "#D6B300", "name": "Quinary", "slug": "quinary" }, @@ -223,7 +223,7 @@ "slug": "ctahover" }, { - "color": "var( --wp--custom--colour--neutral--500 )", + "color": "#EDEFF5", "name": "Neutral", "slug": "neutral" }, @@ -298,39 +298,6 @@ } }, "colour": { - "base": { - "100": "#FFFFFF", - "200": "#F2F2F2", - "300": "#E6E6E6", - "400": "#DCDCDC", - "500": "#CBCBCB", - "600": "#BEBEBE", - "700": "#B3B3B3", - "800": "#A6A6A6", - "900": "#8C8C8C" - }, - "neutral": { - "100": "#E8EDF7", - "200": "#DEE8FA", - "300": "#C4D2EB", - "400": "#ADBAD1", - "500": "#939FB8", - "600": "#78859E", - "700": "#596680", - "800": "#3C4961", - "900": "#242E3D" - }, - "contrast": { - "100": "#EDEDED", - "200": "#D3D3D3", - "300": "#A7A7A7", - "400": "#7B7B7B", - "500": "#4F4F4F", - "600": "#3B3B3B", - "700": "#282828", - "800": "#141414", - "900": "#090909" - }, "cta": { "100": "#F4EDFF", "200": "#E4D1FF", @@ -347,7 +314,6 @@ "200": "#C7DAFF", "300": "#8FB5FF", "400": "#568FFF", - "500": "#1E6AFF", "600": "#1750BF", "700": "#0F3580", "800": "#081B40", @@ -358,7 +324,6 @@ "200": "#DEF9FF", "300": "#BDF3FF", "400": "#9CEDFF", - "500": "#7BE7FF", "600": "#5CADBF", "700": "#3E7480", "800": "#1F3A40", @@ -369,7 +334,6 @@ "200": "#C6F7F0", "300": "#8CEFE0", "400": "#53E7D1", - "500": "#19DFC1", "600": "#13A791", "700": "#0D7061", "800": "#063830", @@ -380,7 +344,6 @@ "200": "#F9E4FF", "300": "#F3CAFF", "400": "#ECAFFF", - "500": "#E694FF", "600": "#AD6FBF", "700": "#734A80", "800": "#3A2540", @@ -391,12 +354,54 @@ "200": "#F5ECBF", "300": "#EBD980", "400": "#E0C640", - "500": "#D6B300", "600": "#A18600", "700": "#6B5A00", "800": "#362D00", "900": "#1C1700" } + }, + "button": { + "cta": { + "border": { + "color": "var(--wp--custom--colour--cta--800)", + "radius": "0", + "style": "solid", + "width": "2px" + }, + "hover" : { + "background": { + "color": "var(--wp--custom--colour--cta--100)" + }, + "border": { + "color": "var(--wp--custom--colour--cta--800)" + }, + "shadow": { + "color": "var(--wp--custom--colour--cta--800)" + } + }, + "focus" : { + "background": { + "color": "var(--wp--custom--colour--cta--400)" + }, + "border": { + "color": "var(--wp--custom--colour--cta--300)" + }, + "shadow": { + "color": "var(--wp--custom--colour--cta--800)" + } + }, + "active" : { + "background": { + "color": "var(--wp--custom--colour--cta--600)" + }, + "border": { + "color": "var(--wp--custom--colour--cta--800)" + }, + "shadow": { + "color": "var(--wp--custom--colour--cta--800)" + } + } + } } }, "layout": {