Multiple Themes: Tertiary color backgrounds are not visible on the site.

[devNigel]

Quick summary

On theme Stow, when Tertiary color is set as the background color, the background color is not working. I was able to reproduce this on Simple and AT sites.

I shared a workaround and let the user know that we will update them once it is fixed.

Steps to reproduce

1. Activate Stow theme.
2. On the page editor, add a paragraph block.
3. Apply the same color set as Tertiary color in Customize > Colors > Tertiary color as the background color of the block.
4. Preview it.
5. You will see the background color is something else.

What you expected to happen

The background color seen in editor should be visible on live page as well.the

What actually happened

The background color on the live page was different.

Context

User report: 4803117-zen

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Stow

I could not find other themes with tertiary color setting.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

Use a slightly different color code that looks similar to Tertiary color.

[jordesign]

I've found this to be the case on Hever as well. but not for Varia itself - so it seems specific to some child themes.
One thing I noted is that Varia does not include a Tertiary color itself - but the child themes do.

When the color is applied - a class is added to the element:

• has-tertiary-background-color has-background, or
• has-tertiary-color has-text-color

But then no color declaration comes in the CSS.
Maybe related to this PR: #3223

Ineraction: #4803951-zen

[Nic-Sevic]

another instance here: 4805667-zd-woothemes
this time with the columns block

[AMcGrady]

Another instance here: 4809339-zd

Paragraph block background color not working on the Hever theme.

[AMcGrady]

Reported here: 4809827-zd
Blank Canvas theme

[AMcGrady]

Possibly related:
#4639
?

[poeticabdul]

Reported here 33966058-hc for Rockfield theme

[Gustavo-Hilario]

Another report here: 4822858-zen

[metabreakr]

Also reported in the forum (Hever theme): https://wordpress.com/forums/topic/%e7%ac%ac%e4%b8%89%e4%b8%bb%e9%a2%98%e8%89%b2%e5%a4%b1%e6%95%88-tertiary-theme-color-doesnt-work-2/?view=all

[mriyazuddin]

Another one here: 4827587-zd

[syds87]

Another one here (Blank Canvas theme): 4836622-zen

[ccwalburn]

Another one here: 4838881-zen
Theme: Stratford
I gave this user some CSS as a workaround:

.has-tertiary-background-color {
    background-color: #ef7f16;
}

[Robertght]

In my case(#4843484-zen) I used replaced C5C5C5 with c5c5c5 and it worked.

[jp-imagines]

Another report in 4879648-zd-woothemes
Theme: Hever

This CSS should fix it:

.has-tertiary-background-color {
    background: var(--wp--preset--color--tertiary);
}

...but this user is on a Personal plan. Showed them how to switch to a similar color (#C4C4C4) instead. (Robert's suggestion of #c5c5c5 instead of #C5C5C5 didn't work for me.)

[KokkieH]

Another report for this in Hever, though with the Text Color set to the tertiary color, in a table block.

https://wordpress.com/forums/topic/word-color-from-white-turn-black/?view=all