Merge branch 'main' of https://github.com/Shopify/dawn

.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: nanshyuk.myshopify.com
           password: ${{ secrets.SHOP_PASSWORD_OS2 }}

README.md

@@ -22,7 +22,7 @@ Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme develo
 You can find a more detailed version of our theme code principles in the [contribution guide](https://github.com/Shopify/dawn/blob/main/.github/CONTRIBUTING.md#theme-code-principles).
 
 ## Getting started
-We recommend using Dawn as a starting point for theme development. [Learn more on Shopify.dev](https://shopify.dev/themes/getting-started/create). 
+We recommend using Dawn as a starting point for theme development. [Learn more on Shopify.dev](https://shopify.dev/themes/getting-started/create).
 
 > If you're building a theme for the Shopify Theme Store, then you can use Dawn as a starting point. However, the theme that you submit needs to be [substantively different from Dawn](https://shopify.dev/themes/store/requirements#uniqueness) so that it provides added value for merchants. Learn about the [ways that you can use Dawn](https://shopify.dev/themes/tools/dawn#ways-to-use-dawn).
 
@@ -55,7 +55,7 @@ There are a number of really useful tools that the Shopify Themes team uses duri
 
 [Shopify CLI](https://github.com/Shopify/shopify-cli) helps you build Shopify themes faster and is used to automate and enhance your local development workflow. It comes bundled with a suite of commands for developing Shopify themes—everything from working with themes on a Shopify store (e.g. creating, publishing, deleting themes) or launching a development server for local theme development.
 
-You can follow this [quick start guide for theme developers](https://github.com/Shopify/shopify-cli#quick-start-guide-for-theme-developers) to get started.
+You can follow this [quick start guide for theme developers](https://shopify.dev/docs/themes/tools/cli) to get started.
 
 ### Theme Check
 

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;
 }
 

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 } });

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;
 }
 

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%;
 }
 

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;
 }

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;
   }

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;
 }