@zentauri-ui/zentauri-components 1.5.31 → 1.6.0

package/src/ui/pagination/variants.ts

@@ -5,47 +5,50 @@ import { cva } from "class-variance-authority";
  * `components/ui/buttons/variants.ts` for consistent design-system tokens.
  */
 export const paginationListVariants = cva(
-  "inline-flex flex-wrap items-center rounded-xl border p-1 ring-offset-slate-950",
+  "inline-flex flex-wrap items-center rounded-xl border p-1 ring-offset-slate-50 dark:ring-offset-slate-950",
   {
     variants: {
       appearance: {
-        default: "border-white/10 bg-white/[0.03]",
-        secondary: "border-white/10 bg-slate-900/40",
-        destructive: "border-rose-500/25 bg-rose-950/20",
-        outline: "border-white/15 bg-transparent",
+        default:
+          "border-black/10 dark:border-white/10 bg-black/[0.03] dark:bg-white/[0.03]",
+        secondary:
+          "border-black/10 dark:border-white/10 bg-slate-100/40 dark:bg-slate-900/40",
+        destructive: "border-rose-500/25 bg-rose-50 dark:bg-rose-950/20",
+        outline: "border-black/15 dark:border-white/15 bg-transparent",
         ghost: "border-transparent bg-transparent",
         link: "border-transparent bg-transparent",
-        glass: "border-white/15 bg-white/5 backdrop-blur-md",
-        emerald: "border-emerald-500/25 bg-emerald-950/20",
-        indigo: "border-indigo-500/25 bg-indigo-950/20",
-        purple: "border-purple-500/25 bg-purple-950/20",
-        pink: "border-pink-500/25 bg-pink-950/20",
-        rose: "border-rose-500/25 bg-rose-950/20",
-        sky: "border-sky-500/25 bg-sky-950/20",
-        teal: "border-teal-500/25 bg-teal-950/20",
-        yellow: "border-yellow-500/25 bg-yellow-950/20",
-        orange: "border-orange-500/25 bg-orange-950/20",
-        gray: "border-gray-500/25 bg-gray-950/20",
-        amber: "border-amber-500/25 bg-amber-950/20",
-        violet: "border-violet-500/25 bg-violet-950/20",
+        glass:
+          "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 backdrop-blur-md",
+        emerald: "border-emerald-500/25 bg-emerald-50 dark:bg-emerald-950/20",
+        indigo: "border-indigo-500/25 bg-indigo-50 dark:bg-indigo-950/20",
+        purple: "border-purple-500/25 bg-purple-50 dark:bg-purple-950/20",
+        pink: "border-pink-500/25 bg-pink-50 dark:bg-pink-950/20",
+        rose: "border-rose-500/25 bg-rose-50 dark:bg-rose-950/20",
+        sky: "border-sky-500/25 bg-sky-50 dark:bg-sky-950/20",
+        teal: "border-teal-500/25 bg-teal-50 dark:bg-teal-950/20",
+        yellow: "border-yellow-500/25 bg-yellow-50 dark:bg-yellow-950/20",
+        orange: "border-orange-500/25 bg-orange-50 dark:bg-orange-950/20",
+        gray: "border-gray-500/25 bg-gray-50 dark:bg-gray-950/20",
+        amber: "border-amber-500/25 bg-amber-50 dark:bg-amber-950/20",
+        violet: "border-violet-500/25 bg-violet-50 dark:bg-violet-950/20",
         "gradient-blue":
-          "border-blue-500/30 bg-linear-to-r from-blue-950/30 to-purple-950/30",
+          "border-blue-500/30 bg-linear-to-r from-blue-50 dark:from-blue-950/30 to-purple-50 dark:to-purple-950/30",
         "gradient-green":
-          "border-lime-500/30 bg-linear-to-r from-green-950/30 to-lime-950/30",
+          "border-lime-500/30 bg-linear-to-r from-green-50 dark:from-green-950/30 to-lime-50 dark:to-lime-950/30",
         "gradient-red":
-          "border-pink-500/30 bg-linear-to-r from-red-950/30 to-pink-950/30",
+          "border-pink-500/30 bg-linear-to-r from-red-50 dark:from-red-950/30 to-pink-50 dark:to-pink-950/30",
         "gradient-yellow":
-          "border-orange-500/30 bg-linear-to-r from-yellow-950/30 to-orange-950/30",
+          "border-orange-500/30 bg-linear-to-r from-yellow-50 dark:from-yellow-950/30 to-orange-50 dark:to-orange-950/30",
         "gradient-purple":
-          "border-pink-500/30 bg-linear-to-r from-purple-950/30 to-pink-950/30",
+          "border-pink-500/30 bg-linear-to-r from-purple-50 dark:from-purple-950/30 to-pink-50 dark:to-pink-950/30",
         "gradient-teal":
-          "border-cyan-500/30 bg-linear-to-r from-teal-950/30 to-cyan-950/30",
+          "border-cyan-500/30 bg-linear-to-r from-teal-50 dark:from-teal-950/30 to-cyan-50 dark:to-cyan-950/30",
         "gradient-indigo":
-          "border-purple-500/30 bg-linear-to-r from-indigo-950/30 to-purple-950/30",
+          "border-purple-500/30 bg-linear-to-r from-indigo-50 dark:from-indigo-950/30 to-purple-50 dark:to-purple-950/30",
         "gradient-pink":
-          "border-rose-500/30 bg-linear-to-r from-pink-950/30 to-rose-950/30",
+          "border-rose-500/30 bg-linear-to-r from-pink-50 dark:from-pink-950/30 to-rose-50 dark:to-rose-950/30",
         "gradient-orange":
-          "border-orange-500/30 bg-linear-to-r from-orange-950/30 to-red-950/30",
+          "border-orange-500/30 bg-linear-to-r from-orange-50 dark:from-orange-950/30 to-red-50 dark:to-red-950/30",
       },
       size: {
         sm: "gap-0.5",
@@ -72,7 +75,7 @@ export const paginationListVariants = cva(
 );
 
 export const paginationEllipsisVariants = cva(
-  "inline-flex min-w-[2ch] select-none items-center justify-center px-1 font-medium text-slate-400",
+  "inline-flex min-w-[2ch] select-none items-center justify-center px-1 font-medium text-slate-500 dark:text-slate-400",
   {
     variants: {
       size: {

package/src/ui/progress/variants.ts

@@ -1,74 +1,88 @@
 import { cva } from "class-variance-authority";
 
-export const progressVariants = cva("w-full text-slate-50", {
-  variants: {
-    appearance: {
-      default: "[--progress-fill:theme(colors.slate.50)]",
-      secondary: "[--progress-fill:theme(colors.slate.300)]",
-      destructive: "[--progress-fill:theme(colors.rose.400)]",
-      emerald: "[--progress-fill:theme(colors.emerald.400)]",
-      indigo: "[--progress-fill:theme(colors.indigo.400)]",
-      purple: "[--progress-fill:theme(colors.purple.400)]",
-      pink: "[--progress-fill:theme(colors.pink.400)]",
-      rose: "[--progress-fill:theme(colors.rose.400)]",
-      sky: "[--progress-fill:theme(colors.sky.400)]",
-      teal: "[--progress-fill:theme(colors.teal.400)]",
-      yellow: "[--progress-fill:theme(colors.yellow.400)]",
-      orange: "[--progress-fill:theme(colors.orange.400)]",
-      outline: "[--progress-fill:theme(colors.cyan.300)]",
-      ghost: "[--progress-fill:theme(colors.slate.200)]",
-      glass: "[--progress-fill:theme(colors.white)]",
-      "gradient-blue":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.blue.500),theme(colors.purple.500))]",
-      "gradient-green":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.green.500),theme(colors.lime.500))]",
-      "gradient-red":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.red.500),theme(colors.pink.500))]",
-      "gradient-yellow":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.yellow.500),theme(colors.orange.500))]",
-      "gradient-purple":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))]",
-      "gradient-teal":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))]",
-      "gradient-indigo":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))]",
-      "gradient-pink":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))]",
-      "gradient-orange":
-        "[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))]",
-    },
-    size: {
-      xs: "text-[0.65rem]",
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base",
-      xl: "text-lg",
-    },
-    shape: {
-      flat: "rounded-none",
-      rounded: "rounded-md",
-      pill: "rounded-full",
-    },
-    striped: {
-      true: "",
-      false: "",
+export const progressVariants = cva(
+  "w-full text-slate-900 dark:text-slate-50",
+  {
+    variants: {
+      appearance: {
+        default:
+          "[--progress-fill:theme(colors.slate.900)] dark:[--progress-fill:theme(colors.slate.50)]",
+        secondary:
+          "[--progress-fill:theme(colors.slate.600)] dark:[--progress-fill:theme(colors.slate.300)]",
+        destructive:
+          "[--progress-fill:theme(colors.rose.800)] dark:[--progress-fill:theme(colors.rose.400)]",
+        emerald:
+          "[--progress-fill:theme(colors.emerald.800)] dark:[--progress-fill:theme(colors.emerald.400)]",
+        indigo:
+          "[--progress-fill:theme(colors.indigo.800)] dark:[--progress-fill:theme(colors.indigo.400)]",
+        purple:
+          "[--progress-fill:theme(colors.purple.800)] dark:[--progress-fill:theme(colors.purple.400)]",
+        pink: "[--progress-fill:theme(colors.pink.800)] dark:[--progress-fill:theme(colors.pink.400)]",
+        rose: "[--progress-fill:theme(colors.rose.800)] dark:[--progress-fill:theme(colors.rose.400)]",
+        sky: "[--progress-fill:theme(colors.sky.800)] dark:[--progress-fill:theme(colors.sky.400)]",
+        teal: "[--progress-fill:theme(colors.teal.800)] dark:[--progress-fill:theme(colors.teal.400)]",
+        yellow:
+          "[--progress-fill:theme(colors.yellow.800)] dark:[--progress-fill:theme(colors.yellow.400)]",
+        orange:
+          "[--progress-fill:theme(colors.orange.800)] dark:[--progress-fill:theme(colors.orange.400)]",
+        outline:
+          "[--progress-fill:theme(colors.cyan.700)] dark:[--progress-fill:theme(colors.cyan.300)]",
+        ghost:
+          "[--progress-fill:theme(colors.slate.800)] dark:[--progress-fill:theme(colors.slate.200)]",
+        glass:
+          "[--progress-fill:theme(colors.slate.900)] dark:[--progress-fill:theme(colors.white)]",
+        "gradient-blue":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.blue.500),theme(colors.purple.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.blue.500),theme(colors.purple.500))]",
+        "gradient-green":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.green.500),theme(colors.lime.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.green.500),theme(colors.lime.500))]",
+        "gradient-red":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.red.500),theme(colors.pink.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.red.500),theme(colors.pink.500))]",
+        "gradient-yellow":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.yellow.500),theme(colors.orange.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.yellow.500),theme(colors.orange.500))]",
+        "gradient-purple":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))]",
+        "gradient-teal":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))]",
+        "gradient-indigo":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))]",
+        "gradient-pink":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))]",
+        "gradient-orange":
+          "[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))]",
+      },
+      size: {
+        xs: "text-[0.65rem]",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+        xl: "text-lg",
+      },
+      shape: {
+        flat: "rounded-none",
+        rounded: "rounded-md",
+        pill: "rounded-full",
+      },
+      striped: {
+        true: "",
+        false: "",
+      },
+      animated: {
+        true: "",
+        false: "",
+      },
     },
-    animated: {
-      true: "",
-      false: "",
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+      shape: "rounded",
+      striped: false,
+      animated: false,
     },
   },
-  defaultVariants: {
-    appearance: "default",
-    size: "md",
-    shape: "rounded",
-    striped: false,
-    animated: false,
-  },
-});
+);
 
 export const progressTrackVariants = cva(
-  "relative w-full overflow-hidden bg-white/10",
+  "relative w-full overflow-hidden bg-black/10 dark:bg-white/10",
   {
     variants: {
       size: {
@@ -96,7 +110,7 @@ export const progressBarVariants = cva(
   {
     variants: {
       striped: {
-        true: "bg-[repeating-linear-gradient(135deg,rgba(255,255,255,0.18)_0,rgba(255,255,255,0.18)_10px,transparent_10px,transparent_20px)]",
+        true: "bg-[repeating-linear-gradient(135deg,rgba(15,23,42,0.12)_0,rgba(15,23,42,0.12)_10px,transparent_10px,transparent_20px)] dark:bg-[repeating-linear-gradient(135deg,rgba(255,255,255,0.18)_0,rgba(255,255,255,0.18)_10px,transparent_10px,transparent_20px)]",
         false: "[background:var(--progress-fill)]",
       },
     },

package/src/ui/search/search-bar.tsx

@@ -38,7 +38,7 @@ export const SearchBar = function SearchBar({
     >
       {leadingSlot ? (
         <span
-          className="pointer-events-none absolute left-3 top-1/2 z-1 flex -translate-y-1/2 text-slate-400 [&_svg]:size-4"
+          className="pointer-events-none absolute left-3 top-1/2 z-1 flex -translate-y-1/2 text-slate-900 dark:text-slate-200 [&_svg]:size-4"
           aria-hidden
         >
           {leadingSlot}
@@ -58,6 +58,7 @@ export const SearchBar = function SearchBar({
           inputVariants({ appearance, size: inputSize, ring, as: "input" }),
           leadingSlot ? "pl-10" : null,
           inputClassName,
+          "[&::-webkit-search-cancel-button]:hidden",
         )}
         onChange={(event) => {
           onChange?.(event);

package/src/ui/search/search-suggestion-list.tsx

@@ -8,7 +8,7 @@ import { searchSuggestionOptionDomId } from "./search-suggestion-utils";
 import type { SearchSuggestionListProps } from "./types";
 
 const rowClassName =
-  "flex w-full flex-col gap-0.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors hover:bg-white/5 focus-visible:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50";
+  "flex w-full flex-col gap-0.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors dark:hover:bg-white/5 hover:bg-black/10 focus-visible:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50";
 
 export function SearchSuggestionList({
   items,
@@ -25,7 +25,7 @@ export function SearchSuggestionList({
       <div
         data-slot="search-suggestion-list-empty"
         className={cn(
-          "px-1 py-6 text-center text-sm text-slate-500",
+          "px-1 py-6 text-center text-sm text-slate-900 dark:text-slate-200",
           className,
         )}
       >
@@ -78,7 +78,7 @@ export function SearchSuggestionList({
               {showGroup ? (
                 <div
                   role="presentation"
-                  className="sticky top-0 z-1 bg-slate-950/95 px-2 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-slate-500 backdrop-blur-sm"
+                  className="sticky rounded-lg top-0 z-1 dark:bg-slate-950/95 bg-slate-50/95 px-2 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-slate-900 dark:text-slate-200 backdrop-blur-sm"
                 >
                   {item.group}
                 </div>
@@ -94,9 +94,11 @@ export function SearchSuggestionList({
                 onFocus={() => onActiveIdChange?.(item.id)}
                 onClick={() => onSelect(item.id)}
               >
-                <span className="font-medium text-slate-100">{item.label}</span>
+                <span className="font-medium text-slate-900 dark:text-slate-100">
+                  {item.label}
+                </span>
                 {item.description ? (
-                  <span className="truncate text-xs text-slate-500">
+                  <span className="truncate text-xs text-slate-900 dark:text-slate-200">
                     {item.description}
                   </span>
                 ) : null}

package/src/ui/select/variants.ts

@@ -1,41 +1,47 @@
 import { cva } from "class-variance-authority";
 
 export const selectTriggerVariants = cva(
-  "flex items-center justify-between rounded-md border transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2",
+  "flex items-center cursor-pointer justify-between rounded-md border transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-600 dark:focus-visible:ring-gray-400 focus-visible:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-gray-300 bg-white text-gray-900",
-        outline: "border-2 border-gray-500",
-        ghost: "border-transparent",
-        sky: "border-sky-600 text-sky-600",
-        rose: "border-rose-600 text-rose-600",
-        purple: "border-purple-600 text-purple-600",
-        pink: "border-pink-600 text-pink-600",
-        orange: "border-orange-600 text-orange-600",
-        yellow: "border-yellow-600 text-yellow-600",
-        teal: "border-teal-600 text-teal-600",
+        default:
+          "border-gray-300 dark:border-gray-300 bg-white dark:bg-black text-gray-900 dark:text-white",
+        outline: "border-2 border-gray-500 text-gray-500 dark:text-gray-100",
+        ghost: "border-transparent text-slate-900 dark:text-slate-200",
+        sky: "border-sky-900 dark:border-sky-600 text-sky-900 dark:text-sky-600",
+        rose: "border-rose-900 dark:border-rose-600 text-rose-900 dark:text-rose-600",
+        purple:
+          "border-purple-900 dark:border-purple-600 text-purple-900 dark:text-purple-600",
+        pink: "border-pink-900 dark:border-pink-600 text-pink-900 dark:text-pink-600",
+        orange:
+          "border-orange-900 dark:border-orange-600 text-orange-900 dark:text-orange-600",
+        yellow:
+          "border-yellow-900 dark:border-yellow-600 text-yellow-900 dark:text-yellow-600",
+        teal: "border-teal-900 dark:border-teal-600 text-teal-900 dark:text-teal-600",
         indigo: "border-indigo-500 text-indigo-500",
-        emerald: "border-emerald-600 text-emerald-600",
-        glass: "border-white/15 bg-white/10 text-white backdrop-blur-md",
+        emerald:
+          "border-emerald-900 dark:border-emerald-600 text-emerald-900 dark:text-emerald-600",
+        glass:
+          "border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white backdrop-blur-md",
         "gradient-blue":
-          "bg-linear-to-r from-blue-600 to-purple-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-blue-900 dark:from-blue-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl text-white",
         "gradient-green":
-          "bg-linear-to-r from-green-600 to-lime-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-green-900 dark:from-green-600 to-lime-900 dark:to-lime-600 backdrop-blur-xl text-white",
         "gradient-red":
-          "bg-linear-to-r from-red-600 to-pink-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-red-900 dark:from-red-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl text-white",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-600 to-orange-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-yellow-900 dark:from-yellow-600 to-orange-900 dark:to-orange-600 backdrop-blur-xl text-white",
         "gradient-purple":
-          "bg-linear-to-r from-purple-600 to-pink-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-purple-900 dark:from-purple-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl text-white",
         "gradient-teal":
-          "bg-linear-to-r from-teal-600 to-cyan-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-teal-900 dark:from-teal-600 to-cyan-900 dark:to-cyan-600 backdrop-blur-xl text-white",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-600 to-purple-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-indigo-900 dark:from-indigo-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl text-white",
         "gradient-pink":
-          "bg-linear-to-r from-pink-600 to-rose-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-pink-900 dark:from-pink-600 to-rose-900 dark:to-rose-600 backdrop-blur-xl text-white",
         "gradient-orange":
-          "bg-linear-to-r from-orange-600 to-red-600 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-orange-900 dark:from-orange-600 to-red-900 dark:to-red-600 backdrop-blur-xl text-white",
       },
       size: {
         sm: "px-2 py-1 text-sm",
@@ -51,50 +57,50 @@ export const selectTriggerVariants = cva(
 );
 
 export const selectItemVariants = cva(
-  "cursor-pointer px-3 py-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-inset",
+  "cursor-pointer px-3 py-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-600 dark:focus-visible:ring-gray-400 focus-visible:ring-inset",
   {
     variants: {
       appearance: {
         default:
-          "bg-white text-gray-900 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
+          "bg-white dark:bg-black text-gray-900 dark:text-gray-200 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-700 dark:data-[selected=true]:text-gray-900",
         glass:
-          "bg-white/10 text-gray-100 data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-100",
+          "bg-black/10 dark:bg-white/10 text-gray-700 dark:text-gray-900 data-[selected=true]:bg-black/10 dark:data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-700 dark:data-[selected=true]:text-gray-900",
         outline:
-          "border-2 border-gray-500 text-gray-900 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
+          "border-2 border-gray-500 text-gray-900 dark:text-gray-100 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900 dark:data-[selected=true]:text-gray-900",
         ghost:
-          "border-transparent text-gray-900 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900",
-        sky: "border-sky-600 text-sky-800 data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-800",
-        rose: "border-rose-600 text-rose-800 data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-800",
+          "border-transparent text-gray-900 dark:text-gray-100 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900 dark:data-[selected=true]:text-gray-100",
+        sky: "border-sky-900 dark:border-sky-600 text-sky-900 dark:text-sky-200 data-[selected=true]:border-sky-900 dark:data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-900 dark:data-[selected=true]:text-sky-900",
+        rose: "border-rose-900 dark:border-rose-600 text-rose-900 dark:text-rose-200 data-[selected=true]:border-rose-900 dark:data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-900 dark:data-[selected=true]:text-rose-900",
         purple:
-          "border-purple-600 text-purple-800 data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-800",
-        pink: "border-pink-600 text-pink-800 data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-800",
+          "border-purple-900 dark:border-purple-600 text-purple-900 dark:text-purple-200 data-[selected=true]:border-purple-900 dark:data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-900 dark:data-[selected=true]:text-purple-900",
+        pink: "border-pink-900 dark:border-pink-600 text-pink-900 dark:text-pink-200 data-[selected=true]:border-pink-900 dark:data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-900 dark:data-[selected=true]:text-pink-900",
         orange:
-          "border-orange-600 text-orange-800 data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-800",
+          "border-orange-900 dark:border-orange-600 text-orange-900 dark:text-orange-200 data-[selected=true]:border-orange-900 dark:data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-900 dark:data-[selected=true]:text-orange-900",
         yellow:
-          "border-yellow-600 text-yellow-800 data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-800",
-        teal: "border-teal-600 text-teal-800 data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-800",
+          "border-yellow-900 dark:border-yellow-600 text-yellow-900 dark:text-yellow-200 data-[selected=true]:border-yellow-900 dark:data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-900 dark:data-[selected=true]:text-yellow-900",
+        teal: "border-teal-900 dark:border-teal-600 text-teal-900 dark:text-teal-200 data-[selected=true]:border-teal-900 dark:data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-900 dark:data-[selected=true]:text-teal-900",
         indigo:
-          "border-indigo-600 text-indigo-800 data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-800",
+          "border-indigo-900 dark:border-indigo-600 text-indigo-900 dark:text-indigo-200 data-[selected=true]:border-indigo-900 dark:data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-900 dark:data-[selected=true]:text-indigo-900",
         emerald:
-          "border-emerald-600 text-emerald-800 data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-800",
+          "border-emerald-900 dark:border-emerald-600 text-emerald-900 dark:text-emerald-200 data-[selected=true]:border-emerald-900 dark:data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-900 dark:data-[selected=true]:text-emerald-900",
         "gradient-blue":
-          "bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-blue-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-blue-600 data-[selected=true]:to-purple-600 data-[selected=true]:text-blue-100",
+          "bg-transparent backdrop-blur-xl text-blue-50 dark:text-blue-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-blue-50 dark:data-[selected=true]:from-blue-50 data-[selected=true]:to-purple-50 dark:data-[selected=true]:to-purple-50 data-[selected=true]:text-blue-900",
         "gradient-green":
-          "bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-green-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-green-600 data-[selected=true]:to-lime-600 data-[selected=true]:text-green-100",
+          "bg-transparent backdrop-blur-xl text-green-50 dark:text-green-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-green-50 dark:data-[selected=true]:from-green-50 data-[selected=true]:to-lime-50 dark:data-[selected=true]:to-lime-50 data-[selected=true]:text-green-900",
         "gradient-red":
-          "bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-red-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-red-600 data-[selected=true]:to-pink-600 data-[selected=true]:text-red-100",
+          "bg-transparent backdrop-blur-xl text-red-50 dark:text-red-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-red-50 dark:data-[selected=true]:from-red-50 data-[selected=true]:to-pink-50 dark:data-[selected=true]:to-pink-50 data-[selected=true]:text-red-900",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-yellow-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-yellow-600 data-[selected=true]:to-orange-600 data-[selected=true]:text-yellow-100",
+          "bg-transparent backdrop-blur-xl text-yellow-50 dark:text-yellow-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-yellow-50 dark:data-[selected=true]:from-yellow-50 data-[selected=true]:to-orange-50 dark:data-[selected=true]:to-orange-50 data-[selected=true]:text-yellow-900",
         "gradient-purple":
-          "bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-purple-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-purple-600 data-[selected=true]:to-pink-600 data-[selected=true]:text-purple-100",
+          "bg-transparent backdrop-blur-xl text-purple-50 dark:text-purple-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-purple-50 dark:data-[selected=true]:from-purple-50 data-[selected=true]:to-pink-50 dark:data-[selected=true]:to-pink-50 data-[selected=true]:text-purple-900",
         "gradient-teal":
-          "bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-teal-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-teal-600 data-[selected=true]:to-cyan-600 data-[selected=true]:text-teal-100",
+          "bg-transparent backdrop-blur-xl text-teal-50 dark:text-teal-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-teal-50 dark:data-[selected=true]:from-teal-50 data-[selected=true]:to-cyan-50 dark:data-[selected=true]:to-cyan-50 data-[selected=true]:text-teal-900",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-indigo-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-indigo-600 data-[selected=true]:to-purple-600 data-[selected=true]:text-indigo-100",
+          "bg-transparent backdrop-blur-xl text-indigo-50 dark:text-indigo-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-indigo-50 dark:data-[selected=true]:from-indigo-50 data-[selected=true]:to-purple-50 dark:data-[selected=true]:to-purple-50 data-[selected=true]:text-indigo-900",
         "gradient-pink":
-          "bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-pink-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-pink-600 data-[selected=true]:to-rose-600 data-[selected=true]:text-pink-100",
+          "bg-transparent backdrop-blur-xl text-pink-50 dark:text-pink-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-pink-50 dark:data-[selected=true]:from-pink-50 data-[selected=true]:to-rose-50 dark:data-[selected=true]:to-rose-50 data-[selected=true]:text-pink-900",
         "gradient-orange":
-          "bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-orange-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-orange-600 data-[selected=true]:to-red-600 data-[selected=true]:text-orange-100",
+          "bg-transparent backdrop-blur-xl text-orange-50 dark:text-orange-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-orange-50 dark:data-[selected=true]:from-orange-50 data-[selected=true]:to-red-50 dark:data-[selected=true]:to-red-50 data-[selected=true]:text-orange-900",
       },
       disabled: {
         true: "opacity-50 cursor-not-allowed",
@@ -107,41 +113,41 @@ export const selectItemVariants = cva(
 );
 
 export const selectContentVariants = cva(
-  "absolute z-10 mt-2 w-full rounded-md border bg-white shadow-md",
+  "absolute z-10 mt-2 w-full rounded-md border bg-white dark:bg-black shadow-md",
   {
     variants: {
       appearance: {
-        default: "bg-white shadow-md",
-        glass: "bg-white/10 backdrop-blur-md",
+        default: "bg-white dark:bg-black shadow-md",
+        glass: "bg-black/10 dark:bg-white/10 backdrop-blur-md",
         outline: "border-2 border-gray-500",
         ghost: "border-transparent",
-        sky: "border-sky-600",
-        rose: "border-rose-600",
-        purple: "border-purple-600",
-        pink: "border-pink-600",
-        orange: "border-orange-600",
-        yellow: "border-yellow-600",
-        teal: "border-teal-600",
-        indigo: "border-indigo-600",
-        emerald: "border-emerald-600",
+        sky: "border-sky-900 dark:border-sky-600",
+        rose: "border-rose-900 dark:border-rose-600",
+        purple: "border-purple-900 dark:border-purple-600",
+        pink: "border-pink-900 dark:border-pink-600",
+        orange: "border-orange-900 dark:border-orange-600",
+        yellow: "border-yellow-900 dark:border-yellow-600",
+        teal: "border-teal-900 dark:border-teal-600",
+        indigo: "border-indigo-900 dark:border-indigo-600",
+        emerald: "border-emerald-900 dark:border-emerald-600",
         "gradient-blue":
-          "bg-linear-to-r from-blue-600 to-purple-600 backdrop-blur-xl",
+          "bg-linear-to-r from-blue-900 dark:from-blue-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl",
         "gradient-green":
-          "bg-linear-to-r from-green-600 to-lime-600 backdrop-blur-xl",
+          "bg-linear-to-r from-green-900 dark:from-green-600 to-lime-900 dark:to-lime-600 backdrop-blur-xl",
         "gradient-red":
-          "bg-linear-to-r from-red-600 to-pink-600 backdrop-blur-xl",
+          "bg-linear-to-r from-red-900 dark:from-red-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-600 to-orange-600 backdrop-blur-xl",
+          "bg-linear-to-r from-yellow-900 dark:from-yellow-600 to-orange-900 dark:to-orange-600 backdrop-blur-xl",
         "gradient-purple":
-          "bg-linear-to-r from-purple-600 to-pink-600 backdrop-blur-xl",
+          "bg-linear-to-r from-purple-900 dark:from-purple-600 to-pink-900 dark:to-pink-600 backdrop-blur-xl",
         "gradient-teal":
-          "bg-linear-to-r from-teal-600 to-cyan-600 backdrop-blur-xl",
+          "bg-linear-to-r from-teal-900 dark:from-teal-600 to-cyan-900 dark:to-cyan-600 backdrop-blur-xl",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-600 to-purple-600 backdrop-blur-xl",
+          "bg-linear-to-r from-indigo-900 dark:from-indigo-600 to-purple-900 dark:to-purple-600 backdrop-blur-xl",
         "gradient-pink":
-          "bg-linear-to-r from-pink-600 to-rose-600 backdrop-blur-xl",
+          "bg-linear-to-r from-pink-900 dark:from-pink-600 to-rose-900 dark:to-rose-600 backdrop-blur-xl",
         "gradient-orange":
-          "bg-linear-to-r from-orange-600 to-red-600 backdrop-blur-xl",
+          "bg-linear-to-r from-orange-900 dark:from-orange-600 to-red-900 dark:to-red-600 backdrop-blur-xl",
       },
       size: {
         sm: "px-2 py-1 text-sm",

package/src/ui/skeleton/variants.ts

@@ -33,13 +33,13 @@ export const skeletonShimmerGradientClasses = {
 export type SkeletonShimmerTone = keyof typeof skeletonShimmerGradientClasses;
 
 export const skeletonVariants = cva(
-  "relative overflow-hidden bg-white/10 text-transparent",
+  "relative overflow-hidden bg-black/10 dark:bg-white/10 text-transparent",
   {
     variants: {
       appearance: {
-        default: "bg-white/10",
-        subtle: "bg-white/[0.07]",
-        muted: "bg-slate-800/80",
+        default: "bg-black/10 dark:bg-white/10",
+        subtle: "bg-black/[0.07] dark:bg-white/[0.07]",
+        muted: "bg-slate-200/80 dark:bg-slate-800/80",
         sky: "bg-sky-500/10",
         rose: "bg-rose-500/10",
         purple: "bg-purple-500/10",
@@ -52,15 +52,24 @@ export const skeletonVariants = cva(
         gray: "bg-gray-500/10",
         amber: "bg-amber-500/10",
         violet: "bg-violet-500/10",
-        "gradient-blue": "bg-linear-to-r from-blue-600 to-purple-600",
-        "gradient-green": "bg-linear-to-r from-green-600 to-lime-600",
-        "gradient-red": "bg-linear-to-r from-red-600 to-pink-600",
-        "gradient-yellow": "bg-linear-to-r from-yellow-600 to-orange-600",
-        "gradient-purple": "bg-linear-to-r from-purple-600 to-pink-600",
-        "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600",
-        "gradient-indigo": "bg-linear-to-r from-indigo-600 to-purple-600",
-        "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600",
-        "gradient-orange": "bg-linear-to-r from-orange-600 to-red-600",
+        "gradient-blue":
+          "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600",
+        "gradient-green":
+          "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600",
+        "gradient-red":
+          "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600",
+        "gradient-yellow":
+          "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600",
+        "gradient-purple":
+          "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600",
+        "gradient-teal":
+          "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600",
+        "gradient-indigo":
+          "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600",
+        "gradient-pink":
+          "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600",
+        "gradient-orange":
+          "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600",
       },
       size: {
         sm: "min-h-3",