Skip to content

wip: gray to neutral #2387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

wip: gray to neutral #2387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/(docs)/brand/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ export default async function DocPage({ children }: { children: React.ReactNode

<div className="mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 xl:max-w-5xl xl:grid-cols-[minmax(0,1fr)_var(--container-2xs)]">
<div className="px-4 pt-10 pb-24 sm:px-6 xl:pr-0">
<h1 data-title="true" className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">
<h1 data-title="true" className="mt-2 text-3xl font-medium tracking-tight text-neutral-950 dark:text-white">
{post.title}
</h1>
<p data-description="true" className="mt-6 text-base/7 text-gray-700 dark:text-gray-400">
<p data-description="true" className="mt-6 text-base/7 text-neutral-700 dark:text-neutral-400">
{post.description}
</p>

Expand Down
6 changes: 3 additions & 3 deletions src/app/(docs)/docs/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,16 +72,16 @@ export default async function DocPage(props: Props) {
<div className="px-4 pt-10 pb-24 sm:px-6 xl:pr-0">
{sectionAndTitle ? (
<p
className="flex items-center gap-2 font-mono text-xs/6 font-medium tracking-widest text-gray-600 uppercase dark:text-gray-400"
className="flex items-center gap-2 font-mono text-xs/6 font-medium tracking-widest text-neutral-600 uppercase dark:text-neutral-400"
data-section="true"
>
{sectionAndTitle.section}
</p>
) : null}
<h1 data-title="true" className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">
<h1 data-title="true" className="mt-2 text-3xl font-medium tracking-tight text-neutral-950 dark:text-white">
{post.title}
</h1>
<p data-description="true" className="mt-6 text-base/7 text-gray-700 dark:text-gray-400">
<p data-description="true" className="mt-6 text-base/7 text-neutral-700 dark:text-neutral-400">
{post.description}
</p>

Expand Down
10 changes: 5 additions & 5 deletions src/app/(docs)/docs/installation/(tabs)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,18 +99,18 @@ export default function Page({ children }: { children: React.ReactNode }) {
<div className="px-4 sm:px-6">
<p
data-section="true"
className="font-mono text-xs/6 font-medium tracking-widest text-gray-600 uppercase dark:text-gray-400"
className="font-mono text-xs/6 font-medium tracking-widest text-neutral-600 uppercase dark:text-neutral-400"
>
Installation
</p>
<h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white">
<h1 className="mt-2 text-3xl font-medium tracking-tight text-neutral-950 dark:text-white">
Get started with Tailwind CSS
</h1>
<p data-description="true" className="mt-6 text-base/7 text-gray-700 dark:text-gray-300">
<p data-description="true" className="mt-6 text-base/7 text-neutral-700 dark:text-neutral-300">
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for
class names, generating the corresponding styles and then writing them to a static CSS file.
</p>
<p className="mt-4 text-base/7 text-gray-700 dark:text-gray-300">
<p className="mt-4 text-base/7 text-neutral-700 dark:text-neutral-300">
It's fast, flexible, and reliable — with zero-runtime.
</p>

Expand All @@ -119,7 +119,7 @@ export default function Page({ children }: { children: React.ReactNode }) {
<div className="relative z-10">
<h2
data-docsearch-ignore
className="mb-6 text-lg font-semibold tracking-tight text-gray-950 dark:text-white"
className="mb-6 text-lg font-semibold tracking-tight text-neutral-950 dark:text-white"
>
Installation
</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/app/(docs)/docs/installation/(tabs)/using-postcss/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default function Page() {
<Steps steps={steps} />
<div className="my-4 md:my-16">
<Cta label="Explore our framework guides" href="/docs/installation/framework-guides">
<strong className="font-semibold text-gray-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind
<strong className="font-semibold text-neutral-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind
with PostCSS can be a bit different across different build tools. Check our framework guides to see if we have
more specific instructions for your particular setup.
</Cta>
Expand Down
2 changes: 1 addition & 1 deletion src/app/(docs)/docs/installation/(tabs)/using-vite/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export default function Page() {
<Steps steps={steps} />
<div className="my-4 md:my-16">
<Cta label="Explore our framework guides" href="/docs/installation/framework-guides">
<strong className="font-semibold text-gray-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind
<strong className="font-semibold text-neutral-950 dark:text-white">Are you stuck?</strong> Setting up Tailwind
with Vite can be a bit different across different build tools. Check our framework guides to see if we have
more specific instructions for your particular setup.
</Cta>
Expand Down
10 changes: 5 additions & 5 deletions src/app/(docs)/docs/installation/framework-guides/[...slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,23 +76,23 @@ export default async function Page({ params }: Props) {
<div className="mx-auto grid w-full max-w-2xl grid-cols-1 gap-10 pt-10 pb-24 xl:max-w-5xl">
<div className="px-4 sm:px-6 xl:pr-0">
<p
className="font-mono text-xs/6 tracking-widest text-gray-600 uppercase dark:text-gray-400"
className="font-mono text-xs/6 tracking-widest text-neutral-600 uppercase dark:text-neutral-400"
data-section="true"
>
Installation
</p>
<h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-950 dark:text-white" data-title="true">
<h1 className="mt-2 text-3xl font-medium tracking-tight text-neutral-950 dark:text-white" data-title="true">
{page.title}
</h1>
<p className="mt-6 text-base/7 text-gray-700 dark:text-gray-400" data-description="true">
<p className="mt-6 text-base/7 text-neutral-700 dark:text-neutral-400" data-description="true">
{page.description}
</p>

{page.notice ? (
<div className="relative my-4 overflow-hidden rounded-lg bg-gray-200 p-1">
<div className="relative my-4 overflow-hidden rounded-lg bg-neutral-200 p-1">
<div className="absolute inset-0 bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 dark:[--pattern-fg:var(--color-white)]/10"></div>

<div className="relative z-10 rounded-md bg-white/75 px-4 py-3 text-sm font-medium text-gray-600 inset-ring-2 inset-ring-gray-700/25">
<div className="relative z-10 rounded-md bg-white/75 px-4 py-3 text-sm font-medium text-neutral-600 inset-ring-2 inset-ring-neutral-700/25">
{page.notice}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/(docs)/docs/installation/framework-guides/sveltekit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export let steps: Step[] = [
@reference "tailwindcss";

:global(html) {
background-color: theme(--color-gray-100);
background-color: theme(--color-neutral-100);
}
</style>
`,
Expand Down
10 changes: 5 additions & 5 deletions src/app/(docs)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default async function Layout({
}: React.PropsWithChildren<{ breadcrumb: React.ReactNode }>) {
return (
<div>
<div className="fixed inset-x-0 top-0 z-10 border-b border-gray-950/5 dark:border-white/10">
<div className="fixed inset-x-0 top-0 z-10 border-b border-neutral-950/5 dark:border-white/10">
<Header />
<MobileNav header={<Header />} breadcrumb={breadcrumb}>
<DocsSidebar />
Expand All @@ -31,19 +31,19 @@ export default async function Layout({
</div>

{/* Candy cane */}
<div className="col-start-2 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div>
<div className="col-start-2 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-neutral-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div>

{/* Main content area */}
<div className="relative row-start-1 grid grid-cols-subgrid lg:col-start-3">{children}</div>

{/* Candy cane */}
<div className="col-start-4 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div>
<div className="col-start-4 row-span-5 row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-neutral-950)]/5 max-lg:hidden dark:[--pattern-fg:var(--color-white)]/10"></div>

<div className="col-span-full col-start-2 row-start-2 h-px bg-gray-950/5 dark:bg-white/10" />
<div className="col-span-full col-start-2 row-start-2 h-px bg-neutral-950/5 dark:bg-white/10" />
<div className="row-start-3 lg:col-start-3">
<FooterSitemap className="max-w-2xl lg:max-w-5xl" />
</div>
<div className="col-span-full col-start-2 row-start-4 h-px bg-gray-950/5 dark:bg-white/10" />
<div className="col-span-full col-start-2 row-start-4 h-px bg-neutral-950/5 dark:bg-white/10" />
<div className="row-start-5 grid lg:col-start-3">
<FooterMeta className="max-w-2xl lg:max-w-5xl" />
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/app/(docs)/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ export default function NotFoundPage() {
return (
<div className="flex h-[calc(100vh-3.5rem)] items-center justify-center">
<div className="flex flex-auto flex-col items-center justify-center px-4 text-center sm:flex-row">
<h1 className="text-2xl font-extrabold tracking-tight text-gray-900 sm:mr-6 sm:border-r sm:border-gray-900/10 sm:pr-6 sm:text-3xl dark:text-gray-200 sm:dark:border-gray-300/10">
<h1 className="text-2xl font-extrabold tracking-tight text-neutral-900 sm:mr-6 sm:border-r sm:border-neutral-900/10 sm:pr-6 sm:text-3xl dark:text-neutral-200 sm:dark:border-neutral-300/10">
404
</h1>
<h2 className="mt-2 text-gray-700 sm:mt-0 dark:text-gray-400">This page could not be found.</h2>
<h2 className="mt-2 text-neutral-700 sm:mt-0 dark:text-neutral-400">This page could not be found.</h2>
</div>
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/app/api/og/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,10 @@ export async function GET(req: NextRequest) {
}}
>
<div tw="absolute flex h-full w-full flex-col justify-between p-[32px] pt-[394px] pr-[40px]">
<div tw="flex flex-col h-full border-1 border-t border-gray-800 p-8">
<div tw="flex flex-col h-full border-1 border-t border-neutral-800 p-8">
{section && (
<div
tw="flex text-[20px] leading-[20px] font-medium tracking-[2px] text-gray-400"
tw="flex text-[20px] leading-[20px] font-medium tracking-[2px] text-neutral-400"
style={{
fontFamily: "Geist Mono",
}}
Expand All @@ -94,7 +94,7 @@ export async function GET(req: NextRequest) {
</div>
{description && (
<div
tw="mt-4 text-[24px] leading-[40px] font-medium text-gray-400"
tw="mt-4 text-[24px] leading-[40px] font-medium text-neutral-400"
style={{
display: "block",
lineClamp: 1,
Expand Down
8 changes: 4 additions & 4 deletions src/app/blog/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,15 @@ export default async function DocPage(props: Props) {
<div hidden />

<div className="grid grid-cols-1 xl:grid-cols-[22rem_2.5rem_auto] xl:grid-rows-[1fr_auto]">
<div className="col-start-2 row-span-2 border-r border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div>
<div className="col-start-2 row-span-2 border-r border-l border-neutral-950/5 max-xl:hidden dark:border-white/10"></div>

<div className="max-xl:mx-auto max-xl:w-full max-xl:max-w-(--breakpoint-md)">
<div className="mt-16 px-4 font-mono text-sm/7 font-medium tracking-widest text-gray-500 uppercase lg:px-2">
<div className="mt-16 px-4 font-mono text-sm/7 font-medium tracking-widest text-neutral-500 uppercase lg:px-2">
<time dateTime={post.meta.date}>{formatDate(post.meta.date)}</time>
</div>

<GridContainer className="mb-6 px-4 lg:px-2 xl:mb-16">
<h1 className="inline-block max-w-(--breakpoint-md) text-[2.5rem]/10 tracking-tight text-pretty text-gray-950 max-lg:font-medium lg:text-6xl dark:text-gray-200">
<h1 className="inline-block max-w-(--breakpoint-md) text-[2.5rem]/10 tracking-tight text-pretty text-neutral-950 max-lg:font-medium lg:text-6xl dark:text-neutral-200">
{post.meta.title}
</h1>
</GridContainer>
Expand Down Expand Up @@ -132,7 +132,7 @@ function Author({ author }: { author: { avatar: string; twitter: string; name: s
<div className="flex gap-4">
<Image src={author.avatar} alt="" className="size-12 rounded-full" width={36} height={36} />
<div className="flex flex-col justify-center gap-1 text-sm font-semibold">
<div className="text-gray-950 dark:text-white">{author.name}</div>
<div className="text-neutral-950 dark:text-white">{author.name}</div>
<div>
<a
href={`https://twitter.com/${author.twitter}`}
Expand Down
2 changes: 1 addition & 1 deletion src/app/blog/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default async function Layout({ children }: React.PropsWithChildren) {
<div className="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:block dark:[--pattern-fg:var(--color-white)]/10"></div>

{/* Main content area */}
<div className="text-gray-950 dark:text-white">{children}</div>
<div className="text-neutral-950 dark:text-white">{children}</div>

{/* Candy cane */}
<div className="row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 lg:col-start-3 lg:block dark:[--pattern-fg:var(--color-white)]/10"></div>
Expand Down
8 changes: 4 additions & 4 deletions src/app/blog/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,14 @@ export default async function Blog() {
<div className="mt-12 mb-46 grid grid-cols-1 lg:grid-cols-[24rem_2.5rem_minmax(0,1fr)]">
{posts.map(({ meta, slug }, index) => (
<Fragment key={slug}>
<GridContainer className="p col-span-3 grid grid-cols-subgrid divide-x divide-gray-950/5 dark:divide-white/10">
<div className="px-2 font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase max-lg:hidden">
<GridContainer className="p col-span-3 grid grid-cols-subgrid divide-x divide-neutral-950/5 dark:divide-white/10">
<div className="px-2 font-mono text-sm/6 font-medium tracking-widest text-neutral-500 uppercase max-lg:hidden">
{formatDate(meta.date)}
</div>
<div className="max-lg:hidden" />
<div className="text-md px-2">
<div className="max-w-(--container-2xl)">
<div className="mb-4 font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase lg:hidden">
<div className="mb-4 font-mono text-sm/6 font-medium tracking-widest text-neutral-500 uppercase lg:hidden">
{formatDate(meta.date)}
</div>

Expand All @@ -72,7 +72,7 @@ export default async function Blog() {
</div>
</GridContainer>
{index !== posts.length - 1 && (
<div className="contents divide-x divide-gray-950/5 dark:divide-white/10">
<div className="contents divide-x divide-neutral-950/5 dark:divide-white/10">
<div className="h-16 max-lg:hidden" />
<div className="h-16 max-lg:hidden" />
<div className="h-16" />
Expand Down
10 changes: 5 additions & 5 deletions src/app/build-uis-that-dont-suck/call-to-action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export function SignUpForm() {
type="email"
id="email"
name="email_address"
className="w-3xs min-w-0 shrink grow rounded-full bg-transparent px-4 py-2 text-sm/6 text-gray-950 focus:outline-none"
className="w-3xs min-w-0 shrink grow rounded-full bg-transparent px-4 py-2 text-sm/6 text-neutral-950 focus:outline-none"
placeholder="Enter your email"
aria-label="Email address"
/>
<button className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-gray-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-gray-950/85">
<button className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-neutral-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-neutral-950/85">
Get the course
</button>
</div>
Expand Down Expand Up @@ -93,13 +93,13 @@ export function HeroActions({
onBlur={handleBlur}
type="email"
name="email_address"
className="w-3xs rounded-full bg-transparent px-4 py-2 text-sm/6 text-gray-950 focus:outline-none"
className="w-3xs rounded-full bg-transparent px-4 py-2 text-sm/6 text-neutral-950 focus:outline-none"
placeholder="Enter your email"
aria-label="Email address"
/>
<button
type="submit"
className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-gray-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-gray-950/85"
className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-neutral-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-neutral-950/85"
>
Sign up
</button>
Expand All @@ -114,7 +114,7 @@ export function HeroActions({
setSignUpState("open");
}}
type="button"
className="inline-flex rounded-full bg-transparent px-4 py-2 text-sm/6 font-semibold text-gray-950 hover:bg-gray-100 focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-white focus-visible:outline-solid"
className="inline-flex rounded-full bg-transparent px-4 py-2 text-sm/6 font-semibold text-neutral-950 hover:bg-neutral-100 focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-white focus-visible:outline-solid"
exit={{
opacity: 0,
transition: {
Expand Down
2 changes: 1 addition & 1 deletion src/app/build-uis-that-dont-suck/confirmed/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default async function Course() {
<h1 className="text-center text-5xl tracking-tighter text-balance text-white lg:text-8xl">You’re in!</h1>
</GridContainer>
<GridContainer>
<p className="mx-auto max-w-xl text-center text-lg/7 font-medium text-pretty text-gray-400">
<p className="mx-auto max-w-xl text-center text-lg/7 font-medium text-pretty text-neutral-400">
Look for the first video in your inbox any minute, and check again every morning for the next one in the
series.
</p>
Expand Down
Loading