Add gradient background settings (#482)

* 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>
Shopify · Aug 31, 2021 · 997f2a1 · 997f2a1
1 parent c124981
commit 997f2a1
Show file tree

Hide file tree

Showing 20 changed files with 143 additions and 27 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -4,25 +4,30 @@
 .color-background-1 {
   --color-foreground: var(--color-base-text);
   --color-background: var(--color-base-background-1);
+  --gradient-background: var(--gradient-base-background-1);
 }
 
 .color-background-2 {
   --color-background: var(--color-base-background-2);
+  --gradient-background: var(--gradient-base-background-2);
 }
 
 .color-inverse {
   --color-foreground: var(--color-base-background-1);
   --color-background: var(--color-base-text);
+  --gradient-background: rgb(var(--color-base-text));
 }
 
 .color-accent-1 {
   --color-foreground: var(--color-base-solid-button-labels);
   --color-background: var(--color-base-accent-1);
+  --gradient-background: var(--gradient-base-accent-1);
 }
 
 .color-accent-2 {
   --color-foreground: var(--color-base-solid-button-labels);
   --color-background: var(--color-base-accent-2);
+  --gradient-background: var(--gradient-base-accent-2);
 }
 
 .color-foreground-outline-button {
@@ -1263,7 +1268,7 @@ details[open] > .share-button__fallback {
 .share-button__button,
 .share-button__fallback button {
   cursor: pointer;
-  background: rgb(var(--color-background));
+  background-color: transparent;
   border: none;
 }
 
@@ -1306,6 +1311,12 @@ details[open] > .share-button__fallback {
   display: none;
 }
 
+.share-button__close,
+.share-button__copy {
+  background-color: transparent;
+  color: rgb(var(--color-foreground));
+}
+
 .share-button__fallback .field__input {
   box-shadow: none;
   text-overflow: ellipsis;
@@ -1714,8 +1725,8 @@ input[type='checkbox'] {
 
 .cart-count-bubble {
   position: absolute;
-  background-color: rgb(var(--color-base-accent-1));
-  color: rgb(var(--color-base-solid-button-labels));
+  background-color: rgb(var(--color-button));
+  color: rgb(var(--color-button-text));
   height: 1.7rem;
   width: 1.7rem;
   border-radius: 100%;
@@ -1803,7 +1814,6 @@ input[type='checkbox'] {
   grid-template-areas: 'left-icon heading icons';
   grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
-  background-color: rgb(var(--color-background));
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
@@ -2244,3 +2254,9 @@ details-disclosure > details {
   color: rgb(var(--color-foreground));
   word-break: break-word;
 }
+
+.gradient {
+  background: var(--color-background);
+  background: var(--gradient-background);
+  background-attachment: fixed;
+}
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -148,7 +148,6 @@ fieldset.product-form__input .form__label {
 .product-form__input input[type='radio'] + label {
   border: 0.1rem solid rgba(var(--color-foreground), 0.55);
   border-radius: 4rem;
-  background-color: rgb(var(--color-background));
   color: rgb(var(--color-foreground));
   display: inline-block;
   margin: 0.7rem 0.5rem 0.2rem 0;

diff --git a/assets/section-password.css b/assets/section-password.css
@@ -69,10 +69,6 @@ body {
   margin-right: 1rem;
 }
 
-.password-modal {
-  background-color: rgb(var(--color-background));
-}
-
 .password-modal__content {
   padding: 4.5rem 3.2rem;
   display: flex;
@@ -303,7 +299,6 @@ details.modal .modal__toggle-open {
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
-  background-color: rgb(var(--color-background));
   color: rgb(var(--color-foreground));
   max-width: var(--page-width);
   margin: 0 auto;

diff --git a/assets/template-collection.css b/assets/template-collection.css
@@ -37,7 +37,7 @@
   display: none;
   width: 100%;
   padding: 0 1.5rem;
-  background-color: rgba(var(--color-background), 0.7);
+  opacity: 0.7;
 }
 
 @media screen and (min-width: 750px) {

diff --git a/assets/template-giftcard.css b/assets/template-giftcard.css
@@ -221,7 +221,7 @@ h2,
 }
 
 .gift-card__number {
-  background-color: rgb(var(--color-base-background-1));
+  background-color: transparent;
   border: none;
   color: rgb(var(--color-base-text));
   font-size: 1.8rem;
@@ -396,3 +396,9 @@ h2,
     display: none;
   }
 }
+
+.gradient {
+  background: var(--color-base-background-1);
+  background: var(--gradient-base-background-1);
+  background-attachment: fixed;
+}
diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -28,12 +28,22 @@
         "label": "t:settings_schema.colors.settings.colors_accent_1.label",
         "info": "t:settings_schema.colors.settings.colors_accent_1.info"
       },
+      {
+        "id": "gradient_accent_1",
+        "type": "color_background",
+        "label": "t:settings_schema.colors.settings.gradient_accent_1.label"
+      },
       {
         "type": "color",
         "id": "colors_accent_2",
         "default": "#334FB4",
         "label": "t:settings_schema.colors.settings.colors_accent_2.label"
       },
+      {
+        "id": "gradient_accent_2",
+        "type": "color_background",
+        "label": "t:settings_schema.colors.settings.gradient_accent_2.label"
+      },
       {
         "type": "header",
         "content": "t:settings_schema.colors.settings.header__2.content"
@@ -58,11 +68,21 @@
         "default": "#FFFFFF",
         "label": "t:settings_schema.colors.settings.colors_background_1.label"
       },
+      {
+        "id": "gradient_background_1",
+        "type": "color_background",
+        "label": "t:settings_schema.colors.settings.gradient_background_1.label"
+      },
       {
         "type": "color",
         "id": "colors_background_2",
         "default": "#F3F3F3",
         "label": "t:settings_schema.colors.settings.colors_background_2.label"
+      },
+      {
+        "id": "gradient_background_2",
+        "type": "color_background",
+        "label": "t:settings_schema.colors.settings.gradient_background_2.label"
       }
     ]
   },

diff --git a/layout/password.liquid b/layout/password.liquid
@@ -55,6 +55,11 @@
         --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
         --payment-terms-background-color: {{ settings.colors_background_1 }};
 
+        --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
+        --gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
+        --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
+        --gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};
+
         --page-width: {{ settings.page_width | divided_by: 10 }}rem;
       }
     {% endstyle %}
@@ -76,7 +81,7 @@
     <script src="{{ 'password-modal.js' | asset_url }}" defer="defer"></script>
   </head>
 
-  <body class="password">
+  <body class="password gradient">
     <a class="skip-to-content-link button visually-hidden" href="#MainContent">
       {{ 'accessibility.skip_to_text' | t }}
     </a>

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -63,6 +63,11 @@
         --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
         --payment-terms-background-color: {{ settings.colors_background_1 }};
 
+        --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
+        --gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
+        --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
+        --gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};
+
         --page-width: {{ settings.page_width | divided_by: 10 }}rem;
       }
 
@@ -115,7 +120,7 @@
     <script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
   </head>
 
-  <body>
+  <body class="gradient">
     <a class="skip-to-content-link button visually-hidden" href="#MainContent">
       {{ "accessibility.skip_to_text" | t }}
     </a>

diff --git a/locales/en.default.schema.json b/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"
+        },
         "colors_accent_2": {
           "label": "Accent 2"
         },
+        "gradient_accent_2": {
+          "label": "Accent 2 gradient"
+        },
         "header__1": {
           "content": "Primary colors"
         },
@@ -31,8 +37,14 @@
         "colors_background_1": {
           "label": "Background 1"
         },
+        "gradient_background_1": {
+          "label": "Background 1 gradient"
+        },
         "colors_background_2": {
           "label": "Background 2"
+        },
+        "gradient_background_2": {
+          "label": "Background 2 gradient"
         }
       }
     },
@@ -746,6 +758,24 @@
     "header": {
       "name": "Header",
       "settings": {
+        "color_scheme": {
+          "options__1": {
+            "label": "Accent 1"
+          },
+          "options__2": {
+            "label": "Accent 2"
+          },
+          "options__3": {
+            "label": "Background 1"
+          },
+          "options__4": {
+            "label": "Background 2"
+          },
+          "options__5": {
+            "label": "Inverse"
+          },
+          "label": "Color scheme"
+        },        
         "logo": {
           "label": "Logo image"
         },

diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
@@ -1,7 +1,7 @@
 {%- for block in section.blocks -%}
   {%- case block.type -%}
     {%- when 'announcement' -%}
-      <div class="announcement-bar color-{{ block.settings.color_scheme }}" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
+      <div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
         {%- if block.settings.text != blank -%}
           {%- if block.settings.link != blank -%}
             <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">

diff --git a/sections/footer.liquid b/sections/footer.liquid
@@ -14,7 +14,7 @@
 <noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
 <noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>
 
-<footer class="footer color-{{ section.settings.color_scheme }}">
+<footer class="footer color-{{ section.settings.color_scheme }} gradient">
   {%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
     <div class="footer__content-top page-width">
       {%- if section.blocks.size > 0 -%}

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -77,7 +77,7 @@
     <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
   </symbol>
 </svg>
-<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
+<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
   <header class="header header--{{ section.settings.logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %}">
     {%- if section.settings.menu != blank -%}
       <header-drawer data-breakpoint="tablet">
@@ -501,7 +501,7 @@
   </header>
 </{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %}>
 
-{%- render 'cart-notification' -%}
+{%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
 
 {% javascript %}
   class StickyHeader extends HTMLElement {
@@ -636,6 +636,34 @@
 {
   "name": "t:sections.header.name",
   "settings": [
+    {
+      "type": "select",
+      "id": "color_scheme",
+      "options": [
+        {
+          "value": "accent-1",
+          "label": "t:sections.header.settings.color_scheme.options__1.label"
+        },
+        {
+          "value": "accent-2",
+          "label": "t:sections.header.settings.color_scheme.options__2.label"
+        },
+        {
+          "value": "background-1",
+          "label": "t:sections.header.settings.color_scheme.options__3.label"
+        },
+        {
+          "value": "background-2",
+          "label": "t:sections.header.settings.color_scheme.options__4.label"
+        },
+        {
+          "value": "inverse",
+          "label": "t:sections.header.settings.color_scheme.options__5.label"
+        }
+      ],
+      "default": "background-1",
+      "label": "t:sections.header.settings.color_scheme.label"
+    },
     {
       "type": "image_picker",
       "id": "logo",

diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
@@ -1,7 +1,7 @@
 {{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
 
 <div class="image-with-text {% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
-  <div class="image-with-text__grid color-{{ section.settings.color_scheme }}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %} grid grid--gapless grid--1-col grid--2-col-tablet">
+  <div class="image-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
     <div class="grid__item">
       <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
         {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}

diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
@@ -461,7 +461,7 @@
   {%- paginate collection.products by section.settings.products_per_page -%}
     {%- if collection.products.size == 0 -%}
       <div class="collection collection--empty page-width" id="main-collection-product-grid" data-id="{{ section.id }}">
-        <div class="loading-overlay"></div>
+        <div class="loading-overlay gradient"></div>
 
         <p class="collection-product-count light" role="status">
           {%- if collection.products_count == collection.all_products_count -%}
@@ -480,7 +480,7 @@
       </div>
     {%- else -%}
       <div class="collection page-width">
-        <div class="loading-overlay"></div>
+        <div class="loading-overlay gradient"></div>
 
         <ul id="main-collection-product-grid" data-id="{{ section.id }}" class="
           grid grid--2-col negative-margin product-grid

diff --git a/sections/main-password-footer.liquid b/sections/main-password-footer.liquid
@@ -1,5 +1,5 @@
 {%- if section.settings.color_scheme == 'background-1' -%}<hr>{%- endif -%}
-<div class="password__footer color-{{ section.settings.color_scheme }}">
+<div class="password__footer color-{{ section.settings.color_scheme }} gradient">
   <ul class="list-social list-unstyled" role="list">
     {%- if settings.social_twitter_link != blank -%}
       <li class="list-social__item">

diff --git a/sections/main-password-header.liquid b/sections/main-password-header.liquid
@@ -1,4 +1,4 @@
-<div class="color-{{ section.settings.color_scheme }}">
+<div class="color-{{ section.settings.color_scheme }} gradient">
   <div class="password-header">
     {%- if section.settings.logo -%}
       <img

diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid
@@ -2,7 +2,7 @@
 {{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
 
 <div class="newsletter center{% if section.settings.full_width == false %} newsletter--narrow page-width{% endif%}">
-  <div class="newsletter__wrapper color-{{ section.settings.color_scheme }}">
+  <div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient">
     {%- for block in section.blocks -%}
       {%- case block.type -%}
         {%- when '@app' -%}