More design updates

assets/base.css

@@ -22,17 +22,15 @@
   --violet-light: #7048e8;
 
   --accent-0: #fff;
-  --accent-05: #f8f9fa;
+  --accent-1: #fafafa;
-  --accent-1: #f1f3f5;
+  --accent-2: #eaeaea;
-  --accent-2: #e9ecef;
+  --accent-3: #999999;
-  --accent-3: #dee2e6;
+  --accent-4: #888888;
-  --accent-4: #ced4da;
+  --accent-5: #666666;
-  --accent-5: #adb5bd;
+  --accent-6: #444444;
-  --accent-6: #868e96;
+  --accent-7: #333333;
-  --accent-7: #495057;
+  --accent-8: #111111;
-  --accent-8: #343a40;
+  --accent-9: #000;
-  --accent-9: #212529;
-  --accent-10: #000;
 
   --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
     'Helvetica', sans-serif;
@@ -52,18 +50,16 @@
   --text-primary: white;
   --text-secondary: black;
 
+  --accent-9: #fff;
+  --accent-8: #fafafa;
+  --accent-7: #eaeaea;
+  --accent-6: #999999;
+  --accent-5: #888888;
+  --accent-4: #666666;
+  --accent-3: #444444;
+  --accent-2: #333333;
+  --accent-1: #111111;
   --accent-0: #000;
-  --accent-05: #212529;
-  --accent-1: #343a40;
-  --accent-2: #495057;
-  --accent-3: #868e96;
-  --accent-4: #adb5bd;
-  --accent-5: #ced4da;
-  --accent-6: #dee2e6;
-  --accent-7: #e9ecef;
-  --accent-8: #f1f3f5;
-  --accent-9: #f8f9fa;
-  --accent-10: #fff;
 }
 
 *,

components/cart/CartItem/CartItem.module.css

@@ -7,14 +7,14 @@
 }
 
 .actions {
-  @apply flex p-1 border-accent-3 border items-center justify-center w-12 text-accent-7;
+  @apply flex p-1 border-accent-2 border items-center justify-center w-12 text-accent-7;
   transition-property: border-color, background, color, transform, box-shadow;
   transition-duration: 0.15s;
   transition-timing-function: ease;
 }
 
 .actions:hover {
-  @apply bg-accent-1 border-accent-4 text-accent-9;
+  @apply bg-accent-1 border-accent-3 text-accent-9;
   transition: border-color;
   z-index: 10;
 }

components/cart/CartItem/CartItem.tsx

@@ -155,7 +155,7 @@ const CartItem = ({
           <button className={s.actions} onClick={handleRemove}>
             <Cross width={20} height={20} />
           </button>
-          <label className="w-full border-accent-3 border ml-2">
+          <label className="w-full border-accent-2 border ml-2">
             <input
               type="number"
               max={99}

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -100,7 +100,7 @@ const CartSidebarView: FC = () => {
                 My Cart
               </h2>
             </Link>
-            <ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-3 border-accent-3">
+            <ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2">
               {data!.lineItems.map((item: any) => (
                 <CartItem
                   key={item.id}
@@ -132,13 +132,8 @@ const CartSidebarView: FC = () => {
             </div>
             <div>
               {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? (
-                <Button
+                <Button Component="a" width="100%" onClick={goToCheckout}>
-                  Component="a"
+                  Proceed to Checkout ({total})
-                  width="100%"
-                  variant="ghost"
-                  onClick={goToCheckout}
-                >
-                  Continue to Checkout
                 </Button>
               ) : (
                 <Button href="/checkout" Component="a" width="100%">

components/product/ProductView/ProductView.tsx

@@ -117,7 +117,9 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
           <section>
             {product.options?.map((opt) => (
               <div className="pb-4" key={opt.displayName}>
-                <h2 className="uppercase font-medium">{opt.displayName}</h2>
+                <h2 className="uppercase font-medium text-sm tracking-wide">
+                  {opt.displayName}
+                </h2>
                 <div className="flex flex-row py-4">
                   {opt.values.map((v, i: number) => {
                     const active = (choices as any)[

components/product/Swatch/Swatch.module.css

@@ -1,11 +1,13 @@
 .swatch {
   box-sizing: border-box;
   composes: root from 'components/ui/Button/Button.module.css';
-  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
+  @apply h-10 w-10 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
   margin-right: calc(0.75rem - 1px);
   overflow: hidden;
+  width: 48px;
+  height: 48px;
 }
 
 .swatch::before,

components/ui/Button/Button.module.css

@@ -1,13 +1,13 @@
 .root {
-  @apply bg-secondary text-accent-1 cursor-pointer inline-flex
+  @apply bg-accent-9 text-accent-0 cursor-pointer inline-flex
-  px-10 rounded-sm leading-6  transition ease-in-out duration-150
+  px-10 py-4 rounded-sm leading-6 transition ease-in-out duration-150
   shadow-sm text-center justify-center uppercase
-  py-4 border border-transparent items-center text-sm font-semibold
+  border border-transparent items-center text-sm font-semibold
   tracking-wide;
 }
 
 .root:hover {
-  @apply bg-accent-0 text-primary border border-secondary;
+  @apply border-accent-9 bg-accent-6;
 }
 
 .root:focus {

components/ui/Collapse/Collapse.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply border-b border-accent-2 py-4 px-2 flex flex-col;
+  @apply border-b border-accent-2 py-4 flex flex-col;
 }
 
 .header {
@@ -11,11 +11,12 @@
 }
 
 .content {
-  @apply pt-3 overflow-hidden pl-9;
+  @apply pt-3 overflow-hidden pl-8;
 }
 
 .icon {
   @apply mr-3 text-accent-6;
+  margin-left: -6px;
   transition: transform 0.2s ease;
 }
 

package.json

@@ -42,7 +42,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-merge-refs": "^1.1.0",
-    "react-spring": "^9.2.1",
     "react-ticker": "^1.2.2",
     "react-use-measure": "^2.0.4",
     "shopify-buy": "^2.11.0",

tsconfig.json

@@ -22,8 +22,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/bigcommerce"],
+      "@framework": ["framework/shopify"],
-      "@framework/*": ["framework/bigcommerce/*"]
+      "@framework/*": ["framework/shopify/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],

yarn.lock

@@ -980,26 +980,6 @@
     "@react-spring/shared" "~9.2.0"
     "@react-spring/types" "~9.2.0"
 
-"@react-spring/konva@~9.2.0":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.2.1.tgz#7ba9ad5d615961a7bfc60761333ee666c00b2ce5"
-  integrity sha512-GnvEXElYerpD7313hwqIEbsHXz18HgHAUGWe4XV6Sf+KHhCQvw/z97PJLD5KD6XU5MawaQTYkwvqvJ6eTLV0Nw==
-  dependencies:
-    "@react-spring/animated" "~9.2.0"
-    "@react-spring/core" "~9.2.0"
-    "@react-spring/shared" "~9.2.0"
-    "@react-spring/types" "~9.2.0"
-
-"@react-spring/native@~9.2.0":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.2.1.tgz#be1aa591c90d25dac6b68a678b50d1cbb0e4e70a"
-  integrity sha512-sWum3JgFpmnpdVZKThpihl1X15oQF/zBiVTQ+csOJDBnB9jhW42WYu9r6ib9M2yxAelS17u7FnDCIfLZf7V1bg==
-  dependencies:
-    "@react-spring/animated" "~9.2.0"
-    "@react-spring/core" "~9.2.0"
-    "@react-spring/shared" "~9.2.0"
-    "@react-spring/types" "~9.2.0"
-
 "@react-spring/shared@~9.2.0":
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.2.1.tgz#90ccd02b8d0ad126e0614a3cddff90664f255192"
@@ -1008,22 +988,12 @@
     "@react-spring/types" "~9.2.0"
     rafz "^0.1.13"
 
-"@react-spring/three@~9.2.0":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.2.1.tgz#d8df125de9e8325b51ff308c58561a8683523c80"
-  integrity sha512-0gRz2y8G5szbtywvTDbaT3B+1Xseq5Yu2X02Ey8k18IksAncMZ/KFcRJIYFQn+7OlLVaoxPzXibSUNT4notWMg==
-  dependencies:
-    "@react-spring/animated" "~9.2.0"
-    "@react-spring/core" "~9.2.0"
-    "@react-spring/shared" "~9.2.0"
-    "@react-spring/types" "~9.2.0"
-
 "@react-spring/types@~9.2.0":
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.2.1.tgz#734bbc12b4db57ca55680fd4cb197bd6e0f6a8a9"
   integrity sha512-UMXLNW1l/iJCRRAsTpeqgQYjims9j8QSSMbkgi1mFZytDuaQ6r6f9ngfLgx9uDW2VSdvoNdEqGM9abVDGc4E1g==
 
-"@react-spring/web@^9.2.1", "@react-spring/web@~9.2.0":
+"@react-spring/web@^9.2.1":
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.2.1.tgz#aeb2427545e631e29d70f3ad38afa35da560f1c5"
   integrity sha512-7YimWKLuHhUZhuDchfn4Yo631KqULWCgrDLOZBu0o4AZwVMFvguVY1g0Tpm5K+68Z7kJaS0n5pf8wlwtGIOs+w==
@@ -1033,16 +1003,6 @@
     "@react-spring/shared" "~9.2.0"
     "@react-spring/types" "~9.2.0"
 
-"@react-spring/zdog@~9.2.0":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.2.1.tgz#93a7c7ba15d215608cf7d222c7e50352a2a66b17"
-  integrity sha512-OjXoSo3/Lp8OKK0V3spyB8FWw0ttfwEdMlJyS1Ed8edLwbVv+60G6EqQT4S7M433R8W1M6Ck5f9fw0EedWsmhQ==
-  dependencies:
-    "@react-spring/animated" "~9.2.0"
-    "@react-spring/core" "~9.2.0"
-    "@react-spring/shared" "~9.2.0"
-    "@react-spring/types" "~9.2.0"
-
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
@@ -5666,18 +5626,6 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-spring@^9.2.1:
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.2.1.tgz#999ff52142fbf85180b79b3b7b9266e0d3539f8d"
-  integrity sha512-HLkEbuRvRtvAwkeqqwZXIEaKPPc17ViI5DYPtYTpgu2H9jmndm/kp1BfxRwpu5+m4ecGzUUX7RRNWEfwWY6oWA==
-  dependencies:
-    "@react-spring/core" "~9.2.0"
-    "@react-spring/konva" "~9.2.0"
-    "@react-spring/native" "~9.2.0"
-    "@react-spring/three" "~9.2.0"
-    "@react-spring/web" "~9.2.0"
-    "@react-spring/zdog" "~9.2.0"
-
 react-ticker@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"