diff --git a/styles/blocks/buttons.css b/styles/blocks/buttons.css index 9b9f254..535674b 100644 --- a/styles/blocks/buttons.css +++ b/styles/blocks/buttons.css @@ -18,36 +18,65 @@ * --button-outline-color (fallback is --button-border-color) */ - --button-bg: var(--background-image-button-gradient); - --button-color: var(--color-white); - --button-hover-bg: var(--color-info); - --button-hover-border-color: var(--button-bg); - --button-hover-color: var(--color-white); - --button-border-width: 2px; - --button-border-style: solid; - --button-border-color: var(--color-secondary); - --button-radius: 1.25rem 0.25rem; + --button-primary-bg: var(--background-image-button-gradient); + --button-primary-color: var(--color-white); + --button-primary-border-color: var(--color-secondary); + --button-primary-hover-bg: var(--color-secondary); + --button-primary-hover-border-color: var(--color-secondary); + --button-primary-hover-color: var(--color-white); + --button-primary-active-bg: color-mix(in oklch, var(--color-secondary) 84%, var(--color-danger)); + --button-primary-active-border-color: color-mix(in oklch, var(--color-secondary) 84%, var(--color-danger)); + --button-primary-outline-hover-color: var(--color-white); + --button-primary-shadow-color: color-mix(in oklch, var(--color-secondary) 72%, var(--color-danger)); + --button-primary-hover-shadow: 0.25rem 0.25rem 0 var(--button-primary-shadow-color); + --button-primary-active-shadow: none; + --button-primary-radius: 1.25rem 0.25rem 1.25rem 0.25rem; + + --button-bg: var(--button-primary-bg); + --button-color: var(--button-primary-color); + --button-hover-bg: var(--button-primary-hover-bg); + --button-hover-border-color: var(--button-primary-hover-border-color); + --button-hover-color: var(--button-primary-hover-color); + --button-active-bg: var(--button-primary-active-bg); + --button-active-border-color: var(--button-primary-active-border-color); + --button-shadow: none; + --button-hover-shadow: var(--button-primary-hover-shadow); + --button-active-shadow: var(--button-primary-active-shadow); + --button-border-width: 3px; + --button-border-style: solid; + --button-border-color: var(--button-primary-border-color); + --button-radius: var(--button-primary-radius); + --button-padding-block: 0.625rem; + --button-padding-inline: 2rem; + --button-font-size: var(--text-18px); + --button-font-weight: 700; + --button-letter-spacing: 0; } .btn, .button, .acf-block-preview .button { - @apply px-8 py-2 min-w-0; + @apply min-w-0; background: var(--button-bg); - color: var(--button-color); + box-shadow: var(--button-shadow); cursor: pointer; display: inline-block; - transition: background 200ms, border-color 200ms, color 200ms; + transition: background 200ms, border-color 200ms, box-shadow 200ms, color 200ms, transform 200ms; + + color: var(--button-color); + + &.dark { color: white; } border-width: var(--button-border-width); border-style: var(--button-border-style); border-color: var(--button-border-color); border-radius: var(--button-radius); - padding: .5rem 2rem; + padding: var(--button-padding-block) var(--button-padding-inline); text-decoration: none; font-weight: var(--button-font-weight, 600); font-size: var(--button-font-size, 1rem); + letter-spacing: var(--button-letter-spacing); line-height: 1.1; &[data-button-variant="outline"] { @@ -59,7 +88,7 @@ --button-color: var(--button-border-color); --button-hover-border-color: var(--button-border-color); - --button-hover-color: var(--color-white); + --button-hover-color: var(--button-primary-outline-hover-color); } } @@ -67,6 +96,7 @@ .btn:hover, .button:hover, .acf-block-preview .button:hover { background: var(--button-hover-bg); border-color: var(--button-hover-border-color); + box-shadow: var(--button-hover-shadow); color: var(--button-hover-color); } @@ -77,7 +107,12 @@ outline-offset: calc(var(--button-border-width) * 2); } -.btn:active, .button:active { transform: scale(99%); } +.btn:active, .button:active { + background: var(--button-active-bg); + border-color: var(--button-active-border-color); + box-shadow: var(--button-active-shadow); + transform: translate(0.125rem, 0.125rem); +} /** * Variants @@ -108,40 +143,48 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; } * like the ones below and changing the color values. */ .btn[data-button-color="secondary"], .button[data-button-color="secondary"] { - --button-bg: var(--color-secondary); - --button-color: var(--color-white); - --button-border-color: var(--color-secondary); - --button-outline-color: oklch(0.48 0.0136 252.2); - --button-hover-bg: var(--color-dark); - --button-hover-border-color: var(--color-dark); - --button-hover-color: var(--color-white); + --button-bg: var(--color-secondary); + --button-color: var(--color-white); + --button-border-color: var(--color-secondary); + --button-outline-color: oklch(0.48 0.0136 252.2); + --button-hover-bg: var(--color-dark); + --button-hover-border-color: var(--color-dark); + --button-hover-color: var(--color-white); + --button-active-bg: var(--color-dark); + --button-active-border-color: var(--color-dark); } .btn[data-button-color="light"], .button[data-button-color="light"] { - --button-bg: var(--color-white); - --button-color: var(--color-dark); - --button-border-color: var(--color-white); - --button-hover-bg: var(--color-dark); - --button-hover-border-color: var(--color-dark); - --button-hover-color: var(--color-white); + --button-bg: var(--color-white); + --button-color: var(--color-dark); + --button-border-color: var(--color-white); + --button-hover-bg: var(--color-dark); + --button-hover-border-color: var(--color-dark); + --button-hover-color: var(--color-white); + --button-active-bg: var(--color-dark); + --button-active-border-color: var(--color-dark); } .btn[data-button-color="white"], .button[data-button-color="white"] { - --button-bg: var(--color-white); - --button-color: var(--color-black); - --button-border-color: var(--color-white); - --button-hover-bg: var(--color-secondary-200); - --button-hover-border-color: var(--color-secondary-200); - --button-hover-color: var(--color-black); + --button-bg: var(--color-white); + --button-color: var(--color-black); + --button-border-color: var(--color-white); + --button-hover-bg: var(--color-secondary-200); + --button-hover-border-color: var(--color-secondary-200); + --button-hover-color: var(--color-black); + --button-active-bg: var(--color-secondary-200); + --button-active-border-color: var(--color-secondary-200); } .btn[data-button-color="black"], .button[data-button-color="black"] { - --button-bg: var(--color-black); - --button-color: var(--color-white); - --button-border-color: var(--color-black); - --button-hover-bg: var(--color-secondary); - --button-hover-border-color: var(--color-secondary); - --button-hover-color: var(--color-dark); + --button-bg: var(--color-black); + --button-color: var(--color-white); + --button-border-color: var(--color-black); + --button-hover-bg: var(--color-secondary); + --button-hover-border-color: var(--color-secondary); + --button-hover-color: var(--color-dark); + --button-active-bg: var(--color-secondary); + --button-active-border-color: var(--color-secondary); } /* Back To Top Button */ diff --git a/views/blocks/contact-block/contact-block.php b/views/blocks/contact-block/contact-block.php index 0247144..7e2abdf 100644 --- a/views/blocks/contact-block/contact-block.php +++ b/views/blocks/contact-block/contact-block.php @@ -41,7 +41,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview ); - + diff --git a/views/blocks/homepage-hero/homepage-hero.php b/views/blocks/homepage-hero/homepage-hero.php index e2fd74e..ce5309c 100644 --- a/views/blocks/homepage-hero/homepage-hero.php +++ b/views/blocks/homepage-hero/homepage-hero.php @@ -61,7 +61,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview ); } ?>