[Cart] Add color picker on cart page and in general cart settings (Sh…

…opify#3021)

* rebase final final

* use the update for the loading spinner

* add color picker for the cart drawer and cart popup

* fix spacing issues on cart page

* add gradient support

* address review comments

* adjust where the class is added. Fix gradient issue

* isolation needed for shadow

* add comment

* Remove unnecessary isolate

* use the isolate class instead

assets/component-cart-drawer.css

@@ -22,7 +22,6 @@
   padding: 0 1.5rem;
   border: 0.1rem solid rgba(var(--color-foreground), 0.2);
   border-right: 0;
-  background-color: rgb(var(--color-background));
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -33,7 +32,6 @@
 .drawer__inner-empty {
   height: 100%;
   padding: 0 1.5rem;
-  background-color: rgb(var(--color-background));
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -72,7 +70,6 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
 
 .drawer__header {
   position: relative;
-  background-color: rgb(var(--color-background));
   padding: 1.5rem 0;
   display: flex;
   justify-content: space-between;
@@ -114,7 +111,6 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
 }
 
 .drawer__footer {
-  background-color: rgb(var(--color-background));
   border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
   padding: 1.5rem 0;
 }
@@ -189,7 +185,6 @@ cart-drawer {
   position: sticky;
   top: 0;
   z-index: 2;
-  background-color: rgb(var(--color-background));
 }
 
 cart-drawer-items {

assets/component-cart-items.css

@@ -1,3 +1,7 @@
+cart-items .title-wrapper-with-link {
+  margin-top: 0;
+}
+
 .cart-items td,
 .cart-items th {
   padding: 0;
@@ -48,12 +52,12 @@
   line-height: calc(1 + 0.4 / var(--font-body-scale));
 }
 
-.cart-item__details>* {
+.cart-item__details > * {
   margin: 0;
   max-width: 30rem;
 }
 
-.cart-item__details>*+* {
+.cart-item__details > * + * {
   margin-top: 0.6rem;
 }
 
@@ -83,7 +87,7 @@
   text-decoration-thickness: 0.2rem;
 }
 
-.cart-item__price-wrapper>* {
+.cart-item__price-wrapper > * {
   display: block;
   margin: 0;
   padding: 0;
@@ -167,7 +171,7 @@ cart-remove-button .icon-remove {
   }
 }
 
-.cart-item .loading__spinner:not(.hidden)~* {
+.cart-item .loading__spinner:not(.hidden) ~ * {
   visibility: hidden;
 }
 
@@ -185,18 +189,18 @@ cart-remove-button .icon-remove {
   order: 1;
 }
 
-.cart-item__error-text+svg {
+.cart-item__error-text + svg {
   flex-shrink: 0;
   width: 1.2rem;
   margin-right: 0.5rem;
   margin-top: 0.1rem;
 }
 
-.cart-item__error-text:empty+svg {
+.cart-item__error-text:empty + svg {
   display: none;
 }
 
-.product-option+.product-option {
+.product-option + .product-option {
   margin-top: 0.4rem;
 }
 
@@ -210,7 +214,6 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (max-width: 749px) {
-
   .cart-items,
   .cart-items thead,
   .cart-items tbody {
@@ -276,7 +279,7 @@ cart-remove-button .icon-remove {
     width: 50%;
   }
 
-  .cart-items th+th {
+  .cart-items th + th {
     padding-left: 4rem;
   }
 
@@ -289,7 +292,7 @@ cart-remove-button .icon-remove {
     display: table-row;
   }
 
-  .cart-item>td+td {
+  .cart-item > td + td {
     padding-left: 4rem;
   }
 
@@ -305,7 +308,7 @@ cart-remove-button .icon-remove {
     margin: 0.5rem 0 0 1.5rem;
   }
 
-  .cart-item__price-wrapper>*:only-child:not(.cart-item__discounted-prices) {
+  .cart-item__price-wrapper > *:only-child:not(.cart-item__discounted-prices) {
     margin-top: 1rem;
   }
 
@@ -315,7 +318,6 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 990px) {
-
   .cart-item .cart-item__quantity,
   .cart-items .cart-items__heading--wide {
     padding-left: 6rem;
@@ -331,10 +333,9 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 750px) {
-
   .cart-items .cart-items__heading--quantity,
   .cart-item .cart-item__quantity,
-  .cart-item__quantity--info quantity-popover>*,
+  .cart-item__quantity--info quantity-popover > *,
   .no-js .cart-item .cart-item__quantity--info {
     padding-left: 5rem;
   }

assets/component-cart.css

@@ -86,8 +86,6 @@ cart-items {
   top: 2.5rem;
 }
 
-
-
 .cart__note label {
   display: flex;
   align-items: flex-end;
@@ -170,6 +168,10 @@ cart-items {
   margin: 0 auto;
 }
 
+.cart__dynamic-checkout-buttons:has(.dynamic-checkout__content:empty) {
+  margin: 0;
+}
+
 .cart__dynamic-checkout-buttons div[role='button'] {
   border-radius: var(--buttons-radius-outset) !important;
 }

config/settings_schema.json

@@ -1457,6 +1457,12 @@
         "id": "cart_drawer_collection",
         "label": "t:settings_schema.cart.settings.cart_drawer.collection.label",
         "info": "t:settings_schema.cart.settings.cart_drawer.collection.info"
+      },
+      {
+        "type": "color_scheme",
+        "id": "cart_color_scheme",
+        "label": "t:sections.all.colors.label",
+        "default": "background-1"
       }
     ]
   }

sections/main-cart-footer.liquid

@@ -17,9 +17,13 @@
   }
 {%- endstyle -%}
 
-<div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">
-  <div>
-    <div class="cart__footer section-{{ section.id }}-padding">
+<div
+  class="gradient color-{{ section.settings.color_scheme }}{% if cart == empty %} is-empty{% endif %}"
+  id="main-cart-footer"
+  data-id="{{ section.id }}"
+>
+  <div class="page-width">
+    <div class="cart__footer isolate section-{{ section.id }}-padding">
       {%- if settings.show_cart_note -%}
         <cart-note class="cart__note field">
           <label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
@@ -133,6 +137,12 @@
   "name": "t:sections.main-cart-footer.name",
   "class": "cart__footer-wrapper",
   "settings": [
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:sections.all.colors.label",
+      "default": "background-1"
+    },
     {
       "type": "range",
       "id": "padding_top",