Duotone and social icons are hard coded as hex values and this is not good when switching style variations

[anarieldesign]

Theme is using predefined color palette. For example primary or accent slug. When I switch to different style variations, block patterns are changing the colors, as I'm using slugs for the colors. But duotone and social icons are hard coded hex colors ("duotone":["#211F1D","#E61D3E"]) and they are always in the same color. I definitely think they should not be hard coded as hex values, as that reduces the creativity of patterns. For example in our latest theme I needed to choose black color for the social icons as if I choose the accent color and switch to other style variation it will not change to the accent color of that style variation. As it's hard coded hex color it always stay in that color and I think this is not good.

Hope this makes sense.

[bph]

Thanks for raising this, @anarieldesign
Do you have some steps on how to reproduce this, or a short video that would illustrate the problem with the Twenty-Twenty-Three theme?

It would be helpful if there were more context available

[ajlende]

This would be solved by #42870, at least the duotone part, but I haven't had the time to work on it recently

[iamtakashi]

I've noticed the issue with social icons. I'll add some visuals to help illustrate the issue. This example uses Twenty Twenty-three, but this is not a theme-specific issue.

Let's say you wanted to have social icons that match the theme colours. So you chose the base for the icon colour and the contrast for the icon background.

Save the page and change the style to the pitch, for example.

You'd expect the colours of the social icons to change to the theme colours in pitch, but it stays the colour of the default style.

The colour setting in the editor says what you expect, but the colours of the icons are stuck with the ones from the default style.

If you re-select the colours again in the editor, it changes the colour, but it shouldn't require you to do so.

[bph]

@iamtakashi Thanks for walking me through the issue. Great illustrations.

[justintadlock]

The social icons color is a longstanding issue:

• Social Icons: Preset colors do not stay in sync with Global Styles presets #35480
• Request: Social Icons: icon color, use variable instead of hex code #36462

[gyurmey2]

@ndiego solved this problem in his great plugin. Maybe that's a clue?

[getdave]

@iamtakashi I did a re-test of this in trunk and it looks like this is in fact working as expected it's just the Theme Stlye Variation names don't match as expected.

In the demo below I repeat your test, selecting Base and Contrast which works well on the default TT3 palette. I then switch to the Pitch Theme Style Variation. The color presets remain as Base and Contrast and the color values of these in the new Style Variation are correctly applied.

However, the new values for Base and Contrast are perhaps not what we'd expect and thus it's black background on black background.

As far as I can see that isn't a failing of the block, but rather the named colors chosen by the given Theme.

Screen.Capture.on.2023-02-22.at.14-33-12.mp4

Under the hood the icon color is stored in block attribute iconColor as base and icon background is stored as attribute iconBackgroundColor as contrast. At render time the color values are retrieved from whatever the presets are for these named colors and applied to the icons.