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?

[iamtakashi]

@getdave Thanks for looking into this issue.

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

I'm not following this bit. I'd expect an element with base should change to whatever colour the current variation specifies for base. Same for contrast. These are the colours specified in the two variations.

Default	Pitch
base #ffffff contrast #000000	base #202124 contrast #e8eaed

In this example, when you switch to the Pitch style variation, the icon background should change to #e8eaed and the icon colour should change to#202124. In fact, the editor suggests that is the intention.

However, the icon and icon background colours remain to be the colours from the default, #ffffff and #000000, because they are in the markup. I don't think this is how it's expected to work.

Editor

Front of the site

[ndiego]

@ndiego ndiego/icon-block#18 in his great plugin. Maybe that's a clue?

Thanks for the shoutout @gyurmey2. I'll take a look at this next week and see if a similar solution could be applied.

[getdave]

@iamtakashi I follow this now. Sorry for confusing things. I will hide my comments.

[gyurmey2]

@ndiego ndiego/icon-block#18 in his great plugin. Maybe that's a clue?

Thanks for the shoutout @gyurmey2. I'll take a look at this next week and see if a similar solution could be applied.

Thank you.

[ajlende]

Reopening since #51020 solved the social icons part, but the duotone part is still relevant.