@hilum/ui 1.0.1 → 2.0.1

package/src/components/context-menu.tsx

@@ -20,7 +20,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenu.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] bg-white rounded-xl shadow-natural p-1",
+        "z-50 min-w-[8rem] bg-card rounded-xl shadow-natural p-1",
         "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",
@@ -47,8 +47,8 @@ const ContextMenuItem = React.forwardRef<
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
       "body outline-none transition-colors",
       destructive
-        ? "text-red-600 focus:bg-red-50 focus:text-red-700"
-        : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
+        ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
+        : "text-muted-foreground focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -66,8 +66,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -75,7 +75,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenu.ItemIndicator>
-        <Check size={13} className="text-ground-900" />
+        <Check size={13} className="text-foreground" />
       </ContextMenu.ItemIndicator>
     </span>
     {children}
@@ -91,8 +91,8 @@ const ContextMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -100,7 +100,7 @@ const ContextMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenu.ItemIndicator>
-        <Circle size={8} className="fill-ground-900 text-ground-900" />
+        <Circle size={8} className="fill-foreground text-foreground" />
       </ContextMenu.ItemIndicator>
     </span>
     {children}
@@ -116,7 +116,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenu.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className)}
     {...props}
   />
 ));
@@ -128,7 +128,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenu.Separator
     ref={ref}
-    className={cn("mx-1 my-1 h-px bg-ground-100", className)}
+    className={cn("mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
 ));
@@ -144,15 +144,15 @@ const ContextMenuSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
       className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight size={14} className="ml-auto text-ground-400" />
+    <ChevronRight size={14} className="ml-auto text-muted-foreground" />
   </ContextMenu.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
@@ -164,7 +164,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenu.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
       "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",
@@ -177,7 +177,7 @@ const ContextMenuSubContent = React.forwardRef<
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 
 function ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cn("ml-auto caption text-ground-400", className)} {...props} />;
+  return <span className={cn("ml-auto caption text-muted-foreground", className)} {...props} />;
 }
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 

package/src/components/data-table.tsx

@@ -67,12 +67,23 @@ function DataTable<TData>({
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
+                <TableHead
+                  key={header.id}
+                  aria-sort={
+                    header.column.getCanSort()
+                      ? header.column.getIsSorted() === "asc"
+                        ? "ascending"
+                        : header.column.getIsSorted() === "desc"
+                          ? "descending"
+                          : "none"
+                      : undefined
+                  }
+                >
                   {header.isPlaceholder ? null : header.column.getCanSort() ? (
                     <button
                       className={cn(
-                        "flex items-center gap-1 transition-colors hover:text-ground-700",
-                        header.column.getIsSorted() && "text-ground-900",
+                        "flex items-center gap-1 transition-colors hover:text-muted-foreground",
+                        header.column.getIsSorted() && "text-foreground",
                       )}
                       onClick={header.column.getToggleSortingHandler()}
                     >
@@ -82,7 +93,7 @@ function DataTable<TData>({
                       ) : header.column.getIsSorted() === "desc" ? (
                         <ChevronDown size={12} className="text-brand-primary" />
                       ) : (
-                        <ChevronsUpDown size={12} className="text-ground-300" />
+                        <ChevronsUpDown size={12} className="text-muted-foreground" />
                       )}
                     </button>
                   ) : (
@@ -106,7 +117,7 @@ function DataTable<TData>({
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center text-ground-400">
+              <TableCell colSpan={columns.length} className="h-24 text-center text-muted-foreground">
                 No results.
               </TableCell>
             </TableRow>
@@ -115,12 +126,12 @@ function DataTable<TData>({
       </Table>
       {showPagination && (
         <div className="flex items-center justify-between">
-          <p className="caption text-ground-400">
+          <p className="caption text-muted-foreground">
             {table.getFilteredRowModel().rows.length} result
             {table.getFilteredRowModel().rows.length !== 1 ? "s" : ""}
           </p>
           <div className="flex items-center gap-2">
-            <span className="caption text-ground-400">
+            <span className="caption text-muted-foreground">
               Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
             </span>
             <Button

package/src/components/date-picker.tsx

@@ -36,12 +36,12 @@ function DatePicker({
           variant="outline"
           className={cn(
             "w-[240px] justify-start gap-2 text-left font-normal",
-            !value && "text-ground-400",
+            !value && "text-muted-foreground",
             className,
           )}
           disabled={disabled}
         >
-          <CalendarIcon size={14} className="text-ground-400 shrink-0" />
+          <CalendarIcon size={14} className="text-muted-foreground shrink-0" />
           {value ? formatDate(value) : <span>{placeholder}</span>}
         </Button>
       </PopoverTrigger>

package/src/components/description-list.tsx

@@ -28,12 +28,12 @@ function DescriptionList({
     <div className={className}>
       {(title || description) && (
         <div className="mb-4">
-          {title && <p className="body font-semibold text-ground-900">{title}</p>}
-          {description && <p className="mt-1 caption text-ground-400">{description}</p>}
+          {title && <p className="body font-semibold text-foreground">{title}</p>}
+          {description && <p className="mt-1 caption text-muted-foreground">{description}</p>}
         </div>
       )}
 
-      <dl className={cn("border-t border-ground-100", columns === 2 && "sm:grid sm:grid-cols-2")}>
+      <dl className={cn("border-t border-border", columns === 2 && "sm:grid sm:grid-cols-2")}>
         {items.map((item, i) => (
           <div
             key={i}
@@ -41,15 +41,15 @@ function DescriptionList({
               "py-3.5",
               columns === 1
                 ? "grid grid-cols-3 gap-4 items-baseline"
-                : "flex flex-col gap-1 border-b border-ground-100",
-              columns === 1 && i !== items.length - 1 && "border-b border-ground-100",
-              striped && i % 2 === 0 && "bg-ground-50 -mx-4 px-4 rounded",
+                : "flex flex-col gap-1 border-b border-border",
+              columns === 1 && i !== items.length - 1 && "border-b border-border",
+              striped && i % 2 === 0 && "bg-muted -mx-4 px-4 rounded",
             )}
           >
-            <dt className="caption font-semibold text-ground-500 uppercase tracking-wide">
+            <dt className="caption font-semibold text-muted-foreground uppercase tracking-wide">
               {item.term}
             </dt>
-            <dd className={cn("body text-ground-900", columns === 1 ? "col-span-2" : "")}>
+            <dd className={cn("body text-foreground", columns === 1 ? "col-span-2" : "")}>
               {item.action ? (
                 <div className="flex items-center justify-between gap-4">
                   <span>{item.details}</span>
@@ -66,5 +66,7 @@ function DescriptionList({
   );
 }
 
+DescriptionList.displayName = "DescriptionList";
+
 export { DescriptionList };
 export type { DescriptionItem };

package/src/components/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-        "w-full max-w-lg bg-white rounded-2xl shadow-elevated p-6",
+        "w-full max-w-lg bg-card rounded-2xl shadow-elevated p-6",
         "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",
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
       {...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>
@@ -70,7 +70,7 @@ const DialogTitle = 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}
   />
 ));
@@ -80,7 +80,7 @@ const DialogDescription = 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} />
 ));
 DialogDescription.displayName = "DialogDescription";
 

package/src/components/drawer.tsx

@@ -15,7 +15,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn("fixed inset-0 z-50 bg-ground-950/40 backdrop-blur-[1px]", className)}
+    className={cn("fixed inset-0 z-50 bg-foreground/40 backdrop-blur-[1px]", className)}
     {...props}
   />
 ));
@@ -30,12 +30,12 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-ground-100 bg-white",
+        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-border bg-card",
         className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-1 w-12 rounded-full bg-ground-200" />
+      <div className="mx-auto mt-4 h-1 w-12 rounded-full bg-muted" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
@@ -58,7 +58,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn("subheading text-ground-900", className)}
+    className={cn("subheading text-foreground", className)}
     {...props}
   />
 ));
@@ -70,7 +70,7 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("body text-ground-500", className)}
+    className={cn("body text-muted-foreground", className)}
     {...props}
   />
 ));

package/src/components/dropdown-menu.tsx

@@ -21,7 +21,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] bg-white rounded-xl shadow-natural p-1",
+        "z-50 min-w-[8rem] bg-card rounded-xl shadow-natural p-1",
         "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",
@@ -48,8 +48,8 @@ const DropdownMenuItem = React.forwardRef<
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
       "body outline-none transition-colors",
       destructive
-        ? "text-red-600 focus:bg-red-50 focus:text-red-700"
-        : "text-ground-700 focus:bg-ground-50 focus:text-ground-900",
+        ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
+        : "text-muted-foreground focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -67,8 +67,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -76,7 +76,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenu.ItemIndicator>
-        <Check size={13} className="text-ground-900" />
+        <Check size={13} className="text-foreground" />
       </DropdownMenu.ItemIndicator>
     </span>
     {children}
@@ -92,8 +92,8 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -101,7 +101,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenu.ItemIndicator>
-        <Circle size={8} className="fill-ground-900 text-ground-900" />
+        <Circle size={8} className="fill-foreground text-foreground" />
       </DropdownMenu.ItemIndicator>
     </span>
     {children}
@@ -117,7 +117,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenu.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-muted-foreground", inset && "pl-8", className)}
     {...props}
   />
 ));
@@ -129,7 +129,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenu.Separator
     ref={ref}
-    className={cn("mx-1 my-1 h-px bg-ground-100", className)}
+    className={cn("mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
 ));
@@ -145,15 +145,15 @@ const DropdownMenuSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
-      "body text-ground-700 outline-none transition-colors",
-      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
+      "body text-muted-foreground outline-none transition-colors",
+      "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted",
       inset && "pl-8",
       className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight size={14} className="ml-auto text-ground-400" />
+    <ChevronRight size={14} className="ml-auto text-muted-foreground" />
   </DropdownMenu.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
@@ -165,7 +165,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenu.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
       "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",
@@ -178,7 +178,7 @@ const DropdownMenuSubContent = React.forwardRef<
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 
 function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cn("ml-auto caption text-ground-400", className)} {...props} />;
+  return <span className={cn("ml-auto caption text-muted-foreground", className)} {...props} />;
 }
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 

package/src/components/empty-state.tsx

@@ -18,13 +18,13 @@ function EmptyState({ icon, title, description, action, className }: EmptyStateP
   return (
     <div className={cn("flex flex-col items-center gap-4 px-6 py-14 text-center", className)}>
       {icon && (
-        <div className="flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-ground-700">
+        <div className="flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-muted-foreground">
           {icon}
         </div>
       )}
       <div className="flex flex-col gap-1.5">
-        <p className="body font-semibold text-ground-900">{title}</p>
-        {description && <p className="body max-w-xs text-ground-400">{description}</p>}
+        <p className="body font-semibold text-foreground">{title}</p>
+        {description && <p className="body max-w-xs text-muted-foreground">{description}</p>}
       </div>
       {action &&
         (action.href ? (
@@ -40,4 +40,6 @@ function EmptyState({ icon, title, description, action, className }: EmptyStateP
   );
 }
 
+EmptyState.displayName = "EmptyState";
+
 export { EmptyState };

package/src/components/field.tsx

@@ -34,15 +34,15 @@ function Field({
       <div className="flex items-center justify-between gap-2">
         <Label htmlFor={htmlFor} aria-required={required}>
           {label}
-          {required && <span className="ml-0.5 text-red-600" aria-hidden="true">*</span>}
+          {required && <span className="ml-0.5 text-destructive" aria-hidden="true">*</span>}
         </Label>
-        {cornerHint && <span className="caption text-ground-400">{cornerHint}</span>}
+        {cornerHint && <span className="caption text-muted-foreground">{cornerHint}</span>}
       </div>
       {children}
       {error ? (
-        <p id={descriptionId} role="alert" className="caption text-red-600">{error}</p>
+        <p id={descriptionId} role="alert" className="caption text-destructive">{error}</p>
       ) : hint ? (
-        <p id={descriptionId} className="caption text-ground-400">{hint}</p>
+        <p id={descriptionId} className="caption text-muted-foreground">{hint}</p>
       ) : null}
     </div>
   );

package/src/components/grid-list.tsx

@@ -58,18 +58,18 @@ function GridListCard({
   const inner = (
     <div
       className={cn(
-        "flex h-full flex-col gap-1 rounded-xl border border-ground-100 bg-white p-4 shadow-natural transition-shadow",
+        "flex h-full flex-col gap-1 rounded-xl border border-border bg-card p-4 shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className,
       )}
     >
       {accent && <div className="mb-2">{accent}</div>}
-      <p className="body font-semibold text-ground-900">{title}</p>
-      {description && <p className="caption text-ground-400">{description}</p>}
+      <p className="body font-semibold text-foreground">{title}</p>
+      {description && <p className="caption text-muted-foreground">{description}</p>}
       {(meta || trailing) && (
         <div className="mt-auto flex items-center justify-between pt-3">
-          {meta && <span className="caption text-ground-400">{meta}</span>}
-          {trailing && <span className="caption text-ground-400">{trailing}</span>}
+          {meta && <span className="caption text-muted-foreground">{meta}</span>}
+          {trailing && <span className="caption text-muted-foreground">{trailing}</span>}
         </div>
       )}
     </div>
@@ -80,7 +80,7 @@ function GridListCard({
       {href ? (
         <a
           href={href}
-          className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl"
+          className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-xl"
         >
           {inner}
         </a>
@@ -109,7 +109,7 @@ function GridListAccentCard({
   title,
   meta,
   href,
-  accentClass = "bg-ground-900",
+  accentClass = "bg-foreground",
   initials,
   trailing,
   className,
@@ -117,23 +117,23 @@ function GridListAccentCard({
   const inner = (
     <div
       className={cn(
-        "flex overflow-hidden rounded-xl border border-ground-100 bg-white shadow-natural transition-shadow",
+        "flex overflow-hidden rounded-xl border border-border bg-card shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className,
       )}
     >
       <div
         className={cn(
-          "flex w-14 shrink-0 items-center justify-center body font-semibold text-white",
+          "flex w-14 shrink-0 items-center justify-center body font-semibold text-background",
           accentClass,
         )}
       >
         {initials}
       </div>
-      <div className="flex flex-1 items-center justify-between truncate border-l border-ground-100 px-4 py-3">
+      <div className="flex flex-1 items-center justify-between truncate border-l border-border px-4 py-3">
         <div className="min-w-0">
-          <p className="body font-semibold text-ground-900 truncate">{title}</p>
-          {meta && <p className="caption text-ground-400">{meta}</p>}
+          <p className="body font-semibold text-foreground truncate">{title}</p>
+          {meta && <p className="caption text-muted-foreground">{meta}</p>}
         </div>
         {trailing && <div className="shrink-0 pl-2">{trailing}</div>}
       </div>
@@ -145,7 +145,7 @@ function GridListAccentCard({
       {href ? (
         <a
           href={href}
-          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl"
+          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-xl"
         >
           {inner}
         </a>
@@ -156,4 +156,8 @@ function GridListAccentCard({
   );
 }
 
+GridList.displayName = "GridList";
+GridListCard.displayName = "GridListCard";
+GridListAccentCard.displayName = "GridListAccentCard";
+
 export { GridList, GridListCard, GridListAccentCard };

package/src/components/hover-card.tsx

@@ -17,7 +17,7 @@ const HoverCardContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-64 rounded-xl border border-ground-100 bg-white p-4 shadow-elevated outline-none",
+        "z-50 w-64 rounded-xl border border-border bg-card p-4 shadow-elevated 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",

package/src/components/input-group.tsx

@@ -34,11 +34,11 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
     const hasTrailing = trailingAddon || trailingIcon || trailingButton || error;
 
     const baseInput = cn(
-      "flex h-9 w-full border bg-white body text-ground-900 placeholder:text-ground-400",
+      "flex h-9 w-full border bg-card body text-foreground placeholder:text-muted-foreground",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:disabled:cursor-not-allowed disabled:opacity-50",
       error
-        ? "border-red-400 focus-visible:ring-red-200 focus-visible:border-red-500"
-        : "border-ground-200 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+        ? "border-destructive focus-visible:ring-destructive/20 focus-visible:border-destructive"
+        : "border-border focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
     );
 
     if (!hasLeading && !hasTrailing) {
@@ -51,8 +51,8 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
         {leadingAddon && (
           <span
             className={cn(
-              "inline-flex items-center border border-r-0 bg-ground-50 px-3 body text-ground-500 select-none",
-              error ? "border-red-400" : "border-ground-200",
+              "inline-flex items-center border border-r-0 bg-muted px-3 body text-muted-foreground select-none",
+              error ? "border-destructive" : "border-border",
               pill ? "rounded-l-full" : "rounded-l-lg",
             )}
           >
@@ -63,7 +63,7 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
         {/* Relative wrapper for icon-only inputs */}
         <div className="relative flex-1">
           {leadingIcon && (
-            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-ground-400">
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">
               {leadingIcon}
             </div>
           )}
@@ -102,9 +102,9 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
           {(trailingIcon || error) && (
             <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
               {error ? (
-                <AlertCircle size={15} className="text-red-500" />
+                <AlertCircle size={15} className="text-destructive" />
               ) : (
-                <span className="text-ground-400">{trailingIcon}</span>
+                <span className="text-muted-foreground">{trailingIcon}</span>
               )}
             </div>
           )}
@@ -114,8 +114,8 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
         {trailingAddon && (
           <span
             className={cn(
-              "inline-flex items-center border border-l-0 bg-ground-50 px-3 body text-ground-500 select-none",
-              error ? "border-red-400" : "border-ground-200",
+              "inline-flex items-center border border-l-0 bg-muted px-3 body text-muted-foreground select-none",
+              error ? "border-destructive" : "border-border",
               pill ? "rounded-r-full" : "rounded-r-lg",
             )}
           >