Donations block "is-selected" class not grabbing the right color variable on Varia themes

[AtrumGeost]

Quick summary

When having a Varia theme active, the donations block won't provide visual feedback about the selected amount

Steps to reproduce

1. Activate a Varia-child theme like Morden or Shawburn
2. Add a Donations block to a page or post
3. View the page
4. Notice selecting a donation amount doesn't provide any visual feedback

Notice the CSS code:

What you expected to happen

For the box-shadow color to show up:

What actually happened

No visual cue is provided, maybe the block is pointing to the wrong variable (var(--wp-admin-theme-color))?

Context

User report: 4618974-zd-woothemes

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Was able to reproduce on two Varia Child themes:

• Shawburn
• Morden

Browser, operating system and other notes

Tested on:

• Chrome Version 96.0.4664.110 (Official Build) (x86_64)
• Firefox 95.0.1 (64-bit)

macOS Monterey 12.0.1 (21A559)

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

Yes, easy to implement

Workaround details

Add the following CSS code, be sure to replace HEX-COLOR-CODE with the respective color:

/* Make selection visible on the Donations block | XXXXX-zen/hc */
.wp-block-jetpack-donations .donations__amount.is-selected {
  box-shadow: 0 0 0 1px #fff,0 0 0 3px #HEX-COLOR-CODE;
}

[Gustavo-Hilario]

Another user had this issue here: 6085970-zen. I can also reproduce this on FSE themes now. The user thinks the selected amount should be better highlighted, like the active tabs above them. I also agree with them.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 4618974-zen
• [ ] -zen
• [ ] 6085970-zen