@hilum/ui 2.0.0 → 2.0.1

package/llms.txt

@@ -19,7 +19,7 @@ Peer dependencies: `react@^19`, `react-dom@^19`, `tailwindcss@^4`
 @import "@hilum/ui/tokens.css";
 ```
 
-That single import registers all design tokens as CSS custom properties and Tailwind v4 utilities (`bg-brand-primary`, `text-taupe-900`, `shadow-natural`, etc.).
+That single import registers all design tokens as CSS custom properties and Tailwind v4 utilities (`bg-brand-primary`, `text-ground-900`, `shadow-natural`, etc.).
 
 ---
 
@@ -84,7 +84,7 @@ export function App() {
 
 **Purple scale** (`bg-purple-{50..950}`): built from `#C100F1` anchor at 500
 **Butter scale** (`bg-butter-{50..950}`): built from `#FFF5BF` anchor at 200
-**Taupe scale** (`bg-taupe-{50..950}`): neutral spine for text, borders, structure
+**Ground scale** (`bg-ground-{50..950}`): neutral spine for text, borders, structure
 
 **Semantic CSS vars** (use in custom CSS, never raw hex):
 - `--background`, `--foreground` — page bg/text
@@ -194,7 +194,7 @@ Props: `variant`.
 
 ### Input
 
-Text input field. Styled with taupe palette and brand focus ring.
+Text input field. Styled with the ground palette and brand focus ring.
 
 ```tsx
 import { Input } from "@hilum/ui"
@@ -467,7 +467,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
     <CardDescription className="body">Supporting text.</CardDescription>
   </CardHeader>
   <CardContent>
-    <p className="body text-taupe-500">Content goes here.</p>
+    <p className="body text-ground-500">Content goes here.</p>
   </CardContent>
   <CardFooter>
     <Button>Action</Button>
@@ -475,7 +475,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
 </Card>
 ```
 
-Variants: `default` (white with natural shadow), `muted` (taupe-50).
+Variants: `default` (white with natural shadow), `muted` (ground-50).
 
 ---
 
@@ -924,7 +924,7 @@ const config = {
 
 <ChartContainer config={config} className="h-64">
   <LineChart data={data}>
-    <CartesianGrid strokeDasharray="3 3" stroke="var(--color-taupe-100)" />
+    <CartesianGrid strokeDasharray="3 3" stroke="var(--color-ground-100)" />
     <XAxis dataKey="month" />
     <YAxis />
     <ChartTooltip content={<ChartTooltipContent />} />
@@ -968,7 +968,7 @@ import { HoverCard, HoverCardTrigger, HoverCardContent } from "@hilum/ui"
   </HoverCardTrigger>
   <HoverCardContent>
     <p className="body font-medium">Hilum Labs</p>
-    <p className="caption text-taupe-400">Building the future of education.</p>
+    <p className="caption text-ground-400">Building the future of education.</p>
   </HoverCardContent>
 </HoverCard>
 ```
@@ -1182,7 +1182,7 @@ Maintains a fixed aspect ratio for any child.
 ```tsx
 import { AspectRatio } from "@hilum/ui"
 
-<AspectRatio ratio={16 / 9} className="bg-taupe-100 rounded-xl overflow-hidden">
+<AspectRatio ratio={16 / 9} className="bg-ground-100 rounded-xl overflow-hidden">
   <img src="..." className="w-full h-full object-cover" />
 </AspectRatio>
 ```
@@ -1241,7 +1241,7 @@ Input with leading/trailing addons (icons, buttons, text).
 import { InputGroup, InputGroupAddon } from "@hilum/ui"
 
 <InputGroup>
-  <InputGroupAddon><Mail size={14} className="text-taupe-400" /></InputGroupAddon>
+  <InputGroupAddon><Mail size={14} className="text-ground-400" /></InputGroupAddon>
   <Input placeholder="Email address" />
 </InputGroup>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",

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-ground-100", className)} {...props} />
+  <Accordion.Root ref={ref} className={cn("divide-y divide-border", 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-ground-900 transition-colors hover:text-ground-700",
+        "body font-medium text-foreground transition-colors hover:text-muted-foreground",
         "[&[data-state=open]>svg]:rotate-180",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20",
         className,
       )}
       {...props}
@@ -40,7 +40,7 @@ const AccordionTrigger = React.forwardRef<
       {children}
       <ChevronDown
         size={16}
-        className="text-ground-400 transition-transform duration-200 shrink-0"
+        className="text-muted-foreground 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-ground-500",
+      "overflow-hidden body text-muted-foreground",
       "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-ground-600 hover:text-ground-900 transition-colors inline-flex items-center gap-1"
+              className="body font-medium text-muted-foreground hover:text-foreground 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-ground-600 hover:text-ground-900 transition-colors inline-flex items-center gap-1"
+              className="body font-medium text-muted-foreground hover:text-foreground 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-ground-100 bg-ground-50"
-          : "border-ground-100 bg-white shadow-natural",
+          ? "border-border bg-muted"
+          : "border-border bg-card 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-ground-900">{title}</p>
+        <p className="body font-semibold text-foreground">{title}</p>
         {description && (
-          <p className={cn("body text-ground-400", layout === "stacked" ? "mt-1" : "")}>
+          <p className={cn("body text-muted-foreground", layout === "stacked" ? "mt-1" : "")}>
             {description}
           </p>
         )}
@@ -109,4 +109,6 @@ function ActionPanel({
   );
 }
 
+ActionPanel.displayName = "ActionPanel";
+
 export { ActionPanel };

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-ground-100"
+                    className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-muted"
                     aria-hidden="true"
                   />
                 )}
@@ -35,8 +35,8 @@ function ActivityFeed({ events, className }: ActivityFeedProps) {
                   <div>
                     <span
                       className={cn(
-                        "flex size-8 items-center justify-center rounded-full ring-8 ring-white",
-                        event.iconBgClass ?? "bg-ground-100 text-ground-500",
+                        "flex size-8 items-center justify-center rounded-full ring-8 ring-background",
+                        event.iconBgClass ?? "bg-muted text-muted-foreground",
                       )}
                     >
                       {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-ground-600">{event.content}</div>
+                    <div className="body text-muted-foreground">{event.content}</div>
                     {event.date && (
                       <time
                         dateTime={event.datetime ?? event.date}
-                        className="caption whitespace-nowrap text-ground-400"
+                        className="caption whitespace-nowrap text-muted-foreground"
                       >
                         {event.date}
                       </time>
@@ -65,5 +65,7 @@ function ActivityFeed({ events, className }: ActivityFeedProps) {
   );
 }
 
+ActivityFeed.displayName = "ActivityFeed";
+
 export { ActivityFeed };
 export type { FeedEvent };

package/src/components/alert-dialog.tsx

@@ -35,7 +35,7 @@ const AlertDialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-        "w-full max-w-md bg-white rounded-2xl shadow-elevated p-6",
+        "w-full max-w-md bg-card rounded-2xl shadow-elevated p-6",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -65,7 +65,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialog.Title
     ref={ref}
-    className={cn("body-lg font-semibold text-ground-900", className)}
+    className={cn("body-lg font-semibold text-foreground", 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-ground-500", className)} {...props} />
+  <AlertDialog.Description ref={ref} className={cn("body text-muted-foreground", className)} {...props} />
 ));
 AlertDialogDescription.displayName = "AlertDialogDescription";
 
@@ -88,7 +88,7 @@ const AlertDialogAction = 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-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
+      "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
       "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,
@@ -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-ground-700 shadow-natural hover:bg-ground-50 rounded-xl",
+      "bg-card text-muted-foreground shadow-natural hover:bg-muted 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,11 +7,11 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        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",
+        default: "bg-muted text-muted-foreground [&>svg]:text-muted-foreground",
+        info: "bg-brand-secondary/40 text-muted-foreground [&>svg]:text-muted-foreground",
+        success: "bg-brand-secondary/15 text-muted-foreground [&>svg]:text-muted-foreground",
+        warning: "bg-brand-secondary/70 text-muted-foreground [&>svg]:text-muted-foreground",
+        destructive: "bg-destructive/10 text-destructive [&>svg]:text-destructive/70",
       },
     },
     defaultVariants: { variant: "default" },

package/src/components/avatar-stack.tsx

@@ -33,7 +33,7 @@ function AvatarStack({ avatars, max, size = "md", className }: AvatarStackProps)
           key={i}
           title={avatar.name}
           className={cn(
-            "relative inline-flex shrink-0 overflow-hidden rounded-full ring-white",
+            "relative inline-flex shrink-0 overflow-hidden rounded-full ring-background",
             s.wrapper,
           )}
         >
@@ -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-ground-200 text-ground-700",
+                avatar.colorClass ?? "bg-muted text-muted-foreground",
               )}
             >
               {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-ground-100 font-medium text-ground-600",
+            "relative inline-flex shrink-0 items-center justify-center rounded-full ring-background bg-muted font-medium text-muted-foreground",
             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-ground-100 body font-semibold text-ground-600",
+      "flex h-full w-full items-center justify-center rounded-full bg-muted body font-semibold text-muted-foreground",
       className,
     )}
     {...props}
@@ -62,8 +62,8 @@ AvatarFallback.displayName = "AvatarFallback";
 
 const statusColorMap = {
   online: "bg-brand-secondary",
-  offline: "bg-ground-300",
-  busy: "bg-red-500",
+  offline: "bg-muted",
+  busy: "bg-destructive",
   away: "bg-brand-secondary",
 };
 
@@ -90,7 +90,7 @@ const AvatarWithStatus = React.forwardRef<
     {status && (
       <span
         className={cn(
-          "absolute bottom-0 right-0 rounded-full ring-white",
+          "absolute bottom-0 right-0 rounded-full ring-background",
           statusColorMap[status],
           statusSizeMap[size],
         )}

package/src/components/badge.tsx

@@ -7,13 +7,13 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        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-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",
+        default: "bg-foreground text-background",
+        secondary: "bg-muted text-muted-foreground",
+        outline: "border border-border text-muted-foreground bg-transparent",
+        brand: "bg-brand-primary text-background",
+        success: "bg-brand-secondary/20 text-muted-foreground border border-brand-secondary/50",
+        warning: "bg-brand-secondary/70 text-muted-foreground border border-brand-secondary",
+        destructive: "bg-destructive/10 text-destructive border border-destructive/20",
       },
     },
     defaultVariants: {

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-ground-500", className)}
+      className={cn("flex flex-wrap items-center gap-1.5 body text-muted-foreground", 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-ground-900", className)} {...props} />
+    <a ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />
   ),
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
@@ -37,9 +37,8 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentProps<"s
   ({ className, ...props }, ref) => (
     <span
       ref={ref}
-      role="link"
       aria-current="page"
-      className={cn("body font-medium text-ground-900", className)}
+      className={cn("body font-medium text-foreground", className)}
       {...props}
     />
   ),
@@ -47,7 +46,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-ground-300", className)} {...props}>
+  <li role="presentation" aria-hidden="true" className={cn("text-muted-foreground", className)} {...props}>
     {children ?? <ChevronRight size={14} />}
   </li>
 );
@@ -60,7 +59,7 @@ const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span"
     className={cn("flex size-5 items-center justify-center", className)}
     {...props}
   >
-    <MoreHorizontal size={14} className="text-ground-400" />
+    <MoreHorizontal size={14} className="text-muted-foreground" />
   </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-ground-200 overflow-hidden rounded-lg border border-ground-200 bg-white shadow-natural",
+        "inline-flex divide-x divide-border overflow-hidden rounded-lg border border-border bg-card 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-ground-400/40 focus-visible:ring-inset",
+        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-inset",
         active
-          ? "bg-ground-900 text-white"
-          : "text-ground-600 hover:bg-ground-50 hover:text-ground-900",
+          ? "bg-foreground text-background"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
         className,
       )}
       {...props}
@@ -42,4 +42,7 @@ function ButtonGroupItem({ active, className, children, ...props }: ButtonGroupI
   );
 }
 
+ButtonGroup.displayName = "ButtonGroup";
+ButtonGroupItem.displayName = "ButtonGroupItem";
+
 export { ButtonGroup, ButtonGroupItem };

package/src/components/button.tsx

@@ -15,14 +15,14 @@ const buttonVariants = cva(
   {
     variants: {
       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-ground-700 shadow-natural hover:bg-ground-50 rounded-xl",
-        secondary: "bg-ground-100 text-ground-700 hover:bg-ground-200",
+        default: "bg-brand-primary text-background hover:bg-brand-primary/90 active:bg-brand-primary/80",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
+        outline: "bg-card text-muted-foreground shadow-natural hover:bg-muted rounded-xl",
+        secondary: "bg-muted text-muted-foreground hover:bg-muted",
         brand:
-          "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",
+          "bg-brand-secondary text-foreground hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
+        ghost: "text-muted-foreground hover:bg-muted hover:text-foreground",
+        link: "text-foreground underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2 rounded-md",

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} />
       ) : (