kaleido-ui 0.1.2 → 0.1.4

package/dist/tokens/index.js

@@ -1,4 +1,29 @@
 // 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",
@@ -32,11 +57,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",
@@ -45,6 +96,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",
@@ -74,18 +138,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
@@ -93,7 +190,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
@@ -102,10 +224,63 @@ 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"
+};
 export {
+  animation,
   colors,
   fontFamily,
   fontWeight,
+  gradient,
+  iconBoxSize,
+  iconSize,
+  keyframes,
+  letterSpacing,
+  lightSemanticColors,
   radius,
   shadow,
   transition,