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 <[email protected]> * Update sections/image-with-text.liquid Co-authored-by: Ludo <[email protected]> * Update sections/header.liquid Co-authored-by: Ludo <[email protected]> * 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 <[email protected]>
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' -%}