crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 22:16:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removes custom Tailwind config colors

Browse Source
This commit is contained in:
Michael Novotny 2023-07-17 16:40:44 -05:00
parent 650c9a4e28
commit daba40c5fe
No known key found for this signature in database
24 changed files with 43 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/globals.css
View File

@ -11,5 +11,5 @@
a,
input,
button {
@apply focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-gray-600 dark:focus:ring-offset-dark;
@apply focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-50 dark:focus:ring-neutral-600 dark:focus:ring-offset-neutral-900;
}

2
app/layout.tsx
View File

@ -33,7 +33,7 @@ const inter = Inter({
export default async function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={inter.variable}>
<body className="bg-gray-50 text-black selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<Navbar />
<Suspense>
<main>{children}</main>

2
app/product/[handle]/page.tsx
View File

@ -82,7 +82,7 @@ export default async function ProductPage({ params }: { params: { handle: string
}}
/>
<div className="px-4">
<div className="rounded-lg border border-gray-200 bg-white p-8 px-4 dark:border-gray-700 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
<div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-700 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
<div className="lg:col-span-4">
<Gallery
images={product.images.map((image: Image) => ({

4
app/search/loading.tsx
View File

@ -6,7 +6,9 @@ export default function Loading() {
{Array(12)
.fill(0)
.map((_, index) => {
return <Grid.Item key={index} className="animate-pulse bg-gray-100 dark:bg-gray-900" />;
return (
<Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
);
})}
</Grid>
);

2
components/cart/close-cart.tsx
View File

@ -3,7 +3,7 @@ import clsx from 'clsx';
export default function CloseCart({ className }: { className?: string }) {
return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
<XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
</div>
);

2
components/cart/delete-item-button.tsx
View File

@ -28,7 +28,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
}}
disabled={isPending}
className={clsx(
'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-gray-500 transition-all duration-200',
'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
{
'cursor-not-allowed px-0': isPending
}

6
components/cart/edit-item-quantity-button.tsx
View File

@ -41,7 +41,7 @@ export default function EditItemQuantityButton({
}}
disabled={isPending}
className={clsx(
'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-gray-800 hover:opacity-80',
'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
{
'cursor-not-allowed': isPending,
'ml-auto': type === 'minus'
@ -51,9 +51,9 @@ export default function EditItemQuantityButton({
{isPending ? (
<LoadingDots className="bg-black dark:bg-white" />
) : type === 'plus' ? (
<PlusIcon className="h-4 w-4 dark:text-gray-500" />
<PlusIcon className="h-4 w-4 dark:text-neutral-500" />
) : (
<MinusIcon className="h-4 w-4 dark:text-gray-500" />
<MinusIcon className="h-4 w-4 dark:text-neutral-500" />
)}
</button>
);

18
components/cart/modal.tsx
View File

@ -64,7 +64,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-gray-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-gray-700 dark:bg-black/80 dark:text-white md:w-[390px]">
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
<div className="flex items-center justify-between">
<p className="text-lg font-semibold">My Cart</p>
@ -99,7 +99,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
<li
key={i}
data-testid="cart-item"
className="flex w-full flex-col border-b border-gray-300 dark:border-gray-700"
className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
>
<div className="relative flex w-full flex-row justify-between px-1 py-4">
<div className="absolute z-40 -mt-2 ml-[55px]">
@ -110,7 +110,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
onClick={closeCart}
className="z-30 flex flex-row space-x-4"
>
<div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-gray-300 bg-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800">
<div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<Image
className="h-full w-full object-cover "
width={64}
@ -129,7 +129,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</span>
{item.merchandise.title !== DEFAULT_OPTION ? (
<p
className="text-sm text-gray-800"
className="text-sm text-neutral-800"
data-testid="cart-product-variant"
>
{item.merchandise.title}
@ -143,7 +143,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
amount={item.cost.totalAmount.amount}
currencyCode={item.cost.totalAmount.currencyCode}
/>
<div className="ml-auto flex h-9 flex-row items-center rounded-full border border-gray-200 dark:border-gray-700">
<div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
<EditItemQuantityButton item={item} type="minus" />
<p className="w-6 text-center ">
<span className="w-full text-sm">{item.quantity}</span>
@ -156,8 +156,8 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
);
})}
</ul>
<div className="py-4 text-sm text-gray-400 dark:text-gray-500">
<div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-1 dark:border-gray-700">
<div className="py-4 text-sm text-neutral-400 dark:text-neutral-500">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
<p>Taxes</p>
<Price
className="text-right text-base text-black dark:text-white"
@ -165,11 +165,11 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
currencyCode={cart.cost.totalTaxAmount.currencyCode}
/>
</div>
<div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-1 pt-1 dark:border-gray-700">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
<p>Shipping</p>
<p className="text-right">Calculated at checkout</p>
</div>
<div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-1 pt-1 dark:border-gray-700">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
<p>Total</p>
<Price
className="text-right text-base text-black dark:text-white"

2
components/cart/open-cart.tsx
View File

@ -9,7 +9,7 @@ export default function OpenCart({
quantity?: number;
}) {
return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
<ShoppingCartIcon
className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
/>

2
components/grid/tile.tsx
View File

@ -26,7 +26,7 @@ export function GridTileImage({
{
relative: labels,
'border-2 border-blue-600': active,
'border-gray-200 dark:border-gray-800': !active
'border-neutral-200 dark:border-neutral-800': !active
}
)}
>

2
components/label.tsx
View File

@ -23,7 +23,7 @@ const Label = ({
>
<div
className={clsx(
'flex items-center rounded-full border bg-white/80 p-1 text-xs text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
'flex items-center rounded-full border bg-white/80 p-1 text-xs text-black backdrop-blur-md dark:border-neutral-800 dark:bg-black/80 dark:text-white',
{
'text-sm': size === 'large'
}

10
components/layout/footer.tsx
View File

@ -11,12 +11,12 @@ const { SITE_NAME } = process.env;
export default async function Footer() {
const currentYear = new Date().getFullYear();
const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
const skeleton = 'w-full h-6 animate-pulse rounded bg-gray-200 dark:bg-gray-700';
const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700';
const menu = await getMenu('next-js-frontend-footer-menu');
return (
<footer className="text-gray-400 dark:text-gray-500">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-gray-200 px-6 py-12 dark:border-gray-700 md:flex-row md:gap-12 md:px-0">
<footer className="text-neutral-400 dark:text-neutral-500">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 dark:border-neutral-700 md:flex-row md:gap-12 md:px-0">
<div>
<Link className="flex items-center gap-2 text-black dark:text-white" href="/">
<LogoSquare size="sm" />
@ -48,12 +48,12 @@ export default async function Footer() {
</a>
</div>
</div>
<div className="border-t border-gray-200 py-6 text-sm dark:border-gray-700">
<div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
<div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 md:flex-row md:gap-0">
<p>
&copy; {copyrightDate} {SITE_NAME}. All rights reserved.
</p>
<hr className="mx-4 hidden h-4 w-[1px] border-l border-gray-400 md:inline-block" />
<hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
<p>Designed in California</p>
<p className="md:ml-auto">
Crafted by{' '}

2
components/layout/navbar/index.tsx
View File

@ -35,7 +35,7 @@ export default async function Navbar() {
<li key={item.title}>
<Link
href={item.path}
className="mr-3 text-gray-500 underline-offset-4 hover:text-black hover:underline dark:hover:text-gray-400 lg:mr-8"
className="mr-3 text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-400 lg:mr-8"
>
{item.title}
</Link>

2
components/layout/navbar/mobile-menu.tsx
View File

@ -82,7 +82,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
<li key={item.title}>
<Link
href={item.path}
className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white"
className="rounded-lg py-1 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
onClick={closeMobileMenu}
>
{item.title}

2
components/layout/navbar/search.tsx
View File

@ -40,7 +40,7 @@ export default function Search() {
autoComplete="off"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-gray-800 dark:border-gray-800 dark:bg-transparent dark:text-gray-500 dark:placeholder:text-gray-500"
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-800 dark:border-neutral-800 dark:bg-transparent dark:text-neutral-500 dark:placeholder:text-neutral-500"
/>
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<MagnifyingGlassIcon className="h-4" />

4
components/layout/search/collections.tsx
View File

@ -10,8 +10,8 @@ async function CollectionList() {
}
const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
const activeAndTitles = 'bg-gray-800 dark:bg-gray-300';
const items = 'bg-gray-400 dark:bg-gray-700';
const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300';
const items = 'bg-neutral-400 dark:bg-neutral-700';
export default function Collections() {
return (

2
components/layout/search/filter/index.tsx
View File

@ -19,7 +19,7 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
return (
<>
<nav className="col-span-2 w-full flex-none px-6 py-2 md:py-4 md:pl-10">
{title ? <h3 className="hidden text-xs text-gray-500 md:block">{title}</h3> : null}
{title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
<ul className="hidden md:block">
<FilterItemList list={list} />
</ul>

2
components/layout/search/filter/item.tsx
View File

@ -26,7 +26,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
<DynamicTag
href={createUrl(item.path, newParams)}
className={clsx(
'w-full text-sm underline-offset-4 hover:underline dark:hover:text-gray-100',
'w-full text-sm underline-offset-4 hover:underline dark:hover:text-neutral-100',
{
'underline underline-offset-4': active
}

2
components/logo-square.tsx
View File

@ -5,7 +5,7 @@ export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
return (
<div
className={clsx(
'flex flex-none items-center justify-center border border-gray-200 dark:border-gray-700',
'flex flex-none items-center justify-center border border-neutral-200 dark:border-neutral-700',
{
'h-[40px] w-[40px] rounded-xl': !size,
'h-[30px] w-[30px] rounded-lg': size === 'sm'

4
components/product/gallery.tsx
View File

@ -34,7 +34,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
{images.length > 1 ? (
<div className="absolute bottom-[15%] flex w-full justify-center">
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-light/80 text-gray-500 backdrop-blur dark:border-black dark:bg-dark/80">
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
<button
aria-label="Previous product image"
onClick={() => handleNavigate('previous')}
@ -42,7 +42,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
>
<ArrowLeftIcon className="h-5" />
</button>
<div className="mx-1 h-6 w-px bg-gray-500"></div>
<div className="mx-1 h-6 w-px bg-neutral-500"></div>
<button
aria-label="Next product image"
onClick={() => handleNavigate('next')}

2
components/product/product-description.tsx
View File

@ -7,7 +7,7 @@ import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
return (
<>
<div className="mb-6 flex flex-col border-b pb-6 dark:border-gray-700">
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
<h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
<div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
<Price

4
components/product/variant-selector.tsx
View File

@ -114,12 +114,12 @@ export function VariantSelector({
href={optionUrl}
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
className={clsx(
'flex min-w-[48px] items-center justify-center rounded-full border bg-gray-100 px-2 py-1 text-sm dark:border-gray-900 dark:bg-gray-900',
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-900 dark:bg-neutral-900',
{
'cursor-default ring-2 ring-blue-600': isActive,
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
!isActive && isAvailableForSale,
'relative z-10 cursor-not-allowed overflow-hidden bg-gray-100 ring-1 ring-gray-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-gray-300 before:transition-transform dark:bg-gray-900 dark:ring-gray-700 before:dark:bg-gray-700':
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:ring-neutral-700 before:dark:bg-neutral-700':
!isAvailableForSale
}
)}

2
components/prose.tsx
View File

@ -10,7 +10,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
return (
<div
className={clsx(
'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-gray-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
className
)}
dangerouslySetInnerHTML={{ __html: html as string }}

14
tailwind.config.js
View File

@ -3,24 +3,12 @@ const colors = require('tailwindcss/colors');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./icons/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}'
],
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)']
},
colors: {
gray: colors.neutral,
hotPink: '#FF1966',
dark: '#111111',
light: '#FAFAFA',
violetDark: '#4c2889'
},
keyframes: {
fadeIn: {
from: { opacity: 0 },