From dca32e43dcbee8c458c7b58ea06df770a57ede8b Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Mon, 12 Aug 2024 18:07:46 +0700
Subject: [PATCH 01/12] Update theme colors config

---
 app/weaverse/schema.server.ts | 349 +++++++++++++++-------------------
 1 file changed, 151 insertions(+), 198 deletions(-)

diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index a1afb0e1..805874ac 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -158,19 +158,7 @@ export let themeSchema: HydrogenThemeSchema = {
             step: 1,
             unit: "px",
           },
-          defaultValue: 48,
-        },
-        {
-          type: "color",
-          label: "Text color",
-          name: "announcementBarTextColor",
-          defaultValue: "#ffffff",
-        },
-        {
-          type: "color",
-          label: "Background color",
-          name: "announcementBarBgColor",
-          defaultValue: "#000000",
+          defaultValue: 36,
         },
         {
           type: "switch",
@@ -265,69 +253,176 @@ export let themeSchema: HydrogenThemeSchema = {
         },
       ],
     },
-
     {
       group: "Colors",
       inputs: [
+        {
+          type: "heading",
+          label: "General",
+        },
         {
           type: "color",
           label: "Background",
           name: "colorBackground",
           defaultValue: "#ffffff",
         },
-        {
-          type: "color",
-          label: "Inverse background",
-          name: "colorInverseBackground",
-          defaultValue: "#0f0f0f",
-        },
         {
           type: "color",
           label: "Text",
           name: "colorText",
           defaultValue: "#0F0F0F",
         },
-        // {
-        //   type: "color",
-        //   label: "Inverse text",
-        //   name: "colorInverseText",
-        //   defaultValue: "#ffffff",
-        // },
-        // {
-        //   type: "color",
-        //   label: "Button",
-        //   name: "colorButton",
-        //   defaultValue: "#0F0F0F",
-        // },
-        // {
-        //   type: "color",
-        //   label: "Button text",
-        //   name: "colorButtonText",
-        //   defaultValue: "#FFF",
-        // },
-        // {
-        //   type: "color",
-        //   label: "Inverse button",
-        //   name: "colorInverseButton",
-        //   defaultValue: "#FFF",
-        // },
-        // {
-        //   type: "color",
-        //   label: "Inverse button text",
-        //   name: "colorInverseButtonText",
-        //   defaultValue: "#0F0F0F",
-        // },
         {
           type: "color",
-          label: "Sale",
-          name: "colorSale",
-          defaultValue: "#DE4B4B",
+          label: "Lines and borders",
+          name: "colorLines",
+          defaultValue: "#a8a29e",
+        },
+        {
+          type: "heading",
+          label: "Announcement bar",
+        },
+        {
+          type: "color",
+          label: "Announcement text",
+          name: "announcementBarTextColor",
+          defaultValue: "#ffffff",
+        },
+        {
+          type: "color",
+          label: "Announcement background",
+          name: "announcementBarBgColor",
+          defaultValue: "#000000",
+        },
+        {
+          type: "heading",
+          label: "Header",
+        },
+        {
+          type: "color",
+          label: "Header background",
+          name: "headerBgColor",
+          defaultValue: "#ffffff",
+        },
+        {
+          type: "color",
+          label: "Header text",
+          name: "headerText",
+          defaultValue: "#000000",
+        },
+        {
+          type: "color",
+          label: "Transparent header text",
+          name: "transparentHeaderText",
+          defaultValue: "#000000",
+        },
+        {
+          type: "heading",
+          label: "Footer",
+        },
+        {
+          type: "color",
+          label: "Footer background",
+          name: "footerBgColor",
+          defaultValue: "#000000",
+        },
+        {
+          type: "color",
+          label: "Footer text",
+          name: "footerText",
+          defaultValue: "#ffffff",
+        },
+        {
+          type: "heading",
+          label: "Primary button",
+        },
+        {
+          type: "color",
+          label: "Background color",
+          name: "buttonPrimaryBg",
+          defaultValue: "#000000",
+        },
+        {
+          type: "color",
+          label: "Text color",
+          name: "buttonPrimaryColor",
+          defaultValue: "#ffffff",
+        },
+        {
+          type: "heading",
+          label: "Secondary button",
+        },
+        {
+          type: "color",
+          label: "Background color",
+          name: "buttonSecondaryBg",
+          defaultValue: "#ffffff",
+        },
+        {
+          type: "color",
+          label: "Text color",
+          name: "buttonSecondaryColor",
+          defaultValue: "#000000",
+        },
+        {
+          type: "heading",
+          label: "Outline button",
+        },
+        {
+          type: "color",
+          label: "Text and border",
+          name: "buttonOutlineTextAndBorder",
+          defaultValue: "#000000",
+        },
+        {
+          type: "heading",
+          label: "Drawers and popovers",
+        },
+        {
+          type: "color",
+          label: "Background color",
+          name: "drawerBg",
+          defaultValue: "#ffffff",
+        },
+        {
+          type: "heading",
+          label: "Product",
+        },
+        {
+          type: "color",
+          label: "Compare price text",
+          name: "comparePriceText",
+          defaultValue: "#737373",
+        },
+        {
+          type: "color",
+          label: "Sale tags",
+          name: "saleTag",
+          defaultValue: "#dc2626",
+        },
+        {
+          type: "color",
+          label: "New tags",
+          name: "newTag",
+          defaultValue: "#818cf8",
+        },
+        {
+          type: "color",
+          label: "Other tags",
+          name: "otherTag",
+          defaultValue: "#1e293b",
         },
         {
           type: "color",
-          label: "Border",
-          name: "colorBorder",
-          defaultValue: "#696662",
+          label: "Sold out & unavailable",
+          name: "soldOutAndUnavailable",
+          defaultValue: "#d4d4d4",
+        },
+        {
+          type: "color",
+          label: "Star rating",
+          name: "starRating",
+          defaultValue: "#fde047",
         },
       ],
     },
@@ -432,147 +527,6 @@ export let themeSchema: HydrogenThemeSchema = {
         },
       ],
     },
-    {
-      group: "Buttons",
-      inputs: [
-        {
-          type: "heading",
-          label: "Primary",
-        },
-        {
-          type: "color",
-          label: "Background color",
-          name: "buttonPrimaryBg",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Text color",
-          name: "buttonPrimaryColor",
-          defaultValue: "#ffffff",
-        },
-        {
-          type: "color",
-          label: "Border color",
-          name: "buttonPrimaryBorder",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Background color (hover)",
-          name: "buttonPrimaryBgHover",
-          defaultValue: "#ffffff",
-        },
-        {
-          type: "color",
-          label: "Text color (hover)",
-          name: "buttonPrimaryColorHover",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Border color (hover)",
-          name: "buttonPrimaryBorderHover",
-          defaultValue: "#000000",
-        },
-        {
-          type: "heading",
-          label: "Secondary",
-        },
-        {
-          type: "color",
-          label: "Background color",
-          name: "buttonSecondaryBg",
-          defaultValue: "#ffffff",
-        },
-        {
-          type: "color",
-          label: "Text color",
-          name: "buttonSecondaryColor",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Border color",
-          name: "buttonSecondaryBorder",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Background color (hover)",
-          name: "buttonSecondaryBgHover",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Text color (hover)",
-          name: "buttonSecondaryColorHover",
-          defaultValue: "#ffffff",
-        },
-        {
-          type: "color",
-          label: "Border color (hover)",
-          name: "buttonSecondaryBorderHover",
-          defaultValue: "#000000",
-        },
-        {
-          type: "heading",
-          label: "Outline",
-        },
-        {
-          type: "color",
-          label: "Background color",
-          name: "buttonOutlineBg",
-          defaultValue: "#0000000000",
-        },
-        {
-          type: "color",
-          label: "Text color",
-          name: "buttonOutlineColor",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Border color",
-          name: "buttonOutlineBorder",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Background color (hover)",
-          name: "buttonOutlineBgHover",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Text color (hover)",
-          name: "buttonOutlineColorHover",
-          defaultValue: "#ffffff",
-        },
-        {
-          type: "color",
-          label: "Border color (hover)",
-          name: "buttonOutlineBorderHover",
-          defaultValue: "#000000",
-        },
-        {
-          type: "heading",
-          label: "Link",
-        },
-        {
-          type: "color",
-          label: "Text color",
-          name: "buttonLinkColor",
-          defaultValue: "#000000",
-        },
-        {
-          type: "color",
-          label: "Text color (hover)",
-          name: "buttonLinkColorHover",
-          defaultValue: "#000000",
-        },
-      ],
-    },
     {
       group: "Product swatches",
       inputs: [
@@ -684,7 +638,6 @@ export let themeSchema: HydrogenThemeSchema = {
         },
       ],
     },
-
     {
       group: "Footer",
       inputs: [

From 60affa8f5e77780502aafb55929e8b25d8355478 Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Mon, 12 Aug 2024 18:10:41 +0700
Subject: [PATCH 02/12] Simplify ids for sample swatches values

---
 app/weaverse/schema.server.ts | 76 ++++++++++-------------------------
 1 file changed, 21 insertions(+), 55 deletions(-)

diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index 6485b218..c974014a 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -2,40 +2,6 @@ import type { HydrogenThemeSchema } from "@weaverse/hydrogen";
 import type { SwatchesConfigs } from "~/types/weaverse-hydrogen";
 import pkg from "../../package.json";
 
-let uuid = () => {
-  let lut = [];
-  for (let i = 0; i < 256; i++) {
-    lut[i] = (i < 16 ? "0" : "") + i.toString(16);
-  }
-
-  let d0 = (Math.random() * 0xffffffff) | 0;
-  let d1 = (Math.random() * 0xffffffff) | 0;
-  let d2 = (Math.random() * 0xffffffff) | 0;
-  let d3 = (Math.random() * 0xffffffff) | 0;
-
-  return (
-    lut[d0 & 0xff] +
-    lut[(d0 >> 8) & 0xff] +
-    lut[(d0 >> 16) & 0xff] +
-    lut[(d0 >> 24) & 0xff] +
-    "-" +
-    lut[d1 & 0xff] +
-    lut[(d1 >> 8) & 0xff] +
-    "-" +
-    lut[((d1 >> 16) & 0x0f) | 0x40] +
-    lut[(d1 >> 24) & 0xff] +
-    "-" +
-    lut[(d2 & 0x3f) | 0x80] +
-    lut[(d2 >> 8) & 0xff] +
-    "-" +
-    lut[(d2 >> 16) & 0xff] +
-    lut[(d2 >> 24) & 0xff] +
-    lut[d3 & 0xff] +
-    lut[(d3 >> 8) & 0xff] +
-    lut[(d3 >> 16) & 0xff] +
-    lut[(d3 >> 24) & 0xff]
-  );
-};
 let swatchesConfigs: SwatchesConfigs = {
   options: [
     {
@@ -57,50 +23,50 @@ let swatchesConfigs: SwatchesConfigs = {
   ],
   swatches: {
     colors: [
-      { id: uuid(), name: "Red", value: "#ff0000" },
-      { id: uuid(), name: "Yellow", value: "#ffff00" },
-      { id: uuid(), name: "Black", value: "#000000" },
-      { id: uuid(), name: "Blue", value: "#0000FF" },
-      { id: uuid(), name: "Green", value: "#00ff00" },
-      { id: uuid(), name: "Purple", value: "#800080" },
-      { id: uuid(), name: "Silver", value: "#c0c0c0" },
-      { id: uuid(), name: "White", value: "#ffffff" },
-      { id: uuid(), name: "Brown", value: "#7B3F00" },
-      { id: uuid(), name: "Light-brown", value: "#feb035" },
-      { id: uuid(), name: "Dark-turquoise", value: "#23cddc" },
-      { id: uuid(), name: "Orange", value: "#fe9001" },
-      { id: uuid(), name: "Tan", value: "#eacea7" },
-      { id: uuid(), name: "Violet", value: "#EE82EE" },
-      { id: uuid(), name: "Pink", value: "#FFC0CB" },
-      { id: uuid(), name: "Grey", value: "#808080" },
+      { id: "1", name: "Red", value: "#ff0000" },
+      { id: "2", name: "Yellow", value: "#ffff00" },
+      { id: "3", name: "Black", value: "#000000" },
+      { id: "4", name: "Blue", value: "#0000FF" },
+      { id: "5", name: "Green", value: "#00ff00" },
+      { id: "6", name: "Purple", value: "#800080" },
+      { id: "7", name: "Silver", value: "#c0c0c0" },
+      { id: "8", name: "White", value: "#ffffff" },
+      { id: "9", name: "Brown", value: "#7B3F00" },
+      { id: "10", name: "Light-brown", value: "#feb035" },
+      { id: "11", name: "Dark-turquoise", value: "#23cddc" },
+      { id: "12", name: "Orange", value: "#fe9001" },
+      { id: "13", name: "Tan", value: "#eacea7" },
+      { id: "14", name: "Violet", value: "#EE82EE" },
+      { id: "15", name: "Pink", value: "#FFC0CB" },
+      { id: "16", name: "Grey", value: "#808080" },
     ],
     images: [
       {
-        id: uuid(),
+        id: "1",
         name: "Dark blue",
         value:
           "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/swatch_pattern_2.png",
       },
       {
-        id: uuid(),
+        id: "2",
         name: "Light orange",
         value:
           "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/swatch_pattern_3.png",
       },
       {
-        id: uuid(),
+        id: "3",
         name: "Dark red",
         value:
           "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/swatch_pattern_4.png",
       },
       {
-        id: uuid(),
+        id: "4",
         name: "Light brown",
         value:
           "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/swatch_pattern_5.png",
       },
       {
-        id: uuid(),
+        id: "5",
         name: "Dark brown",
         value:
           "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/swatch_pattern_6.png",

From 819ff13935130015003c2edae18536352c3e1927 Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Mon, 12 Aug 2024 18:16:06 +0700
Subject: [PATCH 03/12] Update theme colors config & variables

---
 app/weaverse/schema.server.ts |  10 +-
 app/weaverse/style.tsx        | 205 +++++++++++++++-------------------
 2 files changed, 95 insertions(+), 120 deletions(-)

diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index c974014a..eab48a72 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -381,7 +381,7 @@ export let themeSchema: HydrogenThemeSchema = {
         {
           type: "color",
           label: "Background color",
-          name: "drawerBg",
+          name: "drawersBg",
           defaultValue: "#ffffff",
         },
         {
@@ -391,25 +391,25 @@ export let themeSchema: HydrogenThemeSchema = {
         {
           type: "color",
           label: "Compare price text",
-          name: "comparePriceText",
+          name: "comparePriceTextColor",
           defaultValue: "#737373",
         },
         {
           type: "color",
           label: "Sale tags",
-          name: "saleTag",
+          name: "saleTagColor",
           defaultValue: "#dc2626",
         },
         {
           type: "color",
           label: "New tags",
-          name: "newTag",
+          name: "newTagColor",
           defaultValue: "#818cf8",
         },
         {
           type: "color",
           label: "Other tags",
-          name: "otherTag",
+          name: "otherTagColor",
           defaultValue: "#1e293b",
         },
         {
diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index fcde958b..5bc22721 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -25,14 +25,26 @@ export function GlobalStyle() {
     let {
       colorBackground,
       colorText,
-      colorInverseBackground,
-      // colorInverseText,
-      // colorButton,
-      // colorButtonText,
-      // colorInverseButton,
-      // colorInverseButtonText,
-      colorSale,
-      colorBorder,
+      colorLines,
+      announcementBarTextColor,
+      announcementBarBgColor,
+      headerBgColor,
+      headerText,
+      transparentHeaderText,
+      footerBgColor,
+      footerText,
+      buttonPrimaryBg,
+      buttonPrimaryColor,
+      buttonSecondaryBg,
+      buttonSecondaryColor,
+      buttonOutlineTextAndBorder,
+      drawersBg,
+      comparePriceTextColor,
+      saleTagColor,
+      newTagColor,
+      otherTagColor,
+      soldOutAndUnavailable,
+      starRating,
       bodyBaseSize,
       bodyBaseSpacing,
       bodyBaseLineHeight,
@@ -41,40 +53,9 @@ export function GlobalStyle() {
       headingBaseLineHeight,
       navHeightDesktop,
       navHeightTablet,
-      buttonPrimaryBg,
-      buttonPrimaryBgHover,
-      buttonPrimaryColor,
-      buttonPrimaryColorHover,
-      buttonPrimaryBorder,
-      buttonPrimaryBorderHover,
-      buttonSecondaryBg,
-      buttonSecondaryBgHover,
-      buttonSecondaryColor,
-      buttonSecondaryColorHover,
-      buttonSecondaryBorder,
-      buttonSecondaryBorderHover,
-      buttonOutlineBg,
-      buttonOutlineBgHover,
-      buttonOutlineColor,
-      buttonOutlineColorHover,
-      buttonOutlineBorder,
-      buttonOutlineBorderHover,
-      buttonLinkColor,
-      buttonLinkColorHover,
       pageWidth,
     } = settings;
 
-    colorBackground = hexToRgbString(colorBackground);
-    colorInverseBackground = hexToRgbString(colorInverseBackground);
-    colorText = hexToRgbString(colorText);
-    // colorInverseText = hexToRgbString(colorInverseText);
-    // colorButton = hexToRgbString(colorButton);
-    // colorButtonText = hexToRgbString(colorButtonText);
-    // colorInverseButton = hexToRgbString(colorInverseButton);
-    // colorInverseButtonText = hexToRgbString(colorInverseButtonText);
-    colorSale = hexToRgbString(colorSale);
-    colorBorder = hexToRgbString(colorBorder);
-
     return (
       <style
         id="global-theme-style"
@@ -83,65 +64,59 @@ export function GlobalStyle() {
         dangerouslySetInnerHTML={{
           __html: `
             :root {
-							/* Layout */
+              /* Layout */
               --height-nav: ${settings.navHeightMobile}rem;
               --page-width: ${pageWidth}px;
 
               /* Colors */
-              --color-background: ${colorBackground};
-              --color-inverse-background: ${colorInverseBackground};
+              --color-background: ${hexToRgbString(colorBackground)};
               --color-text: ${colorText};
-              --color-sale: ${colorSale};
-              --color-border: ${colorBorder};
+              --color-lines: ${hexToRgbString(colorLines)};
+              --color-announcement-bar-text: ${hexToRgbString(announcementBarTextColor)};
+              --color-announcement-bar-bg: ${hexToRgbString(announcementBarBgColor)};
+              --color-header-bg: ${hexToRgbString(headerBgColor)};
+              --color-header-text: ${hexToRgbString(headerText)};
+              --color-transparent-header-text: ${hexToRgbString(transparentHeaderText)};
+              --color-footer-bg: ${hexToRgbString(footerBgColor)};
+              --color-footer-text: ${hexToRgbString(footerText)};
+              --color-button-primary-bg: ${hexToRgbString(buttonPrimaryBg)};
+              --color-button-primary-color: ${hexToRgbString(buttonPrimaryColor)};
+              --color-button-secondary-bg: ${hexToRgbString(buttonSecondaryBg)};
+              --color-button-secondary-color: ${hexToRgbString(buttonSecondaryColor)};
+              --color-button-outline-text-and-border: ${hexToRgbString(buttonOutlineTextAndBorder)};
+              --color-drawers-bg: ${hexToRgbString(drawersBg)};
+              --color-compare-price-text: ${hexToRgbString(comparePriceTextColor)};
+              --color-sale-tag: ${hexToRgbString(saleTagColor)};
+              --color-new-tag: ${hexToRgbString(newTagColor)};
+              --color-other-tag: ${hexToRgbString(otherTagColor)};
+              --color-sold-out-and-unavailable: ${hexToRgbString(soldOutAndUnavailable)};
+              --color-star-rating: ${hexToRgbString(starRating)};
 
               /* Typography */
               --body-base-size: ${bodyBaseSize}px;
               --body-base-spacing: ${bodyBaseSpacing};
               --body-base-line-height: ${bodyBaseLineHeight};
 
-							--heading-scale-ratio: 1.2;
-							--heading-mobile-scale-ratio: 1.1;
+              --heading-scale-ratio: 1.2;
+              --heading-mobile-scale-ratio: 1.1;
 
               --h1-base-size: ${h1BaseSize}px;
-							--h2-base-size: round(calc(var(--h1-base-size) / var(--heading-scale-ratio)), 1px);
-							--h3-base-size: round(calc(var(--h2-base-size) / var(--heading-scale-ratio)), 1px);
-							--h4-base-size: round(calc(var(--h3-base-size) / var(--heading-scale-ratio)), 1px);
-							--h5-base-size: round(calc(var(--h4-base-size) / var(--heading-scale-ratio)), 1px);
-							--h6-base-size: round(calc(var(--h5-base-size) / var(--heading-scale-ratio)), 1px);
-
-							--h1-mobile-size: round(calc(var(--h1-base-size) / var(--heading-mobile-scale-ratio)), 1px);
-							--h2-mobile-size: round(calc(var(--h2-base-size) / var(--heading-mobile-scale-ratio)), 1px);
-							--h3-mobile-size: round(calc(var(--h3-base-size) / var(--heading-mobile-scale-ratio)), 1px);
-							--h4-mobile-size: round(calc(var(--h4-base-size) / var(--heading-mobile-scale-ratio)), 1px);
-							--h5-mobile-size: round(calc(var(--h5-base-size) / var(--heading-mobile-scale-ratio)), 1px);
-							--h6-mobile-size: round(calc(var(--h6-base-size) / var(--heading-mobile-scale-ratio)), 1px);
+              --h2-base-size: round(calc(var(--h1-base-size) / var(--heading-scale-ratio)), 1px);
+              --h3-base-size: round(calc(var(--h2-base-size) / var(--heading-scale-ratio)), 1px);
+              --h4-base-size: round(calc(var(--h3-base-size) / var(--heading-scale-ratio)), 1px);
+              --h5-base-size: round(calc(var(--h4-base-size) / var(--heading-scale-ratio)), 1px);
+              --h6-base-size: round(calc(var(--h5-base-size) / var(--heading-scale-ratio)), 1px);
+
+              --h1-mobile-size: round(calc(var(--h1-base-size) / var(--heading-mobile-scale-ratio)), 1px);
+              --h2-mobile-size: round(calc(var(--h2-base-size) / var(--heading-mobile-scale-ratio)), 1px);
+              --h3-mobile-size: round(calc(var(--h3-base-size) / var(--heading-mobile-scale-ratio)), 1px);
+              --h4-mobile-size: round(calc(var(--h4-base-size) / var(--heading-mobile-scale-ratio)), 1px);
+              --h5-mobile-size: round(calc(var(--h5-base-size) / var(--heading-mobile-scale-ratio)), 1px);
+              --h6-mobile-size: round(calc(var(--h6-base-size) / var(--heading-mobile-scale-ratio)), 1px);
 
               --heading-base-spacing: ${headingBaseSpacing};
               --heading-base-line-height: ${headingBaseLineHeight};
 
-							/* Buttons */
-							--button-primary-bg: ${buttonPrimaryBg};
-							--button-primary-color: ${buttonPrimaryColor};
-							--button-primary-border: ${buttonPrimaryBorder};
-							--button-primary-bg-hover: ${buttonPrimaryBgHover};
-							--button-primary-color-hover: ${buttonPrimaryColorHover};
-							--button-primary-border-hover: ${buttonPrimaryBorderHover};
-							--button-secondary-bg: ${buttonSecondaryBg};
-							--button-secondary-color: ${buttonSecondaryColor};
-							--button-secondary-border: ${buttonSecondaryBorder};
-							--button-secondary-bg-hover: ${buttonSecondaryBgHover};
-							--button-secondary-color-hover: ${buttonSecondaryColorHover};
-							--button-secondary-border-hover: ${buttonSecondaryBorderHover};
-							--button-outline-bg: ${buttonOutlineBg};
-							--button-outline-color: ${buttonOutlineColor};
-							--button-outline-border: ${buttonOutlineBorder};
-							--button-outline-bg-hover: ${buttonOutlineBgHover};
-							--button-outline-color-hover: ${buttonOutlineColorHover};
-							--button-outline-border-hover: ${buttonOutlineBorderHover};
-							--button-link-color: ${buttonLinkColor};
-							--button-link-color-hover: ${buttonLinkColorHover};
-            }
-
             body, button, input, select, textarea {
               -webkit-font-smoothing: antialiased;
               -webkit-text-size-adjust: 100%;
@@ -158,44 +133,44 @@ export function GlobalStyle() {
 
             /* Mobile sizes */
             h1, .h1 {
-							font-size: var(--h1-mobile-size);
-						}
-						h2, .h2 {
-							font-size: var(--h2-mobile-size);
-						}
-						h3, .h3 {
-							font-size: var(--h3-mobile-size);
-						}
-						h4, .h4 {
-							font-size: var(--h4-mobile-size);
-						}
-						h5, .h5 {
-							font-size: var(--h5-mobile-size);
-						}
-						h6, .h6 {
-							font-size: var(--h6-mobile-size);
-						}
+              font-size: var(--h1-mobile-size);
+            }
+            h2, .h2 {
+              font-size: var(--h2-mobile-size);
+            }
+            h3, .h3 {
+              font-size: var(--h3-mobile-size);
+            }
+            h4, .h4 {
+              font-size: var(--h4-mobile-size);
+            }
+            h5, .h5 {
+              font-size: var(--h5-mobile-size);
+            }
+            h6, .h6 {
+              font-size: var(--h6-mobile-size);
+            }
 
             /* Desktop sizes */
             @media (min-width: 32em) {
               h1, .h1 {
-								font-size: var(--h1-base-size);
-							}
-							h2, .h2 {
-								font-size: var(--h2-base-size);
-							}
-							h3, .h3 {
-								font-size: var(--h3-base-size);
-							}
-							h4, .h4 {
-								font-size: var(--h4-base-size);
-							}
-							h5, .h5 {
-								font-size: var(--h5-base-size);
-							}
-							h6, .h6 {
-								font-size: var(--h6-base-size);
-							}
+                font-size: var(--h1-base-size);
+              }
+              h2, .h2 {
+                font-size: var(--h2-base-size);
+              }
+              h3, .h3 {
+                font-size: var(--h3-base-size);
+              }
+              h4, .h4 {
+                font-size: var(--h4-base-size);
+              }
+              h5, .h5 {
+                font-size: var(--h5-base-size);
+              }
+              h6, .h6 {
+                font-size: var(--h6-base-size);
+              }
             }
 
             @media (min-width: 32em) {

From 560e2d734927a84a1695625e8077e63f98d918b8 Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Tue, 13 Aug 2024 09:33:13 +0700
Subject: [PATCH 04/12] Update button configs

---
 app/components/Button.tsx                     | 84 +++++++++----------
 app/sections/countdown/index.tsx              |  2 +-
 .../featured-collections/collection-items.tsx | 13 ++-
 app/sections/map.tsx                          |  7 +-
 app/sections/slideshow/index.tsx              |  5 +-
 app/sections/slideshow/slide.tsx              |  2 +-
 6 files changed, 50 insertions(+), 63 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index e14217a9..f021b323 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -23,37 +23,44 @@ let variants = cva(
       variant: {
         primary: [
           "border px-4 py-3",
-          "text-[var(--color-button-text,var(--button-primary-color))]",
-          "bg-[var(--color-button-bg,var(--button-primary-bg))]",
-          "border-[var(--color-button-border,var(--button-primary-border))]",
-          "hover:bg-[var(--color-button-bg-hover,var(--button-primary-bg-hover))]",
-          "hover:text-[var(--color-button-text-hover,var(--button-primary-color-hover))]",
-          "hover:border-[var(--color-button-border-hover,var(--button-primary-border-hover))]",
+          "text-[var(--color-button-primary-text))]",
+          "bg-[var(--color-button-primary-bg))]",
+          "border-[var(--color-button-primary-bg))]",
+          "hover:bg-[var(--color-button-primary-text))]",
+          "hover:text-[var(--color-button-primary-bg))]",
+          "hover:border-[var(--color-button-primary-text))]",
         ],
         secondary: [
           "border px-4 py-3",
-          "text-[var(--color-button-text,var(--button-secondary-color))]",
-          "bg-[var(--color-button-bg,var(--button-secondary-bg))]",
-          "border-[var(--color-button-border,var(--button-secondary-border))]",
-          "hover:bg-[var(--color-button-bg-hover,var(--button-secondary-bg-hover))]",
-          "hover:text-[var(--color-button-text-hover,var(--button-secondary-color-hover))]",
-          "hover:border-[var(--color-button-border-hover,var(--button-secondary-border-hover))]",
+          "text-[var(--color-button-secondary-text))]",
+          "bg-[var(--color-button-secondary-bg))]",
+          "border-[var(--color-button-secondary-bg))]",
+          "hover:bg-[var(--color-button-secondary-text))]",
+          "hover:text-[var(--color-button-secondary-bg))]",
+          "hover:border-[var(--color-button-secondary-text))]",
         ],
         outline: [
           "border px-4 py-3",
-          "text-[var(--color-button-text,var(--button-outline-color))]",
-          "bg-[var(--color-button-bg,var(--button-outline-bg))]",
-          "border-[var(--color-button-border,var(--button-outline-border))]",
-          "hover:bg-[var(--color-button-bg-hover,var(--button-outline-bg-hover))]",
-          "hover:text-[var(--color-button-text-hover,var(--button-outline-color-hover))]",
-          "hover:border-[var(--color-button-border-hover,var(--button-outline-border-hover))]",
+          "text-[var(--color-button-outline-text-and-border))]",
+          "bg-transparent",
+          "border-[var(--color-button-outline-text-and-border))]",
+          "hover:bg-[var(--color-button-outline-text-and-border))]",
+          "hover:text-[var(--color-text))]",
+          "hover:border-[var(--color-button-outline-text-and-border))]",
+        ],
+        custom: [
+          "border px-4 py-3",
+          "text-[var(--color-button-text))]",
+          "bg-[var(--color-button-bg))]",
+          "border-[var(--color-button-border))]",
+          "hover:bg-[var(--color-button-bg-hover))]",
+          "hover:text-[var(--color-button-text-hover))]",
+          "hover:border-[var(--color-button-border-hover))]",
         ],
         link: [
           "bg-transparent py-2 border-b",
-          "text-[var(--color-button-text,var(--button-link-color))]",
-          "border-b-[var(--color-button-border,var(--button-link-color))]",
-          "hover:text-[var(--color-button-text-hover,var(--button-link-color-hover))]",
-          "hover:border-[var(--color-button-border-hover,var(--button-link-color-hover))]",
+          "text-[var(--color-text)]",
+          "border-b-[var(--color-text)]",
         ],
       },
     },
@@ -64,7 +71,6 @@ let variants = cva(
 );
 
 export interface ButtonStyleProps {
-  buttonStyle: "inherit" | "custom";
   backgroundColor: string;
   textColor: string;
   borderColor: string;
@@ -97,7 +103,6 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     loading,
     openInNewTab,
     className,
-    buttonStyle,
     backgroundColor,
     textColor,
     borderColor,
@@ -108,7 +113,7 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     children,
     ...rest
   } = props;
-  if (buttonStyle === "custom") {
+  if (variant === "custom") {
     style = {
       ...style,
       "--color-button-bg": backgroundColor,
@@ -209,67 +214,54 @@ export let buttonContentInputs: InspectorGroup["inputs"] = [
         { label: "Secondary", value: "secondary" },
         { label: "Outline", value: "outline" },
         { label: "Link", value: "link" },
+        { label: "Custom styles", value: "custom" },
       ],
     },
     defaultValue: "primary",
   },
 ];
 export let buttonStylesInputs: InspectorGroup["inputs"] = [
-  {
-    type: "select",
-    name: "buttonStyle",
-    label: "Button style",
-    configs: {
-      options: [
-        { label: "Inherit", value: "inherit" },
-        { label: "Custom", value: "custom" },
-      ],
-    },
-    defaultValue: "inherit",
-    helpText:
-      "Use 'Inherit' for theme-based styles, or 'Custom' to modify button appearance.",
-  },
   {
     type: "color",
     label: "Background color",
     name: "backgroundColor",
     defaultValue: "#000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Text color",
     name: "textColor",
     defaultValue: "#fff",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Border color",
     name: "borderColor",
     defaultValue: "#00000000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Background color (hover)",
     name: "backgroundColorHover",
     defaultValue: "#00000000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Text color (hover)",
     name: "textColorHover",
     defaultValue: "#000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Border color (hover)",
     name: "borderColorHover",
     defaultValue: "#000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
 ];
 
@@ -277,7 +269,7 @@ export let buttonInputs: InspectorGroup["inputs"] = [
   ...buttonContentInputs,
   {
     type: "heading",
-    label: "Button styles",
+    label: "Button custom styles",
   },
   ...buttonStylesInputs,
 ];
diff --git a/app/sections/countdown/index.tsx b/app/sections/countdown/index.tsx
index 2438ed6e..3f092c4b 100644
--- a/app/sections/countdown/index.tsx
+++ b/app/sections/countdown/index.tsx
@@ -140,7 +140,7 @@ export let schema: HydrogenComponentSchema = {
       {
         type: "button",
         text: "Shop now",
-        buttonStyle: "custom",
+        variant: "custom",
         backgroundColor: "#00000000",
         textColor: "#fff",
         borderColor: "#fff",
diff --git a/app/sections/featured-collections/collection-items.tsx b/app/sections/featured-collections/collection-items.tsx
index 1d90a120..897b1e77 100644
--- a/app/sections/featured-collections/collection-items.tsx
+++ b/app/sections/featured-collections/collection-items.tsx
@@ -171,8 +171,7 @@ let CollectionItems = forwardRef<HTMLDivElement, CollectionItemsProps>(
                   <Button
                     text={buttonText}
                     link={`/collections/${collection.handle}`}
-                    variant="secondary"
-                    buttonStyle="custom"
+                    variant="custom"
                     backgroundColor={backgroundColor}
                     textColor={textColor}
                     borderColor={borderColor}
@@ -335,12 +334,10 @@ export let schema: HydrogenComponentSchema = {
           placeholder: "Shop now",
           condition: "contentPosition.eq.over",
         },
-        ...buttonStylesInputs
-          .filter((inp) => inp.name !== "buttonStyle")
-          .map((inp) => ({
-            ...inp,
-            condition: "contentPosition.eq.over",
-          })),
+        ...buttonStylesInputs.map((inp) => ({
+          ...inp,
+          condition: "contentPosition.eq.over",
+        })),
       ],
     },
   ],
diff --git a/app/sections/map.tsx b/app/sections/map.tsx
index 084bdcad..b3f8f5a1 100644
--- a/app/sections/map.tsx
+++ b/app/sections/map.tsx
@@ -51,7 +51,6 @@ let MapSection = forwardRef<HTMLElement, MapSectionProps>((props, ref) => {
     boxBorderRadius,
     buttonText,
     buttonVariant,
-    buttonStyle,
     backgroundColor,
     textColor,
     borderColor,
@@ -92,7 +91,6 @@ let MapSection = forwardRef<HTMLElement, MapSectionProps>((props, ref) => {
             link={`https://www.google.com/maps/search/${address}`}
             openInNewTab
             variant={buttonVariant}
-            buttonStyle={buttonStyle}
             backgroundColor={backgroundColor}
             textColor={textColor}
             borderColor={borderColor}
@@ -205,14 +203,15 @@ export let schema: HydrogenComponentSchema = {
         },
         {
           type: "select",
-          name: "buttonVariant",
-          label: "Button variant",
+          name: "variant",
+          label: "Variant",
           configs: {
             options: [
               { label: "Primary", value: "primary" },
               { label: "Secondary", value: "secondary" },
               { label: "Outline", value: "outline" },
               { label: "Link", value: "link" },
+              { label: "Custom styles", value: "custom" },
             ],
           },
           defaultValue: "primary",
diff --git a/app/sections/slideshow/index.tsx b/app/sections/slideshow/index.tsx
index 5748176d..b999e898 100644
--- a/app/sections/slideshow/index.tsx
+++ b/app/sections/slideshow/index.tsx
@@ -325,8 +325,7 @@ export let schema: HydrogenComponentSchema = {
           {
             type: "button",
             text: "Shop collection",
-            variant: "primary",
-            buttonStyle: "custom",
+            variant: "custom",
             backgroundColor: "#00000000",
             textColor: "#fff",
             borderColor: "#fff",
@@ -367,7 +366,7 @@ export let schema: HydrogenComponentSchema = {
           {
             type: "button",
             text: "Shop collection",
-            buttonStyle: "custom",
+            variant: "custom",
             backgroundColor: "#00000000",
             textColor: "#fff",
             borderColor: "#fff",
diff --git a/app/sections/slideshow/slide.tsx b/app/sections/slideshow/slide.tsx
index 0d17d144..efbe0b65 100644
--- a/app/sections/slideshow/slide.tsx
+++ b/app/sections/slideshow/slide.tsx
@@ -163,7 +163,7 @@ export let schema: HydrogenComponentSchema = {
       {
         type: "button",
         content: "Shop all",
-        buttonStyle: "custom",
+        variant: "custom",
         backgroundColor: "#00000000",
         textColor: "#fff",
         borderColor: "#fff",

From a65a09f1ee261893f4f46a6e524f832df8c329a6 Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Tue, 13 Aug 2024 09:57:27 +0700
Subject: [PATCH 05/12] Update tailwind.config.js to simplify theme colors and
 remove unused code

---
 tailwind.config.js | 26 +++++---------------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 5202223c..b73578a8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,25 +14,11 @@ export default {
       animation: {
         spin: "spin .5s linear infinite",
       },
-      opacity: {
-        15: "0.15",
-      },
-      borderColor: {
-        header: "rgb(230,230,230)",
-      },
       colors: {
-        primary: "rgb(var(--color-background) / <alpha-value>)", // background color
-        contrast: "rgb(var(--color-background) / <alpha-value>)", // temporary background color - replace primary after
-        secondary: "rgb(var(--color-inverse-background) / <alpha-value>)", // background inverse color
-        body: "rgb(var(--color-text) / <alpha-value>)", // body text color
-        "inv-body": "rgb(var(--color-inverse-text) / <alpha-value>)", // body text inverse color
-        // btn: "rgb(var(--color-button) / <alpha-value>)", // button background color
-        // "btn-content": "rgb(var(--color-button-text) / <alpha-value>)", // button text color
-        // "inv-btn": "rgb(var(--color-inverse-button) / <alpha-value>)", // button inverse background color
-        // "inv-btn-content":
-        //   "rgb(var(--color-inverse-button-text) / <alpha-value>)", // button inverse text color
-        sale: "rgb(var(--color-sale) / <alpha-value>)", // sale background color
-        bar: "rgb(var(--color-border) / <alpha-value>)", // border color
+        body: "rgb(var(--color-text) / <alpha-value>)",
+        background: "rgb(var(--color-background) / <alpha-value>)",
+        foreground: "rgb(var(--color-foreground) / <alpha-value>)",
+        line: "rgb(var(--color-line) / <alpha-value>)",
       },
       outlineOffset: {
         3: "3px",
@@ -106,9 +92,7 @@ export default {
     },
   },
   plugins: [
-    require("@tailwindcss/forms")({
-      strategy: "class",
-    }),
+    require("@tailwindcss/forms")({ strategy: "class" }),
     typographyPlugin,
   ],
 };

From c67115c92939e97f1470245679ba0425b969efe8 Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Tue, 13 Aug 2024 09:57:36 +0700
Subject: [PATCH 06/12] Update tailwind classes

---
 app/components/Checkbox.tsx                   |   2 +-
 .../predictive-search/PredictiveSearch.tsx    |   2 +-
 .../PredictiveSearchResult.tsx                |   2 +-
 .../PredictiveSearchResults.tsx               |   4 +-
 app/components/predictive-search/types.ts     |   4 +-
 app/lib/utils.ts                              |   4 +-
 app/modules/AccountAddressBook.tsx            |   2 +-
 app/modules/AccountDetails.tsx                |   6 +-
 app/modules/Button.tsx                        |   2 +-
 app/modules/Cart.tsx                          |   8 +-
 app/modules/CountrySelector.tsx               |   4 +-
 app/modules/Drawer.tsx                        |   4 +-
 app/modules/DrawerFilter.tsx                  |   8 +-
 app/modules/Footer.tsx                        |  40 +++---
 app/modules/Hero.tsx                          | 114 -----------------
 app/modules/Input.tsx                         |   8 +-
 app/modules/Modal.tsx                         |   4 +-
 app/modules/OrderCard.tsx                     |   4 +-
 app/modules/ProductCard.tsx                   |   2 +-
 app/modules/ProductGallery.tsx                |   2 +-
 app/modules/SortFilter.tsx                    |   6 +-
 app/modules/Text.tsx                          |   6 +-
 app/modules/global-loading.tsx                |   2 +-
 app/modules/header/DesktopHeader.tsx          |  12 +-
 app/modules/header/MobileHeader.tsx           |   4 +-
 app/modules/index.ts                          |   1 -
 app/modules/product-form/options.tsx          | 120 ++++++++++--------
 app/modules/product-form/placeholder.tsx      |   4 +-
 app/routes/($locale).account.orders.$id.tsx   |   2 +-
 app/routes/($locale).account.tsx              |   2 +-
 app/routes/($locale).search.tsx               |   4 +-
 app/sections/ali-reviews/review-bar.tsx       |   2 +-
 app/sections/all-products.tsx                 |   5 +-
 app/sections/collection-filters/index.tsx     |   4 +-
 .../collection-list/collection-card.tsx       |   2 +-
 .../product-information/product-detail.tsx    |   2 +-
 app/styles/app.css                            |   6 +-
 app/weaverse/schema.server.ts                 |  18 ++-
 app/weaverse/style.tsx                        |  22 ++--
 39 files changed, 170 insertions(+), 280 deletions(-)
 delete mode 100644 app/modules/Hero.tsx

diff --git a/app/components/Checkbox.tsx b/app/components/Checkbox.tsx
index a476f893..4dba7a51 100644
--- a/app/components/Checkbox.tsx
+++ b/app/components/Checkbox.tsx
@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        "peer w-5 h-5 shrink-0 border ring-offset-background focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "peer w-5 h-5 shrink-0 border ring-offset-background focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background data-[state=checked]:text-body",
       )}
       {...props}
     >
diff --git a/app/components/predictive-search/PredictiveSearch.tsx b/app/components/predictive-search/PredictiveSearch.tsx
index ad8a3328..986fb6b2 100644
--- a/app/components/predictive-search/PredictiveSearch.tsx
+++ b/app/components/predictive-search/PredictiveSearch.tsx
@@ -6,7 +6,7 @@ import { PredictiveSearchForm } from "./SearchForm";
 export function PredictiveSearch(props: { isOpen?: boolean }) {
   let { isOpen } = props;
   return (
-    <div className="relative border-t border-bar-subtle">
+    <div className="relative border-t border-line">
       <PredictiveSearchForm>
         {({ fetchResults, inputRef }) => (
           <div className="mx-auto w-full max-w-[560px] p-6">
diff --git a/app/components/predictive-search/PredictiveSearchResult.tsx b/app/components/predictive-search/PredictiveSearchResult.tsx
index 9abc8a4b..471ea487 100644
--- a/app/components/predictive-search/PredictiveSearchResult.tsx
+++ b/app/components/predictive-search/PredictiveSearchResult.tsx
@@ -20,7 +20,7 @@ export function PredictiveSearchResult({
 
   return (
     <div
-      className="predictive-search-result flex flex-col gap-4 divide-y divide-bar-subtle"
+      className="predictive-search-result flex flex-col gap-4 divide-y divide-line"
       key={type}
     >
       <Link
diff --git a/app/components/predictive-search/PredictiveSearchResults.tsx b/app/components/predictive-search/PredictiveSearchResults.tsx
index a32f83cd..33e88e46 100644
--- a/app/components/predictive-search/PredictiveSearchResults.tsx
+++ b/app/components/predictive-search/PredictiveSearchResults.tsx
@@ -35,7 +35,7 @@ export function PredictiveSearchResults() {
     <div className="absolute left-1/2 top-20 z-10 flex w-fit -translate-x-1/2 items-center justify-center">
       <div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 border bg-white p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
         <div className="space-y-8">
-          <div className="flex flex-col gap-4 divide-y divide-bar-subtle">
+          <div className="flex flex-col gap-4 divide-y divide-line">
             <PredictiveSearchResult
               goToSearchResult={goToSearchResult}
               items={queries?.items}
@@ -82,7 +82,7 @@ function NoPredictiveSearchResults({
     return null;
   }
   return (
-    <p className="w-[640px] border bg-primary p-6">
+    <p className="w-[640px] border bg-background p-6">
       No results found for <q>{searchTerm.current}</q>
     </p>
   );
diff --git a/app/components/predictive-search/types.ts b/app/components/predictive-search/types.ts
index 5046a6ca..428d6cc4 100644
--- a/app/components/predictive-search/types.ts
+++ b/app/components/predictive-search/types.ts
@@ -10,7 +10,7 @@ export type UseSearchReturn = NormalizedPredictiveSearch & {
   searchTerm: React.MutableRefObject<string>;
 };
 
-type PredicticeSearchResultItemImage =
+type PredictiveSearchResultItemImage =
   | PredictiveCollectionFragment["image"]
   | PredictiveArticleFragment["image"]
   | PredictiveProductFragment["featuredImage"];
@@ -35,7 +35,7 @@ export type NormalizedPredictiveSearchResultItem = {
   __typename: string | undefined;
   handle: string;
   id: string;
-  image?: PredicticeSearchResultItemImage;
+  image?: PredictiveSearchResultItemImage;
   price?: PredictiveSearchResultItemPrice;
   compareAtPrice?: PredictiveSearchResultItemPrice;
   styledTitle?: string;
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 5dc3dee3..c6d1f905 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -223,11 +223,11 @@ export function parseMenu(
 }
 
 export const INPUT_STYLE_CLASSES =
-  "appearance-none rounded dark:bg-transparent border focus:border-bar/50 focus:ring-0 w-full py-2 px-3 text-body/90 placeholder:text-body/50 leading-tight focus:shadow-outline";
+  "appearance-none rounded dark:bg-transparent border focus:border-line/50 focus:ring-0 w-full py-2 px-3 text-body/90 placeholder:text-body/50 leading-tight focus:shadow-outline";
 
 export const getInputStyleClasses = (isError?: string | null) => {
   return `${INPUT_STYLE_CLASSES} ${
-    isError ? "border-red-500" : "border-bar/20"
+    isError ? "border-red-500" : "border-line/20"
   }`;
 };
 
diff --git a/app/modules/AccountAddressBook.tsx b/app/modules/AccountAddressBook.tsx
index 08191c19..3ea85567 100644
--- a/app/modules/AccountAddressBook.tsx
+++ b/app/modules/AccountAddressBook.tsx
@@ -59,7 +59,7 @@ function Address({
     <div className="lg:p-8 p-6 border border-gray-200 rounded flex flex-col">
       {defaultAddress && (
         <div className="mb-3 flex flex-row">
-          <span className="px-3 py-1 text-xs font-medium rounded-full bg-primary/20 text-body/50">
+          <span className="px-3 py-1 text-xs font-medium rounded-full bg-background/20 text-body/50">
             Default
           </span>
         </div>
diff --git a/app/modules/AccountDetails.tsx b/app/modules/AccountDetails.tsx
index 93bdf9f6..979b37aa 100644
--- a/app/modules/AccountDetails.tsx
+++ b/app/modules/AccountDetails.tsx
@@ -23,17 +23,17 @@ export function AccountDetails({
               Edit
             </Link>
           </div>
-          <div className="mt-4 text-sm text-primary/50">Name</div>
+          <div className="mt-4 text-sm text-body/50">Name</div>
           <p className="mt-1">
             {firstName || lastName
               ? (firstName ? firstName + " " : "") + lastName
               : "Add name"}{" "}
           </p>
 
-          <div className="mt-4 text-sm text-primary/50">Phone number</div>
+          <div className="mt-4 text-sm text-body/50">Phone number</div>
           <p className="mt-1">{phoneNumber?.phoneNumber ?? "N/A"}</p>
 
-          <div className="mt-4 text-sm text-primary/50">Email address</div>
+          <div className="mt-4 text-sm text-body/50">Email address</div>
           <p className="mt-1">{emailAddress?.emailAddress ?? "N/A"}</p>
         </div>
       </div>
diff --git a/app/modules/Button.tsx b/app/modules/Button.tsx
index e3c21b0d..daa044da 100644
--- a/app/modules/Button.tsx
+++ b/app/modules/Button.tsx
@@ -36,7 +36,7 @@ export const Button = forwardRef(
       primary: `${baseButtonClasses} border-2 border-btn hover:bg-inv-btn hover:text-inv-btn-content bg-btn text-btn-content`,
       secondary: `${baseButtonClasses} border-2 border-btn text-btnTextInverse hover:bg-btn hover:text-btn-content`,
       "secondary-white": `${baseButtonClasses} border-2 border-inv-btn text-btn hover:bg-inv-btn hover:text-inv-btn-content`,
-      inline: "border-b border-bar/10 leading-none pb-1",
+      inline: "border-b border-line/10 leading-none pb-1",
     };
 
     const widths = {
diff --git a/app/modules/Cart.tsx b/app/modules/Cart.tsx
index 0410bfa3..8067c45e 100644
--- a/app/modules/Cart.tsx
+++ b/app/modules/Cart.tsx
@@ -217,7 +217,7 @@ function CartSummary({
 }) {
   const summary = {
     drawer: "grid gap-4 p-6 border-t md:px-12",
-    page: "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-primary/5 rounded w-full",
+    page: "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-background/5 rounded w-full",
   };
 
   return (
@@ -352,13 +352,13 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) {
       <label htmlFor={`quantity-${lineId}`} className="sr-only">
         Quantity, {optimisticQuantity}
       </label>
-      <div className="flex items-center border rounded">
+      <div className="flex items-center border border-line rounded">
         <UpdateCartButton lines={[{ id: lineId, quantity: prevQuantity }]}>
           <button
             type="button"
             name="decrease-quantity"
             aria-label="Decrease quantity"
-            className="w-10 h-10 transition text-secondary/50 hover:text-secondary disabled:text-secondary/10"
+            className="w-10 h-10 transition disabled:text-body/10"
             value={prevQuantity}
             disabled={optimisticQuantity <= 1 || isOptimistic}
           >
@@ -377,7 +377,7 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) {
         <UpdateCartButton lines={[{ id: lineId, quantity: nextQuantity }]}>
           <button
             type="button"
-            className="w-10 h-10 transition text-secondary/50 hover:text-secondary disabled:text-secondary/10"
+            className="w-10 h-10 transition disabled:text-body/10"
             name="increase-quantity"
             value={nextQuantity}
             aria-label="Increase quantity"
diff --git a/app/modules/CountrySelector.tsx b/app/modules/CountrySelector.tsx
index fa496c18..4cf0f5be 100644
--- a/app/modules/CountrySelector.tsx
+++ b/app/modules/CountrySelector.tsx
@@ -82,7 +82,7 @@ export function CountrySelector() {
   return (
     <div ref={observerRef} className="grid gap-4 w-80">
       <Popover>
-        <PopoverButton className="w-full border border-contrast/30 overflow-clip px-4 py-3 cursor-pointer text-left outline-none flex items-center justify-between gap-2">
+        <PopoverButton className="w-full border border-line/30 overflow-clip px-4 py-3 cursor-pointer text-left outline-none flex items-center justify-between gap-2">
           {selectedLocale.label}
           <IconCaretDown className="w-5 h-5" />
         </PopoverButton>
@@ -114,7 +114,7 @@ export function CountrySelector() {
                     key={countryPath}
                     type="button"
                     onClick={onChangeLocale}
-                    className="text-white bg-black hover:bg-primary/30 w-full p-2 transition flex justify-start items-center text-left cursor-pointer py-2 px-4 text-sm"
+                    className="text-white bg-black hover:bg-background/30 w-full p-2 transition flex justify-start items-center text-left cursor-pointer py-2 px-4 text-sm"
                   >
                     {countryLocale.label}
                     {isSelected ? (
diff --git a/app/modules/Drawer.tsx b/app/modules/Drawer.tsx
index 044f1023..62bff47d 100644
--- a/app/modules/Drawer.tsx
+++ b/app/modules/Drawer.tsx
@@ -66,7 +66,7 @@ export function Drawer({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 top-nav bg-primary bg-opacity-25 text-body" />
+          <div className="fixed inset-0 top-nav bg-background bg-opacity-25 text-body" />
         </Transition.Child>
 
         <div className="fixed inset-0 top-nav">
@@ -91,7 +91,7 @@ export function Drawer({
               >
                 <DialogPanel
                   className={cn(
-                    "text-left align-middle transition-all transform shadow-xl  bg-primary",
+                    "text-left align-middle transition-all transform shadow-xl  bg-background",
                     openFrom === "top"
                       ? "h-fit w-screen"
                       : "max-w-lg h-screen-dynamic",
diff --git a/app/modules/DrawerFilter.tsx b/app/modules/DrawerFilter.tsx
index b2509942..002c7f22 100644
--- a/app/modules/DrawerFilter.tsx
+++ b/app/modules/DrawerFilter.tsx
@@ -54,10 +54,9 @@ export function DrawerFilter({
 }: DrawerFilterProps) {
   const { openDrawer, isOpen, closeDrawer } = useDrawer();
   return (
-    <div className="border-y border-bar-subtle py-4 ">
+    <div className="border-y border-line py-4 ">
       <div className="gap-4 md:gap-8 px-6 md:px-8 lg:px-12 flex w-full items-center justify-between">
         <div className="flex flex-1">
-          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
           <div
             className={clsx(
               "border cursor-pointer hidden lg:block",
@@ -68,7 +67,6 @@ export function DrawerFilter({
           >
             <IconFourGrid className="w-12 h-12 text-[#88847F]" />
           </div>
-          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
           <div
             className={clsx(
               "border cursor-pointer hidden lg:block",
@@ -79,7 +77,6 @@ export function DrawerFilter({
           >
             <IconThreeGrid className="w-12 h-12 text-[#88847F]" />
           </div>
-          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
           <div
             className={clsx(
               "border cursor-pointer lg:hidden",
@@ -90,7 +87,6 @@ export function DrawerFilter({
           >
             <IconTwoGrid className="w-12 h-12 text-[#88847F]" />
           </div>
-          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
           <div
             className={clsx(
               "border cursor-pointer lg:hidden",
@@ -359,7 +355,7 @@ export default function SortMenu({
       </Menu.Button>
       <Menu.Items
         as="nav"
-        className="absolute right-0 top-14 flex h-fit w-56 flex-col gap-2 rounded border bg-primary p-5"
+        className="absolute right-0 top-14 flex h-fit w-56 flex-col gap-2 rounded border bg-background p-5"
       >
         {items.map((item) => (
           <Menu.Item key={item.label}>
diff --git a/app/modules/Footer.tsx b/app/modules/Footer.tsx
index 94be7147..55bb2b28 100644
--- a/app/modules/Footer.tsx
+++ b/app/modules/Footer.tsx
@@ -6,7 +6,7 @@ import {
 import { Link } from "@remix-run/react";
 import { Image } from "@shopify/hydrogen";
 import { useThemeSettings } from "@weaverse/hydrogen";
-import clsx from "clsx";
+import { cva } from "class-variance-authority";
 import Button from "~/components/Button";
 import {
   IconFacebookLogo,
@@ -17,12 +17,16 @@ import {
 import type { ChildEnhancedMenuItem, EnhancedMenu } from "~/lib/utils";
 import { CountrySelector, Input } from "~/modules";
 
-const footerWidthVariants = {
-  full: "w-full h-full",
-  stretch: "w-full h-full px-3 md:px-10 lg:px-16",
-  fixed:
-    "w-full h-full max-w-[var(--page-width,1280px)] px-3 md:px-4 lg:px-6 mx-auto",
-};
+let variants = cva("divide-y divide-line space-y-9", {
+  variants: {
+    width: {
+      full: "w-full h-full",
+      stretch: "w-full h-full px-3 md:px-10 lg:px-16",
+      fixed:
+        "w-full h-full max-w-[var(--page-width,1280px)] px-3 md:px-4 lg:px-6 mx-auto",
+    },
+  },
+});
 
 export function Footer({
   menu,
@@ -47,9 +51,8 @@ export function Footer({
     newsletterButtonText,
   } = useThemeSettings();
 
-  const { items = [] } = menu || {};
-
-  const socials = [
+  let { items = [] } = menu || {};
+  let socialItems = [
     {
       name: "Facebook",
       to: socialFacebook,
@@ -72,14 +75,9 @@ export function Footer({
     },
   ];
 
-  const footerContainerClassName = clsx(
-    footerWidthVariants[footerWidth as keyof typeof footerWidthVariants],
-    "divide-y divide-primary/30 space-y-9",
-  );
-
   return (
-    <footer className="bg-secondary text-primary pt-16 text-sm">
-      <div className={footerContainerClassName}>
+    <footer className="bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] pt-16 text-sm">
+      <div className={variants({ width: footerWidth })}>
         <div className="space-y-9">
           <div className="w-full grid lg:grid-cols-4 gap-8">
             <div className="flex flex-col gap-6">
@@ -98,7 +96,7 @@ export function Footer({
               )}
               {bio ? <div dangerouslySetInnerHTML={{ __html: bio }} /> : null}
               <div className="flex gap-4">
-                {socials.map((social) =>
+                {socialItems.map((social) =>
                   social.to ? (
                     <Link
                       key={social.name}
@@ -127,11 +125,9 @@ export function Footer({
                 <div className="flex gap-2">
                   <Input
                     placeholder={newsletterPlaceholder}
-                    className="max-w-80"
+                    className="max-w-96"
                   />
-                  <Button className="border-primary">
-                    {newsletterButtonText}
-                  </Button>
+                  <Button variant="secondary">{newsletterButtonText}</Button>
                 </div>
               </div>
             </div>
diff --git a/app/modules/Hero.tsx b/app/modules/Hero.tsx
deleted file mode 100644
index 4f20efd3..00000000
--- a/app/modules/Hero.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { MediaFile } from "@shopify/hydrogen";
-import type {
-  Media,
-  MediaImage,
-  Video as MediaVideo,
-} from "@shopify/hydrogen/storefront-api-types";
-import clsx from "clsx";
-
-import type { CollectionContentFragment } from "storefrontapi.generated";
-import { Heading, Link, Text } from "~/modules";
-
-type HeroProps = CollectionContentFragment & {
-  height?: "full";
-  top?: boolean;
-  loading?: HTMLImageElement["loading"];
-};
-
-/**
- * Hero component that renders metafields attached to collection resources
- **/
-export function Hero({
-  byline,
-  cta,
-  handle,
-  heading,
-  height,
-  loading,
-  spread,
-  spreadSecondary,
-  top,
-}: HeroProps) {
-  return (
-    <Link to={`/collections/${handle}`}>
-      <section
-        className={clsx(
-          "relative justify-end flex flex-col w-full",
-          top && "-mt-nav",
-          height === "full"
-            ? "h-screen"
-            : "aspect-[4/5] sm:aspect-square md:aspect-[5/4] lg:aspect-[3/2] xl:aspect-[2/1]",
-        )}
-      >
-        <div className="absolute inset-0 grid flex-grow grid-flow-col pointer-events-none auto-cols-fr -z-10 content-stretch overflow-clip">
-          {spread?.reference && (
-            <div>
-              <SpreadMedia
-                sizes={
-                  spreadSecondary?.reference
-                    ? "(min-width: 48em) 50vw, 100vw"
-                    : "100vw"
-                }
-                data={spread.reference as Media}
-                loading={loading}
-              />
-            </div>
-          )}
-          {spreadSecondary?.reference && (
-            <div className="hidden md:block">
-              <SpreadMedia
-                sizes="50vw"
-                data={spreadSecondary.reference as Media}
-                loading={loading}
-              />
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col items-baseline justify-between gap-4 px-6 py-8 sm:px-8 md:px-12 bg-gradient-to-t dark:from-contrast/60 dark:text-body from-primary/60 text-contrast">
-          {heading?.value && (
-            <Heading format as="h2" size="display" className="max-w-md">
-              {heading.value}
-            </Heading>
-          )}
-          {byline?.value && (
-            <Text format width="narrow" as="p" size="lead">
-              {byline.value}
-            </Text>
-          )}
-          {cta?.value && <Text size="lead">{cta.value}</Text>}
-        </div>
-      </section>
-    </Link>
-  );
-}
-
-type SpreadMediaProps = {
-  data: Media | MediaImage | MediaVideo;
-  loading?: HTMLImageElement["loading"];
-  sizes: string;
-};
-
-function SpreadMedia({ data, loading, sizes }: SpreadMediaProps) {
-  return (
-    <MediaFile
-      data={data}
-      className="block object-cover w-full h-full"
-      mediaOptions={{
-        video: {
-          controls: false,
-          muted: true,
-          loop: true,
-          playsInline: true,
-          autoPlay: true,
-          previewImageOptions: { src: data.previewImage?.url ?? "" },
-        },
-        image: {
-          loading,
-          crop: "center",
-          sizes,
-          alt: data.alt || "",
-        },
-      }}
-    />
-  );
-}
diff --git a/app/modules/Input.tsx b/app/modules/Input.tsx
index b69ae780..9480ac5a 100644
--- a/app/modules/Input.tsx
+++ b/app/modules/Input.tsx
@@ -20,9 +20,9 @@ let variants = cva(
       variant: {
         default: "leading-tight",
         search:
-          "px-0 py-2 text-2xl w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-bar/10 focus:border-bar/50",
+          "px-0 py-2 text-2xl w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-line/10 focus:border-line/50",
         minisearch:
-          "hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-bar/50",
+          "hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-line/50",
         error: "border-red-500",
       },
     },
@@ -53,7 +53,7 @@ export let Input = forwardRef<HTMLInputElement, InputProps>(
     let [focused, setFocused] = useState(false);
     let commonClasses = clsx(
       "w-full border px-3 py-3",
-      focused ? "border-bar/50" : "border-bar/30",
+      focused ? "border-line/50" : "border-line/30",
       className,
     );
 
@@ -95,7 +95,7 @@ export let Input = forwardRef<HTMLInputElement, InputProps>(
       <div
         className={clsx(
           commonClasses,
-          "flex gap-2.5 overflow-hidden items-center bg-primary p-2.5 border",
+          "flex gap-2.5 overflow-hidden items-center bg-background p-2.5 border",
         )}
       >
         {prefixElement}
diff --git a/app/modules/Modal.tsx b/app/modules/Modal.tsx
index ea48cd7e..b08dd41a 100644
--- a/app/modules/Modal.tsx
+++ b/app/modules/Modal.tsx
@@ -26,11 +26,11 @@ export function Modal({
       aria-modal="true"
       id="modal-bg"
     >
-      <div className="fixed inset-0 transition-opacity bg-opacity-75 bg-primary/40"></div>
+      <div className="fixed inset-0 transition-opacity bg-opacity-75 bg-background/40" />
       <div className="fixed inset-0 z-50 overflow-y-auto">
         <div className="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
           <div
-            className="relative flex-1 px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform rounded shadow-xl bg-contrast sm:my-12 sm:flex-none sm:p-6"
+            className="relative flex-1 px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform rounded shadow-xl bg-foreground sm:my-12 sm:flex-none sm:p-6"
             role="button"
             onClick={(e) => {
               e.stopPropagation();
diff --git a/app/modules/OrderCard.tsx b/app/modules/OrderCard.tsx
index 597bf075..7d4abdc3 100644
--- a/app/modules/OrderCard.tsx
+++ b/app/modules/OrderCard.tsx
@@ -18,7 +18,7 @@ export function OrderCard({ order }: { order: OrderCardFragment }) {
         prefetch="intent"
       >
         {lineItems[0].image && (
-          <div className="card-image aspect-square bg-primary/5">
+          <div className="card-image aspect-square bg-background/5">
             <Image
               width={168}
               height={168}
@@ -59,7 +59,7 @@ export function OrderCard({ order }: { order: OrderCardFragment }) {
                     className={`px-3 py-1 text-xs font-medium rounded-full ${
                       fulfillmentStatus === "SUCCESS"
                         ? "bg-green-100 text-green-800"
-                        : "bg-primary/5 text-primary/50"
+                        : "bg-background/5 text-body/50"
                     }`}
                   >
                     <Text size="fine">{statusMessage(fulfillmentStatus)}</Text>
diff --git a/app/modules/ProductCard.tsx b/app/modules/ProductCard.tsx
index df7c0d5a..c29f3c1b 100644
--- a/app/modules/ProductCard.tsx
+++ b/app/modules/ProductCard.tsx
@@ -57,7 +57,7 @@ export function ProductCard({
   return (
     <div className="flex flex-col gap-2">
       <div className={clsx("grid gap-4", className)}>
-        <div className="relative aspect-[4/5] bg-primary/5 group">
+        <div className="relative aspect-[4/5] bg-background/5 group">
           {image && (
             <Link
               onClick={onClick}
diff --git a/app/modules/ProductGallery.tsx b/app/modules/ProductGallery.tsx
index 67c32048..2244fb87 100644
--- a/app/modules/ProductGallery.tsx
+++ b/app/modules/ProductGallery.tsx
@@ -34,7 +34,7 @@ export function ProductGallery({
         const style = [
           isFullWidth ? "md:col-span-2" : "md:col-span-1",
           isFirst || isFourth ? "" : "md:aspect-[4/5]",
-          "aspect-square snap-center card-image bg-white dark:bg-contrast/10 w-mobileGallery md:w-full",
+          "aspect-square snap-center card-image bg-white w-mobileGallery md:w-full",
         ].join(" ");
 
         return (
diff --git a/app/modules/SortFilter.tsx b/app/modules/SortFilter.tsx
index 7730f88c..c9bb9e9e 100644
--- a/app/modules/SortFilter.tsx
+++ b/app/modules/SortFilter.tsx
@@ -46,11 +46,10 @@ export function SortFilter({
   return (
     <>
       <div className="flex items-center justify-between w-full">
-        {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
         <button
           onClick={() => setIsOpen(!isOpen)}
           className={
-            "relative flex items-center justify-center w-8 h-8 focus:ring-primary/5"
+            "relative flex items-center justify-center w-8 h-8 focus:ring-body/5"
           }
         >
           <IconFilters />
@@ -341,10 +340,9 @@ export default function SortMenu() {
         </span>
         <IconCaret />
       </Menu.Button>
-
       <Menu.Items
         as="nav"
-        className="absolute right-0 flex flex-col p-4 text-right rounded-sm bg-contrast"
+        className="absolute right-0 flex flex-col p-4 text-right rounded-sm"
       >
         {items.map((item) => (
           <Menu.Item key={item.label}>
diff --git a/app/modules/Text.tsx b/app/modules/Text.tsx
index ebf94bf9..7708a4d7 100644
--- a/app/modules/Text.tsx
+++ b/app/modules/Text.tsx
@@ -126,9 +126,9 @@ export function Section({
 
   const dividers = {
     none: "border-none",
-    top: "border-t border-bar/05",
-    bottom: "border-b border-bar/05",
-    both: "border-y border-bar/05",
+    top: "border-t border-line/05",
+    bottom: "border-b border-line/05",
+    both: "border-y border-line/05",
   };
 
   const displays = {
diff --git a/app/modules/global-loading.tsx b/app/modules/global-loading.tsx
index c7bfe814..6bb47e5e 100644
--- a/app/modules/global-loading.tsx
+++ b/app/modules/global-loading.tsx
@@ -35,7 +35,7 @@ export function GlobalLoading() {
       <div
         ref={ref}
         className={cx(
-          "h-full bg-gradient-to-r from-primary to-body transition-all duration-500 ease-in-out",
+          "h-full bg-gradient-to-r from-background to-body transition-all duration-500 ease-in-out",
           transition.state === "idle" &&
             (animating ? "w-full" : "w-0 opacity-0 transition-none"),
           transition.state === "submitting" && "w-4/12",
diff --git a/app/modules/header/DesktopHeader.tsx b/app/modules/header/DesktopHeader.tsx
index a4c68c57..95d2ea74 100644
--- a/app/modules/header/DesktopHeader.tsx
+++ b/app/modules/header/DesktopHeader.tsx
@@ -51,19 +51,19 @@ export function DesktopHeader({
   return (
     <header
       className={cn(
-        "hover:text-body hover:bg-primary",
+        "hover:text-body hover:bg-background",
         "transition-colors duration-300 ease-in-out",
         "h-nav hidden lg:flex items-center z-40 top-0 justify-between leading-none gap-8",
         "px-6 md:px-8 lg:px-12",
-        "text-body bg-primary",
-        "border-b border-header",
+        "text-body bg-background",
+        "border-b border-[rgb(230,230,230)]",
         scrolled && "shadow-header",
         enableTransparentHeader && isHome
           ? [
               "fixed w-screen group/header",
               !scrolled &&
                 !hovered &&
-                "text-primary bg-transparent border-transparent",
+                "text-body bg-transparent border-transparent",
             ]
           : "sticky",
       )}
@@ -77,7 +77,7 @@ export function DesktopHeader({
           openDrawer={openDrawer}
           closeDrawer={closeDrawer}
         />
-        <AccountLink className="relative flex items-center justify-center w-8 h-8 focus:ring-primary/5" />
+        <AccountLink className="relative flex items-center justify-center w-8 h-8 focus:ring-body/5" />
         <CartCount
           isHome={isHome}
           openCart={openCart}
@@ -134,7 +134,7 @@ function SearchToggle({
       <button
         type="button"
         onClick={openDrawer}
-        className="relative flex h-8 w-8 items-center justify-center focus:ring-primary/5"
+        className="relative flex h-8 w-8 items-center justify-center"
       >
         <IconMagnifyingGlass className="w-5 h-5" />
       </button>
diff --git a/app/modules/header/MobileHeader.tsx b/app/modules/header/MobileHeader.tsx
index a7406e08..3cd0889b 100644
--- a/app/modules/header/MobileHeader.tsx
+++ b/app/modules/header/MobileHeader.tsx
@@ -43,8 +43,8 @@ export function MobileHeader({
       className={clsx(
         enableTransparent ? "fixed w-screen" : "sticky",
         isTransparent
-          ? "bg-transparent text-primary"
-          : "shadow-header text-body bg-primary",
+          ? "bg-transparent text-body"
+          : "shadow-header text-body bg-background",
         "transition-colors duration-300 ease-in-out",
         "flex lg:hidden items-center h-nav z-40 top-0 justify-between w-full leading-none gap-4 px-4 md:px-8",
       )}
diff --git a/app/modules/index.ts b/app/modules/index.ts
index 2218f208..811be940 100644
--- a/app/modules/index.ts
+++ b/app/modules/index.ts
@@ -15,7 +15,6 @@ export { AccountDetails } from "./AccountDetails";
 export { AccountAddressBook } from "./AccountAddressBook";
 export { Modal } from "./Modal";
 export { Link } from "./Link";
-export { Hero } from "./Hero";
 export { SortFilter } from "./SortFilter";
 export { Grid } from "./Grid";
 export { FeaturedProducts } from "./FeaturedProducts";
diff --git a/app/modules/product-form/options.tsx b/app/modules/product-form/options.tsx
index c5053d41..c6ee7959 100644
--- a/app/modules/product-form/options.tsx
+++ b/app/modules/product-form/options.tsx
@@ -1,11 +1,40 @@
 import { Image } from "@shopify/hydrogen";
 import { useThemeSettings } from "@weaverse/hydrogen";
+import { cva } from "class-variance-authority";
 import clsx from "clsx";
+import { cn } from "~/lib/cn";
 import type { SwatchesConfigs } from "~/types/weaverse-hydrogen";
 
+let SIZE_MAP = {
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-12 h-12",
+};
+
+let BUTTON_SIZE_MAP = {
+  sm: "min-w-8 h-8",
+  md: "min-w-10 h-10",
+  lg: "min-w-12 h-12",
+};
+
+let variants = cva("", {
+  variants: {
+    size: {
+      sm: "min-w-8 h-8",
+      md: "min-w-10 h-10",
+      lg: "min-w-12 h-12",
+    },
+    shape: {
+      square: "",
+      circle: "rounded-full",
+      round: "rounded-md",
+    },
+  },
+});
+
 interface VariantOptionProps {
   selectedOptionValue: string;
-  onSelectOptionValue: (optionValue: string) => void;
+  onSelectOptionValue: (value: string) => void;
   name: string;
   values: {
     isActive: boolean;
@@ -17,18 +46,6 @@ interface VariantOptionProps {
   }[];
 }
 
-let SIZE_MAP = {
-  sm: "w-8 h-8",
-  md: "w-10 h-10",
-  lg: "w-12 h-12",
-};
-
-let BUTTON_SIZE_MAP = {
-  sm: "min-w-[32px] h-8",
-  md: "min-w-[40px] h-10",
-  lg: "min-w-[48px] h-12",
-};
-
 export function VariantOption(props: VariantOptionProps) {
   let { name, values, selectedOptionValue, onSelectOptionValue } = props;
   let themeSettings = useThemeSettings();
@@ -53,37 +70,29 @@ export function VariantOption(props: VariantOptionProps) {
     SIZE_MAP[size],
     roundedClassName,
   );
-
-  let defaultButtonClassName = clsx(
-    "border cursor-pointer",
-    BUTTON_SIZE_MAP[size],
-    "p-2 text-sm text-center",
-    roundedClassName,
-  );
-
   let disabledClassName = "diagonal opacity-50";
-  // show value by Type
   return (
     <div className="space-y-4">
       <legend className="whitespace-pre-wrap max-w-prose leading-snug min-w-[4rem]">
         <span className="font-bold">{displayName || name}:</span>
         <span className="ml-2">{selectedOptionValue}</span>
       </legend>
+
       {type === "button" && (
         <div className="flex gap-4">
-          {values.map((value) => (
+          {values.map(({ value, isAvailable }) => (
             <button
+              key={value}
               type="button"
-              key={value.value}
-              className={clsx(
-                defaultButtonClassName,
-                selectedOptionValue === value.value &&
-                  "bg-btn text-btn-content",
-                !value.isAvailable && "opacity-50 bg-btn/30",
+              className={cn(
+                "border cursor-pointer p-2 text-sm text-center",
+                variants({ size, shape }),
+                selectedOptionValue === value && "bg-btn text-btn-content",
+                !isAvailable && "opacity-50",
               )}
-              onClick={() => onSelectOptionValue(value.value)}
+              onClick={() => onSelectOptionValue(value)}
             >
-              {value.value}
+              {value}
             </button>
           ))}
         </div>
@@ -91,22 +100,22 @@ export function VariantOption(props: VariantOptionProps) {
 
       {type === "color" && (
         <div className="flex gap-4">
-          {values.map((value) => {
+          {values.map((optValue) => {
             let swatchColor: string =
-              swatches.colors.find((c) => c.name === value.value)?.value ||
-              value.value;
+              swatches.colors.find((c) => c.name === optValue.value)?.value ||
+              optValue.value;
             return (
               <button
+                key={optValue.value}
                 type="button"
-                key={value.value}
                 className={clsx(
                   defaultClassName,
                   "p-1",
-                  selectedOptionValue === value.value &&
-                    "border-2 border-bar/70",
-                  !value.isAvailable && disabledClassName,
+                  selectedOptionValue === optValue.value &&
+                    "border-2 border-line/70",
+                  !optValue.isAvailable && disabledClassName,
                 )}
-                onClick={() => onSelectOptionValue(value.value)}
+                onClick={() => onSelectOptionValue(optValue.value)}
               >
                 <div
                   className={clsx("w-full h-full", roundedClassName)}
@@ -121,21 +130,22 @@ export function VariantOption(props: VariantOptionProps) {
       )}
       {type === "custom-image" && (
         <div className="flex gap-4">
-          {values.map((value) => {
+          {values.map((optValue) => {
             let swatchImage =
-              swatches.images.find((i) => i.name === value.value)?.value || "";
+              swatches.images.find((i) => i.name === optValue.value)?.value ||
+              "";
             return (
               <button
                 type="button"
-                key={value.value}
+                key={optValue.value}
                 className={clsx(
                   defaultClassName,
                   "p-0.5",
-                  selectedOptionValue === value.value &&
-                    "border-2 border-bar/70",
-                  !value.isAvailable && disabledClassName,
+                  selectedOptionValue === optValue.value &&
+                    "border-2 border-line/70",
+                  !optValue.isAvailable && disabledClassName,
                 )}
-                onClick={() => onSelectOptionValue(value.value)}
+                onClick={() => onSelectOptionValue(optValue.value)}
               >
                 <Image
                   data={
@@ -143,7 +153,7 @@ export function VariantOption(props: VariantOptionProps) {
                       ? swatchImage
                       : {
                           url: swatchImage,
-                          altText: value.value,
+                          altText: optValue.value,
                         }
                   }
                   className={clsx(
@@ -159,20 +169,20 @@ export function VariantOption(props: VariantOptionProps) {
       )}
       {type === "variant-image" && (
         <div className="flex gap-4">
-          {values.map((value) => {
+          {values.map((optValue) => {
             return (
               <button
                 type="button"
-                key={value.value}
+                key={optValue.value}
                 className={clsx(
                   defaultClassName,
-                  selectedOptionValue === value.value &&
-                    "border-2 border-bar/70",
-                  !value.isAvailable && disabledClassName,
+                  selectedOptionValue === optValue.value &&
+                    "border-2 border-line/70",
+                  !optValue.isAvailable && disabledClassName,
                 )}
-                onClick={() => onSelectOptionValue(value.value)}
+                onClick={() => onSelectOptionValue(optValue.value)}
               >
-                <Image data={value.image} sizes="auto" />
+                <Image data={optValue.image} sizes="auto" />
               </button>
             );
           })}
@@ -204,7 +214,7 @@ export function VariantOption(props: VariantOptionProps) {
               className={clsx(
                 "leading-none py-1 cursor-pointer transition-all duration-200",
                 selectedOptionValue === value.value &&
-                  "border-bar/50 border-b-[1.5px]",
+                  "border-line/50 border-b-[1.5px]",
                 !value.isAvailable && "opacity-50",
               )}
               onClick={() => onSelectOptionValue(value.value)}
diff --git a/app/modules/product-form/placeholder.tsx b/app/modules/product-form/placeholder.tsx
index d1a9ec24..bac7bc8a 100644
--- a/app/modules/product-form/placeholder.tsx
+++ b/app/modules/product-form/placeholder.tsx
@@ -32,7 +32,7 @@ export function ProductPlaceholder(props: any) {
                 </legend>
                 <div className="flex flex-wrap items-baseline gap-4">
                   <a
-                    className="leading-none py-1 cursor-pointer transition-all duration-200 border-bar/50 border-b-[1.5px] opacity-100"
+                    className="leading-none py-1 cursor-pointer transition-all duration-200 border-line/50 border-b-[1.5px] opacity-100"
                     href="/"
                   >
                     OS
@@ -57,7 +57,7 @@ export function ProductPlaceholder(props: any) {
                 </legend>
                 <div className="flex flex-wrap items-baseline gap-4">
                   <a
-                    className="leading-none py-1 cursor-pointer transition-all duration-200 border-bar/50 border-b-[1.5px] opacity-100"
+                    className="leading-none py-1 cursor-pointer transition-all duration-200 border-line/50 border-b-[1.5px] opacity-100"
                     href="/"
                   >
                     black
diff --git a/app/routes/($locale).account.orders.$id.tsx b/app/routes/($locale).account.orders.$id.tsx
index 7dc78656..eed40bd2 100644
--- a/app/routes/($locale).account.orders.$id.tsx
+++ b/app/routes/($locale).account.orders.$id.tsx
@@ -294,7 +294,7 @@ export default function OrderRoute() {
                     `mt-3 px-3 py-1 text-xs font-medium rounded-full inline-block w-auto`,
                     fulfillmentStatus === "SUCCESS"
                       ? "bg-green-100 text-green-800"
-                      : "bg-primary/20 text-primary/50",
+                      : "bg-background/20 text-body/50",
                   )}
                 >
                   <Text size="fine">{statusMessage(fulfillmentStatus!)}</Text>
diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx
index 9fff50da..78e4935a 100644
--- a/app/routes/($locale).account.tsx
+++ b/app/routes/($locale).account.tsx
@@ -110,7 +110,7 @@ function Account({ customer, heading, featuredDataPromise }: AccountType) {
     <>
       <PageHeader heading={heading}>
         <Form method="post" action={usePrefixPathWithLocale("/account/logout")}>
-          <button type="submit" className="text-primary/50">
+          <button type="submit" className="text-body/50">
             Sign out
           </button>
         </Form>
diff --git a/app/routes/($locale).search.tsx b/app/routes/($locale).search.tsx
index 75a70202..88b57090 100644
--- a/app/routes/($locale).search.tsx
+++ b/app/routes/($locale).search.tsx
@@ -123,13 +123,13 @@ export default function Search() {
               return (
                 <>
                   <div className="flex items-center justify-center mt-6">
-                    <PreviousLink className="inline-block rounded font-medium text-center py-3 px-6 border border-primary/10 bg-contrast text-primary w-full">
+                    <PreviousLink className="inline-block rounded font-medium text-center py-3 px-6 bg-foreground text-body w-full">
                       {isLoading ? "Loading..." : "Previous"}
                     </PreviousLink>
                   </div>
                   <Grid data-test="product-grid">{itemsMarkup}</Grid>
                   <div className="flex items-center justify-center mt-6">
-                    <NextLink className="inline-block rounded font-medium text-center py-3 px-6 border border-primary/10 bg-contrast text-primary w-full">
+                    <NextLink className="inline-block rounded font-medium text-center py-3 px-6 bg-foreground text-body w-full">
                       {isLoading ? "Loading..." : "Next"}
                     </NextLink>
                   </div>
diff --git a/app/sections/ali-reviews/review-bar.tsx b/app/sections/ali-reviews/review-bar.tsx
index 3f6714ac..09b3ea2d 100644
--- a/app/sections/ali-reviews/review-bar.tsx
+++ b/app/sections/ali-reviews/review-bar.tsx
@@ -17,7 +17,7 @@ export function ReviewBar(review: {
           style={{ width: `${review.avg * 100}%` }}
         />
       </div>
-      <div className="w-8 shrink-0 text-right text-sm font-medium leading-none text-primary-700 sm:w-auto sm:text-left">
+      <div className="w-8 shrink-0 text-right text-sm font-medium leading-none text-body-700 sm:w-auto sm:text-left">
         {review.count} <span className="hidden sm:inline">reviews</span>
       </div>
     </div>
diff --git a/app/sections/all-products.tsx b/app/sections/all-products.tsx
index 964cb552..e6cea41d 100644
--- a/app/sections/all-products.tsx
+++ b/app/sections/all-products.tsx
@@ -5,7 +5,6 @@ import type {
   HydrogenComponentSchema,
 } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
-
 import type { AllProductsQuery } from "storefrontapi.generated";
 import { getImageLoadingPriority } from "~/lib/const";
 import { Grid, PageHeader, ProductCard, Section } from "~/modules";
@@ -52,13 +51,13 @@ let AllProducts = forwardRef<HTMLElement, AllProductsProps>((props, ref) => {
               return (
                 <>
                   <div className="flex items-center justify-center mt-6">
-                    <PreviousLink className="inline-block rounded font-medium text-center py-3 px-6 border border-bar/10 bg-contrast text-body w-full">
+                    <PreviousLink className="inline-block rounded font-medium text-center py-3 px-6 border border-line/10 text-body w-full">
                       {isLoading ? "Loading..." : prevPageText}
                     </PreviousLink>
                   </div>
                   <Grid data-test="product-grid">{itemsMarkup}</Grid>
                   <div className="flex items-center justify-center mt-6">
-                    <NextLink className="inline-block rounded font-medium text-center py-3 px-6 border border-bar/10 bg-contrast text-body w-full">
+                    <NextLink className="inline-block rounded font-medium text-center py-3 px-6 border border-line/10 text-body w-full">
                       {isLoading ? "Loading..." : nextPageText}
                     </NextLink>
                   </div>
diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
index b0f368ed..71719d21 100644
--- a/app/sections/collection-filters/index.tsx
+++ b/app/sections/collection-filters/index.tsx
@@ -7,11 +7,9 @@ import type {
 } from "@weaverse/hydrogen";
 import { forwardRef, useState } from "react";
 import { useInView } from "react-intersection-observer";
-
 import type { CollectionDetailsQuery } from "storefrontapi.generated";
-import { Button, PageHeader, Section, SortFilter, Text } from "~/modules";
+import { Button, PageHeader, Section, Text } from "~/modules";
 import type { AppliedFilter } from "~/modules/SortFilter";
-
 import { DrawerFilter } from "~/modules/DrawerFilter";
 import { ProductsLoadedOnScroll } from "./products-loaded-on-scroll";
 
diff --git a/app/sections/collection-list/collection-card.tsx b/app/sections/collection-list/collection-card.tsx
index fd1f225a..015285ee 100644
--- a/app/sections/collection-list/collection-card.tsx
+++ b/app/sections/collection-list/collection-card.tsx
@@ -14,7 +14,7 @@ export function CollectionCard({
 }) {
   return (
     <Link to={`/collections/${collection.handle}`} className="grid gap-4">
-      <div className="card-image bg-primary/5 aspect-[3/2]">
+      <div className="card-image bg-background/5 aspect-[3/2]">
         {collection?.image && (
           <Image
             data={collection.image}
diff --git a/app/sections/product-information/product-detail.tsx b/app/sections/product-information/product-detail.tsx
index ec6f763c..d31096d2 100644
--- a/app/sections/product-information/product-detail.tsx
+++ b/app/sections/product-information/product-detail.tsx
@@ -38,7 +38,7 @@ export function ProductDetail({
             {learnMore && (
               <div className="">
                 <Link
-                  className="pb-px border-b border-bar/30 text-body/50"
+                  className="pb-px border-b border-line/30 text-body/50"
                   to={learnMore}
                 >
                   Learn more
diff --git a/app/styles/app.css b/app/styles/app.css
index b8717553..ea44144c 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -35,7 +35,7 @@
   }
 
   body {
-    @apply bg-primary text-body/90 antialiased;
+    @apply bg-background text-body/90 antialiased;
   }
 
   html {
@@ -151,7 +151,7 @@
       top: 50%;
       transform: translateY(-50%);
       background: rgb(var(--color-border));
-      box-shadow: 0.5px 0.5px 0px 0.5px rgb(var(--color-contrast));
+      box-shadow: 0.5px 0.5px 0px 0.5px rgb(var(--color-lines));
     }
   }
 
@@ -277,4 +277,4 @@ mark {
 
 #announcement-bar ~ header {
   top: var(--announcement-bar-height, 0px);
-}
\ No newline at end of file
+}
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index eab48a72..55c64c1b 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -260,6 +260,12 @@ export let themeSchema: HydrogenThemeSchema = {
           type: "heading",
           label: "General",
         },
+        {
+          type: "color",
+          label: "Text",
+          name: "colorText",
+          defaultValue: "#0F0F0F",
+        },
         {
           type: "color",
           label: "Background",
@@ -268,14 +274,14 @@ export let themeSchema: HydrogenThemeSchema = {
         },
         {
           type: "color",
-          label: "Text",
-          name: "colorText",
-          defaultValue: "#0F0F0F",
+          label: "Foreground",
+          name: "colorForeground",
+          defaultValue: "#e5e7eb",
         },
         {
           type: "color",
           label: "Lines and borders",
-          name: "colorLines",
+          name: "colorLine",
           defaultValue: "#a8a29e",
         },
         {
@@ -285,13 +291,13 @@ export let themeSchema: HydrogenThemeSchema = {
         {
           type: "color",
           label: "Announcement text",
-          name: "announcementBarTextColor",
+          name: "topbarTextColor",
           defaultValue: "#ffffff",
         },
         {
           type: "color",
           label: "Announcement background",
-          name: "announcementBarBgColor",
+          name: "topbarBgColor",
           defaultValue: "#000000",
         },
         {
diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index 5bc22721..61d5cc67 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -23,11 +23,12 @@ export function GlobalStyle() {
   let settings = useThemeSettings();
   if (settings) {
     let {
-      colorBackground,
       colorText,
-      colorLines,
-      announcementBarTextColor,
-      announcementBarBgColor,
+      colorBackground,
+      colorForeground,
+      colorLine,
+      topbarTextColor,
+      topbarBgColor,
       headerBgColor,
       headerText,
       transparentHeaderText,
@@ -69,20 +70,21 @@ export function GlobalStyle() {
               --page-width: ${pageWidth}px;
 
               /* Colors */
+              --color-text: ${hexToRgbString(colorText)};
               --color-background: ${hexToRgbString(colorBackground)};
-              --color-text: ${colorText};
-              --color-lines: ${hexToRgbString(colorLines)};
-              --color-announcement-bar-text: ${hexToRgbString(announcementBarTextColor)};
-              --color-announcement-bar-bg: ${hexToRgbString(announcementBarBgColor)};
+              --color-foreground: ${hexToRgbString(colorForeground)};
+              --color-line: ${hexToRgbString(colorLine)};
+              --color-topbar-text: ${hexToRgbString(topbarTextColor)};
+              --color-topbar-bg: ${hexToRgbString(topbarBgColor)};
               --color-header-bg: ${hexToRgbString(headerBgColor)};
               --color-header-text: ${hexToRgbString(headerText)};
               --color-transparent-header-text: ${hexToRgbString(transparentHeaderText)};
               --color-footer-bg: ${hexToRgbString(footerBgColor)};
               --color-footer-text: ${hexToRgbString(footerText)};
               --color-button-primary-bg: ${hexToRgbString(buttonPrimaryBg)};
-              --color-button-primary-color: ${hexToRgbString(buttonPrimaryColor)};
+              --color-button-primary-text: ${hexToRgbString(buttonPrimaryColor)};
               --color-button-secondary-bg: ${hexToRgbString(buttonSecondaryBg)};
-              --color-button-secondary-color: ${hexToRgbString(buttonSecondaryColor)};
+              --color-button-secondary-text: ${hexToRgbString(buttonSecondaryColor)};
               --color-button-outline-text-and-border: ${hexToRgbString(buttonOutlineTextAndBorder)};
               --color-drawers-bg: ${hexToRgbString(drawersBg)};
               --color-compare-price-text: ${hexToRgbString(comparePriceTextColor)};

From 21737a8ed26bdeb81649e525e864802bf37d0c69 Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Tue, 13 Aug 2024 10:09:58 +0700
Subject: [PATCH 07/12] Fix header & footer styles

---
 app/modules/Footer.tsx               | 12 ++++-----
 app/modules/header/DesktopHeader.tsx |  2 +-
 app/styles/app.css                   |  2 +-
 app/weaverse/schema.server.ts        |  2 +-
 app/weaverse/style.tsx               | 38 ++++++++++++++--------------
 5 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/app/modules/Footer.tsx b/app/modules/Footer.tsx
index 55bb2b28..c238771a 100644
--- a/app/modules/Footer.tsx
+++ b/app/modules/Footer.tsx
@@ -112,14 +112,14 @@ export function Footer({
               </div>
             </div>
             <div className="flex flex-col gap-6">
-              <h4 className="text-base">{addressTitle}</h4>
+              <div className="text-base">{addressTitle}</div>
               <div>
                 <p>{storeAddress}</p>
                 <p>Email: {storeEmail}</p>
               </div>
             </div>
             <div className="flex flex-col gap-6 col-span-2">
-              <h4 className="text-base">{newsletterTitle}</h4>
+              <div className="text-base">{newsletterTitle}</div>
               <div className="space-y-2">
                 <p>{newsletterDescription}</p>
                 <div className="flex gap-2">
@@ -168,13 +168,13 @@ function FooterMenu({
     <div className="flex flex-col gap-4 lg:gap-8">
       <Disclosure defaultOpen>
         <DisclosureButton className="lg:hidden text-left">
-          <h4 className="text-base">
+          <div className="text-base">
             {to === "#" ? title : <Link to={to}>{title}</Link>}
-          </h4>
+          </div>
         </DisclosureButton>
-        <h4 className="text-base hidden lg:block">
+        <div className="text-base hidden lg:block">
           {to === "#" ? title : <Link to={to}>{title}</Link>}
-        </h4>
+        </div>
         <DisclosurePanel>
           <div className="flex flex-col gap-2">
             {items.map((item, ind) => (
diff --git a/app/modules/header/DesktopHeader.tsx b/app/modules/header/DesktopHeader.tsx
index 95d2ea74..83846914 100644
--- a/app/modules/header/DesktopHeader.tsx
+++ b/app/modules/header/DesktopHeader.tsx
@@ -63,7 +63,7 @@ export function DesktopHeader({
               "fixed w-screen group/header",
               !scrolled &&
                 !hovered &&
-                "text-body bg-transparent border-transparent",
+                "text-[var(--color-transparent-header-text)] bg-transparent border-transparent",
             ]
           : "sticky",
       )}
diff --git a/app/styles/app.css b/app/styles/app.css
index ea44144c..8a0558d8 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -176,7 +176,7 @@
   overflow: hidden;
   &::before {
     content: "";
-    @apply absolute -rotate-45 bg-bar/30;
+    @apply absolute -rotate-45 bg-line/30;
     z-index: 1;
     left: -1px;
     bottom: -1px;
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index 55c64c1b..d86e0e11 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -320,7 +320,7 @@ export let themeSchema: HydrogenThemeSchema = {
           type: "color",
           label: "Transparent header text",
           name: "transparentHeaderText",
-          defaultValue: "#000000",
+          defaultValue: "#ffffff",
         },
         {
           type: "heading",
diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx
index 61d5cc67..6881d16a 100644
--- a/app/weaverse/style.tsx
+++ b/app/weaverse/style.tsx
@@ -74,25 +74,25 @@ export function GlobalStyle() {
               --color-background: ${hexToRgbString(colorBackground)};
               --color-foreground: ${hexToRgbString(colorForeground)};
               --color-line: ${hexToRgbString(colorLine)};
-              --color-topbar-text: ${hexToRgbString(topbarTextColor)};
-              --color-topbar-bg: ${hexToRgbString(topbarBgColor)};
-              --color-header-bg: ${hexToRgbString(headerBgColor)};
-              --color-header-text: ${hexToRgbString(headerText)};
-              --color-transparent-header-text: ${hexToRgbString(transparentHeaderText)};
-              --color-footer-bg: ${hexToRgbString(footerBgColor)};
-              --color-footer-text: ${hexToRgbString(footerText)};
-              --color-button-primary-bg: ${hexToRgbString(buttonPrimaryBg)};
-              --color-button-primary-text: ${hexToRgbString(buttonPrimaryColor)};
-              --color-button-secondary-bg: ${hexToRgbString(buttonSecondaryBg)};
-              --color-button-secondary-text: ${hexToRgbString(buttonSecondaryColor)};
-              --color-button-outline-text-and-border: ${hexToRgbString(buttonOutlineTextAndBorder)};
-              --color-drawers-bg: ${hexToRgbString(drawersBg)};
-              --color-compare-price-text: ${hexToRgbString(comparePriceTextColor)};
-              --color-sale-tag: ${hexToRgbString(saleTagColor)};
-              --color-new-tag: ${hexToRgbString(newTagColor)};
-              --color-other-tag: ${hexToRgbString(otherTagColor)};
-              --color-sold-out-and-unavailable: ${hexToRgbString(soldOutAndUnavailable)};
-              --color-star-rating: ${hexToRgbString(starRating)};
+              --color-topbar-text: ${topbarTextColor};
+              --color-topbar-bg: ${topbarBgColor};
+              --color-header-bg: ${headerBgColor};
+              --color-header-text: ${headerText};
+              --color-transparent-header-text: ${transparentHeaderText};
+              --color-footer-bg: ${footerBgColor};
+              --color-footer-text: ${footerText};
+              --color-button-primary-bg: ${buttonPrimaryBg};
+              --color-button-primary-text: ${buttonPrimaryColor};
+              --color-button-secondary-bg: ${buttonSecondaryBg};
+              --color-button-secondary-text: ${buttonSecondaryColor};
+              --color-button-outline-text-and-border: ${buttonOutlineTextAndBorder};
+              --color-drawers-bg: ${drawersBg};
+              --color-compare-price-text: ${comparePriceTextColor};
+              --color-sale-tag: ${saleTagColor};
+              --color-new-tag: ${newTagColor};
+              --color-other-tag: ${otherTagColor};
+              --color-sold-out-and-unavailable: ${soldOutAndUnavailable};
+              --color-star-rating: ${starRating};
 
               /* Typography */
               --body-base-size: ${bodyBaseSize}px;

From b2607dd96b8bc20a137446c9e5c5ff33d86805e2 Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Tue, 13 Aug 2024 10:17:02 +0700
Subject: [PATCH 08/12] Fix cart drawer issues

---
 app/modules/Cart.tsx                  | 9 ++++-----
 app/modules/Drawer.tsx                | 7 +++----
 app/modules/product-form/quantity.tsx | 2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/modules/Cart.tsx b/app/modules/Cart.tsx
index 8067c45e..f7206c5a 100644
--- a/app/modules/Cart.tsx
+++ b/app/modules/Cart.tsx
@@ -279,7 +279,7 @@ function CartLineItem({ line }: { line: CartLine }) {
 
       <div className="flex justify-between flex-grow">
         <div className="grid gap-2">
-          <Heading as="h3" size="copy">
+          <div>
             {merchandise?.product?.handle ? (
               <Link to={`/products/${merchandise.product.handle}`}>
                 {merchandise?.product?.title || ""}
@@ -287,8 +287,7 @@ function CartLineItem({ line }: { line: CartLine }) {
             ) : (
               <Text>{merchandise?.product?.title || ""}</Text>
             )}
-          </Heading>
-
+          </div>
           <div className="grid pb-2">
             {(merchandise?.selectedOptions || [])
               .filter((option) => option.value !== "Default Title")
@@ -358,7 +357,7 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) {
             type="button"
             name="decrease-quantity"
             aria-label="Decrease quantity"
-            className="w-10 h-10 transition disabled:text-body/10"
+            className="w-10 h-10 transition disabled:text-body/50 disabled:cursor-not-allowed"
             value={prevQuantity}
             disabled={optimisticQuantity <= 1 || isOptimistic}
           >
@@ -377,7 +376,7 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) {
         <UpdateCartButton lines={[{ id: lineId, quantity: nextQuantity }]}>
           <button
             type="button"
-            className="w-10 h-10 transition disabled:text-body/10"
+            className="w-10 h-10 transition disabled:text-body/50 disabled:cursor-not-allowed"
             name="increase-quantity"
             value={nextQuantity}
             aria-label="Increase quantity"
diff --git a/app/modules/Drawer.tsx b/app/modules/Drawer.tsx
index 62bff47d..54ed01cb 100644
--- a/app/modules/Drawer.tsx
+++ b/app/modules/Drawer.tsx
@@ -7,9 +7,8 @@ import {
 import { useLocation } from "@remix-run/react";
 import clsx from "clsx";
 import { Fragment, useEffect, useState } from "react";
-import { IconCaretLeft } from "~/components/Icons";
+import { IconCaretLeft, IconX } from "~/components/Icons";
 import { cn } from "~/lib/cn";
-import { IconClose } from "~/modules";
 
 /**
  * Drawer component that opens on user click.
@@ -125,7 +124,7 @@ export function Drawer({
                       )}
                       {heading !== null && (
                         <DialogTitle>
-                          <h4 className="font-medium text-base">{heading}</h4>
+                          <div className="font-medium text-base">{heading}</div>
                         </DialogTitle>
                       )}
                       {!isBackMenu && (
@@ -135,7 +134,7 @@ export function Drawer({
                           onClick={onClose}
                           data-test="close-cart"
                         >
-                          <IconClose aria-label="Close panel" />
+                          <IconX aria-label="Close panel" />
                         </button>
                       )}
                     </header>
diff --git a/app/modules/product-form/quantity.tsx b/app/modules/product-form/quantity.tsx
index 7ab81678..2fac6023 100644
--- a/app/modules/product-form/quantity.tsx
+++ b/app/modules/product-form/quantity.tsx
@@ -11,7 +11,7 @@ export function Quantity(props: QuantityProps) {
       e.key !== "Delete" &&
       e.key !== "ArrowLeft" &&
       e.key !== "ArrowRight" &&
-      isNaN(Number(e.key))
+      Number.isNaN(Number(e.key))
     ) {
       e.preventDefault();
     }

From 5e1072f1861ada98008532662d8f316adff92efb Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Tue, 13 Aug 2024 10:19:59 +0700
Subject: [PATCH 09/12] Fix button class-names

---
 app/components/Button.tsx | 46 +++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index f021b323..62ee5488 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -23,39 +23,39 @@ let variants = cva(
       variant: {
         primary: [
           "border px-4 py-3",
-          "text-[var(--color-button-primary-text))]",
-          "bg-[var(--color-button-primary-bg))]",
-          "border-[var(--color-button-primary-bg))]",
-          "hover:bg-[var(--color-button-primary-text))]",
-          "hover:text-[var(--color-button-primary-bg))]",
-          "hover:border-[var(--color-button-primary-text))]",
+          "text-[var(--color-button-primary-text)]",
+          "bg-[var(--color-button-primary-bg)]",
+          "border-[var(--color-button-primary-bg)]",
+          "hover:bg-[var(--color-button-primary-text)]",
+          "hover:text-[var(--color-button-primary-bg)]",
+          "hover:border-[var(--color-button-primary-text)]",
         ],
         secondary: [
           "border px-4 py-3",
-          "text-[var(--color-button-secondary-text))]",
-          "bg-[var(--color-button-secondary-bg))]",
-          "border-[var(--color-button-secondary-bg))]",
-          "hover:bg-[var(--color-button-secondary-text))]",
-          "hover:text-[var(--color-button-secondary-bg))]",
-          "hover:border-[var(--color-button-secondary-text))]",
+          "text-[var(--color-button-secondary-text)]",
+          "bg-[var(--color-button-secondary-bg)]",
+          "border-[var(--color-button-secondary-bg)]",
+          "hover:bg-[var(--color-button-secondary-text)]",
+          "hover:text-[var(--color-button-secondary-bg)]",
+          "hover:border-[var(--color-button-secondary-text)]",
         ],
         outline: [
           "border px-4 py-3",
-          "text-[var(--color-button-outline-text-and-border))]",
+          "text-[var(--color-button-outline-text-and-border)]",
           "bg-transparent",
-          "border-[var(--color-button-outline-text-and-border))]",
-          "hover:bg-[var(--color-button-outline-text-and-border))]",
-          "hover:text-[var(--color-text))]",
-          "hover:border-[var(--color-button-outline-text-and-border))]",
+          "border-[var(--color-button-outline-text-and-border)]",
+          "hover:bg-[var(--color-button-outline-text-and-border)]",
+          "hover:text-[var(--color-text)]",
+          "hover:border-[var(--color-button-outline-text-and-border)]",
         ],
         custom: [
           "border px-4 py-3",
-          "text-[var(--color-button-text))]",
-          "bg-[var(--color-button-bg))]",
-          "border-[var(--color-button-border))]",
-          "hover:bg-[var(--color-button-bg-hover))]",
-          "hover:text-[var(--color-button-text-hover))]",
-          "hover:border-[var(--color-button-border-hover))]",
+          "text-[var(--color-button-text)]",
+          "bg-[var(--color-button-bg)]",
+          "border-[var(--color-button-border)]",
+          "hover:bg-[var(--color-button-bg-hover)]",
+          "hover:text-[var(--color-button-text-hover)]",
+          "hover:border-[var(--color-button-border-hover)]",
         ],
         link: [
           "bg-transparent py-2 border-b",

From d83e9097deca3c97fb2f0a8b917930488a6ea18e Mon Sep 17 00:00:00 2001
From: hta218 <huynhtuananh21895@gmail.com>
Date: Tue, 13 Aug 2024 10:33:40 +0700
Subject: [PATCH 10/12] Fix announcement bar minor issues

---
 app/components/Marquee.tsx             | 10 ++++++++--
 app/modules/header/AnnouncementBar.tsx | 18 ++++++++++--------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/components/Marquee.tsx b/app/components/Marquee.tsx
index 0026bc61..605440cb 100644
--- a/app/components/Marquee.tsx
+++ b/app/components/Marquee.tsx
@@ -1,4 +1,10 @@
-import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
+import {
+  type CSSProperties,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 interface MarqueeProps {
   children: React.ReactNode;
@@ -27,7 +33,7 @@ export function Marquee({
       style={
         {
           "--animation-speed": `${animationTime}s`,
-          "--gap": `${gap}s`,
+          "--gap": `${gap}px`,
         } as CSSProperties
       }
     >
diff --git a/app/modules/header/AnnouncementBar.tsx b/app/modules/header/AnnouncementBar.tsx
index 527ba964..df964b65 100644
--- a/app/modules/header/AnnouncementBar.tsx
+++ b/app/modules/header/AnnouncementBar.tsx
@@ -8,13 +8,15 @@ const storageKey = "hide-announcement-bar";
 
 function standardizeContent(content: string) {
   // remove br, p, div and \n
-  return content ? content
-    .replace(/<br\/?>/g, "")
-    .replace(/<p>/g, "")
-    .replace(/<\/p>/g, "")
-    .replace(/<div>/g, "")
-    .replace(/<\/div>/g, "")
-    .replace(/\n/g, "") : ''
+  return content
+    ? content
+        .replace(/<br\/?>/g, "")
+        .replace(/<p>/g, "")
+        .replace(/<\/p>/g, "")
+        .replace(/<div>/g, "")
+        .replace(/<\/div>/g, "")
+        .replace(/\n/g, "")
+    : "";
 }
 
 export function AnnouncementBar() {
@@ -32,7 +34,7 @@ export function AnnouncementBar() {
     scrollingGap,
     scrollingSpeed,
   } = themeSettings;
-  const standardContent = standardizeContent(announcementBarText);
+  const standardContent = announcementBarText;
   const settings = {
     content: standardContent,
     announcementBarTextColor,

From 2352364b15d3ec934496d39aedfab4b0d1431a9c Mon Sep 17 00:00:00 2001
From: Paul <phanminh65@gmail.com>
Date: Tue, 13 Aug 2024 12:22:38 +0700
Subject: [PATCH 11/12] Update to latest Hydrogen & Weaverse (August 2024)

---
 .env.example                                  |   2 +-
 CHANGELOG.md                                  |   7 ++
 app/entry.client.tsx                          |  18 ++--
 app/entry.server.tsx                          |   2 +-
 app/lib/context.ts                            |  54 ++++++++++
 app/modules/CustomAnalytics.tsx               |   7 +-
 app/routes/($locale).account.address.$id.tsx  |   4 +-
 app/routes/($locale).account.orders.$id.tsx   |   2 +-
 .../{create-weaverse.server.ts => csp.ts}     |  12 ---
 env.d.ts                                      |  54 ++++------
 package.json                                  |  38 +++----
 server.ts                                     | 101 ++++--------------
 12 files changed, 137 insertions(+), 164 deletions(-)
 create mode 100644 app/lib/context.ts
 rename app/weaverse/{create-weaverse.server.ts => csp.ts} (73%)

diff --git a/.env.example b/.env.example
index 0bfc23dd..833ddc87 100644
--- a/.env.example
+++ b/.env.example
@@ -18,4 +18,4 @@ WEAVERSE_PROJECT_ID=clptu3l4p001sxfsn1u9jzqnm
 # Additional services
 #PUBLIC_GOOGLE_GTM_ID=G-R1KFYYKE48
 #JUDGEME_PRIVATE_API_TOKEN="your-judgeme-private-api-token"
-
+#ALI_REVIEWS_API_KEY="your-ali-reviews-api-key"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b834e36a..c47997c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @weaverse/pilot
 
+## 2.7.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @weaverse/hydrogen@3.4.0
+
 ## 2.6.8
 
 ### Patch Changes
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
index 7860ee32..08325f6d 100644
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -2,11 +2,13 @@ import { RemixBrowser } from "@remix-run/react";
 import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
 
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>,
-  );
-});
+if (!window.location.origin.includes("webcache.googleusercontent.com")) {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index 58391b16..42cfc55b 100644
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -4,7 +4,7 @@ import type { AppLoadContext, EntryContext } from "@shopify/remix-oxygen";
 import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";
 
-import { getWeaverseCsp } from "~/weaverse/create-weaverse.server";
+import { getWeaverseCsp } from "~/weaverse/csp";
 
 export default async function handleRequest(
   request: Request,
diff --git a/app/lib/context.ts b/app/lib/context.ts
new file mode 100644
index 00000000..adb6d2ba
--- /dev/null
+++ b/app/lib/context.ts
@@ -0,0 +1,54 @@
+import { createHydrogenContext } from "@shopify/hydrogen";
+import { WeaverseClient } from "@weaverse/hydrogen";
+import { CART_QUERY_FRAGMENT } from "~/data/fragments";
+import { AppSession } from "~/lib/session";
+import { getLocaleFromRequest } from "~/lib/utils";
+import { components } from "~/weaverse/components";
+import { themeSchema } from "~/weaverse/schema.server";
+
+/**
+ * The context implementation is separate from server.ts
+ * so that type can be extracted for AppLoadContext
+ * */
+export async function createAppLoadContext(
+  request: Request,
+  env: Env,
+  executionContext: ExecutionContext,
+) {
+  /**
+   * Open a cache instance in the worker and a custom session instance.
+   */
+  if (!env?.SESSION_SECRET) {
+    throw new Error("SESSION_SECRET environment variable is not set");
+  }
+
+  const waitUntil = executionContext.waitUntil.bind(executionContext);
+  const [cache, session] = await Promise.all([
+    caches.open("hydrogen"),
+    AppSession.init(request, [env.SESSION_SECRET]),
+  ]);
+
+  const hydrogenContext = createHydrogenContext({
+    env,
+    request,
+    cache,
+    waitUntil,
+    session,
+    i18n: getLocaleFromRequest(request),
+    cart: {
+      queryFragment: CART_QUERY_FRAGMENT,
+    },
+  });
+
+  return {
+    ...hydrogenContext,
+    // declare additional Remix loader context
+    weaverse: new WeaverseClient({
+      ...hydrogenContext,
+      request,
+      cache,
+      themeSchema,
+      components,
+    }),
+  };
+}
diff --git a/app/modules/CustomAnalytics.tsx b/app/modules/CustomAnalytics.tsx
index 45d715fd..b56f3450 100644
--- a/app/modules/CustomAnalytics.tsx
+++ b/app/modules/CustomAnalytics.tsx
@@ -1,10 +1,12 @@
 import { useRouteLoaderData } from "@remix-run/react";
-import { Script, useAnalytics } from "@shopify/hydrogen";
+import { Script, useAnalytics, useNonce } from "@shopify/hydrogen";
 import { useEffect } from "react";
 import type { RootLoader } from "~/root";
 
 export function CustomAnalytics() {
   const { subscribe, canTrack } = useAnalytics();
+  const nonce = useNonce();
+
   const data = useRouteLoaderData<RootLoader>("root");
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
@@ -44,7 +46,8 @@ export function CustomAnalytics() {
   return (
     <>
       {/* Initialize GTM container */}
-      <Script
+      <script
+        nonce={nonce}
         suppressHydrationWarning
         dangerouslySetInnerHTML={{
           __html: `
diff --git a/app/routes/($locale).account.address.$id.tsx b/app/routes/($locale).account.address.$id.tsx
index 0480159f..53bdd325 100644
--- a/app/routes/($locale).account.address.$id.tsx
+++ b/app/routes/($locale).account.address.$id.tsx
@@ -52,8 +52,8 @@ export const action: ActionFunction = async ({ request, context, params }) => {
       invariant(!errors?.length, errors?.[0]?.message);
 
       invariant(
-        !data?.customerAddressUpdate?.userErrors?.length,
-        data?.customerAddressUpdate?.userErrors?.[0]?.message,
+        !data?.customerAddressDelete?.userErrors?.length,
+        data?.customerAddressDelete?.userErrors?.[0]?.message,
       );
 
       return redirect(
diff --git a/app/routes/($locale).account.orders.$id.tsx b/app/routes/($locale).account.orders.$id.tsx
index eed40bd2..33f47f0c 100644
--- a/app/routes/($locale).account.orders.$id.tsx
+++ b/app/routes/($locale).account.orders.$id.tsx
@@ -31,7 +31,7 @@ export async function loader({ request, context, params }: LoaderFunctionArgs) {
       { variables: { orderId } },
     );
 
-    if (errors?.length || !data?.order || !data?.lineItems) {
+    if (errors?.length || !data?.order?.lineItems) {
       throw new Error("Order not found");
     }
 
diff --git a/app/weaverse/create-weaverse.server.ts b/app/weaverse/csp.ts
similarity index 73%
rename from app/weaverse/create-weaverse.server.ts
rename to app/weaverse/csp.ts
index cb183994..a159fc1c 100644
--- a/app/weaverse/create-weaverse.server.ts
+++ b/app/weaverse/csp.ts
@@ -1,16 +1,4 @@
 import type { AppLoadContext } from "@shopify/remix-oxygen";
-import type { CreateWeaverseClientArgs } from "@weaverse/hydrogen";
-import { WeaverseClient } from "@weaverse/hydrogen";
-import { components } from "~/weaverse/components";
-import { themeSchema } from "~/weaverse/schema.server";
-
-export function createWeaverseClient(args: CreateWeaverseClientArgs) {
-  return new WeaverseClient({
-    ...args,
-    themeSchema,
-    components,
-  });
-}
 
 export function getWeaverseCsp(request: Request, context: AppLoadContext) {
   let url = new URL(request.url);
diff --git a/env.d.ts b/env.d.ts
index c9dc762a..c06cbeb0 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -2,10 +2,15 @@
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 
-import type { HydrogenCart, HydrogenSessionData } from "@shopify/hydrogen";
-import type { WeaverseClient } from "@weaverse/hydrogen";
-import type { AppSession } from "~/lib/session";
-import type { CustomerAccount, Storefront } from "~/lib/type";
+// Enhance TypeScript's built-in typings.
+import "@total-typescript/ts-reset";
+
+import type {
+  HydrogenContext,
+  HydrogenEnv,
+  HydrogenSessionData,
+} from "@shopify/hydrogen";
+import type { createAppLoadContext } from "~/lib/context";
 
 declare global {
   /**
@@ -13,43 +18,20 @@ declare global {
    */
   const process: { env: { NODE_ENV: "production" | "development" } };
 
-  /**
-   * Declare expected Env parameter in fetch handler.
-   */
-  interface Env {
-    SESSION_SECRET: string;
-    PUBLIC_STOREFRONT_API_TOKEN: string;
-    PRIVATE_STOREFRONT_API_TOKEN: string;
-    PUBLIC_STORE_DOMAIN: string;
-    PUBLIC_STOREFRONT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
-    PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
-    PUBLIC_CHECKOUT_DOMAIN: string;
-
-    WEAVERSE_PROJECT_ID: string;
-    WEAVERSE_HOST: string;
-    WEAVERSE_API_KEY: string;
-    JUDGEME_PRIVATE_API_TOKEN: string;
+  interface Env extends HydrogenEnv {
+    // declare additional Env parameter use in the fetch handler and Remix loader context here
     PUBLIC_GOOGLE_GTM_ID: string;
+    JUDGEME_PRIVATE_API_TOKEN: string;
   }
 }
 
 declare module "@shopify/remix-oxygen" {
-  /**
-   * Declare local additions to the Remix loader context.
-   */
-  interface AppLoadContext {
-    env: Env;
-    cart: HydrogenCart;
-    storefront: Storefront;
-    customerAccount: CustomerAccount;
-    session: AppSession;
-    waitUntil: ExecutionContext["waitUntil"];
-    weaverse: WeaverseClient;
+  interface AppLoadContext
+    extends Awaited<ReturnType<typeof createAppLoadContext>> {
+    // to change context type, change the return of createAppLoadContext() instead
   }
 
-  /**
-   * Declare local additions to the Remix session data.
-   */
-  interface SessionData extends HydrogenSessionData {}
+  interface SessionData extends HydrogenSessionData {
+    // declare local additions to the Remix session data here
+  }
 }
diff --git a/package.json b/package.json
index db5d3eb3..f5f69eee 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@weaverse/pilot",
   "private": true,
   "sideEffects": false,
-  "version": "2.7.7",
+  "version": "2.8.0",
   "type": "module",
   "author": "Weaverse",
   "scripts": {
@@ -25,18 +25,18 @@
     "@graphql-codegen/cli": "5.0.2",
     "@headlessui/react": "2.1.2",
     "@radix-ui/react-checkbox": "1.1.1",
-    "@remix-run/react": "2.10.3",
-    "@remix-run/server-runtime": "2.10.3",
-    "@shopify/cli": "^3.64.0",
-    "@shopify/hydrogen": "2024.7.2",
-    "@shopify/remix-oxygen": "^2.0.5",
-    "@weaverse/hydrogen": "3.3.1",
+    "@remix-run/react": "2.11.1",
+    "@remix-run/server-runtime": "2.11.1",
+    "@shopify/cli": "^3.65.3",
+    "@shopify/hydrogen": "2024.7.3",
+    "@shopify/remix-oxygen": "^2.0.6",
+    "@weaverse/hydrogen": "3.4.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "cross-env": "7.0.3",
     "graphql": "16.9.0",
     "graphql-tag": "2.12.6",
-    "isbot": "5.1.13",
+    "isbot": "5.1.14",
     "react": "18.3.1",
     "react-country-flag": "3.1.0",
     "react-dom": "18.3.1",
@@ -44,33 +44,33 @@
     "react-player": "2.16.0",
     "react-use": "17.5.1",
     "schema-dts": "1.1.2",
-    "swiper": "^11.1.8",
-    "tailwind-merge": "2.4.0",
+    "swiper": "^11.1.9",
+    "tailwind-merge": "2.5.2",
     "tiny-invariant": "1.3.3",
     "typographic-base": "1.0.4"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
-    "@playwright/test": "1.45.3",
-    "@remix-run/dev": "2.10.3",
+    "@playwright/test": "1.46.0",
+    "@remix-run/dev": "2.11.1",
     "@shopify/hydrogen-codegen": "0.3.1",
     "@shopify/mini-oxygen": "^3.0.4",
     "@shopify/oxygen-workers-types": "4.1.4",
     "@tailwindcss/forms": "0.5.7",
-    "@tailwindcss/typography": "0.5.13",
+    "@tailwindcss/typography": "0.5.14",
     "@total-typescript/ts-reset": "0.5.1",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@weaverse/biome": "^1.0.3",
+    "@weaverse/biome": "^1.1.0",
     "cross-env": "7.0.3",
-    "postcss": "8.4.40",
+    "postcss": "8.4.41",
     "postcss-import": "16.1.0",
-    "postcss-preset-env": "9.6.0",
-    "tailwindcss": "3.4.7",
+    "postcss-preset-env": "10.0.0",
+    "tailwindcss": "3.4.9",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
-    "vite": "5.3.5",
-    "vite-tsconfig-paths": "4.3.2"
+    "vite": "5.4.0",
+    "vite-tsconfig-paths": "5.0.1"
   },
   "optionalDependencies": {
     "@esbuild/linux-x64": "0.23.0"
diff --git a/server.ts b/server.ts
index e0b67a7f..efc9d758 100644
--- a/server.ts
+++ b/server.ts
@@ -1,23 +1,9 @@
 // @ts-ignore
 // Virtual entry point for the app
 import * as remixBuild from "virtual:remix/server-build";
-import {
-  cartGetIdDefault,
-  cartSetIdDefault,
-  createCartHandler,
-  createCustomerAccountClient,
-  createStorefrontClient,
-  storefrontRedirect,
-} from "@shopify/hydrogen";
-import {
-  createRequestHandler,
-  getStorefrontHeaders,
-} from "@shopify/remix-oxygen";
-
-import { CART_QUERY_FRAGMENT } from "~/data/fragments";
-import { AppSession } from "~/lib/session";
-import { getLocaleFromRequest } from "~/lib/utils";
-import { createWeaverseClient } from "~/weaverse/create-weaverse.server";
+import { storefrontRedirect } from "@shopify/hydrogen";
+import { createRequestHandler } from "@shopify/remix-oxygen";
+import { createAppLoadContext } from "~/lib/context";
 
 /**
  * Export a fetch handler in module format.
@@ -28,55 +14,12 @@ export default {
     env: Env,
     executionContext: ExecutionContext,
   ): Promise<Response> {
-    // https://github.com/Shopify/hydrogen/issues/1998#issuecomment-2062161714
-    // globalThis.__H2O_LOG_EVENT = undefined;
-    // globalThis.__remix_devServerHooks = undefined;
     try {
-      /**
-       * Open a cache instance in the worker and a custom session instance.
-       */
-      if (!env?.SESSION_SECRET) {
-        throw new Error("SESSION_SECRET environment variable is not set");
-      }
-
-      const waitUntil = executionContext.waitUntil.bind(executionContext);
-      const [cache, session] = await Promise.all([
-        caches.open("hydrogen"),
-        AppSession.init(request, [env.SESSION_SECRET]),
-      ]);
-
-      /**
-       * Create Hydrogen's Storefront client.
-       */
-      const { storefront } = createStorefrontClient({
-        cache,
-        waitUntil,
-        i18n: getLocaleFromRequest(request),
-        publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-        privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
-        storeDomain: env.PUBLIC_STORE_DOMAIN,
-        storefrontId: env.PUBLIC_STOREFRONT_ID,
-        storefrontHeaders: getStorefrontHeaders(request),
-      });
-
-      /**
-       * Create a client for Customer Account API.
-       */
-      const customerAccount = createCustomerAccountClient({
-        waitUntil,
+      const appLoadContext = await createAppLoadContext(
         request,
-        session,
-        customerAccountId: env.PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID,
-        customerAccountUrl: env.PUBLIC_CUSTOMER_ACCOUNT_API_URL,
-      });
-
-      const cart = createCartHandler({
-        storefront,
-        customerAccount,
-        getCartId: cartGetIdDefault(request.headers),
-        setCartId: cartSetIdDefault(),
-        cartQueryFragment: CART_QUERY_FRAGMENT,
-      });
+        env,
+        executionContext,
+      );
 
       /**
        * Create a Remix request handler and pass
@@ -85,27 +28,16 @@ export default {
       const handleRequest = createRequestHandler({
         build: remixBuild,
         mode: process.env.NODE_ENV,
-        getLoadContext: () => ({
-          session,
-          waitUntil,
-          storefront,
-          customerAccount,
-          cart,
-          env,
-          weaverse: createWeaverseClient({
-            storefront,
-            request,
-            env,
-            cache,
-            waitUntil,
-          }),
-        }),
+        getLoadContext: () => appLoadContext,
       });
 
       const response = await handleRequest(request);
 
-      if (session.isPending) {
-        response.headers.set("Set-Cookie", await session.commit());
+      if (appLoadContext.session.isPending) {
+        response.headers.set(
+          "Set-Cookie",
+          await appLoadContext.session.commit(),
+        );
       }
 
       if (response.status === 404) {
@@ -114,11 +46,16 @@ export default {
          * If the redirect doesn't exist, then `storefrontRedirect`
          * will pass through the 404 response.
          */
-        return storefrontRedirect({ request, response, storefront });
+        return storefrontRedirect({
+          request,
+          response,
+          storefront: appLoadContext.storefront,
+        });
       }
 
       return response;
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error(error);
       return new Response("An unexpected error occurred", { status: 500 });
     }

From 222cc40448547f61568c56542f0e0724c15d9230 Mon Sep 17 00:00:00 2001
From: Paul <phanminh65@gmail.com>
Date: Tue, 13 Aug 2024 12:40:26 +0700
Subject: [PATCH 12/12] chore: update readme to reflect latest changes

---
 README.md | 41 ++++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index aafec4b8..5041701a 100644
--- a/README.md
+++ b/README.md
@@ -71,21 +71,32 @@ export async function loader(args: RouteLoaderArgs) {
 
 `weaverse` is an `WeaverseClient` instance that has been injected into the app context by Weaverse. It provides a set of methods to interact with the Weaverse API.
 
-```ts:server.ts
-let handleRequest = createRequestHandler({
-  build: remixBuild,
-  mode: process.env.NODE_ENV,
-  getLoadContext: () => ({
-    // App context props
-    weaverse: createWeaverseClient({
-      storefront,
+```ts:app/lib/context.ts
+// app/lib/context.ts
+
+const hydrogenContext = createHydrogenContext({
+    env,
+    request,
+    cache,
+    waitUntil,
+    session,
+    i18n: getLocaleFromRequest(request),
+    cart: {
+      queryFragment: CART_QUERY_FRAGMENT,
+    },
+  });
+
+  return {
+    ...hydrogenContext,
+    // declare additional Remix loader context
+    weaverse: new WeaverseClient({
+      ...hydrogenContext,
       request,
-      env,
       cache,
-      waitUntil,
+      themeSchema,
+      components,
     }),
-  }),
-});
+  };
 ```
 
 ### Rendering page content
@@ -252,11 +263,11 @@ Just export a `loader` function from your component:
 ```tsx:app/weaverse/sections/Video.tsx
 import type {ComponentLoaderArgs} from '@weaverse/hydrogen';
 
-export let loader = async ({context, itemData}: ComponentLoaderArgs) => {
-  let {data} = await context.storefront.query<SeoCollectionContentQuery>(
+export let loader = async ({weaverse, data}: ComponentLoaderArgs) => {
+  let {data} = await weaverse.storefront.query<SeoCollectionContentQuery>(
     HOMEPAGE_SEO_QUERY,
     {
-      variables: {handle: itemData.data.collectionHandle || 'frontpage'},
+      variables: {handle: data.collection.handle || 'frontpage'},
     },
   );
   return data;