@almadar/ui 2.24.4 → 2.24.8

package/dist/docs/index.js

@@ -2614,28 +2614,28 @@ var marginYStyles = {
 };
 var bgStyles = {
   transparent: "bg-transparent",
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
-  surface: "bg-[var(--color-card)]",
-  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
 var roundedStyles = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
-  "2xl": "rounded-[var(--radius-xl)]",
-  full: "rounded-[var(--radius-full)]"
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
 var shadowStyles = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]",
-  xl: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
 };
 var displayStyles = {
   block: "block",
@@ -2723,7 +2723,7 @@ var Box = React4.forwardRef(
           // Background
           bgStyles[bg],
           // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          border && "border-[length:var(--border-width)] border-border",
           // Rounded
           roundedStyles[rounded],
           // Shadow
@@ -2830,30 +2830,30 @@ var Stack = ({
 var VStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
 var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h3: "text-2xl font-bold text-[var(--color-foreground)]",
-  h4: "text-xl font-bold text-[var(--color-foreground)]",
-  h5: "text-lg font-bold text-[var(--color-foreground)]",
-  h6: "text-base font-bold text-[var(--color-foreground)]",
-  heading: "text-2xl font-bold text-[var(--color-foreground)]",
-  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
-  body1: "text-base font-normal text-[var(--color-foreground)]",
-  body2: "text-sm font-normal text-[var(--color-foreground)]",
-  body: "text-base font-normal text-[var(--color-foreground)]",
-  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
-  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
-  small: "text-sm font-normal text-[var(--color-foreground)]",
-  large: "text-lg font-medium text-[var(--color-foreground)]",
-  label: "text-sm font-medium text-[var(--color-foreground)]"
+  h1: "text-4xl font-bold tracking-tight text-foreground",
+  h2: "text-3xl font-bold tracking-tight text-foreground",
+  h3: "text-2xl font-bold text-foreground",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
 };
 var colorStyles = {
-  primary: "text-[var(--color-foreground)]",
-  secondary: "text-[var(--color-muted-foreground)]",
-  muted: "text-[var(--color-muted-foreground)]",
-  error: "text-[var(--color-error)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
   inherit: "text-inherit"
 };
 var weightStyles = {
@@ -3016,49 +3016,49 @@ var Icon = ({
 Icon.displayName = "Icon";
 var variantStyles2 = {
   primary: [
-    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-primary text-primary-foreground",
+    "border-none",
+    "shadow-sm",
+    "hover:bg-primary-hover hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-transparent text-accent",
+    "border border-accent",
+    "hover:bg-accent hover:text-white hover:border-accent",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
-    "bg-transparent text-[var(--color-muted-foreground)]",
-    "hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+    "bg-transparent text-muted-foreground",
+    "hover:text-foreground hover:bg-muted",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-error)] hover:text-[var(--color-error-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error",
+    "shadow-sm",
+    "hover:bg-error hover:text-error-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-success)] hover:text-[var(--color-success-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success",
+    "shadow-sm",
+    "hover:bg-success hover:text-success-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning",
+    "shadow-sm",
+    "hover:bg-warning hover:text-warning-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   // "default" is an alias for secondary
   default: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-secondary text-secondary-foreground",
+    "border-[length:var(--border-width-thin)] border-border",
+    "hover:bg-secondary-hover",
     "active:scale-[var(--active-scale)]"
   ].join(" ")
 };
@@ -3129,9 +3129,10 @@ var Button = React4.forwardRef(
         className: cn(
           "inline-flex items-center justify-center gap-2",
           "font-[var(--font-weight-medium)]",
-          "rounded-[var(--radius-sm)]",
+          "rounded-sm",
+          "cursor-pointer",
           "transition-all duration-[var(--transition-normal)]",
-          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-offset-[length:var(--focus-ring-offset)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           variantStyles2[variant],
           sizeStyles2[size],
@@ -3152,32 +3153,34 @@ var Button = React4.forwardRef(
 Button.displayName = "Button";
 var variantStyles3 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)]"
+    "hover:shadow-lg"
   ].join(" ")
 };
 var paddingStyles2 = {
@@ -3188,9 +3191,9 @@ var paddingStyles2 = {
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg"
 };
 var Card = React4.forwardRef(
   ({
@@ -3208,7 +3211,7 @@ var Card = React4.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-[var(--radius-md)]",
+          "rounded-md",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles3[variant],
           paddingStyles2[padding],
@@ -3218,8 +3221,8 @@ var Card = React4.forwardRef(
         ...props,
         children: [
           (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-[var(--color-card-foreground)] font-[var(--font-weight-bold)]", children: title }),
-            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
+            title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-card-foreground font-[var(--font-weight-bold)]", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] }),
           children
         ]
@@ -3235,7 +3238,7 @@ var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "text-lg text-[var(--color-card-foreground)]",
+      "text-lg text-card-foreground",
       "font-[var(--font-weight-bold)]",
       className
     ),
@@ -3272,7 +3275,7 @@ var Divider = ({
       "div",
       {
         className: cn(
-          "w-0 h-full border-l border-[var(--color-border)]",
+          "w-0 h-full border-l border-border",
           variantStyles4[variant],
           className
         ),
@@ -3293,17 +3296,17 @@ var Divider = ({
             "div",
             {
               className: cn(
-                "flex-1 h-0 border-t border-[var(--color-border)]",
+                "flex-1 h-0 border-t border-border",
                 variantStyles4[variant]
               )
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--color-foreground)] font-bold uppercase tracking-wide", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground font-bold uppercase tracking-wide", children: label }),
           /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "flex-1 h-0 border-t border-[var(--color-border)]",
+                "flex-1 h-0 border-t border-border",
                 variantStyles4[variant]
               )
             }
@@ -3316,7 +3319,7 @@ var Divider = ({
     "div",
     {
       className: cn(
-        "w-full h-0 border-t border-[var(--color-border)] my-4",
+        "w-full h-0 border-t border-border my-4",
         variantStyles4[variant],
         className
       ),
@@ -3347,21 +3350,21 @@ var Input = React4.forwardRef(
     const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-4 w-4" });
     const showClearButton = clearable && value && String(value).length > 0;
     const baseClassName = cn(
-      "block w-full rounded-[var(--radius-sm)] transition-all duration-[var(--transition-fast)]",
-      "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+      "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
+      "border-[length:var(--border-width-thin)] border-border",
       "px-3 py-2 text-sm",
-      "bg-[var(--color-card)] hover:bg-[var(--color-muted)] focus:bg-[var(--color-card)]",
-      "text-[var(--color-foreground)] placeholder:text-[var(--color-muted-foreground)]",
-      "focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[var(--color-ring)]",
-      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[var(--color-muted)]",
-      error ? "border-[var(--color-error)] focus:border-[var(--color-error)] focus:ring-[var(--color-error)]" : "",
+      "bg-card hover:bg-muted focus:bg-card",
+      "text-foreground placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring",
+      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted",
+      error ? "border-error focus:border-error focus:ring-error" : "",
       resolvedLeftIcon && "pl-10",
       (rightIcon || showClearButton) && "pr-10",
       className
     );
     if (type === "select") {
       return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+        resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
         /* @__PURE__ */ jsxs(
           "select",
           {
@@ -3376,7 +3379,7 @@ var Input = React4.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
       ] });
     }
     if (type === "textarea") {
@@ -3401,9 +3404,9 @@ var Input = React4.forwardRef(
           checked: props.checked,
           onChange,
           className: cn(
-            "h-4 w-4 rounded-[var(--radius-sm)]",
-            "border-[var(--color-border)]",
-            "text-[var(--color-primary)] focus:ring-[var(--color-ring)]",
+            "h-4 w-4 rounded-sm",
+            "border-border",
+            "text-primary focus:ring-ring",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             className
           ),
@@ -3412,7 +3415,7 @@ var Input = React4.forwardRef(
       );
     }
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+      resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -3429,11 +3432,11 @@ var Input = React4.forwardRef(
         {
           type: "button",
           onClick: onClear,
-          className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+          className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       ),
-      rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)]", children: rightIcon })
+      rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
     ] });
   }
 );
@@ -3453,8 +3456,8 @@ var DocSidebarCategory = ({ item, depth }) => {
           gap: "sm",
           align: "center",
           className: cn(
-            "cursor-pointer select-none rounded-[var(--radius-sm)] px-2 py-1.5",
-            "hover:bg-[var(--color-muted)]",
+            "cursor-pointer select-none rounded-sm px-2 py-1.5",
+            "hover:bg-muted",
             depth > 0 && "pl-4"
           ),
           onClick: () => setExpanded((prev) => !prev),
@@ -3472,14 +3475,14 @@ var DocSidebarCategory = ({ item, depth }) => {
               {
                 name: expanded ? "chevron-down" : "chevron-right",
                 size: "xs",
-                className: "text-[var(--color-muted-foreground)] shrink-0"
+                className: "text-muted-foreground shrink-0"
               }
             ),
             /* @__PURE__ */ jsx(
               Typography,
               {
                 variant: "caption",
-                className: "text-xs uppercase tracking-wider text-[var(--color-muted-foreground)] font-semibold",
+                className: "text-xs uppercase tracking-wider text-muted-foreground font-semibold",
                 as: "span",
                 children: item.label
               }
@@ -3494,10 +3497,10 @@ var DocSidebarCategory = ({ item, depth }) => {
     Box,
     {
       className: cn(
-        "block rounded-[var(--radius-sm)] px-3 py-1.5 text-sm transition-colors no-underline cursor-pointer",
-        "hover:bg-[var(--color-muted)]",
+        "block rounded-sm px-3 py-1.5 text-sm transition-colors no-underline cursor-pointer",
+        "hover:bg-muted",
         depth > 0 && "ml-2",
-        item.active ? "bg-[var(--color-primary)]/8 text-[var(--color-primary)] font-semibold" : "text-[var(--color-muted-foreground)]"
+        item.active ? "bg-primary/8 text-primary font-semibold" : "text-muted-foreground"
       ),
       onClick: () => {
         if (item.href) window.location.href = item.href;
@@ -3509,7 +3512,7 @@ var DocSidebarCategory = ({ item, depth }) => {
         {
           variant: "body2",
           className: cn(
-            item.active ? "text-[var(--color-primary)] font-semibold" : "text-[var(--color-muted-foreground)]"
+            item.active ? "text-primary font-semibold" : "text-muted-foreground"
           ),
           as: "span",
           children: item.label
@@ -3554,7 +3557,7 @@ var DocTOC = ({
               "block py-1.5 no-underline transition-colors border-l-2 cursor-pointer",
               "pl-3",
               indent,
-              isActive ? "border-l-[var(--color-primary)]" : "border-l-transparent hover:border-l-[var(--color-muted)]"
+              isActive ? "border-l-primary" : "border-l-transparent hover:border-l-[var(--color-muted)]"
             ),
             onClick: () => {
               const el = document.getElementById(item.id);
@@ -3568,7 +3571,7 @@ var DocTOC = ({
                 variant: "caption",
                 className: cn(
                   "transition-colors",
-                  isActive ? "text-[var(--color-primary)] font-medium" : "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]"
+                  isActive ? "text-primary font-medium" : "text-muted-foreground hover:text-foreground"
                 ),
                 as: "span",
                 children: item.label
@@ -3600,7 +3603,7 @@ var DocBreadcrumb = ({
             {
               name: "chevron-right",
               size: "xs",
-              className: "text-[var(--color-muted-foreground)] shrink-0"
+              className: "text-muted-foreground shrink-0"
             }
           ),
           isLast || !item.href ? /* @__PURE__ */ jsx(
@@ -3608,7 +3611,7 @@ var DocBreadcrumb = ({
             {
               variant: "caption",
               className: cn(
-                isLast ? "text-[var(--color-foreground)] font-medium" : "text-[var(--color-muted-foreground)]"
+                isLast ? "text-foreground font-medium" : "text-muted-foreground"
               ),
               as: "span",
               children: item.label
@@ -3626,7 +3629,7 @@ var DocBreadcrumb = ({
                 Typography,
                 {
                   variant: "caption",
-                  className: "text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors cursor-pointer",
+                  className: "text-muted-foreground hover:text-primary transition-colors cursor-pointer",
                   as: "span",
                   children: item.label
                 }
@@ -3658,7 +3661,7 @@ function DocCodeBlock({
     Box,
     {
       className: cn(
-        "rounded-[var(--radius-md)] border border-[var(--color-border)] overflow-hidden",
+        "rounded-md border border-border overflow-hidden",
         className
       ),
       position: "relative",
@@ -3668,7 +3671,7 @@ function DocCodeBlock({
           {
             align: "center",
             justify: "between",
-            className: "bg-[var(--color-muted)] px-4 py-2 border-b border-[var(--color-border)]",
+            className: "bg-muted px-4 py-2 border-b border-border",
             children: [
               /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "sm", children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: title }),
@@ -3697,11 +3700,11 @@ function DocCodeBlock({
             children: copied ? "Copied!" : "Copy"
           }
         ) }) : null,
-        /* @__PURE__ */ jsxs(HStack, { gap: "none", className: "bg-[var(--color-foreground)] overflow-x-auto", children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: "none", className: "bg-foreground overflow-x-auto", children: [
           showLineNumbers ? /* @__PURE__ */ jsx(
             Box,
             {
-              className: "py-4 pl-4 pr-3 select-none border-r border-[var(--color-border)] flex-shrink-0",
+              className: "py-4 pl-4 pr-3 select-none border-r border-border flex-shrink-0",
               children: lines.map((_, i) => /* @__PURE__ */ jsx(
                 Typography,
                 {
@@ -3720,7 +3723,7 @@ function DocCodeBlock({
             {
               as: "pre",
               className: cn(
-                "p-4 font-mono text-sm text-[var(--color-background)] leading-6 flex-1 min-w-0",
+                "p-4 font-mono text-sm text-background leading-6 flex-1 min-w-0",
                 !title && "pr-24"
               ),
               children: /* @__PURE__ */ jsx(Box, { as: "code", className: "whitespace-pre", children: code })
@@ -3732,12 +3735,12 @@ function DocCodeBlock({
   );
 }
 var linkCardStyles = [
-  "border border-[var(--color-border)]",
-  "rounded-[var(--radius-md)]",
+  "border border-border",
+  "rounded-md",
   "p-4",
   "transition-all",
-  "hover:border-[var(--color-primary)]",
-  "hover:shadow-[var(--shadow-hover)]",
+  "hover:border-primary",
+  "hover:shadow-lg",
   "no-underline",
   "flex-1",
   "min-w-0",
@@ -3763,14 +3766,14 @@ function DocPagination({ prev, next, className }) {
             role: "link",
             tabIndex: 0,
             children: /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "sm", children: [
-              /* @__PURE__ */ jsx(Icon, { name: "arrow-left", size: "md", className: "text-[var(--color-muted-foreground)] group-hover:text-[var(--color-primary)] transition-colors flex-shrink-0" }),
+              /* @__PURE__ */ jsx(Icon, { name: "arrow-left", size: "md", className: "text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0" }),
               /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "start", children: [
                 prev.category ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: prev.category }) : null,
                 /* @__PURE__ */ jsx(
                   Typography,
                   {
                     variant: "body",
-                    className: "group-hover:text-[var(--color-primary)] transition-colors",
+                    className: "group-hover:text-primary transition-colors",
                     children: prev.label
                   }
                 )
@@ -3794,12 +3797,12 @@ function DocPagination({ prev, next, className }) {
                   Typography,
                   {
                     variant: "body",
-                    className: "group-hover:text-[var(--color-primary)] transition-colors",
+                    className: "group-hover:text-primary transition-colors",
                     children: next.label
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: "md", className: "text-[var(--color-muted-foreground)] group-hover:text-[var(--color-primary)] transition-colors flex-shrink-0" })
+              /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: "md", className: "text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0" })
             ] })
           }
         ) : /* @__PURE__ */ jsx(Box, { className: "flex-1" })
@@ -3923,7 +3926,7 @@ function DocSearch({
             onChange: handleChange,
             onFocus: handleFocus,
             onKeyDown: handleKeyDown,
-            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "search", size: "sm", className: "text-[var(--color-muted-foreground)]" }),
+            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "search", size: "sm", className: "text-muted-foreground" }),
             clearable: query.length > 0,
             onClear: () => {
               setQuery("");
@@ -3936,15 +3939,15 @@ function DocSearch({
           Box,
           {
             position: "absolute",
-            className: "top-full left-0 right-0 mt-1 z-50 bg-[var(--color-card)] border border-[var(--color-border)] rounded-[var(--radius-md)] shadow-[var(--shadow-lg)] max-h-80 overflow-y-auto",
+            className: "top-full left-0 right-0 mt-1 z-50 bg-card border border-border rounded-md shadow-lg max-h-80 overflow-y-auto",
             children: /* @__PURE__ */ jsx(VStack, { gap: "none", children: results.map((result, index) => /* @__PURE__ */ jsx(
               Box,
               {
                 className: cn(
                   "px-4 py-3 cursor-pointer transition-colors",
-                  "hover:bg-[var(--color-muted)]",
-                  index === activeIndex && "bg-[var(--color-muted)]",
-                  index < results.length - 1 && "border-b border-[var(--color-border)]"
+                  "hover:bg-muted",
+                  index === activeIndex && "bg-muted",
+                  index < results.length - 1 && "border-b border-border"
                 ),
                 onClick: () => navigateTo(result.href),
                 role: "option",