@hilum/ui 0.1.2 → 0.1.3

package/src/components/radio-card.tsx

@@ -47,7 +47,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
               "disabled:cursor-not-allowed disabled:opacity-50",
               isSelected
                 ? "border-brand-primary bg-white shadow-natural"
-                : "border-taupe-200 bg-white hover:border-taupe-400",
+                : "border-ground-200 bg-white hover:border-ground-400",
             )}
           >
             {/* Selected ring overlay */}
@@ -60,17 +60,17 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
 
             <div className="flex items-start justify-between gap-2">
               <div className="min-w-0 flex-1">
-                {option.icon && <div className="mb-2 text-taupe-500">{option.icon}</div>}
+                {option.icon && <div className="mb-2 text-ground-500">{option.icon}</div>}
                 <p
                   className={cn(
                     "body font-semibold",
-                    isSelected ? "text-taupe-900" : "text-taupe-800",
+                    isSelected ? "text-ground-900" : "text-ground-800",
                   )}
                 >
                   {option.label}
                 </p>
                 {option.description && (
-                  <p className="mt-0.5 caption text-taupe-400">{option.description}</p>
+                  <p className="mt-0.5 caption text-ground-400">{option.description}</p>
                 )}
               </div>
               <div
@@ -78,7 +78,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
                   "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
                   isSelected
                     ? "border-brand-primary bg-brand-primary"
-                    : "border-taupe-300 bg-white",
+                    : "border-ground-300 bg-white",
                 )}
               >
                 {isSelected && <Check size={10} className="text-white" strokeWidth={3} />}
@@ -89,7 +89,7 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }: R
               <p
                 className={cn(
                   "caption font-semibold mt-2",
-                  isSelected ? "text-taupe-900" : "text-taupe-400",
+                  isSelected ? "text-ground-900" : "text-ground-400",
                 )}
               >
                 {option.meta}

package/src/components/radio-group.tsx

@@ -19,11 +19,11 @@ const RadioGroupItem = React.forwardRef<
   <RadioGroup.Item
     ref={ref}
     className={cn(
-      "aspect-square size-4 rounded-full border border-taupe-300 text-taupe-900",
+      "aspect-square size-4 rounded-full border border-ground-300 text-ground-900",
       "shadow-none transition-colors",
-      "focus:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/20",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/20",
       "disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-taupe-900 data-[state=checked]:border-taupe-900",
+      "data-[state=checked]:bg-ground-900 data-[state=checked]:border-ground-900",
       className,
     )}
     {...props}

package/src/components/resizable.tsx

@@ -46,7 +46,7 @@ function ResizableHandle({ className, withHandle = true, ...props }: ResizableHa
   return (
     <Separator
       className={cn(
-        "relative flex shrink-0 items-center justify-center bg-taupe-100",
+        "relative flex shrink-0 items-center justify-center bg-ground-100",
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-primary/50",
         // Horizontal (default): vertical bar
         "[&:not([aria-orientation=vertical])]:h-full [&:not([aria-orientation=vertical])]:w-px",
@@ -62,8 +62,8 @@ function ResizableHandle({ className, withHandle = true, ...props }: ResizableHa
       {...props}
     >
       {withHandle && (
-        <div className="z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-taupe-100 bg-white shadow-natural">
-          <GripVertical size={10} className="text-taupe-400" />
+        <div className="z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-ground-100 bg-white shadow-natural">
+          <GripVertical size={10} className="text-ground-400" />
         </div>
       )}
     </Separator>

package/src/components/scroll-area.tsx

@@ -34,7 +34,7 @@ const ScrollAreaScrollbar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollArea.Thumb className="relative flex-1 rounded-full bg-taupe-200 hover:bg-taupe-300 transition-colors" />
+    <ScrollArea.Thumb className="relative flex-1 rounded-full bg-ground-200 hover:bg-ground-300 transition-colors" />
   </ScrollArea.Scrollbar>
 ));
 ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";

package/src/components/section-heading.tsx

@@ -28,13 +28,13 @@ function SectionHeading({
     <div
       className={cn(
         "flex flex-col gap-1 pb-4 sm:flex-row sm:items-start sm:justify-between",
-        border && "border-b border-taupe-100",
+        border && "border-b border-ground-100",
         className,
       )}
     >
       <div className="min-w-0 flex-1">
-        <h2 className="heading text-taupe-900 truncate">{title}</h2>
-        {description && <p className="mt-1 body text-taupe-400">{description}</p>}
+        <h2 className="heading text-ground-900 truncate">{title}</h2>
+        {description && <p className="mt-1 body text-ground-400">{description}</p>}
       </div>
 
       {actions && actions.length > 0 && (

package/src/components/select.tsx

@@ -17,10 +17,10 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-9 w-full items-center justify-between rounded-xl bg-white px-3 py-2",
-      "body text-taupe-900 shadow-natural",
-      "focus:outline-none focus:ring-2 focus:ring-taupe-900/15",
+      "body text-ground-900 shadow-natural",
+      "focus:outline-none focus:ring-2 focus:ring-ground-900/15",
       "disabled:opacity-50 disabled:cursor-not-allowed",
-      "data-[placeholder]:text-taupe-400",
+      "data-[placeholder]:text-ground-400",
       "[&>span]:line-clamp-1",
       className,
     )}
@@ -28,7 +28,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <Select.Icon asChild>
-      <ChevronDown size={15} className="text-taupe-400 shrink-0" />
+      <ChevronDown size={15} className="text-ground-400 shrink-0" />
     </Select.Icon>
   </Select.Trigger>
 ));
@@ -55,7 +55,7 @@ const SelectContent = React.forwardRef<
       {...props}
     >
       <Select.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
-        <ChevronUp size={14} className="text-taupe-400" />
+        <ChevronUp size={14} className="text-ground-400" />
       </Select.ScrollUpButton>
       <Select.Viewport
         className={cn(
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
         {children}
       </Select.Viewport>
       <Select.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
-        <ChevronDown size={14} className="text-taupe-400" />
+        <ChevronDown size={14} className="text-ground-400" />
       </Select.ScrollDownButton>
     </Select.Content>
   </Select.Portal>
@@ -81,8 +81,8 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-md px-2.5 py-1.5",
-      "body text-taupe-700 outline-none",
-      "focus:bg-taupe-50 focus:text-taupe-900",
+      "body text-ground-700 outline-none",
+      "focus:bg-ground-50 focus:text-ground-900",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -90,7 +90,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute right-2 flex size-3.5 items-center justify-center">
       <Select.ItemIndicator>
-        <Check size={13} className="text-taupe-900" />
+        <Check size={13} className="text-ground-900" />
       </Select.ItemIndicator>
     </span>
     <Select.ItemText>{children}</Select.ItemText>
@@ -104,7 +104,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Select.Label
     ref={ref}
-    className={cn("px-2.5 py-1 label text-taupe-400", className)}
+    className={cn("px-2.5 py-1 label text-ground-400", className)}
     {...props}
   />
 ));
@@ -114,7 +114,7 @@ const SelectSeparator = React.forwardRef<
   React.ComponentRef<typeof Select.Separator>,
   React.ComponentPropsWithoutRef<typeof Select.Separator>
 >(({ className, ...props }, ref) => (
-  <Select.Separator ref={ref} className={cn("mx-1 my-1 h-px bg-taupe-100", className)} {...props} />
+  <Select.Separator ref={ref} className={cn("mx-1 my-1 h-px bg-ground-100", className)} {...props} />
 ));
 SelectSeparator.displayName = "SelectSeparator";
 

package/src/components/separator.tsx

@@ -13,7 +13,7 @@ const Separator = React.forwardRef<
     decorative={decorative}
     orientation={orientation}
     className={cn(
-      "shrink-0 bg-taupe-100",
+      "shrink-0 bg-ground-100",
       orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
       className,
     )}

package/src/components/sheet.tsx

@@ -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-taupe-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-taupe-900/20">
+        <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">
           <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-taupe-900", className)}
+    className={cn("body-lg font-semibold text-ground-900", 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-taupe-500", className)} {...props} />
+  <Dialog.Description ref={ref} className={cn("body text-ground-500", 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-taupe-100 w-[--sidebar-width]",
+          "flex flex-col h-svh bg-white border-r border-ground-100 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-taupe-100",
+          "group peer flex flex-col h-svh bg-white border-r border-ground-100",
           "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-taupe-100",
+        "group peer hidden md:flex flex-col h-svh bg-white border-r border-ground-100",
         "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",
@@ -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-taupe-100", className)}
+      className={cn("flex flex-col gap-2 p-3 border-b border-ground-100", 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-taupe-100", className)}
+      className={cn("flex flex-col gap-2 p-3 border-t border-ground-100", 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-taupe-100", className)}
+      className={cn("mx-2 my-1 bg-ground-100", 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-taupe-400",
-        "outline-none ring-taupe-900 transition-[margin,opacity] duration-200 ease-linear",
+        "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",
         "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-taupe-400 hover:bg-taupe-100 hover:text-taupe-900",
+        "rounded-md text-ground-400 hover:bg-ground-100 hover:text-ground-900",
         "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 text-left",
-        "outline-none ring-taupe-900",
+        "outline-none ring-ground-900",
         "transition-[width,height,padding] duration-150",
-        "hover:bg-taupe-100 hover:text-taupe-900",
+        "hover:bg-ground-100 hover:text-ground-900",
         "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
-        "active:bg-taupe-100",
+        "active:bg-ground-100",
         "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-taupe-400 hover:bg-taupe-100 hover:text-taupe-900",
+        "rounded-md text-ground-400 hover:bg-ground-100 hover:text-ground-900",
         "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-taupe-100 text-taupe-700 px-1",
+        "caption font-medium bg-ground-100 text-ground-700 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-taupe-200 animate-pulse" />}
+      {showIcon && <div className="size-4 shrink-0 rounded-md bg-ground-200 animate-pulse" />}
       <div
-        className="h-4 max-w-[--skeleton-width] flex-1 rounded-md bg-taupe-200 animate-pulse"
+        className="h-4 max-w-[--skeleton-width] flex-1 rounded-md bg-ground-200 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-taupe-100 pl-3",
+        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-ground-100 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-taupe-500 outline-none",
+        "body text-ground-500 outline-none",
         "transition-colors duration-150",
-        "hover:text-taupe-900 hover:bg-taupe-100",
+        "hover:text-ground-900 hover:bg-ground-100",
         "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-taupe-100", className)}
+      className={cn("animate-pulse rounded-md bg-ground-100", className)}
       {...props}
     />
   );

package/src/components/slider.tsx

@@ -13,7 +13,7 @@ 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-taupe-100">
+    <Slider.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-ground-100">
       <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" />

package/src/components/sonner.tsx

@@ -12,18 +12,18 @@ function Toaster({ ...props }: ToasterProps) {
       toastOptions={{
         classNames: {
           toast:
-            "group toast font-sans text-sm group-[.toaster]:bg-white group-[.toaster]:text-taupe-900 group-[.toaster]:border group-[.toaster]:border-taupe-100 group-[.toaster]:shadow-elevated group-[.toaster]:rounded-xl",
-          description: "group-[.toast]:text-taupe-500 group-[.toast]:text-xs",
+            "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",
           actionButton:
             "group-[.toast]:bg-brand-primary group-[.toast]:text-white group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
           cancelButton:
-            "group-[.toast]:bg-taupe-100 group-[.toast]:text-taupe-600 group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
-          success: "group-[.toaster]:border-brand-secondary/40 group-[.toaster]:text-taupe-900",
+            "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",
           error:
             "group-[.toaster]:bg-red-50 group-[.toaster]:text-red-700 group-[.toaster]:border-red-200",
           warning:
             "group-[.toaster]:bg-yellow-50 group-[.toaster]:text-yellow-800 group-[.toaster]:border-yellow-200",
-          info: "group-[.toaster]:border-taupe-200",
+          info: "group-[.toaster]:border-ground-200",
         },
       }}
       {...props}

package/src/components/stacked-list.tsx

@@ -14,8 +14,8 @@ function StackedList({ children, divided = true, bordered = true, className }: S
       role="list"
       className={cn(
         "overflow-hidden rounded-xl bg-white",
-        bordered && "border border-taupe-100 shadow-natural",
-        divided && "divide-y divide-taupe-100",
+        bordered && "border border-ground-100 shadow-natural",
+        divided && "divide-y divide-ground-100",
         className,
       )}
     >
@@ -37,7 +37,7 @@ function StackedListItem({ children, href, onClick, className }: StackedListItem
   if (href) {
     return (
       <li>
-        <a href={href} className="block hover:bg-taupe-50 transition-colors">
+        <a href={href} className="block hover:bg-ground-50 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-taupe-50 transition-colors"
+          className="w-full text-left hover:bg-ground-50 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-taupe-800 bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
+    up: "text-ground-800 bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
     down: "text-red-600",
-    neutral: "text-taupe-400",
+    neutral: "text-ground-400",
   };
 
   const TrendIcon = {
@@ -27,16 +27,16 @@ function StatCard({ label, value, trend, icon, className }: StatCardProps) {
   };
 
   return (
-    <div className={cn("rounded-xl border border-taupe-100 bg-white p-5", className)}>
+    <div className={cn("rounded-xl border border-ground-100 bg-white p-5", className)}>
       <div className="flex items-start justify-between gap-3">
-        <p className="label text-taupe-400">{label}</p>
+        <p className="label text-ground-400">{label}</p>
         {icon && (
-          <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-taupe-50 text-taupe-400">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-ground-50 text-ground-400">
             {icon}
           </div>
         )}
       </div>
-      <p className="heading-xl mt-2 text-taupe-900">{value}</p>
+      <p className="heading-xl mt-2 text-ground-900">{value}</p>
       {trend &&
         (() => {
           const Icon = TrendIcon[trend.direction];

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-taupe-200",
+                      step.status === "complete" ? "bg-brand-primary" : "bg-ground-200",
                     )}
                   />
                 </div>
@@ -52,7 +52,7 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                       "bg-brand-primary group-hover:bg-brand-primary/80",
                     step.status === "current" && "border-2 border-brand-primary bg-white",
                     step.status === "upcoming" &&
-                      "border-2 border-taupe-300 bg-white group-hover:border-taupe-400",
+                      "border-2 border-ground-300 bg-white group-hover:border-ground-400",
                   )}
                 >
                   {step.status === "complete" ? (
@@ -60,7 +60,7 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                   ) : 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-taupe-300" />
+                    <span className="size-2.5 rounded-full bg-transparent group-hover:bg-ground-300" />
                   )}
                 </span>
 
@@ -69,13 +69,13 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                   <span
                     className={cn(
                       "caption font-semibold",
-                      step.status === "upcoming" ? "text-taupe-400" : "text-taupe-900",
+                      step.status === "upcoming" ? "text-ground-400" : "text-ground-900",
                     )}
                   >
                     {step.name}
                   </span>
                   {step.description && (
-                    <span className="caption text-taupe-400">{step.description}</span>
+                    <span className="caption text-ground-400">{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-taupe-700">
+      <p className="body font-medium text-ground-700">
         Step {currentIdx + 1} of {steps.length}
       </p>
       <ol role="list" className="flex items-center gap-2">
@@ -120,7 +120,7 @@ function BulletsSteps({ steps, className }: { steps: Step[]; className?: string
                 </span>
               ) : (
                 <span
-                  className="block size-2.5 rounded-full bg-taupe-200 hover:bg-taupe-300 transition-colors"
+                  className="block size-2.5 rounded-full bg-ground-200 hover:bg-ground-300 transition-colors"
                   title={step.name}
                 />
               )}
@@ -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-taupe-100">
+      <div className="h-1.5 w-full overflow-hidden rounded-full bg-ground-100">
         <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-taupe-400" : "text-taupe-900",
+                step.status === "upcoming" ? "text-ground-400" : "text-ground-900",
               )}
             >
               {step.name}
@@ -171,9 +171,10 @@ function ProgressSteps({ steps, className }: { steps: Step[]; className?: string
 
 /* ---------- Main component ---------- */
 function Steps({ steps, variant = "circles", className }: StepsProps) {
-  if (variant === "bullets") return <BulletsSteps steps={steps} className={className} />;
-  if (variant === "progress") return <ProgressSteps steps={steps} className={className} />;
-  return <CirclesSteps steps={steps} className={className} />;
+  const classNameProp = className !== undefined ? { className } : {};
+  if (variant === "bullets") return <BulletsSteps steps={steps} {...classNameProp} />;
+  if (variant === "progress") return <ProgressSteps steps={steps} {...classNameProp} />;
+  return <CirclesSteps steps={steps} {...classNameProp} />;
 }
 
 export { Steps };

package/src/components/switch.tsx

@@ -15,7 +15,7 @@ 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-taupe-200 data-[state=checked]:bg-brand-primary",
+      "data-[state=unchecked]:bg-ground-200 data-[state=checked]:bg-brand-primary",
       className,
     )}
     {...props}