feat: remove tw neutral colors

ibelick · Jul 8, 2024 · e62c766 · e62c766
1 parent ec7315d
commit e62c766
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 18 deletions.
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
@@ -61,10 +61,8 @@ function Header() {
     <header className="sticky top-0 z-10 flex h-14 items-center justify-center border-b border-zinc-950/10 bg-white px-6 py-5 dark:border-white/10 dark:bg-zinc-900">
       <div className="mx-auto flex w-full items-center justify-between md:max-w-7xl">
         <a href="/" className="relative flex items-center">
-          <div className="text-neutral-950 dark:text-white">
-            motion-primitives
-          </div>
-          <span className="mb-4 ml-2 select-none rounded-full bg-neutral-800 px-2 py-0.5 text-xs text-neutral-50">
+          <div className="text-zinc-950 dark:text-white">motion-primitives</div>
+          <span className="mb-4 ml-2 select-none rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-50">
             beta
           </span>
         </a>

diff --git a/app/page.tsx b/app/page.tsx
@@ -17,7 +17,7 @@ function Button({
 }) {
   const buttonVariants = {
     primary:
-      "bg-zinc-50 border border-zinc-100 text-zinc-950 hover:bg-zinc-100 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:text-zinc-50 dark:border-zinc-900",
+      "bg-zinc-50 border border-zinc-100 text-zinc-950 hover:bg-zinc-100 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-zinc-50 dark:border-zinc-900",
     secondary:
       "bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-300 dark:text-zinc-950",
   };
@@ -33,13 +33,11 @@ function Button({
 
 function Header() {
   return (
-    <header className="relative top-0 z-10 bg-white px-6 py-5  dark:border-white/10 dark:bg-neutral-900 lg:z-10 lg:flex lg:h-16 lg:items-center lg:px-8 lg:py-0">
+    <header className="relative top-0 z-10 bg-white px-6 py-5  dark:border-white/10 dark:bg-zinc-900 lg:z-10 lg:flex lg:h-16 lg:items-center lg:px-8 lg:py-0">
       <div className="mx-auto flex w-full items-center justify-between md:max-w-7xl">
         <a href="/" className="relative flex items-center">
-          <div className="text-neutral-950 dark:text-white">
-            motion-primitives
-          </div>
-          <span className="mb-4 ml-2 select-none rounded-full bg-neutral-800 px-2 py-0.5 text-xs text-neutral-50">
+          <div className="text-zinc-950 dark:text-white">motion-primitives</div>
+          <span className="mb-4 ml-2 select-none rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-50">
             beta
           </span>
         </a>
@@ -50,15 +48,15 @@ function Header() {
             rel="noopener noreferrer"
             className="inline-flex h-9 w-9 items-center justify-center"
           >
-            <XIcon className="h-4 w-4 fill-neutral-950 dark:fill-white" />
+            <XIcon className="h-4 w-4 fill-zinc-950 dark:fill-white" />
           </a>
           <a
             href="https://github.com/ibelick/motion-primitives"
             target="_blank"
             rel="noopener noreferrer"
             className="inline-flex h-9 w-9 items-center justify-center"
           >
-            <GitHubIcon className="h-4 w-4 fill-neutral-950 dark:fill-white" />
+            <GitHubIcon className="h-4 w-4 fill-zinc-950 dark:fill-white" />
           </a>
         </nav>
       </div>

diff --git a/components/website/code-preview.tsx b/components/website/code-preview.tsx
@@ -30,14 +30,14 @@ export default function CodePreview({ code, children }: CodePreviewProps) {
             hasCheckIcon ? "scale-0 opacity-0" : "scale-100 opacity-100"
           }`}
         >
-          <Copy className="h-4 w-4 text-neutral-400" />
+          <Copy className="h-4 w-4 text-zinc-400" />
         </div>
         <div
           className={`absolute inset-0 transform transition-all duration-300  ${
             hasCheckIcon ? "scale-100 opacity-100" : "scale-0 opacity-0"
           }`}
         >
-          <Check className="h-4 w-4 text-neutral-400" />
+          <Check className="h-4 w-4 text-zinc-400" />
         </div>
       </div>
       <div className="max-h-[650px] overflow-auto overflow-x-auto  p-4 text-sm">

diff --git a/components/website/component-preview.tsx b/components/website/component-preview.tsx
@@ -25,7 +25,7 @@ export default function ComponentPreview({
           className="absolute right-4 top-3 cursor-pointer"
           onClick={reTrigger}
         >
-          <RotateCw className="h-4 w-4 text-neutral-500" />
+          <RotateCw className="h-4 w-4 text-zinc-500" />
         </div>
       )}
       {hasReTrigger

diff --git a/components/website/tabs.tsx b/components/website/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 w-full items-center justify-start border-b border-neutral-200 bg-transparent text-neutral-900 dark:border-neutral-800 dark:text-neutral-50",
+      "inline-flex h-10 w-full items-center justify-start border-b border-zinc-200 bg-transparent text-zinc-900 dark:border-zinc-800 dark:text-zinc-50",
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring relative inline-flex h-10 items-center justify-center whitespace-nowrap rounded-none border-b-2 border-b-transparent bg-transparent px-4 py-1 pb-3 pt-2 text-sm font-semibold text-neutral-500 transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-neutral-950 data-[state=active]:text-neutral-950 dark:text-neutral-500 dark:data-[state=active]:border-b-white dark:data-[state=active]:text-white",
+      "ring-offset-background focus-visible:ring-ring relative inline-flex h-10 items-center justify-center whitespace-nowrap rounded-none border-b-2 border-b-transparent bg-transparent px-4 py-1 pb-3 pt-2 text-sm font-semibold text-zinc-500 transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-zinc-950 data-[state=active]:text-zinc-950 dark:text-zinc-500 dark:data-[state=active]:border-b-white dark:data-[state=active]:text-white",
       className,
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "focus-visible:ring-ring relative mt-2 rounded-md border border-neutral-200 ring-offset-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:border-neutral-800",
+      "focus-visible:ring-ring relative mt-2 rounded-md border border-zinc-200 ring-offset-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:border-zinc-800",
       className,
     )}
     {...props}