@zentauri-ui/zentauri-components 1.5.22 → 1.6.0

package/src/ui/breadcrumb/variants.ts

@@ -3,20 +3,20 @@ import { cva } from "class-variance-authority";
 export const breadcrumbNavVariants = cva("text-sm", {
   variants: {
     appearance: {
-      default: "text-slate-300",
-      muted: "text-slate-400",
-      sky: "text-sky-600",
-      rose: "text-rose-600",
-      purple: "text-purple-600",
-      pink: "text-pink-600",
-      orange: "text-orange-600",
-      yellow: "text-yellow-600",
-      teal: "text-teal-600",
-      indigo: "text-indigo-600",
-      emerald: "text-emerald-600",
-      gray: "text-gray-600",
-      amber: "text-amber-600",
-      violet: "text-violet-600",
+      default: "text-slate-600 dark:text-slate-300",
+      muted: "text-slate-500 dark:text-slate-400",
+      sky: "text-sky-800 dark:text-sky-600",
+      rose: "text-rose-800 dark:text-rose-600",
+      purple: "text-purple-800 dark:text-purple-600",
+      pink: "text-pink-800 dark:text-pink-600",
+      orange: "text-orange-800 dark:text-orange-600",
+      yellow: "text-yellow-800 dark:text-yellow-600",
+      teal: "text-teal-800 dark:text-teal-600",
+      indigo: "text-indigo-800 dark:text-indigo-600",
+      emerald: "text-emerald-800 dark:text-emerald-600",
+      gray: "text-gray-800 dark:text-gray-600",
+      amber: "text-amber-800 dark:text-amber-600",
+      violet: "text-violet-800 dark:text-violet-600",
     },
   },
   defaultVariants: {
@@ -31,19 +31,24 @@ export const breadcrumbListVariants = cva(
 export const breadcrumbItemVariants = cva("inline-flex items-center gap-1.5");
 
 export const breadcrumbLinkVariants = cva(
-  "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+  "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/30 dark:focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-950",
 );
 
-export const breadcrumbPageVariants = cva("font-medium text-slate-100");
+export const breadcrumbPageVariants = cva(
+  "font-medium text-slate-800 dark:text-slate-100",
+);
 
-export const breadcrumbSeparatorVariants = cva("select-none text-slate-600", {
-  variants: {
-    size: {
-      sm: "text-xs",
-      md: "text-sm",
+export const breadcrumbSeparatorVariants = cva(
+  "select-none text-slate-400 dark:text-slate-600",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
     },
   },
-  defaultVariants: {
-    size: "md",
-  },
-});
+);

package/src/ui/buttons/variants.ts

@@ -3,8 +3,8 @@ import { cva } from "class-variance-authority";
 export const buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl",
-    "text-sm font-medium ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
+    "text-sm font-medium ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2",
     "disabled:pointer-events-none disabled:opacity-50",
     "select-none",
   ],
@@ -12,45 +12,55 @@ export const buttonVariants = cva(
     variants: {
       appearance: {
         default:
-          "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-white",
-        secondary: "bg-slate-800 text-slate-50 hover:bg-slate-700",
-        destructive: "bg-rose-700 text-white hover:bg-rose-800",
+          "bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-black dark:hover:bg-white",
+        secondary:
+          "bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-50 hover:bg-slate-300 dark:hover:bg-slate-700",
+        destructive:
+          "bg-rose-500 dark:bg-rose-700 text-white hover:bg-rose-500 dark:hover:bg-rose-800",
         outline:
-          "border border-white/10 bg-white/5 text-slate-50 hover:bg-white/10",
-        ghost: "bg-transparent text-slate-200 hover:bg-white/5",
-        link: "bg-transparent text-cyan-300 underline-offset-4 hover:underline",
+          "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50 hover:bg-black/10 dark:hover:bg-white/10",
+        ghost:
+          "bg-transparent text-slate-700 dark:text-slate-200 hover:bg-black/5 dark:hover:bg-white/5",
+        link: "bg-transparent text-cyan-700 dark:text-cyan-300 underline-offset-4 hover:underline",
         glass:
-          "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/15",
-        emerald: "bg-emerald-800 text-white hover:bg-emerald-900",
-        indigo: "bg-indigo-600 text-white hover:bg-indigo-600",
-        purple: "bg-purple-600 text-white hover:bg-purple-600",
-        pink: "bg-pink-600 text-white hover:bg-pink-600",
-        rose: "bg-rose-600 text-white hover:bg-rose-600",
-        sky: "bg-sky-700 text-white hover:bg-sky-800",
-        teal: "bg-teal-700 text-white hover:bg-teal-800",
-        yellow: "bg-yellow-800 text-white hover:bg-yellow-900",
-        orange: "bg-orange-800 text-white hover:bg-orange-900",
-        gray: "bg-gray-700 text-white hover:bg-gray-800",
-        amber: "bg-amber-800 text-white hover:bg-amber-900",
-        violet: "bg-violet-600 text-white hover:bg-violet-600",
+          "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white backdrop-blur-md hover:bg-black/15 dark:hover:bg-white/15",
+        emerald:
+          "bg-emerald-500 dark:bg-emerald-800 text-white hover:bg-emerald-500 dark:hover:bg-emerald-900",
+        indigo:
+          "bg-indigo-800 dark:bg-indigo-600 text-white hover:bg-indigo-800 dark:hover:bg-indigo-600",
+        purple:
+          "bg-purple-800 dark:bg-purple-600 text-white hover:bg-purple-800 dark:hover:bg-purple-600",
+        pink: "bg-pink-800 dark:bg-pink-600 text-white hover:bg-pink-800 dark:hover:bg-pink-600",
+        rose: "bg-rose-800 dark:bg-rose-600 text-white hover:bg-rose-800 dark:hover:bg-rose-600",
+        sky: "bg-sky-500 dark:bg-sky-700 text-white hover:bg-sky-500 dark:hover:bg-sky-800",
+        teal: "bg-teal-500 dark:bg-teal-700 text-white hover:bg-teal-500 dark:hover:bg-teal-800",
+        yellow:
+          "bg-yellow-500 dark:bg-yellow-800 text-white hover:bg-yellow-500 dark:hover:bg-yellow-900",
+        orange:
+          "bg-orange-500 dark:bg-orange-800 text-white hover:bg-orange-500 dark:hover:bg-orange-900",
+        gray: "bg-gray-500 dark:bg-gray-700 text-white hover:bg-gray-500 dark:hover:bg-gray-800",
+        amber:
+          "bg-amber-500 dark:bg-amber-800 text-white hover:bg-amber-500 dark:hover:bg-amber-900",
+        violet:
+          "bg-violet-800 dark:bg-violet-600 text-white hover:bg-violet-800 dark:hover:bg-violet-600",
         "gradient-blue":
-          "bg-linear-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600",
+          "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 text-white hover:from-blue-800 dark:hover:from-blue-600 hover:to-purple-800 dark:hover:to-purple-600",
         "gradient-green":
-          "bg-linear-to-r from-green-600 to-lime-600 text-white hover:from-green-600 hover:to-lime-600",
+          "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 text-white hover:from-green-800 dark:hover:from-green-600 hover:to-lime-800 dark:hover:to-lime-600",
         "gradient-red":
-          "bg-linear-to-r from-red-600 to-pink-600 text-white hover:from-red-600 hover:to-pink-600",
+          "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 text-white hover:from-red-800 dark:hover:from-red-600 hover:to-pink-800 dark:hover:to-pink-600",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-600 to-orange-600 text-white hover:from-yellow-600 hover:to-orange-600",
+          "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 text-white hover:from-yellow-800 dark:hover:from-yellow-600 hover:to-orange-800 dark:hover:to-orange-600",
         "gradient-purple":
-          "bg-linear-to-r from-purple-600 to-pink-600 text-white hover:from-purple-600 hover:to-pink-600",
+          "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 text-white hover:from-purple-800 dark:hover:from-purple-600 hover:to-pink-800 dark:hover:to-pink-600",
         "gradient-teal":
-          "bg-linear-to-r from-teal-600 to-cyan-600 text-white hover:from-teal-600 hover:to-cyan-600",
+          "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 text-white hover:from-teal-800 dark:hover:from-teal-600 hover:to-cyan-800 dark:hover:to-cyan-600",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-600 hover:to-purple-600",
+          "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 text-white hover:from-indigo-800 dark:hover:from-indigo-600 hover:to-purple-800 dark:hover:to-purple-600",
         "gradient-pink":
-          "bg-linear-to-r from-pink-600 to-rose-600 text-white hover:from-pink-600 hover:to-rose-600",
+          "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 text-white hover:from-pink-800 dark:hover:from-pink-600 hover:to-rose-800 dark:hover:to-rose-600",
         "gradient-orange":
-          "bg-linear-to-r from-orange-600 to-red-600 text-white hover:from-orange-600 hover:to-red-600",
+          "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 text-white hover:from-orange-800 dark:hover:from-orange-600 hover:to-red-800 dark:hover:to-red-600",
       },
       size: {
         sm: "h-7 md:h-9 px-3 text-xs",

package/src/ui/card/variants.ts

@@ -2,51 +2,58 @@ import { cva } from "class-variance-authority";
 
 export const cardVariants = cva(
   [
-    "relative flex w-full flex-col overflow-hidden text-slate-50",
-    "ring-offset-slate-950 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2",
+    "relative flex w-full flex-col overflow-hidden text-slate-900 dark:text-slate-50",
+    "ring-offset-slate-50 dark:ring-offset-slate-950 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2",
   ],
   {
     variants: {
       appearance: {
         default:
-          "border border-white/10 bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+          "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
         glass:
-          "border border-white/15 bg-white/10 backdrop-blur-md shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
-        outline: "border border-white/15 bg-transparent",
+          "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 backdrop-blur-md shadow-[0_8px_24px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
+        outline: "border border-black/15 dark:border-white/15 bg-transparent",
         ghost: "border border-transparent bg-transparent",
         elevated:
-          "border border-white/10 bg-slate-900/80 shadow-[0_24px_64px_rgba(15,23,42,0.45)]",
-        sky: "border border-sky-600 bg-sky-950/70 backdrop-blur-xl",
-        rose: "border border-rose-600 bg-rose-950/70 backdrop-blur-xl",
-        purple: "border border-purple-600 bg-purple-950/70 backdrop-blur-xl",
-        pink: "border border-pink-600 bg-pink-950/70 backdrop-blur-xl",
-        orange: "border border-orange-600 bg-orange-950/70 backdrop-blur-xl",
-        yellow: "border border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border border-teal-600 bg-teal-950/70 backdrop-blur-xl",
-        indigo: "border border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
-        emerald: "border border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        amber: "border border-amber-600 bg-amber-950/70 backdrop-blur-xl",
-        violet: "border border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+          "border border-black/10 dark:border-white/10 bg-slate-100/80 dark:bg-slate-900/80 shadow-[0_12px_32px_rgba(15,23,42,0.12)] dark:shadow-[0_24px_64px_rgba(15,23,42,0.45)]",
+        sky: "border border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl",
+        rose: "border border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl",
+        purple:
+          "border border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl",
+        pink: "border border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl",
+        orange:
+          "border border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl",
+        yellow:
+          "border border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl",
+        indigo:
+          "border border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl",
+        emerald:
+          "border border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl",
+        amber:
+          "border border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl",
+        violet:
+          "border border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
         "gradient-green":
-          "border border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl",
         "gradient-red":
-          "border border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
         "gradient-yellow":
-          "border border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl",
         "gradient-purple":
-          "border border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
         "gradient-teal":
-          "border border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl",
         "gradient-indigo":
-          "border border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
         "gradient-pink":
-          "border border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl",
         "gradient-orange":
-          "border border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl",
       },
       size: {
         sm: "gap-2 p-3 text-sm",
@@ -69,7 +76,7 @@ export const cardVariants = cva(
 );
 
 export const cardHeaderVariants = cva(
-  "flex flex-col gap-1 border-b border-white/10 pb-3",
+  "flex flex-col gap-1 border-b border-black/10 dark:border-white/10 pb-3",
   {
     variants: {
       size: {
@@ -83,7 +90,7 @@ export const cardHeaderVariants = cva(
 );
 
 export const cardFooterVariants = cva(
-  "flex flex-col gap-2 border-t border-white/10 pt-3",
+  "flex flex-col gap-2 border-t border-black/10 dark:border-white/10 pt-3",
   {
     variants: {
       size: {
@@ -97,7 +104,7 @@ export const cardFooterVariants = cva(
 );
 
 export const cardTitleVariants = cva(
-  "font-semibold tracking-tight text-slate-50",
+  "font-semibold tracking-tight text-slate-900 dark:text-slate-50",
   {
     variants: {
       size: {
@@ -110,13 +117,16 @@ export const cardTitleVariants = cva(
   },
 );
 
-export const cardDescriptionVariants = cva("text-slate-400", {
-  variants: {
-    size: {
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base",
+export const cardDescriptionVariants = cva(
+  "text-slate-500 dark:text-slate-400",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
     },
+    defaultVariants: { size: "md" },
   },
-  defaultVariants: { size: "md" },
-});
+);

package/src/ui/divider/variants.ts

@@ -1,32 +1,32 @@
 import { cva } from "class-variance-authority";
 
 const APPEARANCES = {
-  default: "text-slate-200",
-  muted: "text-slate-500",
-  primary: "text-cyan-300",
-  destructive: "text-rose-400",
-  ghost: "text-slate-600",
-  sky: "text-sky-400",
-  rose: "text-rose-400",
-  purple: "text-purple-400",
-  pink: "text-pink-400",
-  orange: "text-orange-400",
-  yellow: "text-yellow-400",
-  teal: "text-teal-400",
-  indigo: "text-indigo-400",
-  emerald: "text-emerald-400",
-  gray: "text-gray-400",
-  amber: "text-amber-400",
-  violet: "text-violet-400",
-  "gradient-blue": "text-blue-400",
-  "gradient-green": "text-green-400",
-  "gradient-red": "text-red-400",
-  "gradient-yellow": "text-yellow-400",
-  "gradient-purple": "text-purple-400",
-  "gradient-teal": "text-teal-400",
-  "gradient-indigo": "text-indigo-400",
-  "gradient-pink": "text-pink-400",
-  "gradient-orange": "text-orange-400",
+  default: "text-slate-700 dark:text-slate-200",
+  muted: "text-slate-500 dark:text-slate-500",
+  primary: "text-cyan-700 dark:text-cyan-300",
+  destructive: "text-rose-600 dark:text-rose-400",
+  ghost: "text-slate-400 dark:text-slate-600",
+  sky: "text-sky-600 dark:text-sky-400",
+  rose: "text-rose-600 dark:text-rose-400",
+  purple: "text-purple-600 dark:text-purple-400",
+  pink: "text-pink-600 dark:text-pink-400",
+  orange: "text-orange-600 dark:text-orange-400",
+  yellow: "text-yellow-600 dark:text-yellow-400",
+  teal: "text-teal-600 dark:text-teal-400",
+  indigo: "text-indigo-600 dark:text-indigo-400",
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  gray: "text-gray-600 dark:text-gray-400",
+  amber: "text-amber-600 dark:text-amber-400",
+  violet: "text-violet-600 dark:text-violet-400",
+  "gradient-blue": "text-blue-600 dark:text-blue-400",
+  "gradient-green": "text-green-600 dark:text-green-400",
+  "gradient-red": "text-red-600 dark:text-red-400",
+  "gradient-yellow": "text-yellow-600 dark:text-yellow-400",
+  "gradient-purple": "text-purple-600 dark:text-purple-400",
+  "gradient-teal": "text-teal-600 dark:text-teal-400",
+  "gradient-indigo": "text-indigo-600 dark:text-indigo-400",
+  "gradient-pink": "text-pink-600 dark:text-pink-400",
+  "gradient-orange": "text-orange-600 dark:text-orange-400",
 };
 
 export const dividerToneVariants = cva("", {

package/src/ui/drawer/drawer-base.tsx

@@ -252,7 +252,7 @@ export function DrawerClose({
       type="button"
       data-slot="drawer-close"
       className={cn(
-        "absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
+        "absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-md dark:text-slate-200 text-slate-900 transition hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30",
         className,
       )}
       aria-label="Close drawer"

package/src/ui/drawer/variants.ts

@@ -1,46 +1,54 @@
 import { cva } from "class-variance-authority";
 
 export const drawerOverlayVariants = cva(
-  "fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm",
+  "fixed inset-0 z-50 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-sm",
 );
 
 export const drawerTriggerVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer rounded-md border",
+  "relative inline-flex shrink-0 cursor-pointer border rounded px-3 py-1.5",
   {
     variants: {
       appearance: {
         default: "bg-slate-950",
-        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
-        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
-        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
-        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
-        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
-        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
-        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
-        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
-        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
-        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        glass:
+          "border-black/15 dark:border-white/15 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-xl text-slate-900 dark:text-white",
+        sky: "border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl text-sky-800 dark:text-white",
+        rose: "border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl text-rose-800 dark:text-white",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl text-purple-800 dark:text-white",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl text-pink-800 dark:text-white",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl text-orange-800 dark:text-white",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl text-yellow-800 dark:text-white",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl text-teal-800 dark:text-white",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl text-indigo-800 dark:text-white",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl text-emerald-800 dark:text-white",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl text-gray-800 dark:text-white",
+        amber:
+          "border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl text-amber-800 dark:text-white",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl text-violet-800 dark:text-white",
         "gradient-blue":
-          "border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-blue-800 dark:text-white",
         "gradient-green":
-          "border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl text-green-800 dark:text-white",
         "gradient-red":
-          "border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-red-800 dark:text-white",
         "gradient-yellow":
-          "border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl text-yellow-800 dark:text-white",
         "gradient-purple":
-          "border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-purple-800 dark:text-white",
         "gradient-teal":
-          "border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl text-teal-800 dark:text-white",
         "gradient-indigo":
-          "border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-indigo-800 dark:text-white",
         "gradient-pink":
-          "border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl text-pink-800 dark:text-white",
         "gradient-orange":
-          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl text-orange-800 dark:text-white",
       },
     },
     defaultVariants: {
@@ -50,7 +58,7 @@ export const drawerTriggerVariants = cva(
 );
 
 export const drawerContentVariants = cva(
-  "fixed z-50 flex max-h-[min(92vh,900px)] flex-col border border-white/10 bg-slate-950 p-6 text-slate-50 shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
+  "fixed z-50 flex max-h-[min(92vh,900px)] flex-col border border-black/10 dark:border-white/10 bg-slate-50 dark:bg-slate-950 p-6 text-slate-900 dark:text-slate-50 shadow-[0_12px_40px_rgba(15,23,42,0.14)] dark:shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
   {
     variants: {
       side: {
@@ -67,38 +75,46 @@ export const drawerContentVariants = cva(
         full: "",
       },
       appearance: {
-        default: "bg-slate-950",
-        glass: "border-white/15 bg-slate-950/70 backdrop-blur-xl",
-        sky: "border-sky-600 bg-sky-950/70 backdrop-blur-xl",
-        rose: "border-rose-600 bg-rose-950/70 backdrop-blur-xl",
-        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
-        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
-        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
-        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
-        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
-        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
-        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
-        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        default: "bg-slate-50 dark:bg-slate-950",
+        glass:
+          "border-black/15 dark:border-white/15 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-xl",
+        sky: "border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl",
+        rose: "border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl",
+        purple:
+          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl",
+        orange:
+          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl",
+        yellow:
+          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl",
+        indigo:
+          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl",
+        emerald:
+          "border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl",
+        amber:
+          "border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl",
+        violet:
+          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl",
         "gradient-blue":
-          "border-blue-600 bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
         "gradient-green":
-          "border-green-600 bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl",
         "gradient-red":
-          "border-red-600 bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
         "gradient-yellow":
-          "border-yellow-600 bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl",
         "gradient-purple":
-          "border-purple-600 bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
         "gradient-teal":
-          "border-teal-600 bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl",
         "gradient-indigo":
-          "border-indigo-600 bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
         "gradient-pink":
-          "border-pink-600 bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl",
         "gradient-orange":
-          "border-orange-600 bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl",
       },
     },
     compoundVariants: [

package/src/ui/dropdown/dropdown.tsx

@@ -146,7 +146,7 @@ export const DropdownContent = ({
       className={cn(
         contentVariants({ placement, spacing }),
         className,
-        divider && "divide-y divide-current",
+        divider && "divide-y divide-current"
       )}
       {...props}
     >