kaleido-ui 0.1.3 → 0.1.5

package/dist/native/index.js

@@ -35,11 +35,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",
@@ -48,6 +80,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",
@@ -118,9 +170,9 @@ import { jsx as jsx2 } from "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];
@@ -178,10 +230,10 @@ var styles2 = StyleSheet2.create({
 import { View as View3, Text as Text3, StyleSheet as StyleSheet3 } from "react-native";
 import { jsx as jsx4 } from "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];
@@ -198,7 +250,7 @@ var styles3 = StyleSheet3.create({
   },
   text: {
     fontSize: 14,
-    color: "#FFFFFF",
+    color: colors.text.primary,
     flex: 1
   }
 });
@@ -214,7 +266,7 @@ var styles4 = StyleSheet4.create({
     fontSize: 10,
     fontWeight: "900",
     letterSpacing: 2.2,
-    color: "rgba(255, 255, 255, 0.3)"
+    color: colors.text.dimmed
   }
 });
 
@@ -264,7 +316,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/tokens/index.cjs

@@ -24,10 +24,16 @@ __export(tokens_exports, {
   colors: () => colors,
   fontFamily: () => fontFamily,
   fontWeight: () => fontWeight,
+  gradient: () => gradient,
+  iconBoxSize: () => iconBoxSize,
+  iconSize: () => iconSize,
   keyframes: () => keyframes,
+  layer: () => layer,
+  letterSpacing: () => letterSpacing,
   lightSemanticColors: () => lightSemanticColors,
   radius: () => radius,
   shadow: () => shadow,
+  sizing: () => sizing,
   transition: () => transition,
   typeScale: () => typeScale
 });
@@ -92,11 +98,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",
@@ -105,6 +143,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",
@@ -134,6 +192,33 @@ var fontWeight = {
   semibold: "600",
   bold: "700"
 };
+var letterSpacing = {
+  eyebrow: "0.18em",
+  eyebrowWide: "0.22em"
+};
+var iconSize = {
+  xxs: "11px",
+  // dense inline status / timestamp icons
+  xs: "13px",
+  sm: "14px",
+  md: "16px",
+  // default
+  lg: "18px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "28px",
+  "4xl": "32px",
+  "5xl": "40px",
+  "6xl": "64px"
+  // hero / success / error glyphs
+};
+var iconBoxSize = {
+  sm: "14px",
+  md: "16px",
+  lg: "18px",
+  nav: "22px",
+  control: "34px"
+};
 
 // src/tokens/radius.ts
 var radius = {
@@ -154,12 +239,54 @@ 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)"
+  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/gradients.ts
+var gradient = {
+  /**
+   * Page-level radial wash — top-right white highlight + bottom-left
+   * brand purple bloom. Used by Welcome / LockScreen / Onboarding
+   * page shells.
+   */
+  pageRadial: "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%)",
+  /** Subtle highlight for the swap-input card receive panel. */
+  cardSheen: "linear-gradient(to bottom right, rgba(255, 255, 255, 0.01), rgba(43, 238, 121, 0.04))",
+  /**
+   * Brand headline gradient — white-to-fade. Used by `<HeadlineGradient />`
+   * via the `bg-gradient-headline` utility plus `bg-clip-text text-transparent`.
+   */
+  headline: "linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0.45))"
 };
 
 // src/tokens/transitions.ts
@@ -220,10 +347,16 @@ var animation = {
   colors,
   fontFamily,
   fontWeight,
+  gradient,
+  iconBoxSize,
+  iconSize,
   keyframes,
+  layer,
+  letterSpacing,
   lightSemanticColors,
   radius,
   shadow,
+  sizing,
   transition,
   typeScale
 });

package/dist/tokens/index.d.cts

@@ -33,11 +33,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";
@@ -46,6 +78,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";
@@ -105,6 +157,45 @@ declare const fontWeight: {
     readonly semibold: "600";
     readonly bold: "700";
 };
+/**
+ * Letter-spacing tokens — reused across uppercase eyebrow labels.
+ * These replace the scattered `tracking-[0.18em]` / `tracking-[0.22em]` arbitraries.
+ */
+declare const letterSpacing: {
+    readonly eyebrow: "0.18em";
+    readonly eyebrowWide: "0.22em";
+};
+/**
+ * Icon size scale — drives `text-icon-*` utilities for Material Symbols glyphs
+ * and other font-driven icon sets. Exists as its own scale (separate from the
+ * body type scale) because icon sizes change in tighter steps.
+ *
+ * Usage: <span class="material-symbols-outlined text-icon-md">name</span>
+ */
+declare const iconSize: {
+    readonly xxs: "11px";
+    readonly xs: "13px";
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "18px";
+    readonly xl: "20px";
+    readonly '2xl': "24px";
+    readonly '3xl': "28px";
+    readonly '4xl': "32px";
+    readonly '5xl': "40px";
+    readonly '6xl': "64px";
+};
+/**
+ * Square icon box scale — drives `size-icon-*` utilities for SVG icons
+ * and compact icon buttons.
+ */
+declare const iconBoxSize: {
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "18px";
+    readonly nav: "22px";
+    readonly control: "34px";
+};
 
 /**
  * KaleidoSwap Border Radius Tokens
@@ -126,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
  */
@@ -134,6 +244,39 @@ 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)";
+};
+
+/**
+ * KaleidoSwap Gradient Tokens
+ *
+ * Reusable visual gradients. Card-accent / dynamic gradients live with
+ * the components that build them — these tokens cover the global,
+ * static gradients used by page shells.
+ */
+declare const gradient: {
+    /**
+     * Page-level radial wash — top-right white highlight + bottom-left
+     * brand purple bloom. Used by Welcome / LockScreen / Onboarding
+     * page shells.
+     */
+    readonly pageRadial: "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%)";
+    /** Subtle highlight for the swap-input card receive panel. */
+    readonly cardSheen: "linear-gradient(to bottom right, rgba(255, 255, 255, 0.01), rgba(43, 238, 121, 0.04))";
+    /**
+     * Brand headline gradient — white-to-fade. Used by `<HeadlineGradient />`
+     * via the `bg-gradient-headline` utility plus `bg-clip-text text-transparent`.
+     */
+    readonly headline: "linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0.45))";
 };
 
 /**
@@ -231,4 +374,4 @@ declare const animation: {
     readonly 'bounce-slight': "bounce-slight 2s infinite";
 };
 
-export { animation, colors, fontFamily, fontWeight, keyframes, lightSemanticColors, radius, shadow, transition, typeScale };
+export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, radius, shadow, sizing, transition, typeScale };