Changes the color styles of the sections on the homepage + Adds new Styles

[mghenciu]

Summary

Will affect visual aspect of the product

YES

Screenshots

Before

---

After

Test instructions

• Install Neve FSE on a fresh instance
• Add the build
• see the new background colors for the 3 sections on the homepage (columns with icons, image and text, text and image)
• test the 4 new Styles: Tiber, Hippie green, Blaze orange, Monochrome blue
• test that Hero image has a Duotone filter, which should make the hero look better - even when the color is not matching blue

Closes #71 .

This should fix the issue where in the WP repo, previewing colors will make the Nav Bar look different compared to the Icons section (examples below where it's visible that things can be improved):

Images

___

Closes #71

---

@JohnPixle , when you have some time, please let me know if this is ok - and I'll pass it to testing. 🙇 After this I'll create also a new PR with more color styles and small updates on the current ones.

[github-actions[bot]]

Plugin build for 2a567b367eefb3d26a2ef8f987f792c8f9256554 is ready :bellhop_bell:!

• Download NeveFSE - build 🔗

[JohnPixle]

Thanks @mghenciu this looks good, I just tested it on a taste instance.

I wonder if/how this change affects the existing installations 🤔 . I initially installed the PR in an existing NeveFSE installation/setup but the changes did not reflect in the homepage template. Magic Link.

The patterns were updated fine though, I see they are getting inserted with the right colors. But the homepage template remains the same.

Thanks!

[mghenciu]

@JohnPixle , I finished experimenting here. When you have some time, please take a look. Here's a quick vide with styles:

https://github.com/Codeinwp/neve-fse/assets/52494172/670c2617-37d2-4625-b8c3-34c27fbd290a

Duotone example

https://github.com/Codeinwp/neve-fse/assets/52494172/29204fec-2863-41ce-ae5a-65ae0610b902

Key changes

• added 4 new Styles: Tiber, Hippie green, Blaze orange, Monochrome blue
• added the accent color in the testimonials in this PR, to make the bottom area more expresive
• defined and added Button variations (only) for the new palettes. Didn't touched the old ones (mentioned at the end why)
• added Duotone filter on the Hero area, which should make the hero look better - even when the color is not matching blue

---

Other comments

Other things that I noticed while doing testing, and I think we need to address those (I can make issue if you agree):

• there's no hover or focus state for buttons overall. I tried adding hover using rgba(var(--color), 0.8); but it didn't worked.
• additionally, accessibility wise - for some reason it's not possible now to go through the content on the Homepage. In 2023 theme, it's possible to do this using the Tab key.
• overall, we can have different Styles for Buttons and Typography - which may be nice. But for now I only did this changes on the new palettes, since I am not sure if changing the other ones will affect the user sites. We need to be sure about this, before doing any changes on the existing palettes.

---

For the Dev team before merging

• I need some help with the spacing between blocks in the Editor, somehow I got to the point where the Blocks in the Editor - don't have any space between them (vertically), compared to the live site
• also, since I've added the option to have different button styles for each palette - right now the Outline buttons look smaller in the editor for some reason, and I couldn't fix it. Essentially the buttons (primary and outline) should inherit the default style from theme.json, but if something else is defined in the used Palette -> use the style from there. The last comments from here could give a solution.
• I know it's not recommended, but I did pulled the changes that Cristi made to fix the padding and section height

cc @HardeepAsrani

[JohnPixle]

Thanks for the effort here @mghenciu great work on the design and styles. I noticed the spacing issue as well. It's a deal-breaker, we need some help here.

[irinelenache]

@mghenciu Tested and found only one thing, don't know if it's an actual issue:

• [ ] If i use a darker image as the hero image, the text color there will change to white, which doesn't look ideal when the duotone filter is used https://vertis.d.pr/i/TMFdD7

If it's safe to leave it like this, let me know and i'll move this to Ready to merge 🚀

[JohnPixle]

@irinelenache Thanks for looking into this. Just fyi, the text color behaviour is expected, but thanks for pointing it out. It's built-into the core Cover block and it adjusts the color automatically based on contrast.

For this release, we will not include this PR however, we need a bot more time to experiment with duotones as a concept.

In my instance, I also noticed that despite the fact that I am using theme colors in a duotone filter, the color is not dynamically preserved when switching theme styles. Does it happen to you as well?

[irinelenache]

@JohnPixle Thanks for the clarification 🙏

In my instance, I also noticed that despite the fact that I am using theme colors in a duotone filter, the color is not dynamically preserved when switching theme styles. Does it happen to you as well?

^ I checked now and it happens to me also

[JohnPixle]

@irinelenache ok, good to know. We might need to register our own duotone presets, we will do in the next update. Thanks for confirming 🙏🏻

[mghenciu]

In my instance, I also noticed that despite the fact that I am using theme colors in a duotone filter, the color is not dynamically preserved when switching theme styles. Does it happen to you as well?

When you have some time, @JohnPixle , could you please share a bit more details about this.

I've tried changing the duotone, but I think you are referring to something else:

https://github.com/Codeinwp/neve-fse/assets/52494172/33e9def6-c57f-4b02-afae-f6d0756da4dd

[JohnPixle]

@mghenciu yeah, this does not appear to be working on my end, or Irinel's 🤔 Good to see it works for you at least. I assume we would need to register our own theme-duotones and gradients in order to achieve that.

[irinelenache]

@mghenciu @JohnPixle For me the issue was something like this:

• If i change the duotone colors and select the theme's Background color for Shadows, the color won't dynamically change after switching the style. I would expect to have the background color from the second style that i selected. Here is a video with the behaviour https://vertis.d.pr/v/whX7tX , let me know if i misunderstood anything 🙏

[JohnPixle]

Yeah Irinel, your expectations were right. That was my issue as well, that theme colors in duotones and gradients are not dynamically adapting to the colors of each theme style.

[JohnPixle]

We got it sorted with Mihai eventually, it works at his end because he is using the PR which has a registered theme duotone. In this case it works. We can still wait for this in the next release, as we decided not to apply duotone by default to the homepage hero, but instead experiment with other patterns first.

Thanks!