kaleido-ui 0.1.0 → 0.1.2

package/dist/css/kaleido-ui.css

@@ -1,19 +1,3 @@
-/*
- * KaleidoSwap UI — CSS Custom Properties, Glass Effects & Animations
- *
- * Import in your entry point:
- *   import 'kaleido-ui/css'
- *
- * NOTE: This file does NOT include Tailwind directives (@tailwind base/components/utilities).
- * Your consumer app must have its own Tailwind setup with the kaleido-ui preset.
- * Font imports (@fontsource/geist-sans, @fontsource/geist-mono, material-symbols)
- * must also be done in the consumer app.
- */
-
-/* ------------------------------------------------------------------ */
-/*  Material Symbols                                                   */
-/* ------------------------------------------------------------------ */
-
 .material-symbols-outlined {
   font-variation-settings:
     'FILL' 0,
@@ -30,168 +14,71 @@
     'opsz' 24;
 }
 
-/* ------------------------------------------------------------------ */
-/*  CSS Custom Properties (Light Theme — :root)                        */
-/* ------------------------------------------------------------------ */
-
 :root {
-  --background: 150 7% 97%;
-  --foreground: 144 53% 8%;
-  --card: 0 0% 100%;
-  --card-foreground: 144 53% 8%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 144 53% 8%;
-  --primary: 151 88% 52%;
-  --primary-foreground: 144 53% 8%;
-  --secondary: 150 10% 90%;
-  --secondary-foreground: 144 53% 8%;
-  --muted: 150 10% 90%;
-  --muted-foreground: 150 10% 40%;
-  --accent: 150 10% 90%;
-  --accent-foreground: 144 53% 8%;
-  --destructive: 0 84% 60%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 150 10% 85%;
-  --input: 150 10% 85%;
-  --ring: 151 88% 52%;
-  --radius: 0.75rem;
-
-  --surface: 0 0% 100%;
-  --surface-foreground: 144 53% 8%;
-  --text-secondary: 151 30% 68%;
-  --warning: 45 93% 47%;
-  --warning-foreground: 0 0% 0%;
-  --success: 151 88% 52%;
-  --success-foreground: 144 53% 8%;
+  --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;
+  --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);
 }
 
-/* ------------------------------------------------------------------ */
-/*  CSS Custom Properties (Dark Theme)                                 */
-/* ------------------------------------------------------------------ */
-
 .dark {
-  --background: 144 53% 8%;
-  --foreground: 0 0% 100%;
-  --card: 146 36% 13%;
-  --card-foreground: 0 0% 100%;
-  --popover: 146 36% 13%;
-  --popover-foreground: 0 0% 100%;
-  --primary: 151 88% 52%;
-  --primary-foreground: 144 53% 8%;
-  --secondary: 146 30% 18%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 146 30% 18%;
-  --muted-foreground: 150 15% 60%;
-  --accent: 146 30% 20%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62% 50%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 146 25% 20%;
-  --input: 146 30% 15%;
-  --ring: 151 88% 52%;
-
-  --surface: 146 36% 13%;
-  --surface-foreground: 0 0% 100%;
-  --text-secondary: 151 30% 68%;
-  --warning: 45 93% 47%;
-  --warning-foreground: 0 0% 0%;
-  --success: 151 88% 52%;
-  --success-foreground: 144 53% 8%;
-}
-
-/* ------------------------------------------------------------------ */
-/*  Glass Effects                                                      */
-/* ------------------------------------------------------------------ */
-
-.glass-panel {
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.glass-panel-heavy {
-  background: rgba(14, 30, 20, 0.78);
-  backdrop-filter: blur(28px);
-  -webkit-backdrop-filter: blur(28px);
-  border: 1px solid rgba(43, 238, 121, 0.12);
+  --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%);
+  --secondary-foreground: #ffffff;
+  --semantic-background: hsl(156 32% 12%);
+  --semantic-border: hsl(150 20% 24%);
 }
-
-.glass-card {
-  background: rgba(26, 46, 33, 0.65);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.09);
-  transition: all 0.2s ease-out;
-}
-
-.glass-card:active {
-  transform: scale(0.98);
-  background: rgba(26, 46, 33, 0.8);
-}
-
-/* ------------------------------------------------------------------ */
-/*  Glow Utilities                                                     */
-/* ------------------------------------------------------------------ */
-
-.shadow-glow-subtle {
-  box-shadow: 0 0 10px rgba(43, 238, 121, 0.1);
-}
-
-.shadow-glow {
-  box-shadow: 0 0 20px rgba(43, 238, 121, 0.2);
-}
-
-.shadow-glow-strong {
-  box-shadow: 0 0 30px rgba(43, 238, 121, 0.3);
-}
-
-.shadow-glow-accent {
-  box-shadow: 0 4px 30px rgba(43, 238, 121, 0.25);
-}
-
-/* ------------------------------------------------------------------ */
-/*  Utility Classes                                                    */
-/* ------------------------------------------------------------------ */
-
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-.no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.pb-safe {
-  padding-bottom: max(1rem, env(safe-area-inset-bottom));
-}
-
-/* ------------------------------------------------------------------ */
-/*  Animations                                                         */
-/* ------------------------------------------------------------------ */
-
-@keyframes pulse-glow {
-  0%, 100% { box-shadow: 0 0 20px rgba(43, 238, 121, 0.2); }
-  50% { box-shadow: 0 0 30px rgba(43, 238, 121, 0.4); }
-}
-
-@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); }
-}
-
-.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
-.animate-fade-in { animation: fade-in 0.3s ease-out; }
-.animate-slide-up { animation: slide-up 0.3s ease-out; }
-.animate-slide-in-from-bottom { animation: slide-in-from-bottom 0.4s ease-out; }

package/dist/native/index.cjs

@@ -52,30 +52,44 @@ module.exports = __toCommonJS(native_exports);
 var import_wdk_uikit_react_native = require("@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",
@@ -95,17 +109,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,
@@ -245,7 +258,7 @@ var styles4 = import_react_native4.StyleSheet.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 = {
@@ -267,23 +280,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/native/index.d.cts

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