From 83c9e615191dbae88b115b27ec41ce2cda41dd29 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 20 Aug 2021 14:49:41 +0700 Subject: [PATCH] :wrench: config: global theme :%s --- pages/404.tsx | 6 +- pages/cart.tsx | 171 +++--------------- pages/product/[slug].tsx | 13 +- .../common/Header/Header.module.scss | 14 +- src/components/common/Header/Header.tsx | 17 +- src/styles/_base.scss | 153 +++++----------- src/styles/_utilities.scss | 93 ++++++++++ src/styles/_utility.scss | 1 - src/styles/main.scss | 4 +- tailwind.config.js | 60 +++++- 10 files changed, 248 insertions(+), 284 deletions(-) create mode 100644 src/styles/_utilities.scss delete mode 100644 src/styles/_utility.scss diff --git a/pages/404.tsx b/pages/404.tsx index bd085010f..38a01bcc4 100644 --- a/pages/404.tsx +++ b/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 ( -
- Not Found - +
The requested page doesn't exist or you don't have access to it. -
) } diff --git a/pages/cart.tsx b/pages/cart.tsx index 3279301da..b9659d21b 100644 --- a/pages/cart.tsx +++ b/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 { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons' -import { CartItem } from '@components/cart' +// import useCart from '@framework/cart/use-cart' +// import usePrice from '@framework/product/use-price' +// 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 success = null - const { data, isLoading, isEmpty } = useCart() + // const error = null + // const success = null + // const { data, isLoading, isEmpty } = useCart() - const { price: subTotal } = usePrice( - data && { - amount: Number(data.subtotalPrice), - currencyCode: data.currency.code, - } - ) - const { price: total } = usePrice( - data && { - amount: Number(data.totalPrice), - currencyCode: data.currency.code, - } - ) + // const { price: subTotal } = usePrice( + // data && { + // amount: Number(data.subtotalPrice), + // currencyCode: data.currency.code, + // } + // ) + // const { price: total } = usePrice( + // data && { + // amount: Number(data.totalPrice), + // currencyCode: data.currency.code, + // } + // ) return ( -
-
- {isLoading || isEmpty ? ( -
- - - -

- Your cart is empty -

-

- Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. -

-
- ) : error ? ( -
- - - -

- We couldn’t process the purchase. Please check your card - information and try again. -

-
- ) : success ? ( -
- - - -

- Thank you for your order. -

-
- ) : ( -
- My Cart - Review your Order -
    - {data!.lineItems.map((item: any) => ( - - ))} -
-
- - Before you leave, take a look at these items. We picked them - just for you - -
- {[1, 2, 3, 4, 5, 6].map((x) => ( -
- ))} -
-
-
- )} -
-
-
- {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && ( - <> - {/* Shipping Address */} - {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */} -
-
- -
-
- + Add Shipping Address - {/* - 1046 Kearny Street.
- San Franssisco, California - */} -
-
- {/* Payment Method */} - {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */} -
-
- -
-
- + Add Payment Method - {/* VISA #### #### #### 2345 */} -
-
- - )} -
-
    -
  • - Subtotal - {subTotal} -
    • -
  • - Taxes - Calculated at checkout -
    • -
  • - Estimated Shipping - FREE -
    • -
-
- Total - {total} -
-
-
-
- {isEmpty ? ( - - ) : ( - - )} -
-
-
-
+
+ This is cart page
) } diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index bb1ecbee3..c5bcbdba1 100644 --- a/pages/product/[slug].tsx +++ b/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) { const router = useRouter() - return router.isFallback ? ( -

Loading...

- ) : ( - - ) + return
This is product page
} Slug.Layout = Layout diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss index 19c8fa2b1..d84fa0f80 100644 --- a/src/components/common/Header/Header.module.scss +++ b/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; - border-radius: theme("borderRadius.custom"); + @apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius; } .link { color: theme("colors.pink"); } + .heading { + @apply text-base; + } + + .paragraph { + @apply topline; + } } diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 4d1134d63..6314dd7e5 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -6,16 +6,31 @@ interface Props { children?: any } -const Header: FC = ({ }:Props ) => { +const Header: FC = ({ }: Props) => { return (
This is Header +
Test link style
+

+ HEADING 1 +

+

+ 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. +

+

+ 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. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, natus? +

) } diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 00081f459..599c4d5aa 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -1,137 +1,74 @@ :root { - --primary: #ffffff; - --primary-2: #f1f3f5; - --secondary: #000000; - --secondary-2: #111; - --selection: var(--cyan); + --primary: #36bf6d; + --primary-light: #e0f6e8; + --primary-lightest: #effaf4; - --text-base: #000000; - --text-primary: #000000; - --text-secondary: white; + --info-dark: #00317a; + --info: #297fff; + --info-border-line: #d6e7ff; + --info-light: #ebf3ff; - --hover: rgba(0, 0, 0, 0.075); - --hover-1: rgba(0, 0, 0, 0.15); - --hover-2: rgba(0, 0, 0, 0.25); - --cyan: #22b8cf; - --green: #37b679; - --red: #da3c3c; - --purple: #f81ce5; - --blue: #0070f3; + --positive-dark: #166437; + --positive: #2dc86e; + --positive-border-line: #cdf4dd; + --positive-light: #eefbf4; - --pink: #ff0080; - --pink-light: #ff379c; + --warning-dark: #694b11; + --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; - --violet-dark: #4c2889; + --text-active: #141414; + --text-base: #3d3d3d; + --text-label: #8f8f8f; + --text-placeholder: #cccccc; - --accent-0: #fff; - --accent-1: #fafafa; - --accent-2: #eaeaea; - --accent-3: #999999; - --accent-4: #888888; - --accent-5: #666666; - --accent-6: #444444; - --accent-7: #333333; - --accent-8: #111111; - --accent-9: #000; + --border-line: #ebebeb; + --background: #f8f8f8; + --white: #fbfbfb; - --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', - 'Helvetica', sans-serif; -} + --font-size: 1.6rem; + --line-height: 2.4rem; -[data-theme='dark'] { - --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; + --font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; } *, *: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 { - position: relative; - min-height: 100%; - margin: 0; +html { + /* default font-size: 16px -> 62.5% * 16px = 10px */ + /* => 1rem = 10px*/ + 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); -} - -.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; - } + -webkit-tap-highlight-color: var(--text-active); } diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss new file mode 100644 index 000000000..96e943d2c --- /dev/null +++ b/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%; + } +} diff --git a/src/styles/_utility.scss b/src/styles/_utility.scss deleted file mode 100644 index 5209c52a1..000000000 --- a/src/styles/_utility.scss +++ /dev/null @@ -1 +0,0 @@ -// utility css here diff --git a/src/styles/main.scss b/src/styles/main.scss index 71ee17027..2e4abf3da 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,5 +1,7 @@ @import "~tailwindcss/base"; @import './base'; + @import "~tailwindcss/components"; + @import "~tailwindcss/utilities"; -@import 'utility' \ No newline at end of file +@import './utilities'; diff --git a/tailwind.config.js b/tailwind.config.js index 8393478c4..4b2e65c26 100644 --- a/tailwind.config.js +++ b/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,16 +91,29 @@ 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: { - 'extra-loose': '2.2', - }, - scale: { - 120: '1.2', + fontSize: { + base: ['1.6rem', '2.4rem'], }, 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) { ... } } }, }, - plugins: [ require('postcss-import'), require('tailwindcss'), require('autoprefixer') ] + plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')] }