kaleido-ui 0.1.55 → 0.1.57

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 (12) hide show
  1. package/dist/css/kaleido-ui.css +7 -7
  2. package/dist/native/index.cjs +13 -12
  3. package/dist/native/index.d.cts +15 -15
  4. package/dist/native/index.d.ts +15 -15
  5. package/dist/native/index.js +13 -12
  6. package/dist/tokens/index.cjs +13 -12
  7. package/dist/tokens/index.d.cts +10 -10
  8. package/dist/tokens/index.d.ts +10 -10
  9. package/dist/tokens/index.js +13 -12
  10. package/dist/web/index.cjs +9 -9
  11. package/dist/web/index.js +9 -9
  12. package/package.json +1 -1
package/dist/css/kaleido-ui.css CHANGED
@@ -53,22 +53,22 @@
53
53
 
54
54
  /* ── Semantic colors (dark mode) — from src/tokens/colors.ts ───────────── */
55
55
  .dark {
56
- --background: hsl(158 58% 7%);
56
+ --background: #0A1326;
57
57
  --foreground: #ffffff;
58
- --card: hsl(156 32% 12%);
58
+ --card: #0F1C33;
59
59
  --card-foreground: #ffffff;
60
- --popover: hsl(154 26% 17%);
60
+ --popover: #16273F;
61
61
  --popover-foreground: #ffffff;
62
62
  --primary: #2BEE79;
63
63
  --primary-foreground: #051B10;
64
- --secondary: hsl(154 26% 17%);
64
+ --secondary: #16273F;
65
65
  --secondary-foreground: #ffffff;
66
- --muted: hsl(156 32% 12%);
66
+ --muted: #0F1C33;
67
67
  --muted-foreground: rgba(255, 255, 255, 0.55);
68
- --accent: hsl(154 26% 17%);
68
+ --accent: #16273F;
69
69
  --accent-foreground: #ffffff;
70
70
  --destructive: hsl(0 62% 50%);
71
- --border: hsl(150 20% 24%);
71
+ --border: rgba(255, 255, 255, 0.10);
72
72
  --input: rgba(255, 255, 255, 0.15);
73
73
  --ring: #2BEE79;
74
74
  --chart-1: #2BEE79;
package/dist/native/index.cjs CHANGED
@@ -81,31 +81,31 @@ 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: "hsl(158 58% 7%)",
84
+ background: "#0A1326",
85
85
  foreground: "#ffffff",
86
- border: "hsl(150 20% 24%)",
86
+ border: "rgba(255, 255, 255, 0.10)",
87
87
  input: "rgba(255, 255, 255, 0.15)",
88
88
  destructive: "hsl(0 62% 50%)",
89
- secondary: "hsl(154 26% 17%)",
89
+ secondary: "#16273F",
90
90
  secondaryFg: "#ffffff",
91
- muted: "hsl(156 32% 12%)",
91
+ muted: "#0F1C33",
92
92
  mutedFg: "rgba(255, 255, 255, 0.55)",
93
93
  primary: "#2BEE79",
94
94
  primaryFg: "#051B10",
95
- accent: "hsl(154 26% 17%)",
95
+ accent: "#16273F",
96
96
  accentFg: "#ffffff",
97
97
  ring: "#2BEE79",
98
- card: "hsl(156 32% 12%)",
98
+ card: "#0F1C33",
99
99
  cardFg: "#ffffff",
100
- popover: "hsl(154 26% 17%)",
100
+ popover: "#16273F",
101
101
  popoverFg: "#ffffff",
102
102
  chart1: "#2BEE79",
103
103
  chart2: "#F6C343",
104
104
  chart3: "#F7931A",
105
105
  chart4: "#7C3AED",
106
106
  chart5: "#DD352E",
107
- semanticBackground: "hsl(156 32% 12%)",
108
- semanticBorder: "hsl(150 20% 24%)"
107
+ semanticBackground: "#0F1C33",
108
+ semanticBorder: "rgba(255, 255, 255, 0.10)"
109
109
  };
110
110
  var colors = {
111
111
  ...darkSemanticColors,
@@ -515,9 +515,10 @@ var NETWORK_GLYPH = {
515
515
  };
516
516
  var dark = {
517
517
  mode: "dark",
518
- background: "#0D1813",
519
- card: "#121C16",
520
- cardElevated: "#17231C",
518
+ // Dark-blue surface family (navy derived from the brand info blue #4290FF).
519
+ background: "#0A1326",
520
+ card: "#0F1C33",
521
+ cardElevated: "#16273F",
521
522
  // Brand primary CTA green — per DESIGN.md `brand.primary`, identical to web.
522
523
  // (#15E99A is the decorative logo brandmark, kept only in gradientBrand / QR.)
523
524
  primary: "#2BEE79",
package/dist/native/index.d.cts CHANGED
@@ -11,7 +11,7 @@ import { TextProps, ViewProps, PressableProps, ViewStyle } from 'react-native';
11
11
  */
12
12
  declare const kaleidoswapBrandConfig: {
13
13
  primaryColor: "#2BEE79";
14
- secondaryColor: "hsl(154 26% 17%)";
14
+ secondaryColor: "#16273F";
15
15
  };
16
16
  /**
17
17
  * Full custom theme tokens for more granular control.
@@ -20,10 +20,10 @@ declare const kaleidoswapTokens: {
20
20
  readonly colors: {
21
21
  readonly primary: "#2BEE79";
22
22
  readonly primaryFg: "#051B10";
23
- readonly background: "hsl(158 58% 7%)";
24
- readonly surface: "hsl(156 32% 12%)";
25
- readonly surfaceHighlight: "hsl(154 26% 17%)";
26
- readonly border: "hsl(150 20% 24%)";
23
+ readonly background: "#0A1326";
24
+ readonly surface: "#0F1C33";
25
+ readonly surfaceHighlight: "#16273F";
26
+ readonly border: "rgba(255, 255, 255, 0.10)";
27
27
  readonly textPrimary: "#ffffff";
28
28
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
29
29
  readonly success: "#2BEE79";
@@ -420,7 +420,7 @@ declare function ModeToggle({ icon, size, onToggle }: ModeToggleProps): react_js
420
420
  declare const colors: {
421
421
  readonly textPrimary: "#ffffff";
422
422
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
423
- readonly textMuted: "hsl(150 20% 24%)";
423
+ readonly textMuted: "rgba(255, 255, 255, 0.10)";
424
424
  readonly textDimmed: "#2BEE79";
425
425
  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
426
426
  readonly success: "#2BEE79";
@@ -499,31 +499,31 @@ declare const colors: {
499
499
  readonly receive: "#2BEE79";
500
500
  readonly swap: "#4290FF";
501
501
  };
502
- readonly background: "hsl(158 58% 7%)";
502
+ readonly background: "#0A1326";
503
503
  readonly foreground: "#ffffff";
504
- readonly border: "hsl(150 20% 24%)";
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
- readonly secondary: "hsl(154 26% 17%)";
507
+ readonly secondary: "#16273F";
508
508
  readonly secondaryFg: "#ffffff";
509
- readonly muted: "hsl(156 32% 12%)";
509
+ readonly muted: "#0F1C33";
510
510
  readonly mutedFg: "rgba(255, 255, 255, 0.55)";
511
511
  readonly primary: "#2BEE79";
512
512
  readonly primaryFg: "#051B10";
513
- readonly accent: "hsl(154 26% 17%)";
513
+ readonly accent: "#16273F";
514
514
  readonly accentFg: "#ffffff";
515
515
  readonly ring: "#2BEE79";
516
- readonly card: "hsl(156 32% 12%)";
516
+ readonly card: "#0F1C33";
517
517
  readonly cardFg: "#ffffff";
518
- readonly popover: "hsl(154 26% 17%)";
518
+ readonly popover: "#16273F";
519
519
  readonly popoverFg: "#ffffff";
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: "hsl(156 32% 12%)";
526
- readonly semanticBorder: "hsl(150 20% 24%)";
525
+ readonly semanticBackground: "#0F1C33";
526
+ readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
527
527
  };
528
528
 
529
529
  /**
package/dist/native/index.d.ts CHANGED
@@ -11,7 +11,7 @@ import { TextProps, ViewProps, PressableProps, ViewStyle } from 'react-native';
11
11
  */
12
12
  declare const kaleidoswapBrandConfig: {
13
13
  primaryColor: "#2BEE79";
14
- secondaryColor: "hsl(154 26% 17%)";
14
+ secondaryColor: "#16273F";
15
15
  };
16
16
  /**
17
17
  * Full custom theme tokens for more granular control.
@@ -20,10 +20,10 @@ declare const kaleidoswapTokens: {
20
20
  readonly colors: {
21
21
  readonly primary: "#2BEE79";
22
22
  readonly primaryFg: "#051B10";
23
- readonly background: "hsl(158 58% 7%)";
24
- readonly surface: "hsl(156 32% 12%)";
25
- readonly surfaceHighlight: "hsl(154 26% 17%)";
26
- readonly border: "hsl(150 20% 24%)";
23
+ readonly background: "#0A1326";
24
+ readonly surface: "#0F1C33";
25
+ readonly surfaceHighlight: "#16273F";
26
+ readonly border: "rgba(255, 255, 255, 0.10)";
27
27
  readonly textPrimary: "#ffffff";
28
28
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
29
29
  readonly success: "#2BEE79";
@@ -420,7 +420,7 @@ declare function ModeToggle({ icon, size, onToggle }: ModeToggleProps): react_js
420
420
  declare const colors: {
421
421
  readonly textPrimary: "#ffffff";
422
422
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
423
- readonly textMuted: "hsl(150 20% 24%)";
423
+ readonly textMuted: "rgba(255, 255, 255, 0.10)";
424
424
  readonly textDimmed: "#2BEE79";
425
425
  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
426
426
  readonly success: "#2BEE79";
@@ -499,31 +499,31 @@ declare const colors: {
499
499
  readonly receive: "#2BEE79";
500
500
  readonly swap: "#4290FF";
501
501
  };
502
- readonly background: "hsl(158 58% 7%)";
502
+ readonly background: "#0A1326";
503
503
  readonly foreground: "#ffffff";
504
- readonly border: "hsl(150 20% 24%)";
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
- readonly secondary: "hsl(154 26% 17%)";
507
+ readonly secondary: "#16273F";
508
508
  readonly secondaryFg: "#ffffff";
509
- readonly muted: "hsl(156 32% 12%)";
509
+ readonly muted: "#0F1C33";
510
510
  readonly mutedFg: "rgba(255, 255, 255, 0.55)";
511
511
  readonly primary: "#2BEE79";
512
512
  readonly primaryFg: "#051B10";
513
- readonly accent: "hsl(154 26% 17%)";
513
+ readonly accent: "#16273F";
514
514
  readonly accentFg: "#ffffff";
515
515
  readonly ring: "#2BEE79";
516
- readonly card: "hsl(156 32% 12%)";
516
+ readonly card: "#0F1C33";
517
517
  readonly cardFg: "#ffffff";
518
- readonly popover: "hsl(154 26% 17%)";
518
+ readonly popover: "#16273F";
519
519
  readonly popoverFg: "#ffffff";
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: "hsl(156 32% 12%)";
526
- readonly semanticBorder: "hsl(150 20% 24%)";
525
+ readonly semanticBackground: "#0F1C33";
526
+ readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
527
527
  };
528
528
 
529
529
  /**
package/dist/native/index.js CHANGED
@@ -3,31 +3,31 @@ import { ThemeProvider } from "@tetherto/wdk-uikit-react-native";
3
3
 
4
4
  // src/tokens/colors.ts
5
5
  var darkSemanticColors = {
6
- background: "hsl(158 58% 7%)",
6
+ background: "#0A1326",
7
7
  foreground: "#ffffff",
8
- border: "hsl(150 20% 24%)",
8
+ border: "rgba(255, 255, 255, 0.10)",
9
9
  input: "rgba(255, 255, 255, 0.15)",
10
10
  destructive: "hsl(0 62% 50%)",
11
- secondary: "hsl(154 26% 17%)",
11
+ secondary: "#16273F",
12
12
  secondaryFg: "#ffffff",
13
- muted: "hsl(156 32% 12%)",
13
+ muted: "#0F1C33",
14
14
  mutedFg: "rgba(255, 255, 255, 0.55)",
15
15
  primary: "#2BEE79",
16
16
  primaryFg: "#051B10",
17
- accent: "hsl(154 26% 17%)",
17
+ accent: "#16273F",
18
18
  accentFg: "#ffffff",
19
19
  ring: "#2BEE79",
20
- card: "hsl(156 32% 12%)",
20
+ card: "#0F1C33",
21
21
  cardFg: "#ffffff",
22
- popover: "hsl(154 26% 17%)",
22
+ popover: "#16273F",
23
23
  popoverFg: "#ffffff",
24
24
  chart1: "#2BEE79",
25
25
  chart2: "#F6C343",
26
26
  chart3: "#F7931A",
27
27
  chart4: "#7C3AED",
28
28
  chart5: "#DD352E",
29
- semanticBackground: "hsl(156 32% 12%)",
30
- semanticBorder: "hsl(150 20% 24%)"
29
+ semanticBackground: "#0F1C33",
30
+ semanticBorder: "rgba(255, 255, 255, 0.10)"
31
31
  };
32
32
  var colors = {
33
33
  ...darkSemanticColors,
@@ -449,9 +449,10 @@ var NETWORK_GLYPH = {
449
449
  };
450
450
  var dark = {
451
451
  mode: "dark",
452
- background: "#0D1813",
453
- card: "#121C16",
454
- cardElevated: "#17231C",
452
+ // Dark-blue surface family (navy derived from the brand info blue #4290FF).
453
+ background: "#0A1326",
454
+ card: "#0F1C33",
455
+ cardElevated: "#16273F",
455
456
  // Brand primary CTA green — per DESIGN.md `brand.primary`, identical to web.
456
457
  // (#15E99A is the decorative logo brandmark, kept only in gradientBrand / QR.)
457
458
  primary: "#2BEE79",
package/dist/tokens/index.cjs CHANGED
@@ -69,31 +69,31 @@ var lightSemanticColors = {
69
69
  chart5: "#DD352E"
70
70
  };
71
71
  var darkSemanticColors = {
72
- background: "hsl(158 58% 7%)",
72
+ background: "#0A1326",
73
73
  foreground: "#ffffff",
74
- border: "hsl(150 20% 24%)",
74
+ border: "rgba(255, 255, 255, 0.10)",
75
75
  input: "rgba(255, 255, 255, 0.15)",
76
76
  destructive: "hsl(0 62% 50%)",
77
- secondary: "hsl(154 26% 17%)",
77
+ secondary: "#16273F",
78
78
  secondaryFg: "#ffffff",
79
- muted: "hsl(156 32% 12%)",
79
+ muted: "#0F1C33",
80
80
  mutedFg: "rgba(255, 255, 255, 0.55)",
81
81
  primary: "#2BEE79",
82
82
  primaryFg: "#051B10",
83
- accent: "hsl(154 26% 17%)",
83
+ accent: "#16273F",
84
84
  accentFg: "#ffffff",
85
85
  ring: "#2BEE79",
86
- card: "hsl(156 32% 12%)",
86
+ card: "#0F1C33",
87
87
  cardFg: "#ffffff",
88
- popover: "hsl(154 26% 17%)",
88
+ popover: "#16273F",
89
89
  popoverFg: "#ffffff",
90
90
  chart1: "#2BEE79",
91
91
  chart2: "#F6C343",
92
92
  chart3: "#F7931A",
93
93
  chart4: "#7C3AED",
94
94
  chart5: "#DD352E",
95
- semanticBackground: "hsl(156 32% 12%)",
96
- semanticBorder: "hsl(150 20% 24%)"
95
+ semanticBackground: "#0F1C33",
96
+ semanticBorder: "rgba(255, 255, 255, 0.10)"
97
97
  };
98
98
  var colors = {
99
99
  ...darkSemanticColors,
@@ -376,9 +376,10 @@ var NETWORK_GLYPH = {
376
376
  };
377
377
  var dark = {
378
378
  mode: "dark",
379
- background: "#0D1813",
380
- card: "#121C16",
381
- cardElevated: "#17231C",
379
+ // Dark-blue surface family (navy derived from the brand info blue #4290FF).
380
+ background: "#0A1326",
381
+ card: "#0F1C33",
382
+ cardElevated: "#16273F",
382
383
  // Brand primary CTA green — per DESIGN.md `brand.primary`, identical to web.
383
384
  // (#15E99A is the decorative logo brandmark, kept only in gradientBrand / QR.)
384
385
  primary: "#2BEE79",
package/dist/tokens/index.d.cts CHANGED
@@ -31,7 +31,7 @@ declare const lightSemanticColors: {
31
31
  declare const colors: {
32
32
  readonly textPrimary: "#ffffff";
33
33
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
34
- readonly textMuted: "hsl(150 20% 24%)";
34
+ readonly textMuted: "rgba(255, 255, 255, 0.10)";
35
35
  readonly textDimmed: "#2BEE79";
36
36
  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
37
37
  readonly success: "#2BEE79";
@@ -110,31 +110,31 @@ declare const colors: {
110
110
  readonly receive: "#2BEE79";
111
111
  readonly swap: "#4290FF";
112
112
  };
113
- readonly background: "hsl(158 58% 7%)";
113
+ readonly background: "#0A1326";
114
114
  readonly foreground: "#ffffff";
115
- readonly border: "hsl(150 20% 24%)";
115
+ readonly border: "rgba(255, 255, 255, 0.10)";
116
116
  readonly input: "rgba(255, 255, 255, 0.15)";
117
117
  readonly destructive: "hsl(0 62% 50%)";
118
- readonly secondary: "hsl(154 26% 17%)";
118
+ readonly secondary: "#16273F";
119
119
  readonly secondaryFg: "#ffffff";
120
- readonly muted: "hsl(156 32% 12%)";
120
+ readonly muted: "#0F1C33";
121
121
  readonly mutedFg: "rgba(255, 255, 255, 0.55)";
122
122
  readonly primary: "#2BEE79";
123
123
  readonly primaryFg: "#051B10";
124
- readonly accent: "hsl(154 26% 17%)";
124
+ readonly accent: "#16273F";
125
125
  readonly accentFg: "#ffffff";
126
126
  readonly ring: "#2BEE79";
127
- readonly card: "hsl(156 32% 12%)";
127
+ readonly card: "#0F1C33";
128
128
  readonly cardFg: "#ffffff";
129
- readonly popover: "hsl(154 26% 17%)";
129
+ readonly popover: "#16273F";
130
130
  readonly popoverFg: "#ffffff";
131
131
  readonly chart1: "#2BEE79";
132
132
  readonly chart2: "#F6C343";
133
133
  readonly chart3: "#F7931A";
134
134
  readonly chart4: "#7C3AED";
135
135
  readonly chart5: "#DD352E";
136
- readonly semanticBackground: "hsl(156 32% 12%)";
137
- readonly semanticBorder: "hsl(150 20% 24%)";
136
+ readonly semanticBackground: "#0F1C33";
137
+ readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
138
138
  };
139
139
 
140
140
  /**
package/dist/tokens/index.d.ts CHANGED
@@ -31,7 +31,7 @@ declare const lightSemanticColors: {
31
31
  declare const colors: {
32
32
  readonly textPrimary: "#ffffff";
33
33
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
34
- readonly textMuted: "hsl(150 20% 24%)";
34
+ readonly textMuted: "rgba(255, 255, 255, 0.10)";
35
35
  readonly textDimmed: "#2BEE79";
36
36
  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
37
37
  readonly success: "#2BEE79";
@@ -110,31 +110,31 @@ declare const colors: {
110
110
  readonly receive: "#2BEE79";
111
111
  readonly swap: "#4290FF";
112
112
  };
113
- readonly background: "hsl(158 58% 7%)";
113
+ readonly background: "#0A1326";
114
114
  readonly foreground: "#ffffff";
115
- readonly border: "hsl(150 20% 24%)";
115
+ readonly border: "rgba(255, 255, 255, 0.10)";
116
116
  readonly input: "rgba(255, 255, 255, 0.15)";
117
117
  readonly destructive: "hsl(0 62% 50%)";
118
- readonly secondary: "hsl(154 26% 17%)";
118
+ readonly secondary: "#16273F";
119
119
  readonly secondaryFg: "#ffffff";
120
- readonly muted: "hsl(156 32% 12%)";
120
+ readonly muted: "#0F1C33";
121
121
  readonly mutedFg: "rgba(255, 255, 255, 0.55)";
122
122
  readonly primary: "#2BEE79";
123
123
  readonly primaryFg: "#051B10";
124
- readonly accent: "hsl(154 26% 17%)";
124
+ readonly accent: "#16273F";
125
125
  readonly accentFg: "#ffffff";
126
126
  readonly ring: "#2BEE79";
127
- readonly card: "hsl(156 32% 12%)";
127
+ readonly card: "#0F1C33";
128
128
  readonly cardFg: "#ffffff";
129
- readonly popover: "hsl(154 26% 17%)";
129
+ readonly popover: "#16273F";
130
130
  readonly popoverFg: "#ffffff";
131
131
  readonly chart1: "#2BEE79";
132
132
  readonly chart2: "#F6C343";
133
133
  readonly chart3: "#F7931A";
134
134
  readonly chart4: "#7C3AED";
135
135
  readonly chart5: "#DD352E";
136
- readonly semanticBackground: "hsl(156 32% 12%)";
137
- readonly semanticBorder: "hsl(150 20% 24%)";
136
+ readonly semanticBackground: "#0F1C33";
137
+ readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
138
138
  };
139
139
 
140
140
  /**
package/dist/tokens/index.js CHANGED
@@ -25,31 +25,31 @@ var lightSemanticColors = {
25
25
  chart5: "#DD352E"
26
26
  };
27
27
  var darkSemanticColors = {
28
- background: "hsl(158 58% 7%)",
28
+ background: "#0A1326",
29
29
  foreground: "#ffffff",
30
- border: "hsl(150 20% 24%)",
30
+ border: "rgba(255, 255, 255, 0.10)",
31
31
  input: "rgba(255, 255, 255, 0.15)",
32
32
  destructive: "hsl(0 62% 50%)",
33
- secondary: "hsl(154 26% 17%)",
33
+ secondary: "#16273F",
34
34
  secondaryFg: "#ffffff",
35
- muted: "hsl(156 32% 12%)",
35
+ muted: "#0F1C33",
36
36
  mutedFg: "rgba(255, 255, 255, 0.55)",
37
37
  primary: "#2BEE79",
38
38
  primaryFg: "#051B10",
39
- accent: "hsl(154 26% 17%)",
39
+ accent: "#16273F",
40
40
  accentFg: "#ffffff",
41
41
  ring: "#2BEE79",
42
- card: "hsl(156 32% 12%)",
42
+ card: "#0F1C33",
43
43
  cardFg: "#ffffff",
44
- popover: "hsl(154 26% 17%)",
44
+ popover: "#16273F",
45
45
  popoverFg: "#ffffff",
46
46
  chart1: "#2BEE79",
47
47
  chart2: "#F6C343",
48
48
  chart3: "#F7931A",
49
49
  chart4: "#7C3AED",
50
50
  chart5: "#DD352E",
51
- semanticBackground: "hsl(156 32% 12%)",
52
- semanticBorder: "hsl(150 20% 24%)"
51
+ semanticBackground: "#0F1C33",
52
+ semanticBorder: "rgba(255, 255, 255, 0.10)"
53
53
  };
54
54
  var colors = {
55
55
  ...darkSemanticColors,
@@ -332,9 +332,10 @@ var NETWORK_GLYPH = {
332
332
  };
333
333
  var dark = {
334
334
  mode: "dark",
335
- background: "#0D1813",
336
- card: "#121C16",
337
- cardElevated: "#17231C",
335
+ // Dark-blue surface family (navy derived from the brand info blue #4290FF).
336
+ background: "#0A1326",
337
+ card: "#0F1C33",
338
+ cardElevated: "#16273F",
338
339
  // Brand primary CTA green — per DESIGN.md `brand.primary`, identical to web.
339
340
  // (#15E99A is the decorative logo brandmark, kept only in gradientBrand / QR.)
340
341
  primary: "#2BEE79",
package/dist/web/index.cjs CHANGED
@@ -7138,31 +7138,31 @@ var import_react15 = require("react");
7138
7138
 
7139
7139
  // src/tokens/colors.ts
7140
7140
  var darkSemanticColors = {
7141
- background: "hsl(158 58% 7%)",
7141
+ background: "#0A1326",
7142
7142
  foreground: "#ffffff",
7143
- border: "hsl(150 20% 24%)",
7143
+ border: "rgba(255, 255, 255, 0.10)",
7144
7144
  input: "rgba(255, 255, 255, 0.15)",
7145
7145
  destructive: "hsl(0 62% 50%)",
7146
- secondary: "hsl(154 26% 17%)",
7146
+ secondary: "#16273F",
7147
7147
  secondaryFg: "#ffffff",
7148
- muted: "hsl(156 32% 12%)",
7148
+ muted: "#0F1C33",
7149
7149
  mutedFg: "rgba(255, 255, 255, 0.55)",
7150
7150
  primary: "#2BEE79",
7151
7151
  primaryFg: "#051B10",
7152
- accent: "hsl(154 26% 17%)",
7152
+ accent: "#16273F",
7153
7153
  accentFg: "#ffffff",
7154
7154
  ring: "#2BEE79",
7155
- card: "hsl(156 32% 12%)",
7155
+ card: "#0F1C33",
7156
7156
  cardFg: "#ffffff",
7157
- popover: "hsl(154 26% 17%)",
7157
+ popover: "#16273F",
7158
7158
  popoverFg: "#ffffff",
7159
7159
  chart1: "#2BEE79",
7160
7160
  chart2: "#F6C343",
7161
7161
  chart3: "#F7931A",
7162
7162
  chart4: "#7C3AED",
7163
7163
  chart5: "#DD352E",
7164
- semanticBackground: "hsl(156 32% 12%)",
7165
- semanticBorder: "hsl(150 20% 24%)"
7164
+ semanticBackground: "#0F1C33",
7165
+ semanticBorder: "rgba(255, 255, 255, 0.10)"
7166
7166
  };
7167
7167
  var colors = {
7168
7168
  ...darkSemanticColors,
package/dist/web/index.js CHANGED
@@ -6961,31 +6961,31 @@ import { useState as useState14 } from "react";
6961
6961
 
6962
6962
  // src/tokens/colors.ts
6963
6963
  var darkSemanticColors = {
6964
- background: "hsl(158 58% 7%)",
6964
+ background: "#0A1326",
6965
6965
  foreground: "#ffffff",
6966
- border: "hsl(150 20% 24%)",
6966
+ border: "rgba(255, 255, 255, 0.10)",
6967
6967
  input: "rgba(255, 255, 255, 0.15)",
6968
6968
  destructive: "hsl(0 62% 50%)",
6969
- secondary: "hsl(154 26% 17%)",
6969
+ secondary: "#16273F",
6970
6970
  secondaryFg: "#ffffff",
6971
- muted: "hsl(156 32% 12%)",
6971
+ muted: "#0F1C33",
6972
6972
  mutedFg: "rgba(255, 255, 255, 0.55)",
6973
6973
  primary: "#2BEE79",
6974
6974
  primaryFg: "#051B10",
6975
- accent: "hsl(154 26% 17%)",
6975
+ accent: "#16273F",
6976
6976
  accentFg: "#ffffff",
6977
6977
  ring: "#2BEE79",
6978
- card: "hsl(156 32% 12%)",
6978
+ card: "#0F1C33",
6979
6979
  cardFg: "#ffffff",
6980
- popover: "hsl(154 26% 17%)",
6980
+ popover: "#16273F",
6981
6981
  popoverFg: "#ffffff",
6982
6982
  chart1: "#2BEE79",
6983
6983
  chart2: "#F6C343",
6984
6984
  chart3: "#F7931A",
6985
6985
  chart4: "#7C3AED",
6986
6986
  chart5: "#DD352E",
6987
- semanticBackground: "hsl(156 32% 12%)",
6988
- semanticBorder: "hsl(150 20% 24%)"
6987
+ semanticBackground: "#0F1C33",
6988
+ semanticBorder: "rgba(255, 255, 255, 0.10)"
6989
6989
  };
6990
6990
  var colors = {
6991
6991
  ...darkSemanticColors,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.55",
3
+ "version": "0.1.57",
4
4
  "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
5
5
  "license": "MIT",
6
6
  "type": "module",