Quick summary

Had a user report that their buttons were missing from multiple sites that are all using the Canape theme which seems to be a new bug.

Steps to reproduce

1. Switch your theme to Canape or Coherent
2. Make sure that the background color of the theme is set to white
3. Add a button block and make sure that the Style is set to Fill without selecting any colors

What you expected to happen

The button should turn to a lighter shade of the color specified by the theme.

What actually happened

The button turns white regardless unless you change the color settings on the individual button (this is also reflected within the Editor as well as you'll see in the video below). You also can't see the button text that you're writing unless the button is not selected.

Context

35886225-hc

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

So far I've found this happens for both Canape and Coherent, though it may be affecting others. Does not seem to be affecting and FSE sites based on my testing but I can't guarantee that.

Browser, operating system and other notes

Consistent across Chrome, Safari, and Firefox

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

Currently the only consistent workaround I've found that is applicable to both Simple and AT sites is that you need to change the Styles option from Fill to Outline. There are CSS options, but it seems like this only works if you select the individual element (I've tried several variations of CSS selectors and couldn't get anything to work unless it was specifically called out for a single element).

Video of CSS issue: