@xsolla/xui-core 0.128.0 → 0.129.0

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 (8) hide show
  1. package/README.md +66 -5
  2. package/index.d.mts +3550 -3073
  3. package/index.d.ts +3550 -3073
  4. package/index.js +374 -927
  5. package/index.js.map +1 -1
  6. package/index.mjs +372 -926
  7. package/index.mjs.map +1 -1
  8. package/package.json +6 -1
package/index.mjs CHANGED
@@ -1,720 +1,6 @@
1
1
  // src/index.tsx
2
2
  import React2, { createContext, useContext, useState, useMemo } from "react";
3
3
 
4
- // src/tokens/xsolla-dark.json
5
- var xsolla_dark_default = {
6
- background: {
7
- primary: "#1b2628",
8
- secondary: "#141d1f",
9
- inverse: "#ffffff",
10
- brand: {
11
- primary: "#80eaff",
12
- secondary: "#0b3841"
13
- },
14
- brandExtra: {
15
- primary: "#cef655",
16
- secondary: "#566c13"
17
- },
18
- success: {
19
- primary: "#95ff80",
20
- secondary: "#14410b"
21
- },
22
- warning: {
23
- primary: "#ffc380",
24
- secondary: "#6c4313"
25
- },
26
- alert: {
27
- primary: "#e84f30",
28
- secondary: "#6c2213"
29
- },
30
- neutral: {
31
- primary: "#99aeb2",
32
- secondary: "#34474b"
33
- }
34
- },
35
- content: {
36
- primary: "#ffffff",
37
- secondary: "rgba(255, 255, 255, 0.72)",
38
- tertiary: "rgba(255, 255, 255, 0.58)",
39
- inverse: "#000000",
40
- brand: {
41
- primary: "#55dcf6",
42
- secondary: "#31cae8"
43
- },
44
- brandExtra: {
45
- primary: "#cef655",
46
- secondary: "#9bc323"
47
- },
48
- success: {
49
- primary: "#70f655",
50
- secondary: "#3dc322"
51
- },
52
- warning: {
53
- primary: "#f6ab55",
54
- secondary: "#c37822"
55
- },
56
- alert: {
57
- primary: "#f67055",
58
- secondary: "#e84f30"
59
- },
60
- neutral: {
61
- primary: "#99aeb2",
62
- secondary: "#607f85"
63
- },
64
- on: {
65
- brand: "#000000",
66
- brandExtra: "#000000",
67
- success: "#000000",
68
- warning: "#000000",
69
- alert: "#ffffff",
70
- neutral: "#ffffff"
71
- },
72
- static: {
73
- light: "#ffffff",
74
- dark: "#000000"
75
- }
76
- },
77
- border: {
78
- primary: "#ffffff",
79
- secondary: "rgba(255, 255, 255, 0.16)",
80
- inverse: "rgba(0, 0, 0, 0.15)",
81
- brand: "#55dcf6",
82
- brandExtra: "#cef655",
83
- success: "#70f655",
84
- warning: "#f6ab55",
85
- alert: "#f67055",
86
- neutral: "#9580ff"
87
- },
88
- overlay: {
89
- mono: "rgba(255, 255, 255, 0.1)",
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
- },
97
- layer: {
98
- scrim: "rgba(0, 0, 0, 0.5)",
99
- float: "#1b2628"
100
- },
101
- control: {
102
- brand: {
103
- primary: {
104
- bg: "#55dcf6",
105
- bgHover: "#80eaff",
106
- bgPress: "#31cae8",
107
- bgDisable: "#666666",
108
- border: "rgba(255, 255, 255, 0)",
109
- borderHover: "rgba(255, 255, 255, 0)",
110
- borderPress: "rgba(255, 255, 255, 0)",
111
- borderDisable: "rgba(255, 255, 255, 0)"
112
- },
113
- secondary: {
114
- bg: "rgba(128, 234, 255, 0.4)",
115
- bgHover: "rgba(178, 242, 255, 0.4)",
116
- bgPress: "rgba(85, 220, 246, 0.4)",
117
- border: "rgba(255, 255, 255, 0)",
118
- borderHover: "rgba(255, 255, 255, 0)",
119
- borderPress: "rgba(255, 255, 255, 0)"
120
- },
121
- tertiary: {
122
- bg: "rgba(255, 255, 255, 0)",
123
- bgHover: "rgba(178, 242, 255, 0.07)",
124
- bgPress: "rgba(85, 220, 246, 0.12)",
125
- border: "rgba(255, 255, 255, 0)",
126
- borderHover: "rgba(255, 255, 255, 0)",
127
- borderPress: "rgba(255, 255, 255, 0)"
128
- },
129
- ghost: {
130
- bg: "rgba(255, 255, 255, 0)",
131
- bgHover: "rgba(85, 220, 246, 0.04)",
132
- bgPress: "rgba(85, 220, 246, 0.08)",
133
- border: "rgba(85, 220, 246, 0.16)",
134
- borderHover: "rgba(85, 220, 246, 0.24)",
135
- borderPress: "rgba(85, 220, 246, 0.16)"
136
- },
137
- text: {
138
- primary: "#000000",
139
- secondary: "#ffffff",
140
- tertiary: "#55dcf6",
141
- ghost: "#55dcf6",
142
- disable: "#b3b3b3"
143
- }
144
- },
145
- mono: {
146
- primary: {
147
- bg: "#ffffff",
148
- bgHover: "#e8eced",
149
- bgPress: "#f4f5f6",
150
- border: "rgba(255, 255, 255, 0)",
151
- borderHover: "rgba(255, 255, 255, 0)",
152
- borderPress: "rgba(255, 255, 255, 0)"
153
- },
154
- secondary: {
155
- bg: "rgba(255, 255, 255, 0.4)",
156
- bgHover: "rgba(255, 255, 255, 0.34)",
157
- bgPress: "rgba(255, 255, 255, 0.44)",
158
- border: "rgba(255, 255, 255, 0)",
159
- borderHover: "rgba(255, 255, 255, 0)",
160
- borderPress: "rgba(255, 255, 255, 0)"
161
- },
162
- tertiary: {
163
- bg: "rgba(255, 255, 255, 0)",
164
- bgHover: "rgba(255, 255, 255, 0.07)",
165
- bgPress: "rgba(255, 255, 255, 0.12)",
166
- border: "rgba(255, 255, 255, 0)",
167
- borderHover: "rgba(255, 255, 255, 0)",
168
- borderPress: "rgba(255, 255, 255, 0)"
169
- },
170
- ghost: {
171
- bg: "rgba(255, 255, 255, 0)",
172
- bgHover: "rgba(255, 255, 255, 0.04)",
173
- bgPress: "rgba(255, 255, 255, 0.08)",
174
- border: "rgba(255, 255, 255, 0.16)",
175
- borderHover: "rgba(255, 255, 255, 0.24)",
176
- borderPress: "rgba(255, 255, 255, 0.16)"
177
- },
178
- text: {
179
- primary: "#000000",
180
- secondary: "#ffffff",
181
- tertiary: "#ffffff",
182
- ghost: "#ffffff"
183
- }
184
- },
185
- brandExtra: {
186
- primary: {
187
- bg: "#cef655",
188
- bgHover: "#bae831",
189
- bgPress: "#dfff80",
190
- border: "rgba(255, 255, 255, 0)",
191
- borderHover: "rgba(255, 255, 255, 0)",
192
- borderPress: "rgba(255, 255, 255, 0)"
193
- },
194
- secondary: {
195
- bg: "rgba(186, 232, 49, 0.4)",
196
- bgHover: "rgba(206, 246, 85, 0.4)",
197
- bgPress: "rgba(186, 232, 49, 0.4)",
198
- border: "rgba(255, 255, 255, 0)",
199
- borderHover: "rgba(255, 255, 255, 0)",
200
- borderPress: "rgba(255, 255, 255, 0)"
201
- },
202
- tertiary: {
203
- bg: "rgba(186, 232, 49, 0)",
204
- bgHover: "rgba(206, 246, 85, 0.07)",
205
- bgPress: "rgba(186, 232, 49, 0.12)",
206
- border: "rgba(255, 255, 255, 0)",
207
- borderHover: "rgba(255, 255, 255, 0)",
208
- borderPress: "rgba(255, 255, 255, 0)"
209
- },
210
- ghost: {
211
- bg: "rgba(255, 255, 255, 0)",
212
- bgHover: "rgba(206, 246, 85, 0.04)",
213
- bgPress: "rgba(206, 246, 85, 0.08)",
214
- border: "rgba(206, 246, 85, 0.16)",
215
- borderHover: "rgba(206, 246, 85, 0.24)",
216
- borderPress: "rgba(206, 246, 85, 0.16)"
217
- },
218
- text: {
219
- primary: "#000000",
220
- secondary: "#ffffff",
221
- tertiary: "#cef655",
222
- ghost: "#cef655"
223
- }
224
- },
225
- alert: {
226
- bg: "#6c2213",
227
- border: "#f67055",
228
- primary: {
229
- bg: "#f67055",
230
- bgHover: "#ff9580",
231
- bgPress: "#e84f30",
232
- border: "rgba(255, 255, 255, 0)",
233
- borderHover: "rgba(255, 255, 255, 0)",
234
- borderPress: "rgba(255, 255, 255, 0)"
235
- },
236
- secondary: {
237
- bg: "rgba(232, 79, 48, 0.4)",
238
- bgHover: "rgba(246, 112, 85, 0.4)",
239
- bgPress: "rgba(195, 61, 34, 0.4)",
240
- border: "rgba(255, 255, 255, 0)",
241
- borderHover: "rgba(255, 255, 255, 0)",
242
- borderPress: "rgba(255, 255, 255, 0)"
243
- },
244
- tertiary: {
245
- bg: "rgba(255, 43, 0, 0)",
246
- bgHover: "rgba(255, 170, 153, 0.07)",
247
- bgPress: "rgba(255, 85, 51, 0.12)",
248
- border: "rgba(255, 255, 255, 0)",
249
- borderHover: "rgba(255, 255, 255, 0)",
250
- borderPress: "rgba(255, 255, 255, 0)"
251
- },
252
- ghost: {
253
- bg: "rgba(255, 255, 255, 0)",
254
- bgHover: "rgba(246, 112, 85, 0.04)",
255
- bgPress: "rgba(246, 112, 85, 0.08)",
256
- border: "rgba(246, 112, 85, 0.16)",
257
- borderHover: "rgba(246, 112, 85, 0.24)",
258
- borderPress: "rgba(246, 112, 85, 0.16)"
259
- },
260
- text: {
261
- primary: "#ffffff",
262
- secondary: "#ffffff",
263
- tertiary: "#f67055",
264
- ghost: "#f67055"
265
- }
266
- },
267
- appButton: {
268
- bg: "#34474b",
269
- bgHover: "#3d5256",
270
- bgPress: "#2b3b3e",
271
- border: "rgba(255, 255, 255, 0.12)",
272
- borderHover: "rgba(255, 255, 255, 0.18)",
273
- borderPress: "rgba(255, 255, 255, 0.12)",
274
- text: "#b7c5c8",
275
- textDisable: "#b3b3b3"
276
- },
277
- input: {
278
- bg: "rgba(255, 255, 255, 0.12)",
279
- bgHover: "rgba(255, 255, 255, 0.15)",
280
- bgDisable: "rgba(255, 255, 255, 0.25)",
281
- border: "rgba(255, 255, 255, 0.1)",
282
- borderHover: "rgba(255, 255, 255, 0.15)",
283
- borderDisable: "rgba(255, 255, 255, 0)",
284
- text: "#ffffff",
285
- placeholder: "rgba(255, 255, 255, 0.56)",
286
- textDisable: "rgba(255, 255, 255, 0.36)"
287
- },
288
- focus: {
289
- bg: "#1b2628",
290
- border: "#55dcf6"
291
- },
292
- check: {
293
- bg: "#ffffff",
294
- bgHover: "#e8eced",
295
- bgDisable: "rgba(255, 255, 255, 0.2)",
296
- border: "rgba(255, 255, 255, 0)",
297
- borderHover: "rgba(255, 255, 255, 0)",
298
- borderDisable: "rgba(255, 255, 255, 0)",
299
- icon: "#000000"
300
- },
301
- faint: {
302
- bg: "rgba(255, 255, 255, 0.15)",
303
- bgHover: "rgba(255, 255, 255, 0.2)",
304
- border: "rgba(255, 255, 255, 0)",
305
- borderHover: "rgba(255, 255, 255, 0.16)"
306
- },
307
- slider: {
308
- bg: "#ffffff",
309
- bgHover: "#ffffff",
310
- bgDisable: "rgba(52, 71, 75, 0.85)"
311
- },
312
- switch: {
313
- bg: "rgba(255, 255, 255, 0.1)",
314
- bgHover: "rgba(255, 255, 255, 0.15)",
315
- bgDisable: "rgba(255, 255, 255, 0.2)",
316
- border: "#ffffff",
317
- borderHover: "#ffffff",
318
- borderDisable: "rgba(255, 255, 255, 0)"
319
- },
320
- knob: {
321
- bg: "#ffffff",
322
- bgHover: "#e8eced",
323
- bgInactive: "#ffffff"
324
- },
325
- text: {
326
- primary: "#ffffff",
327
- disable: "rgba(255, 255, 255, 0.4)"
328
- },
329
- link: {
330
- primary: "#55dcf6",
331
- primaryHover: "#80eaff",
332
- secondary: "#cef655",
333
- secondaryHover: "#dfff80"
334
- },
335
- segmented: {
336
- bg: "rgba(255, 255, 255, 0.1)",
337
- bgHover: "rgba(255, 255, 255, 0.1)",
338
- bgActive: "rgba(255, 255, 255, 0.1)",
339
- border: "rgba(255, 255, 255, 0.1)",
340
- borderHover: "rgba(255, 255, 255, 0.1)",
341
- borderActive: "rgba(255, 255, 255, 0.1)",
342
- text: "#ffffff",
343
- textDisable: "#ffffff"
344
- },
345
- toggleButton: {
346
- bg: "rgba(255, 255, 255, 0.1)",
347
- bgHover: "rgba(255, 255, 255, 0.15)",
348
- bgActive: "#000000",
349
- bgDisable: "rgba(255, 255, 255, 0.06)",
350
- border: "rgba(255, 255, 255, 0.16)",
351
- borderHover: "rgba(255, 255, 255, 0.16)",
352
- borderActive: "rgba(255, 255, 255, 0)",
353
- borderDisable: "rgba(255, 255, 255, 0.16)",
354
- text: "#e8eced",
355
- textActive: "#ffffff",
356
- textDisable: "rgba(255, 255, 255, 0.4)"
357
- }
358
- }
359
- };
360
-
361
- // src/tokens/xsolla-light.json
362
- var xsolla_light_default = {
363
- background: {
364
- primary: "#ffffff",
365
- secondary: "#f3f3f2",
366
- inverse: "#000000",
367
- brand: {
368
- primary: "#80eaff",
369
- secondary: "#b2f2ff"
370
- },
371
- brandExtra: {
372
- primary: "#cef655",
373
- secondary: "#dfff80"
374
- },
375
- success: {
376
- primary: "#95ff80",
377
- secondary: "#bfffb2"
378
- },
379
- warning: {
380
- primary: "#ffc380",
381
- secondary: "#ffdbb2"
382
- },
383
- alert: {
384
- primary: "#e84f30",
385
- secondary: "#ffbfb2"
386
- },
387
- neutral: {
388
- primary: "#99aeb2",
389
- secondary: "#d7dee0"
390
- }
391
- },
392
- content: {
393
- primary: "#000000",
394
- secondary: "rgba(0, 0, 0, 0.75)",
395
- tertiary: "rgba(0, 0, 0, 0.6)",
396
- inverse: "#ffffff",
397
- brand: {
398
- primary: "#22a8c3",
399
- secondary: "#31cae8"
400
- },
401
- brandExtra: {
402
- primary: "#79971b",
403
- secondary: "#9bc323"
404
- },
405
- success: {
406
- primary: "#30981b",
407
- secondary: "#3dc322"
408
- },
409
- warning: {
410
- primary: "#c37822",
411
- secondary: "#f6ab55"
412
- },
413
- alert: {
414
- primary: "#e84f30",
415
- secondary: "#f67055"
416
- },
417
- neutral: {
418
- primary: "#34474b",
419
- secondary: "#607f85"
420
- },
421
- on: {
422
- brand: "#000000",
423
- brandExtra: "#000000",
424
- success: "#000000",
425
- warning: "#000000",
426
- alert: "#ffffff",
427
- neutral: "#ffffff"
428
- },
429
- static: {
430
- light: "#ffffff",
431
- dark: "#000000"
432
- }
433
- },
434
- border: {
435
- primary: "#000000",
436
- secondary: "rgba(0, 0, 0, 0.1)",
437
- inverse: "rgba(255, 255, 255, 0.15)",
438
- brand: "#31cae8",
439
- brandExtra: "#bae831",
440
- success: "#30981b",
441
- warning: "#e89331",
442
- alert: "#e84f30",
443
- neutral: "#3d22c3"
444
- },
445
- overlay: {
446
- mono: "rgba(0, 0, 0, 0.05)",
447
- brand: "rgba(128, 234, 255, 0.3)",
448
- brandExtra: "rgba(206, 246, 85, 0.3)",
449
- success: "rgba(149, 255, 128, 0.24)",
450
- warning: "rgba(255, 195, 128, 0.28)",
451
- alert: "rgba(232, 79, 48, 0.24)",
452
- neutral: "rgba(96, 127, 133, 0.24)"
453
- },
454
- layer: {
455
- scrim: "rgba(0, 0, 0, 0.75)",
456
- float: "#ffffff"
457
- },
458
- control: {
459
- brand: {
460
- primary: {
461
- bg: "#55dcf6",
462
- bgHover: "#80eaff",
463
- bgPress: "#31cae8",
464
- bgDisable: "#cccccc",
465
- border: "rgba(255, 255, 255, 0)",
466
- borderHover: "rgba(255, 255, 255, 0)",
467
- borderPress: "rgba(255, 255, 255, 0)",
468
- borderDisable: "rgba(255, 255, 255, 0)"
469
- },
470
- secondary: {
471
- bg: "rgba(128, 234, 255, 0.4)",
472
- bgHover: "rgba(178, 242, 255, 0.4)",
473
- bgPress: "rgba(85, 220, 246, 0.4)",
474
- border: "rgba(255, 255, 255, 0)",
475
- borderHover: "rgba(255, 255, 255, 0)",
476
- borderPress: "rgba(255, 255, 255, 0)"
477
- },
478
- tertiary: {
479
- bg: "rgba(255, 255, 255, 0)",
480
- bgHover: "rgba(178, 242, 255, 0.07)",
481
- bgPress: "rgba(85, 220, 246, 0.12)",
482
- border: "rgba(255, 255, 255, 0)",
483
- borderHover: "rgba(255, 255, 255, 0)",
484
- borderPress: "rgba(255, 255, 255, 0)"
485
- },
486
- ghost: {
487
- bg: "rgba(0, 0, 0, 0)",
488
- bgHover: "rgba(27, 131, 152, 0.04)",
489
- bgPress: "rgba(27, 131, 152, 0.08)",
490
- border: "rgba(27, 131, 152, 0.1)",
491
- borderHover: "rgba(27, 131, 152, 0.16)",
492
- borderPress: "rgba(27, 131, 152, 0.1)"
493
- },
494
- text: {
495
- primary: "#000000",
496
- secondary: "#000000",
497
- tertiary: "#1b8398",
498
- ghost: "#1b8398",
499
- disable: "#999999"
500
- }
501
- },
502
- mono: {
503
- primary: {
504
- bg: "#000000",
505
- bgHover: "#141d1f",
506
- bgPress: "#1b2628",
507
- border: "rgba(255, 255, 255, 0)",
508
- borderHover: "rgba(255, 255, 255, 0)",
509
- borderPress: "rgba(255, 255, 255, 0)"
510
- },
511
- secondary: {
512
- bg: "rgba(0, 0, 0, 0.12)",
513
- bgHover: "rgba(21, 28, 30, 0.12)",
514
- bgPress: "rgba(32, 42, 44, 0.12)",
515
- border: "rgba(255, 255, 255, 0)",
516
- borderHover: "rgba(255, 255, 255, 0)",
517
- borderPress: "rgba(255, 255, 255, 0)"
518
- },
519
- tertiary: {
520
- bg: "rgba(0, 0, 0, 0)",
521
- bgHover: "rgba(21, 28, 30, 0.07)",
522
- bgPress: "rgba(32, 42, 44, 0.12)",
523
- border: "rgba(255, 255, 255, 0)",
524
- borderHover: "rgba(255, 255, 255, 0)",
525
- borderPress: "rgba(255, 255, 255, 0)"
526
- },
527
- ghost: {
528
- bg: "rgba(0, 0, 0, 0)",
529
- bgHover: "rgba(0, 0, 0, 0.04)",
530
- bgPress: "rgba(0, 0, 0, 0.08)",
531
- border: "rgba(0, 0, 0, 0.1)",
532
- borderHover: "rgba(0, 0, 0, 0.16)",
533
- borderPress: "rgba(0, 0, 0, 0.1)"
534
- },
535
- text: {
536
- primary: "#ffffff",
537
- secondary: "#000000",
538
- tertiary: "#000000",
539
- ghost: "#000000"
540
- }
541
- },
542
- brandExtra: {
543
- primary: {
544
- bg: "#bae831",
545
- bgHover: "#cef655",
546
- bgPress: "#9bc323",
547
- border: "rgba(255, 255, 255, 0)",
548
- borderHover: "rgba(255, 255, 255, 0)",
549
- borderPress: "rgba(255, 255, 255, 0)"
550
- },
551
- secondary: {
552
- bg: "rgba(186, 232, 49, 0.4)",
553
- bgHover: "rgba(206, 246, 85, 0.4)",
554
- bgPress: "rgba(186, 232, 49, 0.4)",
555
- border: "rgba(255, 255, 255, 0)",
556
- borderHover: "rgba(255, 255, 255, 0)",
557
- borderPress: "rgba(255, 255, 255, 0)"
558
- },
559
- tertiary: {
560
- bg: "rgba(186, 232, 49, 0)",
561
- bgHover: "rgba(206, 246, 85, 0.07)",
562
- bgPress: "rgba(186, 232, 49, 0.12)",
563
- border: "rgba(255, 255, 255, 0)",
564
- borderHover: "rgba(255, 255, 255, 0)",
565
- borderPress: "rgba(255, 255, 255, 0)"
566
- },
567
- ghost: {
568
- bg: "rgba(0, 0, 0, 0)",
569
- bgHover: "rgba(121, 151, 27, 0.04)",
570
- bgPress: "rgba(121, 151, 27, 0.08)",
571
- border: "rgba(121, 151, 27, 0.1)",
572
- borderHover: "rgba(121, 151, 27, 0.16)",
573
- borderPress: "rgba(121, 151, 27, 0.1)"
574
- },
575
- text: {
576
- primary: "#000000",
577
- secondary: "#000000",
578
- tertiary: "#79971b",
579
- ghost: "#79971b"
580
- }
581
- },
582
- alert: {
583
- bg: "#ffbfb2",
584
- border: "#e84f30",
585
- primary: {
586
- bg: "#e84f30",
587
- bgHover: "#f67055",
588
- bgPress: "#c33d22",
589
- border: "rgba(255, 255, 255, 0)",
590
- borderHover: "rgba(255, 255, 255, 0)",
591
- borderPress: "rgba(255, 255, 255, 0)"
592
- },
593
- secondary: {
594
- bg: "rgba(232, 79, 48, 0.4)",
595
- bgHover: "rgba(246, 112, 85, 0.4)",
596
- bgPress: "rgba(195, 61, 34, 0.4)",
597
- border: "rgba(255, 255, 255, 0)",
598
- borderHover: "rgba(255, 255, 255, 0)",
599
- borderPress: "rgba(255, 255, 255, 0)"
600
- },
601
- tertiary: {
602
- bg: "rgba(255, 43, 0, 0)",
603
- bgHover: "rgba(255, 85, 51, 0.07)",
604
- bgPress: "rgba(204, 34, 0, 0.12)",
605
- border: "rgba(255, 255, 255, 0)",
606
- borderHover: "rgba(255, 255, 255, 0)",
607
- borderPress: "rgba(255, 255, 255, 0)"
608
- },
609
- ghost: {
610
- bg: "rgba(0, 0, 0, 0)",
611
- bgHover: "rgba(195, 61, 34, 0.04)",
612
- bgPress: "rgba(195, 61, 34, 0.08)",
613
- border: "rgba(195, 61, 34, 0.1)",
614
- borderHover: "rgba(195, 61, 34, 0.16)",
615
- borderPress: "rgba(195, 61, 34, 0.1)"
616
- },
617
- text: {
618
- primary: "#ffffff",
619
- secondary: "#000000",
620
- tertiary: "#c33d22",
621
- ghost: "#c33d22"
622
- }
623
- },
624
- appButton: {
625
- bg: "#d7dee0",
626
- bgHover: "#c5cdd0",
627
- bgPress: "#b3bfc3",
628
- border: "rgba(0, 0, 0, 0.1)",
629
- borderHover: "rgba(0, 0, 0, 0.16)",
630
- borderPress: "rgba(0, 0, 0, 0.1)",
631
- text: "#34474b",
632
- textDisable: "#999999"
633
- },
634
- input: {
635
- bg: "rgba(0, 0, 0, 0.1)",
636
- bgHover: "rgba(0, 0, 0, 0.15)",
637
- bgDisable: "rgba(0, 0, 0, 0.2)",
638
- border: "rgba(0, 0, 0, 0.1)",
639
- borderHover: "rgba(0, 0, 0, 0.15)",
640
- borderDisable: "rgba(0, 0, 0, 0)",
641
- text: "#000000",
642
- placeholder: "rgba(0, 0, 0, 0.6)",
643
- textDisable: "rgba(0, 0, 0, 0.36)"
644
- },
645
- focus: {
646
- bg: "#ffffff",
647
- border: "#31cae8"
648
- },
649
- check: {
650
- bg: "#000000",
651
- bgHover: "#233134",
652
- bgDisable: "rgba(0, 0, 0, 0.2)",
653
- border: "rgba(255, 255, 255, 0)",
654
- borderHover: "rgba(255, 255, 255, 0)",
655
- borderDisable: "rgba(255, 255, 255, 0)",
656
- icon: "#ffffff"
657
- },
658
- faint: {
659
- bg: "rgba(0, 0, 0, 0.15)",
660
- bgHover: "rgba(0, 0, 0, 0.2)",
661
- border: "rgba(0, 0, 0, 0)",
662
- borderHover: "rgba(0, 0, 0, 0.1)"
663
- },
664
- slider: {
665
- bg: "#000000",
666
- bgHover: "#000000",
667
- bgDisable: "#cccccc"
668
- },
669
- switch: {
670
- bg: "rgba(0, 0, 0, 0.1)",
671
- bgHover: "rgba(0, 0, 0, 0.15)",
672
- bgDisable: "rgba(0, 0, 0, 0.2)",
673
- border: "#ffffff",
674
- borderHover: "#ffffff",
675
- borderDisable: "rgba(255, 255, 255, 0)"
676
- },
677
- knob: {
678
- bg: "#ffffff",
679
- bgHover: "#233134",
680
- bgInactive: "#ffffff"
681
- },
682
- text: {
683
- primary: "#000000",
684
- disable: "rgba(0, 0, 0, 0.4)"
685
- },
686
- link: {
687
- primary: "#22a8c3",
688
- primaryHover: "#31cae8",
689
- secondary: "#9bc323",
690
- secondaryHover: "#bae831"
691
- },
692
- segmented: {
693
- bg: "rgba(0, 0, 0, 0.08)",
694
- bgHover: "#ffffff",
695
- bgActive: "#ffffff",
696
- border: "rgba(0, 0, 0, 0.1)",
697
- borderHover: "rgba(0, 0, 0, 0.1)",
698
- borderActive: "#ffffff",
699
- text: "#000000",
700
- textDisable: "#000000"
701
- },
702
- toggleButton: {
703
- bg: "#ffffff",
704
- bgHover: "rgba(0, 0, 0, 0.06)",
705
- bgActive: "rgba(0, 0, 0, 0.1)",
706
- bgDisable: "rgba(0, 0, 0, 0.15)",
707
- border: "rgba(0, 0, 0, 0.1)",
708
- borderHover: "rgba(0, 0, 0, 0.15)",
709
- borderActive: "rgba(0, 0, 0, 0.1)",
710
- borderDisable: "rgba(0, 0, 0, 0.1)",
711
- text: "#000000",
712
- textActive: "#ffffff",
713
- textDisable: "rgba(255, 255, 255, 0.4)"
714
- }
715
- }
716
- };
717
-
718
4
  // src/tokens/pentagram-dark.json
719
5
  var pentagram_dark_default = {
720
6
  background: {
@@ -729,6 +15,10 @@ var pentagram_dark_default = {
729
15
  secondary: "#566c13"
730
16
  },
731
17
  inverse: "#ffffff",
18
+ static: {
19
+ dark: "#000000",
20
+ light: "#ffffff"
21
+ },
732
22
  success: {
733
23
  primary: "#95ff80",
734
24
  secondary: "#14410b"
@@ -785,22 +75,23 @@ var pentagram_dark_default = {
785
75
  success: "#000000",
786
76
  warning: "#000000",
787
77
  alert: "#ffffff",
788
- neutral: "#ffffff"
78
+ neutral: "#000000"
789
79
  }
790
80
  },
791
81
  border: {
792
82
  primary: "#ffffff",
793
83
  secondary: "rgba(178, 242, 255, 0.1)",
794
- brand: "#55dcf6",
795
- brandExtra: "#cef655",
84
+ brand: "#31cae8",
85
+ brandExtra: "#9bc323",
796
86
  inverse: "rgba(0, 0, 0, 0.15)",
797
- success: "#70f655",
798
- warning: "#f6ab55",
799
- alert: "#f67055",
800
- neutral: "#9580ff"
87
+ success: "#3dc322",
88
+ warning: "#c37822",
89
+ alert: "#c33d22",
90
+ neutral: "#607f85"
801
91
  },
802
92
  overlay: {
803
93
  mono: "rgba(178, 242, 255, 0.06)",
94
+ monoHover: "rgba(178, 242, 255, 0.12)",
804
95
  brand: "rgba(128, 234, 255, 0.2)",
805
96
  brandExtra: "rgba(206, 246, 85, 0.3)",
806
97
  success: "rgba(149, 255, 128, 0.2)",
@@ -840,6 +131,13 @@ var pentagram_dark_default = {
840
131
  borderHover: "rgba(255, 255, 255, 0)",
841
132
  borderPress: "rgba(255, 255, 255, 0)"
842
133
  },
134
+ text: {
135
+ primary: "#000000",
136
+ secondary: "#80eaff",
137
+ tertiary: "#80eaff",
138
+ disable: "rgba(232, 236, 237, 0.2)",
139
+ ghost: "#80eaff"
140
+ },
843
141
  ghost: {
844
142
  bg: "rgba(255, 255, 255, 0)",
845
143
  bgHover: "rgba(128, 234, 255, 0.04)",
@@ -847,13 +145,6 @@ var pentagram_dark_default = {
847
145
  border: "rgba(128, 234, 255, 0.16)",
848
146
  borderHover: "rgba(128, 234, 255, 0.24)",
849
147
  borderPress: "rgba(128, 234, 255, 0.16)"
850
- },
851
- text: {
852
- primary: "#000000",
853
- secondary: "#80eaff",
854
- tertiary: "#80eaff",
855
- ghost: "#80eaff",
856
- disable: "rgba(232, 236, 237, 0.2)"
857
148
  }
858
149
  },
859
150
  mono: {
@@ -881,6 +172,12 @@ var pentagram_dark_default = {
881
172
  borderHover: "rgba(255, 255, 255, 0)",
882
173
  borderPress: "rgba(255, 255, 255, 0)"
883
174
  },
175
+ text: {
176
+ primary: "#000000",
177
+ secondary: "#ffffff",
178
+ tertiary: "#ffffff",
179
+ ghost: "#ffffff"
180
+ },
884
181
  ghost: {
885
182
  bg: "rgba(255, 255, 255, 0)",
886
183
  bgHover: "rgba(255, 255, 255, 0.04)",
@@ -888,12 +185,6 @@ var pentagram_dark_default = {
888
185
  border: "rgba(255, 255, 255, 0.16)",
889
186
  borderHover: "rgba(255, 255, 255, 0.24)",
890
187
  borderPress: "rgba(255, 255, 255, 0.16)"
891
- },
892
- text: {
893
- primary: "#000000",
894
- secondary: "#ffffff",
895
- tertiary: "#ffffff",
896
- ghost: "#ffffff"
897
188
  }
898
189
  },
899
190
  brandExtra: {
@@ -921,6 +212,12 @@ var pentagram_dark_default = {
921
212
  borderHover: "rgba(255, 255, 255, 0)",
922
213
  borderPress: "rgba(255, 255, 255, 0)"
923
214
  },
215
+ text: {
216
+ primary: "#000000",
217
+ secondary: "#ffffff",
218
+ tertiary: "#cef655",
219
+ ghost: "#cef655"
220
+ },
924
221
  ghost: {
925
222
  bg: "rgba(255, 255, 255, 0)",
926
223
  bgHover: "rgba(206, 246, 85, 0.04)",
@@ -928,17 +225,11 @@ var pentagram_dark_default = {
928
225
  border: "rgba(206, 246, 85, 0.16)",
929
226
  borderHover: "rgba(206, 246, 85, 0.24)",
930
227
  borderPress: "rgba(206, 246, 85, 0.16)"
931
- },
932
- text: {
933
- primary: "#000000",
934
- secondary: "#ffffff",
935
- tertiary: "#cef655",
936
- ghost: "#cef655"
937
228
  }
938
229
  },
939
230
  alert: {
940
231
  bg: "#6c2213",
941
- border: "#f67055",
232
+ border: "#c33d22",
942
233
  primary: {
943
234
  bg: "#f67055",
944
235
  bgHover: "#ff9580",
@@ -963,6 +254,12 @@ var pentagram_dark_default = {
963
254
  borderHover: "rgba(255, 255, 255, 0)",
964
255
  borderPress: "rgba(255, 255, 255, 0)"
965
256
  },
257
+ text: {
258
+ primary: "#ffffff",
259
+ secondary: "#ffffff",
260
+ tertiary: "#f67055",
261
+ ghost: "#f67055"
262
+ },
966
263
  ghost: {
967
264
  bg: "rgba(255, 255, 255, 0)",
968
265
  bgHover: "rgba(246, 112, 85, 0.04)",
@@ -970,26 +267,10 @@ var pentagram_dark_default = {
970
267
  border: "rgba(246, 112, 85, 0.16)",
971
268
  borderHover: "rgba(246, 112, 85, 0.24)",
972
269
  borderPress: "rgba(246, 112, 85, 0.16)"
973
- },
974
- text: {
975
- primary: "#ffffff",
976
- secondary: "#ffffff",
977
- tertiary: "#f67055",
978
- ghost: "#f67055"
979
270
  }
980
271
  },
981
- appButton: {
982
- bg: "#34474b",
983
- bgHover: "#4b6368",
984
- bgPress: "#607f85",
985
- border: "#4b6368",
986
- borderHover: "#607f85",
987
- borderPress: "rgba(255, 255, 255, 0)",
988
- text: "#b7c5c8",
989
- textDisable: "rgba(232, 236, 237, 0.2)"
990
- },
991
272
  input: {
992
- bg: "rgba(178, 242, 255, 0.12)",
273
+ bg: "rgba(178, 242, 255, 0.1)",
993
274
  bgHover: "rgba(178, 242, 255, 0.15)",
994
275
  bgDisable: "rgba(178, 242, 255, 0.25)",
995
276
  border: "rgba(178, 242, 255, 0.1)",
@@ -1001,7 +282,7 @@ var pentagram_dark_default = {
1001
282
  },
1002
283
  focus: {
1003
284
  bg: "#000000",
1004
- border: "#55dcf6"
285
+ border: "#31cae8"
1005
286
  },
1006
287
  check: {
1007
288
  bg: "#135d6c",
@@ -1025,8 +306,8 @@ var pentagram_dark_default = {
1025
306
  },
1026
307
  switch: {
1027
308
  bg: "#135d6c",
1028
- bgHover: "#1b8398",
1029
309
  bgDisable: "rgba(178, 242, 255, 0.25)",
310
+ bgHover: "#1b8398",
1030
311
  border: "#22a8c3",
1031
312
  borderHover: "#22a8c3",
1032
313
  borderDisable: "rgba(255, 255, 255, 0)"
@@ -1056,8 +337,44 @@ var pentagram_dark_default = {
1056
337
  text: "#ffffff",
1057
338
  textDisable: "rgba(255, 255, 255, 0.4)"
1058
339
  },
340
+ tagLabel: {
341
+ product: {
342
+ bg: "#dfff80",
343
+ text: "#000000",
344
+ textCompact: "rgba(255, 255, 255, 0.48)"
345
+ },
346
+ rarity: {
347
+ bg: "#141d1f",
348
+ text: "#22a8c3"
349
+ },
350
+ name: {
351
+ bg: "#233134",
352
+ text: "#b7c5c8"
353
+ },
354
+ account: {
355
+ bg: "#9580ff",
356
+ text: "#000000",
357
+ textCompact: "rgba(255, 255, 255, 0.48)"
358
+ },
359
+ id: {
360
+ bg: "#34474b",
361
+ bgSeries: "#000000",
362
+ textSeries: "#4b6368",
363
+ textNumber: "#000000",
364
+ textCompact: "rgba(255, 255, 255, 0.48)"
365
+ },
366
+ subentity: {
367
+ bg: "#607f85",
368
+ text: "#000000"
369
+ },
370
+ item: {
371
+ bg: "#80eaff",
372
+ text: "#000000",
373
+ textCompact: "rgba(255, 255, 255, 0.48)"
374
+ }
375
+ },
1059
376
  toggleButton: {
1060
- bg: "rgba(178, 242, 255, 0.12)",
377
+ bg: "rgba(178, 242, 255, 0.1)",
1061
378
  bgHover: "rgba(178, 242, 255, 0.15)",
1062
379
  bgActive: "#135d6c",
1063
380
  bgDisable: "rgba(178, 242, 255, 0.25)",
@@ -1068,6 +385,16 @@ var pentagram_dark_default = {
1068
385
  text: "#ffffff",
1069
386
  textActive: "#80eaff",
1070
387
  textDisable: "rgba(255, 255, 255, 0.36)"
388
+ },
389
+ appButton: {
390
+ bg: "#34474b",
391
+ bgHover: "#4b6368",
392
+ bgPress: "#607f85",
393
+ border: "#4b6368",
394
+ borderHover: "#607f85",
395
+ borderPress: "rgba(255, 255, 255, 0)",
396
+ text: "#b7c5c8",
397
+ textDisable: "rgba(232, 236, 237, 0.2)"
1071
398
  }
1072
399
  }
1073
400
  };
@@ -1086,6 +413,10 @@ var pentagram_light_default = {
1086
413
  secondary: "#dfff80"
1087
414
  },
1088
415
  inverse: "#000000",
416
+ static: {
417
+ dark: "#000000",
418
+ light: "#ffffff"
419
+ },
1089
420
  success: {
1090
421
  primary: "#95ff80",
1091
422
  secondary: "#bfffb2"
@@ -1095,7 +426,7 @@ var pentagram_light_default = {
1095
426
  secondary: "#ffdbb2"
1096
427
  },
1097
428
  alert: {
1098
- primary: "#e84f30",
429
+ primary: "#f67055",
1099
430
  secondary: "#ffbfb2"
1100
431
  },
1101
432
  neutral: {
@@ -1142,7 +473,7 @@ var pentagram_light_default = {
1142
473
  success: "#000000",
1143
474
  warning: "#000000",
1144
475
  alert: "#ffffff",
1145
- neutral: "#ffffff"
476
+ neutral: "#000000"
1146
477
  }
1147
478
  },
1148
479
  border: {
@@ -1151,13 +482,14 @@ var pentagram_light_default = {
1151
482
  brand: "#31cae8",
1152
483
  brandExtra: "#bae831",
1153
484
  inverse: "rgba(255, 255, 255, 0.15)",
1154
- success: "#30981b",
485
+ success: "#50e831",
1155
486
  warning: "#e89331",
1156
487
  alert: "#e84f30",
1157
- neutral: "#3d22c3"
488
+ neutral: "#7b989d"
1158
489
  },
1159
490
  overlay: {
1160
491
  mono: "rgba(0, 0, 0, 0.05)",
492
+ monoHover: "rgba(0, 0, 0, 0.1)",
1161
493
  brand: "rgba(128, 234, 255, 0.3)",
1162
494
  brandExtra: "rgba(206, 246, 85, 0.3)",
1163
495
  success: "rgba(149, 255, 128, 0.24)",
@@ -1197,6 +529,13 @@ var pentagram_light_default = {
1197
529
  borderHover: "rgba(255, 255, 255, 0)",
1198
530
  borderPress: "rgba(255, 255, 255, 0)"
1199
531
  },
532
+ text: {
533
+ primary: "#000000",
534
+ secondary: "#000000",
535
+ tertiary: "#1b8398",
536
+ disable: "#999999",
537
+ ghost: "#22a8c3"
538
+ },
1200
539
  ghost: {
1201
540
  bg: "rgba(0, 0, 0, 0)",
1202
541
  bgHover: "rgba(34, 168, 195, 0.04)",
@@ -1204,13 +543,6 @@ var pentagram_light_default = {
1204
543
  border: "rgba(34, 168, 195, 0.1)",
1205
544
  borderHover: "rgba(34, 168, 195, 0.16)",
1206
545
  borderPress: "rgba(34, 168, 195, 0.1)"
1207
- },
1208
- text: {
1209
- primary: "#000000",
1210
- secondary: "#000000",
1211
- tertiary: "#1b8398",
1212
- ghost: "#22a8c3",
1213
- disable: "#999999"
1214
546
  }
1215
547
  },
1216
548
  mono: {
@@ -1238,6 +570,12 @@ var pentagram_light_default = {
1238
570
  borderHover: "rgba(255, 255, 255, 0)",
1239
571
  borderPress: "rgba(255, 255, 255, 0)"
1240
572
  },
573
+ text: {
574
+ primary: "#ffffff",
575
+ secondary: "#000000",
576
+ tertiary: "#000000",
577
+ ghost: "#000000"
578
+ },
1241
579
  ghost: {
1242
580
  bg: "rgba(0, 0, 0, 0)",
1243
581
  bgHover: "rgba(0, 0, 0, 0.04)",
@@ -1245,12 +583,6 @@ var pentagram_light_default = {
1245
583
  border: "rgba(0, 0, 0, 0.1)",
1246
584
  borderHover: "rgba(0, 0, 0, 0.16)",
1247
585
  borderPress: "rgba(0, 0, 0, 0.1)"
1248
- },
1249
- text: {
1250
- primary: "#ffffff",
1251
- secondary: "#000000",
1252
- tertiary: "#000000",
1253
- ghost: "#000000"
1254
586
  }
1255
587
  },
1256
588
  brandExtra: {
@@ -1278,6 +610,12 @@ var pentagram_light_default = {
1278
610
  borderHover: "rgba(255, 255, 255, 0)",
1279
611
  borderPress: "rgba(255, 255, 255, 0)"
1280
612
  },
613
+ text: {
614
+ primary: "#000000",
615
+ secondary: "#000000",
616
+ tertiary: "#79971b",
617
+ ghost: "#79971b"
618
+ },
1281
619
  ghost: {
1282
620
  bg: "rgba(0, 0, 0, 0)",
1283
621
  bgHover: "rgba(121, 151, 27, 0.04)",
@@ -1285,12 +623,6 @@ var pentagram_light_default = {
1285
623
  border: "rgba(121, 151, 27, 0.1)",
1286
624
  borderHover: "rgba(121, 151, 27, 0.16)",
1287
625
  borderPress: "rgba(121, 151, 27, 0.1)"
1288
- },
1289
- text: {
1290
- primary: "#000000",
1291
- secondary: "#000000",
1292
- tertiary: "#79971b",
1293
- ghost: "#79971b"
1294
626
  }
1295
627
  },
1296
628
  alert: {
@@ -1320,6 +652,12 @@ var pentagram_light_default = {
1320
652
  borderHover: "rgba(255, 255, 255, 0)",
1321
653
  borderPress: "rgba(255, 255, 255, 0)"
1322
654
  },
655
+ text: {
656
+ primary: "#ffffff",
657
+ secondary: "#000000",
658
+ tertiary: "#c33d22",
659
+ ghost: "#c33d22"
660
+ },
1323
661
  ghost: {
1324
662
  bg: "rgba(0, 0, 0, 0)",
1325
663
  bgHover: "rgba(195, 61, 34, 0.04)",
@@ -1327,24 +665,8 @@ var pentagram_light_default = {
1327
665
  border: "rgba(195, 61, 34, 0.1)",
1328
666
  borderHover: "rgba(195, 61, 34, 0.16)",
1329
667
  borderPress: "rgba(195, 61, 34, 0.1)"
1330
- },
1331
- text: {
1332
- primary: "#ffffff",
1333
- secondary: "#000000",
1334
- tertiary: "#c33d22",
1335
- ghost: "#c33d22"
1336
668
  }
1337
669
  },
1338
- appButton: {
1339
- bg: "#dadbd7",
1340
- bgHover: "#c1c2bc",
1341
- bgPress: "#a8aaa2",
1342
- border: "#c1c2bc",
1343
- borderHover: "#a8aaa2",
1344
- borderPress: "rgba(255, 255, 255, 0)",
1345
- text: "#000000",
1346
- textDisable: "#999999"
1347
- },
1348
670
  input: {
1349
671
  bg: "rgba(0, 0, 0, 0.08)",
1350
672
  bgHover: "rgba(0, 0, 0, 0.15)",
@@ -1382,8 +704,8 @@ var pentagram_light_default = {
1382
704
  },
1383
705
  switch: {
1384
706
  bg: "#ccf6ff",
1385
- bgHover: "#e5fbff",
1386
707
  bgDisable: "rgba(0, 0, 0, 0.25)",
708
+ bgHover: "#e5fbff",
1387
709
  border: "#80eaff",
1388
710
  borderHover: "#b2f2ff",
1389
711
  borderDisable: "rgba(0, 0, 0, 0)"
@@ -1413,6 +735,42 @@ var pentagram_light_default = {
1413
735
  text: "#000000",
1414
736
  textDisable: "rgba(0, 0, 0, 0.4)"
1415
737
  },
738
+ tagLabel: {
739
+ product: {
740
+ bg: "#dfff80",
741
+ text: "#000000",
742
+ textCompact: "rgba(0, 0, 0, 0.48)"
743
+ },
744
+ rarity: {
745
+ bg: "#141d1f",
746
+ text: "#22a8c3"
747
+ },
748
+ name: {
749
+ bg: "#ffffff",
750
+ text: "#000000"
751
+ },
752
+ account: {
753
+ bg: "#9580ff",
754
+ text: "#000000",
755
+ textCompact: "rgba(0, 0, 0, 0.48)"
756
+ },
757
+ id: {
758
+ bg: "#dadbd7",
759
+ bgSeries: "#000000",
760
+ textSeries: "#d7dee0",
761
+ textNumber: "#000000",
762
+ textCompact: "rgba(0, 0, 0, 0.48)"
763
+ },
764
+ subentity: {
765
+ bg: "#a8aaa2",
766
+ text: "#000000"
767
+ },
768
+ item: {
769
+ bg: "#55dcf6",
770
+ text: "#000000",
771
+ textCompact: "rgba(0, 0, 0, 0.48)"
772
+ }
773
+ },
1416
774
  toggleButton: {
1417
775
  bg: "rgba(0, 0, 0, 0.08)",
1418
776
  bgHover: "rgba(0, 0, 0, 0.15)",
@@ -1425,6 +783,16 @@ var pentagram_light_default = {
1425
783
  text: "#000000",
1426
784
  textActive: "#000000",
1427
785
  textDisable: "rgba(0, 0, 0, 0.36)"
786
+ },
787
+ appButton: {
788
+ bg: "#dadbd7",
789
+ bgHover: "#c1c2bc",
790
+ bgPress: "#a8aaa2",
791
+ border: "#c1c2bc",
792
+ borderHover: "#a8aaa2",
793
+ borderPress: "rgba(255, 255, 255, 0)",
794
+ text: "#000000",
795
+ textDisable: "#999999"
1428
796
  }
1429
797
  }
1430
798
  };
@@ -1434,7 +802,6 @@ var ltg_dark_default = {
1434
802
  background: {
1435
803
  primary: "#0d143a",
1436
804
  secondary: "#161d45",
1437
- inverse: "#000000",
1438
805
  brand: {
1439
806
  primary: "#454f88",
1440
807
  secondary: "#2b335e"
@@ -1443,6 +810,11 @@ var ltg_dark_default = {
1443
810
  primary: "#292f52",
1444
811
  secondary: "#2d3358"
1445
812
  },
813
+ inverse: "#000000",
814
+ static: {
815
+ dark: "#000000",
816
+ light: "#ffffff"
817
+ },
1446
818
  success: {
1447
819
  primary: "#14b87e",
1448
820
  secondary: "#75f0b9"
@@ -1464,7 +836,6 @@ var ltg_dark_default = {
1464
836
  primary: "#ffffff",
1465
837
  secondary: "rgba(255, 255, 255, 0.76)",
1466
838
  tertiary: "rgba(255, 255, 255, 0.5)",
1467
- inverse: "#000000",
1468
839
  brand: {
1469
840
  primary: "#ffffff",
1470
841
  secondary: "rgba(255, 255, 255, 0.76)"
@@ -1473,6 +844,11 @@ var ltg_dark_default = {
1473
844
  primary: "#8576fd",
1474
845
  secondary: "#aea0ff"
1475
846
  },
847
+ inverse: "#000000",
848
+ static: {
849
+ light: "#ffffff",
850
+ dark: "#000000"
851
+ },
1476
852
  success: {
1477
853
  primary: "#66ffa6",
1478
854
  secondary: "#00ff6a"
@@ -1490,24 +866,20 @@ var ltg_dark_default = {
1490
866
  secondary: "#8066ff"
1491
867
  },
1492
868
  on: {
1493
- brand: "#ffffff",
1494
- brandExtra: "#ffffff",
1495
- success: "#ffffff",
1496
- warning: "#ffffff",
869
+ brand: "#000000",
870
+ brandExtra: "#0d143a",
871
+ success: "#000000",
872
+ warning: "#000000",
1497
873
  alert: "#ffffff",
1498
- neutral: "#ffffff"
1499
- },
1500
- static: {
1501
- light: "#ffffff",
1502
- dark: "#000000"
874
+ neutral: "#0d143a"
1503
875
  }
1504
876
  },
1505
877
  border: {
1506
878
  primary: "#ffffff",
1507
- secondary: "rgba(255, 255, 255, 0.24)",
1508
- inverse: "rgba(0, 0, 0, 0.15)",
879
+ secondary: "rgba(255, 255, 255, 0.12)",
1509
880
  brand: "#ffffff",
1510
881
  brandExtra: "#8576fd",
882
+ inverse: "rgba(0, 0, 0, 0.15)",
1511
883
  success: "#14b87e",
1512
884
  warning: "#ffe566",
1513
885
  alert: "#f53d3d",
@@ -1515,6 +887,7 @@ var ltg_dark_default = {
1515
887
  },
1516
888
  overlay: {
1517
889
  mono: "rgba(255, 255, 255, 0.1)",
890
+ monoHover: "rgba(255, 255, 255, 0.2)",
1518
891
  brand: "rgba(255, 255, 255, 0.3)",
1519
892
  brandExtra: "rgba(133, 118, 253, 0.3)",
1520
893
  success: "rgba(20, 184, 126, 0.3)",
@@ -1524,7 +897,7 @@ var ltg_dark_default = {
1524
897
  },
1525
898
  layer: {
1526
899
  scrim: "rgba(0, 0, 0, 0.5)",
1527
- float: "#161d45"
900
+ float: "#0a0f2b"
1528
901
  },
1529
902
  control: {
1530
903
  brand: {
@@ -1532,7 +905,7 @@ var ltg_dark_default = {
1532
905
  bg: "#ffca43",
1533
906
  bgHover: "#f2c173",
1534
907
  bgPress: "#ffbb33",
1535
- bgDisable: "#484848",
908
+ bgDisable: "rgba(13, 20, 58, 0.3)",
1536
909
  border: "rgba(255, 255, 255, 0)",
1537
910
  borderHover: "rgba(255, 255, 255, 0)",
1538
911
  borderPress: "rgba(255, 255, 255, 0)",
@@ -1547,13 +920,20 @@ var ltg_dark_default = {
1547
920
  borderPress: "rgba(255, 255, 255, 0)"
1548
921
  },
1549
922
  tertiary: {
1550
- bg: "#ffffff",
923
+ bg: "rgba(255, 255, 255, 0.1)",
1551
924
  bgHover: "rgba(255, 255, 255, 0.76)",
1552
925
  bgPress: "rgba(255, 255, 255, 0.5)",
1553
926
  border: "rgba(255, 255, 255, 0)",
1554
927
  borderHover: "rgba(255, 255, 255, 0)",
1555
928
  borderPress: "rgba(255, 255, 255, 0)"
1556
929
  },
930
+ text: {
931
+ primary: "#000000",
932
+ secondary: "#000000",
933
+ tertiary: "#000000",
934
+ disable: "#c4d1d4",
935
+ ghost: "#ffca43"
936
+ },
1557
937
  ghost: {
1558
938
  bg: "rgba(255, 255, 255, 0)",
1559
939
  bgHover: "rgba(255, 202, 67, 0.04)",
@@ -1561,13 +941,6 @@ var ltg_dark_default = {
1561
941
  border: "rgba(255, 202, 67, 0.16)",
1562
942
  borderHover: "rgba(255, 202, 67, 0.24)",
1563
943
  borderPress: "rgba(255, 202, 67, 0.16)"
1564
- },
1565
- text: {
1566
- primary: "#000000",
1567
- secondary: "#000000",
1568
- tertiary: "#000000",
1569
- ghost: "#ffca43",
1570
- disable: "#c4d1d4"
1571
944
  }
1572
945
  },
1573
946
  mono: {
@@ -1588,13 +961,19 @@ var ltg_dark_default = {
1588
961
  borderPress: "#ffffff"
1589
962
  },
1590
963
  tertiary: {
1591
- bg: "#ffffff",
964
+ bg: "rgba(255, 255, 255, 0.1)",
1592
965
  bgHover: "rgba(255, 255, 255, 0.76)",
1593
966
  bgPress: "rgba(255, 255, 255, 0.5)",
1594
967
  border: "rgba(255, 255, 255, 0)",
1595
968
  borderHover: "rgba(255, 255, 255, 0)",
1596
969
  borderPress: "rgba(255, 255, 255, 0)"
1597
970
  },
971
+ text: {
972
+ primary: "#000000",
973
+ secondary: "#ffffff",
974
+ tertiary: "#ffffff",
975
+ ghost: "#ffffff"
976
+ },
1598
977
  ghost: {
1599
978
  bg: "rgba(255, 255, 255, 0)",
1600
979
  bgHover: "rgba(255, 255, 255, 0.04)",
@@ -1602,39 +981,39 @@ var ltg_dark_default = {
1602
981
  border: "rgba(255, 255, 255, 0.16)",
1603
982
  borderHover: "rgba(255, 255, 255, 0.24)",
1604
983
  borderPress: "rgba(255, 255, 255, 0.16)"
1605
- },
1606
- text: {
1607
- primary: "#000000",
1608
- secondary: "#ffffff",
1609
- tertiary: "#000000",
1610
- ghost: "#ffffff"
1611
984
  }
1612
985
  },
1613
986
  brandExtra: {
1614
987
  primary: {
1615
- bg: "#292f52",
1616
- bgHover: "#ccff33",
1617
- bgPress: "#e6ff99",
988
+ bg: "#8576fd",
989
+ bgHover: "#9d95de",
990
+ bgPress: "#6b5fd4",
1618
991
  border: "rgba(255, 255, 255, 0)",
1619
992
  borderHover: "rgba(255, 255, 255, 0)",
1620
993
  borderPress: "rgba(255, 255, 255, 0)"
1621
994
  },
1622
995
  secondary: {
1623
- bg: "rgba(186, 232, 49, 0.4)",
1624
- bgHover: "rgba(206, 246, 85, 0.4)",
1625
- bgPress: "rgba(186, 232, 49, 0.4)",
996
+ bg: "rgba(133, 118, 253, 0.4)",
997
+ bgHover: "rgba(157, 149, 222, 0.4)",
998
+ bgPress: "rgba(107, 95, 212, 0.4)",
1626
999
  border: "rgba(255, 255, 255, 0)",
1627
1000
  borderHover: "rgba(255, 255, 255, 0)",
1628
1001
  borderPress: "rgba(255, 255, 255, 0)"
1629
1002
  },
1630
1003
  tertiary: {
1631
- bg: "#ffffff",
1632
- bgHover: "rgba(255, 255, 255, 0.76)",
1633
- bgPress: "rgba(255, 255, 255, 0.5)",
1004
+ bg: "rgba(133, 118, 253, 0.1)",
1005
+ bgHover: "rgba(133, 118, 253, 0.2)",
1006
+ bgPress: "rgba(133, 118, 253, 0.3)",
1634
1007
  border: "rgba(255, 255, 255, 0)",
1635
1008
  borderHover: "rgba(255, 255, 255, 0)",
1636
1009
  borderPress: "rgba(255, 255, 255, 0)"
1637
1010
  },
1011
+ text: {
1012
+ primary: "#000000",
1013
+ secondary: "#000000",
1014
+ tertiary: "#8576fd",
1015
+ ghost: "#ffffff"
1016
+ },
1638
1017
  ghost: {
1639
1018
  bg: "rgba(255, 255, 255, 0)",
1640
1019
  bgHover: "rgba(255, 255, 255, 0.04)",
@@ -1642,12 +1021,6 @@ var ltg_dark_default = {
1642
1021
  border: "rgba(255, 255, 255, 0.16)",
1643
1022
  borderHover: "rgba(255, 255, 255, 0.24)",
1644
1023
  borderPress: "rgba(255, 255, 255, 0.16)"
1645
- },
1646
- text: {
1647
- primary: "#000000",
1648
- secondary: "#000000",
1649
- tertiary: "#000000",
1650
- ghost: "#ffffff"
1651
1024
  }
1652
1025
  },
1653
1026
  alert: {
@@ -1670,13 +1043,19 @@ var ltg_dark_default = {
1670
1043
  borderPress: "rgba(255, 255, 255, 0)"
1671
1044
  },
1672
1045
  tertiary: {
1673
- bg: "#ffffff",
1674
- bgHover: "rgba(255, 255, 255, 0.76)",
1675
- bgPress: "rgba(255, 255, 255, 0.5)",
1046
+ bg: "rgba(255, 43, 0, 0)",
1047
+ bgHover: "rgba(255, 170, 153, 0.07)",
1048
+ bgPress: "rgba(255, 85, 51, 0.12)",
1676
1049
  border: "rgba(255, 255, 255, 0)",
1677
1050
  borderHover: "rgba(255, 255, 255, 0)",
1678
1051
  borderPress: "rgba(255, 255, 255, 0)"
1679
1052
  },
1053
+ text: {
1054
+ primary: "#ffffff",
1055
+ secondary: "#000000",
1056
+ tertiary: "#ff8066",
1057
+ ghost: "#ffffff"
1058
+ },
1680
1059
  ghost: {
1681
1060
  bg: "rgba(255, 255, 255, 0)",
1682
1061
  bgHover: "rgba(255, 255, 255, 0.04)",
@@ -1684,24 +1063,8 @@ var ltg_dark_default = {
1684
1063
  border: "rgba(255, 255, 255, 0.16)",
1685
1064
  borderHover: "rgba(255, 255, 255, 0.24)",
1686
1065
  borderPress: "rgba(255, 255, 255, 0.16)"
1687
- },
1688
- text: {
1689
- primary: "#ffffff",
1690
- secondary: "#000000",
1691
- tertiary: "#000000",
1692
- ghost: "#ffffff"
1693
1066
  }
1694
1067
  },
1695
- appButton: {
1696
- bg: "#ffffff",
1697
- bgHover: "rgba(255, 255, 255, 0.76)",
1698
- bgPress: "rgba(255, 255, 255, 0.5)",
1699
- border: "rgba(255, 255, 255, 0)",
1700
- borderHover: "rgba(255, 255, 255, 0)",
1701
- borderPress: "rgba(255, 255, 255, 0)",
1702
- text: "#000000",
1703
- textDisable: "#666666"
1704
- },
1705
1068
  input: {
1706
1069
  bg: "rgba(255, 255, 255, 0.12)",
1707
1070
  bgHover: "rgba(255, 255, 255, 0.15)",
@@ -1723,8 +1086,8 @@ var ltg_dark_default = {
1723
1086
  bgDisable: "rgba(255, 255, 255, 0.2)",
1724
1087
  border: "#ffffff",
1725
1088
  borderHover: "#ffffff",
1726
- borderDisable: "#ffffff",
1727
- icon: "#ffffff"
1089
+ borderDisable: "rgba(255, 255, 255, 0.2)",
1090
+ icon: "#0d143a"
1728
1091
  },
1729
1092
  faint: {
1730
1093
  bg: "rgba(255, 255, 255, 0.15)",
@@ -1739,11 +1102,11 @@ var ltg_dark_default = {
1739
1102
  },
1740
1103
  switch: {
1741
1104
  bg: "rgba(255, 255, 255, 0.1)",
1742
- bgHover: "rgba(255, 255, 255, 0.15)",
1743
1105
  bgDisable: "rgba(255, 255, 255, 0.2)",
1106
+ bgHover: "rgba(255, 255, 255, 0.15)",
1744
1107
  border: "#ffffff",
1745
1108
  borderHover: "#ffffff",
1746
- borderDisable: "#ffffff"
1109
+ borderDisable: "rgba(255, 255, 255, 0)"
1747
1110
  },
1748
1111
  knob: {
1749
1112
  bg: "#ffffff",
@@ -1761,45 +1124,83 @@ var ltg_dark_default = {
1761
1124
  secondaryHover: "rgba(157, 149, 222, 0.7)"
1762
1125
  },
1763
1126
  segmented: {
1764
- bg: "#ffffff",
1765
- bgHover: "#ffffff",
1766
- bgActive: "#ffffff",
1767
- border: "#ffffff",
1768
- borderHover: "#ffffff",
1769
- borderActive: "#ffffff",
1127
+ bg: "rgba(255, 255, 255, 0.1)",
1128
+ bgHover: "rgba(255, 255, 255, 0.1)",
1129
+ bgActive: "#2e3766",
1130
+ border: "rgba(255, 255, 255, 0.1)",
1131
+ borderHover: "rgba(255, 255, 255, 0.1)",
1132
+ borderActive: "rgba(255, 255, 255, 0)",
1770
1133
  text: "#ffffff",
1771
- textDisable: "#ffffff"
1134
+ textDisable: "rgba(255, 255, 255, 0.4)"
1135
+ },
1136
+ tagLabel: {
1137
+ product: {
1138
+ bg: "#dfff80",
1139
+ text: "#000000",
1140
+ textCompact: "rgba(255, 255, 255, 0.48)"
1141
+ },
1142
+ rarity: {
1143
+ bg: "#141d1f",
1144
+ text: "#22a8c3"
1145
+ },
1146
+ name: {
1147
+ bg: "#ffffff",
1148
+ text: "#b7c5c8"
1149
+ },
1150
+ account: {
1151
+ bg: "#9580ff",
1152
+ text: "#000000",
1153
+ textCompact: "rgba(255, 255, 255, 0.48)"
1154
+ },
1155
+ id: {
1156
+ bg: "#d7dee0",
1157
+ bgSeries: "#000000",
1158
+ textSeries: "#d7dee0",
1159
+ textNumber: "#000000",
1160
+ textCompact: "rgba(255, 255, 255, 0.48)"
1161
+ },
1162
+ subentity: {
1163
+ bg: "#607f85",
1164
+ text: "#000000"
1165
+ },
1166
+ item: {
1167
+ bg: "#80eaff",
1168
+ text: "#000000",
1169
+ textCompact: "rgba(255, 255, 255, 0.48)"
1170
+ }
1772
1171
  },
1773
1172
  toggleButton: {
1774
- bg: "#ffffff",
1775
- bgHover: "#ffffff",
1776
- bgActive: "#ffffff",
1777
- bgDisable: "#ffffff",
1778
- border: "#ffffff",
1779
- borderHover: "#ffffff",
1780
- borderActive: "#ffffff",
1781
- borderDisable: "#ffffff",
1173
+ bg: "rgba(255, 255, 255, 0.1)",
1174
+ bgHover: "rgba(255, 255, 255, 0.15)",
1175
+ bgActive: "#454f88",
1176
+ bgDisable: "rgba(255, 255, 255, 0.25)",
1177
+ border: "rgba(255, 255, 255, 0.1)",
1178
+ borderHover: "rgba(255, 255, 255, 0.15)",
1179
+ borderActive: "#535e99",
1180
+ borderDisable: "rgba(255, 255, 255, 0)",
1782
1181
  text: "#ffffff",
1783
- textActive: "#ffffff",
1784
- textDisable: "#ffffff"
1182
+ textActive: "#d0d8ff",
1183
+ textDisable: "rgba(255, 255, 255, 0.36)"
1184
+ },
1185
+ appButton: {
1186
+ bg: "#ffffff",
1187
+ bgHover: "rgba(255, 255, 255, 0.76)",
1188
+ bgPress: "rgba(255, 255, 255, 0.5)",
1189
+ border: "rgba(255, 255, 255, 0)",
1190
+ borderHover: "rgba(255, 255, 255, 0)",
1191
+ borderPress: "rgba(255, 255, 255, 0)",
1192
+ text: "#000000",
1193
+ textDisable: "#666666"
1785
1194
  }
1786
1195
  }
1787
1196
  };
1788
1197
 
1789
1198
  // src/tokens/colors.ts
1790
1199
  var colors = {
1791
- // Default themes (Pentagram)
1792
1200
  dark: pentagram_dark_default,
1793
1201
  light: pentagram_light_default,
1794
- // Pentagram theme aliases
1795
1202
  "pentagram-dark": pentagram_dark_default,
1796
1203
  "pentagram-light": pentagram_light_default,
1797
- // Xsolla themes
1798
- "xsolla-dark": xsolla_dark_default,
1799
- "xsolla-light": xsolla_light_default,
1800
- xsollaDark: xsolla_dark_default,
1801
- xsollaLight: xsolla_light_default,
1802
- // LTG themes
1803
1204
  "ltg-dark": ltg_dark_default
1804
1205
  };
1805
1206
 
@@ -2641,51 +2042,61 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
2641
2042
  const configs = {
2642
2043
  xl: {
2643
2044
  size: 64,
2644
- fontSize: 24,
2645
- iconSize: 32,
2045
+ fontSize: 20,
2046
+ iconSize: 48,
2646
2047
  badgeSize: 20,
2647
2048
  badgeOffsetCircle: { right: -4, top: -4 },
2648
2049
  badgeOffsetSquare: { right: -8, top: -8 },
2649
- borderRadiusSquare: radius.avatarLarge,
2050
+ borderRadiusSquare: radius.avatarSmall,
2650
2051
  borderRadiusCircle: radius.avatarCircle
2651
2052
  },
2652
2053
  lg: {
2653
2054
  size: 56,
2654
2055
  fontSize: 20,
2655
- iconSize: 28,
2056
+ iconSize: 40,
2656
2057
  badgeSize: 20,
2657
2058
  badgeOffsetCircle: { right: -4, top: -4 },
2658
2059
  badgeOffsetSquare: { right: -8, top: -8 },
2659
- borderRadiusSquare: radius.avatarLarge,
2060
+ borderRadiusSquare: radius.avatarSmall,
2660
2061
  borderRadiusCircle: radius.avatarCircle
2661
2062
  },
2662
2063
  md: {
2663
2064
  size: 48,
2664
2065
  fontSize: 18,
2665
- iconSize: 24,
2066
+ iconSize: 32,
2666
2067
  badgeSize: 20,
2667
2068
  badgeOffsetCircle: { right: -5, top: -5 },
2668
2069
  badgeOffsetSquare: { right: -8, top: -8 },
2669
- borderRadiusSquare: radius.avatarLarge,
2070
+ borderRadiusSquare: radius.avatarSmall,
2670
2071
  borderRadiusCircle: radius.avatarCircle
2671
2072
  },
2672
2073
  sm: {
2673
2074
  size: 40,
2674
2075
  fontSize: 16,
2675
- iconSize: 20,
2076
+ iconSize: 24,
2676
2077
  badgeSize: 20,
2677
2078
  badgeOffsetCircle: { right: -6, top: -6 },
2678
2079
  badgeOffsetSquare: { right: -8, top: -8 },
2679
- borderRadiusSquare: radius.avatarLarge,
2080
+ borderRadiusSquare: radius.avatarSmall,
2680
2081
  borderRadiusCircle: radius.avatarCircle
2681
2082
  },
2682
2083
  xs: {
2683
2084
  size: 32,
2684
- fontSize: 14,
2085
+ fontSize: 12,
2086
+ iconSize: 24,
2087
+ badgeSize: 8,
2088
+ badgeOffsetCircle: { right: -1, top: -1 },
2089
+ badgeOffsetSquare: { right: -3, top: -3 },
2090
+ borderRadiusSquare: radius.avatarSmall,
2091
+ borderRadiusCircle: radius.avatarCircle
2092
+ },
2093
+ xxs: {
2094
+ size: 24,
2095
+ fontSize: 10,
2685
2096
  iconSize: 16,
2686
- badgeSize: 20,
2687
- badgeOffsetCircle: { right: -6, top: -6 },
2688
- badgeOffsetSquare: { right: -8, top: -8 },
2097
+ badgeSize: 6,
2098
+ badgeOffsetCircle: { right: -1, top: -1 },
2099
+ badgeOffsetSquare: { right: -2, top: -2 },
2689
2100
  borderRadiusSquare: radius.avatarSmall,
2690
2101
  borderRadiusCircle: radius.avatarCircle
2691
2102
  }
@@ -2696,43 +2107,53 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
2696
2107
  const configs = {
2697
2108
  xl: {
2698
2109
  height: 48,
2699
- padding: 20,
2110
+ padding: 13,
2700
2111
  fontSize: 20,
2701
- gap: 10,
2702
- iconSize: 24,
2703
- radius: radius.tagLarge
2112
+ lineHeight: 22,
2113
+ gap: 6,
2114
+ iconSize: 22,
2115
+ radius: 8,
2116
+ borderWidth: 1
2704
2117
  },
2705
2118
  lg: {
2706
2119
  height: 40,
2707
- padding: 16,
2120
+ padding: 10,
2708
2121
  fontSize: 18,
2709
- gap: 8,
2710
- iconSize: 24,
2711
- radius: radius.tagLarge
2122
+ lineHeight: 20,
2123
+ gap: 6,
2124
+ iconSize: 20,
2125
+ radius: 8,
2126
+ borderWidth: 1
2712
2127
  },
2713
2128
  md: {
2714
2129
  height: 32,
2715
- padding: 12,
2130
+ padding: 7,
2716
2131
  fontSize: 16,
2717
- gap: 6,
2718
- iconSize: 16,
2719
- radius: radius.tagMedium
2132
+ lineHeight: 18,
2133
+ gap: 4,
2134
+ iconSize: 18,
2135
+ radius: 6,
2136
+ borderWidth: 1
2720
2137
  },
2721
2138
  sm: {
2722
2139
  height: 24,
2723
- padding: 8,
2140
+ padding: 4,
2724
2141
  fontSize: 14,
2142
+ lineHeight: 16,
2725
2143
  gap: 4,
2726
2144
  iconSize: 16,
2727
- radius: radius.tagMedium
2145
+ radius: 4,
2146
+ borderWidth: 1
2728
2147
  },
2729
2148
  xs: {
2730
2149
  height: 20,
2731
- padding: 6,
2150
+ padding: 3,
2732
2151
  fontSize: 12,
2152
+ lineHeight: 14,
2733
2153
  gap: 4,
2734
- iconSize: 16,
2735
- radius: radius.tagSmall
2154
+ iconSize: 14,
2155
+ radius: 4,
2156
+ borderWidth: 1
2736
2157
  }
2737
2158
  };
2738
2159
  return configs[size];
@@ -2963,7 +2384,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
2963
2384
  padding: 4
2964
2385
  },
2965
2386
  sm: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
2966
- xs: { size: 6, fontSize: 6, lineHeight: 6, iconSize: 4, padding: 0 }
2387
+ xs: { size: 6, fontSize: 6, lineHeight: 6, iconSize: 4, padding: 0 },
2388
+ xxs: { size: 4, fontSize: 4, lineHeight: 4, iconSize: 4, padding: 0 }
2967
2389
  };
2968
2390
  return configs[size];
2969
2391
  },
@@ -3276,6 +2698,29 @@ var useDesignSystem = () => {
3276
2698
  }
3277
2699
  return context;
3278
2700
  };
2701
+ var useResolvedTheme = (overrides) => {
2702
+ const context = useDesignSystem();
2703
+ const resolvedMode = overrides?.themeMode ?? context.mode;
2704
+ const resolvedProductContext = overrides?.themeProductContext ?? context.productContext;
2705
+ const theme = useMemo(() => {
2706
+ if (resolvedMode === context.mode && resolvedProductContext === context.productContext) {
2707
+ return context.theme;
2708
+ }
2709
+ return themeConfig(resolvedMode, resolvedProductContext);
2710
+ }, [
2711
+ resolvedMode,
2712
+ resolvedProductContext,
2713
+ context.mode,
2714
+ context.productContext,
2715
+ context.theme
2716
+ ]);
2717
+ return {
2718
+ ...context,
2719
+ mode: resolvedMode,
2720
+ productContext: resolvedProductContext,
2721
+ theme
2722
+ };
2723
+ };
3279
2724
  var idCounter = 0;
3280
2725
  var hasReactUseId = typeof React2.useId === "function";
3281
2726
  var useIdFallback = () => {
@@ -3308,6 +2753,7 @@ export {
3308
2753
  typographyTokens,
3309
2754
  useDesignSystem,
3310
2755
  useId,
3311
- useModalId
2756
+ useModalId,
2757
+ useResolvedTheme
3312
2758
  };
3313
2759
  //# sourceMappingURL=index.mjs.map