@nextlyhq/ui 0.0.2-alpha.33 → 0.0.2-alpha.34

package/dist/index.mjs

@@ -43,13 +43,13 @@ var buttonVariants = cva(
         link: "text-primary border border-transparent underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-10 px-6 py-2",
-        sm: "h-9 px-4 text-[13px]",
-        md: "h-10 px-6 text-sm",
-        lg: "h-11 px-8 text-base",
-        icon: "h-10 w-10 p-0",
-        "icon-sm": "h-9 w-9 p-0",
-        "icon-lg": "h-11 w-11 p-0"
+        default: "h-[var(--control-height)] px-6 py-2",
+        sm: "h-[var(--control-height-md)] px-4 text-[13px]",
+        md: "h-[var(--control-height)] px-6 text-sm",
+        lg: "h-[var(--control-height-lg)] px-8 text-base",
+        icon: "h-[var(--control-height)] w-[var(--control-height)] p-0",
+        "icon-sm": "h-[var(--control-height-md)] w-[var(--control-height-md)] p-0",
+        "icon-lg": "h-[var(--control-height-lg)] w-[var(--control-height-lg)] p-0"
       }
     },
     defaultVariants: {
@@ -86,13 +86,13 @@ var Button = forwardRef(
 );
 Button.displayName = "Button";
 var inputVariants = cva(
-  "file:text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-none border border-input bg-background text-sm transition-all duration-150 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus:ring-0 focus:ring-offset-0 focus:outline-none focus:!border-primary focus-visible:!border-primary aria-invalid:border-destructive aria-invalid:focus:!border-destructive data-[invalid=true]:border-destructive data-[invalid=true]:focus:!border-destructive",
+  "file:text-foreground placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary selection:text-primary-foreground w-full min-w-0 rounded-none border border-input bg-background text-sm transition-all duration-150 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus:ring-0 focus:ring-offset-0 focus:outline-none focus:border-primary! focus-visible:border-primary! aria-invalid:border-destructive aria-invalid:focus:border-destructive! data-[invalid=true]:border-destructive data-[invalid=true]:focus:border-destructive!",
   {
     variants: {
       size: {
-        sm: "h-8 px-2.5 py-2 text-sm",
-        default: "h-10 px-3 py-2.5 text-sm",
-        lg: "h-11 px-4 py-3 text-base"
+        sm: "h-[var(--control-height-sm)] px-2.5 py-2 text-sm",
+        default: "h-[var(--control-height)] px-3 py-2.5 text-sm",
+        lg: "h-[var(--control-height-lg)] px-4 py-3 text-base"
       }
     },
     defaultVariants: {
@@ -121,8 +121,8 @@ var Textarea = forwardRef(({ className, ...props }, ref) => {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex min-h-[80px] w-full rounded-none border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground placeholder:opacity-50 transition-all duration-200 focus:!border-primary focus-visible:!border-primary focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 resize-y",
-        "aria-invalid:border-destructive aria-invalid:focus:!border-destructive",
+        "flex min-h-[80px] w-full rounded-none border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground placeholder:opacity-50 transition-all duration-200 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 resize-y",
+        "aria-invalid:border-destructive aria-invalid:focus:border-destructive!",
         className
       ),
       ref,
@@ -154,7 +154,7 @@ var TooltipContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) =
     sideOffset,
     "data-slot": "tooltip-content",
     className: cn(
-      "z-50 overflow-hidden rounded-none px-3 py-1.5 text-xs shadow-lg  border border-primary/5 bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-none px-3 py-1.5 text-xs shadow-lg  border border-border bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -194,7 +194,7 @@ var FormLabelWithTooltip = React6.forwardRef(
           {
             side: "right",
             className: cn(
-              "max-w-[250px] text-[12px] break-words relative z-[100] shadow-md  border border-primary/5 bg-black text-white dark:bg-zinc-800 dark:text-zinc-50 px-3 py-2 rounded-none",
+              "max-w-[250px] text-[12px] break-words relative z-[100] shadow-md  border border-border bg-primary text-primary-foreground px-3 py-2 rounded-none",
               tooltipClassName
             ),
             children: description
@@ -210,12 +210,14 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary/5 text-slate-900 dark:bg-slate-800 dark:text-slate-100",
-        primary: "bg-primary/5 text-primary dark:bg-primary/20 dark:text-primary-foreground/90",
+        // Clear, legible chip in both modes (was bg-primary/5 at ~5% opacity,
+        // which was nearly invisible on dark backgrounds).
+        default: "bg-muted text-foreground",
+        primary: "bg-primary/10 text-primary dark:bg-primary/20",
         success: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-100",
         warning: "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-100",
         destructive: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-100",
-        outline: "border !border-primary/5 bg-transparent text-slate-700 dark:text-slate-300 dark:!border-primary/5"
+        outline: "border border-border! bg-transparent text-foreground dark:text-muted-foreground dark:border-border!"
       }
     },
     defaultVariants: {
@@ -234,7 +236,7 @@ function Badge({ className, variant = "default", ...props }) {
   );
 }
 var cardVariants = cva(
-  "bg-card text-foreground rounded-none  border border-primary/5   transition-all duration-200",
+  "bg-card text-foreground rounded-none  border border-border   transition-all duration-200",
   {
     variants: {
       variant: {
@@ -271,7 +273,7 @@ var CardHeader = forwardRef(
         "data-slot": "card-header",
         className: cn(
           "flex flex-col p-4",
-          !noBorder && "border-b border-primary/5",
+          !noBorder && "border-b border-border",
           className
         ),
         ...props
@@ -344,7 +346,7 @@ var CardFooter = forwardRef(
         ref,
         "data-slot": "card-footer",
         className: cn(
-          "flex items-center px-6 py-4  border-t border-primary/5 bg-primary/5",
+          "flex items-center px-6 py-4  border-t border-border bg-primary/5",
           className
         ),
         ...props
@@ -354,14 +356,14 @@ var CardFooter = forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 var alertVariants = cva(
-  "relative flex items-start gap-3 rounded-none  border border-primary/5 p-4 text-sm   transition-colors duration-150",
+  "relative flex items-start gap-3 rounded-none  border border-border p-4 text-sm   transition-colors duration-150",
   {
     variants: {
       variant: {
-        info: "border-primary/5 bg-primary/5 text-primary dark:border-primary/30 dark:bg-primary/5 dark:text-primary-foreground/90",
-        success: "border-green-200 bg-green-50 text-green-900 dark:border-green-900 dark:bg-green-950 dark:text-green-100",
-        warning: "border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100",
-        destructive: "border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100"
+        info: "border-border bg-primary/5 text-primary dark:border-primary/30 dark:bg-primary/5 dark:text-primary-foreground/90",
+        success: "border-green-200 bg-green-50 text-green-900 border-l-4 border-l-success dark:border-green-900 dark:bg-green-950 dark:text-green-100",
+        warning: "border-amber-200 bg-amber-50 text-amber-900 border-l-4 border-l-warning dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100",
+        destructive: "border-red-200 bg-red-50 text-red-900 border-l-4 border-l-destructive dark:border-red-900 dark:bg-red-950 dark:text-red-100"
       }
     },
     defaultVariants: {
@@ -511,7 +513,11 @@ var Checkbox = forwardRef(({ className, indeterminate, ...props }, ref) => /* @_
     ref,
     "data-slot": "checkbox",
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-none border border-primary/5 ring-offset-background focus:!border-primary focus-visible:!border-primary focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:!border-destructive aria-invalid:focus-visible:!border-destructive disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary transition-all duration-200",
+      // Unchecked outline uses primary/40 (clearly visible, monochrome) instead of
+      // primary/5, which rendered at ~5% opacity and was effectively invisible.
+      // Checked and indeterminate share the filled appearance; declaring both
+      // here keeps the control self-sufficient without host overrides.
+      "peer h-4 w-4 shrink-0 rounded-none border border-primary/40 ring-offset-background focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary transition-all duration-200",
       className
     ),
     ...props,
@@ -544,7 +550,9 @@ var RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
       ref,
       "data-slot": "radio-group-item",
       className: cn(
-        "peer h-4 w-4 shrink-0 rounded-none border border-primary/5 bg-background cursor-pointer transition-all duration-150 focus:!border-primary focus-visible:!border-primary focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:!border-destructive aria-invalid:focus-visible:!border-destructive disabled:cursor-not-allowed disabled:opacity-50 hover:border-primary/30 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
+        // Unchecked outline uses primary/40 (clearly visible) instead of primary/5
+        // (~5% opacity, effectively invisible); hover strengthens above the resting state.
+        "peer h-4 w-4 shrink-0 rounded-none border border-primary/40 bg-background cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none focus-visible:outline-none aria-invalid:border-destructive aria-invalid:focus:border-destructive! aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50 hover:border-primary/70 data-[state=checked]:border-primary data-[state=checked]:border-[5px]",
         className
       ),
       ...props,
@@ -559,9 +567,9 @@ function Switch({ className, ...props }) {
     {
       "data-slot": "switch",
       className: cn(
-        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-none  border border-primary/5 transition-all outline-none focus-visible:border-primary aria-invalid:border-destructive aria-invalid:focus-visible:!border-destructive disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[state=checked]:bg-primary data-[state=checked]:!border-primary",
-        "data-[state=unchecked]:bg-input data-[state=unchecked]:border-primary/5 dark:data-[state=unchecked]:bg-input/80",
+        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-none  border border-border transition-all outline-none focus-visible:border-primary aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive! disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-primary data-[state=checked]:border-primary!",
+        "data-[state=unchecked]:bg-input data-[state=unchecked]:border-border dark:data-[state=unchecked]:bg-input/80",
         className
       ),
       ...props,
@@ -606,7 +614,7 @@ var AccordionTrigger = forwardRef(
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-150" })
+        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-150 will-change-transform" })
       ]
     }
   ) })
@@ -618,7 +626,7 @@ var AccordionContent = forwardRef(
     {
       ref,
       "data-slot": "accordion-content",
-      className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className: "overflow-hidden text-sm transition-all will-change-[height] transform-[translateZ(0)] data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
     }
@@ -727,7 +735,7 @@ var TabsTrigger = forwardRef(
       ref,
       "data-slot": "tabs-trigger",
       className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:!border-b-primary data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
         className
       ),
       ...props
@@ -771,7 +779,7 @@ var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffse
       sideOffset,
       "data-slot": "popover-content",
       className: cn(
-        "z-[100] w-72 rounded-none  border border-primary/5 bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        "z-[100] w-72 rounded-none  border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
         className
       ),
       ...props
@@ -820,7 +828,7 @@ var DialogContent = forwardRef(({ className, children, size, ...props }, ref) =>
         ref,
         "data-slot": "dialog-content",
         className: cn(
-          "fixed left-[50%] top-[50%] z-[51] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4  border border-primary/5 bg-background p-6 shadow-xl rounded-none duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "fixed left-[50%] top-[50%] z-[51] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4  border border-border bg-background p-6 shadow-xl rounded-none duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           dialogContentVariants({ size }),
           className
         ),
@@ -917,7 +925,7 @@ var AlertDialogContent = forwardRef(({ className, ...props }, ref) => {
       {
         ref,
         className: cn(
-          "fixed left-[50%] top-[50%] z-[51] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  border border-primary/5 bg-background p-6 shadow-xl rounded-none duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          "fixed left-[50%] top-[50%] z-[51] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  border border-border bg-background p-6 shadow-xl rounded-none duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
           className
         ),
         ...props
@@ -1027,7 +1035,7 @@ var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-none  border border-primary/5 bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-none  border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
       className
     ),
     ...props
@@ -1042,7 +1050,7 @@ var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, ...pro
       ref,
       sideOffset,
       className: cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-none  border border-primary/5 bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-none  border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       ),
       ...props
@@ -1143,13 +1151,13 @@ function SelectValue({
   return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 var selectTriggerVariants = cva(
-  "flex w-full items-center justify-between gap-2 rounded-none border border-input bg-background px-3 text-sm text-foreground cursor-pointer transition-all duration-150 focus:!border-primary focus-visible:!border-primary focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 data-[placeholder]:text-muted-foreground aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:!border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+  "flex w-full items-center justify-between gap-2 rounded-none border border-input bg-background px-3 text-sm text-foreground cursor-pointer transition-all duration-150 focus:border-primary! focus-visible:border-primary! focus:outline-none hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/5 data-[placeholder]:text-muted-foreground aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
   {
     variants: {
       size: {
-        sm: "h-8 text-sm",
-        default: "h-10 text-sm",
-        lg: "h-11 text-base"
+        sm: "h-[var(--control-height-sm)] text-sm",
+        default: "h-[var(--control-height)] text-sm",
+        lg: "h-[var(--control-height-lg)] text-base"
       }
     },
     defaultVariants: {
@@ -1185,7 +1193,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground  border border-primary/5 shadow-none rounded-none z-9999 max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden data-[state=open]:animate-zoom-in-95 data-[state=closed]:animate-zoom-out-95 data-[side=bottom]:animate-slide-in-from-top-2 data-[side=left]:animate-slide-in-from-right-2 data-[side=right]:animate-slide-in-from-left-2 data-[side=top]:animate-slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground  border border-border shadow-none rounded-none z-9999 max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden data-[state=open]:animate-zoom-in-95 data-[state=closed]:animate-zoom-out-95 data-[side=bottom]:animate-slide-in-from-top-2 data-[side=left]:animate-slide-in-from-right-2 data-[side=right]:animate-slide-in-from-left-2 data-[side=top]:animate-slide-in-from-bottom-2",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -1312,10 +1320,10 @@ var sheetVariants = cva(
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0  border-b border-primary/5 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0  border-t border-primary/5 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4  border-r border-primary/5 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4  border-l border-primary/5 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+        top: "inset-x-0 top-0  border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0  border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4  border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
       }
     },
     defaultVariants: {
@@ -1439,7 +1447,7 @@ var CommandDialog = ({ children, ...props }) => {
           "m-4 sm:m-0",
           // 16px margin on mobile, no margin on desktop
           // Visual
-          "overflow-hidden rounded-none  border border-primary/5 bg-background shadow-xl",
+          "overflow-hidden rounded-none  border border-border bg-background shadow-xl",
           // Animation
           "duration-200",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -1455,7 +1463,7 @@ var CommandDialog = ({ children, ...props }) => {
 var CommandInput = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
   "div",
   {
-    className: "flex items-center  border-b border-primary/5 px-4",
+    className: "flex items-center  border-b border-border px-4",
     "cmdk-input-wrapper": "",
     children: [
       /* @__PURE__ */ jsx(Search, { className: "mr-3 h-5 w-5 shrink-0 text-muted-foreground" }),
@@ -1574,7 +1582,7 @@ var CommandShortcut = forwardRef(
           "text-xs font-mono",
           // Visual
           "text-muted-foreground bg-primary/5",
-          "border border-primary/5 rounded-none",
+          "border border-border rounded-none",
           // Spacing
           "px-1.5 py-0.5",
           className
@@ -1617,7 +1625,7 @@ function Toaster({ theme = "system", ...props }) {
     Toaster$1,
     {
       theme,
-      className: "toaster group !bg-transparent !overflow-visible !z-[9999]",
+      className: "toaster group bg-transparent! overflow-visible! z-[9999]!",
       "data-slot": "toaster",
       toastOptions: {
         classNames: {
@@ -1632,9 +1640,9 @@ function Toaster({ theme = "system", ...props }) {
         loading: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" })
       },
       style: {
-        "--normal-bg": "hsl(var(--popover, 0 0% 100%))",
-        "--normal-text": "hsl(var(--popover-foreground, 222.2 84% 4.9%))",
-        "--normal-border": "hsl(var(--border, 214.3 31.8% 91.4%))",
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)",
         "--border-radius": "0px"
       },
       ...props
@@ -1650,7 +1658,14 @@ var Table = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr] :border-b border-primary/5", className), ...props }));
+var TableHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn("[&_tr]:border-b border-border", className),
+    ...props
+  }
+));
 TableHeader.displayName = "TableHeader";
 var TableBody = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
@@ -1665,7 +1680,10 @@ var TableFooter = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   "tfoot",
   {
     ref,
-    className: cn("border-t border-primary/5 font-medium [&>tr]:last:border-b-0", className),
+    className: cn(
+      "border-t border-border font-medium [&>tr]:last:border-b-0",
+      className
+    ),
     ...props
   }
 ));
@@ -1675,7 +1693,7 @@ var TableRow = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "border-b border-primary/5 transition-colors data-[state=selected]:bg-primary/5",
+      "border-b border-border transition-colors data-[state=selected]:bg-primary/5",
       className
     ),
     ...props
@@ -1734,7 +1752,7 @@ function TableSearch({
         value,
         onChange: (e) => onChange(e.target.value),
         "aria-busy": isLoading,
-        className: "h-10 w-full rounded-none  border border-primary/5 bg-background pl-10 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-all"
+        className: "h-10 w-full rounded-none  border border-border bg-background pl-10 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-all"
       }
     ),
     (value || isLoading) && /* @__PURE__ */ jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [
@@ -1773,7 +1791,7 @@ function TableEmpty({ message = "No records found" }) {
   ] });
 }
 function renderPageNumbers(currentPage, totalPages, maxVisiblePages, onPageChange) {
-  const getBtnClass = (active) => `flex h-8 w-8 items-center justify-center  border-y border-primary/5  border-r border-primary/5 text-xs z-10 -ml-px transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${active ? "!bg-primary !text-primary-foreground !border-primary z-20" : "!bg-background !border-primary/5 hover-muted disabled:opacity-50"}`;
+  const getBtnClass = (active) => `flex h-8 w-8 items-center justify-center  border-y border-border  border-r border-border text-xs z-10 -ml-px transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${active ? "bg-primary! text-primary-foreground! border-primary! z-20" : "bg-background! border-border! hover-muted disabled:opacity-50"}`;
   if (totalPages <= maxVisiblePages) {
     return Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsx(
       "button",
@@ -1808,7 +1826,7 @@ function renderPageNumbers(currentPage, totalPages, maxVisiblePages, onPageChang
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "flex h-8 w-8 items-center justify-center  border-y border-primary/5  border-r border-primary/5 !border-primary/5 !bg-background text-muted-foreground text-xs -ml-px",
+            className: "flex h-8 w-8 items-center justify-center  border-y border-border  border-r border-border border-border! bg-background! text-muted-foreground text-xs -ml-px",
             "aria-hidden": "true",
             children: "..."
           },
@@ -1838,7 +1856,7 @@ function renderPageNumbers(currentPage, totalPages, maxVisiblePages, onPageChang
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "flex h-8 w-8 items-center justify-center  border-y border-primary/5  border-r border-primary/5 !border-primary/5 !bg-background text-muted-foreground text-xs -ml-px",
+            className: "flex h-8 w-8 items-center justify-center  border-y border-border  border-r border-border border-border! bg-background! text-muted-foreground text-xs -ml-px",
             "aria-hidden": "true",
             children: "..."
           },
@@ -1873,7 +1891,8 @@ function TablePagination({
     pageSizeOptions = [10, 20, 30, 50],
     maxVisiblePages = 5
   } = config || {};
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row w-full items-center justify-between gap-4 text-xs sm:text-sm text-muted-foreground p-4 border-t border-primary/5", children: [
+  const pageIndex = meta.page - 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row w-full items-center justify-between gap-4 text-xs sm:text-sm text-muted-foreground p-4 border-t border-border", children: [
     /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap order-2 sm:order-1", children: [
       "Showing ",
       (meta.page - 1) * meta.limit + 1,
@@ -1896,7 +1915,7 @@ function TablePagination({
                 const newPageSize = Number(e.target.value);
                 onPageSizeChange(newPageSize);
               },
-              className: "h-8 w-[70px] appearance-none rounded-none  border border-primary/5 bg-background px-2 py-1 text-sm font-medium focus-visible:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 hover-muted cursor-pointer",
+              className: "h-8 w-[70px] appearance-none rounded-none  border border-border bg-background px-2 py-1 text-sm font-medium focus-visible:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 hover-muted cursor-pointer",
               disabled: isLoading,
               children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
             }
@@ -1926,8 +1945,8 @@ function TablePagination({
           "button",
           {
             onClick: () => onPageChange(0),
-            disabled: meta.page === 0 || isLoading,
-            className: "hidden sm:flex h-8 w-8 items-center justify-center rounded-none  border border-primary/5 bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
+            disabled: pageIndex === 0 || isLoading,
+            className: "hidden sm:flex h-8 w-8 items-center justify-center rounded-none  border border-border bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
             "aria-label": "First page",
             children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
           }
@@ -1935,15 +1954,15 @@ function TablePagination({
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => onPageChange(meta.page - 1),
-            disabled: meta.page === 0 || isLoading,
-            className: "flex h-8 w-8 items-center justify-center rounded-none sm:rounded-none  border border-primary/5 bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
+            onClick: () => onPageChange(pageIndex - 1),
+            disabled: pageIndex === 0 || isLoading,
+            className: "flex h-8 w-8 items-center justify-center rounded-none sm:rounded-none  border border-border bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
             "aria-label": "Previous page",
             children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "flex", children: renderPageNumbers(
-          meta.page,
+          pageIndex,
           meta.totalPages,
           maxVisiblePages,
           onPageChange
@@ -1951,9 +1970,9 @@ function TablePagination({
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => onPageChange(meta.page + 1),
-            disabled: meta.page >= meta.totalPages - 1 || isLoading,
-            className: "flex h-8 w-8 items-center justify-center rounded-none sm:rounded-none  border-y border-primary/5  border-x border-primary/5 sm :border-r border-primary/5 bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
+            onClick: () => onPageChange(pageIndex + 1),
+            disabled: pageIndex >= meta.totalPages - 1 || isLoading,
+            className: "flex h-8 w-8 items-center justify-center rounded-none sm:rounded-none  border-y border-border  border-x border-border sm:border-r border-border bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
             "aria-label": "Next page",
             children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
           }
@@ -1962,8 +1981,8 @@ function TablePagination({
           "button",
           {
             onClick: () => onPageChange(meta.totalPages - 1),
-            disabled: meta.page >= meta.totalPages - 1 || isLoading,
-            className: "hidden sm:flex h-8 w-8 items-center justify-center rounded-none  border border-primary/5 bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
+            disabled: pageIndex >= meta.totalPages - 1 || isLoading,
+            className: "hidden sm:flex h-8 w-8 items-center justify-center rounded-none  border border-border bg-background hover-muted disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring z-10",
             "aria-label": "Last page",
             children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
           }
@@ -1971,7 +1990,7 @@ function TablePagination({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap hidden sm:block", children: [
         "Page ",
-        meta.page + 1,
+        meta.page,
         " of ",
         meta.totalPages
       ] })
@@ -1988,7 +2007,7 @@ var TableSkeleton = ({
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "border-0 rounded-none shadow-none", children: /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columns }).map((_, colIdx) => /* @__PURE__ */ jsx(TableHead, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-[70%] max-w-[180px]" }) : /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, `skeleton-header-${colIdx}`)) }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsx(TableRow, { className: "border-b border-primary/5", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsx(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, rowIdx) => /* @__PURE__ */ jsx(TableRow, { className: "border-b border-border", children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsx(TableCell, { className: "py-3", children: colIdx === 0 ? /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-4" }) : colIdx === columns - 1 ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-none" }) }) : colIdx === 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(Skeleton, { className: "w-9 rounded-none shrink-0" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 flex-1", children: [
           /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[120px]" }),
@@ -1996,7 +2015,7 @@ var TableSkeleton = ({
         ] })
       ] }) : /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-[60%] max-w-[120px]" }) }, colIdx)) }, rowIdx)) })
     ] }) }),
-    !hideFooter && /* @__PURE__ */ jsx("div", { className: "table-footer  border-t border-primary/5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-4 p-4", children: [
+    !hideFooter && /* @__PURE__ */ jsx("div", { className: "table-footer  border-t border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-4 p-4", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-sm", children: /* @__PURE__ */ jsx(GrayBar, { className: "h-4 w-[120px]" }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2017,7 +2036,7 @@ var TableSkeleton = ({
   if (hideWrapper) {
     return content;
   }
-  return /* @__PURE__ */ jsx("div", { className: "table-wrapper rounded-none  border border-primary/5 bg-card overflow-hidden", children: content });
+  return /* @__PURE__ */ jsx("div", { className: "table-wrapper rounded-none  border border-border bg-card overflow-hidden", children: content });
 };
 TableSkeleton.displayName = "TableSkeleton";
 function ResponsiveTableInner({
@@ -2075,17 +2094,7 @@ function ResponsiveTableInner({
     [handleItemClick, onRowClick]
   );
   if (data.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "p-8 text-center",
-          className
-        ),
-        children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("p-8 text-center", className), children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }) });
   }
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 md:hidden", children: data.map((item) => {
@@ -2152,11 +2161,11 @@ function ResponsiveTableInner({
       "div",
       {
         className: cn(
-          "table-wrapper hidden md:block overflow-hidden rounded-none  border border-primary/5",
+          "table-wrapper hidden md:block overflow-hidden rounded-none  border border-border",
           tableWrapperClassName
         ),
         children: /* @__PURE__ */ jsxs(Table, { "aria-label": ariaLabel || "Data table", children: [
-          /* @__PURE__ */ jsx(TableHeader, { className: "bg-[hsl(var(--table-header-bg))]", children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TableHeader, { className: "bg-[var(--table-header-bg)]", children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(
             TableHead,
             {
               className: column.headerClassName,
@@ -2193,7 +2202,7 @@ function ResponsiveTableInner({
         ] })
       }
     ),
-    footer && /* @__PURE__ */ jsx("div", { className: "table-footer border-t border-primary/5 bg-[hsl(var(--table-header-bg))]", children: footer })
+    footer && /* @__PURE__ */ jsx("div", { className: "table-footer border-t border-border bg-[var(--table-header-bg)]", children: footer })
   ] });
 }
 var ResponsiveTable = React6.forwardRef(ResponsiveTableInner);
@@ -2203,46 +2212,46 @@ var uiPreset = {
   theme: {
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        background: "var(--background)",
+        foreground: "var(--foreground)",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))"
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)"
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)"
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)"
         },
         success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))"
+          DEFAULT: "var(--success)",
+          foreground: "var(--success-foreground)"
         },
         warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))"
+          DEFAULT: "var(--warning)",
+          foreground: "var(--warning-foreground)"
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)"
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)"
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)"
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)"
         }
       },
       borderRadius: {