Active tab color for Donation Block

[hacchism]

Quick summary

On some themes(like Radcliffe 2, Independent Publisher 2), if you choose white as site background, an active tab for Donation Block gets invisible as both background and text color become white.

Steps to reproduce

1. Activate Radcliffe 2 or Independent Publisher 2.
2. Create a new page and set up a Donation Block.
3. Go to Customize > Color & Backgrounds and make sure to set white as site background color.
4. Go back to the page with the Donation Block and click on one of these tabs(One-Time, Monthly or Yearly).

What you expected to happen

The active tab has the default blue color(#027bba).

What actually happened

The active tab gets invisible as both background and text color become white.

Context

No response

Simple, Atomic or both?

No response

Theme-specific issue?

I tried and replicated the issue on Radcliffe 2 and Independent Publisher 2 so far but there might be more themes where the issue occurs.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

We can use this CSS code for users with Premium plan or higher.

.wp-block-jetpack-donations .donations__nav-item.is-active {
    background: #027bba !important;
}

[Greatdane]

@jordesign this is similar to https://github.com/Automattic/themes/issues/5243 - not sure if you want to merge them.

[kosiew]

this is similar to #5243 - not sure if you want to merge them.

5243 pertains to the amount section.

This issue relates to the frequency tab and is different.

[tanjoymor]

Ran into another case of this with both the top active tabs AND the amount tabs not coloring properly. User report: 33485098-hc

CSS to override it that worked:

.wp-block-jetpack-donations .donations__nav-item.is-active {
    background-color: #1a04db !important;
}
.wp-block-jetpack-donations .donations__amount.is-selected {
    background-color: #1a04db !important;
    color: #ffffff !important;
}

[Gustavo-Hilario]

Another report here: 4685108-zd-woothemes

I shared the above CSS code as a workaround for now.

[sstabrizi]

Another report here: 33687757-hc - I also shared CSS to fix the issue.

[mxhassani]

Similar issue in 34534144-hc Theme: Lovecraft by Anders Noren

[happychait]

Another report in 5360759-zen

Suggested the custom CSS workaround.

[Gustavo-Hilario]

Another report: 6264278-hc. Also suggested the custom CSS workaround.

[github-actions[bot]]

Support References

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

• [ ] 4685108-zen
• [ ] 5360759-zen

[happychait]

41316570-hc