🔧 config: global theme

:%s

pages/404.tsx

@@ -1,7 +1,6 @@
 import type { GetStaticPropsContext } from 'next'
 import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
-import { Text } from '@components/ui'
 
 export async function getStaticProps({
   preview,
@@ -23,11 +22,8 @@ export async function getStaticProps({
 
 export default function NotFound() {
   return (
-    <div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
+    <div>
-      <Text variant="heading">Not Found</Text>
-      <Text className="">
         The requested page doesn't exist or you don't have access to it.
-      </Text>
     </div>
   )
 }

pages/cart.tsx

@@ -1,11 +1,11 @@
 import type { GetStaticPropsContext } from 'next'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/product/use-price'
 import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
-import { Button, Text } from '@components/ui'
+// import useCart from '@framework/cart/use-cart'
-import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
+// import usePrice from '@framework/product/use-price'
-import { CartItem } from '@components/cart'
+// import { Button, Text } from '@components/ui'
+// import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
+// import { CartItem } from '@components/cart'
 
 export async function getStaticProps({
   preview,
@@ -23,153 +23,26 @@ export async function getStaticProps({
 }
 
 export default function Cart() {
-  const error = null
+  // const error = null
-  const success = null
+  // const success = null
-  const { data, isLoading, isEmpty } = useCart()
+  // const { data, isLoading, isEmpty } = useCart()
 
-  const { price: subTotal } = usePrice(
+  // const { price: subTotal } = usePrice(
-    data && {
+  //   data && {
-      amount: Number(data.subtotalPrice),
+  //     amount: Number(data.subtotalPrice),
-      currencyCode: data.currency.code,
+  //     currencyCode: data.currency.code,
-    }
+  //   }
-  )
+  // )
-  const { price: total } = usePrice(
+  // const { price: total } = usePrice(
-    data && {
+  //   data && {
-      amount: Number(data.totalPrice),
+  //     amount: Number(data.totalPrice),
-      currencyCode: data.currency.code,
+  //     currencyCode: data.currency.code,
-    }
+  //   }
-  )
+  // )
 
   return (
-    <div className="grid lg:grid-cols-12 w-full max-w-7xl mx-auto">
+    <div>
-      <div className="lg:col-span-8">
+      This is cart page
-        {isLoading || isEmpty ? (
-          <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
-            <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
-              <Bag className="absolute" />
-            </span>
-            <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
-              Your cart is empty
-            </h2>
-            <p className="text-accent-6 px-10 text-center pt-2">
-              Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-            </p>
-          </div>
-        ) : error ? (
-          <div className="flex-1 px-4 flex flex-col justify-center items-center">
-            <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
-              <Cross width={24} height={24} />
-            </span>
-            <h2 className="pt-6 text-xl font-light text-center">
-              We couldn’t process the purchase. Please check your card
-              information and try again.
-            </h2>
-          </div>
-        ) : success ? (
-          <div className="flex-1 px-4 flex flex-col justify-center items-center">
-            <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
-              <Check />
-            </span>
-            <h2 className="pt-6 text-xl font-light text-center">
-              Thank you for your order.
-            </h2>
-          </div>
-        ) : (
-          <div className="px-4 sm:px-6 flex-1">
-            <Text variant="pageHeading">My Cart</Text>
-            <Text variant="sectionHeading">Review your Order</Text>
-            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-b border-accent-2">
-              {data!.lineItems.map((item: any) => (
-                <CartItem
-                  key={item.id}
-                  item={item}
-                  currencyCode={data?.currency.code!}
-                />
-              ))}
-            </ul>
-            <div className="my-6">
-              <Text>
-                Before you leave, take a look at these items. We picked them
-                just for you
-              </Text>
-              <div className="flex py-6 space-x-6">
-                {[1, 2, 3, 4, 5, 6].map((x) => (
-                  <div
-                    key={x}
-                    className="border border-accent-3 w-full h-24 bg-accent-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75"
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-      <div className="lg:col-span-4">
-        <div className="flex-shrink-0 px-4 py-24 sm:px-6">
-          {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && (
-            <>
-              {/* Shipping Address */}
-              {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
-              <div className="rounded-md border border-accent-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accent-4">
-                <div className="mr-5">
-                  <MapPin />
-                </div>
-                <div className="text-sm text-center font-medium">
-                  <span className="uppercase">+ Add Shipping Address</span>
-                  {/* <span>
-                    1046 Kearny Street.<br/>
-                    San Franssisco, California
-                  </span> */}
-                </div>
-              </div>
-              {/* Payment Method */}
-              {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
-              <div className="rounded-md border border-accent-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accent-4">
-                <div className="mr-5">
-                  <CreditCard />
-                </div>
-                <div className="text-sm text-center font-medium">
-                  <span className="uppercase">+ Add Payment Method</span>
-                  {/* <span>VISA #### #### #### 2345</span> */}
-                </div>
-              </div>
-            </>
-          )}
-          <div className="border-t border-accent-2">
-            <ul className="py-3">
-              <li className="flex justify-between py-1">
-                <span>Subtotal</span>
-                <span>{subTotal}</span>
-              </li>
-              <li className="flex justify-between py-1">
-                <span>Taxes</span>
-                <span>Calculated at checkout</span>
-              </li>
-              <li className="flex justify-between py-1">
-                <span>Estimated Shipping</span>
-                <span className="font-bold tracking-wide">FREE</span>
-              </li>
-            </ul>
-            <div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-10">
-              <span>Total</span>
-              <span>{total}</span>
-            </div>
-          </div>
-          <div className="flex flex-row justify-end">
-            <div className="w-full lg:w-72">
-              {isEmpty ? (
-                <Button href="/" Component="a" width="100%">
-                  Continue Shopping
-                </Button>
-              ) : (
-                <Button href="/checkout" Component="a" width="100%">
-                  Proceed to Checkout
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   )
 }

pages/product/[slug].tsx

@@ -1,12 +1,11 @@
+import { Layout } from '@components/common'
+import commerce from '@lib/api/commerce'
 import type {
   GetStaticPathsContext,
   GetStaticPropsContext,
-  InferGetStaticPropsType,
+  InferGetStaticPropsType
 } from 'next'
 import { useRouter } from 'next/router'
-import commerce from '@lib/api/commerce'
-import { Layout } from '@components/common'
-import { ProductView } from '@components/product'
 
 export async function getStaticProps({
   params,
@@ -71,11 +70,7 @@ export default function Slug({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
 
-  return router.isFallback ? (
+  return <div>This is product page</div>
-    <h1>Loading...</h1>
-  ) : (
-    <ProductView product={product} relatedProducts={relatedProducts} />
-  )
 }
 
 Slug.Layout = Layout

src/components/common/Header/Header.module.scss

@@ -1,12 +1,20 @@
+@import '../../../styles/utilities';
+
 .header {
-  .button {
+  .btn {
     @apply font-bold py-2 px-4 rounded;
   }
   .btnBlue {
-    @apply bg-blue hover:bg-cyan text-white font-bold py-2 px-4;
+    @apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
-    border-radius: theme("borderRadius.custom");
   }
   .link {
     color: theme("colors.pink");
   }
+  .heading {
+    @apply text-base;
+  }
+
+  .paragraph {
+    @apply topline;
+  }
 }

src/components/common/Header/Header.tsx

@@ -13,9 +13,24 @@ const Header: FC<Props> = ({ }:Props ) => {
             <button className={s.btnBlue}>
                 Button
             </button>
+            <button className={s.btn}>
+                Button
+            </button>
             <div className={s.link}>
                 Test link style
             </div>
+            <h1 className="heading-1">
+                HEADING 1
+            </h1>
+            <p className="spacing-horizontal">
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt delectus, atque aliquid repudiandae debitis dolor facere impedit alias nemo dolores voluptatum? Commodi, delectus. Dignissimos aspernatur nobis, distinctio delectus eligendi nisi illo tempore non nostrum, molestias excepturi dolor culpa fugiat rem perspiciatis. Repellendus numquam quisquam possimus natus vero recusandae, ipsam earum ratione quos ex consectetur cum nostrum modi amet odit fugiat fugit. Facere cum enim dignissimos molestias facilis error dicta exercitationem, delectus voluptates fuga laboriosam esse sunt odio, impedit modi veritatis, nisi nam? Voluptatum voluptas similique aspernatur. Soluta, accusamus! Mollitia praesentium adipisci perspiciatis iusto dolorum sint sit placeat, nesciunt id repellendus.
+            </p>
+            <p className="spacing-horizontal-left">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque doloremque quos excepturi laborum maiores laudantium hic iusto natus? Ipsa deleniti quas odit! Labore esse enim ipsam tempora tenetur beatae maxime officiis est, a illo! Soluta suscipit maxime odit eveniet laudantium, iure atque doloribus quaerat. Obcaecati tempore molestiae aliquid amet maiores suscipit, beatae repellat illum ipsam tenetur. Porro officiis omnis quam, iure quia necessitatibus consectetur culpa itaque, in tempora rem ex ad et iusto, hic commodi fuga quibusdam. Dolores exercitationem natus dolor pariatur voluptates non corporis, minus repellat! Quis distinctio esse, animi suscipit ducimus sequi obcaecati facere, perferendis ea omnis soluta.
+            </p>
+            <p className={s.paragraph}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, natus?
+            </p>
         </div>
     )
 }

src/styles/_base.scss

@@ -1,137 +1,74 @@
 :root {
-  --primary: #ffffff;
+  --primary: #36bf6d;
-  --primary-2: #f1f3f5;
+  --primary-light: #e0f6e8;
-  --secondary: #000000;
+  --primary-lightest: #effaf4;
-  --secondary-2: #111;
-  --selection: var(--cyan);
 
-  --text-base: #000000;
+  --info-dark: #00317a;
-  --text-primary: #000000;
+  --info: #297fff;
-  --text-secondary: white;
+  --info-border-line: #d6e7ff;
+  --info-light: #ebf3ff;
 
-  --hover: rgba(0, 0, 0, 0.075);
+  --positive-dark: #166437;
-  --hover-1: rgba(0, 0, 0, 0.15);
+  --positive: #2dc86e;
-  --hover-2: rgba(0, 0, 0, 0.25);
+  --positive-border-line: #cdf4dd;
-  --cyan: #22b8cf;
+  --positive-light: #eefbf4;
-  --green: #37b679;
-  --red: #da3c3c;
-  --purple: #f81ce5;
-  --blue: #0070f3;
 
-  --pink: #ff0080;
+  --warning-dark: #694b11;
-  --pink-light: #ff379c;
+  --warning: #f6b028;
+  --warning-border-line: #fdf1d8;
+  --warning-light: #fef8eb;
 
-  --magenta: #eb367f;
+  --negative-dark: #741a06;
+  --negative: #f34f2b;
+  --negative-border-line: #fddfd8;
+  --negative-light: #feefec;
 
-  --violet: #7928ca;
+  --text-active: #141414;
-  --violet-dark: #4c2889;
+  --text-base: #3d3d3d;
+  --text-label: #8f8f8f;
+  --text-placeholder: #cccccc;
 
-  --accent-0: #fff;
+  --border-line: #ebebeb;
-  --accent-1: #fafafa;
+  --background: #f8f8f8;
-  --accent-2: #eaeaea;
+  --white: #fbfbfb;
-  --accent-3: #999999;
-  --accent-4: #888888;
-  --accent-5: #666666;
-  --accent-6: #444444;
-  --accent-7: #333333;
-  --accent-8: #111111;
-  --accent-9: #000;
 
-  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
+  --font-size: 1.6rem;
-    'Helvetica', sans-serif;
+  --line-height: 2.4rem;
-}
 
-[data-theme='dark'] {
+  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
-  --primary: #000000;
-  --primary-2: #111;
-  --secondary: #ffffff;
-  --secondary-2: #f1f3f5;
-  --hover: rgba(255, 255, 255, 0.075);
-  --hover-1: rgba(255, 255, 255, 0.15);
-  --hover-2: rgba(255, 255, 255, 0.25);
-  --selection: var(--purple);
-
-  --text-base: white;
-  --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;
 }
 
 *,
 *:before,
 *:after {
+  margin: 0px;
+  padding: 0px;
   box-sizing: inherit;
 }
 
-html {
-  height: 100%;
-  box-sizing: border-box;
-  touch-action: manipulation;
-  font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 html,
 body {
-  font-family: var(--font-sans);
+  box-sizing: border-box;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--primary);
-  color: var(--text-primary);
   overscroll-behavior-x: none;
+  background-color: var(--background);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  color: var(--text-base);
+  font-family: var(--font-sans);
 }
 
-body {
+html {
-  position: relative;
+  /* default font-size: 16px -> 62.5% * 16px = 10px */
-  min-height: 100%;
+  /* => 1rem = 10px*/
-  margin: 0;
+  font-size: 62.5% !important;
+  scroll-behavior: smooth;
+  touch-action: manipulation;
+  font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
 }
 
 a {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--text-active);
-}
-
-.animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-.fadeIn {
-  -webkit-animation-name: fadeIn;
-  animation-name: fadeIn;
-}
-
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
 }

src/styles/_utilities.scss

@@ -0,0 +1,93 @@
+@layer utilities {
+    .heading-1 {
+        font-size: 4.8rem;
+        line-height: 5.6rem;
+        letter-spacing: -0.03em;
+        @screen md {
+            font-size: 6.4rem;
+            line-height: 8rem;
+            letter-spacing: -0.03em;
+        }
+    }
+    .heading-2 {
+        font-size: 4rem;
+        line-height: 4.8rem;
+        letter-spacing: -0.02em;
+        @screen md {
+            font-size: 4.8rem;
+            line-height: 5.6rem;
+            letter-spacing: -0.02em;
+        }
+    }
+    .heading-3 {
+        font-size: 2.4rem;
+        line-height: 3.2rem;
+        letter-spacing: -0.01em;
+        @screen md {
+            font-size: 3.2rem;
+            line-height: 4rem;
+            letter-spacing: -0.01em;
+        }
+    }
+
+    .sm-headline {
+        font-size: 1.8rem;
+        line-height: 2.8rem;
+        letter-spacing: -0.01em;
+        @screen md {
+            font-size: 2rem;
+            line-height: 2.8rem;
+            letter-spacing: -0.01em;
+        }
+    }
+
+    .sub-headline {
+        font-size: 2rem;
+        line-height: 2.8rem;
+        letter-spacing: -0.01em;
+        @screen md {
+            font-size: 2.4rem;
+            line-height: 3.2rem;
+            letter-spacing: -0.01em;
+        }
+    }
+
+    .topline {
+        font-size: 1.8rem;
+        line-height: 2.8rem;
+        letter-spacing: 0.01em;
+        @screen md {
+            font-size: 2rem;
+            line-height: 2.8rem;
+            letter-spacing: 0.01em;
+        }
+    }
+
+    .caption {
+        font-size: 1.2rem;
+        line-height: 2rem;
+        letter-spacing: 0.01em;
+    }
+
+    .sm-label {
+        font-size: 1rem;
+        line-height: 1.6rem;
+    }
+    .spacing-horizontal {
+        padding-left: 2rem;
+        padding-right: 2rem;
+        @screen md {
+            padding-left: 11.2rem;
+            padding-right: 11.2rem;
+        }
+    }
+    .spacing-horizontal-left {
+        padding-left: 2rem;
+        @screen md {
+            padding-left: 11.2rem;
+        }
+    }
+    .custom-border-radius {
+        border-radius: 50% 20% / 10% 40%;
+    }
+}

src/styles/_utility.scss

@@ -1 +0,0 @@
-// utility css here

src/styles/main.scss

@@ -1,5 +1,7 @@
 @import "~tailwindcss/base";
 @import './base';
+
 @import "~tailwindcss/components";
+
 @import "~tailwindcss/utilities";
-@import 'utility'
+@import './utilities';

tailwind.config.js

@@ -22,6 +22,34 @@ module.exports = {
       },
       colors: {
         primary: 'var(--primary)',
+        'primary-light': 'var(--primary-light)',
+        'primary-lightest': 'var(--primary-lightest)',
+
+        'info-dark': 'var(--info-dark)',
+        'info': 'var(--info)',
+        'info-border-line': 'var(--info-border-line)',
+        'info-light': 'var(--info-light)',
+
+        'positive-dark': 'var(--positive-dark)',
+        'positive': 'var(--positive)',
+        'positive-border-line': 'var(--positive-border-line)',
+        'positive-light': 'var(--positive-light)',
+
+        'warning-dark': 'var(--warning-dark)',
+        'warning': 'var(--warning)',
+        'warning-border-line': 'var(--warning-border-line)',
+        'warning-light': 'var(--warning-light)',
+
+        'negative-dark': 'var(--negative-dark)',
+        'negative': 'var(--negative)',
+        'negative-border-line': 'var(--negative-border-line)',
+        'negative-light': 'var(--negative-light)',
+
+        'line': 'var(--border-line)',
+        'background': 'var(--background)',
+        'white': 'var(--white)',
+
+        // @deprecated (NOT use these variables)
         'primary-2': 'var(--primary-2)',
         secondary: 'var(--secondary)',
         'secondary-2': 'var(--secondary-2)',
@@ -50,6 +78,11 @@ module.exports = {
       },
       textColor: {
         base: 'var(--text-base)',
+        active: 'var(--text-active)',
+        label: 'var(--text-label)',
+        placeholder: 'var(--text-placeholder)',
+        
+        // @deprecated (NOT use these variables)
         primary: 'var(--text-primary)',
         secondary: 'var(--text-secondary)',
       },
@@ -58,14 +91,27 @@ module.exports = {
         magical:
           'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
       },
-      lineHeight: {
+      fontSize: {
-        'extra-loose': '2.2',
+        base: ['1.6rem', '2.4rem'],
-      },
-      scale: {
-        120: '1.2',
       },
       borderRadius: {
-        custom: '50% 20% / 10% 40%;',
+        rounded: '.8rem',
+      },
+      screens: {
+        'sm': '640px',
+        // => @media (min-width: 640px) { ... }
+
+        'md': '768px',
+        // => @media (min-width: 768px) { ... }
+
+        'lg': '1024px',
+        // => @media (min-width: 1024px) { ... }
+
+        'xl': '1280px',
+        // => @media (min-width: 1280px) { ... }
+
+        '2xl': '1536px',
+        // => @media (min-width: 1536px) { ... }
       }
     },
   },