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/dist/native/index.js CHANGED
@@ -3,30 +3,37 @@ import { ThemeProvider } from "@tetherto/wdk-uikit-react-native";
3
3
 
4
4
  // src/tokens/colors.ts
5
5
  var darkSemanticColors = {
6
- background: "#0A1326",
7
- foreground: "#ffffff",
6
+ background: "#12131C",
7
+ // surface-base (deepest)
8
+ foreground: "#E8E9F2",
9
+ // content-primary (cool white)
8
10
  border: "rgba(255, 255, 255, 0.10)",
9
11
  input: "rgba(255, 255, 255, 0.15)",
10
12
  destructive: "hsl(0 62% 50%)",
11
13
  secondary: "#16273F",
12
- secondaryFg: "#ffffff",
13
- muted: "#0F1C33",
14
+ // neutral surface (bg-secondary utility is brand violet via app token)
15
+ secondaryFg: "#E8E9F2",
16
+ muted: "#181924",
17
+ // surface-raised
14
18
  mutedFg: "rgba(255, 255, 255, 0.55)",
15
- primary: "#2BEE79",
16
- primaryFg: "#051B10",
17
- accent: "#16273F",
18
- accentFg: "#ffffff",
19
- ring: "#2BEE79",
20
- card: "#0F1C33",
21
- cardFg: "#ffffff",
22
- popover: "#16273F",
23
- popoverFg: "#ffffff",
19
+ primary: "#15E99A",
20
+ // brand green (dark)
21
+ primaryFg: "#12131C",
22
+ accent: "#323448",
23
+ // surface-elevated
24
+ accentFg: "#E8E9F2",
25
+ ring: "#15E99A",
26
+ card: "#242638",
27
+ // surface-overlay (card)
28
+ cardFg: "#E8E9F2",
29
+ popover: "#242638",
30
+ popoverFg: "#E8E9F2",
24
31
  chart1: "#2BEE79",
25
32
  chart2: "#F6C343",
26
33
  chart3: "#F7931A",
27
34
  chart4: "#7C3AED",
28
35
  chart5: "#DD352E",
29
- semanticBackground: "#0F1C33",
36
+ semanticBackground: "#242638",
30
37
  semanticBorder: "rgba(255, 255, 255, 0.10)"
31
38
  };
32
39
  var colors = {
@@ -1163,6 +1170,49 @@ function ModeToggle({ icon, size = 40, onToggle }) {
1163
1170
  );
1164
1171
  }
1165
1172
 
1173
+ // src/tokens/app-semantic.ts
1174
+ var appSemanticDark = {
1175
+ // Body is notably darker than cards — clear depth without full-black.
1176
+ "surface-base": "18 19 28",
1177
+ // #12131C — deepest bg, sidebar
1178
+ "surface-raised": "24 25 36",
1179
+ // #181924 — page body bg
1180
+ "surface-overlay": "36 38 56",
1181
+ // #242638 — card bg (~14 lighter than body)
1182
+ "surface-elevated": "50 52 72",
1183
+ // #323448 — sections inside cards
1184
+ "surface-high": "66 68 90",
1185
+ // #42445A — hover/active highlights
1186
+ primary: "21 233 154",
1187
+ // #15E99A
1188
+ "primary-emphasis": "18 201 126",
1189
+ // #12C97E
1190
+ "primary-foreground": "18 19 28",
1191
+ secondary: "139 92 246",
1192
+ // #8B5CF6
1193
+ "secondary-emphasis": "124 58 237",
1194
+ "secondary-foreground": "255 255 255",
1195
+ "content-primary": "232 233 242",
1196
+ // #E8E9F2 — slightly cool white
1197
+ "content-secondary": "142 146 172",
1198
+ // #8E92AC
1199
+ "content-tertiary": "88 92 116",
1200
+ // #585C74
1201
+ "content-inverse": "18 19 28",
1202
+ "border-subtle": "40 42 60",
1203
+ // #282A3C
1204
+ "border-default": "54 56 76",
1205
+ // #36384C
1206
+ "border-strong": "21 233 154",
1207
+ "status-success": "34 197 94",
1208
+ "status-danger": "248 113 113",
1209
+ "status-warning": "245 158 11",
1210
+ "status-info": "56 189 248",
1211
+ divider: "86 89 108"
1212
+ // #56596C
1213
+ };
1214
+ var appSemanticOrder = Object.keys(appSemanticDark);
1215
+
1166
1216
  // src/tokens/typography.ts
1167
1217
  var fontFamily = {
1168
1218
  display: "'Satoshi', system-ui, -apple-system, sans-serif",
package/dist/tokens/index.cjs CHANGED
@@ -21,6 +21,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
21
  var tokens_exports = {};
22
22
  __export(tokens_exports, {
23
23
  animation: () => animation,
24
+ appSemanticDark: () => appSemanticDark,
25
+ appSemanticLight: () => appSemanticLight,
26
+ appSemanticOrder: () => appSemanticOrder,
27
+ appStatusSubtleAlpha: () => appStatusSubtleAlpha,
24
28
  colors: () => colors,
25
29
  fontFamily: () => fontFamily,
26
30
  fontWeight: () => fontWeight,
@@ -44,24 +48,33 @@ module.exports = __toCommonJS(tokens_exports);
44
48
 
45
49
  // src/tokens/colors.ts
46
50
  var lightSemanticColors = {
47
- background: "#ffffff",
48
- foreground: "#0a0a0a",
49
- card: "#ffffff",
50
- cardFg: "#0a0a0a",
51
- popover: "#ffffff",
52
- popoverFg: "#0a0a0a",
53
- primary: "#171717",
54
- primaryFg: "#fafafa",
55
- secondary: "#f5f5f5",
56
- secondaryFg: "#171717",
57
- muted: "#f5f5f5",
58
- mutedFg: "#737373",
59
- accent: "#f5f5f5",
60
- accentFg: "#171717",
51
+ background: "#EAECF8",
52
+ // surface-raised (light page body)
53
+ foreground: "#12131E",
54
+ // content-primary
55
+ card: "#FFFFFF",
56
+ // surface-overlay
57
+ cardFg: "#12131E",
58
+ popover: "#FFFFFF",
59
+ popoverFg: "#12131E",
60
+ primary: "#17B581",
61
+ // brand green (light)
62
+ primaryFg: "#FFFFFF",
63
+ secondary: "#E4E6F6",
64
+ // neutral surface (bg-secondary utility is brand violet via app token)
65
+ secondaryFg: "#12131E",
66
+ muted: "#F6F7FD",
67
+ // surface-elevated
68
+ mutedFg: "#464A69",
69
+ // content-secondary
70
+ accent: "#E4E6F6",
71
+ // surface-high
72
+ accentFg: "#12131E",
61
73
  destructive: "#e7000b",
62
- border: "#e5e5e5",
63
- input: "#e5e5e5",
64
- ring: "#a1a1a1",
74
+ border: "#C8CBE0",
75
+ // border-default
76
+ input: "#C8CBE0",
77
+ ring: "#17B581",
65
78
  chart1: "#2BEE79",
66
79
  chart2: "#F6C343",
67
80
  chart3: "#F7931A",
@@ -69,30 +82,37 @@ var lightSemanticColors = {
69
82
  chart5: "#DD352E"
70
83
  };
71
84
  var darkSemanticColors = {
72
- background: "#0A1326",
73
- foreground: "#ffffff",
85
+ background: "#12131C",
86
+ // surface-base (deepest)
87
+ foreground: "#E8E9F2",
88
+ // content-primary (cool white)
74
89
  border: "rgba(255, 255, 255, 0.10)",
75
90
  input: "rgba(255, 255, 255, 0.15)",
76
91
  destructive: "hsl(0 62% 50%)",
77
92
  secondary: "#16273F",
78
- secondaryFg: "#ffffff",
79
- muted: "#0F1C33",
93
+ // neutral surface (bg-secondary utility is brand violet via app token)
94
+ secondaryFg: "#E8E9F2",
95
+ muted: "#181924",
96
+ // surface-raised
80
97
  mutedFg: "rgba(255, 255, 255, 0.55)",
81
- primary: "#2BEE79",
82
- primaryFg: "#051B10",
83
- accent: "#16273F",
84
- accentFg: "#ffffff",
85
- ring: "#2BEE79",
86
- card: "#0F1C33",
87
- cardFg: "#ffffff",
88
- popover: "#16273F",
89
- popoverFg: "#ffffff",
98
+ primary: "#15E99A",
99
+ // brand green (dark)
100
+ primaryFg: "#12131C",
101
+ accent: "#323448",
102
+ // surface-elevated
103
+ accentFg: "#E8E9F2",
104
+ ring: "#15E99A",
105
+ card: "#242638",
106
+ // surface-overlay (card)
107
+ cardFg: "#E8E9F2",
108
+ popover: "#242638",
109
+ popoverFg: "#E8E9F2",
90
110
  chart1: "#2BEE79",
91
111
  chart2: "#F6C343",
92
112
  chart3: "#F7931A",
93
113
  chart4: "#7C3AED",
94
114
  chart5: "#DD352E",
95
- semanticBackground: "#0F1C33",
115
+ semanticBackground: "#242638",
96
116
  semanticBorder: "rgba(255, 255, 255, 0.10)"
97
117
  };
98
118
  var colors = {
@@ -180,6 +200,91 @@ var colors = {
180
200
  }
181
201
  };
182
202
 
203
+ // src/tokens/app-semantic.ts
204
+ var appSemanticDark = {
205
+ // Body is notably darker than cards — clear depth without full-black.
206
+ "surface-base": "18 19 28",
207
+ // #12131C — deepest bg, sidebar
208
+ "surface-raised": "24 25 36",
209
+ // #181924 — page body bg
210
+ "surface-overlay": "36 38 56",
211
+ // #242638 — card bg (~14 lighter than body)
212
+ "surface-elevated": "50 52 72",
213
+ // #323448 — sections inside cards
214
+ "surface-high": "66 68 90",
215
+ // #42445A — hover/active highlights
216
+ primary: "21 233 154",
217
+ // #15E99A
218
+ "primary-emphasis": "18 201 126",
219
+ // #12C97E
220
+ "primary-foreground": "18 19 28",
221
+ secondary: "139 92 246",
222
+ // #8B5CF6
223
+ "secondary-emphasis": "124 58 237",
224
+ "secondary-foreground": "255 255 255",
225
+ "content-primary": "232 233 242",
226
+ // #E8E9F2 — slightly cool white
227
+ "content-secondary": "142 146 172",
228
+ // #8E92AC
229
+ "content-tertiary": "88 92 116",
230
+ // #585C74
231
+ "content-inverse": "18 19 28",
232
+ "border-subtle": "40 42 60",
233
+ // #282A3C
234
+ "border-default": "54 56 76",
235
+ // #36384C
236
+ "border-strong": "21 233 154",
237
+ "status-success": "34 197 94",
238
+ "status-danger": "248 113 113",
239
+ "status-warning": "245 158 11",
240
+ "status-info": "56 189 248",
241
+ divider: "86 89 108"
242
+ // #56596C
243
+ };
244
+ var appSemanticLight = {
245
+ // Cards = white on a cool-gray page for clear depth.
246
+ "surface-base": "218 220 234",
247
+ // #DADCEA — sidebar/deep backgrounds
248
+ "surface-raised": "234 236 248",
249
+ // #EAECF8 — page body bg
250
+ "surface-overlay": "255 255 255",
251
+ // #FFFFFF — card bg (white)
252
+ "surface-elevated": "246 247 253",
253
+ // #F6F7FD — sections inside cards
254
+ "surface-high": "228 230 246",
255
+ // #E4E6F6 — hover/active highlights
256
+ primary: "23 181 129",
257
+ // #17B581
258
+ "primary-emphasis": "19 138 100",
259
+ // #138A64
260
+ "primary-foreground": "255 255 255",
261
+ secondary: "111 50 255",
262
+ // #6F32FF
263
+ "secondary-emphasis": "90 31 229",
264
+ // #5A1FE5
265
+ "secondary-foreground": "255 255 255",
266
+ "content-primary": "18 19 30",
267
+ // #12131E
268
+ "content-secondary": "70 74 105",
269
+ // #464A69
270
+ "content-tertiary": "118 122 152",
271
+ // #767A98
272
+ "content-inverse": "255 255 255",
273
+ "border-subtle": "218 220 238",
274
+ // #DADCEE
275
+ "border-default": "200 203 224",
276
+ // #C8CBE0
277
+ "border-strong": "23 181 129",
278
+ "status-success": "22 163 74",
279
+ "status-danger": "220 38 38",
280
+ "status-warning": "217 119 6",
281
+ "status-info": "2 132 199",
282
+ divider: "200 203 224"
283
+ // #C8CBE0
284
+ };
285
+ var appStatusSubtleAlpha = "0.15";
286
+ var appSemanticOrder = Object.keys(appSemanticDark);
287
+
183
288
  // src/tokens/typography.ts
184
289
  var fontFamily = {
185
290
  display: "'Satoshi', system-ui, -apple-system, sans-serif",
@@ -483,6 +588,10 @@ function makeTheme(mode) {
483
588
  // Annotate the CommonJS export names for ESM import in node:
484
589
  0 && (module.exports = {
485
590
  animation,
591
+ appSemanticDark,
592
+ appSemanticLight,
593
+ appSemanticOrder,
594
+ appStatusSubtleAlpha,
486
595
  colors,
487
596
  fontFamily,
488
597
  fontWeight,
package/dist/tokens/index.d.cts CHANGED
@@ -4,24 +4,24 @@
4
4
  * Single source of truth for all color constants across web and native.
5
5
  */
6
6
  declare const lightSemanticColors: {
7
- readonly background: "#ffffff";
8
- readonly foreground: "#0a0a0a";
9
- readonly card: "#ffffff";
10
- readonly cardFg: "#0a0a0a";
11
- readonly popover: "#ffffff";
12
- readonly popoverFg: "#0a0a0a";
13
- readonly primary: "#171717";
14
- readonly primaryFg: "#fafafa";
15
- readonly secondary: "#f5f5f5";
16
- readonly secondaryFg: "#171717";
17
- readonly muted: "#f5f5f5";
18
- readonly mutedFg: "#737373";
19
- readonly accent: "#f5f5f5";
20
- readonly accentFg: "#171717";
7
+ readonly background: "#EAECF8";
8
+ readonly foreground: "#12131E";
9
+ readonly card: "#FFFFFF";
10
+ readonly cardFg: "#12131E";
11
+ readonly popover: "#FFFFFF";
12
+ readonly popoverFg: "#12131E";
13
+ readonly primary: "#17B581";
14
+ readonly primaryFg: "#FFFFFF";
15
+ readonly secondary: "#E4E6F6";
16
+ readonly secondaryFg: "#12131E";
17
+ readonly muted: "#F6F7FD";
18
+ readonly mutedFg: "#464A69";
19
+ readonly accent: "#E4E6F6";
20
+ readonly accentFg: "#12131E";
21
21
  readonly destructive: "#e7000b";
22
- readonly border: "#e5e5e5";
23
- readonly input: "#e5e5e5";
24
- readonly ring: "#a1a1a1";
22
+ readonly border: "#C8CBE0";
23
+ readonly input: "#C8CBE0";
24
+ readonly ring: "#17B581";
25
25
  readonly chart1: "#2BEE79";
26
26
  readonly chart2: "#F6C343";
27
27
  readonly chart3: "#F7931A";
@@ -29,12 +29,12 @@ declare const lightSemanticColors: {
29
29
  readonly chart5: "#DD352E";
30
30
  };
31
31
  declare const colors: {
32
- readonly textPrimary: "#ffffff";
32
+ readonly textPrimary: "#E8E9F2";
33
33
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
34
34
  readonly textMuted: "rgba(255, 255, 255, 0.10)";
35
- readonly textDimmed: "#2BEE79";
35
+ readonly textDimmed: "#15E99A";
36
36
  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
37
- readonly success: "#2BEE79";
37
+ readonly success: "#15E99A";
38
38
  readonly warning: "#FACC15";
39
39
  readonly danger: "#F94040";
40
40
  readonly info: "#4290FF";
@@ -110,33 +110,64 @@ declare const colors: {
110
110
  readonly receive: "#2BEE79";
111
111
  readonly swap: "#4290FF";
112
112
  };
113
- readonly background: "#0A1326";
114
- readonly foreground: "#ffffff";
113
+ readonly background: "#12131C";
114
+ readonly foreground: "#E8E9F2";
115
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
118
  readonly secondary: "#16273F";
119
- readonly secondaryFg: "#ffffff";
120
- readonly muted: "#0F1C33";
119
+ readonly secondaryFg: "#E8E9F2";
120
+ readonly muted: "#181924";
121
121
  readonly mutedFg: "rgba(255, 255, 255, 0.55)";
122
- readonly primary: "#2BEE79";
123
- readonly primaryFg: "#051B10";
124
- readonly accent: "#16273F";
125
- readonly accentFg: "#ffffff";
126
- readonly ring: "#2BEE79";
127
- readonly card: "#0F1C33";
128
- readonly cardFg: "#ffffff";
129
- readonly popover: "#16273F";
130
- readonly popoverFg: "#ffffff";
122
+ readonly primary: "#15E99A";
123
+ readonly primaryFg: "#12131C";
124
+ readonly accent: "#323448";
125
+ readonly accentFg: "#E8E9F2";
126
+ readonly ring: "#15E99A";
127
+ readonly card: "#242638";
128
+ readonly cardFg: "#E8E9F2";
129
+ readonly popover: "#242638";
130
+ readonly popoverFg: "#E8E9F2";
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: "#0F1C33";
136
+ readonly semanticBackground: "#242638";
137
137
  readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
138
138
  };
139
139
 
140
+ /**
141
+ * KaleidoSwap App Semantic Color System (slate identity)
142
+ *
143
+ * The canonical, mode-switchable semantic palette shared across KaleidoSwap
144
+ * surfaces. Values are stored as space-separated RGB channels ("R G B") so the
145
+ * generated CSS can expose them through Tailwind utilities with full
146
+ * `<alpha-value>` opacity support (e.g. `bg-surface-overlay`, `text-content-primary/60`,
147
+ * `bg-status-danger/10`) that composites identically to straight rgba() alpha.
148
+ *
149
+ * Dark is the brand default ("dark backgrounds anchor everything"); light is a
150
+ * fully-specified counterpart. The CSS generator emits dark under `:root, .dark`
151
+ * and light under `.light` to match the runtime convention (a single
152
+ * `.dark` / `.light` class is toggled on the document root).
153
+ *
154
+ * These channels live in the `--app-*` CSS-variable namespace so they never
155
+ * collide with the component-facing full-color vars (`--primary`, `--card`,
156
+ * `--background`, …) that web components consume via raw `var()` references.
157
+ */
158
+ /** Ordered token keys → CSS-variable suffix. Drives both the `--app-*`
159
+ * declarations and the `@theme inline` utility mappings. */
160
+ type AppSemanticToken = 'surface-base' | 'surface-raised' | 'surface-overlay' | 'surface-elevated' | 'surface-high' | 'primary' | 'primary-emphasis' | 'primary-foreground' | 'secondary' | 'secondary-emphasis' | 'secondary-foreground' | 'content-primary' | 'content-secondary' | 'content-tertiary' | 'content-inverse' | 'border-subtle' | 'border-default' | 'border-strong' | 'status-success' | 'status-danger' | 'status-warning' | 'status-info' | 'divider';
161
+ type AppSemanticChannels = Record<AppSemanticToken, string>;
162
+ /** Dark mode — emitted under `:root, .dark`. */
163
+ declare const appSemanticDark: AppSemanticChannels;
164
+ /** Light mode — emitted under `.light`. */
165
+ declare const appSemanticLight: AppSemanticChannels;
166
+ /** Fixed-alpha tinted intent surfaces (e.g. `bg-status-danger-subtle`). */
167
+ declare const appStatusSubtleAlpha = "0.15";
168
+ /** Token keys in the order they should be emitted. */
169
+ declare const appSemanticOrder: AppSemanticToken[];
170
+
140
171
  /**
141
172
  * KaleidoSwap Typography Tokens
142
173
  */
@@ -521,4 +552,4 @@ declare const themes: Record<ThemeMode, KaleidoTheme>;
521
552
  /** Resolve the full palette for a mode. */
522
553
  declare function makeTheme(mode: ThemeMode): KaleidoTheme;
523
554
 
524
- export { type KaleidoTheme, type NativeTypeLevel, type ThemeMode, animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, makeTheme, nativeType, radius, shadow, sizing, themes, transition, typeScale };
555
+ export { type AppSemanticToken, type KaleidoTheme, type NativeTypeLevel, type ThemeMode, animation, appSemanticDark, appSemanticLight, appSemanticOrder, appStatusSubtleAlpha, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, makeTheme, nativeType, radius, shadow, sizing, themes, transition, typeScale };
package/dist/tokens/index.d.ts CHANGED
@@ -4,24 +4,24 @@
4
4
  * Single source of truth for all color constants across web and native.
5
5
  */
6
6
  declare const lightSemanticColors: {
7
- readonly background: "#ffffff";
8
- readonly foreground: "#0a0a0a";
9
- readonly card: "#ffffff";
10
- readonly cardFg: "#0a0a0a";
11
- readonly popover: "#ffffff";
12
- readonly popoverFg: "#0a0a0a";
13
- readonly primary: "#171717";
14
- readonly primaryFg: "#fafafa";
15
- readonly secondary: "#f5f5f5";
16
- readonly secondaryFg: "#171717";
17
- readonly muted: "#f5f5f5";
18
- readonly mutedFg: "#737373";
19
- readonly accent: "#f5f5f5";
20
- readonly accentFg: "#171717";
7
+ readonly background: "#EAECF8";
8
+ readonly foreground: "#12131E";
9
+ readonly card: "#FFFFFF";
10
+ readonly cardFg: "#12131E";
11
+ readonly popover: "#FFFFFF";
12
+ readonly popoverFg: "#12131E";
13
+ readonly primary: "#17B581";
14
+ readonly primaryFg: "#FFFFFF";
15
+ readonly secondary: "#E4E6F6";
16
+ readonly secondaryFg: "#12131E";
17
+ readonly muted: "#F6F7FD";
18
+ readonly mutedFg: "#464A69";
19
+ readonly accent: "#E4E6F6";
20
+ readonly accentFg: "#12131E";
21
21
  readonly destructive: "#e7000b";
22
- readonly border: "#e5e5e5";
23
- readonly input: "#e5e5e5";
24
- readonly ring: "#a1a1a1";
22
+ readonly border: "#C8CBE0";
23
+ readonly input: "#C8CBE0";
24
+ readonly ring: "#17B581";
25
25
  readonly chart1: "#2BEE79";
26
26
  readonly chart2: "#F6C343";
27
27
  readonly chart3: "#F7931A";
@@ -29,12 +29,12 @@ declare const lightSemanticColors: {
29
29
  readonly chart5: "#DD352E";
30
30
  };
31
31
  declare const colors: {
32
- readonly textPrimary: "#ffffff";
32
+ readonly textPrimary: "#E8E9F2";
33
33
  readonly textSecondary: "rgba(255, 255, 255, 0.55)";
34
34
  readonly textMuted: "rgba(255, 255, 255, 0.10)";
35
- readonly textDimmed: "#2BEE79";
35
+ readonly textDimmed: "#15E99A";
36
36
  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
37
- readonly success: "#2BEE79";
37
+ readonly success: "#15E99A";
38
38
  readonly warning: "#FACC15";
39
39
  readonly danger: "#F94040";
40
40
  readonly info: "#4290FF";
@@ -110,33 +110,64 @@ declare const colors: {
110
110
  readonly receive: "#2BEE79";
111
111
  readonly swap: "#4290FF";
112
112
  };
113
- readonly background: "#0A1326";
114
- readonly foreground: "#ffffff";
113
+ readonly background: "#12131C";
114
+ readonly foreground: "#E8E9F2";
115
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
118
  readonly secondary: "#16273F";
119
- readonly secondaryFg: "#ffffff";
120
- readonly muted: "#0F1C33";
119
+ readonly secondaryFg: "#E8E9F2";
120
+ readonly muted: "#181924";
121
121
  readonly mutedFg: "rgba(255, 255, 255, 0.55)";
122
- readonly primary: "#2BEE79";
123
- readonly primaryFg: "#051B10";
124
- readonly accent: "#16273F";
125
- readonly accentFg: "#ffffff";
126
- readonly ring: "#2BEE79";
127
- readonly card: "#0F1C33";
128
- readonly cardFg: "#ffffff";
129
- readonly popover: "#16273F";
130
- readonly popoverFg: "#ffffff";
122
+ readonly primary: "#15E99A";
123
+ readonly primaryFg: "#12131C";
124
+ readonly accent: "#323448";
125
+ readonly accentFg: "#E8E9F2";
126
+ readonly ring: "#15E99A";
127
+ readonly card: "#242638";
128
+ readonly cardFg: "#E8E9F2";
129
+ readonly popover: "#242638";
130
+ readonly popoverFg: "#E8E9F2";
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: "#0F1C33";
136
+ readonly semanticBackground: "#242638";
137
137
  readonly semanticBorder: "rgba(255, 255, 255, 0.10)";
138
138
  };
139
139
 
140
+ /**
141
+ * KaleidoSwap App Semantic Color System (slate identity)
142
+ *
143
+ * The canonical, mode-switchable semantic palette shared across KaleidoSwap
144
+ * surfaces. Values are stored as space-separated RGB channels ("R G B") so the
145
+ * generated CSS can expose them through Tailwind utilities with full
146
+ * `<alpha-value>` opacity support (e.g. `bg-surface-overlay`, `text-content-primary/60`,
147
+ * `bg-status-danger/10`) that composites identically to straight rgba() alpha.
148
+ *
149
+ * Dark is the brand default ("dark backgrounds anchor everything"); light is a
150
+ * fully-specified counterpart. The CSS generator emits dark under `:root, .dark`
151
+ * and light under `.light` to match the runtime convention (a single
152
+ * `.dark` / `.light` class is toggled on the document root).
153
+ *
154
+ * These channels live in the `--app-*` CSS-variable namespace so they never
155
+ * collide with the component-facing full-color vars (`--primary`, `--card`,
156
+ * `--background`, …) that web components consume via raw `var()` references.
157
+ */
158
+ /** Ordered token keys → CSS-variable suffix. Drives both the `--app-*`
159
+ * declarations and the `@theme inline` utility mappings. */
160
+ type AppSemanticToken = 'surface-base' | 'surface-raised' | 'surface-overlay' | 'surface-elevated' | 'surface-high' | 'primary' | 'primary-emphasis' | 'primary-foreground' | 'secondary' | 'secondary-emphasis' | 'secondary-foreground' | 'content-primary' | 'content-secondary' | 'content-tertiary' | 'content-inverse' | 'border-subtle' | 'border-default' | 'border-strong' | 'status-success' | 'status-danger' | 'status-warning' | 'status-info' | 'divider';
161
+ type AppSemanticChannels = Record<AppSemanticToken, string>;
162
+ /** Dark mode — emitted under `:root, .dark`. */
163
+ declare const appSemanticDark: AppSemanticChannels;
164
+ /** Light mode — emitted under `.light`. */
165
+ declare const appSemanticLight: AppSemanticChannels;
166
+ /** Fixed-alpha tinted intent surfaces (e.g. `bg-status-danger-subtle`). */
167
+ declare const appStatusSubtleAlpha = "0.15";
168
+ /** Token keys in the order they should be emitted. */
169
+ declare const appSemanticOrder: AppSemanticToken[];
170
+
140
171
  /**
141
172
  * KaleidoSwap Typography Tokens
142
173
  */
@@ -521,4 +552,4 @@ declare const themes: Record<ThemeMode, KaleidoTheme>;
521
552
  /** Resolve the full palette for a mode. */
522
553
  declare function makeTheme(mode: ThemeMode): KaleidoTheme;
523
554
 
524
- export { type KaleidoTheme, type NativeTypeLevel, type ThemeMode, animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, makeTheme, nativeType, radius, shadow, sizing, themes, transition, typeScale };
555
+ export { type AppSemanticToken, type KaleidoTheme, type NativeTypeLevel, type ThemeMode, animation, appSemanticDark, appSemanticLight, appSemanticOrder, appStatusSubtleAlpha, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, layer, letterSpacing, lightSemanticColors, makeTheme, nativeType, radius, shadow, sizing, themes, transition, typeScale };