Remove dark variant classes from shadcn components

vercel-labs · Apr 24, 2024 · 87cac56 · 87cac56
1 parent ece4c05
commit 87cac56
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 24 deletions.
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
@@ -4,17 +4,17 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border border-gray-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2  dark:focus:ring-gray-300',
+  'inline-flex items-center rounded-full border border-gray-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-gray-900 text-gray-50 hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80',
+          'border-transparent bg-gray-900 text-gray-50 hover:bg-gray-900/80',
         secondary:
-          'border-transparent bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
+          'border-transparent bg-gray-100 text-gray-900 hover:bg-gray-100/80',
         destructive:
-          'border-transparent bg-red-500 text-gray-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80',
-        outline: 'text-gray-950 dark:text-gray-50',
+          'border-transparent bg-red-500 text-gray-50 hover:bg-red-500/80',
+        outline: 'text-gray-950',
       },
     },
     defaultVariants: {

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -5,21 +5,17 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default:
-          'bg-gray-900 text-gray-50 hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90',
-        destructive:
-          'bg-red-500 text-gray-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90',
+        default: 'bg-gray-900 text-gray-50 hover:bg-gray-900/90',
+        destructive: 'bg-red-500 text-gray-50 hover:bg-red-500/90',
         outline:
-          'border border-gray-200 dark:border-gray-700 bg-white hover:bg-gray-100 hover:text-gray-900  dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50',
-        secondary:
-          'bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
-        ghost:
-          'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50',
-        link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
+          'border border-gray-200 00 bg-white hover:bg-gray-100 hover:text-gray-900',
+        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-100/80',
+        ghost: 'hover:bg-gray-100 hover:text-gray-900',
+        link: 'text-gray-900 underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-10 px-4 py-2',

diff --git a/components/ui/card.tsx b/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm dark:border-gray-700  dark:bg-gray-950 dark:text-gray-50',
+      'rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm',
       className,
     )}
     {...props}
@@ -48,11 +48,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn('text-sm text-gray-500 dark:text-gray-400', className)}
-    {...props}
-  />
+  <p ref={ref} className={cn('text-sm text-gray-500', className)} {...props} />
 ));
 CardDescription.displayName = 'CardDescription';
 

diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-gray-200  ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-900 data-[state=checked]:text-gray-50  dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300 dark:data-[state=checked]:bg-gray-50 dark:data-[state=checked]:text-gray-900',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-gray-200  ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-900 data-[state=checked]:text-gray-50',
       className,
     )}
     {...props}

diff --git a/components/ui/input.tsx b/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700  dark:bg-gray-900 dark:ring-offset-gray-900 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300',
+          'flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}