kaleido-ui 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/css/kaleido-ui.css +63 -176
  2. package/dist/native/index.cjs +54 -41
  3. package/dist/native/index.d.cts +56 -51
  4. package/dist/native/index.d.ts +56 -51
  5. package/dist/native/index.js +54 -41
  6. package/dist/tailwind/index.cjs +67 -77
  7. package/dist/tailwind/index.d.cts +8 -28
  8. package/dist/tailwind/index.d.ts +8 -28
  9. package/dist/tailwind/index.js +67 -77
  10. package/dist/tokens/index.cjs +49 -35
  11. package/dist/tokens/index.d.cts +45 -39
  12. package/dist/tokens/index.d.ts +45 -39
  13. package/dist/tokens/index.js +49 -35
  14. package/dist/web/index.cjs +48 -42
  15. package/dist/web/index.js +48 -42
  16. package/package.json +12 -2
package/dist/tailwind/index.js CHANGED
@@ -1,28 +1,42 @@
1
1
  // src/tokens/colors.ts
2
- var colors = {
3
- /** Brand */
2
+ var darkSemanticColors = {
3
+ background: "hsl(158 58% 7%)",
4
+ foreground: "#ffffff",
5
+ border: "hsl(150 20% 24%)",
6
+ input: "rgba(255, 255, 255, 0.15)",
7
+ destructive: "hsl(0 62% 50%)",
8
+ secondary: "hsl(154 26% 17%)",
9
+ secondaryFg: "#ffffff",
10
+ muted: "hsl(156 32% 12%)",
11
+ mutedFg: "rgba(255, 255, 255, 0.55)",
4
12
  primary: "#2BEE79",
5
- primaryDark: "#1FA855",
6
- primaryFg: "#102217",
7
- /** Surfaces (dark theme — the default) */
8
- bgDark: "#102217",
9
- surfaceDark: "#162E21",
10
- surfaceHighlight: "#243E30",
11
- surfaceBorder: "#244A35",
12
- surfaceDarker: "#0B1810",
13
- /** Surfaces (light theme) */
14
- bgLight: "#F6F8F7",
15
- surfaceLight: "#FFFFFF",
16
- /** Text */
17
- textPrimary: "#FFFFFF",
18
- textSecondary: "#92C9A8",
19
- textMuted: "rgba(255,255,255,0.5)",
20
- textDimmed: "rgba(255,255,255,0.35)",
13
+ primaryFg: "#051B10",
14
+ accent: "hsl(154 26% 17%)",
15
+ accentFg: "#ffffff",
16
+ ring: "#2BEE79",
17
+ card: "hsl(156 32% 12%)",
18
+ cardFg: "#ffffff",
19
+ popover: "hsl(154 26% 17%)",
20
+ popoverFg: "#ffffff",
21
+ chart1: "#2BEE79",
22
+ chart2: "#F6C343",
23
+ chart3: "#F7931A",
24
+ chart4: "#7C3AED",
25
+ chart5: "#DD352E",
26
+ semanticBackground: "hsl(156 32% 12%)",
27
+ semanticBorder: "hsl(150 20% 24%)"
28
+ };
29
+ var colors = {
30
+ ...darkSemanticColors,
31
+ textPrimary: darkSemanticColors.foreground,
32
+ textSecondary: darkSemanticColors.mutedFg,
33
+ textMuted: darkSemanticColors.border,
34
+ textDimmed: darkSemanticColors.ring,
21
35
  /** Semantic */
22
- success: "#2BEE79",
23
- warning: "#F59E0B",
24
- error: "#F94040",
25
- info: "#4290FF",
36
+ success: darkSemanticColors.primary,
37
+ warning: darkSemanticColors.chart3,
38
+ error: darkSemanticColors.destructive,
39
+ info: darkSemanticColors.chart1,
26
40
  /** Network / Layer */
27
41
  network: {
28
42
  bitcoin: "#F7931A",
@@ -41,7 +55,7 @@ var colors = {
41
55
 
42
56
  // src/tokens/typography.ts
43
57
  var fontFamily = {
44
- display: "'Geist Sans', system-ui, -apple-system, sans-serif",
58
+ display: "'Satoshi', system-ui, -apple-system, sans-serif",
45
59
  mono: "'Geist Mono', monospace"
46
60
  };
47
61
  var typeScale = {
@@ -57,76 +71,61 @@ var typeScale = {
57
71
 
58
72
  // src/tokens/radius.ts
59
73
  var radius = {
60
- sm: "8px",
61
- md: "12px",
62
- lg: "16px",
63
- xl: "20px",
64
- card: "20px",
65
- panel: "22px",
66
- pill: "24px",
67
- nav: "14px",
74
+ sm: "4px",
75
+ md: "6px",
76
+ lg: "8px",
77
+ xl: "12px",
78
+ card: "16px",
79
+ panel: "24px",
80
+ pill: "9999px",
81
+ nav: "32px",
68
82
  full: "9999px"
69
83
  };
70
84
 
71
- // src/tokens/shadows.ts
72
- var shadow = {
73
- glow: "0 0 20px rgba(43, 238, 121, 0.15)",
74
- glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)",
75
- glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)",
76
- glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)"
77
- };
78
-
79
85
  // src/tailwind/index.ts
80
86
  var preset = {
81
87
  darkMode: ["class"],
82
88
  theme: {
83
89
  extend: {
84
90
  colors: {
85
- border: "hsl(var(--border))",
86
- input: "hsl(var(--input))",
87
- ring: "hsl(var(--ring))",
88
- background: "hsl(var(--background))",
89
- foreground: "hsl(var(--foreground))",
91
+ border: "var(--border)",
92
+ input: "var(--input)",
93
+ ring: "var(--ring)",
94
+ background: "var(--background)",
95
+ foreground: "var(--foreground)",
90
96
  primary: {
91
- DEFAULT: colors.primary,
92
- foreground: colors.primaryFg,
93
- dark: colors.primaryDark
97
+ DEFAULT: "var(--primary)",
98
+ foreground: "var(--primary-foreground)"
94
99
  },
95
100
  secondary: {
96
- DEFAULT: "hsl(var(--secondary))",
97
- foreground: "hsl(var(--secondary-foreground))"
101
+ DEFAULT: "var(--secondary)",
102
+ foreground: "var(--secondary-foreground)"
98
103
  },
99
104
  destructive: {
100
- DEFAULT: "hsl(var(--destructive))",
101
- foreground: "hsl(var(--destructive-foreground))"
105
+ DEFAULT: "var(--destructive)",
106
+ foreground: "var(--destructive-foreground)"
102
107
  },
103
108
  muted: {
104
- DEFAULT: "hsl(var(--muted))",
105
- foreground: "hsl(var(--muted-foreground))"
109
+ DEFAULT: "var(--muted)",
110
+ foreground: "var(--muted-foreground)"
106
111
  },
107
112
  accent: {
108
- DEFAULT: "hsl(var(--accent))",
109
- foreground: "hsl(var(--accent-foreground))"
113
+ DEFAULT: "var(--accent)",
114
+ foreground: "var(--accent-foreground)"
110
115
  },
111
116
  popover: {
112
- DEFAULT: "hsl(var(--popover))",
113
- foreground: "hsl(var(--popover-foreground))"
117
+ DEFAULT: "var(--popover)",
118
+ foreground: "var(--popover-foreground)"
114
119
  },
115
120
  card: {
116
- DEFAULT: "hsl(var(--card))",
117
- foreground: "hsl(var(--card-foreground))"
121
+ DEFAULT: "var(--card)",
122
+ foreground: "var(--card-foreground)"
118
123
  },
119
124
  network: colors.network,
120
- tx: colors.tx,
121
- "background-light": colors.bgLight,
122
- "background-dark": colors.bgDark,
123
- "surface-dark": colors.surfaceDark,
124
- "surface-light": colors.surfaceLight,
125
- "surface-highlight": colors.surfaceHighlight,
126
- "surface-border": colors.surfaceBorder,
127
- "surface-darker": colors.surfaceDarker
125
+ tx: colors.tx
128
126
  },
129
127
  fontFamily: {
128
+ sans: fontFamily.display.split(", "),
130
129
  display: fontFamily.display.split(", "),
131
130
  mono: fontFamily.mono.split(", ")
132
131
  },
@@ -143,16 +142,12 @@ var preset = {
143
142
  xl: "0.75rem",
144
143
  "2xl": "1rem",
145
144
  "3xl": "1.5rem",
145
+ "4xl": "var(--radius-4xl)",
146
146
  card: radius.card,
147
147
  panel: radius.panel,
148
148
  pill: radius.pill,
149
149
  nav: radius.nav
150
150
  },
151
- boxShadow: {
152
- glow: shadow.glow,
153
- "glow-strong": shadow.glowStrong,
154
- "glow-subtle": shadow.glowSubtle
155
- },
156
151
  keyframes: {
157
152
  "accordion-down": {
158
153
  from: { height: "0" },
@@ -162,10 +157,6 @@ var preset = {
162
157
  from: { height: "var(--radix-accordion-content-height)" },
163
158
  to: { height: "0" }
164
159
  },
165
- "pulse-glow": {
166
- "0%, 100%": { boxShadow: "0 0 20px rgba(43, 238, 121, 0.2)" },
167
- "50%": { boxShadow: "0 0 30px rgba(43, 238, 121, 0.4)" }
168
- },
169
160
  "fade-in": {
170
161
  from: { opacity: "0" },
171
162
  to: { opacity: "1" }
@@ -194,7 +185,6 @@ var preset = {
194
185
  animation: {
195
186
  "accordion-down": "accordion-down 0.2s ease-out",
196
187
  "accordion-up": "accordion-up 0.2s ease-out",
197
- "pulse-glow": "pulse-glow 2s ease-in-out infinite",
198
188
  "fade-in": "fade-in 0.3s ease-out",
199
189
  "slide-up": "slide-up 0.3s ease-out",
200
190
  "slide-in-from-bottom": "slide-in-from-bottom 0.4s ease-out",
package/dist/tokens/index.cjs CHANGED
@@ -31,30 +31,44 @@ __export(tokens_exports, {
31
31
  module.exports = __toCommonJS(tokens_exports);
32
32
 
33
33
  // src/tokens/colors.ts
34
- var colors = {
35
- /** Brand */
34
+ var darkSemanticColors = {
35
+ background: "hsl(158 58% 7%)",
36
+ foreground: "#ffffff",
37
+ border: "hsl(150 20% 24%)",
38
+ input: "rgba(255, 255, 255, 0.15)",
39
+ destructive: "hsl(0 62% 50%)",
40
+ secondary: "hsl(154 26% 17%)",
41
+ secondaryFg: "#ffffff",
42
+ muted: "hsl(156 32% 12%)",
43
+ mutedFg: "rgba(255, 255, 255, 0.55)",
36
44
  primary: "#2BEE79",
37
- primaryDark: "#1FA855",
38
- primaryFg: "#102217",
39
- /** Surfaces (dark theme — the default) */
40
- bgDark: "#102217",
41
- surfaceDark: "#162E21",
42
- surfaceHighlight: "#243E30",
43
- surfaceBorder: "#244A35",
44
- surfaceDarker: "#0B1810",
45
- /** Surfaces (light theme) */
46
- bgLight: "#F6F8F7",
47
- surfaceLight: "#FFFFFF",
48
- /** Text */
49
- textPrimary: "#FFFFFF",
50
- textSecondary: "#92C9A8",
51
- textMuted: "rgba(255,255,255,0.5)",
52
- textDimmed: "rgba(255,255,255,0.35)",
45
+ primaryFg: "#051B10",
46
+ accent: "hsl(154 26% 17%)",
47
+ accentFg: "#ffffff",
48
+ ring: "#2BEE79",
49
+ card: "hsl(156 32% 12%)",
50
+ cardFg: "#ffffff",
51
+ popover: "hsl(154 26% 17%)",
52
+ popoverFg: "#ffffff",
53
+ chart1: "#2BEE79",
54
+ chart2: "#F6C343",
55
+ chart3: "#F7931A",
56
+ chart4: "#7C3AED",
57
+ chart5: "#DD352E",
58
+ semanticBackground: "hsl(156 32% 12%)",
59
+ semanticBorder: "hsl(150 20% 24%)"
60
+ };
61
+ var colors = {
62
+ ...darkSemanticColors,
63
+ textPrimary: darkSemanticColors.foreground,
64
+ textSecondary: darkSemanticColors.mutedFg,
65
+ textMuted: darkSemanticColors.border,
66
+ textDimmed: darkSemanticColors.ring,
53
67
  /** Semantic */
54
- success: "#2BEE79",
55
- warning: "#F59E0B",
56
- error: "#F94040",
57
- info: "#4290FF",
68
+ success: darkSemanticColors.primary,
69
+ warning: darkSemanticColors.chart3,
70
+ error: darkSemanticColors.destructive,
71
+ info: darkSemanticColors.chart1,
58
72
  /** Network / Layer */
59
73
  network: {
60
74
  bitcoin: "#F7931A",
@@ -73,7 +87,7 @@ var colors = {
73
87
 
74
88
  // src/tokens/typography.ts
75
89
  var fontFamily = {
76
- display: "'Geist Sans', system-ui, -apple-system, sans-serif",
90
+ display: "'Satoshi', system-ui, -apple-system, sans-serif",
77
91
  mono: "'Geist Mono', monospace"
78
92
  };
79
93
  var typeScale = {
@@ -95,23 +109,23 @@ var fontWeight = {
95
109
 
96
110
  // src/tokens/radius.ts
97
111
  var radius = {
98
- sm: "8px",
99
- md: "12px",
100
- lg: "16px",
101
- xl: "20px",
102
- card: "20px",
103
- panel: "22px",
104
- pill: "24px",
105
- nav: "14px",
112
+ sm: "4px",
113
+ md: "6px",
114
+ lg: "8px",
115
+ xl: "12px",
116
+ card: "16px",
117
+ panel: "24px",
118
+ pill: "9999px",
119
+ nav: "32px",
106
120
  full: "9999px"
107
121
  };
108
122
 
109
123
  // src/tokens/shadows.ts
110
124
  var shadow = {
111
- glow: "0 0 20px rgba(43, 238, 121, 0.15)",
112
- glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)",
113
- glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)",
114
- glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)"
125
+ glow: "0 0 20px rgba(10, 10, 10, 0.15)",
126
+ glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
127
+ glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
128
+ glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)"
115
129
  };
116
130
 
117
131
  // src/tokens/transitions.ts
package/dist/tokens/index.d.cts CHANGED
@@ -1,32 +1,13 @@
1
- /**
2
- * KaleidoSwap Color Tokens
3
- *
4
- * Single source of truth for all color constants across web and native.
5
- */
6
1
  declare const colors: {
7
- /** Brand */
8
- readonly primary: "#2BEE79";
9
- readonly primaryDark: "#1FA855";
10
- readonly primaryFg: "#102217";
11
- /** Surfaces (dark theme — the default) */
12
- readonly bgDark: "#102217";
13
- readonly surfaceDark: "#162E21";
14
- readonly surfaceHighlight: "#243E30";
15
- readonly surfaceBorder: "#244A35";
16
- readonly surfaceDarker: "#0B1810";
17
- /** Surfaces (light theme) */
18
- readonly bgLight: "#F6F8F7";
19
- readonly surfaceLight: "#FFFFFF";
20
- /** Text */
21
- readonly textPrimary: "#FFFFFF";
22
- readonly textSecondary: "#92C9A8";
23
- readonly textMuted: "rgba(255,255,255,0.5)";
24
- readonly textDimmed: "rgba(255,255,255,0.35)";
2
+ readonly textPrimary: "#ffffff";
3
+ readonly textSecondary: "rgba(255, 255, 255, 0.55)";
4
+ readonly textMuted: "hsl(150 20% 24%)";
5
+ readonly textDimmed: "#2BEE79";
25
6
  /** Semantic */
26
7
  readonly success: "#2BEE79";
27
- readonly warning: "#F59E0B";
28
- readonly error: "#F94040";
29
- readonly info: "#4290FF";
8
+ readonly warning: "#F7931A";
9
+ readonly error: "hsl(0 62% 50%)";
10
+ readonly info: "#2BEE79";
30
11
  /** Network / Layer */
31
12
  readonly network: {
32
13
  readonly bitcoin: "#F7931A";
@@ -41,13 +22,38 @@ declare const colors: {
41
22
  readonly receive: "#2BEE79";
42
23
  readonly swap: "#4290FF";
43
24
  };
25
+ readonly background: "hsl(158 58% 7%)";
26
+ readonly foreground: "#ffffff";
27
+ readonly border: "hsl(150 20% 24%)";
28
+ readonly input: "rgba(255, 255, 255, 0.15)";
29
+ readonly destructive: "hsl(0 62% 50%)";
30
+ readonly secondary: "hsl(154 26% 17%)";
31
+ readonly secondaryFg: "#ffffff";
32
+ readonly muted: "hsl(156 32% 12%)";
33
+ readonly mutedFg: "rgba(255, 255, 255, 0.55)";
34
+ readonly primary: "#2BEE79";
35
+ readonly primaryFg: "#051B10";
36
+ readonly accent: "hsl(154 26% 17%)";
37
+ readonly accentFg: "#ffffff";
38
+ readonly ring: "#2BEE79";
39
+ readonly card: "hsl(156 32% 12%)";
40
+ readonly cardFg: "#ffffff";
41
+ readonly popover: "hsl(154 26% 17%)";
42
+ readonly popoverFg: "#ffffff";
43
+ readonly chart1: "#2BEE79";
44
+ readonly chart2: "#F6C343";
45
+ readonly chart3: "#F7931A";
46
+ readonly chart4: "#7C3AED";
47
+ readonly chart5: "#DD352E";
48
+ readonly semanticBackground: "hsl(156 32% 12%)";
49
+ readonly semanticBorder: "hsl(150 20% 24%)";
44
50
  };
45
51
 
46
52
  /**
47
53
  * KaleidoSwap Typography Tokens
48
54
  */
49
55
  declare const fontFamily: {
50
- readonly display: "'Geist Sans', system-ui, -apple-system, sans-serif";
56
+ readonly display: "'Satoshi', system-ui, -apple-system, sans-serif";
51
57
  readonly mono: "'Geist Mono', monospace";
52
58
  };
53
59
  /**
@@ -74,14 +80,14 @@ declare const fontWeight: {
74
80
  * KaleidoSwap Border Radius Tokens
75
81
  */
76
82
  declare const radius: {
77
- readonly sm: "8px";
78
- readonly md: "12px";
79
- readonly lg: "16px";
80
- readonly xl: "20px";
81
- readonly card: "20px";
82
- readonly panel: "22px";
83
- readonly pill: "24px";
84
- readonly nav: "14px";
83
+ readonly sm: "4px";
84
+ readonly md: "6px";
85
+ readonly lg: "8px";
86
+ readonly xl: "12px";
87
+ readonly card: "16px";
88
+ readonly panel: "24px";
89
+ readonly pill: "9999px";
90
+ readonly nav: "32px";
85
91
  readonly full: "9999px";
86
92
  };
87
93
 
@@ -89,10 +95,10 @@ declare const radius: {
89
95
  * KaleidoSwap Shadow Tokens
90
96
  */
91
97
  declare const shadow: {
92
- readonly glow: "0 0 20px rgba(43, 238, 121, 0.15)";
93
- readonly glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)";
94
- readonly glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)";
95
- readonly glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)";
98
+ readonly glow: "0 0 20px rgba(10, 10, 10, 0.15)";
99
+ readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
100
+ readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
101
+ readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
96
102
  };
97
103
 
98
104
  /**
package/dist/tokens/index.d.ts CHANGED
@@ -1,32 +1,13 @@
1
- /**
2
- * KaleidoSwap Color Tokens
3
- *
4
- * Single source of truth for all color constants across web and native.
5
- */
6
1
  declare const colors: {
7
- /** Brand */
8
- readonly primary: "#2BEE79";
9
- readonly primaryDark: "#1FA855";
10
- readonly primaryFg: "#102217";
11
- /** Surfaces (dark theme — the default) */
12
- readonly bgDark: "#102217";
13
- readonly surfaceDark: "#162E21";
14
- readonly surfaceHighlight: "#243E30";
15
- readonly surfaceBorder: "#244A35";
16
- readonly surfaceDarker: "#0B1810";
17
- /** Surfaces (light theme) */
18
- readonly bgLight: "#F6F8F7";
19
- readonly surfaceLight: "#FFFFFF";
20
- /** Text */
21
- readonly textPrimary: "#FFFFFF";
22
- readonly textSecondary: "#92C9A8";
23
- readonly textMuted: "rgba(255,255,255,0.5)";
24
- readonly textDimmed: "rgba(255,255,255,0.35)";
2
+ readonly textPrimary: "#ffffff";
3
+ readonly textSecondary: "rgba(255, 255, 255, 0.55)";
4
+ readonly textMuted: "hsl(150 20% 24%)";
5
+ readonly textDimmed: "#2BEE79";
25
6
  /** Semantic */
26
7
  readonly success: "#2BEE79";
27
- readonly warning: "#F59E0B";
28
- readonly error: "#F94040";
29
- readonly info: "#4290FF";
8
+ readonly warning: "#F7931A";
9
+ readonly error: "hsl(0 62% 50%)";
10
+ readonly info: "#2BEE79";
30
11
  /** Network / Layer */
31
12
  readonly network: {
32
13
  readonly bitcoin: "#F7931A";
@@ -41,13 +22,38 @@ declare const colors: {
41
22
  readonly receive: "#2BEE79";
42
23
  readonly swap: "#4290FF";
43
24
  };
25
+ readonly background: "hsl(158 58% 7%)";
26
+ readonly foreground: "#ffffff";
27
+ readonly border: "hsl(150 20% 24%)";
28
+ readonly input: "rgba(255, 255, 255, 0.15)";
29
+ readonly destructive: "hsl(0 62% 50%)";
30
+ readonly secondary: "hsl(154 26% 17%)";
31
+ readonly secondaryFg: "#ffffff";
32
+ readonly muted: "hsl(156 32% 12%)";
33
+ readonly mutedFg: "rgba(255, 255, 255, 0.55)";
34
+ readonly primary: "#2BEE79";
35
+ readonly primaryFg: "#051B10";
36
+ readonly accent: "hsl(154 26% 17%)";
37
+ readonly accentFg: "#ffffff";
38
+ readonly ring: "#2BEE79";
39
+ readonly card: "hsl(156 32% 12%)";
40
+ readonly cardFg: "#ffffff";
41
+ readonly popover: "hsl(154 26% 17%)";
42
+ readonly popoverFg: "#ffffff";
43
+ readonly chart1: "#2BEE79";
44
+ readonly chart2: "#F6C343";
45
+ readonly chart3: "#F7931A";
46
+ readonly chart4: "#7C3AED";
47
+ readonly chart5: "#DD352E";
48
+ readonly semanticBackground: "hsl(156 32% 12%)";
49
+ readonly semanticBorder: "hsl(150 20% 24%)";
44
50
  };
45
51
 
46
52
  /**
47
53
  * KaleidoSwap Typography Tokens
48
54
  */
49
55
  declare const fontFamily: {
50
- readonly display: "'Geist Sans', system-ui, -apple-system, sans-serif";
56
+ readonly display: "'Satoshi', system-ui, -apple-system, sans-serif";
51
57
  readonly mono: "'Geist Mono', monospace";
52
58
  };
53
59
  /**
@@ -74,14 +80,14 @@ declare const fontWeight: {
74
80
  * KaleidoSwap Border Radius Tokens
75
81
  */
76
82
  declare const radius: {
77
- readonly sm: "8px";
78
- readonly md: "12px";
79
- readonly lg: "16px";
80
- readonly xl: "20px";
81
- readonly card: "20px";
82
- readonly panel: "22px";
83
- readonly pill: "24px";
84
- readonly nav: "14px";
83
+ readonly sm: "4px";
84
+ readonly md: "6px";
85
+ readonly lg: "8px";
86
+ readonly xl: "12px";
87
+ readonly card: "16px";
88
+ readonly panel: "24px";
89
+ readonly pill: "9999px";
90
+ readonly nav: "32px";
85
91
  readonly full: "9999px";
86
92
  };
87
93
 
@@ -89,10 +95,10 @@ declare const radius: {
89
95
  * KaleidoSwap Shadow Tokens
90
96
  */
91
97
  declare const shadow: {
92
- readonly glow: "0 0 20px rgba(43, 238, 121, 0.15)";
93
- readonly glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)";
94
- readonly glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)";
95
- readonly glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)";
98
+ readonly glow: "0 0 20px rgba(10, 10, 10, 0.15)";
99
+ readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
100
+ readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
101
+ readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
96
102
  };
97
103
 
98
104
  /**
package/dist/tokens/index.js CHANGED
@@ -1,28 +1,42 @@
1
1
  // src/tokens/colors.ts
2
- var colors = {
3
- /** Brand */
2
+ var darkSemanticColors = {
3
+ background: "hsl(158 58% 7%)",
4
+ foreground: "#ffffff",
5
+ border: "hsl(150 20% 24%)",
6
+ input: "rgba(255, 255, 255, 0.15)",
7
+ destructive: "hsl(0 62% 50%)",
8
+ secondary: "hsl(154 26% 17%)",
9
+ secondaryFg: "#ffffff",
10
+ muted: "hsl(156 32% 12%)",
11
+ mutedFg: "rgba(255, 255, 255, 0.55)",
4
12
  primary: "#2BEE79",
5
- primaryDark: "#1FA855",
6
- primaryFg: "#102217",
7
- /** Surfaces (dark theme — the default) */
8
- bgDark: "#102217",
9
- surfaceDark: "#162E21",
10
- surfaceHighlight: "#243E30",
11
- surfaceBorder: "#244A35",
12
- surfaceDarker: "#0B1810",
13
- /** Surfaces (light theme) */
14
- bgLight: "#F6F8F7",
15
- surfaceLight: "#FFFFFF",
16
- /** Text */
17
- textPrimary: "#FFFFFF",
18
- textSecondary: "#92C9A8",
19
- textMuted: "rgba(255,255,255,0.5)",
20
- textDimmed: "rgba(255,255,255,0.35)",
13
+ primaryFg: "#051B10",
14
+ accent: "hsl(154 26% 17%)",
15
+ accentFg: "#ffffff",
16
+ ring: "#2BEE79",
17
+ card: "hsl(156 32% 12%)",
18
+ cardFg: "#ffffff",
19
+ popover: "hsl(154 26% 17%)",
20
+ popoverFg: "#ffffff",
21
+ chart1: "#2BEE79",
22
+ chart2: "#F6C343",
23
+ chart3: "#F7931A",
24
+ chart4: "#7C3AED",
25
+ chart5: "#DD352E",
26
+ semanticBackground: "hsl(156 32% 12%)",
27
+ semanticBorder: "hsl(150 20% 24%)"
28
+ };
29
+ var colors = {
30
+ ...darkSemanticColors,
31
+ textPrimary: darkSemanticColors.foreground,
32
+ textSecondary: darkSemanticColors.mutedFg,
33
+ textMuted: darkSemanticColors.border,
34
+ textDimmed: darkSemanticColors.ring,
21
35
  /** Semantic */
22
- success: "#2BEE79",
23
- warning: "#F59E0B",
24
- error: "#F94040",
25
- info: "#4290FF",
36
+ success: darkSemanticColors.primary,
37
+ warning: darkSemanticColors.chart3,
38
+ error: darkSemanticColors.destructive,
39
+ info: darkSemanticColors.chart1,
26
40
  /** Network / Layer */
27
41
  network: {
28
42
  bitcoin: "#F7931A",
@@ -41,7 +55,7 @@ var colors = {
41
55
 
42
56
  // src/tokens/typography.ts
43
57
  var fontFamily = {
44
- display: "'Geist Sans', system-ui, -apple-system, sans-serif",
58
+ display: "'Satoshi', system-ui, -apple-system, sans-serif",
45
59
  mono: "'Geist Mono', monospace"
46
60
  };
47
61
  var typeScale = {
@@ -63,23 +77,23 @@ var fontWeight = {
63
77
 
64
78
  // src/tokens/radius.ts
65
79
  var radius = {
66
- sm: "8px",
67
- md: "12px",
68
- lg: "16px",
69
- xl: "20px",
70
- card: "20px",
71
- panel: "22px",
72
- pill: "24px",
73
- nav: "14px",
80
+ sm: "4px",
81
+ md: "6px",
82
+ lg: "8px",
83
+ xl: "12px",
84
+ card: "16px",
85
+ panel: "24px",
86
+ pill: "9999px",
87
+ nav: "32px",
74
88
  full: "9999px"
75
89
  };
76
90
 
77
91
  // src/tokens/shadows.ts
78
92
  var shadow = {
79
- glow: "0 0 20px rgba(43, 238, 121, 0.15)",
80
- glowStrong: "0 0 30px rgba(43, 238, 121, 0.3)",
81
- glowSubtle: "0 0 15px rgba(43, 238, 121, 0.15)",
82
- glowAccent: "0 4px 30px rgba(43, 238, 121, 0.25)"
93
+ glow: "0 0 20px rgba(10, 10, 10, 0.15)",
94
+ glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
95
+ glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
96
+ glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)"
83
97
  };
84
98
 
85
99
  // src/tokens/transitions.ts