@hilum/ui 2.0.0 → 2.0.1

package/src/components/sheet.tsx

@@ -29,7 +29,7 @@ SheetOverlay.displayName = "SheetOverlay";
 
 const sheetContentVariants = cva(
   [
-    "fixed z-50 bg-white shadow-elevated p-6",
+    "fixed z-50 bg-card shadow-elevated p-6",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
     "transition ease-in-out duration-300",
   ],
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<React.ComponentRef<typeof Dialog.Content>,
         {...props}
       >
         {children}
-        <Dialog.Close className="absolute right-4 top-4 rounded-md p-1 text-ground-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ground-900/20">
+        <Dialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring/20">
           <X size={16} />
           <span className="sr-only">Close</span>
         </Dialog.Close>
@@ -91,7 +91,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Dialog.Title
     ref={ref}
-    className={cn("body-lg font-semibold text-ground-900", className)}
+    className={cn("body-lg font-semibold text-foreground", className)}
     {...props}
   />
 ));
@@ -101,7 +101,7 @@ const SheetDescription = React.forwardRef<
   React.ComponentRef<typeof Dialog.Description>,
   React.ComponentPropsWithoutRef<typeof Dialog.Description>
 >(({ className, ...props }, ref) => (
-  <Dialog.Description ref={ref} className={cn("body text-ground-500", className)} {...props} />
+  <Dialog.Description ref={ref} className={cn("body text-muted-foreground", className)} {...props} />
 ));
 SheetDescription.displayName = "SheetDescription";
 

package/src/components/sidebar.tsx

@@ -132,7 +132,7 @@ function Sidebar({
         data-variant={variant}
         data-collapsible="none"
         className={cn(
-          "flex flex-col h-svh bg-white border-r border-ground-100 w-(--sidebar-width)",
+          "flex flex-col h-svh bg-card border-r border-border w-(--sidebar-width)",
           side === "right" && "border-r-0 border-l",
           className,
         )}
@@ -151,7 +151,7 @@ function Sidebar({
         data-variant={variant}
         data-collapsible="offcanvas"
         className={cn(
-          "group peer flex flex-col h-svh bg-white border-r border-ground-100",
+          "group peer flex flex-col h-svh bg-card border-r border-border",
           "transition-[width,transform] duration-200 ease-linear",
           "data-[state=expanded]:w-(--sidebar-width) data-[state=collapsed]:w-0 data-[state=collapsed]:-translate-x-full",
           side === "right" && "border-r-0 border-l data-[state=collapsed]:translate-x-full",
@@ -172,7 +172,7 @@ function Sidebar({
       data-variant={variant}
       data-collapsible="icon"
       className={cn(
-        "group peer hidden md:flex flex-col h-svh bg-white border-r border-ground-100",
+        "group peer hidden md:flex flex-col h-svh bg-card border-r border-border",
         "transition-[width] duration-200 ease-linear overflow-hidden",
         "data-[state=expanded]:w-(--sidebar-width) data-[state=collapsed]:w-(--sidebar-width-icon)",
         side === "right" && "border-r-0 border-l",
@@ -247,7 +247,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   return (
     <main
       data-sidebar="inset"
-      className={cn("relative flex min-h-svh flex-1 flex-col bg-white overflow-hidden", className)}
+      className={cn("relative flex min-h-svh flex-1 flex-col bg-card overflow-hidden", className)}
       {...props}
     />
   );
@@ -261,7 +261,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-3 border-b border-ground-100", className)}
+      className={cn("flex flex-col gap-2 p-3 border-b border-border", className)}
       {...props}
     />
   );
@@ -281,7 +281,7 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-3 border-t border-ground-100", className)}
+      className={cn("flex flex-col gap-2 p-3 border-t border-border", className)}
       {...props}
     />
   );
@@ -291,7 +291,7 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
   return (
     <Separator
       data-sidebar="separator"
-      className={cn("mx-2 my-1 bg-ground-100", className)}
+      className={cn("mx-2 my-1 bg-muted", className)}
       {...props}
     />
   );
@@ -322,8 +322,8 @@ function SidebarGroupLabel({
     <Comp
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 label text-ground-400",
-        "outline-none ring-ground-900 transition-[margin,opacity] duration-200 ease-linear",
+        "flex h-8 shrink-0 items-center rounded-md px-2 label text-muted-foreground",
+        "outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear",
         "group-data-[state=collapsed]/sidebar-wrapper:opacity-0",
         "group-data-[state=collapsed]/sidebar-wrapper:h-0",
         "group-data-[state=collapsed]/sidebar-wrapper:m-0",
@@ -354,7 +354,7 @@ function SidebarGroupAction({
       data-sidebar="group-action"
       className={cn(
         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center",
-        "rounded-md text-ground-400 hover:bg-ground-100 hover:text-ground-900",
+        "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         className,
       )}
@@ -413,11 +413,11 @@ function SidebarMenuButton({
       className={cn(
         // Base
         "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 body-sm text-left",
-        "outline-none ring-ground-900",
+        "outline-none ring-ring",
         "transition-[width,height,padding] duration-150",
-        "hover:bg-ground-100 hover:text-ground-900",
+        "hover:bg-muted hover:text-foreground",
         "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
-        "active:bg-ground-100",
+        "active:bg-muted",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-4 [&>svg]:shrink-0",
         // Size variants
@@ -482,7 +482,7 @@ function SidebarMenuAction({
       data-sidebar="menu-action"
       className={cn(
         "absolute right-1 top-1/2 -translate-y-1/2 flex aspect-square w-5 items-center justify-center",
-        "rounded-md text-ground-400 hover:bg-ground-100 hover:text-ground-900",
+        "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         showOnHover && [
           "opacity-0 transition-opacity",
@@ -507,7 +507,7 @@ function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">)
       data-sidebar="menu-badge"
       className={cn(
         "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-full",
-        "caption font-medium bg-ground-100 text-ground-700 px-1",
+        "caption font-medium bg-muted text-muted-foreground px-1",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className,
       )}
@@ -535,9 +535,9 @@ function SidebarMenuSkeleton({
       className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
       {...props}
     >
-      {showIcon && <div className="size-4 shrink-0 rounded-md bg-ground-200 animate-pulse" />}
+      {showIcon && <div className="size-4 shrink-0 rounded-md bg-muted animate-pulse" />}
       <div
-        className="h-4 max-w-(--skeleton-width) flex-1 rounded-md bg-ground-200 animate-pulse"
+        className="h-4 max-w-(--skeleton-width) flex-1 rounded-md bg-muted animate-pulse"
         style={{ "--skeleton-width": width } as React.CSSProperties}
       />
     </div>
@@ -553,7 +553,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
     <ul
       data-sidebar="menu-sub"
       className={cn(
-        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-ground-100 pl-3",
+        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border pl-3",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className,
       )}
@@ -591,9 +591,9 @@ function SidebarMenuSubButton({
       data-active={isActive}
       className={cn(
         "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
-        "body text-ground-500 outline-none",
+        "body text-muted-foreground outline-none",
         "transition-colors duration-150",
-        "hover:text-ground-900 hover:bg-ground-100",
+        "hover:text-foreground hover:bg-muted",
         "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-3.5 [&>svg]:shrink-0",

package/src/components/skeleton.tsx

@@ -5,7 +5,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-ground-100", className)}
+      className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
   );

package/src/components/slider.tsx

@@ -13,10 +13,10 @@ const SliderRoot = React.forwardRef<
     className={cn("relative flex w-full touch-none select-none items-center", className)}
     {...props}
   >
-    <Slider.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-ground-100">
+    <Slider.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
       <Slider.Range className="absolute h-full bg-brand-primary" />
     </Slider.Track>
-    <Slider.Thumb className="block size-4 rounded-full border-2 border-brand-primary bg-white shadow-natural transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" />
+    <Slider.Thumb className="block size-4 rounded-full border-2 border-brand-primary bg-card shadow-natural transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" />
   </Slider.Root>
 ));
 SliderRoot.displayName = "Slider";

package/src/components/sonner.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import * as React from "react";
 import { Toaster as SonnerToaster } from "sonner";
 
 type ToasterProps = React.ComponentProps<typeof SonnerToaster>;
@@ -12,18 +13,18 @@ function Toaster({ ...props }: ToasterProps) {
       toastOptions={{
         classNames: {
           toast:
-            "group toast font-sans text-sm group-[.toaster]:bg-white group-[.toaster]:text-ground-900 group-[.toaster]:border group-[.toaster]:border-ground-100 group-[.toaster]:shadow-elevated group-[.toaster]:rounded-xl",
-          description: "group-[.toast]:text-ground-500 group-[.toast]:text-xs",
+            "group toast font-sans text-sm group-[.toaster]:bg-card group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:shadow-elevated group-[.toaster]:rounded-xl",
+          description: "group-[.toast]:text-muted-foreground group-[.toast]:text-xs",
           actionButton:
-            "group-[.toast]:bg-brand-primary group-[.toast]:text-white group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
+            "group-[.toast]:bg-brand-primary group-[.toast]:text-background group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
           cancelButton:
-            "group-[.toast]:bg-ground-100 group-[.toast]:text-ground-600 group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
-          success: "group-[.toaster]:border-brand-secondary/40 group-[.toaster]:text-ground-900",
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
+          success: "group-[.toaster]:border-brand-secondary/40 group-[.toaster]:text-foreground",
           error:
-            "group-[.toaster]:bg-red-50 group-[.toaster]:text-red-700 group-[.toaster]:border-red-200",
+            "group-[.toaster]:bg-destructive/10 group-[.toaster]:text-destructive group-[.toaster]:border-destructive/20",
           warning:
-            "group-[.toaster]:bg-yellow-50 group-[.toaster]:text-yellow-800 group-[.toaster]:border-yellow-200",
-          info: "group-[.toaster]:border-ground-200",
+            "group-[.toaster]:bg-warning group-[.toaster]:text-warning-foreground group-[.toaster]:border-warning/40",
+          info: "group-[.toaster]:border-border",
         },
       }}
       {...props}

package/src/components/stacked-list.tsx

@@ -13,9 +13,9 @@ function StackedList({ children, divided = true, bordered = true, className }: S
     <ul
       role="list"
       className={cn(
-        "overflow-hidden rounded-xl bg-white",
-        bordered && "border border-ground-100 shadow-natural",
-        divided && "divide-y divide-ground-100",
+        "overflow-hidden rounded-xl bg-card",
+        bordered && "border border-border shadow-natural",
+        divided && "divide-y divide-border",
         className,
       )}
     >
@@ -37,7 +37,7 @@ function StackedListItem({ children, href, onClick, className }: StackedListItem
   if (href) {
     return (
       <li>
-        <a href={href} className="block hover:bg-ground-50 transition-colors">
+        <a href={href} className="block hover:bg-muted transition-colors">
           {inner}
         </a>
       </li>
@@ -49,7 +49,7 @@ function StackedListItem({ children, href, onClick, className }: StackedListItem
       <li>
         <button
           type="button"
-          className="w-full text-left hover:bg-ground-50 transition-colors"
+          className="w-full text-left hover:bg-muted transition-colors"
           onClick={onClick}
         >
           {inner}

package/src/components/stat-card.tsx

@@ -15,9 +15,9 @@ interface StatCardProps {
 
 function StatCard({ label, value, trend, icon, className }: StatCardProps) {
   const trendColor = {
-    up: "text-ground-800 bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
-    down: "text-red-600",
-    neutral: "text-ground-400",
+    up: "text-muted-foreground bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
+    down: "text-destructive",
+    neutral: "text-muted-foreground",
   };
 
   const TrendIcon = {
@@ -27,16 +27,16 @@ function StatCard({ label, value, trend, icon, className }: StatCardProps) {
   };
 
   return (
-    <div className={cn("rounded-xl border border-ground-100 bg-white p-5", className)}>
+    <div className={cn("rounded-xl border border-border bg-card p-5", className)}>
       <div className="flex items-start justify-between gap-3">
-        <p className="label text-ground-400">{label}</p>
+        <p className="label text-muted-foreground">{label}</p>
         {icon && (
-          <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-ground-50 text-ground-400">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
             {icon}
           </div>
         )}
       </div>
-      <p className="heading-xl mt-2 text-ground-900">{value}</p>
+      <p className="heading-xl mt-2 text-foreground">{value}</p>
       {trend &&
         (() => {
           const Icon = TrendIcon[trend.direction];
@@ -51,4 +51,6 @@ function StatCard({ label, value, trend, icon, className }: StatCardProps) {
   );
 }
 
+StatCard.displayName = "StatCard";
+
 export { StatCard };

package/src/components/steps.tsx

@@ -33,7 +33,7 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                   <div
                     className={cn(
                       "h-full",
-                      step.status === "complete" ? "bg-brand-primary" : "bg-ground-200",
+                      step.status === "complete" ? "bg-brand-primary" : "bg-muted",
                     )}
                   />
                 </div>
@@ -50,17 +50,17 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                     "relative z-10 flex size-8 items-center justify-center rounded-full transition-colors",
                     step.status === "complete" &&
                       "bg-brand-primary group-hover:bg-brand-primary/80",
-                    step.status === "current" && "border-2 border-brand-primary bg-white",
+                    step.status === "current" && "border-2 border-brand-primary bg-card",
                     step.status === "upcoming" &&
-                      "border-2 border-ground-300 bg-white group-hover:border-ground-400",
+                      "border-2 border-border bg-card group-hover:border-border",
                   )}
                 >
                   {step.status === "complete" ? (
-                    <Check size={14} className="text-white" strokeWidth={2.5} />
+                    <Check size={14} className="text-background" strokeWidth={2.5} />
                   ) : step.status === "current" ? (
                     <span className="size-2.5 rounded-full bg-brand-primary" />
                   ) : (
-                    <span className="size-2.5 rounded-full bg-transparent group-hover:bg-ground-300" />
+                    <span className="size-2.5 rounded-full bg-transparent group-hover:bg-muted" />
                   )}
                 </span>
 
@@ -69,13 +69,13 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                   <span
                     className={cn(
                       "caption font-semibold",
-                      step.status === "upcoming" ? "text-ground-400" : "text-ground-900",
+                      step.status === "upcoming" ? "text-muted-foreground" : "text-foreground",
                     )}
                   >
                     {step.name}
                   </span>
                   {step.description && (
-                    <span className="caption text-ground-400">{step.description}</span>
+                    <span className="caption text-muted-foreground">{step.description}</span>
                   )}
                 </span>
               </a>
@@ -93,7 +93,7 @@ function BulletsSteps({ steps, className }: { steps: Step[]; className?: string
 
   return (
     <nav className={cn("flex items-center gap-4", className)} aria-label="Progress">
-      <p className="body font-medium text-ground-700">
+      <p className="body font-medium text-muted-foreground">
         Step {currentIdx + 1} of {steps.length}
       </p>
       <ol role="list" className="flex items-center gap-2">
@@ -107,21 +107,21 @@ function BulletsSteps({ steps, className }: { steps: Step[]; className?: string
               {step.status === "complete" ? (
                 <span
                   className="block size-2.5 rounded-full bg-brand-primary hover:bg-brand-primary/80 transition-colors"
-                  title={step.name}
+                  aria-label={`${step.name}: completed`}
                 />
               ) : step.status === "current" ? (
                 <span
                   className="relative flex size-4 items-center justify-center"
                   aria-current="step"
+                  aria-label={`${step.name}: current step`}
                 >
                   <span className="absolute size-4 rounded-full bg-brand-primary/20" />
                   <span className="relative size-2.5 rounded-full bg-brand-primary" />
-                  <span className="sr-only">{step.name}</span>
                 </span>
               ) : (
                 <span
-                  className="block size-2.5 rounded-full bg-ground-200 hover:bg-ground-300 transition-colors"
-                  title={step.name}
+                  className="block size-2.5 rounded-full bg-muted hover:bg-muted transition-colors"
+                  aria-label={`${step.name}: upcoming`}
                 />
               )}
             </a>
@@ -141,7 +141,7 @@ function ProgressSteps({ steps, className }: { steps: Step[]; className?: string
   return (
     <div className={cn("w-full", className)}>
       {/* Bar */}
-      <div className="h-1.5 w-full overflow-hidden rounded-full bg-ground-100">
+      <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
         <div
           className="h-full rounded-full bg-brand-primary transition-all duration-500"
           style={{ width: `${progress}%` }}
@@ -157,7 +157,7 @@ function ProgressSteps({ steps, className }: { steps: Step[]; className?: string
               className={cn(
                 "caption font-medium",
                 i === 0 ? "text-left" : isLast ? "text-right" : "text-center",
-                step.status === "upcoming" ? "text-ground-400" : "text-ground-900",
+                step.status === "upcoming" ? "text-muted-foreground" : "text-foreground",
               )}
             >
               {step.name}
@@ -177,4 +177,6 @@ function Steps({ steps, variant = "circles", className }: StepsProps) {
   return <CirclesSteps steps={steps} {...classNameProp} />;
 }
 
+Steps.displayName = "Steps";
+
 export { Steps };

package/src/components/switch.tsx

@@ -15,14 +15,14 @@ const SwitchRoot = React.forwardRef<
       "border-2 border-transparent transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=unchecked]:bg-ground-200 data-[state=checked]:bg-brand-primary",
+      "data-[state=unchecked]:bg-muted data-[state=checked]:bg-brand-primary",
       className,
     )}
     {...props}
   >
     <Switch.Thumb
       className={cn(
-        "pointer-events-none block size-4 rounded-full bg-white shadow-natural",
+        "pointer-events-none block size-4 rounded-full bg-card shadow-natural",
         "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4",
       )}
     />

package/src/components/table.tsx

@@ -7,13 +7,13 @@ const Table = React.forwardRef<
 >(({ className, containerClassName, ...props }, ref) => (
   <div
     className={cn(
-      "w-full overflow-hidden rounded-xl border border-ground-100 bg-white",
+      "w-full overflow-hidden rounded-xl border border-border bg-card",
       containerClassName,
     )}
   >
     <table
       ref={ref}
-      className={cn("min-w-full caption-bottom divide-y divide-ground-200", className)}
+      className={cn("min-w-full caption-bottom divide-y divide-border", className)}
       {...props}
     />
   </div>
@@ -24,7 +24,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("bg-ground-50", className)} {...props} />
+  <thead ref={ref} className={cn("bg-muted", className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -32,7 +32,7 @@ const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody ref={ref} className={cn("divide-y divide-ground-100 bg-white", className)} {...props} />
+  <tbody ref={ref} className={cn("divide-y divide-border bg-card", className)} {...props} />
 ));
 TableBody.displayName = "TableBody";
 
@@ -40,7 +40,7 @@ const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tfoot ref={ref} className={cn("bg-ground-50 font-medium", className)} {...props} />
+  <tfoot ref={ref} className={cn("bg-muted font-medium", className)} {...props} />
 ));
 TableFooter.displayName = "TableFooter";
 
@@ -49,7 +49,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
     <tr
       ref={ref}
       className={cn(
-        "transition-colors hover:bg-ground-50/50 data-[state=selected]:bg-ground-50",
+        "transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className,
       )}
       {...props}
@@ -65,7 +65,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "px-6 py-3 text-left align-middle label text-ground-400",
+      "px-6 py-3 text-left align-middle label text-muted-foreground",
       "[&:has([role=checkbox])]:pr-0",
       className,
     )}
@@ -81,7 +81,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "px-6 py-4 align-middle body text-ground-500",
+      "px-6 py-4 align-middle body text-muted-foreground",
       "[&:has([role=checkbox])]:pr-0",
       className,
     )}
@@ -94,7 +94,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("mt-4 caption text-ground-400", className)} {...props} />
+  <caption ref={ref} className={cn("mt-4 caption text-muted-foreground", className)} {...props} />
 ));
 TableCaption.displayName = "TableCaption";
 

package/src/components/tabs.tsx

@@ -18,7 +18,7 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Tabs.List
     ref={ref}
-    className={cn("inline-flex items-center gap-1 border-b border-ground-100 w-full", className)}
+    className={cn("inline-flex items-center gap-1 border-b border-border w-full", className)}
     {...props}
   />
 ));
@@ -31,7 +31,7 @@ const TabsTrigger = React.forwardRef<
   <Tabs.Trigger
     ref={ref}
     className={cn(
-      "px-0 pb-2.5 body font-medium text-ground-400",
+      "px-0 pb-2.5 body font-medium text-muted-foreground",
       "border-b-2 border-transparent -mb-px",
       "transition-colors cursor-pointer",
       "data-[state=active]:text-brand-primary data-[state=active]:border-brand-primary",

package/src/components/textarea.tsx

@@ -6,11 +6,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-ground-200 bg-white px-3 py-2",
-        "body text-ground-900 placeholder:text-ground-400",
+        "flex min-h-[80px] w-full rounded-md border border-border bg-card px-3 py-2",
+        "body text-foreground placeholder:text-muted-foreground",
         "resize-none transition-colors duration-150",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15 focus-visible:border-ground-400",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:border-border",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         className,
       )}
       {...props}

package/src/components/toggle.tsx

@@ -18,19 +18,19 @@ const toggleVariants = cva(
     variants: {
       variant: {
         default: [
-          "bg-transparent text-ground-600",
-          "hover:bg-ground-100 hover:text-ground-900",
-          "data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900",
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-muted data-[state=on]:text-foreground",
         ],
         outline: [
-          "border border-ground-200 bg-white text-ground-600 shadow-natural",
-          "hover:bg-ground-50 hover:text-ground-900",
-          "data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900 data-[state=on]:border-ground-300",
+          "border border-border bg-card text-muted-foreground shadow-natural",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-muted data-[state=on]:text-foreground data-[state=on]:border-border",
         ],
         brand: [
-          "bg-transparent text-ground-600",
-          "hover:bg-ground-100 hover:text-ground-900",
-          "data-[state=on]:bg-brand-primary data-[state=on]:text-white",
+          "bg-transparent text-muted-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-brand-primary data-[state=on]:text-background",
         ],
       },
       size: {

package/src/components/tooltip.tsx

@@ -27,7 +27,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 rounded-lg bg-ground-900 px-2.5 py-1.5 caption text-white",
+        "z-50 rounded-lg bg-foreground px-2.5 py-1.5 caption text-background",
         "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-1 data-[side=top]:slide-in-from-bottom-1",