@xsolla/xui-core 0.100.0 → 0.101.0-pr167.1772008285

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 (9) hide show
  1. package/README.md +15 -3
  2. package/index.d.mts +3412 -614
  3. package/index.d.ts +3412 -614
  4. package/index.js +1332 -444
  5. package/index.js.flow +3257 -406
  6. package/index.js.map +1 -1
  7. package/index.mjs +1332 -444
  8. package/index.mjs.map +1 -1
  9. package/package.json +1 -1
package/index.mjs CHANGED
@@ -4,32 +4,32 @@ import React, { createContext, useContext, useState, useMemo } from "react";
4
4
  // src/tokens/xsolla-dark.json
5
5
  var xsolla_dark_default = {
6
6
  background: {
7
- primary: "#202a2c",
8
- secondary: "#151c1e",
7
+ primary: "#1b2628",
8
+ secondary: "#141d1f",
9
9
  inverse: "#ffffff",
10
10
  brand: {
11
- primary: "#66e6ff",
12
- secondary: "#00aacc"
11
+ primary: "#80eaff",
12
+ secondary: "#0b3841"
13
13
  },
14
14
  brandExtra: {
15
- primary: "#d9ff66",
16
- secondary: "#bfff00"
15
+ primary: "#cef655",
16
+ secondary: "#566c13"
17
17
  },
18
18
  success: {
19
- primary: "#80ffb5",
20
- secondary: "#33ff88"
19
+ primary: "#95ff80",
20
+ secondary: "#14410b"
21
21
  },
22
22
  warning: {
23
- primary: "#ffee99",
24
- secondary: "#ffdd33"
23
+ primary: "#ffc380",
24
+ secondary: "#6c4313"
25
25
  },
26
26
  alert: {
27
- primary: "#ff8066",
28
- secondary: "#ff5533"
27
+ primary: "#e84f30",
28
+ secondary: "#6c2213"
29
29
  },
30
30
  neutral: {
31
- primary: "#aa99ff",
32
- secondary: "#5533ff"
31
+ primary: "#99aeb2",
32
+ secondary: "#34474b"
33
33
  }
34
34
  },
35
35
  content: {
@@ -38,28 +38,28 @@ var xsolla_dark_default = {
38
38
  tertiary: "rgba(255, 255, 255, 0.58)",
39
39
  inverse: "#000000",
40
40
  brand: {
41
- primary: "#66e6ff",
42
- secondary: "#00d4ff"
41
+ primary: "#55dcf6",
42
+ secondary: "#31cae8"
43
43
  },
44
44
  brandExtra: {
45
- primary: "#d9ff66",
46
- secondary: "#bfff00"
45
+ primary: "#cef655",
46
+ secondary: "#9bc323"
47
47
  },
48
48
  success: {
49
- primary: "#66ffa6",
50
- secondary: "#00ff6a"
49
+ primary: "#70f655",
50
+ secondary: "#3dc322"
51
51
  },
52
52
  warning: {
53
- primary: "#ffe566",
54
- secondary: "#ffd400"
53
+ primary: "#f6ab55",
54
+ secondary: "#c37822"
55
55
  },
56
56
  alert: {
57
- primary: "#ff8066",
58
- secondary: "#ff2b00"
57
+ primary: "#f67055",
58
+ secondary: "#e84f30"
59
59
  },
60
60
  neutral: {
61
- primary: "#aa99ff",
62
- secondary: "#8066ff"
61
+ primary: "#99aeb2",
62
+ secondary: "#607f85"
63
63
  },
64
64
  on: {
65
65
  brand: "#000000",
@@ -78,330 +78,1178 @@ var xsolla_dark_default = {
78
78
  primary: "#ffffff",
79
79
  secondary: "rgba(255, 255, 255, 0.16)",
80
80
  inverse: "rgba(0, 0, 0, 0.15)",
81
- brand: "#66e6ff",
82
- brandExtra: "#d9ff66",
83
- success: "#66ffa6",
84
- warning: "#ffe566",
85
- alert: "#ff8066",
86
- neutral: "#aa99ff"
81
+ brand: "#55dcf6",
82
+ brandExtra: "#cef655",
83
+ success: "#70f655",
84
+ warning: "#f6ab55",
85
+ alert: "#f67055",
86
+ neutral: "#9580ff"
87
87
  },
88
88
  overlay: {
89
89
  mono: "rgba(255, 255, 255, 0.1)",
90
- brand: "rgba(102, 230, 255, 0.3)",
91
- brandExtra: "rgba(217, 255, 102, 0.3)",
92
- success: "rgba(0, 255, 106, 0.3)",
93
- warning: "rgba(255, 221, 51, 0.3)",
94
- alert: "rgba(255, 85, 51, 0.3)",
95
- neutral: "rgba(128, 102, 255, 0.3)"
90
+ brand: "rgba(128, 234, 255, 0.2)",
91
+ brandExtra: "rgba(206, 246, 85, 0.3)",
92
+ success: "rgba(149, 255, 128, 0.2)",
93
+ warning: "rgba(255, 195, 128, 0.24)",
94
+ alert: "rgba(232, 79, 48, 0.32)",
95
+ neutral: "rgba(123, 152, 157, 0.28)"
96
96
  },
97
97
  layer: {
98
98
  scrim: "rgba(0, 0, 0, 0.5)",
99
- float: "#202a2c"
99
+ float: "#1b2628"
100
100
  },
101
101
  control: {
102
102
  brand: {
103
103
  primary: {
104
- bg: "#66e6ff",
105
- bgHover: "#99eeff",
106
- bgPress: "#33ddff",
107
- bgDisable: "#557177",
104
+ bg: "#55dcf6",
105
+ bgHover: "#80eaff",
106
+ bgPress: "#31cae8",
107
+ bgDisable: "#666666",
108
108
  border: "rgba(255, 255, 255, 0)",
109
109
  borderHover: "rgba(255, 255, 255, 0)",
110
110
  borderPress: "rgba(255, 255, 255, 0)",
111
- borderDisable: "rgba(255, 255, 255, 0)",
112
- text: {
113
- primary: "#000000",
114
- secondary: "#ffffff",
115
- disable: "#a6bbbf"
116
- }
111
+ borderDisable: "rgba(255, 255, 255, 0)"
117
112
  },
118
113
  secondary: {
119
- bg: "rgba(102, 230, 255, 0.4)",
120
- bgHover: "rgba(153, 238, 255, 0.4)",
121
- bgPress: "rgba(51, 221, 255, 0.4)",
122
- bgDisable: "rgba(102, 230, 255, 0.2)",
114
+ bg: "rgba(128, 234, 255, 0.4)",
115
+ bgHover: "rgba(178, 242, 255, 0.4)",
116
+ bgPress: "rgba(85, 220, 246, 0.4)",
123
117
  border: "rgba(255, 255, 255, 0)",
124
118
  borderHover: "rgba(255, 255, 255, 0)",
125
- borderPress: "rgba(255, 255, 255, 0)",
126
- borderDisable: "rgba(255, 255, 255, 0)",
127
- text: {
128
- primary: "#000000",
129
- secondary: "#ffffff",
130
- disable: "rgba(0, 0, 0, 0.4)"
131
- }
119
+ borderPress: "rgba(255, 255, 255, 0)"
132
120
  },
133
121
  tertiary: {
134
122
  bg: "rgba(255, 255, 255, 0)",
135
- bgHover: "rgba(102, 230, 255, 0.12)",
136
- bgPress: "rgba(102, 230, 255, 0.08)",
137
- bgDisable: "rgba(255, 255, 255, 0)",
123
+ bgHover: "rgba(178, 242, 255, 0.07)",
124
+ bgPress: "rgba(85, 220, 246, 0.12)",
138
125
  border: "rgba(255, 255, 255, 0)",
139
126
  borderHover: "rgba(255, 255, 255, 0)",
140
- borderPress: "rgba(255, 255, 255, 0)",
141
- borderDisable: "rgba(255, 255, 255, 0)",
142
- text: {
143
- primary: "#66e6ff",
144
- secondary: "#ffffff",
145
- disable: "rgba(102, 230, 255, 0.4)"
146
- }
127
+ borderPress: "rgba(255, 255, 255, 0)"
128
+ },
129
+ text: {
130
+ primary: "#000000",
131
+ secondary: "#ffffff",
132
+ tertiary: "#55dcf6",
133
+ disable: "#b3b3b3"
134
+ }
135
+ },
136
+ mono: {
137
+ primary: {
138
+ bg: "#ffffff",
139
+ bgHover: "#e8eced",
140
+ bgPress: "#f4f5f6",
141
+ border: "rgba(255, 255, 255, 0)",
142
+ borderHover: "rgba(255, 255, 255, 0)",
143
+ borderPress: "rgba(255, 255, 255, 0)"
144
+ },
145
+ secondary: {
146
+ bg: "rgba(255, 255, 255, 0.4)",
147
+ bgHover: "rgba(255, 255, 255, 0.34)",
148
+ bgPress: "rgba(255, 255, 255, 0.44)",
149
+ border: "rgba(255, 255, 255, 0)",
150
+ borderHover: "rgba(255, 255, 255, 0)",
151
+ borderPress: "rgba(255, 255, 255, 0)"
152
+ },
153
+ tertiary: {
154
+ bg: "rgba(255, 255, 255, 0)",
155
+ bgHover: "rgba(255, 255, 255, 0.07)",
156
+ bgPress: "rgba(255, 255, 255, 0.12)",
157
+ border: "rgba(255, 255, 255, 0)",
158
+ borderHover: "rgba(255, 255, 255, 0)",
159
+ borderPress: "rgba(255, 255, 255, 0)"
160
+ },
161
+ text: {
162
+ primary: "#000000",
163
+ secondary: "#ffffff",
164
+ tertiary: "#ffffff"
147
165
  }
148
166
  },
149
167
  brandExtra: {
150
168
  primary: {
151
- bg: "#d9ff66",
152
- bgHover: "#ccff33",
153
- bgPress: "#e6ff99",
154
- bgDisable: "#6b7755",
169
+ bg: "#cef655",
170
+ bgHover: "#bae831",
171
+ bgPress: "#dfff80",
155
172
  border: "rgba(255, 255, 255, 0)",
156
173
  borderHover: "rgba(255, 255, 255, 0)",
157
- borderPress: "rgba(255, 255, 255, 0)",
158
- borderDisable: "rgba(255, 255, 255, 0)",
159
- text: {
160
- primary: "#000000",
161
- secondary: "#ffffff",
162
- disable: "#a6b5a0"
163
- }
174
+ borderPress: "rgba(255, 255, 255, 0)"
164
175
  },
165
176
  secondary: {
166
- bg: "rgba(217, 255, 102, 0.4)",
167
- bgHover: "rgba(204, 255, 51, 0.4)",
168
- bgPress: "rgba(230, 255, 153, 0.4)",
169
- bgDisable: "rgba(217, 255, 102, 0.2)",
177
+ bg: "rgba(186, 232, 49, 0.4)",
178
+ bgHover: "rgba(206, 246, 85, 0.4)",
179
+ bgPress: "rgba(186, 232, 49, 0.4)",
180
+ border: "rgba(255, 255, 255, 0)",
181
+ borderHover: "rgba(255, 255, 255, 0)",
182
+ borderPress: "rgba(255, 255, 255, 0)"
183
+ },
184
+ tertiary: {
185
+ bg: "rgba(186, 232, 49, 0)",
186
+ bgHover: "rgba(206, 246, 85, 0.07)",
187
+ bgPress: "rgba(186, 232, 49, 0.12)",
188
+ border: "rgba(255, 255, 255, 0)",
189
+ borderHover: "rgba(255, 255, 255, 0)",
190
+ borderPress: "rgba(255, 255, 255, 0)"
191
+ },
192
+ text: {
193
+ primary: "#000000",
194
+ secondary: "#ffffff",
195
+ tertiary: "#cef655"
196
+ }
197
+ },
198
+ alert: {
199
+ bg: "#6c2213",
200
+ border: "#f67055",
201
+ primary: {
202
+ bg: "#f67055",
203
+ bgHover: "#ff9580",
204
+ bgPress: "#e84f30",
205
+ border: "rgba(255, 255, 255, 0)",
206
+ borderHover: "rgba(255, 255, 255, 0)",
207
+ borderPress: "rgba(255, 255, 255, 0)"
208
+ },
209
+ secondary: {
210
+ bg: "rgba(232, 79, 48, 0.4)",
211
+ bgHover: "rgba(246, 112, 85, 0.4)",
212
+ bgPress: "rgba(195, 61, 34, 0.4)",
213
+ border: "rgba(255, 255, 255, 0)",
214
+ borderHover: "rgba(255, 255, 255, 0)",
215
+ borderPress: "rgba(255, 255, 255, 0)"
216
+ },
217
+ tertiary: {
218
+ bg: "rgba(255, 43, 0, 0)",
219
+ bgHover: "rgba(255, 170, 153, 0.07)",
220
+ bgPress: "rgba(255, 85, 51, 0.12)",
221
+ border: "rgba(255, 255, 255, 0)",
222
+ borderHover: "rgba(255, 255, 255, 0)",
223
+ borderPress: "rgba(255, 255, 255, 0)"
224
+ },
225
+ text: {
226
+ primary: "#ffffff",
227
+ secondary: "#ffffff",
228
+ tertiary: "#f67055"
229
+ }
230
+ },
231
+ input: {
232
+ bg: "rgba(255, 255, 255, 0.12)",
233
+ bgHover: "rgba(255, 255, 255, 0.15)",
234
+ bgDisable: "rgba(255, 255, 255, 0.25)",
235
+ border: "rgba(255, 255, 255, 0.1)",
236
+ borderHover: "rgba(255, 255, 255, 0.15)",
237
+ borderDisable: "rgba(255, 255, 255, 0)",
238
+ text: "#ffffff",
239
+ placeholder: "rgba(255, 255, 255, 0.56)",
240
+ textDisable: "rgba(255, 255, 255, 0.36)"
241
+ },
242
+ focus: {
243
+ bg: "#1b2628",
244
+ border: "#55dcf6"
245
+ },
246
+ check: {
247
+ bg: "#ffffff",
248
+ bgHover: "#e8eced",
249
+ bgDisable: "rgba(255, 255, 255, 0.2)",
250
+ border: "rgba(255, 255, 255, 0)",
251
+ borderHover: "rgba(255, 255, 255, 0)",
252
+ borderDisable: "rgba(255, 255, 255, 0)",
253
+ text: "#000000"
254
+ },
255
+ faint: {
256
+ bg: "rgba(255, 255, 255, 0.15)",
257
+ bgHover: "rgba(255, 255, 255, 0.2)",
258
+ border: "rgba(255, 255, 255, 0)",
259
+ borderHover: "rgba(255, 255, 255, 0.16)"
260
+ },
261
+ switch: {
262
+ bg: "rgba(255, 255, 255, 0.1)",
263
+ bgHover: "rgba(255, 255, 255, 0.15)"
264
+ },
265
+ text: {
266
+ primary: "#ffffff",
267
+ disable: "rgba(255, 255, 255, 0.4)"
268
+ },
269
+ link: {
270
+ primary: "#55dcf6",
271
+ primaryHover: "#80eaff",
272
+ secondary: "#cef655",
273
+ secondaryHover: "#dfff80"
274
+ },
275
+ segmented: {
276
+ bg: "rgba(255, 255, 255, 0.1)",
277
+ bgHover: "rgba(255, 255, 255, 0.1)",
278
+ bgActive: "rgba(255, 255, 255, 0.1)",
279
+ border: "rgba(255, 255, 255, 0.1)",
280
+ borderHover: "rgba(255, 255, 255, 0.1)",
281
+ borderActive: "rgba(255, 255, 255, 0.1)",
282
+ text: "#ffffff",
283
+ textDisable: "#ffffff"
284
+ },
285
+ toggleButton: {
286
+ bg: "rgba(255, 255, 255, 0.1)",
287
+ bgHover: "rgba(255, 255, 255, 0.15)",
288
+ bgPress: "#000000",
289
+ bgDisable: "rgba(255, 255, 255, 0.06)",
290
+ border: "rgba(255, 255, 255, 0.16)",
291
+ borderHover: "rgba(255, 255, 255, 0.16)",
292
+ borderPress: "rgba(255, 255, 255, 0)",
293
+ borderDisable: "rgba(255, 255, 255, 0.16)",
294
+ text: "#e8eced",
295
+ textDisable: "rgba(255, 255, 255, 0.4)"
296
+ }
297
+ }
298
+ };
299
+
300
+ // src/tokens/xsolla-light.json
301
+ var xsolla_light_default = {
302
+ background: {
303
+ primary: "#ffffff",
304
+ secondary: "#f3f3f2",
305
+ inverse: "#000000",
306
+ brand: {
307
+ primary: "#80eaff",
308
+ secondary: "#b2f2ff"
309
+ },
310
+ brandExtra: {
311
+ primary: "#cef655",
312
+ secondary: "#dfff80"
313
+ },
314
+ success: {
315
+ primary: "#95ff80",
316
+ secondary: "#bfffb2"
317
+ },
318
+ warning: {
319
+ primary: "#ffc380",
320
+ secondary: "#ffdbb2"
321
+ },
322
+ alert: {
323
+ primary: "#e84f30",
324
+ secondary: "#ffbfb2"
325
+ },
326
+ neutral: {
327
+ primary: "#99aeb2",
328
+ secondary: "#d7dee0"
329
+ }
330
+ },
331
+ content: {
332
+ primary: "#000000",
333
+ secondary: "rgba(0, 0, 0, 0.75)",
334
+ tertiary: "rgba(0, 0, 0, 0.6)",
335
+ inverse: "#ffffff",
336
+ brand: {
337
+ primary: "#22a8c3",
338
+ secondary: "#31cae8"
339
+ },
340
+ brandExtra: {
341
+ primary: "#79971b",
342
+ secondary: "#9bc323"
343
+ },
344
+ success: {
345
+ primary: "#30981b",
346
+ secondary: "#3dc322"
347
+ },
348
+ warning: {
349
+ primary: "#c37822",
350
+ secondary: "#f6ab55"
351
+ },
352
+ alert: {
353
+ primary: "#e84f30",
354
+ secondary: "#f67055"
355
+ },
356
+ neutral: {
357
+ primary: "#34474b",
358
+ secondary: "#607f85"
359
+ },
360
+ on: {
361
+ brand: "#000000",
362
+ brandExtra: "#000000",
363
+ success: "#000000",
364
+ warning: "#000000",
365
+ alert: "#ffffff",
366
+ neutral: "#ffffff"
367
+ },
368
+ static: {
369
+ light: "#ffffff",
370
+ dark: "#000000"
371
+ }
372
+ },
373
+ border: {
374
+ primary: "#000000",
375
+ secondary: "rgba(0, 0, 0, 0.1)",
376
+ inverse: "rgba(255, 255, 255, 0.15)",
377
+ brand: "#31cae8",
378
+ brandExtra: "#bae831",
379
+ success: "#30981b",
380
+ warning: "#e89331",
381
+ alert: "#e84f30",
382
+ neutral: "#3d22c3"
383
+ },
384
+ overlay: {
385
+ mono: "rgba(0, 0, 0, 0.05)",
386
+ brand: "rgba(128, 234, 255, 0.3)",
387
+ brandExtra: "rgba(206, 246, 85, 0.3)",
388
+ success: "rgba(149, 255, 128, 0.24)",
389
+ warning: "rgba(255, 195, 128, 0.28)",
390
+ alert: "rgba(232, 79, 48, 0.24)",
391
+ neutral: "rgba(96, 127, 133, 0.24)"
392
+ },
393
+ layer: {
394
+ scrim: "rgba(0, 0, 0, 0.75)",
395
+ float: "#ffffff"
396
+ },
397
+ control: {
398
+ brand: {
399
+ primary: {
400
+ bg: "#55dcf6",
401
+ bgHover: "#80eaff",
402
+ bgPress: "#31cae8",
403
+ bgDisable: "#cccccc",
170
404
  border: "rgba(255, 255, 255, 0)",
171
405
  borderHover: "rgba(255, 255, 255, 0)",
172
406
  borderPress: "rgba(255, 255, 255, 0)",
173
- borderDisable: "rgba(255, 255, 255, 0)",
174
- text: {
175
- primary: "#000000",
176
- secondary: "#ffffff",
177
- disable: "rgba(0, 0, 0, 0.4)"
178
- }
407
+ borderDisable: "rgba(255, 255, 255, 0)"
408
+ },
409
+ secondary: {
410
+ bg: "rgba(128, 234, 255, 0.4)",
411
+ bgHover: "rgba(178, 242, 255, 0.4)",
412
+ bgPress: "rgba(85, 220, 246, 0.4)",
413
+ border: "rgba(255, 255, 255, 0)",
414
+ borderHover: "rgba(255, 255, 255, 0)",
415
+ borderPress: "rgba(255, 255, 255, 0)"
179
416
  },
180
417
  tertiary: {
181
418
  bg: "rgba(255, 255, 255, 0)",
182
- bgHover: "rgba(217, 255, 102, 0.12)",
183
- bgPress: "rgba(217, 255, 102, 0.08)",
184
- bgDisable: "rgba(255, 255, 255, 0)",
419
+ bgHover: "rgba(178, 242, 255, 0.07)",
420
+ bgPress: "rgba(85, 220, 246, 0.12)",
421
+ border: "rgba(255, 255, 255, 0)",
422
+ borderHover: "rgba(255, 255, 255, 0)",
423
+ borderPress: "rgba(255, 255, 255, 0)"
424
+ },
425
+ text: {
426
+ primary: "#000000",
427
+ secondary: "#000000",
428
+ tertiary: "#1b8398",
429
+ disable: "#999999"
430
+ }
431
+ },
432
+ mono: {
433
+ primary: {
434
+ bg: "#000000",
435
+ bgHover: "#141d1f",
436
+ bgPress: "#1b2628",
437
+ border: "rgba(255, 255, 255, 0)",
438
+ borderHover: "rgba(255, 255, 255, 0)",
439
+ borderPress: "rgba(255, 255, 255, 0)"
440
+ },
441
+ secondary: {
442
+ bg: "rgba(0, 0, 0, 0.12)",
443
+ bgHover: "rgba(21, 28, 30, 0.12)",
444
+ bgPress: "rgba(32, 42, 44, 0.12)",
445
+ border: "rgba(255, 255, 255, 0)",
446
+ borderHover: "rgba(255, 255, 255, 0)",
447
+ borderPress: "rgba(255, 255, 255, 0)"
448
+ },
449
+ tertiary: {
450
+ bg: "rgba(0, 0, 0, 0)",
451
+ bgHover: "rgba(21, 28, 30, 0.07)",
452
+ bgPress: "rgba(32, 42, 44, 0.12)",
453
+ border: "rgba(255, 255, 255, 0)",
454
+ borderHover: "rgba(255, 255, 255, 0)",
455
+ borderPress: "rgba(255, 255, 255, 0)"
456
+ },
457
+ text: {
458
+ primary: "#ffffff",
459
+ secondary: "#000000",
460
+ tertiary: "#000000"
461
+ }
462
+ },
463
+ brandExtra: {
464
+ primary: {
465
+ bg: "#bae831",
466
+ bgHover: "#cef655",
467
+ bgPress: "#9bc323",
468
+ border: "rgba(255, 255, 255, 0)",
469
+ borderHover: "rgba(255, 255, 255, 0)",
470
+ borderPress: "rgba(255, 255, 255, 0)"
471
+ },
472
+ secondary: {
473
+ bg: "rgba(186, 232, 49, 0.4)",
474
+ bgHover: "rgba(206, 246, 85, 0.4)",
475
+ bgPress: "rgba(186, 232, 49, 0.4)",
476
+ border: "rgba(255, 255, 255, 0)",
477
+ borderHover: "rgba(255, 255, 255, 0)",
478
+ borderPress: "rgba(255, 255, 255, 0)"
479
+ },
480
+ tertiary: {
481
+ bg: "rgba(186, 232, 49, 0)",
482
+ bgHover: "rgba(206, 246, 85, 0.07)",
483
+ bgPress: "rgba(186, 232, 49, 0.12)",
484
+ border: "rgba(255, 255, 255, 0)",
485
+ borderHover: "rgba(255, 255, 255, 0)",
486
+ borderPress: "rgba(255, 255, 255, 0)"
487
+ },
488
+ text: {
489
+ primary: "#000000",
490
+ secondary: "#000000",
491
+ tertiary: "#79971b"
492
+ }
493
+ },
494
+ alert: {
495
+ bg: "#ffbfb2",
496
+ border: "#e84f30",
497
+ primary: {
498
+ bg: "#e84f30",
499
+ bgHover: "#f67055",
500
+ bgPress: "#c33d22",
501
+ border: "rgba(255, 255, 255, 0)",
502
+ borderHover: "rgba(255, 255, 255, 0)",
503
+ borderPress: "rgba(255, 255, 255, 0)"
504
+ },
505
+ secondary: {
506
+ bg: "rgba(232, 79, 48, 0.4)",
507
+ bgHover: "rgba(246, 112, 85, 0.4)",
508
+ bgPress: "rgba(195, 61, 34, 0.4)",
509
+ border: "rgba(255, 255, 255, 0)",
510
+ borderHover: "rgba(255, 255, 255, 0)",
511
+ borderPress: "rgba(255, 255, 255, 0)"
512
+ },
513
+ tertiary: {
514
+ bg: "rgba(255, 43, 0, 0)",
515
+ bgHover: "rgba(255, 85, 51, 0.07)",
516
+ bgPress: "rgba(204, 34, 0, 0.12)",
185
517
  border: "rgba(255, 255, 255, 0)",
186
518
  borderHover: "rgba(255, 255, 255, 0)",
519
+ borderPress: "rgba(255, 255, 255, 0)"
520
+ },
521
+ text: {
522
+ primary: "#ffffff",
523
+ secondary: "#000000",
524
+ tertiary: "#c33d22"
525
+ }
526
+ },
527
+ input: {
528
+ bg: "rgba(0, 0, 0, 0.1)",
529
+ bgHover: "rgba(0, 0, 0, 0.15)",
530
+ bgDisable: "rgba(0, 0, 0, 0.2)",
531
+ border: "rgba(0, 0, 0, 0.1)",
532
+ borderHover: "rgba(0, 0, 0, 0.15)",
533
+ borderDisable: "rgba(0, 0, 0, 0)",
534
+ text: "#000000",
535
+ placeholder: "rgba(0, 0, 0, 0.6)",
536
+ textDisable: "rgba(0, 0, 0, 0.36)"
537
+ },
538
+ focus: {
539
+ bg: "#ffffff",
540
+ border: "#31cae8"
541
+ },
542
+ check: {
543
+ bg: "#000000",
544
+ bgHover: "#233134",
545
+ bgDisable: "rgba(0, 0, 0, 0.2)",
546
+ border: "rgba(255, 255, 255, 0)",
547
+ borderHover: "rgba(255, 255, 255, 0)",
548
+ borderDisable: "rgba(255, 255, 255, 0)",
549
+ text: "#ffffff"
550
+ },
551
+ faint: {
552
+ bg: "rgba(0, 0, 0, 0.15)",
553
+ bgHover: "rgba(0, 0, 0, 0.2)",
554
+ border: "rgba(0, 0, 0, 0)",
555
+ borderHover: "rgba(0, 0, 0, 0.1)"
556
+ },
557
+ switch: {
558
+ bg: "rgba(0, 0, 0, 0.1)",
559
+ bgHover: "rgba(0, 0, 0, 0.15)"
560
+ },
561
+ text: {
562
+ primary: "#000000",
563
+ disable: "rgba(0, 0, 0, 0.4)"
564
+ },
565
+ link: {
566
+ primary: "#22a8c3",
567
+ primaryHover: "#31cae8",
568
+ secondary: "#9bc323",
569
+ secondaryHover: "#bae831"
570
+ },
571
+ segmented: {
572
+ bg: "rgba(0, 0, 0, 0.08)",
573
+ bgHover: "#ffffff",
574
+ bgActive: "#ffffff",
575
+ border: "rgba(0, 0, 0, 0.1)",
576
+ borderHover: "rgba(0, 0, 0, 0.1)",
577
+ borderActive: "#ffffff",
578
+ text: "#000000",
579
+ textDisable: "#000000"
580
+ },
581
+ toggleButton: {
582
+ bg: "#ffffff",
583
+ bgHover: "rgba(0, 0, 0, 0.06)",
584
+ bgPress: "rgba(0, 0, 0, 0.1)",
585
+ bgDisable: "rgba(0, 0, 0, 0.15)",
586
+ border: "rgba(0, 0, 0, 0.1)",
587
+ borderHover: "rgba(0, 0, 0, 0.1)",
588
+ borderPress: "rgba(0, 0, 0, 0.1)",
589
+ borderDisable: "rgba(0, 0, 0, 0.1)",
590
+ text: "#000000",
591
+ textDisable: "rgba(255, 255, 255, 0.4)"
592
+ }
593
+ }
594
+ };
595
+
596
+ // src/tokens/pentagram-dark.json
597
+ var pentagram_dark_default = {
598
+ background: {
599
+ primary: "#1b2628",
600
+ secondary: "#141d1f",
601
+ inverse: "#ffffff",
602
+ brand: {
603
+ primary: "#80eaff",
604
+ secondary: "#0b3841"
605
+ },
606
+ brandExtra: {
607
+ primary: "#cef655",
608
+ secondary: "#566c13"
609
+ },
610
+ success: {
611
+ primary: "#95ff80",
612
+ secondary: "#14410b"
613
+ },
614
+ warning: {
615
+ primary: "#ffc380",
616
+ secondary: "#6c4313"
617
+ },
618
+ alert: {
619
+ primary: "#e84f30",
620
+ secondary: "#6c2213"
621
+ },
622
+ neutral: {
623
+ primary: "#99aeb2",
624
+ secondary: "#34474b"
625
+ }
626
+ },
627
+ content: {
628
+ primary: "#e8eced",
629
+ secondary: "rgba(232, 236, 237, 0.72)",
630
+ tertiary: "rgba(232, 236, 237, 0.58)",
631
+ inverse: "#000000",
632
+ brand: {
633
+ primary: "#80eaff",
634
+ secondary: "#55dcf6"
635
+ },
636
+ brandExtra: {
637
+ primary: "#cef655",
638
+ secondary: "#9bc323"
639
+ },
640
+ success: {
641
+ primary: "#70f655",
642
+ secondary: "#3dc322"
643
+ },
644
+ warning: {
645
+ primary: "#f6ab55",
646
+ secondary: "#c37822"
647
+ },
648
+ alert: {
649
+ primary: "#f67055",
650
+ secondary: "#e84f30"
651
+ },
652
+ neutral: {
653
+ primary: "#99aeb2",
654
+ secondary: "#4b6368"
655
+ },
656
+ on: {
657
+ brand: "#000000",
658
+ brandExtra: "#000000",
659
+ success: "#000000",
660
+ warning: "#000000",
661
+ alert: "#ffffff",
662
+ neutral: "#ffffff"
663
+ },
664
+ static: {
665
+ light: "#ffffff",
666
+ dark: "#000000"
667
+ }
668
+ },
669
+ border: {
670
+ primary: "#ffffff",
671
+ secondary: "rgba(255, 255, 255, 0.16)",
672
+ inverse: "rgba(0, 0, 0, 0.15)",
673
+ brand: "#55dcf6",
674
+ brandExtra: "#cef655",
675
+ success: "#70f655",
676
+ warning: "#f6ab55",
677
+ alert: "#f67055",
678
+ neutral: "#9580ff"
679
+ },
680
+ overlay: {
681
+ mono: "rgba(255, 255, 255, 0.1)",
682
+ brand: "rgba(128, 234, 255, 0.2)",
683
+ brandExtra: "rgba(206, 246, 85, 0.3)",
684
+ success: "rgba(149, 255, 128, 0.2)",
685
+ warning: "rgba(255, 195, 128, 0.24)",
686
+ alert: "rgba(232, 79, 48, 0.32)",
687
+ neutral: "rgba(123, 152, 157, 0.28)"
688
+ },
689
+ layer: {
690
+ scrim: "rgba(0, 0, 0, 0.5)",
691
+ float: "#000000"
692
+ },
693
+ control: {
694
+ brand: {
695
+ primary: {
696
+ bg: "#80eaff",
697
+ bgHover: "#b2f2ff",
698
+ bgPress: "#55dcf6",
699
+ bgDisable: "rgba(52, 71, 75, 0.85)",
700
+ border: "#31cae8",
701
+ borderHover: "#55dcf6",
187
702
  borderPress: "rgba(255, 255, 255, 0)",
188
- borderDisable: "rgba(255, 255, 255, 0)",
189
- text: {
190
- primary: "#d9ff66",
191
- secondary: "#ffffff",
192
- disable: "rgba(217, 255, 102, 0.4)"
193
- }
703
+ borderDisable: "rgba(255, 255, 255, 0)"
704
+ },
705
+ secondary: {
706
+ bg: "#135d6c",
707
+ bgHover: "#1b8398",
708
+ bgPress: "#0b3841",
709
+ border: "#22a8c3",
710
+ borderHover: "#22a8c3",
711
+ borderPress: "rgba(255, 255, 255, 0)"
712
+ },
713
+ tertiary: {
714
+ bg: "#34474b",
715
+ bgHover: "#4b6368",
716
+ bgPress: "#607f85",
717
+ border: "#4b6368",
718
+ borderHover: "#607f85",
719
+ borderPress: "rgba(255, 255, 255, 0)"
720
+ },
721
+ text: {
722
+ primary: "#000000",
723
+ secondary: "#80eaff",
724
+ tertiary: "#b7c5c8",
725
+ disable: "rgba(232, 236, 237, 0.2)"
726
+ }
727
+ },
728
+ mono: {
729
+ primary: {
730
+ bg: "#ffffff",
731
+ bgHover: "#e8eced",
732
+ bgPress: "#f4f5f6",
733
+ border: "rgba(255, 255, 255, 0)",
734
+ borderHover: "rgba(255, 255, 255, 0)",
735
+ borderPress: "rgba(255, 255, 255, 0)"
736
+ },
737
+ secondary: {
738
+ bg: "rgba(255, 255, 255, 0.4)",
739
+ bgHover: "rgba(255, 255, 255, 0.34)",
740
+ bgPress: "rgba(255, 255, 255, 0.44)",
741
+ border: "rgba(255, 255, 255, 0)",
742
+ borderHover: "rgba(255, 255, 255, 0)",
743
+ borderPress: "rgba(255, 255, 255, 0)"
744
+ },
745
+ tertiary: {
746
+ bg: "rgba(255, 255, 255, 0)",
747
+ bgHover: "rgba(255, 255, 255, 0.07)",
748
+ bgPress: "rgba(255, 255, 255, 0.12)",
749
+ border: "rgba(255, 255, 255, 0)",
750
+ borderHover: "rgba(255, 255, 255, 0)",
751
+ borderPress: "rgba(255, 255, 255, 0)"
752
+ },
753
+ text: {
754
+ primary: "#000000",
755
+ secondary: "#ffffff",
756
+ tertiary: "#ffffff"
757
+ }
758
+ },
759
+ brandExtra: {
760
+ primary: {
761
+ bg: "#cef655",
762
+ bgHover: "#bae831",
763
+ bgPress: "#dfff80",
764
+ border: "rgba(255, 255, 255, 0)",
765
+ borderHover: "rgba(255, 255, 255, 0)",
766
+ borderPress: "rgba(255, 255, 255, 0)"
767
+ },
768
+ secondary: {
769
+ bg: "rgba(186, 232, 49, 0.4)",
770
+ bgHover: "rgba(206, 246, 85, 0.4)",
771
+ bgPress: "rgba(186, 232, 49, 0.4)",
772
+ border: "rgba(255, 255, 255, 0)",
773
+ borderHover: "rgba(255, 255, 255, 0)",
774
+ borderPress: "rgba(255, 255, 255, 0)"
775
+ },
776
+ tertiary: {
777
+ bg: "rgba(186, 232, 49, 0)",
778
+ bgHover: "rgba(206, 246, 85, 0.07)",
779
+ bgPress: "rgba(186, 232, 49, 0.12)",
780
+ border: "rgba(255, 255, 255, 0)",
781
+ borderHover: "rgba(255, 255, 255, 0)",
782
+ borderPress: "rgba(255, 255, 255, 0)"
783
+ },
784
+ text: {
785
+ primary: "#000000",
786
+ secondary: "#ffffff",
787
+ tertiary: "#cef655"
194
788
  }
195
789
  },
196
790
  alert: {
791
+ bg: "#6c2213",
792
+ border: "#f67055",
197
793
  primary: {
198
- bg: "#ff8066",
199
- bgHover: "#ffaa99",
200
- bgPress: "#ff5533",
201
- bgDisable: "#775555",
794
+ bg: "#f67055",
795
+ bgHover: "#ff9580",
796
+ bgPress: "#e84f30",
797
+ border: "rgba(255, 255, 255, 0)",
798
+ borderHover: "rgba(255, 255, 255, 0)",
799
+ borderPress: "rgba(255, 255, 255, 0)"
800
+ },
801
+ secondary: {
802
+ bg: "rgba(232, 79, 48, 0.4)",
803
+ bgHover: "rgba(246, 112, 85, 0.4)",
804
+ bgPress: "rgba(195, 61, 34, 0.4)",
202
805
  border: "rgba(255, 255, 255, 0)",
203
806
  borderHover: "rgba(255, 255, 255, 0)",
807
+ borderPress: "rgba(255, 255, 255, 0)"
808
+ },
809
+ tertiary: {
810
+ bg: "rgba(255, 43, 0, 0)",
811
+ bgHover: "rgba(255, 170, 153, 0.07)",
812
+ bgPress: "rgba(255, 85, 51, 0.12)",
813
+ border: "rgba(255, 255, 255, 0)",
814
+ borderHover: "rgba(255, 255, 255, 0)",
815
+ borderPress: "rgba(255, 255, 255, 0)"
816
+ },
817
+ text: {
818
+ primary: "#ffffff",
819
+ secondary: "#ffffff",
820
+ tertiary: "#f67055"
821
+ }
822
+ },
823
+ input: {
824
+ bg: "#34474b",
825
+ bgHover: "#4b6368",
826
+ bgDisable: "#34474b",
827
+ border: "#4b6368",
828
+ borderHover: "#607f85",
829
+ borderDisable: "rgba(255, 255, 255, 0)",
830
+ text: "#e8eced",
831
+ placeholder: "#7b989d",
832
+ textDisable: "rgba(215, 222, 224, 0.2)"
833
+ },
834
+ focus: {
835
+ bg: "#000000",
836
+ border: "#55dcf6"
837
+ },
838
+ check: {
839
+ bg: "#135d6c",
840
+ bgHover: "#1b8398",
841
+ bgDisable: "rgba(255, 255, 255, 0.25)",
842
+ border: "#22a8c3",
843
+ borderHover: "#22a8c3",
844
+ borderDisable: "rgba(255, 255, 255, 0)",
845
+ text: "#80eaff"
846
+ },
847
+ faint: {
848
+ bg: "rgba(255, 255, 255, 0.15)",
849
+ bgHover: "rgba(255, 255, 255, 0.2)",
850
+ border: "rgba(255, 255, 255, 0.1)",
851
+ borderHover: "rgba(255, 255, 255, 0.15)"
852
+ },
853
+ switch: {
854
+ bg: "rgba(255, 255, 255, 0.1)",
855
+ bgHover: "rgba(255, 255, 255, 0.15)"
856
+ },
857
+ text: {
858
+ primary: "#ffffff",
859
+ disable: "rgba(255, 255, 255, 0.4)"
860
+ },
861
+ link: {
862
+ primary: "#55dcf6",
863
+ primaryHover: "#80eaff",
864
+ secondary: "#cef655",
865
+ secondaryHover: "#dfff80"
866
+ },
867
+ segmented: {
868
+ bg: "rgba(0, 0, 0, 0.3)",
869
+ bgHover: "rgba(255, 255, 255, 0.1)",
870
+ bgActive: "rgba(255, 255, 255, 0.15)",
871
+ border: "rgba(255, 255, 255, 0.1)",
872
+ borderHover: "rgba(255, 255, 255, 0.1)",
873
+ borderActive: "rgba(255, 255, 255, 0)",
874
+ text: "#ffffff",
875
+ textDisable: "rgba(255, 255, 255, 0.4)"
876
+ },
877
+ toggleButton: {
878
+ bg: "#34474b",
879
+ bgHover: "#4b6368",
880
+ bgPress: "#2d4448",
881
+ bgDisable: "#34474b",
882
+ border: "#4b6368",
883
+ borderHover: "#607f85",
884
+ borderPress: "#b2f2ff",
885
+ borderDisable: "rgba(255, 255, 255, 0)",
886
+ text: "#e8eced",
887
+ textDisable: "rgba(255, 255, 255, 0.4)"
888
+ }
889
+ }
890
+ };
891
+
892
+ // src/tokens/pentagram-light.json
893
+ var pentagram_light_default = {
894
+ background: {
895
+ primary: "#ffffff",
896
+ secondary: "#f3f3f2",
897
+ inverse: "#000000",
898
+ brand: {
899
+ primary: "#80eaff",
900
+ secondary: "#b2f2ff"
901
+ },
902
+ brandExtra: {
903
+ primary: "#cef655",
904
+ secondary: "#dfff80"
905
+ },
906
+ success: {
907
+ primary: "#95ff80",
908
+ secondary: "#bfffb2"
909
+ },
910
+ warning: {
911
+ primary: "#ffc380",
912
+ secondary: "#ffdbb2"
913
+ },
914
+ alert: {
915
+ primary: "#e84f30",
916
+ secondary: "#ffbfb2"
917
+ },
918
+ neutral: {
919
+ primary: "#99aeb2",
920
+ secondary: "#d7dee0"
921
+ }
922
+ },
923
+ content: {
924
+ primary: "#000000",
925
+ secondary: "rgba(0, 0, 0, 0.75)",
926
+ tertiary: "rgba(0, 0, 0, 0.6)",
927
+ inverse: "#ffffff",
928
+ brand: {
929
+ primary: "#22a8c3",
930
+ secondary: "#31cae8"
931
+ },
932
+ brandExtra: {
933
+ primary: "#79971b",
934
+ secondary: "#9bc323"
935
+ },
936
+ success: {
937
+ primary: "#30981b",
938
+ secondary: "#3dc322"
939
+ },
940
+ warning: {
941
+ primary: "#c37822",
942
+ secondary: "#f6ab55"
943
+ },
944
+ alert: {
945
+ primary: "#e84f30",
946
+ secondary: "#f67055"
947
+ },
948
+ neutral: {
949
+ primary: "#34474b",
950
+ secondary: "#607f85"
951
+ },
952
+ on: {
953
+ brand: "#000000",
954
+ brandExtra: "#000000",
955
+ success: "#000000",
956
+ warning: "#000000",
957
+ alert: "#ffffff",
958
+ neutral: "#ffffff"
959
+ },
960
+ static: {
961
+ light: "#ffffff",
962
+ dark: "#000000"
963
+ }
964
+ },
965
+ border: {
966
+ primary: "#000000",
967
+ secondary: "rgba(0, 0, 0, 0.1)",
968
+ inverse: "rgba(255, 255, 255, 0.15)",
969
+ brand: "#31cae8",
970
+ brandExtra: "#bae831",
971
+ success: "#30981b",
972
+ warning: "#e89331",
973
+ alert: "#e84f30",
974
+ neutral: "#3d22c3"
975
+ },
976
+ overlay: {
977
+ mono: "rgba(0, 0, 0, 0.05)",
978
+ brand: "rgba(128, 234, 255, 0.3)",
979
+ brandExtra: "rgba(206, 246, 85, 0.3)",
980
+ success: "rgba(149, 255, 128, 0.24)",
981
+ warning: "rgba(255, 195, 128, 0.28)",
982
+ alert: "rgba(232, 79, 48, 0.24)",
983
+ neutral: "rgba(96, 127, 133, 0.24)"
984
+ },
985
+ layer: {
986
+ scrim: "rgba(0, 0, 0, 0.75)",
987
+ float: "#ffffff"
988
+ },
989
+ control: {
990
+ brand: {
991
+ primary: {
992
+ bg: "#80eaff",
993
+ bgHover: "#b2f2ff",
994
+ bgPress: "#55dcf6",
995
+ bgDisable: "#cccccc",
996
+ border: "#31cae8",
997
+ borderHover: "#55dcf6",
204
998
  borderPress: "rgba(255, 255, 255, 0)",
205
- borderDisable: "rgba(255, 255, 255, 0)",
206
- text: {
207
- primary: "#ffffff",
208
- secondary: "#ffffff",
209
- disable: "#bfa6a6"
210
- }
999
+ borderDisable: "rgba(255, 255, 255, 0)"
211
1000
  },
212
1001
  secondary: {
213
- bg: "rgba(255, 128, 102, 0.4)",
214
- bgHover: "rgba(255, 170, 153, 0.4)",
215
- bgPress: "rgba(255, 85, 51, 0.4)",
216
- bgDisable: "rgba(255, 128, 102, 0.2)",
1002
+ bg: "#ccf6ff",
1003
+ bgHover: "#e5fbff",
1004
+ bgPress: "#b2f2ff",
1005
+ border: "#80eaff",
1006
+ borderHover: "#b2f2ff",
1007
+ borderPress: "rgba(255, 255, 255, 0)"
1008
+ },
1009
+ tertiary: {
1010
+ bg: "#dadbd7",
1011
+ bgHover: "#c1c2bc",
1012
+ bgPress: "#a8aaa2",
1013
+ border: "#c1c2bc",
1014
+ borderHover: "#a8aaa2",
1015
+ borderPress: "rgba(255, 255, 255, 0)"
1016
+ },
1017
+ text: {
1018
+ primary: "#000000",
1019
+ secondary: "#000000",
1020
+ tertiary: "#000000",
1021
+ disable: "#999999"
1022
+ }
1023
+ },
1024
+ mono: {
1025
+ primary: {
1026
+ bg: "#000000",
1027
+ bgHover: "#141d1f",
1028
+ bgPress: "#1b2628",
1029
+ border: "rgba(255, 255, 255, 0)",
1030
+ borderHover: "rgba(255, 255, 255, 0)",
1031
+ borderPress: "rgba(255, 255, 255, 0)"
1032
+ },
1033
+ secondary: {
1034
+ bg: "rgba(0, 0, 0, 0.12)",
1035
+ bgHover: "rgba(21, 28, 30, 0.12)",
1036
+ bgPress: "rgba(32, 42, 44, 0.12)",
1037
+ border: "rgba(255, 255, 255, 0)",
1038
+ borderHover: "rgba(255, 255, 255, 0)",
1039
+ borderPress: "rgba(255, 255, 255, 0)"
1040
+ },
1041
+ tertiary: {
1042
+ bg: "rgba(0, 0, 0, 0)",
1043
+ bgHover: "rgba(21, 28, 30, 0.07)",
1044
+ bgPress: "rgba(32, 42, 44, 0.12)",
1045
+ border: "rgba(255, 255, 255, 0)",
1046
+ borderHover: "rgba(255, 255, 255, 0)",
1047
+ borderPress: "rgba(255, 255, 255, 0)"
1048
+ },
1049
+ text: {
1050
+ primary: "#ffffff",
1051
+ secondary: "#000000",
1052
+ tertiary: "#000000"
1053
+ }
1054
+ },
1055
+ brandExtra: {
1056
+ primary: {
1057
+ bg: "#bae831",
1058
+ bgHover: "#cef655",
1059
+ bgPress: "#9bc323",
1060
+ border: "rgba(255, 255, 255, 0)",
1061
+ borderHover: "rgba(255, 255, 255, 0)",
1062
+ borderPress: "rgba(255, 255, 255, 0)"
1063
+ },
1064
+ secondary: {
1065
+ bg: "rgba(186, 232, 49, 0.4)",
1066
+ bgHover: "rgba(206, 246, 85, 0.4)",
1067
+ bgPress: "rgba(186, 232, 49, 0.4)",
217
1068
  border: "rgba(255, 255, 255, 0)",
218
1069
  borderHover: "rgba(255, 255, 255, 0)",
219
- borderPress: "rgba(255, 255, 255, 0)",
220
- borderDisable: "rgba(255, 255, 255, 0)",
221
- text: {
222
- primary: "#ffffff",
223
- secondary: "#ffffff",
224
- disable: "rgba(255, 255, 255, 0.4)"
225
- }
1070
+ borderPress: "rgba(255, 255, 255, 0)"
226
1071
  },
227
1072
  tertiary: {
228
- bg: "rgba(255, 255, 255, 0)",
229
- bgHover: "rgba(255, 128, 102, 0.12)",
230
- bgPress: "rgba(255, 128, 102, 0.08)",
231
- bgDisable: "rgba(255, 255, 255, 0)",
1073
+ bg: "rgba(186, 232, 49, 0)",
1074
+ bgHover: "rgba(206, 246, 85, 0.07)",
1075
+ bgPress: "rgba(186, 232, 49, 0.12)",
232
1076
  border: "rgba(255, 255, 255, 0)",
233
1077
  borderHover: "rgba(255, 255, 255, 0)",
234
- borderPress: "rgba(255, 255, 255, 0)",
235
- borderDisable: "rgba(255, 255, 255, 0)",
236
- text: {
237
- primary: "#ff8066",
238
- secondary: "#ffffff",
239
- disable: "rgba(255, 128, 102, 0.4)"
240
- }
1078
+ borderPress: "rgba(255, 255, 255, 0)"
1079
+ },
1080
+ text: {
1081
+ primary: "#000000",
1082
+ secondary: "#000000",
1083
+ tertiary: "#79971b"
241
1084
  }
242
1085
  },
243
- mono: {
1086
+ alert: {
1087
+ bg: "#ffbfb2",
1088
+ border: "#e84f30",
244
1089
  primary: {
245
- bg: "#ffffff",
246
- bgHover: "#f0f4f4",
247
- bgPress: "#f6f8f9",
248
- bgDisable: "#707777",
1090
+ bg: "#e84f30",
1091
+ bgHover: "#f67055",
1092
+ bgPress: "#c33d22",
249
1093
  border: "rgba(255, 255, 255, 0)",
250
1094
  borderHover: "rgba(255, 255, 255, 0)",
251
- borderPress: "rgba(255, 255, 255, 0)",
252
- borderDisable: "rgba(255, 255, 255, 0)",
253
- text: {
254
- primary: "#000000",
255
- secondary: "#ffffff",
256
- disable: "#a6b5b5"
257
- }
1095
+ borderPress: "rgba(255, 255, 255, 0)"
258
1096
  },
259
1097
  secondary: {
260
- bg: "rgba(255, 255, 255, 0.4)",
261
- bgHover: "rgba(255, 255, 255, 0.34)",
262
- bgPress: "rgba(255, 255, 255, 0.44)",
263
- bgDisable: "rgba(255, 255, 255, 0.2)",
1098
+ bg: "rgba(232, 79, 48, 0.4)",
1099
+ bgHover: "rgba(246, 112, 85, 0.4)",
1100
+ bgPress: "rgba(195, 61, 34, 0.4)",
264
1101
  border: "rgba(255, 255, 255, 0)",
265
1102
  borderHover: "rgba(255, 255, 255, 0)",
266
- borderPress: "rgba(255, 255, 255, 0)",
267
- borderDisable: "rgba(255, 255, 255, 0)",
268
- text: {
269
- primary: "#000000",
270
- secondary: "#ffffff",
271
- disable: "rgba(0, 0, 0, 0.4)"
272
- }
1103
+ borderPress: "rgba(255, 255, 255, 0)"
273
1104
  },
274
1105
  tertiary: {
275
- bg: "rgba(255, 255, 255, 0)",
276
- bgHover: "rgba(255, 255, 255, 0.12)",
277
- bgPress: "rgba(255, 255, 255, 0.08)",
278
- bgDisable: "rgba(255, 255, 255, 0)",
1106
+ bg: "rgba(255, 43, 0, 0)",
1107
+ bgHover: "rgba(255, 85, 51, 0.07)",
1108
+ bgPress: "rgba(204, 34, 0, 0.12)",
279
1109
  border: "rgba(255, 255, 255, 0)",
280
1110
  borderHover: "rgba(255, 255, 255, 0)",
281
- borderPress: "rgba(255, 255, 255, 0)",
282
- borderDisable: "rgba(255, 255, 255, 0)",
283
- text: {
284
- primary: "#ffffff",
285
- secondary: "#ffffff",
286
- disable: "rgba(255, 255, 255, 0.4)"
287
- }
1111
+ borderPress: "rgba(255, 255, 255, 0)"
1112
+ },
1113
+ text: {
1114
+ primary: "#ffffff",
1115
+ secondary: "#000000",
1116
+ tertiary: "#c33d22"
288
1117
  }
289
1118
  },
290
1119
  input: {
291
- bg: "rgba(255, 255, 255, 0.12)",
292
- bgHover: "rgba(255, 255, 255, 0.15)",
293
- bgDisable: "rgba(255, 255, 255, 0.25)",
294
- border: "rgba(255, 255, 255, 0)",
295
- borderHover: "rgba(255, 255, 255, 0.1)",
296
- borderDisable: "rgba(255, 255, 255, 0)",
297
- text: "#ffffff",
298
- textDisable: "rgba(255, 255, 255, 0.36)",
299
- placeholder: "rgba(255, 255, 255, 0.55)"
1120
+ bg: "#dadbd7",
1121
+ bgHover: "#c1c2bc",
1122
+ bgDisable: "#dadbd7",
1123
+ border: "#c1c2bc",
1124
+ borderHover: "#a8aaa2",
1125
+ borderDisable: "rgba(0, 0, 0, 0)",
1126
+ text: "#050505",
1127
+ placeholder: "#8e9187",
1128
+ textDisable: "rgba(5, 5, 5, 0.2)"
300
1129
  },
301
1130
  focus: {
302
- bg: "rgba(255, 255, 255, 1)"
1131
+ bg: "#ffffff",
1132
+ border: "#31cae8"
303
1133
  },
304
1134
  check: {
305
- bg: "#ffffff",
306
- bgHover: "#f0f4f4",
307
- bgDisable: "rgba(255, 255, 255, 0.2)"
1135
+ bg: "#ccf6ff",
1136
+ bgHover: "#e5fbff",
1137
+ bgDisable: "rgba(0, 0, 0, 0.25)",
1138
+ border: "#80eaff",
1139
+ borderHover: "#b2f2ff",
1140
+ borderDisable: "rgba(0, 0, 0, 0)",
1141
+ text: "#000000"
308
1142
  },
309
1143
  faint: {
310
- bg: "rgba(255, 255, 255, 0.15)",
311
- bgHover: "rgba(255, 255, 255, 0.2)",
312
- border: "rgba(255, 255, 255, 0)",
313
- borderHover: "rgba(255, 255, 255, 0.16)"
1144
+ bg: "rgba(0, 0, 0, 0.15)",
1145
+ bgHover: "rgba(0, 0, 0, 0.2)",
1146
+ border: "rgba(0, 0, 0, 0.1)",
1147
+ borderHover: "rgba(0, 0, 0, 0.15)"
314
1148
  },
315
1149
  switch: {
316
- bg: "rgba(255, 255, 255, 0.1)",
317
- bgHover: "rgba(255, 255, 255, 0.15)"
318
- },
319
- segmented: {
320
- bg: "rgba(255, 255, 255, 0.08)",
321
- bgHover: "rgba(255, 255, 255, 0.10)",
322
- bgActive: "#ffffff",
323
- textActive: "#1a1a1a"
1150
+ bg: "rgba(0, 0, 0, 0.1)",
1151
+ bgHover: "rgba(0, 0, 0, 0.15)"
324
1152
  },
325
1153
  text: {
326
- primary: "#ffffff",
327
- secondary: "#ffffff",
328
- faint: "#000000",
329
- disable: "rgba(255, 255, 255, 0.4)"
1154
+ primary: "#000000",
1155
+ disable: "rgba(0, 0, 0, 0.4)"
330
1156
  },
331
1157
  link: {
332
- primary: "#66e6ff",
333
- primaryHover: "rgba(102, 230, 255, 0.7)",
334
- secondary: "#d9ff66",
335
- secondaryHover: "rgba(217, 255, 102, 0.7)"
1158
+ primary: "#22a8c3",
1159
+ primaryHover: "#31cae8",
1160
+ secondary: "#9bc323",
1161
+ secondaryHover: "#bae831"
1162
+ },
1163
+ segmented: {
1164
+ bg: "rgba(0, 0, 0, 0.08)",
1165
+ bgHover: "rgba(0, 0, 0, 0.08)",
1166
+ bgActive: "#ffffff",
1167
+ border: "rgba(0, 0, 0, 0.1)",
1168
+ borderHover: "rgba(0, 0, 0, 0.1)",
1169
+ borderActive: "rgba(0, 0, 0, 0)",
1170
+ text: "#000000",
1171
+ textDisable: "rgba(0, 0, 0, 0.4)"
1172
+ },
1173
+ toggleButton: {
1174
+ bg: "#dadbd7",
1175
+ bgHover: "#c1c2bc",
1176
+ bgPress: "#d2e4e2",
1177
+ bgDisable: "#dadbd7",
1178
+ border: "#c1c2bc",
1179
+ borderHover: "#a8aaa2",
1180
+ borderPress: "#b2f2ff",
1181
+ borderDisable: "rgba(0, 0, 0, 0.1)",
1182
+ text: "#000000",
1183
+ textDisable: "rgba(255, 255, 255, 0.4)"
336
1184
  }
337
1185
  }
338
1186
  };
339
1187
 
340
- // src/tokens/xsolla-light.json
341
- var xsolla_light_default = {
1188
+ // src/tokens/ltg-dark.json
1189
+ var ltg_dark_default = {
342
1190
  background: {
343
- primary: "#ffffff",
344
- secondary: "#f3f3f1",
1191
+ primary: "#0d143a",
1192
+ secondary: "#161d45",
345
1193
  inverse: "#000000",
346
1194
  brand: {
347
- primary: "#66e6ff",
348
- secondary: "#99eeff"
1195
+ primary: "#454f88",
1196
+ secondary: "#2b335e"
349
1197
  },
350
1198
  brandExtra: {
351
- primary: "#d9ff66",
352
- secondary: "#e6ff99"
1199
+ primary: "#292f52",
1200
+ secondary: "#2d3358"
353
1201
  },
354
1202
  success: {
355
- primary: "#33ff88",
356
- secondary: "#ccffe1"
1203
+ primary: "#14b87e",
1204
+ secondary: "#75f0b9"
357
1205
  },
358
1206
  warning: {
359
- primary: "#ffdd33",
360
- secondary: "#fff7cc"
1207
+ primary: "#ffee99",
1208
+ secondary: "#ffdd33"
361
1209
  },
362
1210
  alert: {
363
- primary: "#ff5533",
364
- secondary: "#ffd5cc"
1211
+ primary: "#e80000",
1212
+ secondary: "#f53d3d"
365
1213
  },
366
1214
  neutral: {
367
- primary: "#5533ff",
368
- secondary: "#eae5ff"
1215
+ primary: "#7f8bc9",
1216
+ secondary: "#b0baee"
369
1217
  }
370
1218
  },
371
1219
  content: {
372
- primary: "#000000",
373
- secondary: "rgba(0, 0, 0, 0.75)",
374
- tertiary: "rgba(0, 0, 0, 0.6)",
375
- inverse: "#ffffff",
1220
+ primary: "#ffffff",
1221
+ secondary: "rgba(255, 255, 255, 0.76)",
1222
+ tertiary: "rgba(255, 255, 255, 0.5)",
1223
+ inverse: "#000000",
376
1224
  brand: {
377
- primary: "#00aacc",
378
- secondary: "#00d4ff"
1225
+ primary: "#ffffff",
1226
+ secondary: "rgba(255, 255, 255, 0.76)"
379
1227
  },
380
1228
  brandExtra: {
381
- primary: "#739900",
382
- secondary: "#99cc00"
1229
+ primary: "#8576fd",
1230
+ secondary: "#aea0ff"
383
1231
  },
384
1232
  success: {
385
- primary: "#009940",
386
- secondary: "#00cc55"
1233
+ primary: "#66ffa6",
1234
+ secondary: "#00ff6a"
387
1235
  },
388
1236
  warning: {
389
- primary: "#ccaa00",
390
- secondary: "#ffdd33"
1237
+ primary: "#ffe566",
1238
+ secondary: "#ffd400"
391
1239
  },
392
1240
  alert: {
393
- primary: "#cc2200",
394
- secondary: "#ff5533"
1241
+ primary: "#e80000",
1242
+ secondary: "#f53d3d"
395
1243
  },
396
1244
  neutral: {
397
- primary: "#2200cc",
398
- secondary: "#2b00ff"
1245
+ primary: "#aa99ff",
1246
+ secondary: "#8066ff"
399
1247
  },
400
1248
  on: {
401
- brand: "#000000",
402
- brandExtra: "#000000",
403
- success: "#000000",
404
- warning: "#000000",
1249
+ brand: "#ffffff",
1250
+ brandExtra: "#ffffff",
1251
+ success: "#ffffff",
1252
+ warning: "#ffffff",
405
1253
  alert: "#ffffff",
406
1254
  neutral: "#ffffff"
407
1255
  },
@@ -411,272 +1259,243 @@ var xsolla_light_default = {
411
1259
  }
412
1260
  },
413
1261
  border: {
414
- primary: "#000000",
415
- secondary: "rgba(0, 0, 0, 0.1)",
416
- inverse: "rgba(255, 255, 255, 0.15)",
417
- brand: "#00d4ff",
418
- brandExtra: "#bfff00",
419
- success: "#009940",
420
- warning: "#ffd400",
421
- alert: "#ff2b00",
422
- neutral: "#2200cc"
1262
+ primary: "#ffffff",
1263
+ secondary: "rgba(255, 255, 255, 0.24)",
1264
+ inverse: "rgba(0, 0, 0, 0.15)",
1265
+ brand: "#ffffff",
1266
+ brandExtra: "#8576fd",
1267
+ success: "#14b87e",
1268
+ warning: "#ffe566",
1269
+ alert: "#f53d3d",
1270
+ neutral: "#7f8bc9"
423
1271
  },
424
1272
  overlay: {
425
- mono: "rgba(0, 0, 0, 0.05)",
426
- brand: "rgba(102, 230, 255, 0.3)",
427
- brandExtra: "rgba(194, 255, 102, 0.3)",
428
- success: "rgba(0, 153, 92, 0.3)",
429
- warning: "rgba(255, 178, 0, 0.3)",
430
- alert: "rgba(255, 17, 0, 0.3)",
431
- neutral: "rgba(0, 7, 204, 0.3)"
1273
+ mono: "rgba(255, 255, 255, 0.1)",
1274
+ brand: "rgba(255, 255, 255, 0.3)",
1275
+ brandExtra: "rgba(133, 118, 253, 0.3)",
1276
+ success: "rgba(20, 184, 126, 0.3)",
1277
+ warning: "rgba(255, 229, 102, 0.3)",
1278
+ alert: "rgba(245, 61, 61, 0.3)",
1279
+ neutral: "rgba(127, 139, 201, 0.3)"
432
1280
  },
433
1281
  layer: {
434
- scrim: "rgba(0, 0, 0, 0.75)",
435
- float: "#ffffff"
1282
+ scrim: "rgba(0, 0, 0, 0.5)",
1283
+ float: "#161d45"
436
1284
  },
437
1285
  control: {
438
1286
  brand: {
439
1287
  primary: {
440
- bg: "#33ddff",
441
- bgHover: "#66e6ff",
442
- bgPress: "#00d4ff",
443
- bgDisable: "#c4d1d4",
1288
+ bg: "#ffca43",
1289
+ bgHover: "#f2c173",
1290
+ bgPress: "#ffbb33",
1291
+ bgDisable: "#484848",
444
1292
  border: "rgba(255, 255, 255, 0)",
445
1293
  borderHover: "rgba(255, 255, 255, 0)",
446
1294
  borderPress: "rgba(255, 255, 255, 0)",
447
- borderDisable: "rgba(255, 255, 255, 0)",
448
- text: {
449
- primary: "#000000",
450
- secondary: "#000000",
451
- disable: "#89a4a9"
452
- }
1295
+ borderDisable: "rgba(255, 255, 255, 0)"
453
1296
  },
454
1297
  secondary: {
455
- bg: "rgba(51, 221, 255, 0.4)",
456
- bgHover: "rgba(51, 221, 255, 0.2)",
457
- bgPress: "rgba(51, 221, 255, 0.5)",
458
- bgDisable: "rgba(51, 221, 255, 0.2)",
1298
+ bg: "#ffffff",
1299
+ bgHover: "rgba(255, 255, 255, 0.76)",
1300
+ bgPress: "rgba(255, 255, 255, 0.5)",
459
1301
  border: "rgba(255, 255, 255, 0)",
460
1302
  borderHover: "rgba(255, 255, 255, 0)",
461
- borderPress: "rgba(255, 255, 255, 0)",
462
- borderDisable: "rgba(255, 255, 255, 0)",
463
- text: {
464
- primary: "#000000",
465
- secondary: "#000000",
466
- disable: "rgba(0, 0, 0, 0.4)"
467
- }
1303
+ borderPress: "rgba(255, 255, 255, 0)"
468
1304
  },
469
1305
  tertiary: {
470
- bg: "rgba(0, 0, 0, 0)",
471
- bgHover: "rgba(51, 221, 255, 0.12)",
472
- bgPress: "rgba(51, 221, 255, 0.08)",
473
- bgDisable: "rgba(0, 0, 0, 0)",
474
- border: "rgba(0, 0, 0, 0)",
475
- borderHover: "rgba(0, 0, 0, 0)",
476
- borderPress: "rgba(0, 0, 0, 0)",
477
- borderDisable: "rgba(0, 0, 0, 0)",
478
- text: {
479
- primary: "#00aacc",
480
- secondary: "#000000",
481
- disable: "rgba(0, 170, 204, 0.4)"
482
- }
1306
+ bg: "#ffffff",
1307
+ bgHover: "rgba(255, 255, 255, 0.76)",
1308
+ bgPress: "rgba(255, 255, 255, 0.5)",
1309
+ border: "rgba(255, 255, 255, 0)",
1310
+ borderHover: "rgba(255, 255, 255, 0)",
1311
+ borderPress: "rgba(255, 255, 255, 0)"
1312
+ },
1313
+ text: {
1314
+ primary: "#000000",
1315
+ secondary: "#000000",
1316
+ tertiary: "#000000",
1317
+ disable: "#c4d1d4"
483
1318
  }
484
1319
  },
485
- brandExtra: {
1320
+ mono: {
486
1321
  primary: {
487
- bg: "#bfff00",
488
- bgHover: "#ccff33",
489
- bgPress: "#99cc00",
490
- bgDisable: "#d4d9c4",
1322
+ bg: "#ffffff",
1323
+ bgHover: "#f0f4f4",
1324
+ bgPress: "#f6f8f9",
491
1325
  border: "rgba(255, 255, 255, 0)",
492
1326
  borderHover: "rgba(255, 255, 255, 0)",
493
- borderPress: "rgba(255, 255, 255, 0)",
494
- borderDisable: "rgba(255, 255, 255, 0)",
495
- text: {
496
- primary: "#000000",
497
- secondary: "#000000",
498
- disable: "#8a9480"
499
- }
1327
+ borderPress: "rgba(255, 255, 255, 0)"
500
1328
  },
501
1329
  secondary: {
502
- bg: "rgba(191, 255, 0, 0.4)",
503
- bgHover: "rgba(204, 255, 51, 0.4)",
504
- bgPress: "rgba(153, 204, 0, 0.4)",
505
- bgDisable: "rgba(191, 255, 0, 0.2)",
1330
+ bg: "rgba(255, 255, 255, 0.1)",
1331
+ bgHover: "rgba(255, 255, 255, 0.34)",
1332
+ bgPress: "rgba(255, 255, 255, 0.44)",
1333
+ border: "#ffffff",
1334
+ borderHover: "#ffffff",
1335
+ borderPress: "#ffffff"
1336
+ },
1337
+ tertiary: {
1338
+ bg: "#ffffff",
1339
+ bgHover: "rgba(255, 255, 255, 0.76)",
1340
+ bgPress: "rgba(255, 255, 255, 0.5)",
506
1341
  border: "rgba(255, 255, 255, 0)",
507
1342
  borderHover: "rgba(255, 255, 255, 0)",
508
- borderPress: "rgba(255, 255, 255, 0)",
509
- borderDisable: "rgba(255, 255, 255, 0)",
510
- text: {
511
- primary: "#000000",
512
- secondary: "#000000",
513
- disable: "rgba(0, 0, 0, 0.4)"
514
- }
1343
+ borderPress: "rgba(255, 255, 255, 0)"
515
1344
  },
516
- tertiary: {
517
- bg: "rgba(0, 0, 0, 0)",
518
- bgHover: "rgba(191, 255, 0, 0.12)",
519
- bgPress: "rgba(191, 255, 0, 0.08)",
520
- bgDisable: "rgba(0, 0, 0, 0)",
521
- border: "rgba(0, 0, 0, 0)",
522
- borderHover: "rgba(0, 0, 0, 0)",
523
- borderPress: "rgba(0, 0, 0, 0)",
524
- borderDisable: "rgba(0, 0, 0, 0)",
525
- text: {
526
- primary: "#739900",
527
- secondary: "#000000",
528
- disable: "rgba(115, 153, 0, 0.4)"
529
- }
1345
+ text: {
1346
+ primary: "#000000",
1347
+ secondary: "#ffffff",
1348
+ tertiary: "#000000"
530
1349
  }
531
1350
  },
532
- alert: {
1351
+ brandExtra: {
533
1352
  primary: {
534
- bg: "#ff2b00",
535
- bgHover: "#ff5533",
536
- bgPress: "#cc2200",
537
- bgDisable: "#d9c4c4",
1353
+ bg: "#292f52",
1354
+ bgHover: "#ccff33",
1355
+ bgPress: "#e6ff99",
538
1356
  border: "rgba(255, 255, 255, 0)",
539
1357
  borderHover: "rgba(255, 255, 255, 0)",
540
- borderPress: "rgba(255, 255, 255, 0)",
541
- borderDisable: "rgba(255, 255, 255, 0)",
542
- text: {
543
- primary: "#ffffff",
544
- secondary: "#000000",
545
- disable: "#a08080"
546
- }
1358
+ borderPress: "rgba(255, 255, 255, 0)"
547
1359
  },
548
1360
  secondary: {
549
- bg: "rgba(255, 43, 0, 0.4)",
550
- bgHover: "rgba(255, 85, 51, 0.4)",
551
- bgPress: "rgba(204, 34, 0, 0.4)",
552
- bgDisable: "rgba(255, 43, 0, 0.2)",
1361
+ bg: "rgba(186, 232, 49, 0.4)",
1362
+ bgHover: "rgba(206, 246, 85, 0.4)",
1363
+ bgPress: "rgba(186, 232, 49, 0.4)",
553
1364
  border: "rgba(255, 255, 255, 0)",
554
1365
  borderHover: "rgba(255, 255, 255, 0)",
555
- borderPress: "rgba(255, 255, 255, 0)",
556
- borderDisable: "rgba(255, 255, 255, 0)",
557
- text: {
558
- primary: "#000000",
559
- secondary: "#000000",
560
- disable: "rgba(0, 0, 0, 0.4)"
561
- }
1366
+ borderPress: "rgba(255, 255, 255, 0)"
562
1367
  },
563
1368
  tertiary: {
564
- bg: "rgba(0, 0, 0, 0)",
565
- bgHover: "rgba(255, 43, 0, 0.12)",
566
- bgPress: "rgba(255, 43, 0, 0.08)",
567
- bgDisable: "rgba(0, 0, 0, 0)",
568
- border: "rgba(0, 0, 0, 0)",
569
- borderHover: "rgba(0, 0, 0, 0)",
570
- borderPress: "rgba(0, 0, 0, 0)",
571
- borderDisable: "rgba(0, 0, 0, 0)",
572
- text: {
573
- primary: "#cc2200",
574
- secondary: "#000000",
575
- disable: "rgba(204, 34, 0, 0.4)"
576
- }
1369
+ bg: "#ffffff",
1370
+ bgHover: "rgba(255, 255, 255, 0.76)",
1371
+ bgPress: "rgba(255, 255, 255, 0.5)",
1372
+ border: "rgba(255, 255, 255, 0)",
1373
+ borderHover: "rgba(255, 255, 255, 0)",
1374
+ borderPress: "rgba(255, 255, 255, 0)"
1375
+ },
1376
+ text: {
1377
+ primary: "#000000",
1378
+ secondary: "#000000",
1379
+ tertiary: "#000000"
577
1380
  }
578
1381
  },
579
- mono: {
1382
+ alert: {
1383
+ bg: "#e80000",
1384
+ border: "#f53d3d",
580
1385
  primary: {
581
- bg: "#000000",
582
- bgHover: "#151c1e",
583
- bgPress: "#202a2c",
584
- bgDisable: "#b0b0b0",
1386
+ bg: "#ff8066",
1387
+ bgHover: "#ffaa99",
1388
+ bgPress: "#ff5533",
585
1389
  border: "rgba(255, 255, 255, 0)",
586
1390
  borderHover: "rgba(255, 255, 255, 0)",
587
- borderPress: "rgba(255, 255, 255, 0)",
588
- borderDisable: "rgba(255, 255, 255, 0)",
589
- text: {
590
- primary: "#ffffff",
591
- secondary: "#000000",
592
- disable: "#707070"
593
- }
1391
+ borderPress: "rgba(255, 255, 255, 0)"
594
1392
  },
595
1393
  secondary: {
596
- bg: "rgba(0, 0, 0, 0.12)",
597
- bgHover: "rgba(0, 0, 0, 0.08)",
598
- bgPress: "rgba(0, 0, 0, 0.15)",
599
- bgDisable: "rgba(0, 0, 0, 0.06)",
1394
+ bg: "rgba(255, 128, 102, 0.4)",
1395
+ bgHover: "rgba(255, 170, 153, 0.4)",
1396
+ bgPress: "rgba(255, 85, 51, 0.4)",
600
1397
  border: "rgba(255, 255, 255, 0)",
601
1398
  borderHover: "rgba(255, 255, 255, 0)",
602
- borderPress: "rgba(255, 255, 255, 0)",
603
- borderDisable: "rgba(255, 255, 255, 0)",
604
- text: {
605
- primary: "#000000",
606
- secondary: "#000000",
607
- disable: "rgba(0, 0, 0, 0.4)"
608
- }
1399
+ borderPress: "rgba(255, 255, 255, 0)"
609
1400
  },
610
1401
  tertiary: {
611
- bg: "rgba(0, 0, 0, 0)",
612
- bgHover: "rgba(0, 0, 0, 0.08)",
613
- bgPress: "rgba(0, 0, 0, 0.05)",
614
- bgDisable: "rgba(0, 0, 0, 0)",
615
- border: "rgba(0, 0, 0, 0)",
616
- borderHover: "rgba(0, 0, 0, 0)",
617
- borderPress: "rgba(0, 0, 0, 0)",
618
- borderDisable: "rgba(0, 0, 0, 0)",
619
- text: {
620
- primary: "#000000",
621
- secondary: "#000000",
622
- disable: "rgba(0, 0, 0, 0.4)"
623
- }
1402
+ bg: "#ffffff",
1403
+ bgHover: "rgba(255, 255, 255, 0.76)",
1404
+ bgPress: "rgba(255, 255, 255, 0.5)",
1405
+ border: "rgba(255, 255, 255, 0)",
1406
+ borderHover: "rgba(255, 255, 255, 0)",
1407
+ borderPress: "rgba(255, 255, 255, 0)"
1408
+ },
1409
+ text: {
1410
+ primary: "#ffffff",
1411
+ secondary: "#000000",
1412
+ tertiary: "#000000"
624
1413
  }
625
1414
  },
626
1415
  input: {
627
- bg: "rgba(0, 0, 0, 0.07)",
628
- bgHover: "rgba(0, 0, 0, 0.1)",
629
- bgDisable: "rgba(0, 0, 0, 0.15)",
630
- border: "rgba(0, 0, 0, 0)",
631
- borderHover: "rgba(0, 0, 0, 0.1)",
632
- borderDisable: "rgba(0, 0, 0, 0)",
633
- text: "#000000",
634
- textDisable: "rgba(0, 0, 0, 0.36)",
635
- placeholder: "rgba(0, 0, 0, 0.6)"
1416
+ bg: "rgba(255, 255, 255, 0.12)",
1417
+ bgHover: "rgba(255, 255, 255, 0.15)",
1418
+ bgDisable: "rgba(255, 255, 255, 0.25)",
1419
+ border: "rgba(255, 255, 255, 0)",
1420
+ borderHover: "rgba(255, 255, 255, 0.1)",
1421
+ borderDisable: "rgba(255, 255, 255, 0)",
1422
+ text: "#ffffff",
1423
+ placeholder: "rgba(255, 255, 255, 0.55)",
1424
+ textDisable: "rgba(255, 255, 255, 0.36)"
636
1425
  },
637
1426
  focus: {
638
- bg: "rgba(255, 255, 255, 1)"
1427
+ bg: "rgba(255, 255, 255, 0.2)",
1428
+ border: "#8576fd"
639
1429
  },
640
1430
  check: {
641
- bg: "#000000",
642
- bgHover: "#2b383b",
643
- bgDisable: "rgba(0, 0, 0, 0.2)"
1431
+ bg: "#ffffff",
1432
+ bgHover: "#f6f8f9",
1433
+ bgDisable: "rgba(255, 255, 255, 0.2)",
1434
+ border: "#ffffff",
1435
+ borderHover: "#ffffff",
1436
+ borderDisable: "#ffffff",
1437
+ text: "#ffffff"
644
1438
  },
645
1439
  faint: {
646
- bg: "rgba(0, 0, 0, 0.15)",
647
- bgHover: "rgba(0, 0, 0, 0.2)",
648
- border: "rgba(0, 0, 0, 0)",
649
- borderHover: "rgba(0, 0, 0, 0.1)"
1440
+ bg: "rgba(255, 255, 255, 0.15)",
1441
+ bgHover: "rgba(255, 255, 255, 0.2)",
1442
+ border: "rgba(255, 255, 255, 0)",
1443
+ borderHover: "rgba(255, 255, 255, 0.24)"
650
1444
  },
651
1445
  switch: {
652
- bg: "rgba(0, 0, 0, 0.1)",
653
- bgHover: "rgba(0, 0, 0, 0.15)"
654
- },
655
- segmented: {
656
- bg: "rgba(0, 0, 0, 0.08)",
657
- bgHover: "rgba(0, 0, 0, 0.10)",
658
- bgActive: "#ffffff",
659
- textActive: "#1a1a1a"
1446
+ bg: "rgba(255, 255, 255, 0.1)",
1447
+ bgHover: "rgba(255, 255, 255, 0.15)"
660
1448
  },
661
1449
  text: {
662
- primary: "#000000",
663
- secondary: "#000000",
664
- faint: "#ffffff",
665
- disable: "rgba(0, 0, 0, 0.4)"
1450
+ primary: "#ffffff",
1451
+ disable: "#8c8b9a"
666
1452
  },
667
1453
  link: {
668
- primary: "#008099",
669
- primaryHover: "rgba(0, 128, 153, 0.5)",
670
- secondary: "#739900",
671
- secondaryHover: "rgba(77, 102, 0, 0.5)"
1454
+ primary: "#ffffff",
1455
+ primaryHover: "rgba(255, 255, 255, 0.7)",
1456
+ secondary: "#8576fd",
1457
+ secondaryHover: "rgba(157, 149, 222, 0.7)"
1458
+ },
1459
+ segmented: {
1460
+ bg: "#ffffff",
1461
+ bgHover: "#ffffff",
1462
+ bgActive: "#ffffff",
1463
+ border: "#ffffff",
1464
+ borderHover: "#ffffff",
1465
+ borderActive: "#ffffff",
1466
+ text: "#ffffff",
1467
+ textDisable: "#ffffff"
1468
+ },
1469
+ toggleButton: {
1470
+ bg: "#ffffff",
1471
+ bgHover: "#ffffff",
1472
+ bgPress: "#ffffff",
1473
+ bgDisable: "#ffffff",
1474
+ border: "#ffffff",
1475
+ borderHover: "#ffffff",
1476
+ borderPress: "#ffffff",
1477
+ borderDisable: "#ffffff",
1478
+ text: "#ffffff",
1479
+ textDisable: "#ffffff"
672
1480
  }
673
1481
  }
674
1482
  };
675
1483
 
676
1484
  // src/tokens/colors.ts
677
1485
  var colors = {
678
- dark: xsolla_dark_default,
679
- light: xsolla_light_default
1486
+ // Default themes (Pentagram)
1487
+ dark: pentagram_dark_default,
1488
+ light: pentagram_light_default,
1489
+ // Pentagram theme aliases
1490
+ "pentagram-dark": pentagram_dark_default,
1491
+ "pentagram-light": pentagram_light_default,
1492
+ // Xsolla themes
1493
+ "xsolla-dark": xsolla_dark_default,
1494
+ "xsolla-light": xsolla_light_default,
1495
+ xsollaDark: xsolla_dark_default,
1496
+ xsollaLight: xsolla_light_default,
1497
+ // LTG themes
1498
+ "ltg-dark": ltg_dark_default
680
1499
  };
681
1500
 
682
1501
  // src/tokens/spacing.ts
@@ -749,7 +1568,7 @@ var themeConfig = (mode = "dark") => ({
749
1568
  iconContainerSize: 64,
750
1569
  iconPadding: 20,
751
1570
  loadingPadding: 40,
752
- borderRadius: 4,
1571
+ borderRadius: 8,
753
1572
  labelIconSize: 18,
754
1573
  labelIconGap: 6
755
1574
  },
@@ -763,7 +1582,7 @@ var themeConfig = (mode = "dark") => ({
763
1582
  iconContainerSize: 56,
764
1583
  iconPadding: 20,
765
1584
  loadingPadding: 36,
766
- borderRadius: 4,
1585
+ borderRadius: 8,
767
1586
  labelIconSize: 16,
768
1587
  labelIconGap: 6
769
1588
  },
@@ -777,7 +1596,7 @@ var themeConfig = (mode = "dark") => ({
777
1596
  iconContainerSize: 48,
778
1597
  iconPadding: 20,
779
1598
  loadingPadding: 32,
780
- borderRadius: 2,
1599
+ borderRadius: 8,
781
1600
  labelIconSize: 14,
782
1601
  labelIconGap: 4
783
1602
  },
@@ -791,7 +1610,7 @@ var themeConfig = (mode = "dark") => ({
791
1610
  iconContainerSize: 40,
792
1611
  iconPadding: 20,
793
1612
  loadingPadding: 28,
794
- borderRadius: 2,
1613
+ borderRadius: 4,
795
1614
  labelIconSize: 12,
796
1615
  labelIconGap: 4
797
1616
  },
@@ -805,7 +1624,7 @@ var themeConfig = (mode = "dark") => ({
805
1624
  iconContainerSize: 32,
806
1625
  iconPadding: 20,
807
1626
  loadingPadding: 28,
808
- borderRadius: 2,
1627
+ borderRadius: 4,
809
1628
  labelIconSize: 10,
810
1629
  labelIconGap: 4
811
1630
  }
@@ -1231,31 +2050,55 @@ var themeConfig = (mode = "dark") => ({
1231
2050
  const configs = {
1232
2051
  xl: {
1233
2052
  height: 64,
2053
+ containerPadding: 4,
2054
+ containerRadius: 8,
2055
+ itemHeight: 56,
2056
+ itemPaddingHorizontal: 20,
2057
+ itemPaddingVertical: 10,
2058
+ itemRadius: 6,
1234
2059
  fontSize: 20,
2060
+ lineHeight: 22,
1235
2061
  iconSize: 24,
1236
- gap: 8,
1237
- padding: 20
2062
+ gap: 8
1238
2063
  },
1239
2064
  lg: {
1240
2065
  height: 56,
2066
+ containerPadding: 4,
2067
+ containerRadius: 8,
2068
+ itemHeight: 48,
2069
+ itemPaddingHorizontal: 20,
2070
+ itemPaddingVertical: 10,
2071
+ itemRadius: 6,
1241
2072
  fontSize: 18,
2073
+ lineHeight: 20,
1242
2074
  iconSize: 24,
1243
- gap: 8,
1244
- padding: 16
2075
+ gap: 8
1245
2076
  },
1246
2077
  md: {
1247
2078
  height: 48,
2079
+ containerPadding: 4,
2080
+ containerRadius: 8,
2081
+ itemHeight: 40,
2082
+ itemPaddingHorizontal: 16,
2083
+ itemPaddingVertical: 8,
2084
+ itemRadius: 6,
1248
2085
  fontSize: 16,
2086
+ lineHeight: 18,
1249
2087
  iconSize: 24,
1250
- gap: 8,
1251
- padding: 12
2088
+ gap: 6
1252
2089
  },
1253
2090
  sm: {
1254
2091
  height: 40,
2092
+ containerPadding: 4,
2093
+ containerRadius: 4,
2094
+ itemHeight: 32,
2095
+ itemPaddingHorizontal: 12,
2096
+ itemPaddingVertical: 6,
2097
+ itemRadius: 2,
1255
2098
  fontSize: 14,
2099
+ lineHeight: 16,
1256
2100
  iconSize: 20,
1257
- gap: 6,
1258
- padding: 8
2101
+ gap: 4
1259
2102
  }
1260
2103
  };
1261
2104
  return configs[size];
@@ -1569,6 +2412,51 @@ var themeConfig = (mode = "dark") => ({
1569
2412
  containerPadding: 12,
1570
2413
  groupGap: 4
1571
2414
  };
2415
+ },
2416
+ toggleButtonGroup: (size) => {
2417
+ const configs = {
2418
+ xl: {
2419
+ height: 64,
2420
+ paddingHorizontal: 20,
2421
+ fontSize: 20,
2422
+ lineHeight: 22,
2423
+ iconSize: 24,
2424
+ gap: 4,
2425
+ borderRadius: 8,
2426
+ itemGap: 8
2427
+ },
2428
+ lg: {
2429
+ height: 56,
2430
+ paddingHorizontal: 20,
2431
+ fontSize: 18,
2432
+ lineHeight: 20,
2433
+ iconSize: 24,
2434
+ gap: 4,
2435
+ borderRadius: 8,
2436
+ itemGap: 8
2437
+ },
2438
+ md: {
2439
+ height: 48,
2440
+ paddingHorizontal: 20,
2441
+ fontSize: 16,
2442
+ lineHeight: 18,
2443
+ iconSize: 24,
2444
+ gap: 4,
2445
+ borderRadius: 8,
2446
+ itemGap: 8
2447
+ },
2448
+ sm: {
2449
+ height: 40,
2450
+ paddingHorizontal: 20,
2451
+ fontSize: 14,
2452
+ lineHeight: 16,
2453
+ iconSize: 20,
2454
+ gap: 4,
2455
+ borderRadius: 4,
2456
+ itemGap: 8
2457
+ }
2458
+ };
2459
+ return configs[size];
1572
2460
  }
1573
2461
  }
1574
2462
  });