kaleido-ui 0.1.1 → 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: #262626;
-  --accent-foreground: #fafafa;
-  --background: #0a0a0a;
-  --border: #ffffff1a;
-  --card: #171717;
-  --card-foreground: #fafafa;
-  --chart-1: #1447e6;
-  --chart-2: #00bc7d;
-  --chart-3: #fe9a00;
-  --chart-4: #ad46ff;
-  --chart-5: #ff2056;
-  --destructive: #ff6467;
-  --destructive-foreground: #fafafa;
-  --foreground: #fafafa;
-  --input: #ffffff26;
-  --muted: #262626;
-  --muted-foreground: #a1a1a1;
-  --popover: #171717;
-  --popover-foreground: #fafafa;
-  --primary: #e5e5e5;
-  --primary-foreground: #171717;
-  --ring: #737373;
-  --secondary: #262626;
-  --secondary-foreground: #fafafa;
-  --semantic-background: #272625;
-  --semantic-border: #535151;
+  --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;
+  --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

@@ -53,31 +53,31 @@ var import_wdk_uikit_react_native = require("@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,
@@ -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

@@ -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";
 };
 
 /**