@hilum/ui 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",
@@ -29,18 +29,22 @@
       "import": "./dist/tokens.js",
       "types": "./dist/tokens.d.ts"
     },
-    "./tokens.css": "./dist/tokens.css"
+    "./tokens.css": "./dist/tokens.css",
+    "./create-theme": {
+      "import": "./dist/create-theme.js",
+      "types": "./dist/create-theme.d.ts"
+    }
   },
   "files": [
     "dist",
-    "src/components",
-    "!src/components/__tests__",
+    "src/components/*.tsx",
     "src/icons.ts",
     "src/index.ts",
-    "src/lib",
-    "src/tokens",
+    "src/lib/*.ts",
+    "src/tokens/*.ts",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "llms.txt"
   ],
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/accordion.tsx

@@ -9,7 +9,7 @@ const AccordionRoot = React.forwardRef<
   React.ComponentRef<typeof Accordion.Root>,
   React.ComponentPropsWithoutRef<typeof Accordion.Root>
 >(({ className, ...props }, ref) => (
-  <Accordion.Root ref={ref} className={cn("divide-y divide-taupe-100", className)} {...props} />
+  <Accordion.Root ref={ref} className={cn("divide-y divide-ground-100", className)} {...props} />
 ));
 AccordionRoot.displayName = "Accordion";
 
@@ -30,9 +30,9 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex w-full items-center justify-between py-4",
-        "body font-medium text-taupe-900 transition-colors hover:text-taupe-700",
+        "body font-medium text-ground-900 transition-colors hover:text-ground-700",
         "[&[data-state=open]>svg]:rotate-180",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/15",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15",
         className,
       )}
       {...props}
@@ -40,7 +40,7 @@ const AccordionTrigger = React.forwardRef<
       {children}
       <ChevronDown
         size={16}
-        className="text-taupe-400 transition-transform duration-200 shrink-0"
+        className="text-ground-400 transition-transform duration-200 shrink-0"
       />
     </Accordion.Trigger>
   </Accordion.Header>
@@ -54,7 +54,7 @@ const AccordionContent = React.forwardRef<
   <Accordion.Content
     ref={ref}
     className={cn(
-      "overflow-hidden body text-taupe-500",
+      "overflow-hidden body text-ground-500",
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       className,
     )}

package/src/components/action-panel.tsx

@@ -48,7 +48,7 @@ function ActionPanel({
           (link.href ? (
             <a
               href={link.href}
-              className="body font-medium text-taupe-600 hover:text-taupe-900 transition-colors inline-flex items-center gap-1"
+              className="body font-medium text-ground-600 hover:text-ground-900 transition-colors inline-flex items-center gap-1"
             >
               {link.label} <span aria-hidden>→</span>
             </a>
@@ -56,7 +56,7 @@ function ActionPanel({
             <button
               type="button"
               onClick={link.onClick}
-              className="body font-medium text-taupe-600 hover:text-taupe-900 transition-colors inline-flex items-center gap-1"
+              className="body font-medium text-ground-600 hover:text-ground-900 transition-colors inline-flex items-center gap-1"
             >
               {link.label} <span aria-hidden>→</span>
             </button>
@@ -81,16 +81,16 @@ function ActionPanel({
       className={cn(
         "rounded-xl border px-5 py-5",
         variant === "muted"
-          ? "border-taupe-100 bg-taupe-50"
-          : "border-taupe-100 bg-white shadow-natural",
+          ? "border-ground-100 bg-ground-50"
+          : "border-ground-100 bg-white shadow-natural",
         layout === "inline" && "flex items-center justify-between gap-6",
         className,
       )}
     >
       <div className={cn("min-w-0", layout === "inline" ? "flex-1" : "")}>
-        <p className="body font-semibold text-taupe-900">{title}</p>
+        <p className="body font-semibold text-ground-900">{title}</p>
         {description && (
-          <p className={cn("body text-taupe-400", layout === "stacked" ? "mt-1" : "")}>
+          <p className={cn("body text-ground-400", layout === "stacked" ? "mt-1" : "")}>
             {description}
           </p>
         )}

package/src/components/activity-feed.tsx

@@ -26,7 +26,7 @@ function ActivityFeed({ events, className }: ActivityFeedProps) {
               <div className="relative pb-8">
                 {!isLast && (
                   <span
-                    className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-taupe-100"
+                    className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-ground-100"
                     aria-hidden="true"
                   />
                 )}
@@ -36,7 +36,7 @@ function ActivityFeed({ events, className }: ActivityFeedProps) {
                     <span
                       className={cn(
                         "flex size-8 items-center justify-center rounded-full ring-8 ring-white",
-                        event.iconBgClass ?? "bg-taupe-100 text-taupe-500",
+                        event.iconBgClass ?? "bg-ground-100 text-ground-500",
                       )}
                     >
                       {event.icon}
@@ -45,11 +45,11 @@ function ActivityFeed({ events, className }: ActivityFeedProps) {
 
                   {/* Content */}
                   <div className="flex min-w-0 flex-1 items-baseline justify-between gap-4 pt-1">
-                    <div className="body text-taupe-600">{event.content}</div>
+                    <div className="body text-ground-600">{event.content}</div>
                     {event.date && (
                       <time
                         dateTime={event.datetime ?? event.date}
-                        className="caption whitespace-nowrap text-taupe-400"
+                        className="caption whitespace-nowrap text-ground-400"
                       >
                         {event.date}
                       </time>

package/src/components/alert-dialog.tsx

@@ -65,7 +65,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialog.Title
     ref={ref}
-    className={cn("body-lg font-semibold text-taupe-900", className)}
+    className={cn("body-lg font-semibold text-ground-900", className)}
     {...props}
   />
 ));
@@ -75,7 +75,7 @@ const AlertDialogDescription = React.forwardRef<
   React.ComponentRef<typeof AlertDialog.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialog.Description>
 >(({ className, ...props }, ref) => (
-  <AlertDialog.Description ref={ref} className={cn("body text-taupe-500", className)} {...props} />
+  <AlertDialog.Description ref={ref} className={cn("body text-ground-500", className)} {...props} />
 ));
 AlertDialogDescription.displayName = "AlertDialogDescription";
 
@@ -107,7 +107,7 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       "inline-flex h-9 items-center justify-center rounded-md px-4",
       "body font-medium whitespace-nowrap transition-all duration-150",
-      "bg-white text-taupe-700 shadow-natural hover:bg-taupe-50 rounded-xl",
+      "bg-white text-ground-700 shadow-natural hover:bg-ground-50 rounded-xl",
       "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
       "disabled:pointer-events-none disabled:opacity-50",
       className,

package/src/components/alert.tsx

@@ -7,10 +7,10 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-taupe-50 text-taupe-800 [&>svg]:text-taupe-500",
-        info: "bg-brand-secondary/40 text-taupe-700 [&>svg]:text-taupe-500",
-        success: "bg-brand-secondary/15 text-taupe-800 [&>svg]:text-taupe-600",
-        warning: "bg-brand-secondary/70 text-taupe-800 [&>svg]:text-taupe-600",
+        default: "bg-ground-50 text-ground-800 [&>svg]:text-ground-500",
+        info: "bg-brand-secondary/40 text-ground-700 [&>svg]:text-ground-500",
+        success: "bg-brand-secondary/15 text-ground-800 [&>svg]:text-ground-600",
+        warning: "bg-brand-secondary/70 text-ground-800 [&>svg]:text-ground-600",
         destructive: "bg-red-50 text-red-800 [&>svg]:text-red-500",
       },
     },

package/src/components/avatar-stack.tsx

@@ -44,7 +44,7 @@ function AvatarStack({ avatars, max, size = "md", className }: AvatarStackProps)
               className={cn(
                 "flex size-full items-center justify-center font-medium",
                 s.text,
-                avatar.colorClass ?? "bg-taupe-200 text-taupe-700",
+                avatar.colorClass ?? "bg-ground-200 text-ground-700",
               )}
             >
               {avatar.fallback ?? avatar.name.slice(0, 2).toUpperCase()}
@@ -55,7 +55,7 @@ function AvatarStack({ avatars, max, size = "md", className }: AvatarStackProps)
       {overflow > 0 && (
         <span
           className={cn(
-            "relative inline-flex shrink-0 items-center justify-center rounded-full ring-white bg-taupe-100 font-medium text-taupe-600",
+            "relative inline-flex shrink-0 items-center justify-center rounded-full ring-white bg-ground-100 font-medium text-ground-600",
             s.wrapper,
             s.text,
           )}

package/src/components/avatar.tsx

@@ -52,7 +52,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-taupe-100 body font-semibold text-taupe-600",
+      "flex h-full w-full items-center justify-center rounded-full bg-ground-100 body font-semibold text-ground-600",
       className,
     )}
     {...props}
@@ -62,7 +62,7 @@ AvatarFallback.displayName = "AvatarFallback";
 
 const statusColorMap = {
   online: "bg-brand-secondary",
-  offline: "bg-taupe-300",
+  offline: "bg-ground-300",
   busy: "bg-red-500",
   away: "bg-brand-secondary",
 };

package/src/components/badge.tsx

@@ -7,12 +7,12 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-taupe-900 text-white",
-        secondary: "bg-taupe-100 text-taupe-700",
-        outline: "border border-taupe-200 text-taupe-600 bg-transparent",
+        default: "bg-ground-900 text-white",
+        secondary: "bg-ground-100 text-ground-700",
+        outline: "border border-ground-200 text-ground-600 bg-transparent",
         brand: "bg-brand-primary text-white",
-        success: "bg-brand-secondary/20 text-taupe-800 border border-brand-secondary/50",
-        warning: "bg-brand-secondary/70 text-taupe-700 border border-brand-secondary",
+        success: "bg-brand-secondary/20 text-ground-800 border border-brand-secondary/50",
+        warning: "bg-brand-secondary/70 text-ground-700 border border-brand-secondary",
         destructive: "bg-red-50 text-red-700 border border-red-200",
       },
     },
@@ -29,5 +29,6 @@ function Badge({ className, variant, ...props }: BadgeProps) {
     <span data-slot="badge" className={cn(badgeVariants({ variant, className }))} {...props} />
   );
 }
+Badge.displayName = "Badge";
 
 export { Badge, badgeVariants };

package/src/components/breadcrumb.tsx

@@ -12,7 +12,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentProps<"
   ({ className, ...props }, ref) => (
     <ol
       ref={ref}
-      className={cn("flex flex-wrap items-center gap-1.5 body text-taupe-500", className)}
+      className={cn("flex flex-wrap items-center gap-1.5 body text-ground-500", className)}
       {...props}
     />
   ),
@@ -28,7 +28,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.ComponentProps<"a">>(
   ({ className, ...props }, ref) => (
-    <a ref={ref} className={cn("transition-colors hover:text-taupe-900", className)} {...props} />
+    <a ref={ref} className={cn("transition-colors hover:text-ground-900", className)} {...props} />
   ),
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
@@ -39,7 +39,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentProps<"s
       ref={ref}
       role="link"
       aria-current="page"
-      className={cn("body font-medium text-taupe-900", className)}
+      className={cn("body font-medium text-ground-900", className)}
       {...props}
     />
   ),
@@ -47,7 +47,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentProps<"s
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li role="presentation" aria-hidden="true" className={cn("text-taupe-300", className)} {...props}>
+  <li role="presentation" aria-hidden="true" className={cn("text-ground-300", className)} {...props}>
     {children ?? <ChevronRight size={14} />}
   </li>
 );
@@ -60,7 +60,7 @@ const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span"
     className={cn("flex size-5 items-center justify-center", className)}
     {...props}
   >
-    <MoreHorizontal size={14} className="text-taupe-400" />
+    <MoreHorizontal size={14} className="text-ground-400" />
   </span>
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";

package/src/components/button-group.tsx

@@ -10,7 +10,7 @@ function ButtonGroup({ children, className }: ButtonGroupProps) {
   return (
     <div
       className={cn(
-        "inline-flex divide-x divide-taupe-200 overflow-hidden rounded-lg border border-taupe-200 bg-white shadow-natural",
+        "inline-flex divide-x divide-ground-200 overflow-hidden rounded-lg border border-ground-200 bg-white shadow-natural",
         className,
       )}
     >
@@ -29,10 +29,10 @@ function ButtonGroupItem({ active, className, children, ...props }: ButtonGroupI
       type="button"
       className={cn(
         "relative inline-flex items-center gap-1.5 px-3.5 py-2 body font-medium transition-colors",
-        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 focus-visible:ring-inset",
+        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-400/40 focus-visible:ring-inset",
         active
-          ? "bg-taupe-900 text-white"
-          : "text-taupe-600 hover:bg-taupe-50 hover:text-taupe-900",
+          ? "bg-ground-900 text-white"
+          : "text-ground-600 hover:bg-ground-50 hover:text-ground-900",
         className,
       )}
       {...props}

package/src/components/button.tsx

@@ -17,12 +17,12 @@ const buttonVariants = cva(
       variant: {
         default: "bg-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
         destructive: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800",
-        outline: "bg-white text-taupe-700 shadow-natural hover:bg-taupe-50 rounded-xl",
-        secondary: "bg-taupe-100 text-taupe-700 hover:bg-taupe-200",
+        outline: "bg-white text-ground-700 shadow-natural hover:bg-ground-50 rounded-xl",
+        secondary: "bg-ground-100 text-ground-700 hover:bg-ground-200",
         brand:
-          "bg-brand-secondary text-taupe-900 hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
-        ghost: "text-taupe-600 hover:bg-taupe-100 hover:text-taupe-900",
-        link: "text-taupe-900 underline-offset-4 hover:underline",
+          "bg-brand-secondary text-ground-900 hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
+        ghost: "text-ground-600 hover:bg-ground-100 hover:text-ground-900",
+        link: "text-ground-900 underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2 rounded-md",
@@ -56,5 +56,6 @@ function Button({ className, variant, size, asChild = false, ...props }: ButtonP
     />
   );
 }
+Button.displayName = "Button";
 
 export { Button, buttonVariants };

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-taupe-900",
+        caption_label: "body font-semibold text-ground-900",
         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-taupe-400 hover:bg-taupe-100 hover:text-taupe-700 transition-colors",
+          "text-ground-400 hover:bg-ground-100 hover:text-ground-700 transition-colors",
         ),
         button_next: cn(
           "absolute right-0 h-7 w-7 flex items-center justify-center rounded-md",
-          "text-taupe-400 hover:bg-taupe-100 hover:text-taupe-700 transition-colors",
+          "text-ground-400 hover:bg-ground-100 hover:text-ground-700 transition-colors",
         ),
         month_grid: "w-full border-collapse mt-1",
         weekdays: "flex",
-        weekday: "w-9 h-9 flex items-center justify-center label text-taupe-400 font-normal",
+        weekday: "w-9 h-9 flex items-center justify-center label text-ground-400 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-taupe-900 hover:bg-taupe-100 transition-colors",
+          "text-ground-900 hover:bg-ground-100 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",
         today: "[&>button]:font-semibold [&>button]:text-brand-primary",
-        outside: "opacity-40 [&>button]:text-taupe-400",
+        outside: "opacity-40 [&>button]:text-ground-400",
         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_middle:
-          "[&>button]:bg-brand-primary/15 [&>button]:text-taupe-900 [&>button]:rounded-none",
+          "[&>button]:bg-brand-primary/15 [&>button]:text-ground-900 [&>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-taupe-100 px-5 py-4",
+        "flex items-start justify-between gap-4 border-b border-ground-100 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-taupe-900 truncate">{title}</p>
-          {description && <p className="caption text-taupe-400 mt-0.5">{description}</p>}
+          <p className="body font-semibold text-ground-900 truncate">{title}</p>
+          {description && <p className="caption text-ground-400 mt-0.5">{description}</p>}
         </div>
       </div>
 

package/src/components/card.tsx

@@ -10,7 +10,7 @@ const cardVariants = cva("rounded-xl", {
   variants: {
     variant: {
       default: "bg-white shadow-natural",
-      muted: "bg-taupe-50",
+      muted: "bg-ground-50",
       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-taupe-900", className)}
+      className={cn("subheading text-ground-900", className)}
       {...props}
     />
   ),
@@ -66,7 +66,7 @@ const CardDescription = React.forwardRef<HTMLParagraphElement, React.ComponentPr
     <p
       ref={ref}
       data-slot="card-description"
-      className={cn("caption text-taupe-500", className)}
+      className={cn("caption text-ground-500", className)}
       {...props}
     />
   ),

package/src/components/chart.tsx

@@ -3,15 +3,15 @@
 import * as React from "react";
 import { ResponsiveContainer, type TooltipContentProps } from "recharts";
 import { cn } from "../lib/utils";
+import { tokens } from "../tokens/tokens";
 
-// Color palette for charts
 export const CHART_COLORS = {
-  primary: "#FF4D01", // brand-primary
-  secondary: "#CDEA19", // brand-secondary
-  tertiary: "#FDE086", // brand-secondary
-  muted: "#a8978a", // taupe-400
-  subtle: "#e3dcd4", // taupe-200
-  dark: "#26181a", // taupe-900
+  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"
 };
 
 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-taupe-100 bg-white px-3 py-2 shadow-elevated">
-      {label && <p className={cn("mb-1 label text-taupe-400", labelClassName)}>{label}</p>}
+    <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>}
       {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-taupe-500">{entry.name}:</span>
-          <span className="caption font-medium text-taupe-900">{entry.value}</span>
+          <span className="caption text-ground-500">{entry.name}:</span>
+          <span className="caption font-medium text-ground-900">{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-taupe-300 bg-white transition-colors",
+      "peer size-4 shrink-0 rounded border border-ground-300 bg-white 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",

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-taupe-200 bg-white overflow-hidden",
+        "inline-flex h-8 items-stretch gap-0 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,
@@ -51,8 +51,8 @@ function ColorInput({
       <ColorPicker
         value={value}
         onChange={onChange}
-        presets={presets}
-        disabled={disabled}
+        {...(presets !== undefined && { presets })}
+        {...(disabled !== undefined && { disabled })}
         className="h-full w-8 border-0 rounded-none focus-visible:ring-0"
       />
       <input
@@ -65,19 +65,19 @@ function ColorInput({
             commitHex("#" + (e.target as HTMLInputElement).value.replace(/^#/, ""));
         }}
         spellCheck={false}
-        className="w-[5.5rem] caption text-taupe-900 px-2 bg-transparent border-l border-taupe-100 focus:outline-none uppercase"
+        className="w-[5.5rem] caption text-ground-900 px-2 bg-transparent border-l border-ground-100 focus:outline-none uppercase"
       />
       {typeof opacity === "number" && onOpacityChange && (
-        <div className="relative flex items-center border-l border-taupe-100">
+        <div className="relative flex items-center border-l border-ground-100">
           <input
             type="number"
             min={0}
             max={100}
             value={Math.round(opacity)}
             onChange={(e) => onOpacityChange(Number(e.target.value))}
-            className="w-12 caption text-taupe-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-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"
           />
-          <span aria-hidden className="caption-xs text-taupe-400 pr-2">
+          <span aria-hidden className="caption-xs text-ground-400 pr-2">
             %
           </span>
         </div>

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-taupe-200 bg-white",
-            "transition-colors hover:border-taupe-300",
+            "inline-flex h-8 w-8 items-center justify-center rounded-md border border-ground-200 bg-white",
+            "transition-colors hover:border-ground-300",
             "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,
@@ -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-taupe-200 bg-white p-0.5"
+            className="h-10 w-full cursor-pointer rounded-md border border-ground-200 bg-white p-0.5"
           />
           <div className="mt-2 flex items-center gap-2">
-            <span className="caption text-taupe-500">Hex</span>
+            <span className="caption text-ground-500">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-taupe-200 bg-white px-2 caption text-taupe-900 focus:outline-none focus:border-brand-primary"
+              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"
             />
           </div>
           {presets && presets.length > 0 && (