@hilum/ui 1.0.1 → 2.0.1

package/src/components/calendar.tsx

@@ -16,35 +16,35 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         months: "flex flex-col sm:flex-row gap-4",
         month: "flex flex-col gap-4",
         month_caption: "flex justify-center pt-1 relative items-center px-10",
-        caption_label: "body font-semibold text-ground-900",
+        caption_label: "body font-semibold text-foreground",
         nav: "flex items-center justify-between absolute inset-x-0 top-1",
         button_previous: cn(
           "absolute left-0 h-7 w-7 flex items-center justify-center rounded-md",
-          "text-ground-400 hover:bg-ground-100 hover:text-ground-700 transition-colors",
+          "text-muted-foreground hover:bg-muted hover:text-muted-foreground transition-colors",
         ),
         button_next: cn(
           "absolute right-0 h-7 w-7 flex items-center justify-center rounded-md",
-          "text-ground-400 hover:bg-ground-100 hover:text-ground-700 transition-colors",
+          "text-muted-foreground hover:bg-muted hover:text-muted-foreground transition-colors",
         ),
         month_grid: "w-full border-collapse mt-1",
         weekdays: "flex",
-        weekday: "w-9 h-9 flex items-center justify-center label text-ground-400 font-normal",
+        weekday: "w-9 h-9 flex items-center justify-center label text-muted-foreground font-normal",
         week: "flex w-full mt-1",
         day: "relative p-0 text-center",
         day_button: cn(
           "h-9 w-9 flex items-center justify-center rounded-full body font-normal",
-          "text-ground-900 hover:bg-ground-100 transition-colors",
+          "text-foreground hover:bg-muted transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         ),
         selected:
-          "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:hover:bg-brand-primary/90",
+          "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:hover:bg-brand-primary/90",
         today: "[&>button]:font-semibold [&>button]:text-brand-primary",
-        outside: "opacity-40 [&>button]:text-ground-400",
+        outside: "opacity-40 [&>button]:text-muted-foreground",
         disabled: "opacity-30 [&>button]:cursor-not-allowed",
-        range_start: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
-        range_end: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
+        range_start: "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:rounded-full",
+        range_end: "[&>button]:bg-brand-primary [&>button]:text-background [&>button]:rounded-full",
         range_middle:
-          "[&>button]:bg-brand-primary/15 [&>button]:text-ground-900 [&>button]:rounded-none",
+          "[&>button]:bg-brand-primary/15 [&>button]:text-foreground [&>button]:rounded-none",
         hidden: "invisible",
         ...classNames,
       }}

package/src/components/card-heading.tsx

@@ -21,15 +21,15 @@ function CardHeading({ title, description, actions, children, className }: CardH
   return (
     <div
       className={cn(
-        "flex items-start justify-between gap-4 border-b border-ground-100 px-5 py-4",
+        "flex items-start justify-between gap-4 border-b border-border px-5 py-4",
         className,
       )}
     >
       <div className="flex min-w-0 items-center gap-3">
         {children}
         <div className="min-w-0">
-          <p className="body font-semibold text-ground-900 truncate">{title}</p>
-          {description && <p className="caption text-ground-400 mt-0.5">{description}</p>}
+          <p className="body font-semibold text-foreground truncate">{title}</p>
+          {description && <p className="caption text-muted-foreground mt-0.5">{description}</p>}
         </div>
       </div>
 

package/src/components/card.tsx

@@ -9,8 +9,8 @@ import { cn } from "../lib/utils";
 const cardVariants = cva("rounded-xl", {
   variants: {
     variant: {
-      default: "bg-white shadow-natural",
-      muted: "bg-ground-50",
+      default: "bg-card shadow-natural",
+      muted: "bg-muted",
       ghost: "bg-transparent",
     },
   },
@@ -54,7 +54,7 @@ const CardTitle = React.forwardRef<HTMLHeadingElement, React.ComponentProps<"h3"
     <h3
       ref={ref}
       data-slot="card-title"
-      className={cn("subheading text-ground-900", className)}
+      className={cn("subheading text-foreground", className)}
       {...props}
     />
   ),
@@ -66,7 +66,7 @@ const CardDescription = React.forwardRef<HTMLParagraphElement, React.ComponentPr
     <p
       ref={ref}
       data-slot="card-description"
-      className={cn("caption text-ground-500", className)}
+      className={cn("caption text-muted-foreground", className)}
       {...props}
     />
   ),

package/src/components/chart.tsx

@@ -6,12 +6,12 @@ import { cn } from "../lib/utils";
 import { tokens } from "../tokens/tokens";
 
 export const CHART_COLORS = {
-  primary: tokens.brand.primary,           // "#C100F1" — vivid purple
-  secondary: tokens.semantic.light.success, // "#CDEA19" — lime
-  tertiary: tokens.brand.secondary,         // "#FFF5BF" — pale lemon
-  muted: tokens.ground[400],                 // "#a8978a"
-  subtle: tokens.ground[200],                // "#e3dcd4"
-  dark: tokens.ground[900],                  // "#26181a"
+  primary: tokens.semantic.light.primary,
+  secondary: tokens.semantic.light.success,
+  tertiary: tokens.semantic.light.warning,
+  muted: tokens.semantic.light.mutedForeground,
+  subtle: tokens.semantic.light.border,
+  dark: tokens.semantic.light.foreground,
 };
 
 interface ChartContainerProps {
@@ -39,16 +39,16 @@ interface ChartTooltipProps extends Partial<TooltipContentProps<number, string>>
 function ChartTooltip({ active, payload, label, labelClassName }: ChartTooltipProps) {
   if (!active || !payload?.length) return null;
   return (
-    <div className="rounded-xl border border-ground-100 bg-white px-3 py-2 shadow-elevated">
-      {label && <p className={cn("mb-1 label text-ground-400", labelClassName)}>{label}</p>}
+    <div className="rounded-xl border border-border bg-card px-3 py-2 shadow-elevated">
+      {label && <p className={cn("mb-1 label text-muted-foreground", labelClassName)}>{label}</p>}
       {payload.map((entry, i) => (
         <div key={i} className="flex items-center gap-2">
           <span
             className="inline-block h-2 w-2 rounded-full"
             style={{ backgroundColor: entry.color }}
           />
-          <span className="caption text-ground-500">{entry.name}:</span>
-          <span className="caption font-medium text-ground-900">{entry.value}</span>
+          <span className="caption text-muted-foreground">{entry.name}:</span>
+          <span className="caption font-medium text-foreground">{entry.value}</span>
         </div>
       ))}
     </div>

package/src/components/checkbox.tsx

@@ -12,7 +12,7 @@ const CheckboxRoot = React.forwardRef<
   <Checkbox.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 rounded border border-ground-300 bg-white transition-colors",
+      "peer size-4 shrink-0 rounded border border-border bg-card 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=checked]:bg-brand-primary data-[state=checked]:border-brand-primary",
@@ -21,7 +21,7 @@ const CheckboxRoot = React.forwardRef<
     )}
     {...props}
   >
-    <Checkbox.Indicator className="flex items-center justify-center text-white">
+    <Checkbox.Indicator className="flex items-center justify-center text-background">
       {props.checked === "indeterminate" ? (
         <Minus size={11} strokeWidth={3} />
       ) : (

package/src/components/color-input.tsx

@@ -42,7 +42,7 @@ function ColorInput({
   return (
     <div
       className={cn(
-        "inline-flex h-8 items-stretch gap-0 rounded-md border border-ground-200 bg-white overflow-hidden",
+        "inline-flex h-8 items-stretch gap-0 rounded-md border border-border bg-card overflow-hidden",
         "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
         disabled && "opacity-50 pointer-events-none",
         className,
@@ -65,19 +65,19 @@ function ColorInput({
             commitHex("#" + (e.target as HTMLInputElement).value.replace(/^#/, ""));
         }}
         spellCheck={false}
-        className="w-[5.5rem] caption text-ground-900 px-2 bg-transparent border-l border-ground-100 focus:outline-none uppercase"
+        className="w-[5.5rem] caption text-foreground px-2 bg-transparent border-l border-border focus:outline-none uppercase"
       />
       {typeof opacity === "number" && onOpacityChange && (
-        <div className="relative flex items-center border-l border-ground-100">
+        <div className="relative flex items-center border-l border-border">
           <input
             type="number"
             min={0}
             max={100}
             value={Math.round(opacity)}
             onChange={(e) => onOpacityChange(Number(e.target.value))}
-            className="w-12 caption text-ground-900 px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            className="w-12 caption text-foreground px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
           />
-          <span aria-hidden className="caption-xs text-ground-400 pr-2">
+          <span aria-hidden className="caption-xs text-muted-foreground pr-2">
             %
           </span>
         </div>
@@ -86,5 +86,7 @@ function ColorInput({
   );
 }
 
+ColorInput.displayName = "ColorInput";
+
 export { ColorInput };
 export type { ColorInputProps };

package/src/components/color-picker.tsx

@@ -45,8 +45,8 @@ function ColorPicker({
           disabled={disabled}
           aria-label={ariaLabel}
           className={cn(
-            "inline-flex h-8 w-8 items-center justify-center rounded-md border border-ground-200 bg-white",
-            "transition-colors hover:border-ground-300",
+            "inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-card",
+            "transition-colors hover:border-border",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
             "disabled:cursor-not-allowed disabled:opacity-50",
             className,
@@ -63,7 +63,7 @@ function ColorPicker({
         <Popover.Content
           align="start"
           sideOffset={6}
-          className="z-50 w-56 rounded-xl bg-white p-3 shadow-natural outline-none"
+          className="z-50 w-56 rounded-xl bg-card p-3 shadow-natural outline-none"
         >
           <input
             type="color"
@@ -72,10 +72,10 @@ function ColorPicker({
               setHex(e.target.value);
               onChange(e.target.value);
             }}
-            className="h-10 w-full cursor-pointer rounded-md border border-ground-200 bg-white p-0.5"
+            className="h-10 w-full cursor-pointer rounded-md border border-border bg-card p-0.5"
           />
           <div className="mt-2 flex items-center gap-2">
-            <span className="caption text-ground-500">Hex</span>
+            <span className="caption text-muted-foreground">Hex</span>
             <input
               type="text"
               value={hex}
@@ -84,7 +84,7 @@ function ColorPicker({
               onKeyDown={(e) => {
                 if (e.key === "Enter") commit((e.target as HTMLInputElement).value);
               }}
-              className="flex-1 h-7 rounded-md border border-ground-200 bg-white px-2 caption text-ground-900 focus:outline-none focus:border-brand-primary"
+              className="flex-1 h-7 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
             />
           </div>
           {presets && presets.length > 0 && (
@@ -107,5 +107,7 @@ function ColorPicker({
   );
 }
 
+ColorPicker.displayName = "ColorPicker";
+
 export { ColorPicker };
 export type { ColorPickerProps };

package/src/components/combobox.tsx

@@ -33,8 +33,10 @@ function Combobox({
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(-1);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const listboxId = React.useId();
 
   const selectedOption = options.find((o) => o.value === value);
 
@@ -47,6 +49,11 @@ function Combobox({
             o.description?.toLowerCase().includes(query.toLowerCase()),
         );
 
+  // Reset active index when the filtered list changes
+  React.useEffect(() => {
+    setActiveIndex(-1);
+  }, [filtered.length, open]);
+
   // Close on outside click
   React.useEffect(() => {
     function onMouseDown(e: MouseEvent) {
@@ -59,25 +66,45 @@ function Combobox({
     return () => document.removeEventListener("mousedown", onMouseDown);
   }, []);
 
-  // Close on Escape
-  React.useEffect(() => {
-    if (!open) return;
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        setOpen(false);
-        setQuery("");
-      }
+  function closeDropdown() {
+    setOpen(false);
+    setQuery("");
+    setActiveIndex(-1);
+  }
+
+  function selectOption(opt: ComboboxOption) {
+    onValueChange?.(opt.value);
+    closeDropdown();
+  }
+
+  function handleInputKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Escape") {
+      closeDropdown();
+      return;
     }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open]);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) { setOpen(true); return; }
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (!open) { setOpen(true); return; }
+      const target = activeIndex >= 0 ? filtered[activeIndex] : filtered[0];
+      if (target) selectOption(target);
+    } else if (e.key === "Tab") {
+      closeDropdown();
+    }
+  }
 
   return (
     <div ref={containerRef} className={cn("relative", className)}>
       {/* Trigger */}
       <div className="relative flex items-center">
         {selectedOption?.avatar && !open && (
-          <div className="pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-ground-200 caption-xs font-semibold text-ground-700 shrink-0">
+          <div className="pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-muted caption-xs font-semibold text-muted-foreground shrink-0">
             {selectedOption.avatar}
           </div>
         )}
@@ -92,10 +119,14 @@ function Combobox({
           type="text"
           role="combobox"
           aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-controls={open ? listboxId : undefined}
+          aria-activedescendant={open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined}
+          aria-autocomplete="list"
           className={cn(
-            "flex h-9 w-full rounded-lg border border-ground-200 bg-white pr-8 body text-ground-900",
-            "placeholder:text-ground-400",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/30 focus-visible:border-ground-400",
+            "flex h-9 w-full rounded-lg border border-border bg-card pr-8 body text-foreground",
+            "placeholder:text-muted-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:border-border",
             "disabled:cursor-not-allowed disabled:opacity-50",
             selectedOption?.avatar && !open
               ? "pl-8"
@@ -113,15 +144,16 @@ function Combobox({
             setOpen(true);
             setQuery("");
           }}
+          onKeyDown={handleInputKeyDown}
         />
         <button
           type="button"
           tabIndex={-1}
-          className="absolute inset-y-0 right-0 flex items-center px-2 text-ground-400 hover:text-ground-700 transition-colors"
+          aria-label={open ? "Close" : "Open"}
+          className="absolute inset-y-0 right-0 flex items-center px-2 text-muted-foreground hover:text-muted-foreground transition-colors"
           onClick={() => {
             if (open) {
-              setOpen(false);
-              setQuery("");
+              closeDropdown();
             } else {
               setOpen(true);
               inputRef.current?.focus();
@@ -134,37 +166,38 @@ function Combobox({
 
       {/* Dropdown */}
       {open && (
-        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-ground-200 bg-white shadow-elevated">
-          <ul role="listbox" className="max-h-60 overflow-auto py-1">
+        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated">
+          <ul id={listboxId} role="listbox" className="max-h-60 overflow-auto py-1">
             {filtered.length === 0 ? (
-              <li className="px-3 py-2 body text-ground-400">{emptyText}</li>
+              <li className="px-3 py-2 body text-muted-foreground">{emptyText}</li>
             ) : (
-              filtered.map((option) => {
+              filtered.map((option, idx) => {
                 const isSelected = option.value === value;
+                const isActive = idx === activeIndex;
                 return (
                   <li
                     key={option.value}
+                    id={`${listboxId}-option-${idx}`}
                     role="option"
                     aria-selected={isSelected}
                     className={cn(
                       "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
                       isSelected
-                        ? "bg-brand-primary text-white"
-                        : "text-ground-900 hover:bg-ground-50",
+                        ? "bg-brand-primary text-background"
+                        : isActive
+                          ? "bg-muted text-foreground"
+                          : "text-foreground hover:bg-muted",
                     )}
                     onMouseDown={(e) => e.preventDefault()}
-                    onClick={() => {
-                      onValueChange?.(option.value);
-                      setQuery("");
-                      setOpen(false);
-                    }}
+                    onMouseEnter={() => setActiveIndex(idx)}
+                    onClick={() => selectOption(option)}
                   >
                     {/* Avatar */}
                     {option.avatar && (
                       <div
                         className={cn(
                           "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
-                          isSelected ? "bg-white/20 text-white" : "bg-ground-200 text-ground-700",
+                          isSelected ? "bg-card/20 text-background" : "bg-muted text-muted-foreground",
                         )}
                       >
                         {option.avatar}
@@ -185,7 +218,7 @@ function Combobox({
                         <p
                           className={cn(
                             "caption truncate",
-                            isSelected ? "text-white/70" : "text-ground-400",
+                            isSelected ? "text-background/70" : "text-muted-foreground",
                           )}
                         >
                           {option.description}
@@ -204,4 +237,6 @@ function Combobox({
   );
 }
 
+Combobox.displayName = "Combobox";
+
 export { Combobox };

package/src/components/command-palette.tsx

@@ -73,12 +73,12 @@ function CommandPalette({
     <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
       <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-xl">
         {/* Search input */}
-        <div className="flex items-center gap-3 border-b border-ground-100 px-4">
-          <Search size={16} className="shrink-0 text-ground-400" />
+        <div className="flex items-center gap-3 border-b border-border px-4">
+          <Search size={16} className="shrink-0 text-muted-foreground" />
           <input
             ref={inputRef}
             type="text"
-            className="h-12 flex-1 bg-transparent body text-ground-900 placeholder:text-ground-400 focus:outline-none"
+            className="h-12 flex-1 bg-transparent body text-foreground placeholder:text-muted-foreground focus:outline-none"
             placeholder={placeholder}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -88,7 +88,7 @@ function CommandPalette({
             }}
           />
           <kbd className="hidden items-center gap-0.5 sm:flex">
-            <span className="caption-xs font-medium text-ground-400 rounded border border-ground-200 px-1.5 py-0.5">
+            <span className="caption-xs font-medium text-muted-foreground rounded border border-border px-1.5 py-0.5">
               esc
             </span>
           </kbd>
@@ -97,31 +97,31 @@ function CommandPalette({
         {/* Results */}
         <div className="max-h-80 overflow-y-auto">
           {filtered.length === 0 ? (
-            <p className="px-4 py-8 text-center body text-ground-400">{emptyText}</p>
+            <p className="px-4 py-8 text-center body text-muted-foreground">{emptyText}</p>
           ) : (
             <ul role="list" className="py-2">
               {categories.map((cat) => (
                 <li key={cat}>
-                  {cat && <p className="label px-4 py-2 text-ground-400">{cat}</p>}
+                  {cat && <p className="label px-4 py-2 text-muted-foreground">{cat}</p>}
                   {grouped[cat].map((item, i) => (
                     <button
                       key={item.id ?? i}
                       type="button"
-                      className="flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-ground-50 focus-visible:bg-ground-50 focus-visible:outline-none"
+                      className="flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none"
                       onClick={() => handleSelect(item)}
                     >
                       {item.icon && (
-                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-ground-200 bg-white text-ground-500">
+                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-muted-foreground">
                           {item.icon}
                         </span>
                       )}
                       <div className="min-w-0 flex-1">
-                        <p className="font-medium text-ground-900 truncate">{item.label}</p>
+                        <p className="font-medium text-foreground truncate">{item.label}</p>
                         {item.description && (
-                          <p className="caption text-ground-400 truncate">{item.description}</p>
+                          <p className="caption text-muted-foreground truncate">{item.description}</p>
                         )}
                       </div>
-                      <ArrowRight size={13} className="shrink-0 text-ground-300" />
+                      <ArrowRight size={13} className="shrink-0 text-muted-foreground" />
                     </button>
                   ))}
                 </li>
@@ -134,4 +134,6 @@ function CommandPalette({
   );
 }
 
+CommandPalette.displayName = "CommandPalette";
+
 export { CommandPalette };

package/src/components/command.tsx

@@ -44,7 +44,7 @@ function Command({ className, children, onSelect, ...props }: CommandProps) {
       <CommandVisibleCtx.Provider value={visibleCount}>
         <div
           className={cn(
-            "flex flex-col overflow-hidden rounded-xl border border-ground-200 bg-white",
+            "flex flex-col overflow-hidden rounded-xl border border-border bg-card",
             className,
           )}
           {...props}
@@ -62,8 +62,8 @@ const CommandInput = React.forwardRef<
 >(({ className, ...props }, ref) => {
   const { query, setQuery } = React.useContext(CommandCtx);
   return (
-    <div className="flex items-center gap-2 border-b border-ground-100 px-3">
-      <Search size={14} className="shrink-0 text-ground-400" />
+    <div className="flex items-center gap-2 border-b border-border px-3">
+      <Search size={14} className="shrink-0 text-muted-foreground" />
       <input
         ref={ref}
         type="text"
@@ -71,8 +71,8 @@ const CommandInput = React.forwardRef<
         autoCorrect="off"
         spellCheck={false}
         className={cn(
-          "flex h-10 w-full bg-transparent body text-ground-900",
-          "placeholder:text-ground-400 focus:outline-none",
+          "flex h-10 w-full bg-transparent body text-foreground",
+          "placeholder:text-muted-foreground focus:outline-none",
           className,
         )}
         value={query}
@@ -135,7 +135,7 @@ const CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLD
     return (
       <div
         ref={ref}
-        className={cn("py-6 text-center caption text-ground-400", className)}
+        className={cn("py-6 text-center caption text-muted-foreground", className)}
         {...props}
       >
         {children}
@@ -152,7 +152,7 @@ interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
   ({ className, heading, children, ...props }, ref) => (
     <div ref={ref} role="group" className={cn("py-1", className)} {...props}>
-      {heading && <p className="px-3 pb-1 pt-0.5 label text-ground-400">{heading}</p>}
+      {heading && <p className="px-3 pb-1 pt-0.5 label text-muted-foreground">{heading}</p>}
       {children}
     </div>
   ),
@@ -197,9 +197,9 @@ const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
         tabIndex={disabled ? undefined : 0}
         className={cn(
           "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5 mx-1",
-          "body text-ground-700 outline-none transition-colors",
-          "hover:bg-ground-50 hover:text-ground-900",
-          "focus:bg-ground-50 focus:text-ground-900",
+          "body text-muted-foreground outline-none transition-colors",
+          "hover:bg-muted hover:text-foreground",
+          "focus:bg-muted focus:text-foreground",
           disabled && "pointer-events-none opacity-40",
           className,
         )}
@@ -221,7 +221,7 @@ CommandItem.displayName = "CommandItem";
 
 const CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("my-1 h-px bg-ground-100", className)} {...props} />
+    <div ref={ref} className={cn("my-1 h-px bg-muted", className)} {...props} />
   ),
 );
 CommandSeparator.displayName = "CommandSeparator";
@@ -229,13 +229,15 @@ CommandSeparator.displayName = "CommandSeparator";
 function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ml-auto caption text-ground-300 tracking-widest font-medium", className)}
+      className={cn("ml-auto caption text-muted-foreground tracking-widest font-medium", className)}
       {...props}
     />
   );
 }
 CommandShortcut.displayName = "CommandShortcut";
 
+Command.displayName = "Command";
+
 export {
   Command,
   CommandInput,