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

Removes custom Tailwind config colors (#1086)

Browse Source
This commit is contained in:
Michael Novotny 2023-07-17 17:47:52 -05:00 committed by GitHub
parent 521b8fcb04
commit 73c6d455fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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,13 +11,13 @@ const { COMPANY_NAME, 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');
const copyrightName = COMPANY_NAME || SITE_NAME || '';
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-4 xl: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-4 xl:px-0">
<div>
<Link className="flex items-center gap-2 text-black dark:text-white" href="/">
<LogoSquare size="sm" />
@ -49,13 +49,13 @@ 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} {copyrightName}
{copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} 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

@ -35,7 +35,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')}
@ -43,7 +43,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 },