kaleido-ui 0.1.2 → 0.1.3

package/dist/css/kaleido-ui.css

@@ -1,84 +1,250 @@
+/* AUTO-GENERATED — do not edit by hand.
+ * Source: scripts/generate-css.ts  ←  src/tokens/
+ * Regenerate: npm run generate:css
+ */
+
+/* ── Material Symbols ──────────────────────────────────────────────────── */
 .material-symbols-outlined {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 400,
-    'GRAD' 0,
-    'opsz' 24;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 }
-
 .material-symbols-outlined.filled {
-  font-variation-settings:
-    'FILL' 1,
-    'wght' 400,
-    'GRAD' 0,
-    'opsz' 24;
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 }
 
+/* ── Semantic colors (light mode) — from src/tokens/colors.ts ───────────── */
 :root {
-  --accent: #f5f5f5;
-  --accent-foreground: #171717;
-  --background: #ffffff;
-  --border: #e5e5e5;
-  --card: #ffffff;
-  --card-foreground: #0a0a0a;
-  --chart-1: #f54900;
-  --chart-2: #009689;
-  --chart-3: #104e64;
-  --chart-4: #ffb900;
-  --chart-5: #fe9a00;
-  --destructive: #e7000b;
-  --destructive-foreground: #fafafa;
-  --foreground: #0a0a0a;
-  --input: #e5e5e5;
-  --muted: #f5f5f5;
-  --muted-foreground: #737373;
-  --popover: #ffffff;
-  --popover-foreground: #0a0a0a;
-  --primary: #171717;
-  --primary-foreground: #fafafa;
-  --ring: #a1a1a1;
-  --secondary: #f5f5f5;
+  --background:           #ffffff;
+  --foreground:           #0a0a0a;
+  --card:                 #ffffff;
+  --card-foreground:      #0a0a0a;
+  --popover:              #ffffff;
+  --popover-foreground:   #0a0a0a;
+  --primary:              #171717;
+  --primary-foreground:   #fafafa;
+  --secondary:            #f5f5f5;
   --secondary-foreground: #171717;
-  --semantic-background: #696867;
-  --semantic-border: #898887;
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-2xl: 16px;
-  --radius-3xl: 24px;
-  --radius-4xl: 32px;
-  --radius-full: 9999px;
-  --radius-none: 0px;
-  --radius: var(--radius-lg);
+  --muted:                #f5f5f5;
+  --muted-foreground:     #737373;
+  --accent:               #f5f5f5;
+  --accent-foreground:    #171717;
+  --destructive:          #e7000b;
+  --border:               #e5e5e5;
+  --input:                #e5e5e5;
+  --ring:                 #a1a1a1;
+  --chart-1:              #2BEE79;
+  --chart-2:              #F6C343;
+  --chart-3:              #F7931A;
+  --chart-4:              #7C3AED;
+  --chart-5:              #DD352E;
 }
 
+/* ── Semantic colors (dark mode) — from src/tokens/colors.ts ───────────── */
 .dark {
-  --accent: hsl(154 26% 17%);
-  --accent-foreground: #ffffff;
-  --background: hsl(158 58% 7%);
-  --border: hsl(150 20% 24%);
-  --card: hsl(156 32% 12%);
-  --card-foreground: #ffffff;
-  --chart-1: #2BEE79;
-  --chart-2: #F6C343;
-  --chart-3: #F7931A;
-  --chart-4: #7C3AED;
-  --chart-5: #DD352E;
-  --destructive: hsl(0 62% 50%);
-  --destructive-foreground: #ffffff;
-  --foreground: #ffffff;
-  --input: rgba(255, 255, 255, 0.15);
-  --muted: hsl(156 32% 12%);
-  --muted-foreground: rgba(255, 255, 255, 0.55);
-  --popover: hsl(154 26% 17%);
-  --popover-foreground: #ffffff;
-  --primary: #2BEE79;
-  --primary-foreground: #051B10;
-  --ring: #2BEE79;
-  --secondary: hsl(154 26% 17%);
+  --background:           hsl(158 58% 7%);
+  --foreground:           #ffffff;
+  --card:                 hsl(156 32% 12%);
+  --card-foreground:      #ffffff;
+  --popover:              hsl(154 26% 17%);
+  --popover-foreground:   #ffffff;
+  --primary:              #2BEE79;
+  --primary-foreground:   #051B10;
+  --secondary:            hsl(154 26% 17%);
   --secondary-foreground: #ffffff;
-  --semantic-background: hsl(156 32% 12%);
-  --semantic-border: hsl(150 20% 24%);
+  --muted:                hsl(156 32% 12%);
+  --muted-foreground:     rgba(255, 255, 255, 0.55);
+  --accent:               hsl(154 26% 17%);
+  --accent-foreground:    #ffffff;
+  --destructive:          hsl(0 62% 50%);
+  --border:               hsl(150 20% 24%);
+  --input:                rgba(255, 255, 255, 0.15);
+  --ring:                 #2BEE79;
+  --chart-1:              #2BEE79;
+  --chart-2:              #F6C343;
+  --chart-3:              #F7931A;
+  --chart-4:              #7C3AED;
+  --chart-5:              #DD352E;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Tailwind v4 @theme
+   @theme inline  — semantic colors: utilities reference CSS vars so dark mode works at runtime.
+   @theme         — static tokens: Tailwind owns the variable + generates the utility.
+   ───────────────────────────────────────────────────────────────────────── */
+
+@theme inline {
+  /* Semantic colors */
+  --color-background:           var(--background);
+  --color-foreground:           var(--foreground);
+  --color-card:                 var(--card);
+  --color-card-foreground:      var(--card-foreground);
+  --color-popover:              var(--popover);
+  --color-popover-foreground:   var(--popover-foreground);
+  --color-primary:              var(--primary);
+  --color-primary-foreground:   var(--primary-foreground);
+  --color-secondary:            var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted:                var(--muted);
+  --color-muted-foreground:     var(--muted-foreground);
+  --color-accent:               var(--accent);
+  --color-accent-foreground:    var(--accent-foreground);
+  --color-destructive:          var(--destructive);
+  --color-border:               var(--border);
+  --color-input:                var(--input);
+  --color-ring:                 var(--ring);
+  --color-chart-1:              var(--chart-1);
+  --color-chart-2:              var(--chart-2);
+  --color-chart-3:              var(--chart-3);
+  --color-chart-4:              var(--chart-4);
+  --color-chart-5:              var(--chart-5);
+}
+
+@theme {
+  /* Network colors */
+  --color-network-bitcoin:   #F7931A;
+  --color-network-rgb:       #DD352E;
+  --color-network-arkade:    #7C3AED;
+  --color-network-spark:     #FF6D00;
+  --color-network-lightning: #F6C343;
+
+  /* Transaction colors */
+  --color-tx-sent:    #F94040;
+  --color-tx-receive: #2BEE79;
+  --color-tx-swap:    #4290FF;
+
+  /* Typography */
+  --font-sans:    'Satoshi', system-ui, -apple-system, sans-serif;
+  --font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
+  --font-mono:    'Geist Mono', monospace;
+  --text-xxs: 10px;
+  --text-xxs--line-height: 14px;
+  --text-tiny: 11px;
+  --text-tiny--line-height: 16px;
+  --text-caption: 13px;
+  --text-caption--line-height: 18px;
+  --text-body: 15px;
+  --text-body--line-height: 22px;
+  --text-subhead: 17px;
+  --text-subhead--line-height: 24px;
+  --text-title: 20px;
+  --text-title--line-height: 28px;
+  --text-headline: 28px;
+  --text-headline--line-height: 34px;
+  --text-display: 36px;
+  --text-display--line-height: 40px;
+
+  /* Border radius */
+  --radius-none:  0px;
+  --radius-xs:    2px;
+  --radius-sm:    4px;
+  --radius-md:    6px;
+  --radius-lg:    8px;
+  --radius-xl:    12px;
+  --radius-2xl:   16px;
+  --radius-3xl:   24px;
+  --radius-4xl:   32px;
+  --radius-full:  9999px;
+  --radius-card:  16px;
+  --radius-panel: 24px;
+  --radius-nav:   32px;
+  --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);
+
+  /* Transitions */
+  --transition-fast:    150ms ease-out;
+  --transition-default: 200ms ease-out;
+  --transition-slow:    300ms ease-out;
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-slide-up: slide-up 0.3s ease-out;
+  --animate-slide-in-from-bottom: slide-in-from-bottom 0.4s ease-out;
+  --animate-stagger-up: stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+  --animate-shimmer: shimmer 2s linear infinite;
+  --animate-bounce-slight: bounce-slight 2s infinite;
+}
+
+/* ── Keyframes — from src/tokens/animations.ts ──────────────────────────── */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes stagger-up {
+  0% {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounce-slight {
+  0%, 100% {
+    transform: translateY(-5%);
+  }
+  50% {
+    transform: translateY(0);
+  }
 }

package/dist/native/index.cjs

@@ -280,15 +280,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

package/dist/native/index.d.cts

@@ -184,15 +184,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";
 };
 
 /**

package/dist/native/index.d.ts

@@ -184,15 +184,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";
 };
 
 /**

package/dist/native/index.js

@@ -242,15 +242,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

package/dist/tokens/index.cjs

@@ -20,9 +20,12 @@ 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,
+  keyframes: () => keyframes,
+  lightSemanticColors: () => lightSemanticColors,
   radius: () => radius,
   shadow: () => shadow,
   transition: () => transition,
@@ -31,6 +34,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",
@@ -109,15 +137,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
@@ -134,11 +168,60 @@ 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,
+  keyframes,
+  lightSemanticColors,
   radius,
   shadow,
   transition,

package/dist/tokens/index.d.cts

@@ -1,3 +1,33 @@
+/**
+ * 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)";
@@ -80,15 +110,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";
 };
 
 /**
@@ -110,4 +145,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, keyframes, lightSemanticColors, radius, shadow, transition, typeScale };