kaleido-ui 0.1.4 → 0.1.6

package/dist/css/kaleido-ui.css

@@ -105,11 +105,16 @@
   --color-network-arkade:    #7C3AED;
   --color-network-spark:     #FF6D00;
   --color-network-lightning: #F6C343;
-  --color-network-bitcoin-chip:   #A65D0D;
-  --color-network-rgb-chip:       #7F2623;
-  --color-network-arkade-chip:    #43208B;
-  --color-network-spark-chip:     #314238;
-  --color-network-lightning-chip: #53611E;
+  --color-network-bitcoin-chip:   #44341F;
+  --color-network-rgb-chip:       #44282B;
+  --color-network-arkade-chip:    #362B55;
+  --color-network-spark-chip:     #284338;
+  --color-network-lightning-chip: #3D421F;
+  --color-network-bitcoin-text:   #F2B063;
+  --color-network-rgb-text:       #E87872;
+  --color-network-arkade-text:    #A98CF2;
+  --color-network-spark-text:     #D6E5DE;
+  --color-network-lightning-text: #E4D56F;
 
   /* Asset icon brand colors */
   --color-asset-eth:  #627EEA;
@@ -148,6 +153,20 @@
   --color-text-disabled:  rgba(255, 255, 255, 0.25);
   --color-text-on-accent: #051B10;
 
+  /* Scrollbar colors */
+  --color-scrollbar-thumb:       rgba(255, 255, 255, 0.16);
+  --color-scrollbar-thumb-hover: rgba(43, 238, 121, 0.55);
+  --color-scrollbar-track:       transparent;
+  --spacing-scrollbar:           2px;
+  --spacing-scrollbar-hover:     6px;
+  --spacing-scrollbar-thumb-min: 24px;
+
+  /* Layers */
+  --z-header:    50;
+  --z-nav:       2147483646;
+  --z-scrollbar: 2147483645;
+  --z-modal:     2147483647;
+
   /* Typography */
   --font-sans:    'Satoshi', system-ui, -apple-system, sans-serif;
   --font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
@@ -225,6 +244,7 @@
   --shadow-glow-strong:          0 0 30px rgba(10, 10, 10, 0.25);
   --shadow-glow-subtle:          0 0 15px rgba(10, 10, 10, 0.12);
   --shadow-glow-accent:          0 4px 30px rgba(10, 10, 10, 0.18);
+  --shadow-header:               0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04);
   --shadow-glow-primary-soft:    0 0 8px rgba(43, 238, 121, 0.5);
   --shadow-glow-primary:         0 0 30px rgba(43, 238, 121, 0.45);
   --shadow-glow-primary-strong:  0 0 40px rgba(43, 238, 121, 0.5);
@@ -349,3 +369,19 @@
 .bg-gradient-headline {
   background-image: var(--gradient-headline);
 }
+/* Legacy app scroll region. Prefer the ScrollArea component for visible overlay scrollbars. */
+.app-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.app-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+/* Hidden horizontal scroller utility used by compact chip rows. */
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}

package/dist/native/index.cjs

@@ -116,6 +116,12 @@ var colors = {
     disabled: "rgba(255, 255, 255, 0.25)",
     onAccent: "#051B10"
   },
+  /** Scrollbar treatment for app-owned scroll regions */
+  scrollbar: {
+    thumb: "rgba(255, 255, 255, 0.16)",
+    thumbHover: "rgba(43, 238, 121, 0.55)",
+    track: "transparent"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -125,11 +131,18 @@ var colors = {
     lightning: "#F6C343"
   },
   networkChip: {
-    bitcoin: "#A65D0D",
-    rgb: "#7F2623",
-    arkade: "#43208B",
-    spark: "#314238",
-    lightning: "#53611E"
+    bitcoin: "#44341F",
+    rgb: "#44282B",
+    arkade: "#362B55",
+    spark: "#284338",
+    lightning: "#3D421F"
+  },
+  networkText: {
+    bitcoin: "#F2B063",
+    rgb: "#E87872",
+    arkade: "#A98CF2",
+    spark: "#D6E5DE",
+    lightning: "#E4D56F"
   },
   /** Asset icon brand colors — used as solid backgrounds behind glyphs */
   assetIcon: {
@@ -342,6 +355,8 @@ var shadow = {
   glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
   glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
   glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
+  /** Header separation shadow for sticky app chrome. */
+  header: "0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04)",
   /** Brand green glow — drives all primary CTA / focus halos. */
   glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)",
   glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)",

package/dist/native/index.d.cts

@@ -138,6 +138,12 @@ declare const colors: {
         readonly disabled: "rgba(255, 255, 255, 0.25)";
         readonly onAccent: "#051B10";
     };
+    /** Scrollbar treatment for app-owned scroll regions */
+    readonly scrollbar: {
+        readonly thumb: "rgba(255, 255, 255, 0.16)";
+        readonly thumbHover: "rgba(43, 238, 121, 0.55)";
+        readonly track: "transparent";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -147,11 +153,18 @@ declare const colors: {
         readonly lightning: "#F6C343";
     };
     readonly networkChip: {
-        readonly bitcoin: "#A65D0D";
-        readonly rgb: "#7F2623";
-        readonly arkade: "#43208B";
-        readonly spark: "#314238";
-        readonly lightning: "#53611E";
+        readonly bitcoin: "#44341F";
+        readonly rgb: "#44282B";
+        readonly arkade: "#362B55";
+        readonly spark: "#284338";
+        readonly lightning: "#3D421F";
+    };
+    readonly networkText: {
+        readonly bitcoin: "#F2B063";
+        readonly rgb: "#E87872";
+        readonly arkade: "#A98CF2";
+        readonly spark: "#D6E5DE";
+        readonly lightning: "#E4D56F";
     };
     /** Asset icon brand colors — used as solid backgrounds behind glyphs */
     readonly assetIcon: {
@@ -247,6 +260,8 @@ declare const shadow: {
     readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
     readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
     readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
+    /** Header separation shadow for sticky app chrome. */
+    readonly header: "0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04)";
     /** Brand green glow — drives all primary CTA / focus halos. */
     readonly glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)";
     readonly glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)";

package/dist/native/index.d.ts

@@ -138,6 +138,12 @@ declare const colors: {
         readonly disabled: "rgba(255, 255, 255, 0.25)";
         readonly onAccent: "#051B10";
     };
+    /** Scrollbar treatment for app-owned scroll regions */
+    readonly scrollbar: {
+        readonly thumb: "rgba(255, 255, 255, 0.16)";
+        readonly thumbHover: "rgba(43, 238, 121, 0.55)";
+        readonly track: "transparent";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -147,11 +153,18 @@ declare const colors: {
         readonly lightning: "#F6C343";
     };
     readonly networkChip: {
-        readonly bitcoin: "#A65D0D";
-        readonly rgb: "#7F2623";
-        readonly arkade: "#43208B";
-        readonly spark: "#314238";
-        readonly lightning: "#53611E";
+        readonly bitcoin: "#44341F";
+        readonly rgb: "#44282B";
+        readonly arkade: "#362B55";
+        readonly spark: "#284338";
+        readonly lightning: "#3D421F";
+    };
+    readonly networkText: {
+        readonly bitcoin: "#F2B063";
+        readonly rgb: "#E87872";
+        readonly arkade: "#A98CF2";
+        readonly spark: "#D6E5DE";
+        readonly lightning: "#E4D56F";
     };
     /** Asset icon brand colors — used as solid backgrounds behind glyphs */
     readonly assetIcon: {
@@ -247,6 +260,8 @@ declare const shadow: {
     readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
     readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
     readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
+    /** Header separation shadow for sticky app chrome. */
+    readonly header: "0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04)";
     /** Brand green glow — drives all primary CTA / focus halos. */
     readonly glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)";
     readonly glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)";

package/dist/native/index.js

@@ -66,6 +66,12 @@ var colors = {
     disabled: "rgba(255, 255, 255, 0.25)",
     onAccent: "#051B10"
   },
+  /** Scrollbar treatment for app-owned scroll regions */
+  scrollbar: {
+    thumb: "rgba(255, 255, 255, 0.16)",
+    thumbHover: "rgba(43, 238, 121, 0.55)",
+    track: "transparent"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -75,11 +81,18 @@ var colors = {
     lightning: "#F6C343"
   },
   networkChip: {
-    bitcoin: "#A65D0D",
-    rgb: "#7F2623",
-    arkade: "#43208B",
-    spark: "#314238",
-    lightning: "#53611E"
+    bitcoin: "#44341F",
+    rgb: "#44282B",
+    arkade: "#362B55",
+    spark: "#284338",
+    lightning: "#3D421F"
+  },
+  networkText: {
+    bitcoin: "#F2B063",
+    rgb: "#E87872",
+    arkade: "#A98CF2",
+    spark: "#D6E5DE",
+    lightning: "#E4D56F"
   },
   /** Asset icon brand colors — used as solid backgrounds behind glyphs */
   assetIcon: {
@@ -304,6 +317,8 @@ var shadow = {
   glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
   glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
   glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
+  /** Header separation shadow for sticky app chrome. */
+  header: "0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04)",
   /** Brand green glow — drives all primary CTA / focus halos. */
   glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)",
   glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)",

package/dist/tokens/index.cjs

@@ -28,10 +28,12 @@ __export(tokens_exports, {
   iconBoxSize: () => iconBoxSize,
   iconSize: () => iconSize,
   keyframes: () => keyframes,
+  layer: () => layer,
   letterSpacing: () => letterSpacing,
   lightSemanticColors: () => lightSemanticColors,
   radius: () => radius,
   shadow: () => shadow,
+  sizing: () => sizing,
   transition: () => transition,
   typeScale: () => typeScale
 });
@@ -127,6 +129,12 @@ var colors = {
     disabled: "rgba(255, 255, 255, 0.25)",
     onAccent: "#051B10"
   },
+  /** Scrollbar treatment for app-owned scroll regions */
+  scrollbar: {
+    thumb: "rgba(255, 255, 255, 0.16)",
+    thumbHover: "rgba(43, 238, 121, 0.55)",
+    track: "transparent"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -136,11 +144,18 @@ var colors = {
     lightning: "#F6C343"
   },
   networkChip: {
-    bitcoin: "#A65D0D",
-    rgb: "#7F2623",
-    arkade: "#43208B",
-    spark: "#314238",
-    lightning: "#53611E"
+    bitcoin: "#44341F",
+    rgb: "#44282B",
+    arkade: "#362B55",
+    spark: "#284338",
+    lightning: "#3D421F"
+  },
+  networkText: {
+    bitcoin: "#F2B063",
+    rgb: "#E87872",
+    arkade: "#A98CF2",
+    spark: "#D6E5DE",
+    lightning: "#E4D56F"
   },
   /** Asset icon brand colors — used as solid backgrounds behind glyphs */
   assetIcon: {
@@ -224,12 +239,29 @@ var radius = {
   pill: "9999px"
 };
 
+// src/tokens/sizing.ts
+var sizing = {
+  scrollbar: "2px",
+  scrollbarHover: "6px",
+  scrollbarThumbMin: "24px"
+};
+
+// src/tokens/layers.ts
+var layer = {
+  header: "50",
+  nav: "2147483646",
+  scrollbar: "2147483645",
+  modal: "2147483647"
+};
+
 // src/tokens/shadows.ts
 var shadow = {
   glow: "0 0 20px rgba(10, 10, 10, 0.15)",
   glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
   glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
   glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
+  /** Header separation shadow for sticky app chrome. */
+  header: "0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04)",
   /** Brand green glow — drives all primary CTA / focus halos. */
   glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)",
   glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)",
@@ -319,10 +351,12 @@ var animation = {
   iconBoxSize,
   iconSize,
   keyframes,
+  layer,
   letterSpacing,
   lightSemanticColors,
   radius,
   shadow,
+  sizing,
   transition,
   typeScale
 });

package/dist/tokens/index.d.cts

@@ -64,6 +64,12 @@ declare const colors: {
         readonly disabled: "rgba(255, 255, 255, 0.25)";
         readonly onAccent: "#051B10";
     };
+    /** Scrollbar treatment for app-owned scroll regions */
+    readonly scrollbar: {
+        readonly thumb: "rgba(255, 255, 255, 0.16)";
+        readonly thumbHover: "rgba(43, 238, 121, 0.55)";
+        readonly track: "transparent";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -73,11 +79,18 @@ declare const colors: {
         readonly lightning: "#F6C343";
     };
     readonly networkChip: {
-        readonly bitcoin: "#A65D0D";
-        readonly rgb: "#7F2623";
-        readonly arkade: "#43208B";
-        readonly spark: "#314238";
-        readonly lightning: "#53611E";
+        readonly bitcoin: "#44341F";
+        readonly rgb: "#44282B";
+        readonly arkade: "#362B55";
+        readonly spark: "#284338";
+        readonly lightning: "#3D421F";
+    };
+    readonly networkText: {
+        readonly bitcoin: "#F2B063";
+        readonly rgb: "#E87872";
+        readonly arkade: "#A98CF2";
+        readonly spark: "#D6E5DE";
+        readonly lightning: "#E4D56F";
     };
     /** Asset icon brand colors — used as solid backgrounds behind glyphs */
     readonly assetIcon: {
@@ -204,6 +217,25 @@ declare const radius: {
     readonly pill: "9999px";
 };
 
+/**
+ * Component and utility sizing tokens that do not belong to typography.
+ */
+declare const sizing: {
+    readonly scrollbar: "2px";
+    readonly scrollbarHover: "6px";
+    readonly scrollbarThumbMin: "24px";
+};
+
+/**
+ * Z-index tokens for shared UI layers.
+ */
+declare const layer: {
+    readonly header: "50";
+    readonly nav: "2147483646";
+    readonly scrollbar: "2147483645";
+    readonly modal: "2147483647";
+};
+
 /**
  * KaleidoSwap Shadow Tokens
  */
@@ -212,6 +244,8 @@ declare const shadow: {
     readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
     readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
     readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
+    /** Header separation shadow for sticky app chrome. */
+    readonly header: "0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04)";
     /** Brand green glow — drives all primary CTA / focus halos. */
     readonly glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)";
     readonly glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)";
@@ -340,4 +374,4 @@ declare const animation: {
     readonly 'bounce-slight': "bounce-slight 2s infinite";
 };
 
-export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, letterSpacing, lightSemanticColors, radius, shadow, transition, typeScale };
+export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, radius, shadow, sizing, transition, typeScale };

package/dist/tokens/index.d.ts

@@ -64,6 +64,12 @@ declare const colors: {
         readonly disabled: "rgba(255, 255, 255, 0.25)";
         readonly onAccent: "#051B10";
     };
+    /** Scrollbar treatment for app-owned scroll regions */
+    readonly scrollbar: {
+        readonly thumb: "rgba(255, 255, 255, 0.16)";
+        readonly thumbHover: "rgba(43, 238, 121, 0.55)";
+        readonly track: "transparent";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -73,11 +79,18 @@ declare const colors: {
         readonly lightning: "#F6C343";
     };
     readonly networkChip: {
-        readonly bitcoin: "#A65D0D";
-        readonly rgb: "#7F2623";
-        readonly arkade: "#43208B";
-        readonly spark: "#314238";
-        readonly lightning: "#53611E";
+        readonly bitcoin: "#44341F";
+        readonly rgb: "#44282B";
+        readonly arkade: "#362B55";
+        readonly spark: "#284338";
+        readonly lightning: "#3D421F";
+    };
+    readonly networkText: {
+        readonly bitcoin: "#F2B063";
+        readonly rgb: "#E87872";
+        readonly arkade: "#A98CF2";
+        readonly spark: "#D6E5DE";
+        readonly lightning: "#E4D56F";
     };
     /** Asset icon brand colors — used as solid backgrounds behind glyphs */
     readonly assetIcon: {
@@ -204,6 +217,25 @@ declare const radius: {
     readonly pill: "9999px";
 };
 
+/**
+ * Component and utility sizing tokens that do not belong to typography.
+ */
+declare const sizing: {
+    readonly scrollbar: "2px";
+    readonly scrollbarHover: "6px";
+    readonly scrollbarThumbMin: "24px";
+};
+
+/**
+ * Z-index tokens for shared UI layers.
+ */
+declare const layer: {
+    readonly header: "50";
+    readonly nav: "2147483646";
+    readonly scrollbar: "2147483645";
+    readonly modal: "2147483647";
+};
+
 /**
  * KaleidoSwap Shadow Tokens
  */
@@ -212,6 +244,8 @@ declare const shadow: {
     readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
     readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
     readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
+    /** Header separation shadow for sticky app chrome. */
+    readonly header: "0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04)";
     /** Brand green glow — drives all primary CTA / focus halos. */
     readonly glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)";
     readonly glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)";
@@ -340,4 +374,4 @@ declare const animation: {
     readonly 'bounce-slight': "bounce-slight 2s infinite";
 };
 
-export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, letterSpacing, lightSemanticColors, radius, shadow, transition, typeScale };
+export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, radius, shadow, sizing, transition, typeScale };

package/dist/tokens/index.js

@@ -88,6 +88,12 @@ var colors = {
     disabled: "rgba(255, 255, 255, 0.25)",
     onAccent: "#051B10"
   },
+  /** Scrollbar treatment for app-owned scroll regions */
+  scrollbar: {
+    thumb: "rgba(255, 255, 255, 0.16)",
+    thumbHover: "rgba(43, 238, 121, 0.55)",
+    track: "transparent"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -97,11 +103,18 @@ var colors = {
     lightning: "#F6C343"
   },
   networkChip: {
-    bitcoin: "#A65D0D",
-    rgb: "#7F2623",
-    arkade: "#43208B",
-    spark: "#314238",
-    lightning: "#53611E"
+    bitcoin: "#44341F",
+    rgb: "#44282B",
+    arkade: "#362B55",
+    spark: "#284338",
+    lightning: "#3D421F"
+  },
+  networkText: {
+    bitcoin: "#F2B063",
+    rgb: "#E87872",
+    arkade: "#A98CF2",
+    spark: "#D6E5DE",
+    lightning: "#E4D56F"
   },
   /** Asset icon brand colors — used as solid backgrounds behind glyphs */
   assetIcon: {
@@ -185,12 +198,29 @@ var radius = {
   pill: "9999px"
 };
 
+// src/tokens/sizing.ts
+var sizing = {
+  scrollbar: "2px",
+  scrollbarHover: "6px",
+  scrollbarThumbMin: "24px"
+};
+
+// src/tokens/layers.ts
+var layer = {
+  header: "50",
+  nav: "2147483646",
+  scrollbar: "2147483645",
+  modal: "2147483647"
+};
+
 // src/tokens/shadows.ts
 var shadow = {
   glow: "0 0 20px rgba(10, 10, 10, 0.15)",
   glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
   glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
   glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
+  /** Header separation shadow for sticky app chrome. */
+  header: "0 10px 24px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.04)",
   /** Brand green glow — drives all primary CTA / focus halos. */
   glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)",
   glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)",
@@ -279,10 +309,12 @@ export {
   iconBoxSize,
   iconSize,
   keyframes,
+  layer,
   letterSpacing,
   lightSemanticColors,
   radius,
   shadow,
+  sizing,
   transition,
   typeScale
 };