merge from origin (#1)

* Update 1 translation file (Shopify#2997) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3001) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Image_tag] Update to remove lazy loading and let it automatically decide the best loading strategy (Shopify#3002) * remove lazy loading where necessary to better performance * add fetch priority * [Facets] update filter counts on filter selection (Shopify#2988) * Correct CSS (Shopify#3003) * Check if there is compare_at_price (Shopify#3000) * Update 1 translation file (Shopify#3012) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Facets] fix mobile count update (Shopify#3018) * Update 1 translation file (Shopify#3043) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3044) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Image with text] Add color scheme picker for section wrapper (Shopify#3016) * [Image with text] Add color scheme picker for section wrapper * address review comment about overlap and transparency * Refactor `quick-order-list.css` (Shopify#3006) * Fix Add to Cart error on page load/slower connections (Shopify#3008) * [Facets] dynamic header (Shopify#3048) * Add component-card.css to cart drawer (Shopify#3049) * [Refactoring] Replace loading spinner with snippet (Shopify#2996) * Change spinner for main-cart-items * Change spinner for cart-drawer * remove extra div and change classes * Replace spinner with snippet for pdp and fead prod * Remove unnecessary classes * Add comment for snippet * Change naming for files and css classes * Put back deleted elements * Remove unused classes * Put back loading-overlay for cases when no spinner * Chnage loading-overlay--error name * Minor change in CSS * Move loading-overlay styles to template-collection * Rename component-loading-overlay * Fix bug with overlay and spinner for facets * Remove component-loading-spinner import from files * Use spinner snippet for predictive search * Hide product count when loading for drawer filters * Address feedback. Clean-up. * Minor changes to address feedback * Fix spinner conflict with cart drawer * Address feedabck * Add missing whitespace for if tag * [Sliders] Regression fix. Apply CSS only when necessary in theme editor (Shopify#3070) * [Sliders] Regretion fix. Apply CSS only when necessary in theme editor * change of approach * add comment to explain CSS * Add visual representation for filters (Shopify#3045) * [Facets] update visual representation of facets operators (Shopify#3061) * [Collection template] Product grid color scheme picker (Shopify#3017) * [Collection template] Product grid color scheme picker] * move color setting up in the list * support gradient * [Cart] Add color picker on cart page and in general cart settings (Shopify#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 * [Product] Add color scheme picker (Shopify#3015) * [Product] Add color scheme picker * support gradient * apply background color to be full width * address review comments: color scheme applied to quick add modal and lightbox modal * add color scheme to product availability drawer and move color settings up * fix color classes to work properly with gradients * Add support for gradient on modal * remove console log * [VisualDisplay] bump the active outline width (Shopify#3083) (Shopify#3091) * 12.0.0 Version Bump and release notes (Shopify#3092) * Update 1 translation file (Shopify#3093) * updated code to match new color scheme naming (Shopify#2801) * updated code to match new color scheme naming * removing additional background-1 after rebase * Fixed race condition for cart note updates (Shopify#3125) * [Facets] support dynamic facet lists (Shopify#3123) * Assign font family to input fields (Shopify#2871) * Price per item, Popover and global style bugs (Shopify#2851) * Fix cart submission on Quick Order List (Shopify#2868) * Social icons: Visual fixes (Shopify#2855) * Adjust spacing. * Facebook + Tumblr icon size adjustments. * Update social icon SVGs. * Tidy up new icon sizes again. * Resize icons. * Make spacing slightly smaller. * Make icons larger so they're more similar to the old sizes. * Remove padding to compensate for extra viewbox space. * Try a smaller Twitter icon. * Update snapchat icon. * Resize social links in menu drawer to 44x44 * replace translation string to have the translation visible (Shopify#2869) * B2B compare at price with price range (Shopify#2858) * Add sale badge and price-range for volume-pricing * Add compare_at price to PDP and Feat Prod. * Change opacity to 100% for price per item. * Update the logic * Hide price per item for unavailable variants. * Remove margin for dl. * Refactoring * Correct a mistake in liquid. * Change the JS logic back for updating price per item * Add compare at to prod card. Add style to compare at * Assign font family to input fields. * Update assets/base.css Co-authored-by: Kai <[email protected]> * Use the theme's font style + weight in form elements. --------- Co-authored-by: Sofia Matulis <[email protected]> Co-authored-by: melissaperreault <[email protected]> Co-authored-by: Eugene Kasimov <[email protected]> Co-authored-by: Kai <[email protected]> * Update 1 translation file (Shopify#3155) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3157) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3158) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#3161) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 2 translation files (Shopify#3160) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Applied image shape and ratio to placeholder images (Shopify#2817) added classes and styles to get image shape and image ratio working added styling on portrait placeholders aligned placeholder when in potrait mode applying code review suggestions and removed image-ratio * [Visual Display] Display accurate filter colors when high contrast mode is enabled (Shopify#3165) * Improved country selectors (Shopify#3175) Original PR with review comments -> Shopify#3135 * Update inline quantity error styles. (Shopify#3150) * Update 1 translation file (Shopify#3177) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Variant Picker] Update settings copy (Shopify#3173) * Bring back the lighthouse-ci-action to v1 (Shopify#3181) This will make sure new releases are automatically used. Better for forks as well. * Changed slider to work on tablet for multicolumn (Shopify#3176) * Changed slider to work on tablet for multicolumn * Adjusted to prevent early cutoff on tablet * Adjusted Featured Collection placeholders to work with any number of desktop columns (Shopify#3182) * Adjusted featured collection placeholders to work with any number of desktop columns * [Variant Picker] Add swatch display type (Shopify#3180) * [VariantPicker] Unify variant selects and radios under new component * [VariantPicker] Add swatch settings * [VariantPicker] Move styles to dedicated CSS file * [Variant Picker] Update settings copy * [VariantPicker] Add swatch component * [VariantPicker] Add a swatch to selected dropdown option * [Variant Picker] Update disabled state * [Variant Picker] Swatch snippet * [Variant Picker] Swatch input snippet * [Variant Picker] Tweak swatch border colors * Update swatch border (Shopify#3184) * Update translations: merchant (Shopify#3178) * Update 1 translation file * Update 1 translation file * Update 2 translation files * Update 1 translation file --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Variant Picker] Ensure that swatches wrap correctly (Shopify#3185) * Focus search on country selector open and fix iOS bug (Shopify#3183) * Focus search on country selector open * Set stacking context * Prevent sticky header from hiding when country selector is open (Shopify#3188) * change to 100% (Shopify#3190) * [Variant Picker] Simplify swatch settings (Shopify#3189) * [Variant Picker] Simplify swatch settings * Update 7 translation files * Update 12 translation files * Update 1 translation file --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Escape filter label consistently (Shopify#3192) * Update 1 translation file (Shopify#3202) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <[email protected]> Co-authored-by: Patrick Racicot <[email protected]> Co-authored-by: Eugene Kasimov <[email protected]> Co-authored-by: Andrew Etchen <[email protected]> Co-authored-by: Jason Addleman <[email protected]> Co-authored-by: Sofia Matulis <[email protected]> Co-authored-by: Louisa Goncharenko <[email protected]> Co-authored-by: Tyler Alsbury <[email protected]> Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: melissaperreault <[email protected]> Co-authored-by: Kai <[email protected]> Co-authored-by: Alex Ilea <[email protected]> Co-authored-by: Abdulrahman Hamideh <[email protected]> Co-authored-by: CP Clermont <[email protected]>
hz70ma · Jan 31, 2024 · 181bdeb · 181bdeb
1 parent 2663ae1
commit 181bdeb
Show file tree

Hide file tree

Showing 150 changed files with 3,737 additions and 1,817 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -7,7 +7,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Lighthouse
-        uses: shopify/lighthouse-ci-action@v1.1.1
+        uses: shopify/lighthouse-ci-action@v1
         with:
           store: ${{ secrets.SHOP_STORE_OS2 }}
           password: ${{ secrets.SHOP_PASSWORD_OS2 }}

diff --git a/assets/base.css b/assets/base.css
@@ -1373,7 +1373,7 @@ button.shopify-payment-button__button--unbranded {
   }
 }
 
-.button.loading > .loading-overlay__spinner {
+.button.loading > .loading__spinner {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -1383,11 +1383,11 @@ button.shopify-payment-button__button--unbranded {
   align-items: center;
 }
 
-.button.loading > .loading-overlay__spinner .spinner {
+.button.loading > .loading__spinner .spinner {
   width: fit-content;
 }
 
-.button.loading > .loading-overlay__spinner .path {
+.button.loading > .loading__spinner .path {
   stroke: rgb(var(--color-button-text));
 }
 
@@ -1585,6 +1585,9 @@ details[open] > .share-button__fallback {
   appearance: none;
   background-color: rgb(var(--color-background));
   color: rgb(var(--color-foreground));
+  font-family: var(--font-body-family);
+  font-style: var(--font-body-style);
+  font-weight: var(--font-body-weight);
   font-size: 1.6rem;
   width: 100%;
   box-sizing: border-box;
@@ -1925,6 +1928,9 @@ input[type='checkbox'] {
 
 .quantity__input {
   color: currentColor;
+  font-family: var(--font-body-family);
+  font-style: var(--font-body-style);
+  font-weight: var(--font-body-weight);
   font-size: 1.6rem;
   font-weight: 500;
   opacity: 0.85;
@@ -2021,8 +2027,8 @@ input[type='checkbox'] {
   position: relative;
 }
 
-product-info .loading-overlay:not(.hidden) ~ *,
-.quantity__rules-cart .loading-overlay:not(.hidden) ~ * {
+product-info .loading__spinner:not(.hidden) ~ *,
+.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
   visibility: hidden;
 }
 

diff --git a/assets/cart.js b/assets/cart.js
@@ -170,7 +170,7 @@ class CartItems extends HTMLElement {
         publish(PUB_SUB_EVENTS.cartUpdate, { source: 'cart-items', cartData: parsedState, variantId: variantId });
       })
       .catch(() => {
-        this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden'));
+        this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
         const errors = document.getElementById('cart-errors') || document.getElementById('CartDrawer-CartErrors');
         errors.textContent = window.cartStrings.error;
       })
@@ -203,8 +203,8 @@ class CartItems extends HTMLElement {
     const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
     mainCartItems.classList.add('cart__items--disabled');
 
-    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading-overlay`);
-    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading-overlay`);
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading__spinner`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading__spinner`);
 
     [...cartItemElements, ...cartDrawerItemElements].forEach((overlay) => overlay.classList.remove('hidden'));
 
@@ -216,8 +216,8 @@ class CartItems extends HTMLElement {
     const mainCartItems = document.getElementById('main-cart-items') || document.getElementById('CartDrawer-CartItems');
     mainCartItems.classList.remove('cart__items--disabled');
 
-    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading-overlay`);
-    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading-overlay`);
+    const cartItemElements = this.querySelectorAll(`#CartItem-${line} .loading__spinner`);
+    const cartDrawerItemElements = this.querySelectorAll(`#CartDrawer-Item-${line} .loading__spinner`);
 
     cartItemElements.forEach((overlay) => overlay.classList.add('hidden'));
     cartDrawerItemElements.forEach((overlay) => overlay.classList.add('hidden'));
@@ -234,7 +234,7 @@ if (!customElements.get('cart-note')) {
         super();
 
         this.addEventListener(
-          'change',
+          'input',
           debounce((event) => {
             const body = JSON.stringify({ note: event.target.value });
             fetch(`${routes.cart_update_url}`, { ...fetchConfig(), ...{ body } });

diff --git a/assets/collapsible-content.css b/assets/collapsible-content.css
@@ -70,7 +70,7 @@
   border-top: 0;
 }
 
-.collapsible-row-layout .accordion:not(:first-child):not(.color-background-1) {
+.collapsible-row-layout .accordion:not(:first-child):not(.color-scheme-1) {
   margin-top: 1rem;
 }
 

diff --git a/assets/component-card.css b/assets/component-card.css
@@ -68,7 +68,7 @@
 }
 
 /* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
-.card__inner.color-background-1 {
+.card__inner.color-scheme-1 {
   background: transparent;
 }
 
@@ -300,7 +300,6 @@
 }
 
 .card--standard:not(.card--horizontal) .placeholder-svg {
-  height: auto;
   width: 100%;
 }
 

diff --git a/assets/component-cart-drawer.css b/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 {
@@ -254,7 +249,7 @@ cart-drawer-items {
   margin-bottom: 1.5rem;
 }
 
-.cart-drawer .cart-item .loading-overlay {
+.cart-drawer .cart-item .loading__spinner {
   right: 5px;
   padding-top: 2.5rem;
 }

diff --git a/assets/component-cart-items.css b/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;
@@ -151,7 +155,7 @@ cart-remove-button .icon-remove {
   width: 1.5rem;
 }
 
-.cart-item .loading-overlay {
+.cart-item .loading__spinner {
   top: 0;
   left: auto;
   right: auto;
@@ -160,14 +164,14 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (min-width: 750px) {
-  .cart-item .loading-overlay {
+  .cart-item .loading__spinner {
     right: 0;
     padding-top: 4.5rem;
     bottom: auto;
   }
 }
 
-.cart-item .loading-overlay:not(.hidden)~* {
+.cart-item .loading__spinner:not(.hidden) ~ * {
   visibility: hidden;
 }
 
@@ -180,23 +184,25 @@ cart-remove-button .icon-remove {
 }
 
 .cart-item__error-text {
-  font-size: 1.2rem;
-  line-height: calc(1 + 0.2 / var(--font-body-scale));
+  font-size: 1.3rem;
+  line-height: 1.4;
+  letter-spacing: 0.04rem;
   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;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.7rem;
+  margin-top: 0.25rem;
 }
 
-.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 +216,6 @@ cart-remove-button .icon-remove {
 }
 
 @media screen and (max-width: 749px) {
-
   .cart-items,
   .cart-items thead,
   .cart-items tbody {
@@ -276,7 +281,7 @@ cart-remove-button .icon-remove {
     width: 50%;
   }
 
-  .cart-items th+th {
+  .cart-items th + th {
     padding-left: 4rem;
   }
 
@@ -289,7 +294,7 @@ cart-remove-button .icon-remove {
     display: table-row;
   }
 
-  .cart-item>td+td {
+  .cart-item > td + td {
     padding-left: 4rem;
   }
 
@@ -305,7 +310,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 +320,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 +335,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;
   }

diff --git a/assets/component-cart.css b/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;
 }