Update Pilgrimage style varation: colors, gradients

[luminuu]

I've updated the style variation to add the green to yellow gradients, as well as update some colors to make use of the tertiary color, that was otherwise not really added before.

I've also removed the background gradient from the site, because I think it will be an issue with the green link colors at the footer with not having enough contrast for readability. I did not add the dotted background from the updated Figma design as I couldn't find a link to this document, but I think the variation works nicely without.

One thing I noticed is that my design is not going to work entirely, as the image block (in the home template at the top) does not have the gradient overlay functionality. I guess converting to a Cover block is not a solution here? I've asked the question already in Slack.

Let me know if we need to adjust anything else.

[luminuu]

Sharing some more thoughts about my style variation here. One thing it did not take into account was the fact that it's currently not possible to set a default gradient, either on the Cover block or on the recently updated Post Featured Image block through theme.json. Here's the open issue from Dec 2020: WordPress/gutenberg#27809

So I'm now wondering if it would be possible to update the theme.json parser to allow default gradients, but I'm worried it won't get into 6.1 because we're already in the Beta phase.

[mikachan]

Thanks for making these updates, I think the colour changes work well.

I've also removed the background gradient from the site, because I think it will be an issue with the green link colors at the footer with not having enough contrast for readability.

This sounds like a good choice to me 👍

I did not add the dotted background from the updated Figma design as I couldn't find a link to this document

@beafialho, is there a link for this design in Figma?

It's such a shame about the image block currently not supporting gradient overlays! Just dropping a link to the issue you created for this: WordPress/gutenberg#44428. I don't think we're going to be able to add any new features to 6.1 as, like you say, we're already in the beta phase. What do you think about using a duotone filter on the images instead? Perhaps just in the meantime until we're able to use the gradient overlays.

I'm happy with the changes you've made here. @beafialho, it would be good to get your sign-off here too 🙇

[beafialho]

@beafialho, is there a link for this design in Figma?

Yes, the dotted background can be found here. And here's the issue that inspired this treatment.

@luminuu what do you think about, instead of the yellow color, using the #9FF9FF blue that's also used in other places such as image overlays and button gradients?

[luminuu]

I've now updated the images and featured images to use the duotone (still a bit bummed the gradients are not possible). I've updated the separators to the blue color but I'd like to leave the yellow as hover/active/focus state for the links, so it's a bit more colorful. This way the yellow doesn't pop too hard on viewing the site, but giving it a nice touch when hovering over a link.

About the background, I guess we'd need an image file and put that under assets but I'm not sure which file/folder structure is the best here.

[mikachan]

These latest changes look good to me.

About the background, I guess we'd need an image file and put that under assets but I'm not sure which file/folder structure is the best here.

I'm not sure we can achieve this exact background without using an image or some CSS. However, I've just pushed a commit that adds a 'dots' gradient, which looks like this:

I've used an additional colour here (#0c0d0d) to try and blend the dots into the gradient background, so it looks like they fade towards the bottom.

Maybe something like this could work?

[mikachan]

@luminuu @beafialho, I wondered if you'd seen the above comment, as I'd like to get these changes into RC 1 if possible.

[beafialho]

Thanks @mikachan, sorry for missing this one! The gradient seems good to me, but the dots are pixelated and appear blurry. Can we change that?

[mikachan]

No worries, thanks for taking a look!

I've had a play with the dots... I think they're now less pixelated:

Before	After

[beafialho]

They do, it seems to look good to me now!