@hilum/ui 1.0.1 → 2.0.1

package/dist/tokens.css

@@ -120,21 +120,21 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --background: #0a0a0a;
+    --background: #171717;
     --foreground: #fafafa;
-    --card: #171717;
+    --card: #262626;
     --card-foreground: #fafafa;
-    --surface: #171717;
+    --surface: #1a1a1a;
     --surface-foreground: #f5f5f5;
-    --border: #262626;
+    --border: #404040;
     --input: #262626;
-    --muted: #171717;
+    --muted: #262626;
     --muted-foreground: #a3a3a3;
-    --accent: #330040;
-    --accent-foreground: #f5d6ff;
+    --accent: #404040;
+    --accent-foreground: #fafafa;
     --primary: #c100f1;
     --primary-foreground: #ffffff;
-    --secondary: #171717;
+    --secondary: #262626;
     --secondary-foreground: #f5f5f5;
     --destructive: #ef4444;
     --destructive-foreground: #ffffff;
@@ -147,21 +147,21 @@
 }
 
 [data-theme="dark"] {
-  --background: #0a0a0a;
+  --background: #171717;
   --foreground: #fafafa;
-  --card: #171717;
+  --card: #262626;
   --card-foreground: #fafafa;
-  --surface: #171717;
+  --surface: #1a1a1a;
   --surface-foreground: #f5f5f5;
-  --border: #262626;
+  --border: #404040;
   --input: #262626;
-  --muted: #171717;
+  --muted: #262626;
   --muted-foreground: #a3a3a3;
-  --accent: #330040;
-  --accent-foreground: #f5d6ff;
+  --accent: #404040;
+  --accent-foreground: #fafafa;
   --primary: #c100f1;
   --primary-foreground: #ffffff;
-  --secondary: #171717;
+  --secondary: #262626;
   --secondary-foreground: #f5f5f5;
   --destructive: #ef4444;
   --destructive-foreground: #ffffff;
@@ -172,6 +172,32 @@
   --ring: #c100f1;
 }
 
+[data-theme="mid"] {
+  --background: #737373;
+  --foreground: #fafafa;
+  --card: #525252;
+  --card-foreground: #fafafa;
+  --surface: #525252;
+  --surface-foreground: #fafafa;
+  --border: #a3a3a3;
+  --input: #404040;
+  --muted: #525252;
+  --muted-foreground: #e5e5e5;
+  --accent: #404040;
+  --accent-foreground: #fafafa;
+  --primary: #c100f1;
+  --primary-foreground: #ffffff;
+  --secondary: #525252;
+  --secondary-foreground: #fafafa;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --success: #CDEA19;
+  --success-foreground: #171717;
+  --warning: #fff5bf;
+  --warning-foreground: #171717;
+  --ring: #c100f1;
+}
+
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
 
 @utility display-xl {

package/dist/tokens.d.ts

@@ -69,22 +69,47 @@ declare const tokens: {
             readonly warningForeground: "#171717";
             readonly ring: "#c100f1";
         };
+        readonly mid: {
+            readonly background: "#737373";
+            readonly foreground: "#fafafa";
+            readonly card: "#525252";
+            readonly cardForeground: "#fafafa";
+            readonly surface: "#525252";
+            readonly surfaceForeground: "#fafafa";
+            readonly border: "#a3a3a3";
+            readonly input: "#404040";
+            readonly muted: "#525252";
+            readonly mutedForeground: "#e5e5e5";
+            readonly accent: "#404040";
+            readonly accentForeground: "#fafafa";
+            readonly primary: "#c100f1";
+            readonly primaryForeground: "#ffffff";
+            readonly secondary: "#525252";
+            readonly secondaryForeground: "#fafafa";
+            readonly destructive: "#ef4444";
+            readonly destructiveForeground: "#ffffff";
+            readonly success: "#CDEA19";
+            readonly successForeground: "#171717";
+            readonly warning: "#fff5bf";
+            readonly warningForeground: "#171717";
+            readonly ring: "#c100f1";
+        };
         readonly dark: {
-            readonly background: "#0a0a0a";
+            readonly background: "#171717";
             readonly foreground: "#fafafa";
-            readonly card: "#171717";
+            readonly card: "#262626";
             readonly cardForeground: "#fafafa";
-            readonly surface: "#171717";
+            readonly surface: "#1a1a1a";
             readonly surfaceForeground: "#f5f5f5";
-            readonly border: "#262626";
+            readonly border: "#404040";
             readonly input: "#262626";
-            readonly muted: "#171717";
+            readonly muted: "#262626";
             readonly mutedForeground: "#a3a3a3";
-            readonly accent: "#330040";
-            readonly accentForeground: "#f5d6ff";
+            readonly accent: "#404040";
+            readonly accentForeground: "#fafafa";
             readonly primary: "#c100f1";
             readonly primaryForeground: "#ffffff";
-            readonly secondary: "#171717";
+            readonly secondary: "#262626";
             readonly secondaryForeground: "#f5f5f5";
             readonly destructive: "#ef4444";
             readonly destructiveForeground: "#ffffff";

package/dist/tokens.js

@@ -1,3 +1,3 @@
-export { tokens } from './chunk-ELL3JM3Z.js';
+export { tokens } from './chunk-H6JZQWX3.js';
 //# sourceMappingURL=tokens.js.map
 //# sourceMappingURL=tokens.js.map

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": "1.0.1",
+  "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",