@zentauri-ui/zentauri-components 1.5.31 → 1.6.0

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}
     >

package/src/ui/dropdown/variants.ts

@@ -5,41 +5,49 @@ export const triggerVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-gray-900 text-white",
-        outline: "border border-gray-300",
-        ghost: "bg-transparent",
+        default: "bg-gray-200 dark:bg-gray-900 text-slate-900 dark:text-white",
+        outline:
+          "border border-gray-700 dark:border-gray-300 text-gray-900 dark:text-gray-100",
+        ghost: "bg-transparent text-gray-900 dark:text-gray-100",
         white: "bg-white text-gray-900",
         black: "bg-black text-white",
-        sky: "border border-sky-600 text-sky-600",
-        rose: "border border-rose-600 text-rose-600",
-        purple: "border border-purple-600 text-purple-600",
-        pink: "border border-pink-600 text-pink-600",
-        orange: "border border-orange-600 text-orange-600",
-        yellow: "border border-yellow-600 text-yellow-600",
-        teal: "border border-teal-600 text-teal-600",
-        indigo: "border border-indigo-600 text-indigo-600",
-        emerald: "border border-emerald-600 text-emerald-600",
-        gray: "border border-gray-600 text-gray-600",
-        amber: "border border-amber-600 text-amber-600",
-        violet: "border border-violet-600 text-violet-600",
+        sky: "border border-sky-800 dark:border-sky-600 text-sky-800 dark:text-sky-600",
+        rose: "border border-rose-800 dark:border-rose-600 text-rose-800 dark:text-rose-600",
+        purple:
+          "border border-purple-800 dark:border-purple-600 text-purple-800 dark:text-purple-600",
+        pink: "border border-pink-800 dark:border-pink-600 text-pink-800 dark:text-pink-600",
+        orange:
+          "border border-orange-800 dark:border-orange-600 text-orange-800 dark:text-orange-600",
+        yellow:
+          "border border-yellow-800 dark:border-yellow-600 text-yellow-800 dark:text-yellow-600",
+        teal: "border border-teal-800 dark:border-teal-600 text-teal-800 dark:text-teal-600",
+        indigo:
+          "border border-indigo-800 dark:border-indigo-600 text-indigo-800 dark:text-indigo-600",
+        emerald:
+          "border border-emerald-800 dark:border-emerald-600 text-emerald-800 dark:text-emerald-600",
+        gray: "border border-gray-800 dark:border-gray-600 text-gray-800 dark:text-gray-600",
+        amber:
+          "border border-amber-800 dark:border-amber-600 text-amber-800 dark:text-amber-600",
+        violet:
+          "border border-violet-800 dark:border-violet-600 text-violet-800 dark:text-violet-600",
         "gradient-blue":
-          "bg-linear-to-r from-blue-600 to-purple-600 text-blue-200",
+          "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 text-blue-200",
         "gradient-green":
-          "bg-linear-to-r from-green-600 to-lime-600 text-green-200",
+          "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 text-green-200",
         "gradient-red":
-          "bg-linear-to-r from-red-600 to-pink-600 text-red-200",
+          "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 text-red-200",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-600 to-orange-600 text-yellow-200",
+          "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 text-yellow-200",
         "gradient-purple":
-          "bg-linear-to-r from-purple-600 to-pink-600 text-purple-200",
+          "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 text-purple-200",
         "gradient-teal":
-          "bg-linear-to-r from-teal-600 to-cyan-600 text-teal-200",
+          "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 text-teal-200",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-600 to-purple-600 text-indigo-200",
+          "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 text-indigo-200",
         "gradient-pink":
-          "bg-linear-to-r from-pink-600 to-rose-600 text-pink-200",
+          "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 text-pink-200",
         "gradient-orange":
-          "bg-linear-to-r from-orange-600 to-red-600 text-orange-200",
+          "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 text-orange-200",
       },
       size: {
         sm: "px-2 py-1 text-sm",
@@ -55,7 +63,7 @@ export const triggerVariants = cva(
 );
 
 export const contentVariants = cva(
-  "absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border",
+  "absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border border-slate-900/10 dark:border-white/10 bg-slate-100 dark:bg-slate-900 text-slate-900 dark:text-slate-100 shadow-lg rounded-lg",
   {
     variants: {
       placement: {
@@ -81,54 +89,57 @@ export const contentVariants = cva(
 );
 
 export const itemVariants = cva(
-  "flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500/60",
+  "flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500/60 font-semibold",
   {
     variants: {
       variant: {
-        default: "hover:bg-gray-100 hover:text-gray-900 text-gray-100",
+        default:
+          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 text-gray-900 dark:text-gray-100",
         outline:
-          "hover:bg-gray-100 hover:text-gray-900 border border-white text-gray-100",
+          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 border border-black dark:border-white text-gray-900 dark:text-gray-100",
         ghost:
-          "hover:bg-gray-100 hover:text-gray-900 bg-transparent text-gray-100",
-        white: "hover:bg-gray-100 hover:text-gray-900 bg-white text-gray-900",
-        black: "hover:bg-gray-100 hover:text-gray-900 bg-black text-white",
-        sky: "hover:bg-sky-100 hover:text-sky-600 bg-sky-200 text-sky-800",
-        rose: "hover:bg-rose-100 hover:text-rose-600 bg-rose-200 text-rose-800",
+          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 bg-transparent text-gray-900 dark:text-gray-100",
+        white:
+          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 bg-white dark:bg-black text-gray-900 dark:text-white",
+        black:
+          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 bg-black dark:bg-white text-white dark:text-gray-900",
+        sky: "hover:bg-sky-100 hover:text-sky-800 dark:hover:text-sky-600 bg-sky-200 text-sky-900 dark:text-sky-800",
+        rose: "hover:bg-rose-100 hover:text-rose-800 dark:hover:text-rose-600 bg-rose-200 text-rose-900 dark:text-rose-800",
         purple:
-          "hover:bg-purple-100 hover:text-purple-600 bg-purple-200 text-purple-800",
-        pink: "hover:bg-pink-100 hover:text-pink-600 bg-pink-200 text-pink-800",
+          "hover:bg-purple-100 hover:text-purple-800 dark:hover:text-purple-600 bg-purple-200 text-purple-900 dark:text-purple-800",
+        pink: "hover:bg-pink-100 hover:text-pink-800 dark:hover:text-pink-600 bg-pink-200 text-pink-900 dark:text-pink-800",
         orange:
-          "hover:bg-orange-100 hover:text-orange-600 bg-orange-200 text-orange-800",
+          "hover:bg-orange-100 hover:text-orange-800 dark:hover:text-orange-600 bg-orange-200 text-orange-900 dark:text-orange-800",
         yellow:
-          "hover:bg-yellow-100 hover:text-yellow-600 bg-yellow-200 text-yellow-800",
-        teal: "hover:bg-teal-100 hover:text-teal-600 bg-teal-200 text-teal-800",
+          "hover:bg-yellow-100 hover:text-yellow-800 dark:hover:text-yellow-600 bg-yellow-200 text-yellow-900 dark:text-yellow-800",
+        teal: "hover:bg-teal-100 hover:text-teal-800 dark:hover:text-teal-600 bg-teal-200 text-teal-900 dark:text-teal-800",
         indigo:
-          "hover:bg-indigo-100 hover:text-indigo-600 bg-indigo-200 text-indigo-800",
+          "hover:bg-indigo-100 hover:text-indigo-800 dark:hover:text-indigo-600 bg-indigo-200 text-indigo-900 dark:text-indigo-800",
         emerald:
-          "hover:bg-emerald-100 hover:text-emerald-600 bg-emerald-200 text-emerald-800",
-        gray: "hover:bg-gray-100 hover:text-gray-900 bg-gray-200 text-gray-800",
+          "hover:bg-emerald-100 hover:text-emerald-800 dark:hover:text-emerald-600 bg-emerald-200 text-emerald-900 dark:text-emerald-800",
+        gray: "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 bg-gray-200 text-gray-500 dark:text-gray-800",
         amber:
-          "hover:bg-amber-100 hover:text-amber-600 bg-amber-200 text-amber-800",
+          "hover:bg-amber-100 hover:text-amber-800 dark:hover:text-amber-600 bg-amber-200 text-amber-900 dark:text-amber-800",
         violet:
-          "hover:bg-violet-100 hover:text-violet-600 bg-violet-200 text-violet-800",
+          "hover:bg-violet-100 hover:text-violet-800 dark:hover:text-violet-600 bg-violet-200 text-violet-900 dark:text-violet-800",
         "gradient-blue":
-          "hover:bg-linear-to-r from-blue-600 to-purple-600 hover:text-blue-900 bg-linear-to-r from-blue-200 to-purple-200 text-blue-800",
+          "hover:bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 hover:text-blue-500 dark:hover:text-blue-900 bg-linear-to-r from-blue-200 to-purple-200 text-blue-900 dark:text-blue-200",
         "gradient-green":
-          "hover:bg-linear-to-r from-green-600 to-lime-600 hover:text-green-900 bg-linear-to-r from-green-200 to-lime-200 text-green-800",
+          "hover:bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 hover:text-green-500 dark:hover:text-green-900 bg-linear-to-r from-green-200 to-lime-200 text-green-900 dark:text-green-200",
         "gradient-red":
-          "hover:bg-linear-to-r from-red-600 to-pink-600 hover:text-red-900 bg-linear-to-r from-red-200 to-pink-200 text-red-800",
+          "hover:bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 hover:text-red-500 dark:hover:text-red-900 bg-linear-to-r from-red-200 to-pink-200 text-red-900 dark:text-red-200",
         "gradient-yellow":
-          "hover:bg-linear-to-r from-yellow-600 to-orange-600 hover:text-yellow-900 bg-linear-to-r from-yellow-200 to-orange-200 text-yellow-800",
+          "hover:bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 hover:text-yellow-500 dark:hover:text-yellow-900 bg-linear-to-r from-yellow-200 to-orange-200 text-yellow-900 dark:text-yellow-200",
         "gradient-purple":
-          "hover:bg-linear-to-r from-purple-600 to-pink-600 hover:text-purple-900 bg-linear-to-r from-purple-200 to-pink-200 text-purple-800",
+          "hover:bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 hover:text-purple-500 dark:hover:text-purple-900 bg-linear-to-r from-purple-200 to-pink-200 text-purple-900 dark:text-purple-200",
         "gradient-teal":
-          "hover:bg-linear-to-r from-teal-600 to-cyan-600 hover:text-teal-900 bg-linear-to-r from-teal-200 to-cyan-200 text-teal-800",
+          "hover:bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 hover:text-teal-500 dark:hover:text-teal-900 bg-linear-to-r from-teal-200 to-cyan-200 text-teal-900 dark:text-teal-200",
         "gradient-indigo":
-          "hover:bg-linear-to-r from-indigo-600 to-purple-600 hover:text-indigo-900 bg-linear-to-r from-indigo-200 to-purple-200 text-indigo-800",
+          "hover:bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 hover:text-indigo-500 dark:hover:text-indigo-900 bg-linear-to-r from-indigo-200 to-purple-200 text-indigo-900 dark:text-indigo-200",
         "gradient-pink":
-          "hover:bg-linear-to-r from-pink-600 to-rose-600 hover:text-pink-900 bg-linear-to-r from-pink-200 to-rose-200 text-pink-800",
+          "hover:bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 hover:text-pink-500 dark:hover:text-pink-900 bg-linear-to-r from-pink-200 to-rose-200 text-pink-900 dark:text-pink-200",
         "gradient-orange":
-          "hover:bg-linear-to-r from-orange-600 to-red-600 hover:text-orange-900 bg-linear-to-r from-orange-200 to-red-200 text-orange-800",
+          "hover:bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 hover:text-orange-500 dark:hover:text-orange-900 bg-linear-to-r from-orange-200 to-red-200 text-orange-900 dark:text-orange-200",
       },
     },
     defaultVariants: {

package/src/ui/dynamic-stepper/dynamic-stepper.test.tsx

@@ -23,11 +23,15 @@ describe("DynamicStepper", () => {
 
   it("should stamp mapper ol and button ids with suffixes", () => {
     render(<DynamicStepper steps={sampleSteps} />);
-    const mapper = document.querySelector('[data-slot="dynamic-stepper-mapper"]');
+    const mapper = document.querySelector(
+      '[data-slot="dynamic-stepper-mapper"]',
+    );
     expect(mapper?.tagName).toBe("OL");
     expect(mapper?.id.endsWith("-mapper")).toBe(true);
 
-    const prev = document.querySelector('[data-slot="dynamic-stepper-previous"]');
+    const prev = document.querySelector(
+      '[data-slot="dynamic-stepper-previous"]',
+    );
     const next = document.querySelector('[data-slot="dynamic-stepper-next"]');
     expect(prev?.id.endsWith("-previous")).toBe(true);
     expect(next?.id.endsWith("-next")).toBe(true);

package/src/ui/dynamic-stepper/dynamic-stepper.tsx

@@ -134,7 +134,7 @@ export const DynamicStepper = ({
                 {step.title != null && (
                   <div
                     className={cn(
-                      "text-sm font-semibold text-white",
+                      "text-sm font-semibold dark:text-white text-slate-900",
                       !isVertical && "mt-3",
                     )}
                   >
@@ -142,7 +142,7 @@ export const DynamicStepper = ({
                   </div>
                 )}
                 {step.description != null && (
-                  <p className="mt-1 text-xs text-slate-400">
+                  <p className="mt-1 text-xs text-slate-900 dark:text-slate-400">
                     {step.description}
                   </p>
                 )}

package/src/ui/dynamic-stepper/index.ts

@@ -19,6 +19,4 @@ export {
   dynamicStepperMapperVariants,
   dynamicStepperRootVariants,
 } from "./variants";
-export type {
-  DynamicStepperIndicatorSemanticState,
-} from "./variants";
+export type { DynamicStepperIndicatorSemanticState } from "./variants";