kaleido-ui 0.1.2 → 0.1.3

package/dist/tokens/index.d.ts

@@ -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 };

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",
@@ -77,15 +102,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
@@ -102,10 +133,59 @@ 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,
+  keyframes,
+  lightSemanticColors,
   radius,
   shadow,
   transition,