kaleido-ui 0.1.2 → 0.1.4

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,37 @@ 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";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -120,6 +146,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";
@@ -184,15 +223,20 @@ declare const fontWeight: {
  * 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";
 };
 
 /**
@@ -203,6 +247,14 @@ 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)";
 };
 
 /**

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,37 @@ 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";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -120,6 +146,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";
@@ -184,15 +223,20 @@ declare const fontWeight: {
  * 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";
 };
 
 /**
@@ -203,6 +247,14 @@ 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)";
 };
 
 /**

package/dist/native/index.js

@@ -35,11 +35,37 @@ 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"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -48,6 +74,19 @@ var colors = {
     spark: "#FF6D00",
     lightning: "#F6C343"
   },
+  networkChip: {
+    bitcoin: "#A65D0D",
+    rgb: "#7F2623",
+    arkade: "#43208B",
+    spark: "#314238",
+    lightning: "#53611E"
+  },
+  /** Asset icon brand colors — used as solid backgrounds behind glyphs */
+  assetIcon: {
+    eth: "#627EEA",
+    usdt: "#26A17B",
+    usdc: "#2775CA"
+  },
   /** Transaction direction */
   tx: {
     sent: "#F94040",
@@ -118,9 +157,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 +217,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 +237,7 @@ var styles3 = StyleSheet3.create({
   },
   text: {
     fontSize: 14,
-    color: "#FFFFFF",
+    color: colors.text.primary,
     flex: 1
   }
 });
@@ -214,7 +253,7 @@ var styles4 = StyleSheet4.create({
     fontSize: 10,
     fontWeight: "900",
     letterSpacing: 2.2,
-    color: "rgba(255, 255, 255, 0.3)"
+    color: colors.text.dimmed
   }
 });
 
@@ -242,15 +281,21 @@ var fontWeight = {
 
 // src/tokens/radius.ts
 var radius = {
+  none: "0px",
+  xs: "2px",
   sm: "4px",
   md: "6px",
   lg: "8px",
   xl: "12px",
+  "2xl": "16px",
+  "3xl": "24px",
+  "4xl": "32px",
+  full: "9999px",
+  // Semantic aliases
   card: "16px",
   panel: "24px",
-  pill: "9999px",
   nav: "32px",
-  full: "9999px"
+  pill: "9999px"
 };
 
 // src/tokens/shadows.ts
@@ -258,7 +303,15 @@ 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)",
+  /** 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

@@ -20,9 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tokens/index.ts
 var tokens_exports = {};
 __export(tokens_exports, {
+  animation: () => animation,
   colors: () => colors,
   fontFamily: () => fontFamily,
   fontWeight: () => fontWeight,
+  gradient: () => gradient,
+  iconBoxSize: () => iconBoxSize,
+  iconSize: () => iconSize,
+  keyframes: () => keyframes,
+  letterSpacing: () => letterSpacing,
+  lightSemanticColors: () => lightSemanticColors,
   radius: () => radius,
   shadow: () => shadow,
   transition: () => transition,
@@ -31,6 +38,31 @@ __export(tokens_exports, {
 module.exports = __toCommonJS(tokens_exports);
 
 // src/tokens/colors.ts
+var lightSemanticColors = {
+  background: "#ffffff",
+  foreground: "#0a0a0a",
+  card: "#ffffff",
+  cardFg: "#0a0a0a",
+  popover: "#ffffff",
+  popoverFg: "#0a0a0a",
+  primary: "#171717",
+  primaryFg: "#fafafa",
+  secondary: "#f5f5f5",
+  secondaryFg: "#171717",
+  muted: "#f5f5f5",
+  mutedFg: "#737373",
+  accent: "#f5f5f5",
+  accentFg: "#171717",
+  destructive: "#e7000b",
+  border: "#e5e5e5",
+  input: "#e5e5e5",
+  ring: "#a1a1a1",
+  chart1: "#2BEE79",
+  chart2: "#F6C343",
+  chart3: "#F7931A",
+  chart4: "#7C3AED",
+  chart5: "#DD352E"
+};
 var darkSemanticColors = {
   background: "hsl(158 58% 7%)",
   foreground: "#ffffff",
@@ -64,11 +96,37 @@ 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"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -77,6 +135,19 @@ var colors = {
     spark: "#FF6D00",
     lightning: "#F6C343"
   },
+  networkChip: {
+    bitcoin: "#A65D0D",
+    rgb: "#7F2623",
+    arkade: "#43208B",
+    spark: "#314238",
+    lightning: "#53611E"
+  },
+  /** Asset icon brand colors — used as solid backgrounds behind glyphs */
+  assetIcon: {
+    eth: "#627EEA",
+    usdt: "#26A17B",
+    usdc: "#2775CA"
+  },
   /** Transaction direction */
   tx: {
     sent: "#F94040",
@@ -106,18 +177,51 @@ 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 = {
+  none: "0px",
+  xs: "2px",
   sm: "4px",
   md: "6px",
   lg: "8px",
   xl: "12px",
+  "2xl": "16px",
+  "3xl": "24px",
+  "4xl": "32px",
+  full: "9999px",
+  // Semantic aliases
   card: "16px",
   panel: "24px",
-  pill: "9999px",
   nav: "32px",
-  full: "9999px"
+  pill: "9999px"
 };
 
 // src/tokens/shadows.ts
@@ -125,7 +229,32 @@ 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)",
+  /** 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
@@ -134,11 +263,64 @@ var transition = {
   default: "200ms ease-out",
   slow: "300ms ease-out"
 };
+
+// src/tokens/animations.ts
+var keyframes = {
+  "accordion-down": {
+    from: { height: "0" },
+    to: { height: "var(--radix-accordion-content-height)" }
+  },
+  "accordion-up": {
+    from: { height: "var(--radix-accordion-content-height)" },
+    to: { height: "0" }
+  },
+  "fade-in": {
+    from: { opacity: "0" },
+    to: { opacity: "1" }
+  },
+  "slide-up": {
+    from: { opacity: "0", transform: "translateY(10px)" },
+    to: { opacity: "1", transform: "translateY(0)" }
+  },
+  "slide-in-from-bottom": {
+    from: { opacity: "0", transform: "translateY(20px)" },
+    to: { opacity: "1", transform: "translateY(0)" }
+  },
+  shimmer: {
+    "0%": { backgroundPosition: "-200% 0" },
+    "100%": { backgroundPosition: "200% 0" }
+  },
+  "stagger-up": {
+    "0%": { opacity: "0", transform: "translateY(15px)" },
+    "100%": { opacity: "1", transform: "translateY(0)" }
+  },
+  "bounce-slight": {
+    "0%, 100%": { transform: "translateY(-5%)" },
+    "50%": { transform: "translateY(0)" }
+  }
+};
+var animation = {
+  "accordion-down": "accordion-down 0.2s ease-out",
+  "accordion-up": "accordion-up 0.2s ease-out",
+  "fade-in": "fade-in 0.3s ease-out",
+  "slide-up": "slide-up 0.3s ease-out",
+  "slide-in-from-bottom": "slide-in-from-bottom 0.4s ease-out",
+  "stagger-up": "stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards",
+  shimmer: "shimmer 2s linear infinite",
+  "bounce-slight": "bounce-slight 2s infinite"
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  animation,
   colors,
   fontFamily,
   fontWeight,
+  gradient,
+  iconBoxSize,
+  iconSize,
+  keyframes,
+  letterSpacing,
+  lightSemanticColors,
   radius,
   shadow,
   transition,