crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-19 13:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
Bel Curcio 2021-05-25 17:53:57 -03:00
parent 4b06e7c062
commit c7207c8e1a
40 changed files with 365 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/base.css
View File

@ -20,16 +20,20 @@
--blue: #0070f3; --blue: #0070f3;
--violet: #5f3dc4; --violet: #5f3dc4;
--violet-light: #7048e8; --violet-light: #7048e8;
--accents-0: #f8f9fa;
--accents-1: #f1f3f5; --accent-0: #fff;
--accents-2: #e9ecef; --accent-05: #f8f9fa;
--accents-3: #dee2e6; --accent-1: #f1f3f5;
--accents-4: #ced4da; --accent-2: #e9ecef;
--accents-5: #adb5bd; --accent-3: #dee2e6;
--accents-6: #868e96; --accent-4: #ced4da;
--accents-7: #495057; --accent-5: #adb5bd;
--accents-8: #343a40; --accent-6: #868e96;
--accents-9: #212529; --accent-7: #495057;
--accent-8: #343a40;
--accent-9: #212529;
--accent-10: #000;
--font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
'Helvetica', sans-serif; 'Helvetica', sans-serif;
} }
@ -48,16 +52,18 @@
--text-primary: white; --text-primary: white;
--text-secondary: black; --text-secondary: black;
--accents-0: #212529; --accent-0: #000;
--accents-1: #343a40; --accent-05: #212529;
--accents-2: #495057; --accent-1: #343a40;
--accents-3: #868e96; --accent-2: #495057;
--accents-4: #adb5bd; --accent-3: #868e96;
--accents-5: #ced4da; --accent-4: #adb5bd;
--accents-6: #dee2e6; --accent-5: #ced4da;
--accents-7: #e9ecef; --accent-6: #dee2e6;
--accents-8: #f1f3f5; --accent-7: #e9ecef;
--accents-9: #f8f9fa; --accent-8: #f1f3f5;
--accent-9: #f8f9fa;
--accent-10: #fff;
} }
*, *,
@ -127,4 +133,3 @@ a {
opacity: 1; opacity: 1;
} }
} }

2
components/auth/ForgotPassword.tsx
View File

@ -61,7 +61,7 @@ const ForgotPassword: FC<Props> = () => {
</div> </div>
<span className="pt-3 text-center text-sm"> <span className="pt-3 text-center text-sm">
<span className="text-accents-7">Do you have an account?</span> <span className="text-accent-7">Do you have an account?</span>
{` `} {` `}
<a <a
className="text-accent-9 font-bold hover:underline cursor-pointer" className="text-accent-9 font-bold hover:underline cursor-pointer"

2
components/auth/LoginView.tsx
View File

@ -87,7 +87,7 @@ const LoginView: FC<Props> = () => {
Log In Log In
</Button> </Button>
<div className="pt-1 text-center text-sm"> <div className="pt-1 text-center text-sm">
<span className="text-accents-7">Don't have an account?</span> <span className="text-accent-7">Don't have an account?</span>
{` `} {` `}
<a <a
className="text-accent-9 font-bold hover:underline cursor-pointer" className="text-accent-9 font-bold hover:underline cursor-pointer"

4
components/auth/SignUpView.tsx
View File

@ -76,7 +76,7 @@ const SignUpView: FC<Props> = () => {
<Input placeholder="Last Name" onChange={setLastName} /> <Input placeholder="Last Name" onChange={setLastName} />
<Input type="email" placeholder="Email" onChange={setEmail} /> <Input type="email" placeholder="Email" onChange={setEmail} />
<Input type="password" placeholder="Password" onChange={setPassword} /> <Input type="password" placeholder="Password" onChange={setPassword} />
<span className="text-accents-8"> <span className="text-accent-8">
<span className="inline-block align-middle "> <span className="inline-block align-middle ">
<Info width="15" height="15" /> <Info width="15" height="15" />
</span>{' '} </span>{' '}
@ -97,7 +97,7 @@ const SignUpView: FC<Props> = () => {
</div> </div>
<span className="pt-1 text-center text-sm"> <span className="pt-1 text-center text-sm">
<span className="text-accents-7">Do you have an account?</span> <span className="text-accent-7">Do you have an account?</span>
{` `} {` `}
<a <a
className="text-accent-9 font-bold hover:underline cursor-pointer" className="text-accent-9 font-bold hover:underline cursor-pointer"

8
components/cart/CartItem/CartItem.module.css
View File

@ -7,25 +7,25 @@
} }
.actions { .actions {
@apply flex p-1 border-accents-3 border items-center justify-center w-12 text-accents-7; @apply flex p-1 border-accent-3 border items-center justify-center w-12 text-accent-7;
transition-property: border-color, background, color, transform, box-shadow; transition-property: border-color, background, color, transform, box-shadow;
transition-duration: 0.15s; transition-duration: 0.15s;
transition-timing-function: ease; transition-timing-function: ease;
} }
.actions:hover { .actions:hover {
@apply bg-accents-1 border-accents-4 text-accents-9; @apply bg-accent-1 border-accent-4 text-accent-9;
transition: border-color; transition: border-color;
z-index: 10; z-index: 10;
} }
.actions:focus { .actions:focus {
@apply bg-accents-2 outline-none; @apply bg-accent-2 outline-none;
} }
.quantity { .quantity {
appearance: textfield; appearance: textfield;
@apply w-8 border-accents-2 border mx-3 rounded text-center text-sm text-black; @apply w-8 border-accent-2 border mx-3 rounded text-center text-sm text-black;
} }
.quantity::-webkit-outer-spin-button, .quantity::-webkit-outer-spin-button,

14
components/cart/CartItem/CartItem.tsx
View File

@ -20,8 +20,10 @@ type ItemOption = {
const CartItem = ({ const CartItem = ({
item, item,
currencyCode, currencyCode,
noEdit = false,
...rest ...rest
}: { }: {
noEdit?: boolean
item: LineItem item: LineItem
currencyCode: string currencyCode: string
}) => { }) => {
@ -123,18 +125,18 @@ const CartItem = ({
{options.map((option: ItemOption, i: number) => ( {options.map((option: ItemOption, i: number) => (
<div <div
key={`${item.id}-${option.name}`} key={`${item.id}-${option.name}`}
className="text-sm font-semibold text-accents-7 inline-flex items-center justify-center" className="text-sm font-semibold text-accent-7 inline-flex items-center justify-center"
> >
{option.name} {option.name}
{option.name === 'Color' ? ( {option.name === 'Color' ? (
<span <span
className="mx-2 rounded-full bg-transparent border w-5 h-5 p-1 text-accents-9 inline-flex items-center justify-center overflow-hidden" className="mx-2 rounded-full bg-transparent border w-5 h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden"
style={{ style={{
backgroundColor: `${option.value}`, backgroundColor: `${option.value}`,
}} }}
></span> ></span>
) : ( ) : (
<span className="mx-2 rounded-full bg-transparent border h-5 p-1 text-accents-9 inline-flex items-center justify-center overflow-hidden"> <span className="mx-2 rounded-full bg-transparent border h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden">
{option.value} {option.value}
</span> </span>
)} )}
@ -148,11 +150,12 @@ const CartItem = ({
<span>{price}</span> <span>{price}</span>
</div> </div>
</div> </div>
{!noEdit ? (
<div className="flex flex-row h-9"> <div className="flex flex-row h-9">
<button className={s.actions} onClick={handleRemove}> <button className={s.actions} onClick={handleRemove}>
<Cross width={20} height={20} /> <Cross width={20} height={20} />
</button> </button>
<label className="w-full border-accents-3 border ml-2"> <label className="w-full border-accent-3 border ml-2">
<input <input
type="number" type="number"
max={99} max={99}
@ -180,6 +183,9 @@ const CartItem = ({
<Plus width={18} height={18} /> <Plus width={18} height={18} />
</button> </button>
</div> </div>
) : (
<div>x{quantity}</div>
)}
</li> </li>
) )
} }

3
components/cart/CartSidebarView/CartSidebarView.module.css
View File

@ -1,6 +1,5 @@
.root { .root {
@apply h-full flex flex-col relative w-full; @apply h-full flex flex-col relative w-full relative;
height: calc(100vh + 300px);
} }
.root.empty { .root.empty {

12
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -47,7 +47,7 @@ const CartSidebarView: FC = () => {
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
> >
<Cross className="h-6 w-6" /> <Cross className="h-6 w-6" />
<span className="ml-2 text-accents-7 text-xs hover:text-gray-500"> <span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
Close Close
</span> </span>
</button> </button>
@ -66,7 +66,7 @@ const CartSidebarView: FC = () => {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center"> <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty Your cart is empty
</h2> </h2>
<p className="text-accents-3 px-10 text-center pt-2"> <p className="text-accent-3 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p> </p>
</div> </div>
@ -94,13 +94,13 @@ const CartSidebarView: FC = () => {
<div className="px-4 sm:px-6 flex-1"> <div className="px-4 sm:px-6 flex-1">
<Link href="/cart"> <Link href="/cart">
<h2 <h2
className="pt-1 pb-2 text-sm uppercase font-semibold tracking-wide cursor-pointer inline-block" className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block"
onClick={handleClose} onClick={handleClose}
> >
My Cart My Cart
</h2> </h2>
</Link> </Link>
<ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-accents-3"> <ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-3 border-accent-3">
{data!.lineItems.map((item: any) => ( {data!.lineItems.map((item: any) => (
<CartItem <CartItem
key={item.id} key={item.id}
@ -111,7 +111,7 @@ const CartSidebarView: FC = () => {
</ul> </ul>
</div> </div>
<div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accents-0 shadow-outline-normal text-sm"> <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 shadow-outline-normal text-sm">
<ul className="pb-2"> <ul className="pb-2">
<li className="flex justify-between py-1"> <li className="flex justify-between py-1">
<span>Subtotal</span> <span>Subtotal</span>
@ -126,7 +126,7 @@ const CartSidebarView: FC = () => {
<span className="font-bold tracking-wide">FREE</span> <span className="font-bold tracking-wide">FREE</span>
</li> </li>
</ul> </ul>
<div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-2"> <div className="flex justify-between border-t border-accent-3 py-3 font-bold mb-2">
<span>Total</span> <span>Total</span>
<span>{total}</span> <span>{total}</span>
</div> </div>

15
components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
View File

@ -1,16 +1,3 @@
.root { .root {
@apply h-full flex flex-col relative w-full; @apply h-full flex flex-col relative w-full relative;
height: calc(100vh + 300px);
}
.root.empty {
@apply bg-secondary text-secondary;
}
.root.success {
@apply bg-green text-white;
}
.root.error {
@apply bg-red text-white;
} }

47
components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
View File

@ -13,6 +13,7 @@ import {
MapPin, MapPin,
CreditCard, CreditCard,
ChevronLeft, ChevronLeft,
ChevronRight,
} from '@components/icons' } from '@components/icons'
import useCart from '@framework/cart/use-cart' import useCart from '@framework/cart/use-cart'
import usePrice from '@framework/product/use-price' import usePrice from '@framework/product/use-price'
@ -53,7 +54,7 @@ const CheckoutSidebarView: FC = () => {
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
> >
<ChevronLeft className="h-6 w-6" /> <ChevronLeft className="h-6 w-6" />
<span className="ml-2 text-accents-7 text-xs hover:text-gray-500"> <span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
Back Back
</span> </span>
</button> </button>
@ -72,7 +73,7 @@ const CheckoutSidebarView: FC = () => {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center"> <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty Your cart is empty
</h2> </h2>
<p className="text-accents-3 px-10 text-center pt-2"> <p className="text-accent-3 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p> </p>
</div> </div>
@ -99,10 +100,7 @@ const CheckoutSidebarView: FC = () => {
<> <>
<div className="px-4 sm:px-6 flex-1"> <div className="px-4 sm:px-6 flex-1">
<Link href="/cart"> <Link href="/cart">
<h2 <h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
className="pt-1 pb-2 text-sm uppercase font-semibold tracking-wide cursor-pointer inline-block"
onClick={handleClose}
>
Checkout Checkout
</h2> </h2>
</Link> </Link>
@ -111,47 +109,54 @@ const CheckoutSidebarView: FC = () => {
{/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */} {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
<div <div
onClick={() => setSidebarView('PAYMENT_VIEW')} onClick={() => setSidebarView('PAYMENT_VIEW')}
className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4" className="border border-accent-2 px-6 py-5 mb-4 text-center flex items-center cursor-pointer hover:border-accent-4"
> >
<div className="mr-5"> <div className="flex flex-1 items-center">
<CreditCard /> <CreditCard className="w-5 flex" />
</div> <span className="ml-5 text-sm text-center font-medium">
<div className="text-sm text-center font-medium"> Add Payment Method
<span>Add Payment Method</span> </span>
{/* <span>VISA #### #### #### 2345</span> */} {/* <span>VISA #### #### #### 2345</span> */}
</div> </div>
<div>
<ChevronRight />
</div>
</div> </div>
{/* Shipping Address */} {/* Shipping Address */}
{/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */} {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
<div <div
onClick={() => setSidebarView('SHIPPING_VIEW')} onClick={() => setSidebarView('SHIPPING_VIEW')}
className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4" className="border border-accent-2 px-6 py-5 mb-4 text-center flex items-center cursor-pointer hover:border-accent-4"
> >
<div className="mr-5"> <div className="flex flex-1 items-center">
<MapPin /> <MapPin className="w-5 flex" />
</div> <span className="ml-5 text-sm text-center font-medium">
<div className="text-sm text-center font-medium"> Add Shipping Address
<span>Add Shipping Address</span> </span>
{/* <span> {/* <span>
1046 Kearny Street.<br/> 1046 Kearny Street.<br/>
San Franssisco, California San Franssisco, California
</span> */} </span> */}
</div> </div>
<div>
<ChevronRight />
</div>
</div> </div>
<ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-accents-3"> <ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-3 border-accent-3">
{data!.lineItems.map((item: any) => ( {data!.lineItems.map((item: any) => (
<CartItem <CartItem
key={item.id} key={item.id}
item={item} item={item}
currencyCode={data!.currency.code} currencyCode={data!.currency.code}
noEdit
/> />
))} ))}
</ul> </ul>
</div> </div>
<div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accents-0 shadow-outline-normal text-sm"> <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 shadow-outline-normal text-sm">
<ul className="pb-2"> <ul className="pb-2">
<li className="flex justify-between py-1"> <li className="flex justify-between py-1">
<span>Subtotal</span> <span>Subtotal</span>
@ -166,7 +171,7 @@ const CheckoutSidebarView: FC = () => {
<span className="font-bold tracking-wide">FREE</span> <span className="font-bold tracking-wide">FREE</span>
</li> </li>
</ul> </ul>
<div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-2"> <div className="flex justify-between border-t border-accent-3 py-3 font-bold mb-2">
<span>Total</span> <span>Total</span>
<span>{total}</span> <span>{total}</span>
</div> </div>

19
components/checkout/PaymentMethodView/PaymentMethodView.module.css
View File

@ -1,2 +1,21 @@
.root { .root {
@apply h-full flex flex-col relative w-full relative;
}
.fieldset {
@apply flex flex-col my-3;
}
.fieldset .label {
@apply text-accent-7 uppercase text-xs font-medium mb-2;
}
.fieldset .input,
.fieldset .select {
@apply p-2 border border-accent-3 w-full text-sm font-normal;
}
.fieldset .input:focus,
.fieldset .select:focus {
@apply outline-none shadow-outline-normal;
} }

70
components/checkout/PaymentMethodView/PaymentMethodView.tsx
View File

@ -3,6 +3,8 @@ import s from './PaymentMethodView.module.css'
import { ChevronLeft } from '@components/icons' import { ChevronLeft } from '@components/icons'
import { UserNav } from '@components/common' import { UserNav } from '@components/common'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import Button from '@components/ui/Button'
import cn from 'classnames'
const PaymentMethodView: FC = () => { const PaymentMethodView: FC = () => {
const { setSidebarView } = useUI() const { setSidebarView } = useUI()
@ -18,7 +20,7 @@ const PaymentMethodView: FC = () => {
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
> >
<ChevronLeft className="h-6 w-6" /> <ChevronLeft className="h-6 w-6" />
<span className="ml-2 text-accents-7 text-xs hover:text-gray-500"> <span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
Back Back
</span> </span>
</button> </button>
@ -29,9 +31,73 @@ const PaymentMethodView: FC = () => {
</div> </div>
</header> </header>
<div className="px-4 sm:px-6 flex-1"> <div className="px-4 sm:px-6 flex-1">
<h2 className="pt-1 pb-2 text-sm uppercase font-semibold tracking-wide cursor-pointer inline-block"> <h2 className="pt-1 pb-6 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
Payment Method Payment Method
</h2> </h2>
<div>
<div className={s.fieldset}>
<label className={s.label}>Cardholder Name</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-7')}>
<label className={s.label}>Card Number</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-3')}>
<label className={s.label}>Expires</label>
<input className={s.input} placeholder="MM/YY" />
</div>
<div className={cn(s.fieldset, 'col-span-2')}>
<label className={s.label}>CVC</label>
<input className={s.input} />
</div>
</div>
<hr className="border-accent-3 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select className={s.select}>
<option>Hong Kong</option>
</select>
</div>
<div className="mt-10 sticky z-20 bottom-0 w-full right-0 left-0 ">
<Button Component="a" width="100%" variant="ghost">
Continue
</Button>
</div>
</div>
</div> </div>
</div> </div>
) )

23
components/checkout/ShippingView/ShippingView.module.css
View File

@ -1,2 +1,25 @@
.root { .root {
@apply h-full flex flex-col relative w-full relative;
}
.fieldset {
@apply flex flex-col my-3;
}
.fieldset .label {
@apply text-accent-7 uppercase text-xs font-medium mb-2;
}
.fieldset .input,
.fieldset .select {
@apply p-2 border border-accent-3 w-full text-sm font-normal;
}
.fieldset .input:focus,
.fieldset .select:focus {
@apply outline-none shadow-outline-normal;
}
.radio {
@apply bg-black;
} }

62
components/checkout/ShippingView/ShippingView.tsx
View File

@ -3,6 +3,8 @@ import s from './ShippingView.module.css'
import { ChevronLeft } from '@components/icons' import { ChevronLeft } from '@components/icons'
import { UserNav } from '@components/common' import { UserNav } from '@components/common'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import Button from '@components/ui/Button'
import cn from 'classnames'
const PaymentMethodView: FC = () => { const PaymentMethodView: FC = () => {
const { setSidebarView } = useUI() const { setSidebarView } = useUI()
@ -18,7 +20,7 @@ const PaymentMethodView: FC = () => {
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none" className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
> >
<ChevronLeft className="h-6 w-6" /> <ChevronLeft className="h-6 w-6" />
<span className="ml-2 text-accents-7 text-xs hover:text-gray-500"> <span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
Back Back
</span> </span>
</button> </button>
@ -29,9 +31,65 @@ const PaymentMethodView: FC = () => {
</div> </div>
</header> </header>
<div className="px-4 sm:px-6 flex-1"> <div className="px-4 sm:px-6 flex-1">
<h2 className="pt-1 pb-2 text-sm uppercase font-semibold tracking-wide cursor-pointer inline-block"> <h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
Shipping Shipping
</h2> </h2>
<div>
<div className="flex flex-row my-3 items-center">
<input className={s.radio} type="radio" />
<span className="ml-3 text-sm">Same as billing address</span>
</div>
<div className="flex flex-row my-3 items-center">
<input className={s.radio} type="radio" />
<span className="ml-3 text-sm">
Use a different shipping address
</span>
</div>
<hr className="border-accent-3 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select className={s.select}>
<option>Hong Kong</option>
</select>
</div>
</div>
</div>
<div className="mt-10 sticky z-20 bottom-0 w-full right-0 left-0 p-6">
<Button href="/checkout" Component="a" width="100%" variant="ghost">
Continue
</Button>
</div> </div>
</div> </div>
) )

12
components/common/Footer/Footer.tsx
View File

@ -24,7 +24,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
return ( return (
<footer className={rootClassName}> <footer className={rootClassName}>
<Container> <Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
<div className="col-span-1 lg:col-span-2"> <div className="col-span-1 lg:col-span-2">
<Link href="/"> <Link href="/">
<a className="flex flex-initial items-center font-bold md:mr-24"> <a className="flex flex-initial items-center font-bold md:mr-24">
@ -39,21 +39,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
<ul className="flex flex-initial flex-col md:flex-1"> <ul className="flex flex-initial flex-col md:flex-1">
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/"> <Link href="/">
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150"> <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
Home Home
</a> </a>
</Link> </Link>
</li> </li>
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/"> <Link href="/">
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150"> <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
Careers Careers
</a> </a>
</Link> </Link>
</li> </li>
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/blog"> <Link href="/blog">
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150"> <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
Blog Blog
</a> </a>
</Link> </Link>
@ -61,7 +61,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{sitePages.map((page) => ( {sitePages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}> <Link href={page.url!}>
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150"> <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
{page.name} {page.name}
</a> </a>
</Link> </Link>
@ -74,7 +74,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{legalPages.map((page) => ( {legalPages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}> <Link href={page.url!}>
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150"> <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
{page.name} {page.name}
</a> </a>
</Link> </Link>

4
components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
View File

@ -28,7 +28,7 @@ const HomeAllProductsGrid: FC<Props> = ({
</Link> </Link>
</li> </li>
{categories.map((cat: any) => ( {categories.map((cat: any) => (
<li key={cat.path} className="py-1 text-accents-8 text-base"> <li key={cat.path} className="py-1 text-accent-8 text-base">
<Link href={getCategoryPath(cat.path)}> <Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a> <a>{cat.name}</a>
</Link> </Link>
@ -42,7 +42,7 @@ const HomeAllProductsGrid: FC<Props> = ({
</Link> </Link>
</li> </li>
{brands.flatMap(({ node }: any) => ( {brands.flatMap(({ node }: any) => (
<li key={node.path} className="py-1 text-accents-8 text-base"> <li key={node.path} className="py-1 text-accent-8 text-base">
<Link href={getDesignerPath(node.path)}> <Link href={getDesignerPath(node.path)}>
<a>{node.name}</a> <a>{node.name}</a>
</Link> </Link>

8
components/common/I18nWidget/I18nWidget.module.css
View File

@ -3,11 +3,11 @@
} }
.button { .button {
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center; @apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center;
} }
.button:hover { .button:hover {
@apply border-accents-4 shadow-sm; @apply border-accent-4 shadow-sm;
} }
.button:focus { .button:focus {
@ -18,7 +18,7 @@
@apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full; @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
@screen lg { @screen lg {
@apply absolute border border-accents-1 shadow-lg w-56 h-auto; @apply absolute border border-accent-1 shadow-lg w-56 h-auto;
} }
} }
@ -34,7 +34,7 @@
} }
.item:hover { .item:hover {
@apply bg-accents-1; @apply bg-accent-1;
} }
.icon { .icon {

6
components/common/Navbar/Navbar.module.css
View File

@ -3,15 +3,15 @@
} }
.link { .link {
@apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6; @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accent-6;
} }
.link:hover { .link:hover {
@apply text-accents-9; @apply text-accent-9;
} }
.link:focus { .link:focus {
@apply outline-none text-accents-8; @apply outline-none text-accent-8;
} }
.logo { .logo {

2
components/common/Searchbar/Searchbar.tsx
View File

@ -19,7 +19,7 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
() => ( () => (
<div <div
className={cn( className={cn(
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150', 'relative text-sm bg-accent-1 text-base w-full transition-colors duration-150',
className className
)} )}
> >

6
components/common/UserNav/DropdownMenu.module.css
View File

@ -2,7 +2,7 @@
@apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full; @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
@screen lg { @screen lg {
@apply absolute top-10 border border-accents-1 shadow-lg w-56 h-auto; @apply absolute top-10 border border-accent-1 shadow-lg w-56 h-auto;
} }
} }
@ -12,11 +12,11 @@
} }
.link:hover { .link:hover {
@apply bg-accents-1; @apply bg-accent-1;
} }
.link.active { .link.active {
@apply font-bold bg-accents-2; @apply font-bold bg-accent-2;
} }
.off { .off {

2
components/common/UserNav/DropdownMenu.tsx
View File

@ -109,7 +109,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
</li> </li>
<li> <li>
<a <a
className={cn(s.link, 'border-t border-accents-2 mt-4')} className={cn(s.link, 'border-t border-accent-2 mt-4')}
onClick={() => logout()} onClick={() => logout()}
> >
Logout Logout

4
components/common/UserNav/UserNav.module.css
View File

@ -10,7 +10,7 @@
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary; @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
&:hover { &:hover {
@apply text-accents-6 transition scale-110 duration-100; @apply text-accent-6 transition scale-110 duration-100;
} }
&:last-child { &:last-child {
@ -24,7 +24,7 @@
} }
.bagCount { .bagCount {
@apply border border-accents-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs; @apply border border-accent-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
padding-left: 2.5px; padding-left: 2.5px;
padding-right: 2.5px; padding-right: 2.5px;
min-width: 1.25rem; min-width: 1.25rem;

20
components/icons/ChevronRight.tsx Normal file
View File

@ -0,0 +1,20 @@
const ChevronUp = ({ ...props }) => {
return (
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
{...props}
>
<path d="M9 18l6-6-6-6" />
</svg>
)
}
export default ChevronUp

1
components/icons/CreditCard.tsx
View File

@ -10,6 +10,7 @@ const CreditCard = ({ ...props }) => {
strokeLinejoin="round" strokeLinejoin="round"
fill="none" fill="none"
shapeRendering="geometricPrecision" shapeRendering="geometricPrecision"
{...props}
> >
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" /> <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
<path d="M1 10h22" /> <path d="M1 10h22" />

1
components/icons/index.ts
View File

@ -16,4 +16,5 @@ export { default as MapPin } from './MapPin'
export { default as CreditCard } from './CreditCard' export { default as CreditCard } from './CreditCard'
export { default as ChevronUp } from './ChevronUp' export { default as ChevronUp } from './ChevronUp'
export { default as ChevronLeft } from './ChevronLeft' export { default as ChevronLeft } from './ChevronLeft'
export { default as ChevronRight } from './ChevronRight'
export { default as DoubleChevron } from './DoubleChevron' export { default as DoubleChevron } from './DoubleChevron'

2
components/product/ProductCard/ProductCard.module.css
View File

@ -81,7 +81,7 @@
.simple { .simple {
& .squareBg { & .squareBg {
@apply bg-accents-0 !important; @apply bg-accent-0 !important;
background-image: url('/bg-products.svg'); background-image: url('/bg-products.svg');
} }

2
components/product/ProductView/ProductView.tsx
View File

@ -162,7 +162,7 @@ const ProductView: FC<Props> = ({ product }) => {
<div className="mt-2"> <div className="mt-2">
<ul> <ul>
<li className="border-b border-accents-2 py-4 px-2 flex flex-row"> <li className="border-b border-accent-2 py-4 px-2 flex flex-row">
Details Details
</li> </li>
</ul> </ul>

2
components/product/Swatch/Swatch.module.css
View File

@ -28,6 +28,6 @@
.active { .active {
&.size { &.size {
@apply border-accents-9 border-2; @apply border-accent-9 border-2;
} }
} }

10
components/ui/Button/Button.module.css
View File

@ -1,12 +1,12 @@
.root { .root {
@apply bg-secondary text-accents-1 cursor-pointer inline-flex @apply bg-secondary text-accent-1 cursor-pointer inline-flex
px-10 rounded-sm leading-6 transition ease-in-out duration-150 px-10 rounded-sm leading-6 transition ease-in-out duration-150
shadow-sm font-semibold text-center justify-center uppercase shadow-sm font-semibold text-center justify-center uppercase
py-4 border border-transparent items-center; py-4 border border-transparent items-center;
} }
.root:hover { .root:hover {
@apply bg-accents-0 text-primary border border-secondary; @apply bg-accent-0 text-primary border border-secondary;
} }
.root:focus { .root:focus {
@ -18,7 +18,7 @@
} }
.loading { .loading {
@apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed; @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed;
} }
.slim { .slim {
@ -26,12 +26,12 @@
} }
.ghost { .ghost {
@apply border border-accents-3 bg-accents-0 text-accents-9 text-sm; @apply border border-accent-3 bg-accent-0 text-accent-9 text-sm;
} }
.disabled, .disabled,
.disabled:hover { .disabled:hover {
@apply text-accents-4 border-accents-2 bg-accents-1 cursor-not-allowed; @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;
filter: grayscale(1); filter: grayscale(1);
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
-webkit-perspective: 1000; -webkit-perspective: 1000;

2
components/ui/Input/Input.module.css
View File

@ -1,5 +1,5 @@
.root { .root {
@apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6; @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accent-3 text-accent-6;
} }
.root:focus { .root:focus {

2
components/ui/LoadingDots/LoadingDots.module.css
View File

@ -2,7 +2,7 @@
@apply inline-flex text-center items-center leading-7; @apply inline-flex text-center items-center leading-7;
& span { & span {
@apply bg-accents-6 rounded-full h-2 w-2; @apply bg-accent-6 rounded-full h-2 w-2;
animation-name: blink; animation-name: blink;
animation-duration: 1.4s; animation-duration: 1.4s;
animation-iteration-count: infinite; animation-iteration-count: infinite;

2
components/ui/Modal/Modal.module.css
View File

@ -4,7 +4,7 @@
} }
.modal { .modal {
@apply bg-primary p-12 border border-accents-2 relative; @apply bg-primary p-12 border border-accent-2 relative;
} }
.modal:focus { .modal:focus {

2
components/ui/Sidebar/Sidebar.tsx
View File

@ -40,7 +40,7 @@ const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
/> />
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"> <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
<div className="h-full md:w-screen md:max-w-md"> <div className="h-full md:w-screen md:max-w-md">
<div className="h-full flex flex-col text-base bg-accents-0 shadow-xl overflow-y-auto"> <div className="h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto">
{children} {children}
</div> </div>
</div> </div>

16
components/ui/Skeleton/Skeleton.module.css
View File

@ -2,10 +2,10 @@
@apply block; @apply block;
background-image: linear-gradient( background-image: linear-gradient(
270deg, 270deg,
var(--accents-1), var(--accent-1),
var(--accents-2), var(--accent-2),
var(--accents-2), var(--accent-2),
var(--accents-1) var(--accent-1)
); );
background-size: 400% 100%; background-size: 400% 100%;
animation: loading 8s ease-in-out infinite; animation: loading 8s ease-in-out infinite;
@ -28,10 +28,10 @@
z-index: 100; z-index: 100;
background-image: linear-gradient( background-image: linear-gradient(
270deg, 270deg,
var(--accents-1), var(--accent-1),
var(--accents-2), var(--accent-2),
var(--accents-2), var(--accent-2),
var(--accents-1) var(--accent-1)
); );
background-size: 400% 100%; background-size: 400% 100%;
animation: loading 8s ease-in-out infinite; animation: loading 8s ease-in-out infinite;

2
components/ui/Text/Text.module.css
View File

@ -11,5 +11,5 @@
} }
.sectionHeading { .sectionHeading {
@apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accents-2 mb-3; @apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accent-2 mb-3;
} }

2
components/wishlist/WishlistCard/WishlistCard.module.css
View File

@ -1,5 +1,5 @@
.root { .root {
@apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2 transition duration-100 ease-in-out; @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accent-2 transition duration-100 ease-in-out;
&:nth-child(3n + 1) { &:nth-child(3n + 1) {
& .productBg { & .productBg {

14
pages/cart.tsx
View File

@ -48,7 +48,7 @@ export default function Cart() {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center"> <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty Your cart is empty
</h2> </h2>
<p className="text-accents-6 px-10 text-center pt-2"> <p className="text-accent-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p> </p>
</div> </div>
@ -75,7 +75,7 @@ export default function Cart() {
<div className="px-4 sm:px-6 flex-1"> <div className="px-4 sm:px-6 flex-1">
<Text variant="pageHeading">My Cart</Text> <Text variant="pageHeading">My Cart</Text>
<Text variant="sectionHeading">Review your Order</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-accents-2 border-b border-accents-2"> <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) => ( {data!.lineItems.map((item) => (
<CartItem <CartItem
key={item.id} key={item.id}
@ -93,7 +93,7 @@ export default function Cart() {
{[1, 2, 3, 4, 5, 6].map((x) => ( {[1, 2, 3, 4, 5, 6].map((x) => (
<div <div
key={x} key={x}
className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75" 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>
@ -107,7 +107,7 @@ export default function Cart() {
<> <>
{/* Shipping Address */} {/* Shipping Address */}
{/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */} {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
<div className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4"> <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"> <div className="mr-5">
<MapPin /> <MapPin />
</div> </div>
@ -121,7 +121,7 @@ export default function Cart() {
</div> </div>
{/* Payment Method */} {/* Payment Method */}
{/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */} {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
<div className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4"> <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"> <div className="mr-5">
<CreditCard /> <CreditCard />
</div> </div>
@ -132,7 +132,7 @@ export default function Cart() {
</div> </div>
</> </>
)} )}
<div className="border-t border-accents-2"> <div className="border-t border-accent-2">
<ul className="py-3"> <ul className="py-3">
<li className="flex justify-between py-1"> <li className="flex justify-between py-1">
<span>Subtotal</span> <span>Subtotal</span>
@ -147,7 +147,7 @@ export default function Cart() {
<span className="font-bold tracking-wide">FREE</span> <span className="font-bold tracking-wide">FREE</span>
</li> </li>
</ul> </ul>
<div className="flex justify-between border-t border-accents-2 py-3 font-bold mb-10"> <div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-10">
<span>Total</span> <span>Total</span>
<span>{total}</span> <span>{total}</span>
</div> </div>

2
pages/orders.tsx
View File

@ -27,7 +27,7 @@ export default function Orders() {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center"> <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
No orders found No orders found
</h2> </h2>
<p className="text-accents-6 px-10 text-center pt-2"> <p className="text-accent-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p> </p>
</div> </div>

2
pages/wishlist.tsx
View File

@ -48,7 +48,7 @@ export default function Wishlist() {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center"> <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your wishlist is empty Your wishlist is empty
</h2> </h2>
<p className="text-accents-6 px-10 text-center pt-2"> <p className="text-accent-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p> </p>
</div> </div>

22
tailwind.config.js
View File

@ -27,16 +27,16 @@ module.exports = {
hover: 'var(--hover)', hover: 'var(--hover)',
'hover-1': 'var(--hover-1)', 'hover-1': 'var(--hover-1)',
'hover-2': 'var(--hover-2)', 'hover-2': 'var(--hover-2)',
'accents-0': 'var(--accents-0)', 'accent-0': 'var(--accent-0)',
'accents-1': 'var(--accents-1)', 'accent-1': 'var(--accent-1)',
'accents-2': 'var(--accents-2)', 'accent-2': 'var(--accent-2)',
'accents-3': 'var(--accents-3)', 'accent-3': 'var(--accent-3)',
'accents-4': 'var(--accents-4)', 'accent-4': 'var(--accent-4)',
'accents-5': 'var(--accents-5)', 'accent-5': 'var(--accent-5)',
'accents-6': 'var(--accents-6)', 'accent-6': 'var(--accent-6)',
'accents-7': 'var(--accents-7)', 'accent-7': 'var(--accent-7)',
'accents-8': 'var(--accents-8)', 'accent-8': 'var(--accent-8)',
'accents-9': 'var(--accents-9)', 'accent-9': 'var(--accent-9)',
violet: 'var(--violet)', violet: 'var(--violet)',
'violet-light': 'var(--violet-light)', 'violet-light': 'var(--violet-light)',
pink: 'var(--pink)', pink: 'var(--pink)',
@ -51,7 +51,7 @@ module.exports = {
secondary: 'var(--text-secondary)', secondary: 'var(--text-secondary)',
}, },
boxShadow: { boxShadow: {
'outline-normal': '0 0 0 2px var(--accents-2)', 'outline-normal': '0 0 0 2px var(--accent-2)',
magical: 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', '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',
}, },