kaleido-ui 0.1.1 → 0.1.3

package/dist/native/index.d.ts

@@ -9,26 +9,26 @@ export { AmountInput, AssetSelector, Balance, CryptoAddressInput, NetworkSelecto
  *   <ThemeProvider brandConfig={kaleidoswapBrandConfig}>
  */
 declare const kaleidoswapBrandConfig: {
-    primaryColor: "#e5e5e5";
-    secondaryColor: "#262626";
+    primaryColor: "#2BEE79";
+    secondaryColor: "hsl(154 26% 17%)";
 };
 /**
  * Full custom theme tokens for more granular control.
  */
 declare const kaleidoswapTokens: {
     readonly colors: {
-        readonly primary: "#e5e5e5";
-        readonly primaryFg: "#171717";
-        readonly background: "#0a0a0a";
-        readonly surface: "#171717";
-        readonly surfaceHighlight: "#262626";
-        readonly border: "#ffffff1a";
-        readonly textPrimary: "#fafafa";
-        readonly textSecondary: "#a1a1a1";
-        readonly success: "#e5e5e5";
-        readonly warning: "#fe9a00";
-        readonly error: "#ff6467";
-        readonly info: "#1447e6";
+        readonly primary: "#2BEE79";
+        readonly primaryFg: "#051B10";
+        readonly background: "hsl(158 58% 7%)";
+        readonly surface: "hsl(156 32% 12%)";
+        readonly surfaceHighlight: "hsl(154 26% 17%)";
+        readonly border: "hsl(150 20% 24%)";
+        readonly textPrimary: "#ffffff";
+        readonly textSecondary: "rgba(255, 255, 255, 0.55)";
+        readonly success: "#2BEE79";
+        readonly warning: "#F7931A";
+        readonly error: "hsl(0 62% 50%)";
+        readonly info: "#2BEE79";
         readonly network: {
             readonly bitcoin: "#F7931A";
             readonly rgb: "#DD352E";
@@ -84,9 +84,9 @@ declare const variantConfig: {
         readonly iconColor: "#60A5FA";
     };
     readonly success: {
-        readonly bg: "#e5e5e51A";
-        readonly borderColor: "#e5e5e533";
-        readonly iconColor: "#e5e5e5";
+        readonly bg: "#2BEE791A";
+        readonly borderColor: "#2BEE7933";
+        readonly iconColor: "#2BEE79";
     };
 };
 interface AlertBannerProps {
@@ -103,15 +103,15 @@ interface SectionLabelProps {
 declare function SectionLabel({ children, style }: SectionLabelProps): react_jsx_runtime.JSX.Element;
 
 declare const colors: {
-    readonly textPrimary: "#fafafa";
-    readonly textSecondary: "#a1a1a1";
-    readonly textMuted: "#ffffff1a";
-    readonly textDimmed: "#737373";
+    readonly textPrimary: "#ffffff";
+    readonly textSecondary: "rgba(255, 255, 255, 0.55)";
+    readonly textMuted: "hsl(150 20% 24%)";
+    readonly textDimmed: "#2BEE79";
     /** Semantic */
-    readonly success: "#e5e5e5";
-    readonly warning: "#fe9a00";
-    readonly error: "#ff6467";
-    readonly info: "#1447e6";
+    readonly success: "#2BEE79";
+    readonly warning: "#F7931A";
+    readonly error: "hsl(0 62% 50%)";
+    readonly info: "#2BEE79";
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -126,31 +126,31 @@ declare const colors: {
         readonly receive: "#2BEE79";
         readonly swap: "#4290FF";
     };
-    readonly background: "#0a0a0a";
-    readonly foreground: "#fafafa";
-    readonly border: "#ffffff1a";
-    readonly input: "#ffffff26";
-    readonly destructive: "#ff6467";
-    readonly secondary: "#262626";
-    readonly secondaryFg: "#fafafa";
-    readonly muted: "#262626";
-    readonly mutedFg: "#a1a1a1";
-    readonly primary: "#e5e5e5";
-    readonly primaryFg: "#171717";
-    readonly accent: "#262626";
-    readonly accentFg: "#fafafa";
-    readonly ring: "#737373";
-    readonly card: "#171717";
-    readonly cardFg: "#fafafa";
-    readonly popover: "#171717";
-    readonly popoverFg: "#fafafa";
-    readonly chart1: "#1447e6";
-    readonly chart2: "#00bc7d";
-    readonly chart3: "#fe9a00";
-    readonly chart4: "#ad46ff";
-    readonly chart5: "#ff2056";
-    readonly semanticBackground: "#272625";
-    readonly semanticBorder: "#535151";
+    readonly background: "hsl(158 58% 7%)";
+    readonly foreground: "#ffffff";
+    readonly border: "hsl(150 20% 24%)";
+    readonly input: "rgba(255, 255, 255, 0.15)";
+    readonly destructive: "hsl(0 62% 50%)";
+    readonly secondary: "hsl(154 26% 17%)";
+    readonly secondaryFg: "#ffffff";
+    readonly muted: "hsl(156 32% 12%)";
+    readonly mutedFg: "rgba(255, 255, 255, 0.55)";
+    readonly primary: "#2BEE79";
+    readonly primaryFg: "#051B10";
+    readonly accent: "hsl(154 26% 17%)";
+    readonly accentFg: "#ffffff";
+    readonly ring: "#2BEE79";
+    readonly card: "hsl(156 32% 12%)";
+    readonly cardFg: "#ffffff";
+    readonly popover: "hsl(154 26% 17%)";
+    readonly popoverFg: "#ffffff";
+    readonly chart1: "#2BEE79";
+    readonly chart2: "#F6C343";
+    readonly chart3: "#F7931A";
+    readonly chart4: "#7C3AED";
+    readonly chart5: "#DD352E";
+    readonly semanticBackground: "hsl(156 32% 12%)";
+    readonly semanticBorder: "hsl(150 20% 24%)";
 };
 
 /**
@@ -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

@@ -3,31 +3,31 @@ import { ThemeProvider } from "@tetherto/wdk-uikit-react-native";
 
 // src/tokens/colors.ts
 var darkSemanticColors = {
-  background: "#0a0a0a",
-  foreground: "#fafafa",
-  border: "#ffffff1a",
-  input: "#ffffff26",
-  destructive: "#ff6467",
-  secondary: "#262626",
-  secondaryFg: "#fafafa",
-  muted: "#262626",
-  mutedFg: "#a1a1a1",
-  primary: "#e5e5e5",
-  primaryFg: "#171717",
-  accent: "#262626",
-  accentFg: "#fafafa",
-  ring: "#737373",
-  card: "#171717",
-  cardFg: "#fafafa",
-  popover: "#171717",
-  popoverFg: "#fafafa",
-  chart1: "#1447e6",
-  chart2: "#00bc7d",
-  chart3: "#fe9a00",
-  chart4: "#ad46ff",
-  chart5: "#ff2056",
-  semanticBackground: "#272625",
-  semanticBorder: "#535151"
+  background: "hsl(158 58% 7%)",
+  foreground: "#ffffff",
+  border: "hsl(150 20% 24%)",
+  input: "rgba(255, 255, 255, 0.15)",
+  destructive: "hsl(0 62% 50%)",
+  secondary: "hsl(154 26% 17%)",
+  secondaryFg: "#ffffff",
+  muted: "hsl(156 32% 12%)",
+  mutedFg: "rgba(255, 255, 255, 0.55)",
+  primary: "#2BEE79",
+  primaryFg: "#051B10",
+  accent: "hsl(154 26% 17%)",
+  accentFg: "#ffffff",
+  ring: "#2BEE79",
+  card: "hsl(156 32% 12%)",
+  cardFg: "#ffffff",
+  popover: "hsl(154 26% 17%)",
+  popoverFg: "#ffffff",
+  chart1: "#2BEE79",
+  chart2: "#F6C343",
+  chart3: "#F7931A",
+  chart4: "#7C3AED",
+  chart5: "#DD352E",
+  semanticBackground: "hsl(156 32% 12%)",
+  semanticBorder: "hsl(150 20% 24%)"
 };
 var colors = {
   ...darkSemanticColors,
@@ -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,32 +34,57 @@ __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: "#0a0a0a",
-  foreground: "#fafafa",
-  border: "#ffffff1a",
-  input: "#ffffff26",
-  destructive: "#ff6467",
-  secondary: "#262626",
-  secondaryFg: "#fafafa",
-  muted: "#262626",
-  mutedFg: "#a1a1a1",
-  primary: "#e5e5e5",
-  primaryFg: "#171717",
-  accent: "#262626",
-  accentFg: "#fafafa",
-  ring: "#737373",
-  card: "#171717",
-  cardFg: "#fafafa",
-  popover: "#171717",
-  popoverFg: "#fafafa",
-  chart1: "#1447e6",
-  chart2: "#00bc7d",
-  chart3: "#fe9a00",
-  chart4: "#ad46ff",
-  chart5: "#ff2056",
-  semanticBackground: "#272625",
-  semanticBorder: "#535151"
+  background: "hsl(158 58% 7%)",
+  foreground: "#ffffff",
+  border: "hsl(150 20% 24%)",
+  input: "rgba(255, 255, 255, 0.15)",
+  destructive: "hsl(0 62% 50%)",
+  secondary: "hsl(154 26% 17%)",
+  secondaryFg: "#ffffff",
+  muted: "hsl(156 32% 12%)",
+  mutedFg: "rgba(255, 255, 255, 0.55)",
+  primary: "#2BEE79",
+  primaryFg: "#051B10",
+  accent: "hsl(154 26% 17%)",
+  accentFg: "#ffffff",
+  ring: "#2BEE79",
+  card: "hsl(156 32% 12%)",
+  cardFg: "#ffffff",
+  popover: "hsl(154 26% 17%)",
+  popoverFg: "#ffffff",
+  chart1: "#2BEE79",
+  chart2: "#F6C343",
+  chart3: "#F7931A",
+  chart4: "#7C3AED",
+  chart5: "#DD352E",
+  semanticBackground: "hsl(156 32% 12%)",
+  semanticBorder: "hsl(150 20% 24%)"
 };
 var colors = {
   ...darkSemanticColors,
@@ -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,13 +1,43 @@
+/**
+ * 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: "#fafafa";
-    readonly textSecondary: "#a1a1a1";
-    readonly textMuted: "#ffffff1a";
-    readonly textDimmed: "#737373";
+    readonly textPrimary: "#ffffff";
+    readonly textSecondary: "rgba(255, 255, 255, 0.55)";
+    readonly textMuted: "hsl(150 20% 24%)";
+    readonly textDimmed: "#2BEE79";
     /** Semantic */
-    readonly success: "#e5e5e5";
-    readonly warning: "#fe9a00";
-    readonly error: "#ff6467";
-    readonly info: "#1447e6";
+    readonly success: "#2BEE79";
+    readonly warning: "#F7931A";
+    readonly error: "hsl(0 62% 50%)";
+    readonly info: "#2BEE79";
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -22,31 +52,31 @@ declare const colors: {
         readonly receive: "#2BEE79";
         readonly swap: "#4290FF";
     };
-    readonly background: "#0a0a0a";
-    readonly foreground: "#fafafa";
-    readonly border: "#ffffff1a";
-    readonly input: "#ffffff26";
-    readonly destructive: "#ff6467";
-    readonly secondary: "#262626";
-    readonly secondaryFg: "#fafafa";
-    readonly muted: "#262626";
-    readonly mutedFg: "#a1a1a1";
-    readonly primary: "#e5e5e5";
-    readonly primaryFg: "#171717";
-    readonly accent: "#262626";
-    readonly accentFg: "#fafafa";
-    readonly ring: "#737373";
-    readonly card: "#171717";
-    readonly cardFg: "#fafafa";
-    readonly popover: "#171717";
-    readonly popoverFg: "#fafafa";
-    readonly chart1: "#1447e6";
-    readonly chart2: "#00bc7d";
-    readonly chart3: "#fe9a00";
-    readonly chart4: "#ad46ff";
-    readonly chart5: "#ff2056";
-    readonly semanticBackground: "#272625";
-    readonly semanticBorder: "#535151";
+    readonly background: "hsl(158 58% 7%)";
+    readonly foreground: "#ffffff";
+    readonly border: "hsl(150 20% 24%)";
+    readonly input: "rgba(255, 255, 255, 0.15)";
+    readonly destructive: "hsl(0 62% 50%)";
+    readonly secondary: "hsl(154 26% 17%)";
+    readonly secondaryFg: "#ffffff";
+    readonly muted: "hsl(156 32% 12%)";
+    readonly mutedFg: "rgba(255, 255, 255, 0.55)";
+    readonly primary: "#2BEE79";
+    readonly primaryFg: "#051B10";
+    readonly accent: "hsl(154 26% 17%)";
+    readonly accentFg: "#ffffff";
+    readonly ring: "#2BEE79";
+    readonly card: "hsl(156 32% 12%)";
+    readonly cardFg: "#ffffff";
+    readonly popover: "hsl(154 26% 17%)";
+    readonly popoverFg: "#ffffff";
+    readonly chart1: "#2BEE79";
+    readonly chart2: "#F6C343";
+    readonly chart3: "#F7931A";
+    readonly chart4: "#7C3AED";
+    readonly chart5: "#DD352E";
+    readonly semanticBackground: "hsl(156 32% 12%)";
+    readonly semanticBorder: "hsl(150 20% 24%)";
 };
 
 /**
@@ -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 };