kaleido-ui 0.1.3 → 0.1.5

package/dist/css/kaleido-ui.css

@@ -105,12 +105,68 @@
   --color-network-arkade:    #7C3AED;
   --color-network-spark:     #FF6D00;
   --color-network-lightning: #F6C343;
+  --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;
+  --color-asset-usdt: #26A17B;
+  --color-asset-usdc: #2775CA;
 
   /* Transaction colors */
   --color-tx-sent:    #F94040;
   --color-tx-receive: #2BEE79;
   --color-tx-swap:    #4290FF;
 
+  /* Intent colors */
+  --color-success: #2BEE79;
+  --color-warning: #FACC15;
+  --color-danger:  #F94040;
+  --color-info:    #4290FF;
+
+  /* Surface elevation (translucent overlays for dark theme) */
+  --color-surface-base:           rgba(255, 255, 255, 0.03);
+  --color-surface-card:           rgba(255, 255, 255, 0.05);
+  --color-surface-elevated:       rgba(255, 255, 255, 0.08);
+  --color-surface-overlay:        rgba(0, 0, 0, 0.20);
+  --color-surface-overlay-strong: rgba(0, 0, 0, 0.35);
+  --color-surface-scrim:          rgba(0, 0, 0, 0.60);
+
+  /* Border ladder */
+  --color-border-subtle:  rgba(255, 255, 255, 0.04);
+  --color-border-default: rgba(255, 255, 255, 0.08);
+  --color-border-strong:  rgba(255, 255, 255, 0.15);
+
+  /* Text ladder for dark surfaces */
+  --color-text-primary:   #ffffff;
+  --color-text-secondary: rgba(255, 255, 255, 0.65);
+  --color-text-muted:     rgba(255, 255, 255, 0.45);
+  --color-text-dimmed:    rgba(255, 255, 255, 0.35);
+  --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;
@@ -132,6 +188,41 @@
   --text-display: 36px;
   --text-display--line-height: 40px;
 
+  /* Letter spacing — uppercase eyebrow labels */
+  --tracking-eyebrow:      0.18em;
+  --tracking-eyebrow-wide: 0.22em;
+
+  /* Icon-size scale (text-icon-{xxs..5xl}) — for Material Symbols glyphs */
+  --text-icon-xxs: 11px;
+  --text-icon-xxs--line-height: 1;
+  --text-icon-xs: 13px;
+  --text-icon-xs--line-height: 1;
+  --text-icon-sm: 14px;
+  --text-icon-sm--line-height: 1;
+  --text-icon-md: 16px;
+  --text-icon-md--line-height: 1;
+  --text-icon-lg: 18px;
+  --text-icon-lg--line-height: 1;
+  --text-icon-xl: 20px;
+  --text-icon-xl--line-height: 1;
+  --text-icon-2xl: 24px;
+  --text-icon-2xl--line-height: 1;
+  --text-icon-3xl: 28px;
+  --text-icon-3xl--line-height: 1;
+  --text-icon-4xl: 32px;
+  --text-icon-4xl--line-height: 1;
+  --text-icon-5xl: 40px;
+  --text-icon-5xl--line-height: 1;
+  --text-icon-6xl: 64px;
+  --text-icon-6xl--line-height: 1;
+
+  /* Icon box-size scale (size-icon-{sm,md,lg,nav,control}) — for SVG icons */
+  --spacing-icon-sm: 14px;
+  --spacing-icon-md: 16px;
+  --spacing-icon-lg: 18px;
+  --spacing-icon-nav: 22px;
+  --spacing-icon-control: 34px;
+
   /* Border radius */
   --radius-none:  0px;
   --radius-xs:    2px;
@@ -149,10 +240,25 @@
   --radius-pill:  9999px;
 
   /* Shadows */
-  --shadow-glow:        0 0 20px rgba(10, 10, 10, 0.15);
-  --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-glow:                 0 0 20px rgba(10, 10, 10, 0.15);
+  --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);
+  --shadow-popover:              0 18px 55px rgba(0, 0, 0, 0.65);
+  --shadow-toast:                0 0 30px rgba(0, 0, 0, 0.3);
+
+  /* Drop-shadows (Tailwind v4 emits drop-shadow-* utilities from --drop-shadow-*) */
+  --drop-shadow-glow-primary-soft: 0 0 8px rgba(43, 238, 121, 0.5);
+  --drop-shadow-glow-primary:      0 0 30px rgba(43, 238, 121, 0.45);
+
+  /* Gradients (use as background-image: var(--gradient-page)) */
+  --gradient-page:        radial-gradient(ellipse at 60% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 30% 85%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
+  --gradient-card-sheen:  linear-gradient(to bottom right, rgba(255, 255, 255, 0.01), rgba(43, 238, 121, 0.04));
+  --gradient-headline:    linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0.45));
 
   /* Transitions */
   --transition-fast:    150ms ease-out;
@@ -248,3 +354,34 @@
     transform: translateY(0);
   }
 }
+
+/* ── Reusable utilities backed by tokens ───────────────────────────────── */
+/* Page-shell radial wash. Usage: <div className="bg-page-radial"> */
+.bg-page-radial {
+  background-image: var(--gradient-page);
+}
+/* Receive-panel sheen used by SwapInputCard. */
+.bg-card-sheen {
+  background-image: var(--gradient-card-sheen);
+}
+/* Brand headline gradient. Pair with bg-clip-text + text-transparent
+   on the consuming element (the HeadlineGradient component does this). */
+.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

@@ -85,11 +85,43 @@ var colors = {
   textSecondary: darkSemanticColors.mutedFg,
   textMuted: darkSemanticColors.border,
   textDimmed: darkSemanticColors.ring,
-  /** Semantic */
+  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
   success: darkSemanticColors.primary,
-  warning: darkSemanticColors.chart3,
+  warning: "#FACC15",
+  danger: "#F94040",
+  info: "#4290FF",
+  /** @deprecated alias for `danger` — kept for back-compat. */
   error: darkSemanticColors.destructive,
-  info: darkSemanticColors.chart1,
+  /** Surface elevation — translucent overlays applied over the page background */
+  surface: {
+    base: "rgba(255, 255, 255, 0.03)",
+    card: "rgba(255, 255, 255, 0.05)",
+    elevated: "rgba(255, 255, 255, 0.08)",
+    overlay: "rgba(0, 0, 0, 0.20)",
+    overlayStrong: "rgba(0, 0, 0, 0.35)",
+    scrim: "rgba(0, 0, 0, 0.60)"
+  },
+  /** Border ladder — translucent edges on dark surfaces */
+  borderToken: {
+    subtle: "rgba(255, 255, 255, 0.04)",
+    default: "rgba(255, 255, 255, 0.08)",
+    strong: "rgba(255, 255, 255, 0.15)"
+  },
+  /** Text ladder for dark surfaces */
+  text: {
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.65)",
+    muted: "rgba(255, 255, 255, 0.45)",
+    dimmed: "rgba(255, 255, 255, 0.35)",
+    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",
@@ -98,6 +130,26 @@ var colors = {
     spark: "#FF6D00",
     lightning: "#F6C343"
   },
+  networkChip: {
+    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: {
+    eth: "#627EEA",
+    usdt: "#26A17B",
+    usdc: "#2775CA"
+  },
   /** Transaction direction */
   tx: {
     sent: "#F94040",
@@ -156,9 +208,9 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var statusConfig = {
   success: { color: colors.primary, bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, label: "Success" },
   completed: { color: colors.primary, bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, label: "Completed" },
-  pending: { color: "#EAB308", bg: "#EAB3081A", borderColor: "#EAB30833", label: "Pending" },
-  failed: { color: "#EF4444", bg: "#EF44441A", borderColor: "#EF444433", label: "Failed" },
-  error: { color: "#EF4444", bg: "#EF44441A", borderColor: "#EF444433", label: "Error" }
+  pending: { color: colors.warning, bg: `${colors.warning}1A`, borderColor: `${colors.warning}33`, label: "Pending" },
+  failed: { color: colors.danger, bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, label: "Failed" },
+  error: { color: colors.danger, bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, label: "Error" }
 };
 function StatusBadge({ status, style }) {
   const config = statusConfig[status];
@@ -216,10 +268,10 @@ var styles2 = import_react_native2.StyleSheet.create({
 var import_react_native3 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var variantConfig = {
-  error: { bg: "#EF44441A", borderColor: "#EF444433", iconColor: "#F87171" },
-  warning: { bg: "#F59E0B1A", borderColor: "#F59E0B33", iconColor: "#FBBF24" },
-  info: { bg: "#3B82F61A", borderColor: "#3B82F633", iconColor: "#60A5FA" },
-  success: { bg: `${colors.primary}1A`, borderColor: `${colors.primary}33`, iconColor: colors.primary }
+  error: { bg: `${colors.danger}1A`, borderColor: `${colors.danger}33`, iconColor: colors.danger },
+  warning: { bg: `${colors.warning}1A`, borderColor: `${colors.warning}33`, iconColor: colors.warning },
+  info: { bg: `${colors.info}1A`, borderColor: `${colors.info}33`, iconColor: colors.info },
+  success: { bg: `${colors.success}1A`, borderColor: `${colors.success}33`, iconColor: colors.success }
 };
 function AlertBanner({ variant = "info", children, style }) {
   const config = variantConfig[variant];
@@ -236,7 +288,7 @@ var styles3 = import_react_native3.StyleSheet.create({
   },
   text: {
     fontSize: 14,
-    color: "#FFFFFF",
+    color: colors.text.primary,
     flex: 1
   }
 });
@@ -252,7 +304,7 @@ var styles4 = import_react_native4.StyleSheet.create({
     fontSize: 10,
     fontWeight: "900",
     letterSpacing: 2.2,
-    color: "rgba(255, 255, 255, 0.3)"
+    color: colors.text.dimmed
   }
 });
 
@@ -302,7 +354,17 @@ 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)"
+  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)",
+  glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)",
+  /** Floating popover / modal elevation on dark surfaces. */
+  popover: "0 18px 55px rgba(0, 0, 0, 0.65)",
+  /** Toast / inline-notification elevation. */
+  toast: "0 0 30px rgba(0, 0, 0, 0.3)"
 };
 
 // src/tokens/transitions.ts

package/dist/native/index.d.cts

@@ -26,9 +26,9 @@ declare const kaleidoswapTokens: {
         readonly textPrimary: "#ffffff";
         readonly textSecondary: "rgba(255, 255, 255, 0.55)";
         readonly success: "#2BEE79";
-        readonly warning: "#F7931A";
+        readonly warning: "#FACC15";
         readonly error: "hsl(0 62% 50%)";
-        readonly info: "#2BEE79";
+        readonly info: "#4290FF";
         readonly network: {
             readonly bitcoin: "#F7931A";
             readonly rgb: "#DD352E";
@@ -69,19 +69,19 @@ declare function NetworkBadge({ network, style }: NetworkBadgeProps): react_jsx_
 
 declare const variantConfig: {
     readonly error: {
-        readonly bg: "#EF44441A";
-        readonly borderColor: "#EF444433";
-        readonly iconColor: "#F87171";
+        readonly bg: "#F940401A";
+        readonly borderColor: "#F9404033";
+        readonly iconColor: "#F94040";
     };
     readonly warning: {
-        readonly bg: "#F59E0B1A";
-        readonly borderColor: "#F59E0B33";
-        readonly iconColor: "#FBBF24";
+        readonly bg: "#FACC151A";
+        readonly borderColor: "#FACC1533";
+        readonly iconColor: "#FACC15";
     };
     readonly info: {
-        readonly bg: "#3B82F61A";
-        readonly borderColor: "#3B82F633";
-        readonly iconColor: "#60A5FA";
+        readonly bg: "#4290FF1A";
+        readonly borderColor: "#4290FF33";
+        readonly iconColor: "#4290FF";
     };
     readonly success: {
         readonly bg: "#2BEE791A";
@@ -107,11 +107,43 @@ declare const colors: {
     readonly textSecondary: "rgba(255, 255, 255, 0.55)";
     readonly textMuted: "hsl(150 20% 24%)";
     readonly textDimmed: "#2BEE79";
-    /** Semantic */
+    /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
     readonly success: "#2BEE79";
-    readonly warning: "#F7931A";
+    readonly warning: "#FACC15";
+    readonly danger: "#F94040";
+    readonly info: "#4290FF";
+    /** @deprecated alias for `danger` — kept for back-compat. */
     readonly error: "hsl(0 62% 50%)";
-    readonly info: "#2BEE79";
+    /** Surface elevation — translucent overlays applied over the page background */
+    readonly surface: {
+        readonly base: "rgba(255, 255, 255, 0.03)";
+        readonly card: "rgba(255, 255, 255, 0.05)";
+        readonly elevated: "rgba(255, 255, 255, 0.08)";
+        readonly overlay: "rgba(0, 0, 0, 0.20)";
+        readonly overlayStrong: "rgba(0, 0, 0, 0.35)";
+        readonly scrim: "rgba(0, 0, 0, 0.60)";
+    };
+    /** Border ladder — translucent edges on dark surfaces */
+    readonly borderToken: {
+        readonly subtle: "rgba(255, 255, 255, 0.04)";
+        readonly default: "rgba(255, 255, 255, 0.08)";
+        readonly strong: "rgba(255, 255, 255, 0.15)";
+    };
+    /** Text ladder for dark surfaces */
+    readonly text: {
+        readonly primary: "#ffffff";
+        readonly secondary: "rgba(255, 255, 255, 0.65)";
+        readonly muted: "rgba(255, 255, 255, 0.45)";
+        readonly dimmed: "rgba(255, 255, 255, 0.35)";
+        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";
@@ -120,6 +152,26 @@ declare const colors: {
         readonly spark: "#FF6D00";
         readonly lightning: "#F6C343";
     };
+    readonly networkChip: {
+        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: {
+        readonly eth: "#627EEA";
+        readonly usdt: "#26A17B";
+        readonly usdc: "#2775CA";
+    };
     /** Transaction direction */
     readonly tx: {
         readonly sent: "#F94040";
@@ -208,6 +260,16 @@ 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)";
+    readonly glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)";
+    /** Floating popover / modal elevation on dark surfaces. */
+    readonly popover: "0 18px 55px rgba(0, 0, 0, 0.65)";
+    /** Toast / inline-notification elevation. */
+    readonly toast: "0 0 30px rgba(0, 0, 0, 0.3)";
 };
 
 /**

package/dist/native/index.d.ts

@@ -26,9 +26,9 @@ declare const kaleidoswapTokens: {
         readonly textPrimary: "#ffffff";
         readonly textSecondary: "rgba(255, 255, 255, 0.55)";
         readonly success: "#2BEE79";
-        readonly warning: "#F7931A";
+        readonly warning: "#FACC15";
         readonly error: "hsl(0 62% 50%)";
-        readonly info: "#2BEE79";
+        readonly info: "#4290FF";
         readonly network: {
             readonly bitcoin: "#F7931A";
             readonly rgb: "#DD352E";
@@ -69,19 +69,19 @@ declare function NetworkBadge({ network, style }: NetworkBadgeProps): react_jsx_
 
 declare const variantConfig: {
     readonly error: {
-        readonly bg: "#EF44441A";
-        readonly borderColor: "#EF444433";
-        readonly iconColor: "#F87171";
+        readonly bg: "#F940401A";
+        readonly borderColor: "#F9404033";
+        readonly iconColor: "#F94040";
     };
     readonly warning: {
-        readonly bg: "#F59E0B1A";
-        readonly borderColor: "#F59E0B33";
-        readonly iconColor: "#FBBF24";
+        readonly bg: "#FACC151A";
+        readonly borderColor: "#FACC1533";
+        readonly iconColor: "#FACC15";
     };
     readonly info: {
-        readonly bg: "#3B82F61A";
-        readonly borderColor: "#3B82F633";
-        readonly iconColor: "#60A5FA";
+        readonly bg: "#4290FF1A";
+        readonly borderColor: "#4290FF33";
+        readonly iconColor: "#4290FF";
     };
     readonly success: {
         readonly bg: "#2BEE791A";
@@ -107,11 +107,43 @@ declare const colors: {
     readonly textSecondary: "rgba(255, 255, 255, 0.55)";
     readonly textMuted: "hsl(150 20% 24%)";
     readonly textDimmed: "#2BEE79";
-    /** Semantic */
+    /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
     readonly success: "#2BEE79";
-    readonly warning: "#F7931A";
+    readonly warning: "#FACC15";
+    readonly danger: "#F94040";
+    readonly info: "#4290FF";
+    /** @deprecated alias for `danger` — kept for back-compat. */
     readonly error: "hsl(0 62% 50%)";
-    readonly info: "#2BEE79";
+    /** Surface elevation — translucent overlays applied over the page background */
+    readonly surface: {
+        readonly base: "rgba(255, 255, 255, 0.03)";
+        readonly card: "rgba(255, 255, 255, 0.05)";
+        readonly elevated: "rgba(255, 255, 255, 0.08)";
+        readonly overlay: "rgba(0, 0, 0, 0.20)";
+        readonly overlayStrong: "rgba(0, 0, 0, 0.35)";
+        readonly scrim: "rgba(0, 0, 0, 0.60)";
+    };
+    /** Border ladder — translucent edges on dark surfaces */
+    readonly borderToken: {
+        readonly subtle: "rgba(255, 255, 255, 0.04)";
+        readonly default: "rgba(255, 255, 255, 0.08)";
+        readonly strong: "rgba(255, 255, 255, 0.15)";
+    };
+    /** Text ladder for dark surfaces */
+    readonly text: {
+        readonly primary: "#ffffff";
+        readonly secondary: "rgba(255, 255, 255, 0.65)";
+        readonly muted: "rgba(255, 255, 255, 0.45)";
+        readonly dimmed: "rgba(255, 255, 255, 0.35)";
+        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";
@@ -120,6 +152,26 @@ declare const colors: {
         readonly spark: "#FF6D00";
         readonly lightning: "#F6C343";
     };
+    readonly networkChip: {
+        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: {
+        readonly eth: "#627EEA";
+        readonly usdt: "#26A17B";
+        readonly usdc: "#2775CA";
+    };
     /** Transaction direction */
     readonly tx: {
         readonly sent: "#F94040";
@@ -208,6 +260,16 @@ 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)";
+    readonly glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)";
+    /** Floating popover / modal elevation on dark surfaces. */
+    readonly popover: "0 18px 55px rgba(0, 0, 0, 0.65)";
+    /** Toast / inline-notification elevation. */
+    readonly toast: "0 0 30px rgba(0, 0, 0, 0.3)";
 };
 
 /**