kaleido-ui 0.1.0 → 0.1.2

package/dist/native/index.d.ts

@@ -10,7 +10,7 @@ export { AmountInput, AssetSelector, Balance, CryptoAddressInput, NetworkSelecto
  */
 declare const kaleidoswapBrandConfig: {
     primaryColor: "#2BEE79";
-    secondaryColor: "#1FA855";
+    secondaryColor: "hsl(154 26% 17%)";
 };
 /**
  * Full custom theme tokens for more granular control.
@@ -18,18 +18,17 @@ declare const kaleidoswapBrandConfig: {
 declare const kaleidoswapTokens: {
     readonly colors: {
         readonly primary: "#2BEE79";
-        readonly primaryDark: "#1FA855";
-        readonly primaryFg: "#102217";
-        readonly background: "#102217";
-        readonly surface: "#162E21";
-        readonly surfaceHighlight: "#243E30";
-        readonly border: "#244A35";
-        readonly textPrimary: "#FFFFFF";
-        readonly textSecondary: "#92C9A8";
+        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: "#F59E0B";
-        readonly error: "#F94040";
-        readonly info: "#4290FF";
+        readonly warning: "#F7931A";
+        readonly error: "hsl(0 62% 50%)";
+        readonly info: "#2BEE79";
         readonly network: {
             readonly bitcoin: "#F7931A";
             readonly rgb: "#DD352E";
@@ -103,35 +102,16 @@ interface SectionLabelProps {
 }
 declare function SectionLabel({ children, style }: SectionLabelProps): react_jsx_runtime.JSX.Element;
 
-/**
- * KaleidoSwap Color Tokens
- *
- * Single source of truth for all color constants across web and native.
- */
 declare const colors: {
-    /** Brand */
-    readonly primary: "#2BEE79";
-    readonly primaryDark: "#1FA855";
-    readonly primaryFg: "#102217";
-    /** Surfaces (dark theme — the default) */
-    readonly bgDark: "#102217";
-    readonly surfaceDark: "#162E21";
-    readonly surfaceHighlight: "#243E30";
-    readonly surfaceBorder: "#244A35";
-    readonly surfaceDarker: "#0B1810";
-    /** Surfaces (light theme) */
-    readonly bgLight: "#F6F8F7";
-    readonly surfaceLight: "#FFFFFF";
-    /** Text */
-    readonly textPrimary: "#FFFFFF";
-    readonly textSecondary: "#92C9A8";
-    readonly textMuted: "rgba(255,255,255,0.5)";
-    readonly textDimmed: "rgba(255,255,255,0.35)";
+    readonly textPrimary: "#ffffff";
+    readonly textSecondary: "rgba(255, 255, 255, 0.55)";
+    readonly textMuted: "hsl(150 20% 24%)";
+    readonly textDimmed: "#2BEE79";
     /** Semantic */
     readonly success: "#2BEE79";
-    readonly warning: "#F59E0B";
-    readonly error: "#F94040";
-    readonly info: "#4290FF";
+    readonly warning: "#F7931A";
+    readonly error: "hsl(0 62% 50%)";
+    readonly info: "#2BEE79";
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -146,13 +126,38 @@ declare const colors: {
         readonly receive: "#2BEE79";
         readonly swap: "#4290FF";
     };
+    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%)";
 };
 
 /**
  * KaleidoSwap Typography Tokens
  */
 declare const fontFamily: {
-    readonly display: "'Geist Sans', system-ui, -apple-system, sans-serif";
+    readonly display: "'Satoshi', system-ui, -apple-system, sans-serif";
     readonly mono: "'Geist Mono', monospace";
 };
 /**
@@ -179,14 +184,14 @@ declare const fontWeight: {
  * KaleidoSwap Border Radius Tokens
  */
 declare const radius: {
-    readonly sm: "8px";
-    readonly md: "12px";
-    readonly lg: "16px";
-    readonly xl: "20px";
-    readonly card: "20px";
-    readonly panel: "22px";
-    readonly pill: "24px";
-    readonly nav: "14px";
+    readonly sm: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "12px";
+    readonly card: "16px";
+    readonly panel: "24px";
+    readonly pill: "9999px";
+    readonly nav: "32px";
     readonly full: "9999px";
 };
 
@@ -194,10 +199,10 @@ declare const radius: {
  * KaleidoSwap Shadow Tokens
  */
 declare const shadow: {
-    readonly glow: "0 0 20px rgba(43, 238, 121, 0.15)";
-    readonly glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)";
-    readonly glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)";
-    readonly glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)";
+    readonly glow: "0 0 20px rgba(10, 10, 10, 0.15)";
+    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)";
 };
 
 /**

package/dist/native/index.js

@@ -2,30 +2,44 @@
 import { ThemeProvider } from "@tetherto/wdk-uikit-react-native";
 
 // src/tokens/colors.ts
-var colors = {
-  /** Brand */
+var darkSemanticColors = {
+  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",
-  primaryDark: "#1FA855",
-  primaryFg: "#102217",
-  /** Surfaces (dark theme — the default) */
-  bgDark: "#102217",
-  surfaceDark: "#162E21",
-  surfaceHighlight: "#243E30",
-  surfaceBorder: "#244A35",
-  surfaceDarker: "#0B1810",
-  /** Surfaces (light theme) */
-  bgLight: "#F6F8F7",
-  surfaceLight: "#FFFFFF",
-  /** Text */
-  textPrimary: "#FFFFFF",
-  textSecondary: "#92C9A8",
-  textMuted: "rgba(255,255,255,0.5)",
-  textDimmed: "rgba(255,255,255,0.35)",
+  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,
+  textPrimary: darkSemanticColors.foreground,
+  textSecondary: darkSemanticColors.mutedFg,
+  textMuted: darkSemanticColors.border,
+  textDimmed: darkSemanticColors.ring,
   /** Semantic */
-  success: "#2BEE79",
-  warning: "#F59E0B",
-  error: "#F94040",
-  info: "#4290FF",
+  success: darkSemanticColors.primary,
+  warning: darkSemanticColors.chart3,
+  error: darkSemanticColors.destructive,
+  info: darkSemanticColors.chart1,
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -45,17 +59,16 @@ var colors = {
 // src/native/theme.ts
 var kaleidoswapBrandConfig = {
   primaryColor: colors.primary,
-  secondaryColor: colors.primaryDark
+  secondaryColor: colors.secondary
 };
 var kaleidoswapTokens = {
   colors: {
     primary: colors.primary,
-    primaryDark: colors.primaryDark,
     primaryFg: colors.primaryFg,
-    background: colors.bgDark,
-    surface: colors.surfaceDark,
-    surfaceHighlight: colors.surfaceHighlight,
-    border: colors.surfaceBorder,
+    background: colors.background,
+    surface: colors.card,
+    surfaceHighlight: colors.accent,
+    border: colors.border,
     textPrimary: colors.textPrimary,
     textSecondary: colors.textSecondary,
     success: colors.success,
@@ -207,7 +220,7 @@ var styles4 = StyleSheet4.create({
 
 // src/tokens/typography.ts
 var fontFamily = {
-  display: "'Geist Sans', system-ui, -apple-system, sans-serif",
+  display: "'Satoshi', system-ui, -apple-system, sans-serif",
   mono: "'Geist Mono', monospace"
 };
 var typeScale = {
@@ -229,23 +242,23 @@ var fontWeight = {
 
 // src/tokens/radius.ts
 var radius = {
-  sm: "8px",
-  md: "12px",
-  lg: "16px",
-  xl: "20px",
-  card: "20px",
-  panel: "22px",
-  pill: "24px",
-  nav: "14px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  card: "16px",
+  panel: "24px",
+  pill: "9999px",
+  nav: "32px",
   full: "9999px"
 };
 
 // src/tokens/shadows.ts
 var shadow = {
-  glow: "0 0 20px rgba(43, 238, 121, 0.15)",
-  glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)",
-  glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)",
-  glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)"
+  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)"
 };
 
 // src/tokens/transitions.ts

package/dist/tailwind/index.cjs

@@ -25,30 +25,44 @@ __export(tailwind_exports, {
 module.exports = __toCommonJS(tailwind_exports);
 
 // src/tokens/colors.ts
-var colors = {
-  /** Brand */
+var darkSemanticColors = {
+  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",
-  primaryDark: "#1FA855",
-  primaryFg: "#102217",
-  /** Surfaces (dark theme — the default) */
-  bgDark: "#102217",
-  surfaceDark: "#162E21",
-  surfaceHighlight: "#243E30",
-  surfaceBorder: "#244A35",
-  surfaceDarker: "#0B1810",
-  /** Surfaces (light theme) */
-  bgLight: "#F6F8F7",
-  surfaceLight: "#FFFFFF",
-  /** Text */
-  textPrimary: "#FFFFFF",
-  textSecondary: "#92C9A8",
-  textMuted: "rgba(255,255,255,0.5)",
-  textDimmed: "rgba(255,255,255,0.35)",
+  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,
+  textPrimary: darkSemanticColors.foreground,
+  textSecondary: darkSemanticColors.mutedFg,
+  textMuted: darkSemanticColors.border,
+  textDimmed: darkSemanticColors.ring,
   /** Semantic */
-  success: "#2BEE79",
-  warning: "#F59E0B",
-  error: "#F94040",
-  info: "#4290FF",
+  success: darkSemanticColors.primary,
+  warning: darkSemanticColors.chart3,
+  error: darkSemanticColors.destructive,
+  info: darkSemanticColors.chart1,
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -67,7 +81,7 @@ var colors = {
 
 // src/tokens/typography.ts
 var fontFamily = {
-  display: "'Geist Sans', system-ui, -apple-system, sans-serif",
+  display: "'Satoshi', system-ui, -apple-system, sans-serif",
   mono: "'Geist Mono', monospace"
 };
 var typeScale = {
@@ -83,76 +97,61 @@ var typeScale = {
 
 // src/tokens/radius.ts
 var radius = {
-  sm: "8px",
-  md: "12px",
-  lg: "16px",
-  xl: "20px",
-  card: "20px",
-  panel: "22px",
-  pill: "24px",
-  nav: "14px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  card: "16px",
+  panel: "24px",
+  pill: "9999px",
+  nav: "32px",
   full: "9999px"
 };
 
-// src/tokens/shadows.ts
-var shadow = {
-  glow: "0 0 20px rgba(43, 238, 121, 0.15)",
-  glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)",
-  glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)",
-  glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)"
-};
-
 // src/tailwind/index.ts
 var preset = {
   darkMode: ["class"],
   theme: {
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        background: "var(--background)",
+        foreground: "var(--foreground)",
         primary: {
-          DEFAULT: colors.primary,
-          foreground: colors.primaryFg,
-          dark: colors.primaryDark
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)"
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))"
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)"
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))"
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)"
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))"
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)"
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))"
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)"
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))"
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)"
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))"
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)"
         },
         network: colors.network,
-        tx: colors.tx,
-        "background-light": colors.bgLight,
-        "background-dark": colors.bgDark,
-        "surface-dark": colors.surfaceDark,
-        "surface-light": colors.surfaceLight,
-        "surface-highlight": colors.surfaceHighlight,
-        "surface-border": colors.surfaceBorder,
-        "surface-darker": colors.surfaceDarker
+        tx: colors.tx
       },
       fontFamily: {
+        sans: fontFamily.display.split(", "),
         display: fontFamily.display.split(", "),
         mono: fontFamily.mono.split(", ")
       },
@@ -169,16 +168,12 @@ var preset = {
         xl: "0.75rem",
         "2xl": "1rem",
         "3xl": "1.5rem",
+        "4xl": "var(--radius-4xl)",
         card: radius.card,
         panel: radius.panel,
         pill: radius.pill,
         nav: radius.nav
       },
-      boxShadow: {
-        glow: shadow.glow,
-        "glow-strong": shadow.glowStrong,
-        "glow-subtle": shadow.glowSubtle
-      },
       keyframes: {
         "accordion-down": {
           from: { height: "0" },
@@ -188,10 +183,6 @@ var preset = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" }
         },
-        "pulse-glow": {
-          "0%, 100%": { boxShadow: "0 0 20px rgba(43, 238, 121, 0.2)" },
-          "50%": { boxShadow: "0 0 30px rgba(43, 238, 121, 0.4)" }
-        },
         "fade-in": {
           from: { opacity: "0" },
           to: { opacity: "1" }
@@ -220,7 +211,6 @@ var preset = {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
-        "pulse-glow": "pulse-glow 2s ease-in-out infinite",
         "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",

package/dist/tailwind/index.d.cts

@@ -9,9 +9,8 @@ declare const preset: {
                 background: string;
                 foreground: string;
                 primary: {
-                    DEFAULT: "#2BEE79";
-                    foreground: "#102217";
-                    dark: "#1FA855";
+                    DEFAULT: string;
+                    foreground: string;
                 };
                 secondary: {
                     DEFAULT: string;
@@ -49,15 +48,9 @@ declare const preset: {
                     readonly receive: "#2BEE79";
                     readonly swap: "#4290FF";
                 };
-                'background-light': "#F6F8F7";
-                'background-dark': "#102217";
-                'surface-dark': "#162E21";
-                'surface-light': "#FFFFFF";
-                'surface-highlight': "#243E30";
-                'surface-border': "#244A35";
-                'surface-darker': "#0B1810";
             };
             fontFamily: {
+                sans: string[];
                 display: string[];
                 mono: string[];
             };
@@ -73,15 +66,11 @@ declare const preset: {
                 xl: string;
                 '2xl': string;
                 '3xl': string;
-                card: "20px";
-                panel: "22px";
-                pill: "24px";
-                nav: "14px";
-            };
-            boxShadow: {
-                glow: "0 0 20px rgba(43, 238, 121, 0.15)";
-                'glow-strong': "0 0 30px rgba(43, 238, 121, 0.3)";
-                'glow-subtle': "0 0 15px rgba(43, 238, 121, 0.15)";
+                '4xl': string;
+                card: "16px";
+                panel: "24px";
+                pill: "9999px";
+                nav: "32px";
             };
             keyframes: {
                 'accordion-down': {
@@ -100,14 +89,6 @@ declare const preset: {
                         height: string;
                     };
                 };
-                'pulse-glow': {
-                    '0%, 100%': {
-                        boxShadow: string;
-                    };
-                    '50%': {
-                        boxShadow: string;
-                    };
-                };
                 'fade-in': {
                     from: {
                         opacity: string;
@@ -166,7 +147,6 @@ declare const preset: {
             animation: {
                 'accordion-down': string;
                 'accordion-up': string;
-                'pulse-glow': string;
                 'fade-in': string;
                 'slide-up': string;
                 'slide-in-from-bottom': string;

package/dist/tailwind/index.d.ts

@@ -9,9 +9,8 @@ declare const preset: {
                 background: string;
                 foreground: string;
                 primary: {
-                    DEFAULT: "#2BEE79";
-                    foreground: "#102217";
-                    dark: "#1FA855";
+                    DEFAULT: string;
+                    foreground: string;
                 };
                 secondary: {
                     DEFAULT: string;
@@ -49,15 +48,9 @@ declare const preset: {
                     readonly receive: "#2BEE79";
                     readonly swap: "#4290FF";
                 };
-                'background-light': "#F6F8F7";
-                'background-dark': "#102217";
-                'surface-dark': "#162E21";
-                'surface-light': "#FFFFFF";
-                'surface-highlight': "#243E30";
-                'surface-border': "#244A35";
-                'surface-darker': "#0B1810";
             };
             fontFamily: {
+                sans: string[];
                 display: string[];
                 mono: string[];
             };
@@ -73,15 +66,11 @@ declare const preset: {
                 xl: string;
                 '2xl': string;
                 '3xl': string;
-                card: "20px";
-                panel: "22px";
-                pill: "24px";
-                nav: "14px";
-            };
-            boxShadow: {
-                glow: "0 0 20px rgba(43, 238, 121, 0.15)";
-                'glow-strong': "0 0 30px rgba(43, 238, 121, 0.3)";
-                'glow-subtle': "0 0 15px rgba(43, 238, 121, 0.15)";
+                '4xl': string;
+                card: "16px";
+                panel: "24px";
+                pill: "9999px";
+                nav: "32px";
             };
             keyframes: {
                 'accordion-down': {
@@ -100,14 +89,6 @@ declare const preset: {
                         height: string;
                     };
                 };
-                'pulse-glow': {
-                    '0%, 100%': {
-                        boxShadow: string;
-                    };
-                    '50%': {
-                        boxShadow: string;
-                    };
-                };
                 'fade-in': {
                     from: {
                         opacity: string;
@@ -166,7 +147,6 @@ declare const preset: {
             animation: {
                 'accordion-down': string;
                 'accordion-up': string;
-                'pulse-glow': string;
                 'fade-in': string;
                 'slide-up': string;
                 'slide-in-from-bottom': string;