kaleido-ui 0.1.2 → 0.1.4

package/dist/tokens/index.d.cts

@@ -1,13 +1,69 @@
+/**
+ * KaleidoSwap Color Tokens
+ *
+ * Single source of truth for all color constants across web and native.
+ */
+declare const lightSemanticColors: {
+    readonly background: "#ffffff";
+    readonly foreground: "#0a0a0a";
+    readonly card: "#ffffff";
+    readonly cardFg: "#0a0a0a";
+    readonly popover: "#ffffff";
+    readonly popoverFg: "#0a0a0a";
+    readonly primary: "#171717";
+    readonly primaryFg: "#fafafa";
+    readonly secondary: "#f5f5f5";
+    readonly secondaryFg: "#171717";
+    readonly muted: "#f5f5f5";
+    readonly mutedFg: "#737373";
+    readonly accent: "#f5f5f5";
+    readonly accentFg: "#171717";
+    readonly destructive: "#e7000b";
+    readonly border: "#e5e5e5";
+    readonly input: "#e5e5e5";
+    readonly ring: "#a1a1a1";
+    readonly chart1: "#2BEE79";
+    readonly chart2: "#F6C343";
+    readonly chart3: "#F7931A";
+    readonly chart4: "#7C3AED";
+    readonly chart5: "#DD352E";
+};
 declare const colors: {
     readonly textPrimary: "#ffffff";
     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";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -16,6 +72,19 @@ declare const colors: {
         readonly spark: "#FF6D00";
         readonly lightning: "#F6C343";
     };
+    readonly networkChip: {
+        readonly bitcoin: "#A65D0D";
+        readonly rgb: "#7F2623";
+        readonly arkade: "#43208B";
+        readonly spark: "#314238";
+        readonly lightning: "#53611E";
+    };
+    /** 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";
@@ -75,20 +144,64 @@ 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
  */
 declare const radius: {
+    readonly none: "0px";
+    readonly xs: "2px";
     readonly sm: "4px";
     readonly md: "6px";
     readonly lg: "8px";
     readonly xl: "12px";
+    readonly '2xl': "16px";
+    readonly '3xl': "24px";
+    readonly '4xl': "32px";
+    readonly full: "9999px";
     readonly card: "16px";
     readonly panel: "24px";
-    readonly pill: "9999px";
     readonly nav: "32px";
-    readonly full: "9999px";
+    readonly pill: "9999px";
 };
 
 /**
@@ -99,6 +212,37 @@ 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)";
+    /** 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))";
 };
 
 /**
@@ -110,4 +254,90 @@ declare const transition: {
     readonly slow: "300ms ease-out";
 };
 
-export { colors, fontFamily, fontWeight, radius, shadow, transition, typeScale };
+/**
+ * KaleidoSwap Animation Tokens
+ */
+declare const keyframes: {
+    readonly 'accordion-down': {
+        readonly from: {
+            readonly height: "0";
+        };
+        readonly to: {
+            readonly height: "var(--radix-accordion-content-height)";
+        };
+    };
+    readonly 'accordion-up': {
+        readonly from: {
+            readonly height: "var(--radix-accordion-content-height)";
+        };
+        readonly to: {
+            readonly height: "0";
+        };
+    };
+    readonly 'fade-in': {
+        readonly from: {
+            readonly opacity: "0";
+        };
+        readonly to: {
+            readonly opacity: "1";
+        };
+    };
+    readonly 'slide-up': {
+        readonly from: {
+            readonly opacity: "0";
+            readonly transform: "translateY(10px)";
+        };
+        readonly to: {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly 'slide-in-from-bottom': {
+        readonly from: {
+            readonly opacity: "0";
+            readonly transform: "translateY(20px)";
+        };
+        readonly to: {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly shimmer: {
+        readonly '0%': {
+            readonly backgroundPosition: "-200% 0";
+        };
+        readonly '100%': {
+            readonly backgroundPosition: "200% 0";
+        };
+    };
+    readonly 'stagger-up': {
+        readonly '0%': {
+            readonly opacity: "0";
+            readonly transform: "translateY(15px)";
+        };
+        readonly '100%': {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly 'bounce-slight': {
+        readonly '0%, 100%': {
+            readonly transform: "translateY(-5%)";
+        };
+        readonly '50%': {
+            readonly transform: "translateY(0)";
+        };
+    };
+};
+declare const animation: {
+    readonly 'accordion-down': "accordion-down 0.2s ease-out";
+    readonly 'accordion-up': "accordion-up 0.2s ease-out";
+    readonly 'fade-in': "fade-in 0.3s ease-out";
+    readonly 'slide-up': "slide-up 0.3s ease-out";
+    readonly 'slide-in-from-bottom': "slide-in-from-bottom 0.4s ease-out";
+    readonly 'stagger-up': "stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards";
+    readonly shimmer: "shimmer 2s linear infinite";
+    readonly 'bounce-slight': "bounce-slight 2s infinite";
+};
+
+export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, letterSpacing, lightSemanticColors, radius, shadow, transition, typeScale };

package/dist/tokens/index.d.ts

@@ -1,13 +1,69 @@
+/**
+ * KaleidoSwap Color Tokens
+ *
+ * Single source of truth for all color constants across web and native.
+ */
+declare const lightSemanticColors: {
+    readonly background: "#ffffff";
+    readonly foreground: "#0a0a0a";
+    readonly card: "#ffffff";
+    readonly cardFg: "#0a0a0a";
+    readonly popover: "#ffffff";
+    readonly popoverFg: "#0a0a0a";
+    readonly primary: "#171717";
+    readonly primaryFg: "#fafafa";
+    readonly secondary: "#f5f5f5";
+    readonly secondaryFg: "#171717";
+    readonly muted: "#f5f5f5";
+    readonly mutedFg: "#737373";
+    readonly accent: "#f5f5f5";
+    readonly accentFg: "#171717";
+    readonly destructive: "#e7000b";
+    readonly border: "#e5e5e5";
+    readonly input: "#e5e5e5";
+    readonly ring: "#a1a1a1";
+    readonly chart1: "#2BEE79";
+    readonly chart2: "#F6C343";
+    readonly chart3: "#F7931A";
+    readonly chart4: "#7C3AED";
+    readonly chart5: "#DD352E";
+};
 declare const colors: {
     readonly textPrimary: "#ffffff";
     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";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -16,6 +72,19 @@ declare const colors: {
         readonly spark: "#FF6D00";
         readonly lightning: "#F6C343";
     };
+    readonly networkChip: {
+        readonly bitcoin: "#A65D0D";
+        readonly rgb: "#7F2623";
+        readonly arkade: "#43208B";
+        readonly spark: "#314238";
+        readonly lightning: "#53611E";
+    };
+    /** 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";
@@ -75,20 +144,64 @@ 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
  */
 declare const radius: {
+    readonly none: "0px";
+    readonly xs: "2px";
     readonly sm: "4px";
     readonly md: "6px";
     readonly lg: "8px";
     readonly xl: "12px";
+    readonly '2xl': "16px";
+    readonly '3xl': "24px";
+    readonly '4xl': "32px";
+    readonly full: "9999px";
     readonly card: "16px";
     readonly panel: "24px";
-    readonly pill: "9999px";
     readonly nav: "32px";
-    readonly full: "9999px";
+    readonly pill: "9999px";
 };
 
 /**
@@ -99,6 +212,37 @@ 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)";
+    /** 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))";
 };
 
 /**
@@ -110,4 +254,90 @@ declare const transition: {
     readonly slow: "300ms ease-out";
 };
 
-export { colors, fontFamily, fontWeight, radius, shadow, transition, typeScale };
+/**
+ * KaleidoSwap Animation Tokens
+ */
+declare const keyframes: {
+    readonly 'accordion-down': {
+        readonly from: {
+            readonly height: "0";
+        };
+        readonly to: {
+            readonly height: "var(--radix-accordion-content-height)";
+        };
+    };
+    readonly 'accordion-up': {
+        readonly from: {
+            readonly height: "var(--radix-accordion-content-height)";
+        };
+        readonly to: {
+            readonly height: "0";
+        };
+    };
+    readonly 'fade-in': {
+        readonly from: {
+            readonly opacity: "0";
+        };
+        readonly to: {
+            readonly opacity: "1";
+        };
+    };
+    readonly 'slide-up': {
+        readonly from: {
+            readonly opacity: "0";
+            readonly transform: "translateY(10px)";
+        };
+        readonly to: {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly 'slide-in-from-bottom': {
+        readonly from: {
+            readonly opacity: "0";
+            readonly transform: "translateY(20px)";
+        };
+        readonly to: {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly shimmer: {
+        readonly '0%': {
+            readonly backgroundPosition: "-200% 0";
+        };
+        readonly '100%': {
+            readonly backgroundPosition: "200% 0";
+        };
+    };
+    readonly 'stagger-up': {
+        readonly '0%': {
+            readonly opacity: "0";
+            readonly transform: "translateY(15px)";
+        };
+        readonly '100%': {
+            readonly opacity: "1";
+            readonly transform: "translateY(0)";
+        };
+    };
+    readonly 'bounce-slight': {
+        readonly '0%, 100%': {
+            readonly transform: "translateY(-5%)";
+        };
+        readonly '50%': {
+            readonly transform: "translateY(0)";
+        };
+    };
+};
+declare const animation: {
+    readonly 'accordion-down': "accordion-down 0.2s ease-out";
+    readonly 'accordion-up': "accordion-up 0.2s ease-out";
+    readonly 'fade-in': "fade-in 0.3s ease-out";
+    readonly 'slide-up': "slide-up 0.3s ease-out";
+    readonly 'slide-in-from-bottom': "slide-in-from-bottom 0.4s ease-out";
+    readonly 'stagger-up': "stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards";
+    readonly shimmer: "shimmer 2s linear infinite";
+    readonly 'bounce-slight': "bounce-slight 2s infinite";
+};
+
+export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, letterSpacing, lightSemanticColors, radius, shadow, transition, typeScale };