kaleido-ui 0.1.79 → 0.1.81

package/dist/css/kaleido-ui.css

@@ -326,7 +326,7 @@
   --spacing-icon-sm: 14px;
   --spacing-icon-md: 16px;
   --spacing-icon-lg: 18px;
-  --spacing-icon-nav: 22px;
+  --spacing-icon-nav: 1.6875rem;
   --spacing-icon-control: 34px;
 
   /* Border radius */

package/dist/tokens/index.cjs

@@ -331,7 +331,8 @@ var iconBoxSize = {
   sm: "14px",
   md: "16px",
   lg: "18px",
-  nav: "22px",
+  nav: "1.6875rem",
+  // 27px — bottom-nav icons; rem so side-panel font scaling applies
   control: "34px"
 };
 

package/dist/tokens/index.d.cts

@@ -231,7 +231,7 @@ declare const iconBoxSize: {
     readonly sm: "14px";
     readonly md: "16px";
     readonly lg: "18px";
-    readonly nav: "22px";
+    readonly nav: "1.6875rem";
     readonly control: "34px";
 };
 

package/dist/tokens/index.d.ts

@@ -231,7 +231,7 @@ declare const iconBoxSize: {
     readonly sm: "14px";
     readonly md: "16px";
     readonly lg: "18px";
-    readonly nav: "22px";
+    readonly nav: "1.6875rem";
     readonly control: "34px";
 };
 

package/dist/tokens/index.js

@@ -283,7 +283,8 @@ var iconBoxSize = {
   sm: "14px",
   md: "16px",
   lg: "18px",
-  nav: "22px",
+  nav: "1.6875rem",
+  // 27px — bottom-nav icons; rem so side-panel font scaling applies
   control: "34px"
 };
 

package/dist/web/index.cjs

@@ -2768,25 +2768,28 @@ function OptionSelector({
       options,
       onChange,
       className: cn(compact ? "w-auto shrink-0" : "w-full", className),
-      panelClassName: "right-0 left-auto min-w-[11rem]",
-      optionClassName: "px-3 py-2.5",
+      panelClassName: "right-0 left-auto min-w-[11rem] rounded-xl border-0 bg-card",
+      optionClassName: "px-3.5 py-2.5 hover:bg-white/6 data-[selected]:bg-transparent data-[selected]:shadow-none",
       onOpenPanelHeightChange,
       renderTrigger: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "span",
         {
           className: cn(
-            "flex items-center gap-1 rounded-2xl bg-white/[0.09] px-2 py-1.5 text-xs leading-none backdrop-blur-md transition-all hover:bg-white/[0.13]",
+            "flex h-9 min-w-[4.5rem] items-center gap-1.5 rounded-full bg-white/8 px-3.5 text-sm font-semibold leading-none text-foreground transition-colors hover:bg-white/12",
             triggerAlign === "center" ? "justify-center" : "justify-between",
-            open && "bg-white/[0.13]",
-            !compact && "w-full px-3 py-3"
+            open && "bg-primary/15 text-primary hover:bg-primary/15",
+            !compact && "w-full"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate font-bold text-white", children: selected?.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate", children: selected?.label }),
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               Icon,
               {
                 name: "expand_more",
-                className: cn("shrink-0 text-icon-xs text-white/40 transition-transform", open && "rotate-180")
+                className: cn(
+                  "shrink-0 text-icon-xs transition-transform",
+                  open ? "rotate-180 text-primary" : "text-muted-foreground"
+                )
               }
             )
           ]
@@ -2800,13 +2803,13 @@ function OptionSelector({
               "span",
               {
                 className: cn(
-                  "block truncate text-xs",
-                  optionSelected ? "font-bold text-white" : "font-medium text-white/70"
+                  "block truncate text-sm",
+                  optionSelected ? "font-semibold text-primary" : "font-medium text-foreground"
                 ),
                 children: option.label
               }
             ),
-            option.description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "mt-0.5 block truncate text-tiny text-white/35", children: option.description })
+            option.description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "mt-0.5 block truncate text-tiny text-muted-foreground", children: option.description })
           ] })
         ] }),
         optionSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "check", className: "text-icon-sm text-primary" })
@@ -2823,7 +2826,7 @@ function SettingsTile({ icon, title, description, value, onClick }) {
     {
       type: "button",
       onClick,
-      className: "w-full rounded-2xl bg-card p-5 text-left transition-all duration-200 hover:bg-accent active:scale-[0.98]",
+      className: "w-full rounded-2xl bg-card/70 p-5 text-left transition-all duration-200 hover:bg-accent active:scale-[0.98]",
       children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted", children: icon }),
@@ -3148,10 +3151,10 @@ function ExpandIcon({ expanded }) {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: expanded ? "expand_less" : "expand_more", size: "md" });
 }
 var ACCOUNT_ACCENT_BG = {
-  RGB: "bg-gradient-to-br from-primary/[0.06] via-card to-primary/[0.10]",
-  SPARK: "bg-gradient-to-br from-info/[0.06] via-card to-info/[0.10]",
-  ARKADE: "bg-gradient-to-br from-network-arkade/[0.06] via-card to-network-arkade/[0.10]",
-  NOSTR: "bg-gradient-to-br from-network-arkade/[0.06] via-card to-network-arkade/[0.10]"
+  RGB: "bg-gradient-to-br from-primary/[0.06] via-card/70 to-primary/[0.10]",
+  SPARK: "bg-gradient-to-br from-info/[0.06] via-card/70 to-info/[0.10]",
+  ARKADE: "bg-gradient-to-br from-network-arkade/[0.06] via-card/70 to-network-arkade/[0.10]",
+  NOSTR: "bg-gradient-to-br from-network-arkade/[0.06] via-card/70 to-network-arkade/[0.10]"
 };
 function AccountSettingsRow({
   accountId,
@@ -5464,7 +5467,7 @@ function SettingItem({
     "div",
     {
       className: cn(
-        "p-5 rounded-2xl bg-card transition-all duration-200 group",
+        "p-5 rounded-2xl bg-card/70 transition-all duration-200 group",
         isClickable && "cursor-pointer active:scale-[0.98]",
         className
       ),
@@ -5780,7 +5783,7 @@ function BottomSheet({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm",
+        "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg",
         className
       ),
       onClick: handleBackdropClick,
@@ -5788,7 +5791,7 @@ function BottomSheet({
         "div",
         {
           className: cn(
-            "max-h-[90vh] w-full overflow-y-auto rounded-t-2xl border-t border-border bg-background px-4 pb-6 pt-5 shadow-xl animate-in slide-in-from-bottom-4 duration-200",
+            "max-h-[90vh] w-full overflow-y-auto rounded-t-2xl border-t border-border bg-card px-4 pb-6 pt-5 shadow-xl animate-in slide-in-from-bottom-4 duration-200",
             contentClassName
           ),
           children: [
@@ -6177,7 +6180,7 @@ function SettingsSectionCard({
   className,
   bodyClassName
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("section", { className: cn("space-y-4 rounded-xl bg-card p-4", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("section", { className: cn("space-y-4 rounded-xl bg-card/70 p-4", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("h2", { className: "text-sm font-bold text-foreground", children: title }),
@@ -7661,7 +7664,7 @@ function DepositNetworkDefaultModal({
 }) {
   if (!open) return null;
   const options = availableAccounts.map((id) => NETWORK_OPTIONS[id]).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "w-full space-y-4 rounded-t-2xl border-t border-border bg-background px-4 pb-7 pt-5 animate-in slide-in-from-bottom-4 duration-200", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "w-full space-y-4 rounded-t-2xl border-t border-border bg-card px-4 pb-7 pt-5 animate-in slide-in-from-bottom-4 duration-200", children: [
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "-mt-1 mb-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "h-1 w-10 rounded-full bg-white/15" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "text-sm font-bold text-white", children: "Choose your default network" }),

package/dist/web/index.js

@@ -2588,25 +2588,28 @@ function OptionSelector({
       options,
       onChange,
       className: cn(compact ? "w-auto shrink-0" : "w-full", className),
-      panelClassName: "right-0 left-auto min-w-[11rem]",
-      optionClassName: "px-3 py-2.5",
+      panelClassName: "right-0 left-auto min-w-[11rem] rounded-xl border-0 bg-card",
+      optionClassName: "px-3.5 py-2.5 hover:bg-white/6 data-[selected]:bg-transparent data-[selected]:shadow-none",
       onOpenPanelHeightChange,
       renderTrigger: ({ open }) => /* @__PURE__ */ jsxs18(
         "span",
         {
           className: cn(
-            "flex items-center gap-1 rounded-2xl bg-white/[0.09] px-2 py-1.5 text-xs leading-none backdrop-blur-md transition-all hover:bg-white/[0.13]",
+            "flex h-9 min-w-[4.5rem] items-center gap-1.5 rounded-full bg-white/8 px-3.5 text-sm font-semibold leading-none text-foreground transition-colors hover:bg-white/12",
             triggerAlign === "center" ? "justify-center" : "justify-between",
-            open && "bg-white/[0.13]",
-            !compact && "w-full px-3 py-3"
+            open && "bg-primary/15 text-primary hover:bg-primary/15",
+            !compact && "w-full"
           ),
           children: [
-            /* @__PURE__ */ jsx31("span", { className: "truncate font-bold text-white", children: selected?.label }),
+            /* @__PURE__ */ jsx31("span", { className: "truncate", children: selected?.label }),
             /* @__PURE__ */ jsx31(
               Icon,
               {
                 name: "expand_more",
-                className: cn("shrink-0 text-icon-xs text-white/40 transition-transform", open && "rotate-180")
+                className: cn(
+                  "shrink-0 text-icon-xs transition-transform",
+                  open ? "rotate-180 text-primary" : "text-muted-foreground"
+                )
               }
             )
           ]
@@ -2620,13 +2623,13 @@ function OptionSelector({
               "span",
               {
                 className: cn(
-                  "block truncate text-xs",
-                  optionSelected ? "font-bold text-white" : "font-medium text-white/70"
+                  "block truncate text-sm",
+                  optionSelected ? "font-semibold text-primary" : "font-medium text-foreground"
                 ),
                 children: option.label
               }
             ),
-            option.description && /* @__PURE__ */ jsx31("span", { className: "mt-0.5 block truncate text-tiny text-white/35", children: option.description })
+            option.description && /* @__PURE__ */ jsx31("span", { className: "mt-0.5 block truncate text-tiny text-muted-foreground", children: option.description })
           ] })
         ] }),
         optionSelected && /* @__PURE__ */ jsx31(Icon, { name: "check", className: "text-icon-sm text-primary" })
@@ -2643,7 +2646,7 @@ function SettingsTile({ icon, title, description, value, onClick }) {
     {
       type: "button",
       onClick,
-      className: "w-full rounded-2xl bg-card p-5 text-left transition-all duration-200 hover:bg-accent active:scale-[0.98]",
+      className: "w-full rounded-2xl bg-card/70 p-5 text-left transition-all duration-200 hover:bg-accent active:scale-[0.98]",
       children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-3", children: [
         /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
           /* @__PURE__ */ jsx32("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted", children: icon }),
@@ -2968,10 +2971,10 @@ function ExpandIcon({ expanded }) {
   return /* @__PURE__ */ jsx33(Icon, { name: expanded ? "expand_less" : "expand_more", size: "md" });
 }
 var ACCOUNT_ACCENT_BG = {
-  RGB: "bg-gradient-to-br from-primary/[0.06] via-card to-primary/[0.10]",
-  SPARK: "bg-gradient-to-br from-info/[0.06] via-card to-info/[0.10]",
-  ARKADE: "bg-gradient-to-br from-network-arkade/[0.06] via-card to-network-arkade/[0.10]",
-  NOSTR: "bg-gradient-to-br from-network-arkade/[0.06] via-card to-network-arkade/[0.10]"
+  RGB: "bg-gradient-to-br from-primary/[0.06] via-card/70 to-primary/[0.10]",
+  SPARK: "bg-gradient-to-br from-info/[0.06] via-card/70 to-info/[0.10]",
+  ARKADE: "bg-gradient-to-br from-network-arkade/[0.06] via-card/70 to-network-arkade/[0.10]",
+  NOSTR: "bg-gradient-to-br from-network-arkade/[0.06] via-card/70 to-network-arkade/[0.10]"
 };
 function AccountSettingsRow({
   accountId,
@@ -5284,7 +5287,7 @@ function SettingItem({
     "div",
     {
       className: cn(
-        "p-5 rounded-2xl bg-card transition-all duration-200 group",
+        "p-5 rounded-2xl bg-card/70 transition-all duration-200 group",
         isClickable && "cursor-pointer active:scale-[0.98]",
         className
       ),
@@ -5600,7 +5603,7 @@ function BottomSheet({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm",
+        "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg",
         className
       ),
       onClick: handleBackdropClick,
@@ -5608,7 +5611,7 @@ function BottomSheet({
         "div",
         {
           className: cn(
-            "max-h-[90vh] w-full overflow-y-auto rounded-t-2xl border-t border-border bg-background px-4 pb-6 pt-5 shadow-xl animate-in slide-in-from-bottom-4 duration-200",
+            "max-h-[90vh] w-full overflow-y-auto rounded-t-2xl border-t border-border bg-card px-4 pb-6 pt-5 shadow-xl animate-in slide-in-from-bottom-4 duration-200",
             contentClassName
           ),
           children: [
@@ -5997,7 +6000,7 @@ function SettingsSectionCard({
   className,
   bodyClassName
 }) {
-  return /* @__PURE__ */ jsxs56("section", { className: cn("space-y-4 rounded-xl bg-card p-4", className), children: [
+  return /* @__PURE__ */ jsxs56("section", { className: cn("space-y-4 rounded-xl bg-card/70 p-4", className), children: [
     /* @__PURE__ */ jsxs56("div", { className: "flex items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs56("div", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsx70("h2", { className: "text-sm font-bold text-foreground", children: title }),
@@ -7481,7 +7484,7 @@ function DepositNetworkDefaultModal({
 }) {
   if (!open) return null;
   const options = availableAccounts.map((id) => NETWORK_OPTIONS[id]).filter(Boolean);
-  return /* @__PURE__ */ jsx76("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxs62("div", { className: "w-full space-y-4 rounded-t-2xl border-t border-border bg-background px-4 pb-7 pt-5 animate-in slide-in-from-bottom-4 duration-200", children: [
+  return /* @__PURE__ */ jsx76("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg", children: /* @__PURE__ */ jsxs62("div", { className: "w-full space-y-4 rounded-t-2xl border-t border-border bg-card px-4 pb-7 pt-5 animate-in slide-in-from-bottom-4 duration-200", children: [
     /* @__PURE__ */ jsx76("div", { className: "-mt-1 mb-1 flex justify-center", children: /* @__PURE__ */ jsx76("div", { className: "h-1 w-10 rounded-full bg-white/15" }) }),
     /* @__PURE__ */ jsxs62("div", { children: [
       /* @__PURE__ */ jsx76("p", { className: "text-sm font-bold text-white", children: "Choose your default network" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.79",
+  "version": "0.1.81",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",