Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🐞 fix: Update button styles for improved accessibility and consistency
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-06-16 18:44:35 -05:00
parent 018ca3a9ae
commit e5f3ac1947
3 changed files with 85 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/blocks/buttons.css
+83 -40
View File
@@ -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 */
views/blocks/contact-block/contact-block.php
+1 -1
View File
@@ -41,7 +41,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<?php endif; ?>
<?php if ( $button ) : ?>
<a class="contact-block__cta button text-white!" href="<?php echo esc_url( $button['url'] ?? '#' ); ?>" title="<?php echo esc_attr( $button['title'] ?? '' ); ?>" aria-label="<?php echo esc_attr( $button['title'] ?? '' ); ?>" data-button-color="secondary" data-button-variant="outline"><?php echo esc_html( $button['title'] ); ?></a>
<a class="contact-block__cta button dark" href="<?php echo esc_url( $button['url'] ?? '#' ); ?>" title="<?php echo esc_attr( $button['title'] ?? '' ); ?>" aria-label="<?php echo esc_attr( $button['title'] ?? '' ); ?>" data-button-color="secondary" data-button-variant="outline"><?php echo esc_html( $button['title'] ); ?></a>
<?php endif; ?>
</div>
</section>
views/blocks/homepage-hero/homepage-hero.php
+1 -1
View File
@@ -61,7 +61,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
}
?>
<x-button
btnclasses="button text-center min-w-32"
btnclasses="button text-center min-w-32 dark"
element="a"
url="<?php echo esc_url( $ctaURL ); ?>"
target="<?php echo esc_attr( $ctaTarget ); ?>"