[Image with text] Add color scheme picker for section wrapper

[ludoboludo]

PR Summary:

Add color picker for the image with text section

Why are these changes introduced?

The image with text section has historically only offered a color picker for the content container and the media but not for the whole section.
This PR aim to change that and match the experience you're getting on the Multirow section where you have two color pickers.

What approach did you take?

Had to add some element to wrap the content that doesn't get the page-width class applied to it.

Visual impact on existing themes

This enables something new where the whole image with text section can get a background color scheme.

Testing steps/scenarios

• Use the image with text section on different templates
• With different color scheme backgrounds and color schemes for the content container
• Test multirow as well with a gradient background on the section with a png image (the CSS styling impacts it)

Demo links

• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[kmeleta]

Looks pretty good. Found a couple cases so far that we should try and clean up if we can, but most of the main use cases are accounted for I think.

[kmeleta]

The trouble with excluding the color classes entirely, rather than relying on the "fake" transparent effect of using the same color scheme classes is that is can't hide overlaps and shadows when needed. I know with the motion side-effects we want to need to rely on true transparency more though.

This one with the overlap layout I think we probably need to address.

Some others involving shadows like this have always been more edge casey so I wouldn't push back too hard on these regressions if our primary use cases are behaving correctly.

[ludoboludo]

I think except the first one, I can replicate the rest of them on /main today 🤔 I pushed a fix for the first scenario, good catch 👍

[eugenekasimov]

Hey Ludo, I didn't have time today for detailed tests, I'll continue tmr. One thing, however, brought my attention. Won't we confuse users with swapping settings names? Before, the setting for the color scheme was named Color scheme and as you mentioned in the description it used to be changing just content and media. Now this setting changes the background and for the content and media there is a new name Container color scheme? 🤔 I was confused with that and I don't associate a name container with content but I may be wrong. It's just thoughts.

[ludoboludo]

Hey Ludo, I didn't have time today for detailed tests, I'll continue tmr. One thing, however, brought my attention. Won't we confuse users with swapping settings names? Before, the setting for the color scheme was named Color scheme and as you mentioned in the description it used to be changing just content and media. Now this setting changes the background and for the content and media there is a new name Container color scheme? 🤔 I was confused with that and I don't associate a name container with content but I may be wrong. It's just thoughts.

YEah I agree, it's a little confusing. The reason I didn't change it is because this is the way it's labeled for the multirow section as well so I wanted to reuse the same pattern.

[melissaperreault]

You had a good call @ludoboludo for keeping consistency between other section settings. We do have a theme setting category named "Content container" and we use "container" in various places to refer to the content box. Also, merchants have a direct view of where this setting will apply as they play with the options in the list. Not too concerned for now, maybe @katycobb can chime in for future iterations.

[kmeleta]

lgtm. I'm also in favor keeping the setting labels consistent with what we do on multirow, but would of course defer to Meli/Katy.

[katycobb]

Hey friends! Agree the labeling here isn't a dealbreaker to shipping.

My quick POV is that if there's just one color picker, call it Color scheme. But if we have more than one, we might want to add differentiators to both to describe what each applies to.

Here I suggest updating Color scheme to Background color scheme to be more specific about the difference between the two pickers. Container color scheme works, and is consistent with how we label other settings that apply to content containers.

Happy to do this (and multirow) in a followup though 👍

[eugenekasimov]

Everything looks good to me. I like a name suggestion Katy mentioned here, but it's not a blocker for me 👍

[danielvan]

Hey friends! Agree the labeling here isn't a dealbreaker to shipping.

My quick POV is that if there's just one color picker, call it Color scheme. But if we have more than one, we might want to add differentiators to both to describe what each applies to.

Here I suggest updating Color scheme to Background color scheme to be more specific about the difference between the two pickers. Container color scheme works, and is consistent with how we label other settings that apply to content containers.

Happy to do this (and multirow) in a followup though 👍

+1 here.