kaleido-ui 0.1.0 → 0.1.2

package/dist/web/index.cjs

@@ -101,16 +101,16 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-glow-subtle hover:shadow-glow",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground hover:border-primary/30",
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-white/5 hover:text-foreground",
+        ghost: "hover:bg-accent hover:text-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        glow: "bg-primary text-primary-foreground shadow-glow hover:shadow-glow-strong animate-pulse-glow",
-        surface: "bg-card text-card-foreground border border-border hover:bg-accent hover:border-primary/30",
-        cta: "w-full bg-primary hover:bg-primary-dark text-primary-foreground font-bold rounded-2xl shadow-glow-accent disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
-        "cta-gradient": "w-full bg-gradient-to-r from-primary to-primary-dark text-primary-foreground font-extrabold rounded-2xl shadow-[0_8px_30px_rgba(43,238,121,0.35)] hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 active:opacity-100 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed disabled:bg-surface-highlight disabled:text-white/50",
+        glow: "bg-primary text-primary-foreground shadow-md",
+        surface: "bg-card text-card-foreground border border-border hover:bg-accent",
+        cta: "w-full bg-primary hover:bg-primary/90 text-primary-foreground font-bold rounded-2xl shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
+        "cta-gradient": "w-full bg-gradient-to-r from-primary to-primary/80 text-primary-foreground font-extrabold rounded-2xl shadow-lg hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 active:opacity-100 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed disabled:bg-accent disabled:text-muted-foreground",
         "danger-subtle": "w-full bg-red-500/10 border border-red-500/20 text-red-400 font-bold rounded-xl hover:bg-red-500/20"
       },
       size: {
@@ -201,7 +201,7 @@ var Input = React3.forwardRef(
       {
         type,
         className: cn(
-          "flex h-12 w-full rounded-xl border border-border bg-card px-4 py-3 text-base ring-offset-background transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-12 w-full rounded-xl border border-border bg-card px-4 py-3 text-base ring-offset-background transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -396,8 +396,8 @@ var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ref,
     className: cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      "hover:text-foreground hover:bg-white/5",
-      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-glow-subtle",
+      "hover:text-foreground hover:bg-accent",
+      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
       className
     ),
     ...props
@@ -458,7 +458,7 @@ var toastVariants = (0, import_class_variance_authority3.cva)(
   {
     variants: {
       variant: {
-        default: "border-white/10 bg-surface-dark/95 text-white",
+        default: "border-border bg-card/95 text-foreground",
         destructive: "border-red-500/20 bg-red-500/10 text-red-400"
       }
     },
@@ -495,7 +495,7 @@ var ToastClose = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "absolute right-2 top-2 rounded-full p-1 text-white/50 opacity-100 transition-all hover:text-white hover:bg-white/10 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:hover:bg-red-500/20 group-[.destructive]:focus:ring-red-400",
+      "absolute right-2 top-2 rounded-full p-1 text-muted-foreground opacity-100 transition-all hover:text-foreground hover:bg-accent focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:hover:bg-red-500/20 group-[.destructive]:focus:ring-red-400",
       className
     ),
     "toast-close": "",
@@ -508,7 +508,7 @@ var ToastTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   ToastPrimitives.Title,
   {
     ref,
-    className: cn("text-sm font-semibold text-white", className),
+    className: cn("text-sm font-semibold text-foreground", className),
     ...props
   }
 ));
@@ -517,7 +517,7 @@ var ToastDescription = React7.forwardRef(({ className, ...props }, ref) => /* @_
   ToastPrimitives.Description,
   {
     ref,
-    className: cn("text-xs text-white/70", className),
+    className: cn("text-xs text-muted-foreground", className),
     ...props
   }
 ));
@@ -642,7 +642,7 @@ function ToastWithProgress({ id, title, description, action, duration = 4e3, var
     if (variant === "destructive") {
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "error", size: "md", className: "text-red-400" });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check_circle", size: "md", className: "text-primary" });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "check_circle", size: "md", className: "text-foreground" });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Toast, { ...props, variant, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
@@ -939,7 +939,7 @@ function AssetIcon({ ticker, logoUri, cdnBaseUrl, size = 40, className }) {
     "div",
     {
       className: cn(
-        "rounded-full flex items-center justify-center font-bold text-white shadow-inner border border-white/10",
+        "rounded-full flex items-center justify-center font-bold text-foreground shadow-inner border border-border",
         bgColor,
         className
       ),
@@ -966,8 +966,8 @@ function AssetCard({
     "div",
     {
       className: cn(
-        "p-4 rounded-card bg-background-dark/40 backdrop-blur-xl border border-white/5 transition-all shadow-sm relative overflow-hidden group",
-        onClick && "cursor-pointer hover:border-primary/40 hover:shadow-glow-subtle active:scale-[0.98]",
+        "p-4 rounded-card bg-background/40 backdrop-blur-xl border border-border transition-all shadow-sm relative overflow-hidden group",
+        onClick && "cursor-pointer hover:border-primary/40 active:scale-[0.98]",
         className
       ),
       onClick,
@@ -989,7 +989,7 @@ function AssetCard({
                 "span",
                 {
                   className: cn(
-                    "font-bold text-base leading-tight tracking-wide text-white",
+                    "font-bold text-base leading-tight tracking-wide text-foreground",
                     onClick && "group-hover:text-primary transition-colors"
                   ),
                   children: name
@@ -999,8 +999,8 @@ function AssetCard({
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold text-base tracking-tight text-white group-hover:text-white/90 transition-colors", children: shown }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-tiny text-slate-400 font-medium tracking-wide uppercase mt-0.5", children: ticker })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold text-base tracking-tight text-foreground group-hover:opacity-90 transition-colors", children: shown }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: ticker })
           ] })
         ] })
       ]
@@ -1025,8 +1025,8 @@ function TransactionCard({
     "div",
     {
       className: cn(
-        "p-4 rounded-card bg-background-dark/40 backdrop-blur-xl border border-white/5 flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
-        onClick && "cursor-pointer hover:border-primary/40 hover:shadow-glow-subtle active:scale-[0.98]",
+        "p-4 rounded-card bg-background/40 backdrop-blur-xl border border-border flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
+        onClick && "cursor-pointer hover:border-primary/40 active:scale-[0.98]",
         className
       ),
       onClick,
@@ -1038,7 +1038,7 @@ function TransactionCard({
             {
               className: cn(
                 "size-11 rounded-full flex items-center justify-center shadow-inner group-hover:scale-105 transition-transform",
-                isInbound ? "bg-primary/20 text-primary border border-primary/20" : "bg-white/5 text-slate-300 border border-white/10"
+                isInbound ? "bg-primary/20 text-primary border border-primary/20" : "bg-accent text-muted-foreground border border-border"
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: isInbound ? "arrow_downward" : "arrow_outward" })
             }
@@ -1048,7 +1048,7 @@ function TransactionCard({
               "span",
               {
                 className: cn(
-                  "font-bold text-sm text-white tracking-wide",
+                  "font-bold text-sm text-foreground tracking-wide",
                   onClick && "group-hover:text-primary transition-colors"
                 ),
                 children: isInbound ? "Received" : "Sent"
@@ -1056,7 +1056,7 @@ function TransactionCard({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StatusBadge, { status, className: "text-xxs px-1.5 py-0.5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-tiny text-slate-400 font-medium tracking-wide", children: formatDate(timestamp) })
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-tiny text-muted-foreground font-medium tracking-wide", children: formatDate(timestamp) })
             ] })
           ] })
         ] }),
@@ -1066,7 +1066,7 @@ function TransactionCard({
             {
               className: cn(
                 "font-bold text-base tracking-tight group-hover:opacity-90 transition-opacity",
-                isInbound ? "text-primary" : "text-white"
+                isInbound ? "text-primary" : "text-foreground"
               ),
               children: [
                 isInbound ? "+" : "-",
@@ -1074,7 +1074,7 @@ function TransactionCard({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-tiny text-slate-400 font-medium tracking-wide uppercase mt-0.5", children: unit })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: unit })
         ] })
       ]
     }
@@ -1085,14 +1085,14 @@ function TransactionCard({
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function PageHeader({ left, title, right, borderClassName = "border-border" }) {
   if (!title) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background-dark/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex shrink-0 items-center", children: left }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ml-auto flex min-w-0 items-center justify-end gap-2", children: right })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background-dark/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex min-w-0 flex-1 items-center", children: left }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-bold text-body text-white shrink-0", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-bold text-body text-foreground shrink-0", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: right })
   ] });
 }
@@ -1116,8 +1116,8 @@ function SettingItem({
     "div",
     {
       className: cn(
-        "p-5 rounded-2xl glass-panel border border-white/10 shadow-inner transition-all duration-200",
-        isClickable && "cursor-pointer hover:bg-white/5 active:scale-[0.98]",
+        "p-5 rounded-2xl bg-card border border-border transition-all duration-200",
+        isClickable && "cursor-pointer hover:bg-accent active:scale-[0.98]",
         className
       ),
       onClick,
@@ -1127,20 +1127,20 @@ function SettingItem({
             "div",
             {
               className: cn(
-                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-black/20 shadow-inner border border-white/5",
+                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-muted border border-border",
                 iconColor
               ),
               children: iconSrc ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: iconSrc, alt: iconAlt ?? title, className: "size-5 object-contain" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-symbols-outlined text-[20px]", children: icon })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-bold text-body text-white tracking-wide", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm text-slate-400 mt-0.5 font-medium", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-bold text-body text-foreground tracking-wide", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm text-muted-foreground mt-0.5 font-medium", children: description })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-          value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-slate-400 font-mono", children: value }),
-          showChevron && isClickable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-symbols-outlined text-[16px] text-slate-500", children: "chevron_right" })
+          value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground font-mono", children: value }),
+          showChevron && isClickable && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-symbols-outlined text-[16px] text-muted-foreground", children: "chevron_right" })
         ] })
       ] })
     }
@@ -1150,7 +1150,13 @@ function SettingItem({
 // src/web/components/section-label.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function SectionLabel({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("text-xxs font-black uppercase tracking-[0.22em] text-white/30", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "span",
+    {
+      className: cn("text-xxs font-black uppercase tracking-[0.22em] text-muted-foreground", className),
+      children
+    }
+  );
 }
 
 // src/web/components/alert-banner.tsx
@@ -1201,10 +1207,10 @@ var ErrorBoundary = class extends import_react4.Component {
   }
   render() {
     if (this.state.hasError) {
-      return this.props.fallback ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-h-screen bg-background-dark text-white font-display flex flex-col items-center justify-center p-6 gap-4", children: [
+      return this.props.fallback ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-h-screen bg-background text-foreground font-display flex flex-col items-center justify-center p-6 gap-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "material-symbols-outlined text-red-400 text-[48px]", children: "error" }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-lg font-bold", children: "Something went wrong" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-white/50 text-center", children: this.state.error?.message ?? "An unexpected error occurred." }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground text-center", children: this.state.error?.message ?? "An unexpected error occurred." }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
@@ -1212,7 +1218,7 @@ var ErrorBoundary = class extends import_react4.Component {
               this.setState({ hasError: false, error: null });
               this.props.onReset?.();
             },
-            className: "px-6 py-3 rounded-xl bg-primary text-black font-bold hover:bg-primary/90 transition-all",
+            className: "px-6 py-3 rounded-xl bg-primary text-primary-foreground font-bold hover:bg-primary/90 transition-all",
             children: "Try Again"
           }
         )

package/dist/web/index.js

@@ -17,16 +17,16 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-glow-subtle hover:shadow-glow",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground hover:border-primary/30",
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-white/5 hover:text-foreground",
+        ghost: "hover:bg-accent hover:text-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        glow: "bg-primary text-primary-foreground shadow-glow hover:shadow-glow-strong animate-pulse-glow",
-        surface: "bg-card text-card-foreground border border-border hover:bg-accent hover:border-primary/30",
-        cta: "w-full bg-primary hover:bg-primary-dark text-primary-foreground font-bold rounded-2xl shadow-glow-accent disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
-        "cta-gradient": "w-full bg-gradient-to-r from-primary to-primary-dark text-primary-foreground font-extrabold rounded-2xl shadow-[0_8px_30px_rgba(43,238,121,0.35)] hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 active:opacity-100 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed disabled:bg-surface-highlight disabled:text-white/50",
+        glow: "bg-primary text-primary-foreground shadow-md",
+        surface: "bg-card text-card-foreground border border-border hover:bg-accent",
+        cta: "w-full bg-primary hover:bg-primary/90 text-primary-foreground font-bold rounded-2xl shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
+        "cta-gradient": "w-full bg-gradient-to-r from-primary to-primary/80 text-primary-foreground font-extrabold rounded-2xl shadow-lg hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 active:opacity-100 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed disabled:bg-accent disabled:text-muted-foreground",
         "danger-subtle": "w-full bg-red-500/10 border border-red-500/20 text-red-400 font-bold rounded-xl hover:bg-red-500/20"
       },
       size: {
@@ -117,7 +117,7 @@ var Input = React3.forwardRef(
       {
         type,
         className: cn(
-          "flex h-12 w-full rounded-xl border border-border bg-card px-4 py-3 text-base ring-offset-background transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-12 w-full rounded-xl border border-border bg-card px-4 py-3 text-base ring-offset-background transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -312,8 +312,8 @@ var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ref,
     className: cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      "hover:text-foreground hover:bg-white/5",
-      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-glow-subtle",
+      "hover:text-foreground hover:bg-accent",
+      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
       className
     ),
     ...props
@@ -374,7 +374,7 @@ var toastVariants = cva3(
   {
     variants: {
       variant: {
-        default: "border-white/10 bg-surface-dark/95 text-white",
+        default: "border-border bg-card/95 text-foreground",
         destructive: "border-red-500/20 bg-red-500/10 text-red-400"
       }
     },
@@ -411,7 +411,7 @@ var ToastClose = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "absolute right-2 top-2 rounded-full p-1 text-white/50 opacity-100 transition-all hover:text-white hover:bg-white/10 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:hover:bg-red-500/20 group-[.destructive]:focus:ring-red-400",
+      "absolute right-2 top-2 rounded-full p-1 text-muted-foreground opacity-100 transition-all hover:text-foreground hover:bg-accent focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:hover:bg-red-500/20 group-[.destructive]:focus:ring-red-400",
       className
     ),
     "toast-close": "",
@@ -424,7 +424,7 @@ var ToastTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   ToastPrimitives.Title,
   {
     ref,
-    className: cn("text-sm font-semibold text-white", className),
+    className: cn("text-sm font-semibold text-foreground", className),
     ...props
   }
 ));
@@ -433,7 +433,7 @@ var ToastDescription = React7.forwardRef(({ className, ...props }, ref) => /* @_
   ToastPrimitives.Description,
   {
     ref,
-    className: cn("text-xs text-white/70", className),
+    className: cn("text-xs text-muted-foreground", className),
     ...props
   }
 ));
@@ -558,7 +558,7 @@ function ToastWithProgress({ id, title, description, action, duration = 4e3, var
     if (variant === "destructive") {
       return /* @__PURE__ */ jsx9(Icon, { name: "error", size: "md", className: "text-red-400" });
     }
-    return /* @__PURE__ */ jsx9(Icon, { name: "check_circle", size: "md", className: "text-primary" });
+    return /* @__PURE__ */ jsx9(Icon, { name: "check_circle", size: "md", className: "text-foreground" });
   };
   return /* @__PURE__ */ jsxs2(Toast, { ...props, variant, children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3 flex-1", children: [
@@ -855,7 +855,7 @@ function AssetIcon({ ticker, logoUri, cdnBaseUrl, size = 40, className }) {
     "div",
     {
       className: cn(
-        "rounded-full flex items-center justify-center font-bold text-white shadow-inner border border-white/10",
+        "rounded-full flex items-center justify-center font-bold text-foreground shadow-inner border border-border",
         bgColor,
         className
       ),
@@ -882,8 +882,8 @@ function AssetCard({
     "div",
     {
       className: cn(
-        "p-4 rounded-card bg-background-dark/40 backdrop-blur-xl border border-white/5 transition-all shadow-sm relative overflow-hidden group",
-        onClick && "cursor-pointer hover:border-primary/40 hover:shadow-glow-subtle active:scale-[0.98]",
+        "p-4 rounded-card bg-background/40 backdrop-blur-xl border border-border transition-all shadow-sm relative overflow-hidden group",
+        onClick && "cursor-pointer hover:border-primary/40 active:scale-[0.98]",
         className
       ),
       onClick,
@@ -905,7 +905,7 @@ function AssetCard({
                 "span",
                 {
                   className: cn(
-                    "font-bold text-base leading-tight tracking-wide text-white",
+                    "font-bold text-base leading-tight tracking-wide text-foreground",
                     onClick && "group-hover:text-primary transition-colors"
                   ),
                   children: name
@@ -915,8 +915,8 @@ function AssetCard({
             ] })
           ] }),
           /* @__PURE__ */ jsxs5("div", { className: "text-right", children: [
-            /* @__PURE__ */ jsx13("p", { className: "font-bold text-base tracking-tight text-white group-hover:text-white/90 transition-colors", children: shown }),
-            /* @__PURE__ */ jsx13("p", { className: "text-tiny text-slate-400 font-medium tracking-wide uppercase mt-0.5", children: ticker })
+            /* @__PURE__ */ jsx13("p", { className: "font-bold text-base tracking-tight text-foreground group-hover:opacity-90 transition-colors", children: shown }),
+            /* @__PURE__ */ jsx13("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: ticker })
           ] })
         ] })
       ]
@@ -941,8 +941,8 @@ function TransactionCard({
     "div",
     {
       className: cn(
-        "p-4 rounded-card bg-background-dark/40 backdrop-blur-xl border border-white/5 flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
-        onClick && "cursor-pointer hover:border-primary/40 hover:shadow-glow-subtle active:scale-[0.98]",
+        "p-4 rounded-card bg-background/40 backdrop-blur-xl border border-border flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
+        onClick && "cursor-pointer hover:border-primary/40 active:scale-[0.98]",
         className
       ),
       onClick,
@@ -954,7 +954,7 @@ function TransactionCard({
             {
               className: cn(
                 "size-11 rounded-full flex items-center justify-center shadow-inner group-hover:scale-105 transition-transform",
-                isInbound ? "bg-primary/20 text-primary border border-primary/20" : "bg-white/5 text-slate-300 border border-white/10"
+                isInbound ? "bg-primary/20 text-primary border border-primary/20" : "bg-accent text-muted-foreground border border-border"
               ),
               children: /* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined text-[20px]", children: isInbound ? "arrow_downward" : "arrow_outward" })
             }
@@ -964,7 +964,7 @@ function TransactionCard({
               "span",
               {
                 className: cn(
-                  "font-bold text-sm text-white tracking-wide",
+                  "font-bold text-sm text-foreground tracking-wide",
                   onClick && "group-hover:text-primary transition-colors"
                 ),
                 children: isInbound ? "Received" : "Sent"
@@ -972,7 +972,7 @@ function TransactionCard({
             ),
             /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mt-1", children: [
               /* @__PURE__ */ jsx14(StatusBadge, { status, className: "text-xxs px-1.5 py-0.5" }),
-              /* @__PURE__ */ jsx14("span", { className: "text-tiny text-slate-400 font-medium tracking-wide", children: formatDate(timestamp) })
+              /* @__PURE__ */ jsx14("span", { className: "text-tiny text-muted-foreground font-medium tracking-wide", children: formatDate(timestamp) })
             ] })
           ] })
         ] }),
@@ -982,7 +982,7 @@ function TransactionCard({
             {
               className: cn(
                 "font-bold text-base tracking-tight group-hover:opacity-90 transition-opacity",
-                isInbound ? "text-primary" : "text-white"
+                isInbound ? "text-primary" : "text-foreground"
               ),
               children: [
                 isInbound ? "+" : "-",
@@ -990,7 +990,7 @@ function TransactionCard({
               ]
             }
           ),
-          /* @__PURE__ */ jsx14("p", { className: "text-tiny text-slate-400 font-medium tracking-wide uppercase mt-0.5", children: unit })
+          /* @__PURE__ */ jsx14("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: unit })
         ] })
       ]
     }
@@ -1001,14 +1001,14 @@ function TransactionCard({
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function PageHeader({ left, title, right, borderClassName = "border-border" }) {
   if (!title) {
-    return /* @__PURE__ */ jsxs7("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background-dark/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
+    return /* @__PURE__ */ jsxs7("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
       /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 items-center", children: left }),
       /* @__PURE__ */ jsx15("div", { className: "ml-auto flex min-w-0 items-center justify-end gap-2", children: right })
     ] });
   }
-  return /* @__PURE__ */ jsxs7("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background-dark/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
+  return /* @__PURE__ */ jsxs7("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
     /* @__PURE__ */ jsx15("div", { className: "flex min-w-0 flex-1 items-center", children: left }),
-    /* @__PURE__ */ jsx15("span", { className: "font-bold text-body text-white shrink-0", children: title }),
+    /* @__PURE__ */ jsx15("span", { className: "font-bold text-body text-foreground shrink-0", children: title }),
     /* @__PURE__ */ jsx15("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: right })
   ] });
 }
@@ -1032,8 +1032,8 @@ function SettingItem({
     "div",
     {
       className: cn(
-        "p-5 rounded-2xl glass-panel border border-white/10 shadow-inner transition-all duration-200",
-        isClickable && "cursor-pointer hover:bg-white/5 active:scale-[0.98]",
+        "p-5 rounded-2xl bg-card border border-border transition-all duration-200",
+        isClickable && "cursor-pointer hover:bg-accent active:scale-[0.98]",
         className
       ),
       onClick,
@@ -1043,20 +1043,20 @@ function SettingItem({
             "div",
             {
               className: cn(
-                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-black/20 shadow-inner border border-white/5",
+                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-muted border border-border",
                 iconColor
               ),
               children: iconSrc ? /* @__PURE__ */ jsx16("img", { src: iconSrc, alt: iconAlt ?? title, className: "size-5 object-contain" }) : /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[20px]", children: icon })
             }
           ),
           /* @__PURE__ */ jsxs8("div", { className: "flex flex-col flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx16("span", { className: "font-bold text-body text-white tracking-wide", children: title }),
-            description && /* @__PURE__ */ jsx16("span", { className: "text-sm text-slate-400 mt-0.5 font-medium", children: description })
+            /* @__PURE__ */ jsx16("span", { className: "font-bold text-body text-foreground tracking-wide", children: title }),
+            description && /* @__PURE__ */ jsx16("span", { className: "text-sm text-muted-foreground mt-0.5 font-medium", children: description })
           ] })
         ] }),
         /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-          value && /* @__PURE__ */ jsx16("span", { className: "text-xs text-slate-400 font-mono", children: value }),
-          showChevron && isClickable && /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[16px] text-slate-500", children: "chevron_right" })
+          value && /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground font-mono", children: value }),
+          showChevron && isClickable && /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[16px] text-muted-foreground", children: "chevron_right" })
         ] })
       ] })
     }
@@ -1066,7 +1066,13 @@ function SettingItem({
 // src/web/components/section-label.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
 function SectionLabel({ children, className }) {
-  return /* @__PURE__ */ jsx17("span", { className: cn("text-xxs font-black uppercase tracking-[0.22em] text-white/30", className), children });
+  return /* @__PURE__ */ jsx17(
+    "span",
+    {
+      className: cn("text-xxs font-black uppercase tracking-[0.22em] text-muted-foreground", className),
+      children
+    }
+  );
 }
 
 // src/web/components/alert-banner.tsx
@@ -1117,10 +1123,10 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.hasError) {
-      return this.props.fallback ?? /* @__PURE__ */ jsxs10("div", { className: "min-h-screen bg-background-dark text-white font-display flex flex-col items-center justify-center p-6 gap-4", children: [
+      return this.props.fallback ?? /* @__PURE__ */ jsxs10("div", { className: "min-h-screen bg-background text-foreground font-display flex flex-col items-center justify-center p-6 gap-4", children: [
         /* @__PURE__ */ jsx19("span", { className: "material-symbols-outlined text-red-400 text-[48px]", children: "error" }),
         /* @__PURE__ */ jsx19("h2", { className: "text-lg font-bold", children: "Something went wrong" }),
-        /* @__PURE__ */ jsx19("p", { className: "text-sm text-white/50 text-center", children: this.state.error?.message ?? "An unexpected error occurred." }),
+        /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground text-center", children: this.state.error?.message ?? "An unexpected error occurred." }),
         /* @__PURE__ */ jsx19(
           "button",
           {
@@ -1128,7 +1134,7 @@ var ErrorBoundary = class extends Component {
               this.setState({ hasError: false, error: null });
               this.props.onReset?.();
             },
-            className: "px-6 py-3 rounded-xl bg-primary text-black font-bold hover:bg-primary/90 transition-all",
+            className: "px-6 py-3 rounded-xl bg-primary text-primary-foreground font-bold hover:bg-primary/90 transition-all",
             children: "Try Again"
           }
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",
@@ -39,6 +39,8 @@
   "scripts": {
     "build": "tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css",
     "dev": "tsup --watch",
+    "showcase": "vite --config showcase/vite.config.ts",
+    "showcase:build": "vite build --config showcase/vite.config.ts",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist"
   },
@@ -96,14 +98,22 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
+    "@tailwindcss/vite": "^4.2.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-native": "^0.72.8",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwind-merge": "^2.6.1",
+    "tailwindcss": "^4.2.4",
     "tsup": "^8.0.0",
-    "typescript": "^5.9.0"
+    "typescript": "^5.9.0",
+    "vite": "^5.4.11"
   },
   "repository": {
     "type": "git",