Add gradient background settings #482

KaichenWang · 2021-08-25T16:01:23Z

Why are these changes introduced?

Enable support for gradient backgrounds

What approach did you take?

Add theme settings to allow gradient (CSS background property)
Add gradient settings (type text) under Theme settings > Theme > Colors and pair with their respective "fallback" color settings:
- Background 1
- Background 2
- Accent 1
- Accent 2
Integrate gradient setting into existing color system
Introduce .gradient utility class. When applied to an element, that element will be styled with a gradient background (if the gradient setting is not blank, otherwise the fallback solid color is used).

Other considerations

Demo links

Checklist

KaichenWang · 2021-08-25T16:01:48Z

templates/index.json

@@ -2,9 +2,6 @@
  "sections": {


revert before merge

KaichenWang · 2021-08-25T16:02:01Z

config/settings_data.json

@@ -1,63 +1,72 @@
 {


revert before merge

bertiful · 2021-08-25T17:23:12Z

assets/base.css

+.gradient {
+  background: var(--color-background);
+  background: var(--gradient-background);
+  background-repeat: no-repeat;


Is this property (and this property in other files) needed?

Good point, it's probably best to not make assumptions about what background-repeat value the merchant wants to use. I will remove this.

Guillaumegranger1 · 2021-08-25T17:30:27Z

The color schemes doesn't seem to all be accurate. The inverse option should apply the Text color to the background and Background 1 solid to foreground elements. Screenshot. Here's an example where the Inverse scheme is working as intended: screenshot
I just saw another element that has the solid fallback when it shouldn't. It's the share button. Screenshot
There's also a hardcoded color I spotted on the copy icon, if we can fix it in this PR? Screenshot
The ring on qty inputs in the cart seems inconsistent with how the solid color shows up. Screenshot
Something happened to the number in the cart badge. It doesn't leverage the proper color, which I think should be the Solid button label. Screenshot

into add-background-setting

KaichenWang · 2021-08-25T20:33:36Z

@Guillaumegranger1 Thanks for reviewing. I addressed the issues with ✅ and pushed the updates to the demo store. I also added a color_scheme setting for header as discussed. For the remaining items:

There's also a hardcoded color I spotted on the copy icon, if we can fix it in this PR?

Still looking into this, but I see different colors

The ring on qty inputs in the cart seems inconsistent with how the solid color shows up.

Could you elaborate a bit more on what the issue is? Our implementation for focus rings uses the solid background color and is therefore visible on gradient backgrounds

Guillaumegranger1 · 2021-08-25T21:14:41Z

• Regarding the ring, this might be fine after all. I wanted to make sure it was working as intended and consistent everywhere 👍
• Regarding the copy-paste icon in the share UI, I would have expected it to be 1 color only, and without background. I think it is a mistake the way it's been exported/implemented. Here's a .zip with a new export. Please @KaichenWang let me know if it helped.
icon-copy-paste.zip

KaichenWang · 2021-08-25T22:05:30Z

@Guillaumegranger1

Regarding the copy-paste icon in the share UI, I would have expected it to be 1 color only, and without background.

I've pushed an update which removes the button background and updates the icon to the correct foreground color

KaichenWang · 2021-08-25T22:11:00Z

@Guillaumegranger1 , Another design decision is that now the header has been given a color_scheme setting, some other elements that are part of header have inherited the same color scheme. This includes:

These can also be set to always follow background-1 solid color instead. Please let me know what would make most sense

Guillaumegranger1 · 2021-08-25T23:47:23Z

Another design decision is that now the header has been given a color_scheme setting,

@KaichenWang Pretty cool!! 😄 It behaves exactly how I like. I think it's perfect that the navigation elements and cart notification inherit the solid fallback.

Let's make sure the default header color scheme is set to Background 1
And then the only remaining thing that I see missing is the number in the cart badge. If I'm not mistaken, its color should be as follow:

• Accent 1: Accent 1
• Accent 2: Accent 2
• Background 1: Solid button label
• Background 2: Background 2
• Inverse: Text

Guillaumegranger1 · 2021-08-30T13:24:16Z

And then the only remaining thing that I see missing is the number in the cart badge. If I'm not mistaken, its color should be as follow:

• Accent 1: Accent 1
• Accent 2: Accent 2
• Background 1: Solid button label
• Background 2: Background 2
• Inverse: Text

☝️ I'm testing the demo regarding the last point and it seems to be fixed now. Screen recording

@KaichenWang are we all set?

into add-background-setting

ludoboludo

Looks pretty cool! We're going to see some interesting backgrounds over time I think (CSS pattern gallery)

A couple questions:

product modals don't have the gradient as a bg, is that intentional? I could see how we don't want to have them everywhere.
color scheme for the image banner isn't pulling from the gradient, should it ?

ludoboludo · 2021-08-30T16:33:42Z

config/settings_schema.json

+      {
+        "id": "gradient_accent_1",
+        "type": "color_background",
+        "label": "t:settings_schema.colors.settings.gradient_accent_1.label"


I feel like linking to some info about how gradients work or what to input could be useful. I see there is a placeholder in the popup but maybe we can link to the docs once they're out or confirm the url for them. Color scheme docs

Agreed. There's still some ongoing discussion regarding merchant-facing copy

sections/header.liquid

sections/image-with-text.liquid

sections/rich-text.liquid

ludoboludo

And then on collage, the placeholder for the collection has a background set to it, so it looks a bit different than the other two cards:

Which highlights the fact that apparently the parent is a bit wider than the actual image: screenshot but that can be a follow up PR/issue

assets/base.css

Co-authored-by: Ludo <ludo.segura@shopify.com>

KaichenWang · 2021-08-30T19:33:34Z

@ludoboludo

And then on collage, the placeholder for the collection has a background set to it, so it looks a bit different than the other two cards

Collage section

The following blocks have a color-scheme setting and therefore have a background that is not identical to the page background:

Collection
Image

The other two types of blocks do not have a color-scheme setting and therefore inherit the page's background:

Product
Video

ludoboludo

🚀

ludoboludo · 2021-08-30T21:03:25Z

locales/en.default.schema.json

@@ -11,9 +11,15 @@
          "label": "Accent 1",
          "info": "Used for solid button background."
        },
+        "gradient_accent_1": {
+          "label": "Accent 1 gradient"
+        },


The look of it is a bit cluttered. Would be nice to have some kinda of hierarchy/grouping. But for future polish/improvement. Also it looks like the look of the settings has been updated 🤔 (not here but on the theme editor level)
screenshot

bertiful · 2021-08-30T21:15:20Z

locales/en.default.schema.json

@@ -724,6 +736,24 @@
    "header": {
      "name": "Header",
      "settings": {
+        "color_scheme": {
+          "options__1": {
+            "label": "Accent 1"


Not urgent: there's quite a few instances of these colours throughout Dawn and each setting has its own translations—we can clean this up by referencing the same translation.

* Add settings for gradients as text. Integrate setting into color system * Set giftcard number bg to transparent * Update temporary settings * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Remove background-repeat property * Fix color-inverse color scheme. Fix cart icon bubble colors * Add color scheme setting for header * Update from Shopify for theme dawn/add-background-setting * Update share button colors * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Update from Shopify for theme dawn/add-background-setting * Update to color_background setting type for gradient colors * Revert 8046f7d * Revert setting changes from Shopify platform * Update sections/rich-text.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> * Update sections/image-with-text.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> * Update sections/header.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> * Set transparent background color to share Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com>

KaichenWang added 3 commits August 25, 2021 11:16

Add settings for gradients as text. Integrate setting into color system

c705e7f

Set giftcard number bg to transparent

e529c70

Update temporary settings

c09e4d8

KaichenWang commented Aug 25, 2021

View reviewed changes

templates/index.json Outdated

@@ -2,9 +2,6 @@

"sections": {

Copy link

Contributor Author

KaichenWang Aug 25, 2021 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert before merge

KaichenWang commented Aug 25, 2021

View reviewed changes

config/settings_data.json Outdated

@@ -1,63 +1,72 @@

{

Copy link

Contributor Author

KaichenWang Aug 25, 2021 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert before merge

KaichenWang requested a review from Guillaumegranger1 August 25, 2021 16:02

bertiful previously approved these changes Aug 25, 2021

View reviewed changes

Update from Shopify for theme dawn/add-background-setting

1aa5bbc

shopify bot dismissed bertiful’s stale review via 1aa5bbc August 25, 2021 17:38

ghost added the cla-needed label Aug 25, 2021

shopify bot and others added 10 commits August 25, 2021 17:38

Update from Shopify for theme dawn/add-background-setting

6d53baa

Update from Shopify for theme dawn/add-background-setting

efd4eeb

Update from Shopify for theme dawn/add-background-setting

cf88d88

Update from Shopify for theme dawn/add-background-setting

6f101a0

Update from Shopify for theme dawn/add-background-setting

706145a

Remove background-repeat property

930bf56

Merge branch 'add-background-setting' of https://github.com/Shopify/dawn

4c359b4

into add-background-setting

Fix color-inverse color scheme. Fix cart icon bubble colors

2948a35

Add color scheme setting for header

a6b6c05

Update from Shopify for theme dawn/add-background-setting

8046f7d

Update share button colors

10110aa

shopify bot added 3 commits August 25, 2021 23:30

Update from Shopify for theme dawn/add-background-setting

a7e8c51

Update from Shopify for theme dawn/add-background-setting

f9aed7d

Update from Shopify for theme dawn/add-background-setting

80e7693

shopify bot added 2 commits August 25, 2021 23:58

Update from Shopify for theme dawn/add-background-setting

58e0fae

Update from Shopify for theme dawn/add-background-setting

9f36f7a

Guillaumegranger1 previously approved these changes Aug 30, 2021

View reviewed changes

KaichenWang added 2 commits August 30, 2021 09:42

Fix merge conflict in header.liquid

4ade8e1

Merge branch 'add-background-setting' of https://github.com/Shopify/dawn

0d3acf1

into add-background-setting

KaichenWang dismissed Guillaumegranger1’s stale review via 0d3acf1 August 30, 2021 13:44

KaichenWang added 3 commits August 30, 2021 10:08

Update to color_background setting type for gradient colors

136298a

Revert 8046f7d

a67899a

Revert setting changes from Shopify platform

cc35cfa

bertiful previously approved these changes Aug 30, 2021

View reviewed changes

ludoboludo self-requested a review August 30, 2021 16:17

ludoboludo reviewed Aug 30, 2021

View reviewed changes

assets/base.css Show resolved Hide resolved

Update sections/rich-text.liquid

9d9fc9f

Co-authored-by: Ludo <ludo.segura@shopify.com>

KaichenWang dismissed bertiful’s stale review via 9d9fc9f August 30, 2021 19:02

KaichenWang and others added 2 commits August 30, 2021 15:03

Update sections/image-with-text.liquid

1b4b32a

Co-authored-by: Ludo <ludo.segura@shopify.com>

Update sections/header.liquid

167ee3f

Co-authored-by: Ludo <ludo.segura@shopify.com>

Set transparent background color to share

a2727ed

KaichenWang requested a review from ludoboludo August 30, 2021 20:10

ludoboludo approved these changes Aug 30, 2021

View reviewed changes

bertiful approved these changes Aug 30, 2021

View reviewed changes

KaichenWang merged commit 997f2a1 into main Aug 31, 2021

KaichenWang deleted the add-background-setting branch August 31, 2021 03:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add gradient background settings #482

Add gradient background settings #482

KaichenWang commented Aug 25, 2021 •

edited

Loading

KaichenWang Aug 25, 2021 •

edited

Loading

KaichenWang Aug 25, 2021 •

edited

Loading

bertiful Aug 25, 2021

KaichenWang Aug 25, 2021

Guillaumegranger1 commented Aug 25, 2021 •

edited by KaichenWang

Loading

KaichenWang commented Aug 25, 2021 •

edited

Loading

Guillaumegranger1 commented Aug 25, 2021

KaichenWang commented Aug 25, 2021

KaichenWang commented Aug 25, 2021 •

edited

Loading

Guillaumegranger1 commented Aug 25, 2021 •

edited by KaichenWang

Loading

Guillaumegranger1 commented Aug 30, 2021

ludoboludo left a comment

ludoboludo Aug 30, 2021

KaichenWang Aug 30, 2021

ludoboludo left a comment

KaichenWang commented Aug 30, 2021 •

edited

Loading

ludoboludo left a comment

ludoboludo Aug 30, 2021 •

edited

Loading

bertiful Aug 30, 2021

Add gradient background settings #482

Add gradient background settings #482

Conversation

KaichenWang commented Aug 25, 2021 • edited Loading

KaichenWang Aug 25, 2021 • edited Loading

Choose a reason for hiding this comment

KaichenWang Aug 25, 2021 • edited Loading

Choose a reason for hiding this comment

bertiful Aug 25, 2021

Choose a reason for hiding this comment

KaichenWang Aug 25, 2021

Choose a reason for hiding this comment

Guillaumegranger1 commented Aug 25, 2021 • edited by KaichenWang Loading

KaichenWang commented Aug 25, 2021 • edited Loading

Guillaumegranger1 commented Aug 25, 2021

KaichenWang commented Aug 25, 2021

KaichenWang commented Aug 25, 2021 • edited Loading

Guillaumegranger1 commented Aug 25, 2021 • edited by KaichenWang Loading

Guillaumegranger1 commented Aug 30, 2021

ludoboludo left a comment

Choose a reason for hiding this comment

ludoboludo Aug 30, 2021

Choose a reason for hiding this comment

KaichenWang Aug 30, 2021

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

KaichenWang commented Aug 30, 2021 • edited Loading

Collage section

ludoboludo left a comment

Choose a reason for hiding this comment

ludoboludo Aug 30, 2021 • edited Loading

Choose a reason for hiding this comment

bertiful Aug 30, 2021

Choose a reason for hiding this comment

KaichenWang commented Aug 25, 2021 •

edited

Loading

KaichenWang Aug 25, 2021 •

edited

Loading

KaichenWang Aug 25, 2021 •

edited

Loading

Guillaumegranger1 commented Aug 25, 2021 •

edited by KaichenWang

Loading

KaichenWang commented Aug 25, 2021 •

edited

Loading

KaichenWang commented Aug 25, 2021 •

edited

Loading

Guillaumegranger1 commented Aug 25, 2021 •

edited by KaichenWang

Loading

KaichenWang commented Aug 30, 2021 •

edited

Loading

ludoboludo Aug 30, 2021 •

edited

Loading