@hilum/ui 0.1.1 → 0.1.3

package/src/components/field.tsx

@@ -11,6 +11,7 @@ interface FieldProps {
   cornerHint?: string;
   className?: string;
   children: React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
 function Field({
@@ -22,24 +23,30 @@ function Field({
   cornerHint,
   className,
   children,
+  ref,
 }: FieldProps) {
+  // Predictable ID for the description/error paragraph so consumers can wire
+  // aria-describedby on the child input: aria-describedby={`${id}-description`}
+  const descriptionId = htmlFor ? `${htmlFor}-description` : undefined;
+
   return (
-    <div className={cn("flex flex-col gap-1.5", className)}>
+    <div ref={ref} className={cn("flex flex-col gap-1.5", className)}>
       <div className="flex items-center justify-between gap-2">
-        <Label htmlFor={htmlFor}>
+        <Label htmlFor={htmlFor} aria-required={required}>
           {label}
-          {required && <span className="ml-0.5 text-red-600">*</span>}
+          {required && <span className="ml-0.5 text-red-600" aria-hidden="true">*</span>}
         </Label>
-        {cornerHint && <span className="caption text-taupe-400">{cornerHint}</span>}
+        {cornerHint && <span className="caption text-ground-400">{cornerHint}</span>}
       </div>
       {children}
       {error ? (
-        <p className="caption text-red-600">{error}</p>
+        <p id={descriptionId} role="alert" className="caption text-red-600">{error}</p>
       ) : hint ? (
-        <p className="caption text-taupe-400">{hint}</p>
+        <p id={descriptionId} className="caption text-ground-400">{hint}</p>
       ) : null}
     </div>
   );
 }
+Field.displayName = "Field";
 
 export { Field };

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-taupe-100 bg-white p-4 shadow-natural transition-shadow",
+        "flex h-full flex-col gap-1 rounded-xl border border-ground-100 bg-white p-4 shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className,
       )}
     >
       {accent && <div className="mb-2">{accent}</div>}
-      <p className="body font-semibold text-taupe-900">{title}</p>
-      {description && <p className="caption text-taupe-400">{description}</p>}
+      <p className="body font-semibold text-ground-900">{title}</p>
+      {description && <p className="caption text-ground-400">{description}</p>}
       {(meta || trailing) && (
         <div className="mt-auto flex items-center justify-between pt-3">
-          {meta && <span className="caption text-taupe-400">{meta}</span>}
-          {trailing && <span className="caption text-taupe-400">{trailing}</span>}
+          {meta && <span className="caption text-ground-400">{meta}</span>}
+          {trailing && <span className="caption text-ground-400">{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-taupe-400/40 rounded-xl"
+          className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl"
         >
           {inner}
         </a>
@@ -109,7 +109,7 @@ function GridListAccentCard({
   title,
   meta,
   href,
-  accentClass = "bg-taupe-900",
+  accentClass = "bg-ground-900",
   initials,
   trailing,
   className,
@@ -117,7 +117,7 @@ function GridListAccentCard({
   const inner = (
     <div
       className={cn(
-        "flex overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-natural transition-shadow",
+        "flex overflow-hidden rounded-xl border border-ground-100 bg-white shadow-natural transition-shadow",
         href && "hover:shadow-elevated",
         className,
       )}
@@ -130,10 +130,10 @@ function GridListAccentCard({
       >
         {initials}
       </div>
-      <div className="flex flex-1 items-center justify-between truncate border-l border-taupe-100 px-4 py-3">
+      <div className="flex flex-1 items-center justify-between truncate border-l border-ground-100 px-4 py-3">
         <div className="min-w-0">
-          <p className="body font-semibold text-taupe-900 truncate">{title}</p>
-          {meta && <p className="caption text-taupe-400">{meta}</p>}
+          <p className="body font-semibold text-ground-900 truncate">{title}</p>
+          {meta && <p className="caption text-ground-400">{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-taupe-400/40 rounded-xl"
+          className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 rounded-xl"
         >
           {inner}
         </a>

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-taupe-100 bg-white p-4 shadow-elevated outline-none",
+        "z-50 w-64 rounded-xl border border-ground-100 bg-white 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-taupe-900 placeholder:text-taupe-400",
+      "flex h-9 w-full border bg-white body text-ground-900 placeholder:text-ground-400",
       "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-taupe-200 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+        : "border-ground-200 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-taupe-50 px-3 body text-taupe-500 select-none",
-              error ? "border-red-400" : "border-taupe-200",
+              "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",
               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-taupe-400">
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-ground-400">
               {leadingIcon}
             </div>
           )}
@@ -104,7 +104,7 @@ const InputGroup = React.forwardRef<HTMLInputElement, InputGroupProps>(
               {error ? (
                 <AlertCircle size={15} className="text-red-500" />
               ) : (
-                <span className="text-taupe-400">{trailingIcon}</span>
+                <span className="text-ground-400">{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-taupe-50 px-3 body text-taupe-500 select-none",
-              error ? "border-red-400" : "border-taupe-200",
+              "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",
               pill ? "rounded-r-full" : "rounded-r-lg",
             )}
           >

package/src/components/input-number.tsx

@@ -81,7 +81,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     return (
       <div
         className={cn(
-          "inline-flex h-8 items-stretch rounded-md border border-taupe-200 bg-white overflow-hidden",
+          "inline-flex h-8 items-stretch rounded-md border border-ground-200 bg-white overflow-hidden",
           "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
           disabled && "opacity-50 pointer-events-none",
           className,
@@ -97,34 +97,34 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
           onBlur={(e) => commit(e.target.value)}
           onKeyDown={onKeyDown}
           disabled={disabled}
-          className="w-full caption text-taupe-900 px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right"
+          className="w-full caption text-ground-900 px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right"
           {...rest}
         />
         {unit && (
-          <span aria-hidden className="caption-xs text-taupe-400 self-center pr-1.5 select-none">
+          <span aria-hidden className="caption-xs text-ground-400 self-center pr-1.5 select-none">
             {unit}
           </span>
         )}
         {!hideSteppers && (
-          <div className="flex flex-col border-l border-taupe-100">
+          <div className="flex flex-col border-l border-ground-100">
             <button
               type="button"
               tabIndex={-1}
               onClick={() => bump(step)}
               aria-label="Increment"
-              className="flex-1 px-1 hover:bg-taupe-50 active:bg-taupe-100 transition-colors text-taupe-500"
+              className="flex-1 px-1 hover:bg-ground-50 active:bg-ground-100 transition-colors text-ground-500"
             >
               <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor">
                 <path d="M0 5 L4 0 L8 5 Z" />
               </svg>
             </button>
-            <div className="border-t border-taupe-100" />
+            <div className="border-t border-ground-100" />
             <button
               type="button"
               tabIndex={-1}
               onClick={() => bump(-step)}
               aria-label="Decrement"
-              className="flex-1 px-1 hover:bg-taupe-50 active:bg-taupe-100 transition-colors text-taupe-500"
+              className="flex-1 px-1 hover:bg-ground-50 active:bg-ground-100 transition-colors text-ground-500"
             >
               <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor">
                 <path d="M0 0 L4 5 L8 0 Z" />

package/src/components/input-otp.tsx

@@ -37,7 +37,7 @@ const InputOTPSlot = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex h-12 w-11 items-center justify-center",
-        "border-y border-r border-taupe-200 body font-medium text-taupe-900",
+        "border-y border-r border-ground-200 body font-medium text-ground-900",
         "first:rounded-l-xl first:border-l last:rounded-r-xl",
         "transition-all",
         isActive && "z-10 ring-2 ring-brand-primary/40 border-brand-primary",
@@ -48,7 +48,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-5 w-px animate-caret-blink bg-taupe-900 duration-1000" />
+          <div className="h-5 w-px animate-caret-blink bg-ground-900 duration-1000" />
         </div>
       )}
     </div>
@@ -59,7 +59,7 @@ InputOTPSlot.displayName = "InputOTPSlot";
 const InputOTPSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ ...props }, ref) => (
     <div ref={ref} role="separator" {...props}>
-      <Minus size={14} className="text-taupe-300" />
+      <Minus size={14} className="text-ground-300" />
     </div>
   ),
 );

package/src/components/input.tsx

@@ -7,17 +7,18 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-9 w-full rounded-md border border-taupe-200 bg-white px-3 py-1",
-        "body text-taupe-900 placeholder:text-taupe-400",
+        "flex h-9 w-full rounded-md border border-ground-200 bg-white px-3 py-1",
+        "body text-ground-900 placeholder:text-ground-400",
         "transition-colors duration-150",
         "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 disabled:bg-taupe-50",
-        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-taupe-900",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-ground-900",
         className,
       )}
       {...props}
     />
   );
 }
+Input.displayName = "Input";
 
 export { Input };

package/src/components/kbd.tsx

@@ -6,7 +6,7 @@ const Kbd = React.forwardRef<HTMLElement, React.ComponentProps<"kbd">>(
     <kbd
       ref={ref}
       className={cn(
-        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-taupe-200 bg-taupe-50 px-1.5 font-mono caption-xs font-medium text-taupe-500",
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-ground-200 bg-ground-50 px-1.5 font-mono caption-xs font-medium text-ground-500",
         className,
       )}
       {...props}

package/src/components/label.tsx

@@ -11,7 +11,7 @@ const Label = React.forwardRef<
   <LabelPrimitive.Root
     ref={ref}
     className={cn(
-      "body font-medium leading-none text-taupe-700",
+      "body font-medium leading-none text-ground-700",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
       className,
     )}

package/src/components/menubar.tsx

@@ -12,7 +12,7 @@ const MenubarRoot = React.forwardRef<
   <Menubar.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center gap-0.5 rounded-lg border border-taupe-100 bg-white px-1",
+      "flex h-9 items-center gap-0.5 rounded-lg border border-ground-100 bg-white px-1",
       className,
     )}
     {...props}
@@ -35,10 +35,10 @@ const MenubarTrigger = React.forwardRef<
   <Menubar.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-taupe-700 select-none outline-none",
-      "hover:bg-taupe-50",
-      "data-[state=open]:bg-taupe-100 data-[state=open]:text-taupe-900",
-      "focus:bg-taupe-50",
+      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-ground-700 select-none outline-none",
+      "hover:bg-ground-50",
+      "data-[state=open]:bg-ground-100 data-[state=open]:text-ground-900",
+      "focus:bg-ground-50",
       className,
     )}
     {...props}
@@ -81,8 +81,8 @@ const MenubarItem = 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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
@@ -95,22 +95,21 @@ MenubarItem.displayName = "MenubarItem";
 const MenubarCheckboxItem = React.forwardRef<
   React.ComponentRef<typeof Menubar.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof Menubar.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <Menubar.CheckboxItem
     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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
-    checked={checked}
     {...props}
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <Menubar.ItemIndicator>
-        <Check size={13} className="text-taupe-900" />
+        <Check size={13} className="text-ground-900" />
       </Menubar.ItemIndicator>
     </span>
     {children}
@@ -126,8 +125,8 @@ const MenubarRadioItem = 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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -135,7 +134,7 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <Menubar.ItemIndicator>
-        <Circle size={8} className="fill-taupe-900 text-taupe-900" />
+        <Circle size={8} className="fill-ground-900 text-ground-900" />
       </Menubar.ItemIndicator>
     </span>
     {children}
@@ -151,7 +150,7 @@ const MenubarLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <Menubar.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1 label text-ground-400", inset && "pl-8", className)}
     {...props}
   />
 ));
@@ -163,7 +162,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Menubar.Separator
     ref={ref}
-    className={cn("mx-1 my-1 h-px bg-taupe-100", className)}
+    className={cn("mx-1 my-1 h-px bg-ground-100", className)}
     {...props}
   />
 ));
@@ -179,15 +178,15 @@ const MenubarSubTrigger = 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-taupe-700 outline-none transition-colors",
-      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      "body text-ground-700 outline-none transition-colors",
+      "focus:bg-ground-50 focus:text-ground-900 data-[state=open]:bg-ground-50",
       inset && "pl-8",
       className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight size={14} className="ml-auto text-taupe-400" />
+    <ChevronRight size={14} className="ml-auto text-ground-400" />
   </Menubar.SubTrigger>
 ));
 MenubarSubTrigger.displayName = "MenubarSubTrigger";
@@ -199,7 +198,7 @@ const MenubarSubContent = React.forwardRef<
   <Menubar.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-ground-100 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",
@@ -212,7 +211,7 @@ const MenubarSubContent = React.forwardRef<
 MenubarSubContent.displayName = "MenubarSubContent";
 
 function MenubarShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cn("ml-auto caption text-taupe-400", className)} {...props} />;
+  return <span className={cn("ml-auto caption text-ground-400", className)} {...props} />;
 }
 MenubarShortcut.displayName = "MenubarShortcut";
 

package/src/components/native-select.tsx

@@ -10,9 +10,9 @@ const NativeSelect = React.forwardRef<
     <select
       ref={ref}
       className={cn(
-        "peer h-9 w-full appearance-none rounded-lg border border-taupe-200 bg-white pl-3 pr-8",
-        "body text-taupe-900",
-        "focus:outline-none focus:ring-2 focus:ring-taupe-400/30 focus:border-taupe-400",
+        "peer h-9 w-full appearance-none rounded-lg border border-ground-200 bg-white pl-3 pr-8",
+        "body text-ground-900",
+        "focus:outline-none focus:ring-2 focus:ring-ground-400/30 focus:border-ground-400",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "aria-[invalid=true]:border-red-500 aria-[invalid=true]:focus:ring-red-500/20",
         className,
@@ -23,7 +23,7 @@ const NativeSelect = React.forwardRef<
     </select>
     <ChevronDown
       size={14}
-      className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-taupe-400 peer-disabled:opacity-50"
+      className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ground-400 peer-disabled:opacity-50"
     />
   </div>
 ));

package/src/components/navigation-menu.tsx

@@ -41,9 +41,9 @@ const NavigationMenuTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
-      "body font-medium text-taupe-700",
-      "hover:bg-taupe-100 hover:text-taupe-900",
-      "data-[active]:bg-taupe-100 data-[state=open]:bg-taupe-100",
+      "body font-medium text-ground-700",
+      "hover:bg-ground-100 hover:text-ground-900",
+      "data-[active]:bg-ground-100 data-[state=open]:bg-ground-100",
       "outline-none transition-colors",
       className,
     )}
@@ -86,8 +86,8 @@ const NavigationMenuLink = React.forwardRef<
   <NavigationMenu.Link
     ref={ref}
     className={cn(
-      "block select-none rounded-md px-3 py-2 body text-taupe-700",
-      "hover:bg-taupe-50 hover:text-taupe-900",
+      "block select-none rounded-md px-3 py-2 body text-ground-700",
+      "hover:bg-ground-50 hover:text-ground-900",
       "outline-none transition-colors",
       className,
     )}
@@ -104,7 +104,7 @@ const NavigationMenuViewport = React.forwardRef<
     <NavigationMenu.Viewport
       ref={ref}
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-elevated",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-ground-100 bg-white shadow-elevated",
         "md:w-[var(--radix-navigation-menu-viewport-width)]",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
@@ -130,7 +130,7 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-taupe-100 shadow-elevated" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-ground-100 shadow-elevated" />
   </NavigationMenu.Indicator>
 ));
 NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
@@ -138,9 +138,9 @@ NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
 function navigationMenuTriggerStyle() {
   return cn(
     "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
-    "body font-medium text-taupe-700",
-    "hover:bg-taupe-100 hover:text-taupe-900",
-    "data-[active]:bg-taupe-100 data-[state=open]:bg-taupe-100",
+    "body font-medium text-ground-700",
+    "hover:bg-ground-100 hover:text-ground-900",
+    "data-[active]:bg-ground-100 data-[state=open]:bg-ground-100",
     "outline-none transition-colors",
   );
 }

package/src/components/notification.tsx

@@ -19,17 +19,17 @@ interface NotificationProps {
 }
 
 const variantConfig = {
-  default: { icon: null, iconClass: "text-taupe-400" },
+  default: { icon: null, iconClass: "text-ground-400" },
   success: {
     icon: CheckCircle,
-    iconClass: "bg-brand-secondary/25 text-taupe-700 rounded-full p-1",
+    iconClass: "bg-brand-secondary/25 text-ground-700 rounded-full p-1",
   },
   error: { icon: AlertCircle, iconClass: "text-red-500" },
   warning: {
     icon: AlertTriangle,
-    iconClass: "bg-brand-secondary/80 text-taupe-700 rounded-full p-1",
+    iconClass: "bg-brand-secondary/80 text-ground-700 rounded-full p-1",
   },
-  info: { icon: Info, iconClass: "text-taupe-400" },
+  info: { icon: Info, iconClass: "text-ground-400" },
 };
 
 function Notification({
@@ -49,7 +49,7 @@ function Notification({
   return (
     <div
       className={cn(
-        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-elevated",
+        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-ground-100 bg-white shadow-elevated",
         className,
       )}
     >
@@ -62,8 +62,8 @@ function Notification({
 
           {/* Body */}
           <div className="min-w-0 flex-1">
-            <p className="body font-semibold text-taupe-900">{title}</p>
-            {description && <p className="mt-0.5 body text-taupe-500">{description}</p>}
+            <p className="body font-semibold text-ground-900">{title}</p>
+            {description && <p className="mt-0.5 body text-ground-500">{description}</p>}
 
             {/* Actions */}
             {actions && actions.length > 0 && (
@@ -76,8 +76,8 @@ function Notification({
                     className={cn(
                       "body font-semibold transition-colors",
                       action.variant === "ghost"
-                        ? "text-taupe-400 hover:text-taupe-700"
-                        : "text-taupe-900 hover:text-taupe-600",
+                        ? "text-ground-400 hover:text-ground-700"
+                        : "text-ground-900 hover:text-ground-600",
                     )}
                   >
                     {action.label}
@@ -93,7 +93,7 @@ function Notification({
               <button
                 type="button"
                 onClick={onClose}
-                className="rounded-md text-taupe-400 hover:text-taupe-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40"
+                className="rounded-md text-ground-400 hover:text-ground-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40"
               >
                 <span className="sr-only">Close</span>
                 <X size={16} />

package/src/components/page-heading.tsx

@@ -42,22 +42,22 @@ function PageHeading({
   className,
 }: PageHeadingProps) {
   return (
-    <div className={cn("border-b border-taupe-100 pb-6", className)}>
+    <div className={cn("border-b border-ground-100 pb-6", className)}>
       {/* Breadcrumbs */}
       {breadcrumbs && breadcrumbs.length > 0 && (
         <nav className="mb-3 flex items-center gap-1.5" aria-label="Breadcrumb">
           {breadcrumbs.map((crumb, i) => (
             <React.Fragment key={i}>
-              {i > 0 && <ChevronRight size={12} className="text-taupe-300 shrink-0" />}
+              {i > 0 && <ChevronRight size={12} className="text-ground-300 shrink-0" />}
               {crumb.href ? (
                 <a
                   href={crumb.href}
-                  className="caption text-taupe-400 hover:text-taupe-700 transition-colors"
+                  className="caption text-ground-400 hover:text-ground-700 transition-colors"
                 >
                   {crumb.label}
                 </a>
               ) : (
-                <span className="caption font-semibold text-taupe-700">{crumb.label}</span>
+                <span className="caption font-semibold text-ground-700">{crumb.label}</span>
               )}
             </React.Fragment>
           ))}
@@ -68,7 +68,7 @@ function PageHeading({
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-3">
-            <h1 className="display text-taupe-900 truncate">{title}</h1>
+            <h1 className="display text-ground-900 truncate">{title}</h1>
             {badge &&
               (typeof badge === "string" ? (
                 <Badge variant="secondary">{badge}</Badge>
@@ -76,14 +76,14 @@ function PageHeading({
                 <Badge variant={badge.variant ?? "secondary"}>{badge.label}</Badge>
               ))}
           </div>
-          {description && <p className="mt-1.5 body text-taupe-400 max-w-2xl">{description}</p>}
+          {description && <p className="mt-1.5 body text-ground-400 max-w-2xl">{description}</p>}
 
           {/* Meta */}
           {meta && meta.length > 0 && (
             <div className="mt-3 flex flex-wrap items-center gap-4">
               {meta.map((m, i) => (
-                <div key={i} className="flex items-center gap-1.5 caption text-taupe-400">
-                  {m.icon && <span className="text-taupe-400">{m.icon}</span>}
+                <div key={i} className="flex items-center gap-1.5 caption text-ground-400">
+                  {m.icon && <span className="text-ground-400">{m.icon}</span>}
                   <span>{m.text}</span>
                 </div>
               ))}

package/src/components/pagination.tsx

@@ -70,7 +70,7 @@ PaginationNext.displayName = "PaginationNext";
 const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    className={cn("flex size-8 items-center justify-center text-taupe-400", className)}
+    className={cn("flex size-8 items-center justify-center text-ground-400", className)}
     {...props}
   >
     <MoreHorizontal size={14} />