More style variation for the Theme Styles, especially the ones visible in the first line

[mghenciu]

What problem does this address?

I think we can do a better job in terms of colors, since right now it looks like the Palettes are not even different.

Here are some example of Neve FSE vs Raft vs Fork

---

---

What is your proposed solution?

I think we can customize the backgrounds a bit, in order to make them looks more distinct compared one to another.

[JohnPixle]

I came here to submit the same issue, glad I found this one.

@HardeepAsrani
This does not only happen to the repository, but to the users Site Editor sidebar. We need to show the Accent color in the thumbnail instead of the one we do now (i think it is text color).

I had discussed this with someone from the Dev Team back when we were building the second batch of FSE themes, and I recall that our control was limited. However I think this issue must be taken care of across all our themes, and I see other theme authors making a better ob on this.

What can we do to fix this?
Does this have to do with how we name the colors?
Or the order in which the colors are defined in the code?

UPDATE:
I tried it and it works. It actually depends on the order of the colors in the code.
I placed the Accent color in the third position in the code, and it worked. After that I added Dark BG next.

I believe that for the background of the card it automatically adds the site bg color, and the "Aa" is also the text color defined.

What you guys suggest to display here? Does the Accent Color and Dark BG in the circles look like a good idea?

[HardeepAsrani]

@JohnPixle How will it look with the different sets of variants that we have? Will it look better than it currently does overall?

I also see an issue with the Header background, it looks nice in the default but if you change the variants it does look a bit out of place. Let me know what you think.

[JohnPixle]

@HardeepAsrani
Hm... I am not sure I understand...

I am not suggesting to change any color variable or color logic, just the order of the variables as we define them in the code.

Our objective is to make the most representative use of the two circles that in the Style thumbnail. What color is being shown in the dots has to do with the order in which it is defined in the code:

Right now the accent color is defined at the end:

I managed to display the Accent in the circle of the thumbnail however, when I changed the order.

Does it make sense now?

[HardeepAsrani]

@JohnPixle Thanks, it makes more sense now.

[preda-bogdan]

@JohnPixle I created a PR with the changes you suggested, let me know if the preview is what you expect and if there are other changes required. Thank you!

[JohnPixle]

@preda-bogdan These look great, thanks for taking care of it 👍🏻

[mghenciu]

Nice work, Bogdan.

I have a quick question about this: will the new changes also apply to the WP Styles preview visible in the repo? (attached below)

Currently on the Neve FSE page, those look quite white, but in the preview you showed above - those look more colourful (and that's very good).

[preda-bogdan]

Yes, I believe they use the same mechanism to display the preview there. The preview should be the same.

[pirate-bot]

🎉 This issue has been resolved in version 1.0.5 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀