kaleido-ui 0.1.67 → 0.1.69

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 (15) hide show
  1. package/README.md +16 -17
  2. package/dist/css/kaleido-ui.css +124 -40
  3. package/dist/native/index.cjs +64 -14
  4. package/dist/native/index.d.cts +28 -28
  5. package/dist/native/index.d.ts +28 -28
  6. package/dist/native/index.js +64 -14
  7. package/dist/tokens/index.cjs +140 -31
  8. package/dist/tokens/index.d.cts +66 -35
  9. package/dist/tokens/index.d.ts +66 -35
  10. package/dist/tokens/index.js +136 -31
  11. package/dist/web/index.cjs +27 -15
  12. package/dist/web/index.d.cts +7 -1
  13. package/dist/web/index.d.ts +7 -1
  14. package/dist/web/index.js +26 -15
  15. package/package.json +1 -1
package/README.md CHANGED
@@ -15,32 +15,31 @@ npm install kaleido-ui
15
15
  | `kaleido-ui` | Web components (Tailwind CSS + Radix UI) |
16
16
  | `kaleido-ui/tokens` | Platform-agnostic design tokens (zero deps) |
17
17
  | `kaleido-ui/native` | React Native components (WDK + custom) |
18
- | `kaleido-ui/tailwind` | Tailwind CSS preset |
19
- | `kaleido-ui/css` | CSS custom properties, glass effects, animations |
18
+ | `kaleido-ui/css` | Tailwind v4 `@theme` tokens, CSS variables, keyframes, utilities, Material Symbols |
20
19
 
21
- ## Quick Start — Web
20
+ > **Tailwind v4 only.** `kaleido-ui/css` ships the full theme as Tailwind v4
21
+ > `@theme` blocks, so there is no separate Tailwind preset to configure —
22
+ > importing the CSS registers every token and generates the utilities.
22
23
 
23
- ### 1. Configure Tailwind
24
+ ## Quick Start — Web (Tailwind v4)
24
25
 
25
- ```js
26
- // tailwind.config.js
27
- module.exports = {
28
- content: [
29
- './src/**/*.{ts,tsx}',
30
- './node_modules/kaleido-ui/dist/web/*.js',
31
- ],
32
- presets: [require('kaleido-ui/tailwind')],
33
- }
34
- ```
26
+ ### 1. Import Tailwind + the kaleido-ui theme
35
27
 
36
- ### 2. Import CSS
28
+ ```css
29
+ /* styles.css */
30
+ @import "tailwindcss";
31
+ @import "kaleido-ui/css";
32
+
33
+ /* Tell Tailwind which files to scan for classes */
34
+ @source "./src/**/*.{ts,tsx}";
35
+ ```
37
36
 
38
37
  ```ts
39
38
  // main.tsx
40
- import 'kaleido-ui/css'
39
+ import './styles.css'
41
40
  ```
42
41
 
43
- ### 3. Use Components
42
+ ### 2. Use Components
44
43
 
45
44
  ```tsx
46
45
  import { Button, Card, CardContent, StatusBadge, AssetCard } from 'kaleido-ui'
package/dist/css/kaleido-ui.css CHANGED
@@ -26,24 +26,24 @@
26
26
 
27
27
  /* ── Semantic colors (light mode) — from src/tokens/colors.ts ───────────── */
28
28
  :root {
29
- --background: #ffffff;
30
- --foreground: #0a0a0a;
31
- --card: #ffffff;
32
- --card-foreground: #0a0a0a;
33
- --popover: #ffffff;
34
- --popover-foreground: #0a0a0a;
35
- --primary: #171717;
36
- --primary-foreground: #fafafa;
37
- --secondary: #f5f5f5;
38
- --secondary-foreground: #171717;
39
- --muted: #f5f5f5;
40
- --muted-foreground: #737373;
41
- --accent: #f5f5f5;
42
- --accent-foreground: #171717;
29
+ --background: #EAECF8;
30
+ --foreground: #12131E;
31
+ --card: #FFFFFF;
32
+ --card-foreground: #12131E;
33
+ --popover: #FFFFFF;
34
+ --popover-foreground: #12131E;
35
+ --primary: #17B581;
36
+ --primary-foreground: #FFFFFF;
37
+ --secondary: #E4E6F6;
38
+ --secondary-foreground: #12131E;
39
+ --muted: #F6F7FD;
40
+ --muted-foreground: #464A69;
41
+ --accent: #E4E6F6;
42
+ --accent-foreground: #12131E;
43
43
  --destructive: #e7000b;
44
- --border: #e5e5e5;
45
- --input: #e5e5e5;
46
- --ring: #a1a1a1;
44
+ --border: #C8CBE0;
45
+ --input: #C8CBE0;
46
+ --ring: #17B581;
47
47
  --chart-1: #2BEE79;
48
48
  --chart-2: #F6C343;
49
49
  --chart-3: #F7931A;
@@ -53,24 +53,24 @@
53
53
 
54
54
  /* ── Semantic colors (dark mode) — from src/tokens/colors.ts ───────────── */
55
55
  .dark {
56
- --background: #0A1326;
57
- --foreground: #ffffff;
58
- --card: #0F1C33;
59
- --card-foreground: #ffffff;
60
- --popover: #16273F;
61
- --popover-foreground: #ffffff;
62
- --primary: #2BEE79;
63
- --primary-foreground: #051B10;
56
+ --background: #12131C;
57
+ --foreground: #E8E9F2;
58
+ --card: #242638;
59
+ --card-foreground: #E8E9F2;
60
+ --popover: #242638;
61
+ --popover-foreground: #E8E9F2;
62
+ --primary: #15E99A;
63
+ --primary-foreground: #12131C;
64
64
  --secondary: #16273F;
65
- --secondary-foreground: #ffffff;
66
- --muted: #0F1C33;
65
+ --secondary-foreground: #E8E9F2;
66
+ --muted: #181924;
67
67
  --muted-foreground: rgba(255, 255, 255, 0.55);
68
- --accent: #16273F;
69
- --accent-foreground: #ffffff;
68
+ --accent: #323448;
69
+ --accent-foreground: #E8E9F2;
70
70
  --destructive: hsl(0 62% 50%);
71
71
  --border: rgba(255, 255, 255, 0.10);
72
72
  --input: rgba(255, 255, 255, 0.15);
73
- --ring: #2BEE79;
73
+ --ring: #15E99A;
74
74
  --chart-1: #2BEE79;
75
75
  --chart-2: #F6C343;
76
76
  --chart-3: #F7931A;
@@ -78,6 +78,63 @@
78
78
  --chart-5: #DD352E;
79
79
  }
80
80
 
81
+ /* ── App semantic colors (slate identity) — from src/tokens/app-semantic.ts ─
82
+ RGB channels in the --app-* namespace. Dark is the default (:root, .dark);
83
+ light is opt-in (.light) — matching the document-root .dark/.light toggle.
84
+ Surfaced as Tailwind utilities below via @theme inline. ──────────────── */
85
+ :root,
86
+ .dark {
87
+ --app-surface-base: 18 19 28;
88
+ --app-surface-raised: 24 25 36;
89
+ --app-surface-overlay: 36 38 56;
90
+ --app-surface-elevated: 50 52 72;
91
+ --app-surface-high: 66 68 90;
92
+ --app-primary: 21 233 154;
93
+ --app-primary-emphasis: 18 201 126;
94
+ --app-primary-foreground: 18 19 28;
95
+ --app-secondary: 139 92 246;
96
+ --app-secondary-emphasis: 124 58 237;
97
+ --app-secondary-foreground: 255 255 255;
98
+ --app-content-primary: 232 233 242;
99
+ --app-content-secondary: 142 146 172;
100
+ --app-content-tertiary: 88 92 116;
101
+ --app-content-inverse: 18 19 28;
102
+ --app-border-subtle: 40 42 60;
103
+ --app-border-default: 54 56 76;
104
+ --app-border-strong: 21 233 154;
105
+ --app-status-success: 34 197 94;
106
+ --app-status-danger: 248 113 113;
107
+ --app-status-warning: 245 158 11;
108
+ --app-status-info: 56 189 248;
109
+ --app-divider: 86 89 108;
110
+ }
111
+
112
+ .light {
113
+ --app-surface-base: 218 220 234;
114
+ --app-surface-raised: 234 236 248;
115
+ --app-surface-overlay: 255 255 255;
116
+ --app-surface-elevated: 246 247 253;
117
+ --app-surface-high: 228 230 246;
118
+ --app-primary: 23 181 129;
119
+ --app-primary-emphasis: 19 138 100;
120
+ --app-primary-foreground: 255 255 255;
121
+ --app-secondary: 111 50 255;
122
+ --app-secondary-emphasis: 90 31 229;
123
+ --app-secondary-foreground: 255 255 255;
124
+ --app-content-primary: 18 19 30;
125
+ --app-content-secondary: 70 74 105;
126
+ --app-content-tertiary: 118 122 152;
127
+ --app-content-inverse: 255 255 255;
128
+ --app-border-subtle: 218 220 238;
129
+ --app-border-default: 200 203 224;
130
+ --app-border-strong: 23 181 129;
131
+ --app-status-success: 22 163 74;
132
+ --app-status-danger: 220 38 38;
133
+ --app-status-warning: 217 119 6;
134
+ --app-status-info: 2 132 199;
135
+ --app-divider: 200 203 224;
136
+ }
137
+
81
138
  /* ─────────────────────────────────────────────────────────────────────────
82
139
  Tailwind v4 @theme
83
140
  @theme inline — semantic colors: utilities reference CSS vars so dark mode works at runtime.
@@ -109,6 +166,38 @@
109
166
  --color-chart-3: var(--chart-3);
110
167
  --color-chart-4: var(--chart-4);
111
168
  --color-chart-5: var(--chart-5);
169
+
170
+ /* App semantic colors (slate identity) — channel-backed for <alpha-value>.
171
+ These intentionally override the shadcn-style --color-primary/--color-secondary
172
+ mappings above so brand utilities (bg-primary, bg-secondary, text-content-*,
173
+ border-border-*, bg-status-*/10, …) resolve to the canonical slate palette. */
174
+ --color-surface-base: rgb(var(--app-surface-base) / <alpha-value>);
175
+ --color-surface-raised: rgb(var(--app-surface-raised) / <alpha-value>);
176
+ --color-surface-overlay: rgb(var(--app-surface-overlay) / <alpha-value>);
177
+ --color-surface-elevated: rgb(var(--app-surface-elevated) / <alpha-value>);
178
+ --color-surface-high: rgb(var(--app-surface-high) / <alpha-value>);
179
+ --color-primary: rgb(var(--app-primary) / <alpha-value>);
180
+ --color-primary-emphasis: rgb(var(--app-primary-emphasis) / <alpha-value>);
181
+ --color-primary-foreground: rgb(var(--app-primary-foreground) / <alpha-value>);
182
+ --color-secondary: rgb(var(--app-secondary) / <alpha-value>);
183
+ --color-secondary-emphasis: rgb(var(--app-secondary-emphasis) / <alpha-value>);
184
+ --color-secondary-foreground: rgb(var(--app-secondary-foreground) / <alpha-value>);
185
+ --color-content-primary: rgb(var(--app-content-primary) / <alpha-value>);
186
+ --color-content-secondary: rgb(var(--app-content-secondary) / <alpha-value>);
187
+ --color-content-tertiary: rgb(var(--app-content-tertiary) / <alpha-value>);
188
+ --color-content-inverse: rgb(var(--app-content-inverse) / <alpha-value>);
189
+ --color-border-subtle: rgb(var(--app-border-subtle) / <alpha-value>);
190
+ --color-border-default: rgb(var(--app-border-default) / <alpha-value>);
191
+ --color-border-strong: rgb(var(--app-border-strong) / <alpha-value>);
192
+ --color-status-success: rgb(var(--app-status-success) / <alpha-value>);
193
+ --color-status-danger: rgb(var(--app-status-danger) / <alpha-value>);
194
+ --color-status-warning: rgb(var(--app-status-warning) / <alpha-value>);
195
+ --color-status-info: rgb(var(--app-status-info) / <alpha-value>);
196
+ --color-divider: rgb(var(--app-divider) / <alpha-value>);
197
+ --color-status-success-subtle: rgb(var(--app-status-success) / 0.15);
198
+ --color-status-danger-subtle: rgb(var(--app-status-danger) / 0.15);
199
+ --color-status-warning-subtle: rgb(var(--app-status-warning) / 0.15);
200
+ --color-status-info-subtle: rgb(var(--app-status-info) / 0.15);
112
201
  }
113
202
 
114
203
  @theme {
@@ -146,24 +235,19 @@
146
235
  --color-tx-swap: #4290FF;
147
236
 
148
237
  /* Intent colors */
149
- --color-success: #2BEE79;
238
+ --color-success: #15E99A;
150
239
  --color-warning: #FACC15;
151
240
  --color-danger: #F94040;
152
241
  --color-info: #4290FF;
153
242
 
154
- /* Surface elevation (translucent overlays for dark theme) */
155
- --color-surface-base: rgba(255, 255, 255, 0.03);
243
+ /* Surface elevation — extras with no slate-semantic equivalent.
244
+ (surface-base / surface-elevated / surface-overlay are now the channel-backed
245
+ slate tokens defined in @theme inline above; the legacy translucent washes here
246
+ would otherwise override them by source order.) */
156
247
  --color-surface-card: rgba(255, 255, 255, 0.05);
157
- --color-surface-elevated: rgba(255, 255, 255, 0.08);
158
- --color-surface-overlay: rgba(0, 0, 0, 0.20);
159
248
  --color-surface-overlay-strong: rgba(0, 0, 0, 0.35);
160
249
  --color-surface-scrim: rgba(0, 0, 0, 0.60);
161
250
 
162
- /* Border ladder */
163
- --color-border-subtle: rgba(255, 255, 255, 0.04);
164
- --color-border-default: rgba(255, 255, 255, 0.08);
165
- --color-border-strong: rgba(255, 255, 255, 0.15);
166
-
167
251
  /* Text ladder for dark surfaces */
168
252
  --color-text-primary: #ffffff;
169
253
  --color-text-secondary: rgba(255, 255, 255, 0.65);
package/dist/native/index.cjs CHANGED
@@ -81,30 +81,37 @@ var import_wdk_uikit_react_native = require("@tetherto/wdk-uikit-react-native");
81
81
 
82
82
  // src/tokens/colors.ts
83
83
  var darkSemanticColors = {
84
- background: "#0A1326",
85
- foreground: "#ffffff",
84
+ background: "#12131C",
85
+ // surface-base (deepest)
86
+ foreground: "#E8E9F2",
87
+ // content-primary (cool white)
86
88
  border: "rgba(255, 255, 255, 0.10)",
87
89
  input: "rgba(255, 255, 255, 0.15)",
88
90
  destructive: "hsl(0 62% 50%)",
89
91
  secondary: "#16273F",
90
- secondaryFg: "#ffffff",
91
- muted: "#0F1C33",
92
+ // neutral surface (bg-secondary utility is brand violet via app token)
93
+ secondaryFg: "#E8E9F2",
94
+ muted: "#181924",
95
+ // surface-raised
92
96
  mutedFg: "rgba(255, 255, 255, 0.55)",
93
- primary: "#2BEE79",
94
- primaryFg: "#051B10",
95
- accent: "#16273F",
96
- accentFg: "#ffffff",
97
- ring: "#2BEE79",
98
- card: "#0F1C33",
99
- cardFg: "#ffffff",
100
- popover: "#16273F",
101
- popoverFg: "#ffffff",
97
+ primary: "#15E99A",
98
+ // brand green (dark)
99
+ primaryFg: "#12131C",
100
+ accent: "#323448",
101
+ // surface-elevated
102
+ accentFg: "#E8E9F2",
103
+ ring: "#15E99A",
104
+ card: "#242638",
105
+ // surface-overlay (card)
106
+ cardFg: "#E8E9F2",
107
+ popover: "#242638",
108
+ popoverFg: "#E8E9F2",
102
109
  chart1: "#2BEE79",
103
110
  chart2: "#F6C343",
104
111
  chart3: "#F7931A",
105
112
  chart4: "#7C3AED",
106
113
  chart5: "#DD352E",
107
- semanticBackground: "#0F1C33",
114
+ semanticBackground: "#242638",
108
115
  semanticBorder: "rgba(255, 255, 255, 0.10)"
109
116
  };
110
117
  var colors = {
@@ -1225,6 +1232,49 @@ function ModeToggle({ icon, size = 40, onToggle }) {
1225
1232
  );
1226
1233
  }
1227
1234
 
1235
+ // src/tokens/app-semantic.ts
1236
+ var appSemanticDark = {
1237
+ // Body is notably darker than cards — clear depth without full-black.
1238
+ "surface-base": "18 19 28",
1239
+ // #12131C — deepest bg, sidebar
1240
+ "surface-raised": "24 25 36",
1241
+ // #181924 — page body bg
1242
+ "surface-overlay": "36 38 56",
1243
+ // #242638 — card bg (~14 lighter than body)
1244
+ "surface-elevated": "50 52 72",
1245
+ // #323448 — sections inside cards
1246
+ "surface-high": "66 68 90",
1247
+ // #42445A — hover/active highlights
1248
+ primary: "21 233 154",
1249
+ // #15E99A
1250
+ "primary-emphasis": "18 201 126",
1251
+ // #12C97E
1252
+ "primary-foreground": "18 19 28",
1253
+ secondary: "139 92 246",
1254
+ // #8B5CF6
1255
+ "secondary-emphasis": "124 58 237",
1256
+ "secondary-foreground": "255 255 255",
1257
+ "content-primary": "232 233 242",
1258
+ // #E8E9F2 — slightly cool white
1259
+ "content-secondary": "142 146 172",
1260
+ // #8E92AC
1261
+ "content-tertiary": "88 92 116",
1262
+ // #585C74
1263
+ "content-inverse": "18 19 28",
1264
+ "border-subtle": "40 42 60",
1265
+ // #282A3C
1266
+ "border-default": "54 56 76",
1267
+ // #36384C
1268
+ "border-strong": "21 233 154",
1269
+ "status-success": "34 197 94",
1270
+ "status-danger": "248 113 113",
1271
+ "status-warning": "245 158 11",
1272
+ "status-info": "56 189 248",
1273
+ divider: "86 89 108"
1274
+ // #56596C
1275
+ };
1276
+ var appSemanticOrder = Object.keys(appSemanticDark);
1277
+
1228
1278
  // src/tokens/typography.ts
1229
1279
  var fontFamily = {
1230
1280
  display: "'Satoshi', system-ui, -apple-system, sans-serif",
package/dist/native/index.d.cts CHANGED
@@ -10,7 +10,7 @@ import { TextProps, ViewProps, PressableProps, ViewStyle } from 'react-native';
10
10
  * <ThemeProvider brandConfig={kaleidoswapBrandConfig}>
11
11
  */
12
12
  declare const kaleidoswapBrandConfig: {
13
- primaryColor: "#2BEE79";
13
+ primaryColor: "#15E99A";
14
14
  secondaryColor: "#16273F";
15
15
  };
16
16
  /**
@@ -18,15 +18,15 @@ declare const kaleidoswapBrandConfig: {
18
18
  */
19
19
  declare const kaleidoswapTokens: {
20
20
  readonly colors: {
21
- readonly primary: "#2BEE79";
22
- readonly primaryFg: "#051B10";
23
- readonly background: "#0A1326";
24
- readonly surface: "#0F1C33";
25
- readonly surfaceHighlight: "#16273F";
21
+ readonly primary: "#15E99A";
22
+ readonly primaryFg: "#12131C";
23
+ readonly background: "#12131C";
24
+ readonly surface: "#242638";
25
+ readonly surfaceHighlight: "#323448";
26
26
  readonly border: "rgba(255, 255, 255, 0.10)";
27
- readonly textPrimary: "#ffffff";
27
+ readonly textPrimary: "#E8E9F2";
28
28
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
29
- readonly success: "#2BEE79";
29
+ readonly success: "#15E99A";
30
30
  readonly warning: "#FACC15";
31
31
  readonly error: "hsl(0 62% 50%)";
32
32
  readonly info: "#4290FF";
@@ -99,9 +99,9 @@ declare const variantConfig: {
99
99
  readonly iconColor: "#4290FF";
100
100
  };
101
101
  readonly success: {
102
- readonly bg: "#2BEE791A";
103
- readonly borderColor: "#2BEE7933";
104
- readonly iconColor: "#2BEE79";
102
+ readonly bg: "#15E99A1A";
103
+ readonly borderColor: "#15E99A33";
104
+ readonly iconColor: "#15E99A";
105
105
  };
106
106
  };
107
107
  interface AlertBannerProps {
@@ -418,12 +418,12 @@ interface ModeToggleProps {
418
418
  declare function ModeToggle({ icon, size, onToggle }: ModeToggleProps): react_jsx_runtime.JSX.Element;
419
419
 
420
420
  declare const colors: {
421
- readonly textPrimary: "#ffffff";
421
+ readonly textPrimary: "#E8E9F2";
422
422
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
423
423
  readonly textMuted: "rgba(255, 255, 255, 0.10)";
424
- readonly textDimmed: "#2BEE79";
424
+ readonly textDimmed: "#15E99A";
425
425
  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
426
- readonly success: "#2BEE79";
426
+ readonly success: "#15E99A";
427
427
  readonly warning: "#FACC15";
428
428
  readonly danger: "#F94040";
429
429
  readonly info: "#4290FF";
@@ -499,30 +499,30 @@ declare const colors: {
499
499
  readonly receive: "#2BEE79";
500
500
  readonly swap: "#4290FF";
501
501
  };
502
- readonly background: "#0A1326";
503
- readonly foreground: "#ffffff";
502
+ readonly background: "#12131C";
503
+ readonly foreground: "#E8E9F2";
504
504
  readonly border: "rgba(255, 255, 255, 0.10)";
505
505
  readonly input: "rgba(255, 255, 255, 0.15)";
506
506
  readonly destructive: "hsl(0 62% 50%)";
507
507
  readonly secondary: "#16273F";
508
- readonly secondaryFg: "#ffffff";
509
- readonly muted: "#0F1C33";
508
+ readonly secondaryFg: "#E8E9F2";
509
+ readonly muted: "#181924";
510
510
  readonly mutedFg: "rgba(255, 255, 255, 0.55)";
511
- readonly primary: "#2BEE79";
512
- readonly primaryFg: "#051B10";
513
- readonly accent: "#16273F";
514
- readonly accentFg: "#ffffff";
515
- readonly ring: "#2BEE79";
516
- readonly card: "#0F1C33";
517
- readonly cardFg: "#ffffff";
518
- readonly popover: "#16273F";
519
- readonly popoverFg: "#ffffff";
511
+ readonly primary: "#15E99A";
512
+ readonly primaryFg: "#12131C";
513
+ readonly accent: "#323448";
514
+ readonly accentFg: "#E8E9F2";
515
+ readonly ring: "#15E99A";
516
+ readonly card: "#242638";
517
+ readonly cardFg: "#E8E9F2";
518
+ readonly popover: "#242638";
519
+ readonly popoverFg: "#E8E9F2";
520
520
  readonly chart1: "#2BEE79";
521
521
  readonly chart2: "#F6C343";
522
522
  readonly chart3: "#F7931A";
523
523
  readonly chart4: "#7C3AED";
524
524
  readonly chart5: "#DD352E";
525
- readonly semanticBackground: "#0F1C33";
525
+ readonly semanticBackground: "#242638";
526
526
  readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
527
527
  };
528
528
 
package/dist/native/index.d.ts CHANGED
@@ -10,7 +10,7 @@ import { TextProps, ViewProps, PressableProps, ViewStyle } from 'react-native';
10
10
  * <ThemeProvider brandConfig={kaleidoswapBrandConfig}>
11
11
  */
12
12
  declare const kaleidoswapBrandConfig: {
13
- primaryColor: "#2BEE79";
13
+ primaryColor: "#15E99A";
14
14
  secondaryColor: "#16273F";
15
15
  };
16
16
  /**
@@ -18,15 +18,15 @@ declare const kaleidoswapBrandConfig: {
18
18
  */
19
19
  declare const kaleidoswapTokens: {
20
20
  readonly colors: {
21
- readonly primary: "#2BEE79";
22
- readonly primaryFg: "#051B10";
23
- readonly background: "#0A1326";
24
- readonly surface: "#0F1C33";
25
- readonly surfaceHighlight: "#16273F";
21
+ readonly primary: "#15E99A";
22
+ readonly primaryFg: "#12131C";
23
+ readonly background: "#12131C";
24
+ readonly surface: "#242638";
25
+ readonly surfaceHighlight: "#323448";
26
26
  readonly border: "rgba(255, 255, 255, 0.10)";
27
- readonly textPrimary: "#ffffff";
27
+ readonly textPrimary: "#E8E9F2";
28
28
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
29
- readonly success: "#2BEE79";
29
+ readonly success: "#15E99A";
30
30
  readonly warning: "#FACC15";
31
31
  readonly error: "hsl(0 62% 50%)";
32
32
  readonly info: "#4290FF";
@@ -99,9 +99,9 @@ declare const variantConfig: {
99
99
  readonly iconColor: "#4290FF";
100
100
  };
101
101
  readonly success: {
102
- readonly bg: "#2BEE791A";
103
- readonly borderColor: "#2BEE7933";
104
- readonly iconColor: "#2BEE79";
102
+ readonly bg: "#15E99A1A";
103
+ readonly borderColor: "#15E99A33";
104
+ readonly iconColor: "#15E99A";
105
105
  };
106
106
  };
107
107
  interface AlertBannerProps {
@@ -418,12 +418,12 @@ interface ModeToggleProps {
418
418
  declare function ModeToggle({ icon, size, onToggle }: ModeToggleProps): react_jsx_runtime.JSX.Element;
419
419
 
420
420
  declare const colors: {
421
- readonly textPrimary: "#ffffff";
421
+ readonly textPrimary: "#E8E9F2";
422
422
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
423
423
  readonly textMuted: "rgba(255, 255, 255, 0.10)";
424
- readonly textDimmed: "#2BEE79";
424
+ readonly textDimmed: "#15E99A";
425
425
  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
426
- readonly success: "#2BEE79";
426
+ readonly success: "#15E99A";
427
427
  readonly warning: "#FACC15";
428
428
  readonly danger: "#F94040";
429
429
  readonly info: "#4290FF";
@@ -499,30 +499,30 @@ declare const colors: {
499
499
  readonly receive: "#2BEE79";
500
500
  readonly swap: "#4290FF";
501
501
  };
502
- readonly background: "#0A1326";
503
- readonly foreground: "#ffffff";
502
+ readonly background: "#12131C";
503
+ readonly foreground: "#E8E9F2";
504
504
  readonly border: "rgba(255, 255, 255, 0.10)";
505
505
  readonly input: "rgba(255, 255, 255, 0.15)";
506
506
  readonly destructive: "hsl(0 62% 50%)";
507
507
  readonly secondary: "#16273F";
508
- readonly secondaryFg: "#ffffff";
509
- readonly muted: "#0F1C33";
508
+ readonly secondaryFg: "#E8E9F2";
509
+ readonly muted: "#181924";
510
510
  readonly mutedFg: "rgba(255, 255, 255, 0.55)";
511
- readonly primary: "#2BEE79";
512
- readonly primaryFg: "#051B10";
513
- readonly accent: "#16273F";
514
- readonly accentFg: "#ffffff";
515
- readonly ring: "#2BEE79";
516
- readonly card: "#0F1C33";
517
- readonly cardFg: "#ffffff";
518
- readonly popover: "#16273F";
519
- readonly popoverFg: "#ffffff";
511
+ readonly primary: "#15E99A";
512
+ readonly primaryFg: "#12131C";
513
+ readonly accent: "#323448";
514
+ readonly accentFg: "#E8E9F2";
515
+ readonly ring: "#15E99A";
516
+ readonly card: "#242638";
517
+ readonly cardFg: "#E8E9F2";
518
+ readonly popover: "#242638";
519
+ readonly popoverFg: "#E8E9F2";
520
520
  readonly chart1: "#2BEE79";
521
521
  readonly chart2: "#F6C343";
522
522
  readonly chart3: "#F7931A";
523
523
  readonly chart4: "#7C3AED";
524
524
  readonly chart5: "#DD352E";
525
- readonly semanticBackground: "#0F1C33";
525
+ readonly semanticBackground: "#242638";
526
526
  readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
527
527
  };
528
528