kaleido-ui 0.1.80 → 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

@@ -2826,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 }),
@@ -3151,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,
@@ -5467,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
       ),
@@ -5783,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,
@@ -5791,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: [
@@ -6180,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 }),
@@ -7664,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

@@ -2646,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 }),
@@ -2971,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,
@@ -5287,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
       ),
@@ -5603,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,
@@ -5611,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: [
@@ -6000,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 }),
@@ -7484,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.80",
+  "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",