Blank Canvas: Issues with button hover color when using custom colors

[alaczek]

I came across this issue while working on Pollard starter design which I'm switching over to Blank Canvas. I noticed with custom Background and Secondary color the buttons can become transparent on hover.

Steps to replicate

1. On a site running Blank Canvas add the code below to a post or a page.
2. Open up the Customizer > Colors & Backgrounds. Change the Background to any color (in my testing both dark and light colors cause the bug, I used #fad2c4) and Secondary color to #010101.
3. Save and close the Customizer.
4. Preview the site and hover over the button. Note the button's background is transparent.

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":4,"column1DesktopOffset":4,"column1TabletSpan":4,"column1TabletOffset":2,"column1MobileSpan":4,"column2DesktopOffset":8,"column2TabletOffset":13,"className":"column1-desktop-grid__span-4 column1-desktop-grid__start-5 column1-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__start-3 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-4 column1-desktop-grid__start-5 column1-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__start-3 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:group {"className":"margin-top-none","style":{"color":{"background":"#ffffff"}}} -->
<div class="wp-block-group margin-top-none has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"className":"margin-bottom-none"} -->
<h2 class="margin-bottom-none"><strong>Chief Development Officer at Birth Charity</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"margin-top-half","style":{"typography":{"fontSize":"18px"}}} -->
<p class="margin-top-half" style="font-size:18px">Hi! I’m a lead strategist for growing sustainable revenue streams for integrated fundraising.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"borderRadius":4,"style":{"color":{"text":"#ffffff"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color" style="border-radius:4px;color:#ffffff">Get in touch</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:social-links {"align":"center"} -->
<ul class="wp-block-social-links aligncenter"><!-- wp:social-link {"url":"https://linkedin.com/","service":"linkedin"} /-->

<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->

<!-- wp:social-link {"url":"https://instagram.com/","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div></div>
<!-- /wp:group --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

[eduardozulian]

I've been using the following CSS code as a workaround:

button:not(.has-background):hover, .button:not(.has-background):hover, input:not(.has-background):hover[type="submit"], .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus, .button:not(.has-background):focus, input:not(.has-background):focus[type="submit"], .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus, .button:not(.has-background).has-focus, input:not(.has-background).has-focus[type="submit"], .a8c-posts-list__view-all:not(.has-background).has-focus {
  background: var(--global--color-foreground);
}

[rickmgithub]

Seeing the same thing on Exford.

Site is free site so no CSS workaround

5351140-zd