@xsolla/xui-core 0.111.0 → 0.112.0-pr181.1773122783
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.
- package/index.d.mts +396 -101
- package/index.d.ts +396 -101
- package/index.js +492 -171
- package/index.js.flow +361 -82
- package/index.js.map +1 -1
- package/index.mjs +488 -171
- package/index.mjs.map +1 -1
- package/package.json +1 -1
package/index.d.mts
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
+
type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
|
|
4
|
+
interface TypographyVariant {
|
|
5
|
+
fontSize: number;
|
|
6
|
+
lineHeight: string;
|
|
7
|
+
fontWeight: number;
|
|
8
|
+
}
|
|
9
|
+
interface TypographyBodyVariant extends TypographyVariant {
|
|
10
|
+
accent?: {
|
|
11
|
+
fontWeight: number;
|
|
12
|
+
};
|
|
13
|
+
paragraph?: {
|
|
14
|
+
lineHeight: string;
|
|
15
|
+
spacing?: number;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
interface TypographyTokens {
|
|
19
|
+
heading: {
|
|
20
|
+
h1: TypographyVariant;
|
|
21
|
+
h2: TypographyVariant;
|
|
22
|
+
h3: TypographyVariant;
|
|
23
|
+
h4: TypographyVariant;
|
|
24
|
+
h5: TypographyVariant;
|
|
25
|
+
};
|
|
26
|
+
basic: {
|
|
27
|
+
display: TypographyVariant;
|
|
28
|
+
"body-lg": TypographyBodyVariant;
|
|
29
|
+
"body-md": TypographyBodyVariant;
|
|
30
|
+
"body-sm": TypographyBodyVariant;
|
|
31
|
+
"body-xs": TypographyBodyVariant;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
declare const typographyTokens: Record<ProductContext, TypographyTokens>;
|
|
35
|
+
declare const defaultProductContext: ProductContext;
|
|
36
|
+
declare const getTypographyTokens: (productContext?: ProductContext) => TypographyTokens;
|
|
37
|
+
declare const getTypographyVariant: (productContext: ProductContext, variant: string) => TypographyVariant | TypographyBodyVariant | undefined;
|
|
38
|
+
|
|
3
39
|
var background = {
|
|
4
40
|
primary: "#1b2628",
|
|
5
41
|
secondary: "#141d1f",
|
|
@@ -116,26 +152,26 @@ var control = {
|
|
|
116
152
|
borderPress: "rgba(255, 255, 255, 0)"
|
|
117
153
|
},
|
|
118
154
|
tertiary: {
|
|
119
|
-
bg: "
|
|
120
|
-
bgHover: "
|
|
121
|
-
bgPress: "
|
|
122
|
-
border: "rgba(255, 255, 255, 0
|
|
123
|
-
borderHover: "rgba(255, 255, 255, 0
|
|
124
|
-
borderPress: "rgba(255, 255, 255, 0
|
|
155
|
+
bg: "rgba(85, 220, 246, 0)",
|
|
156
|
+
bgHover: "rgba(85, 220, 246, 0.07)",
|
|
157
|
+
bgPress: "rgba(85, 220, 246, 0.12)",
|
|
158
|
+
border: "rgba(255, 255, 255, 0)",
|
|
159
|
+
borderHover: "rgba(255, 255, 255, 0)",
|
|
160
|
+
borderPress: "rgba(255, 255, 255, 0)"
|
|
125
161
|
},
|
|
126
162
|
ghost: {
|
|
127
163
|
bg: "rgba(255, 255, 255, 0)",
|
|
128
|
-
bgHover: "rgba(
|
|
129
|
-
bgPress: "rgba(
|
|
130
|
-
border: "rgba(
|
|
131
|
-
borderHover: "rgba(
|
|
132
|
-
borderPress: "rgba(
|
|
164
|
+
bgHover: "rgba(85, 220, 246, 0.04)",
|
|
165
|
+
bgPress: "rgba(85, 220, 246, 0.08)",
|
|
166
|
+
border: "rgba(85, 220, 246, 0.16)",
|
|
167
|
+
borderHover: "rgba(85, 220, 246, 0.24)",
|
|
168
|
+
borderPress: "rgba(85, 220, 246, 0.16)"
|
|
133
169
|
},
|
|
134
170
|
text: {
|
|
135
171
|
primary: "#000000",
|
|
136
172
|
secondary: "#ffffff",
|
|
137
|
-
tertiary: "#
|
|
138
|
-
ghost: "#
|
|
173
|
+
tertiary: "#55dcf6",
|
|
174
|
+
ghost: "#55dcf6",
|
|
139
175
|
disable: "#b3b3b3"
|
|
140
176
|
}
|
|
141
177
|
},
|
|
@@ -206,17 +242,17 @@ var control = {
|
|
|
206
242
|
},
|
|
207
243
|
ghost: {
|
|
208
244
|
bg: "rgba(255, 255, 255, 0)",
|
|
209
|
-
bgHover: "rgba(
|
|
210
|
-
bgPress: "rgba(
|
|
211
|
-
border: "rgba(
|
|
212
|
-
borderHover: "rgba(
|
|
213
|
-
borderPress: "rgba(
|
|
245
|
+
bgHover: "rgba(206, 246, 85, 0.04)",
|
|
246
|
+
bgPress: "rgba(206, 246, 85, 0.08)",
|
|
247
|
+
border: "rgba(206, 246, 85, 0.16)",
|
|
248
|
+
borderHover: "rgba(206, 246, 85, 0.24)",
|
|
249
|
+
borderPress: "rgba(206, 246, 85, 0.16)"
|
|
214
250
|
},
|
|
215
251
|
text: {
|
|
216
252
|
primary: "#000000",
|
|
217
253
|
secondary: "#ffffff",
|
|
218
254
|
tertiary: "#cef655",
|
|
219
|
-
ghost: "#
|
|
255
|
+
ghost: "#cef655"
|
|
220
256
|
}
|
|
221
257
|
},
|
|
222
258
|
alert: {
|
|
@@ -248,19 +284,29 @@ var control = {
|
|
|
248
284
|
},
|
|
249
285
|
ghost: {
|
|
250
286
|
bg: "rgba(255, 255, 255, 0)",
|
|
251
|
-
bgHover: "rgba(
|
|
252
|
-
bgPress: "rgba(
|
|
253
|
-
border: "rgba(
|
|
254
|
-
borderHover: "rgba(
|
|
255
|
-
borderPress: "rgba(
|
|
287
|
+
bgHover: "rgba(246, 112, 85, 0.04)",
|
|
288
|
+
bgPress: "rgba(246, 112, 85, 0.08)",
|
|
289
|
+
border: "rgba(246, 112, 85, 0.16)",
|
|
290
|
+
borderHover: "rgba(246, 112, 85, 0.24)",
|
|
291
|
+
borderPress: "rgba(246, 112, 85, 0.16)"
|
|
256
292
|
},
|
|
257
293
|
text: {
|
|
258
294
|
primary: "#ffffff",
|
|
259
295
|
secondary: "#ffffff",
|
|
260
296
|
tertiary: "#f67055",
|
|
261
|
-
ghost: "#
|
|
297
|
+
ghost: "#f67055"
|
|
262
298
|
}
|
|
263
299
|
},
|
|
300
|
+
appButton: {
|
|
301
|
+
bg: "#34474b",
|
|
302
|
+
bgHover: "#3d5256",
|
|
303
|
+
bgPress: "#2b3b3e",
|
|
304
|
+
border: "rgba(255, 255, 255, 0.12)",
|
|
305
|
+
borderHover: "rgba(255, 255, 255, 0.18)",
|
|
306
|
+
borderPress: "rgba(255, 255, 255, 0.12)",
|
|
307
|
+
text: "#b7c5c8",
|
|
308
|
+
textDisable: "#b3b3b3"
|
|
309
|
+
},
|
|
264
310
|
input: {
|
|
265
311
|
bg: "rgba(255, 255, 255, 0.12)",
|
|
266
312
|
bgHover: "rgba(255, 255, 255, 0.15)",
|
|
@@ -318,13 +364,14 @@ var control = {
|
|
|
318
364
|
toggleButton: {
|
|
319
365
|
bg: "rgba(255, 255, 255, 0.1)",
|
|
320
366
|
bgHover: "rgba(255, 255, 255, 0.15)",
|
|
321
|
-
|
|
367
|
+
bgActive: "#000000",
|
|
322
368
|
bgDisable: "rgba(255, 255, 255, 0.06)",
|
|
323
369
|
border: "rgba(255, 255, 255, 0.16)",
|
|
324
370
|
borderHover: "rgba(255, 255, 255, 0.16)",
|
|
325
|
-
|
|
371
|
+
borderActive: "rgba(255, 255, 255, 0)",
|
|
326
372
|
borderDisable: "rgba(255, 255, 255, 0.16)",
|
|
327
373
|
text: "#e8eced",
|
|
374
|
+
textActive: "#e8eced",
|
|
328
375
|
textDisable: "rgba(255, 255, 255, 0.4)"
|
|
329
376
|
}
|
|
330
377
|
};
|
|
@@ -342,7 +389,6 @@ declare const colors: {
|
|
|
342
389
|
background: {
|
|
343
390
|
primary: string;
|
|
344
391
|
secondary: string;
|
|
345
|
-
inverse: string;
|
|
346
392
|
brand: {
|
|
347
393
|
primary: string;
|
|
348
394
|
secondary: string;
|
|
@@ -351,6 +397,7 @@ declare const colors: {
|
|
|
351
397
|
primary: string;
|
|
352
398
|
secondary: string;
|
|
353
399
|
};
|
|
400
|
+
inverse: string;
|
|
354
401
|
success: {
|
|
355
402
|
primary: string;
|
|
356
403
|
secondary: string;
|
|
@@ -372,7 +419,6 @@ declare const colors: {
|
|
|
372
419
|
primary: string;
|
|
373
420
|
secondary: string;
|
|
374
421
|
tertiary: string;
|
|
375
|
-
inverse: string;
|
|
376
422
|
brand: {
|
|
377
423
|
primary: string;
|
|
378
424
|
secondary: string;
|
|
@@ -381,6 +427,11 @@ declare const colors: {
|
|
|
381
427
|
primary: string;
|
|
382
428
|
secondary: string;
|
|
383
429
|
};
|
|
430
|
+
inverse: string;
|
|
431
|
+
static: {
|
|
432
|
+
light: string;
|
|
433
|
+
dark: string;
|
|
434
|
+
};
|
|
384
435
|
success: {
|
|
385
436
|
primary: string;
|
|
386
437
|
secondary: string;
|
|
@@ -405,17 +456,13 @@ declare const colors: {
|
|
|
405
456
|
alert: string;
|
|
406
457
|
neutral: string;
|
|
407
458
|
};
|
|
408
|
-
static: {
|
|
409
|
-
light: string;
|
|
410
|
-
dark: string;
|
|
411
|
-
};
|
|
412
459
|
};
|
|
413
460
|
border: {
|
|
414
461
|
primary: string;
|
|
415
462
|
secondary: string;
|
|
416
|
-
inverse: string;
|
|
417
463
|
brand: string;
|
|
418
464
|
brandExtra: string;
|
|
465
|
+
inverse: string;
|
|
419
466
|
success: string;
|
|
420
467
|
warning: string;
|
|
421
468
|
alert: string;
|
|
@@ -600,6 +647,16 @@ declare const colors: {
|
|
|
600
647
|
ghost: string;
|
|
601
648
|
};
|
|
602
649
|
};
|
|
650
|
+
appButton: {
|
|
651
|
+
bg: string;
|
|
652
|
+
bgHover: string;
|
|
653
|
+
bgPress: string;
|
|
654
|
+
border: string;
|
|
655
|
+
borderHover: string;
|
|
656
|
+
borderPress: string;
|
|
657
|
+
text: string;
|
|
658
|
+
textDisable: string;
|
|
659
|
+
};
|
|
603
660
|
input: {
|
|
604
661
|
bg: string;
|
|
605
662
|
bgHover: string;
|
|
@@ -630,9 +687,23 @@ declare const colors: {
|
|
|
630
687
|
border: string;
|
|
631
688
|
borderHover: string;
|
|
632
689
|
};
|
|
690
|
+
slider: {
|
|
691
|
+
bg: string;
|
|
692
|
+
bgHover: string;
|
|
693
|
+
bgDisable: string;
|
|
694
|
+
};
|
|
633
695
|
switch: {
|
|
634
696
|
bg: string;
|
|
635
697
|
bgHover: string;
|
|
698
|
+
bgDisable: string;
|
|
699
|
+
border: string;
|
|
700
|
+
borderHover: string;
|
|
701
|
+
borderDisable: string;
|
|
702
|
+
};
|
|
703
|
+
knob: {
|
|
704
|
+
bg: string;
|
|
705
|
+
bgHover: string;
|
|
706
|
+
bgInactive: string;
|
|
636
707
|
};
|
|
637
708
|
text: {
|
|
638
709
|
primary: string;
|
|
@@ -657,13 +728,14 @@ declare const colors: {
|
|
|
657
728
|
toggleButton: {
|
|
658
729
|
bg: string;
|
|
659
730
|
bgHover: string;
|
|
660
|
-
|
|
731
|
+
bgActive: string;
|
|
661
732
|
bgDisable: string;
|
|
662
733
|
border: string;
|
|
663
734
|
borderHover: string;
|
|
664
|
-
|
|
735
|
+
borderActive: string;
|
|
665
736
|
borderDisable: string;
|
|
666
737
|
text: string;
|
|
738
|
+
textActive: string;
|
|
667
739
|
textDisable: string;
|
|
668
740
|
};
|
|
669
741
|
};
|
|
@@ -672,7 +744,6 @@ declare const colors: {
|
|
|
672
744
|
background: {
|
|
673
745
|
primary: string;
|
|
674
746
|
secondary: string;
|
|
675
|
-
inverse: string;
|
|
676
747
|
brand: {
|
|
677
748
|
primary: string;
|
|
678
749
|
secondary: string;
|
|
@@ -681,6 +752,7 @@ declare const colors: {
|
|
|
681
752
|
primary: string;
|
|
682
753
|
secondary: string;
|
|
683
754
|
};
|
|
755
|
+
inverse: string;
|
|
684
756
|
success: {
|
|
685
757
|
primary: string;
|
|
686
758
|
secondary: string;
|
|
@@ -702,7 +774,6 @@ declare const colors: {
|
|
|
702
774
|
primary: string;
|
|
703
775
|
secondary: string;
|
|
704
776
|
tertiary: string;
|
|
705
|
-
inverse: string;
|
|
706
777
|
brand: {
|
|
707
778
|
primary: string;
|
|
708
779
|
secondary: string;
|
|
@@ -711,6 +782,11 @@ declare const colors: {
|
|
|
711
782
|
primary: string;
|
|
712
783
|
secondary: string;
|
|
713
784
|
};
|
|
785
|
+
inverse: string;
|
|
786
|
+
static: {
|
|
787
|
+
light: string;
|
|
788
|
+
dark: string;
|
|
789
|
+
};
|
|
714
790
|
success: {
|
|
715
791
|
primary: string;
|
|
716
792
|
secondary: string;
|
|
@@ -735,17 +811,13 @@ declare const colors: {
|
|
|
735
811
|
alert: string;
|
|
736
812
|
neutral: string;
|
|
737
813
|
};
|
|
738
|
-
static: {
|
|
739
|
-
light: string;
|
|
740
|
-
dark: string;
|
|
741
|
-
};
|
|
742
814
|
};
|
|
743
815
|
border: {
|
|
744
816
|
primary: string;
|
|
745
817
|
secondary: string;
|
|
746
|
-
inverse: string;
|
|
747
818
|
brand: string;
|
|
748
819
|
brandExtra: string;
|
|
820
|
+
inverse: string;
|
|
749
821
|
success: string;
|
|
750
822
|
warning: string;
|
|
751
823
|
alert: string;
|
|
@@ -930,6 +1002,16 @@ declare const colors: {
|
|
|
930
1002
|
ghost: string;
|
|
931
1003
|
};
|
|
932
1004
|
};
|
|
1005
|
+
appButton: {
|
|
1006
|
+
bg: string;
|
|
1007
|
+
bgHover: string;
|
|
1008
|
+
bgPress: string;
|
|
1009
|
+
border: string;
|
|
1010
|
+
borderHover: string;
|
|
1011
|
+
borderPress: string;
|
|
1012
|
+
text: string;
|
|
1013
|
+
textDisable: string;
|
|
1014
|
+
};
|
|
933
1015
|
input: {
|
|
934
1016
|
bg: string;
|
|
935
1017
|
bgHover: string;
|
|
@@ -960,9 +1042,23 @@ declare const colors: {
|
|
|
960
1042
|
border: string;
|
|
961
1043
|
borderHover: string;
|
|
962
1044
|
};
|
|
1045
|
+
slider: {
|
|
1046
|
+
bg: string;
|
|
1047
|
+
bgHover: string;
|
|
1048
|
+
bgDisable: string;
|
|
1049
|
+
};
|
|
963
1050
|
switch: {
|
|
964
1051
|
bg: string;
|
|
965
1052
|
bgHover: string;
|
|
1053
|
+
bgDisable: string;
|
|
1054
|
+
border: string;
|
|
1055
|
+
borderHover: string;
|
|
1056
|
+
borderDisable: string;
|
|
1057
|
+
};
|
|
1058
|
+
knob: {
|
|
1059
|
+
bg: string;
|
|
1060
|
+
bgHover: string;
|
|
1061
|
+
bgInactive: string;
|
|
966
1062
|
};
|
|
967
1063
|
text: {
|
|
968
1064
|
primary: string;
|
|
@@ -987,13 +1083,14 @@ declare const colors: {
|
|
|
987
1083
|
toggleButton: {
|
|
988
1084
|
bg: string;
|
|
989
1085
|
bgHover: string;
|
|
990
|
-
|
|
1086
|
+
bgActive: string;
|
|
991
1087
|
bgDisable: string;
|
|
992
1088
|
border: string;
|
|
993
1089
|
borderHover: string;
|
|
994
|
-
|
|
1090
|
+
borderActive: string;
|
|
995
1091
|
borderDisable: string;
|
|
996
1092
|
text: string;
|
|
1093
|
+
textActive: string;
|
|
997
1094
|
textDisable: string;
|
|
998
1095
|
};
|
|
999
1096
|
};
|
|
@@ -1002,7 +1099,6 @@ declare const colors: {
|
|
|
1002
1099
|
background: {
|
|
1003
1100
|
primary: string;
|
|
1004
1101
|
secondary: string;
|
|
1005
|
-
inverse: string;
|
|
1006
1102
|
brand: {
|
|
1007
1103
|
primary: string;
|
|
1008
1104
|
secondary: string;
|
|
@@ -1011,6 +1107,7 @@ declare const colors: {
|
|
|
1011
1107
|
primary: string;
|
|
1012
1108
|
secondary: string;
|
|
1013
1109
|
};
|
|
1110
|
+
inverse: string;
|
|
1014
1111
|
success: {
|
|
1015
1112
|
primary: string;
|
|
1016
1113
|
secondary: string;
|
|
@@ -1032,7 +1129,6 @@ declare const colors: {
|
|
|
1032
1129
|
primary: string;
|
|
1033
1130
|
secondary: string;
|
|
1034
1131
|
tertiary: string;
|
|
1035
|
-
inverse: string;
|
|
1036
1132
|
brand: {
|
|
1037
1133
|
primary: string;
|
|
1038
1134
|
secondary: string;
|
|
@@ -1041,6 +1137,11 @@ declare const colors: {
|
|
|
1041
1137
|
primary: string;
|
|
1042
1138
|
secondary: string;
|
|
1043
1139
|
};
|
|
1140
|
+
inverse: string;
|
|
1141
|
+
static: {
|
|
1142
|
+
light: string;
|
|
1143
|
+
dark: string;
|
|
1144
|
+
};
|
|
1044
1145
|
success: {
|
|
1045
1146
|
primary: string;
|
|
1046
1147
|
secondary: string;
|
|
@@ -1065,17 +1166,13 @@ declare const colors: {
|
|
|
1065
1166
|
alert: string;
|
|
1066
1167
|
neutral: string;
|
|
1067
1168
|
};
|
|
1068
|
-
static: {
|
|
1069
|
-
light: string;
|
|
1070
|
-
dark: string;
|
|
1071
|
-
};
|
|
1072
1169
|
};
|
|
1073
1170
|
border: {
|
|
1074
1171
|
primary: string;
|
|
1075
1172
|
secondary: string;
|
|
1076
|
-
inverse: string;
|
|
1077
1173
|
brand: string;
|
|
1078
1174
|
brandExtra: string;
|
|
1175
|
+
inverse: string;
|
|
1079
1176
|
success: string;
|
|
1080
1177
|
warning: string;
|
|
1081
1178
|
alert: string;
|
|
@@ -1260,6 +1357,16 @@ declare const colors: {
|
|
|
1260
1357
|
ghost: string;
|
|
1261
1358
|
};
|
|
1262
1359
|
};
|
|
1360
|
+
appButton: {
|
|
1361
|
+
bg: string;
|
|
1362
|
+
bgHover: string;
|
|
1363
|
+
bgPress: string;
|
|
1364
|
+
border: string;
|
|
1365
|
+
borderHover: string;
|
|
1366
|
+
borderPress: string;
|
|
1367
|
+
text: string;
|
|
1368
|
+
textDisable: string;
|
|
1369
|
+
};
|
|
1263
1370
|
input: {
|
|
1264
1371
|
bg: string;
|
|
1265
1372
|
bgHover: string;
|
|
@@ -1290,9 +1397,23 @@ declare const colors: {
|
|
|
1290
1397
|
border: string;
|
|
1291
1398
|
borderHover: string;
|
|
1292
1399
|
};
|
|
1400
|
+
slider: {
|
|
1401
|
+
bg: string;
|
|
1402
|
+
bgHover: string;
|
|
1403
|
+
bgDisable: string;
|
|
1404
|
+
};
|
|
1293
1405
|
switch: {
|
|
1294
1406
|
bg: string;
|
|
1295
1407
|
bgHover: string;
|
|
1408
|
+
bgDisable: string;
|
|
1409
|
+
border: string;
|
|
1410
|
+
borderHover: string;
|
|
1411
|
+
borderDisable: string;
|
|
1412
|
+
};
|
|
1413
|
+
knob: {
|
|
1414
|
+
bg: string;
|
|
1415
|
+
bgHover: string;
|
|
1416
|
+
bgInactive: string;
|
|
1296
1417
|
};
|
|
1297
1418
|
text: {
|
|
1298
1419
|
primary: string;
|
|
@@ -1317,13 +1438,14 @@ declare const colors: {
|
|
|
1317
1438
|
toggleButton: {
|
|
1318
1439
|
bg: string;
|
|
1319
1440
|
bgHover: string;
|
|
1320
|
-
|
|
1441
|
+
bgActive: string;
|
|
1321
1442
|
bgDisable: string;
|
|
1322
1443
|
border: string;
|
|
1323
1444
|
borderHover: string;
|
|
1324
|
-
|
|
1445
|
+
borderActive: string;
|
|
1325
1446
|
borderDisable: string;
|
|
1326
1447
|
text: string;
|
|
1448
|
+
textActive: string;
|
|
1327
1449
|
textDisable: string;
|
|
1328
1450
|
};
|
|
1329
1451
|
};
|
|
@@ -1332,7 +1454,6 @@ declare const colors: {
|
|
|
1332
1454
|
background: {
|
|
1333
1455
|
primary: string;
|
|
1334
1456
|
secondary: string;
|
|
1335
|
-
inverse: string;
|
|
1336
1457
|
brand: {
|
|
1337
1458
|
primary: string;
|
|
1338
1459
|
secondary: string;
|
|
@@ -1341,6 +1462,7 @@ declare const colors: {
|
|
|
1341
1462
|
primary: string;
|
|
1342
1463
|
secondary: string;
|
|
1343
1464
|
};
|
|
1465
|
+
inverse: string;
|
|
1344
1466
|
success: {
|
|
1345
1467
|
primary: string;
|
|
1346
1468
|
secondary: string;
|
|
@@ -1362,7 +1484,6 @@ declare const colors: {
|
|
|
1362
1484
|
primary: string;
|
|
1363
1485
|
secondary: string;
|
|
1364
1486
|
tertiary: string;
|
|
1365
|
-
inverse: string;
|
|
1366
1487
|
brand: {
|
|
1367
1488
|
primary: string;
|
|
1368
1489
|
secondary: string;
|
|
@@ -1371,6 +1492,11 @@ declare const colors: {
|
|
|
1371
1492
|
primary: string;
|
|
1372
1493
|
secondary: string;
|
|
1373
1494
|
};
|
|
1495
|
+
inverse: string;
|
|
1496
|
+
static: {
|
|
1497
|
+
light: string;
|
|
1498
|
+
dark: string;
|
|
1499
|
+
};
|
|
1374
1500
|
success: {
|
|
1375
1501
|
primary: string;
|
|
1376
1502
|
secondary: string;
|
|
@@ -1395,17 +1521,13 @@ declare const colors: {
|
|
|
1395
1521
|
alert: string;
|
|
1396
1522
|
neutral: string;
|
|
1397
1523
|
};
|
|
1398
|
-
static: {
|
|
1399
|
-
light: string;
|
|
1400
|
-
dark: string;
|
|
1401
|
-
};
|
|
1402
1524
|
};
|
|
1403
1525
|
border: {
|
|
1404
1526
|
primary: string;
|
|
1405
1527
|
secondary: string;
|
|
1406
|
-
inverse: string;
|
|
1407
1528
|
brand: string;
|
|
1408
1529
|
brandExtra: string;
|
|
1530
|
+
inverse: string;
|
|
1409
1531
|
success: string;
|
|
1410
1532
|
warning: string;
|
|
1411
1533
|
alert: string;
|
|
@@ -1590,6 +1712,16 @@ declare const colors: {
|
|
|
1590
1712
|
ghost: string;
|
|
1591
1713
|
};
|
|
1592
1714
|
};
|
|
1715
|
+
appButton: {
|
|
1716
|
+
bg: string;
|
|
1717
|
+
bgHover: string;
|
|
1718
|
+
bgPress: string;
|
|
1719
|
+
border: string;
|
|
1720
|
+
borderHover: string;
|
|
1721
|
+
borderPress: string;
|
|
1722
|
+
text: string;
|
|
1723
|
+
textDisable: string;
|
|
1724
|
+
};
|
|
1593
1725
|
input: {
|
|
1594
1726
|
bg: string;
|
|
1595
1727
|
bgHover: string;
|
|
@@ -1620,9 +1752,23 @@ declare const colors: {
|
|
|
1620
1752
|
border: string;
|
|
1621
1753
|
borderHover: string;
|
|
1622
1754
|
};
|
|
1755
|
+
slider: {
|
|
1756
|
+
bg: string;
|
|
1757
|
+
bgHover: string;
|
|
1758
|
+
bgDisable: string;
|
|
1759
|
+
};
|
|
1623
1760
|
switch: {
|
|
1624
1761
|
bg: string;
|
|
1625
1762
|
bgHover: string;
|
|
1763
|
+
bgDisable: string;
|
|
1764
|
+
border: string;
|
|
1765
|
+
borderHover: string;
|
|
1766
|
+
borderDisable: string;
|
|
1767
|
+
};
|
|
1768
|
+
knob: {
|
|
1769
|
+
bg: string;
|
|
1770
|
+
bgHover: string;
|
|
1771
|
+
bgInactive: string;
|
|
1626
1772
|
};
|
|
1627
1773
|
text: {
|
|
1628
1774
|
primary: string;
|
|
@@ -1647,13 +1793,14 @@ declare const colors: {
|
|
|
1647
1793
|
toggleButton: {
|
|
1648
1794
|
bg: string;
|
|
1649
1795
|
bgHover: string;
|
|
1650
|
-
|
|
1796
|
+
bgActive: string;
|
|
1651
1797
|
bgDisable: string;
|
|
1652
1798
|
border: string;
|
|
1653
1799
|
borderHover: string;
|
|
1654
|
-
|
|
1800
|
+
borderActive: string;
|
|
1655
1801
|
borderDisable: string;
|
|
1656
1802
|
text: string;
|
|
1803
|
+
textActive: string;
|
|
1657
1804
|
textDisable: string;
|
|
1658
1805
|
};
|
|
1659
1806
|
};
|
|
@@ -1920,6 +2067,16 @@ declare const colors: {
|
|
|
1920
2067
|
ghost: string;
|
|
1921
2068
|
};
|
|
1922
2069
|
};
|
|
2070
|
+
appButton: {
|
|
2071
|
+
bg: string;
|
|
2072
|
+
bgHover: string;
|
|
2073
|
+
bgPress: string;
|
|
2074
|
+
border: string;
|
|
2075
|
+
borderHover: string;
|
|
2076
|
+
borderPress: string;
|
|
2077
|
+
text: string;
|
|
2078
|
+
textDisable: string;
|
|
2079
|
+
};
|
|
1923
2080
|
input: {
|
|
1924
2081
|
bg: string;
|
|
1925
2082
|
bgHover: string;
|
|
@@ -1977,13 +2134,14 @@ declare const colors: {
|
|
|
1977
2134
|
toggleButton: {
|
|
1978
2135
|
bg: string;
|
|
1979
2136
|
bgHover: string;
|
|
1980
|
-
|
|
2137
|
+
bgActive: string;
|
|
1981
2138
|
bgDisable: string;
|
|
1982
2139
|
border: string;
|
|
1983
2140
|
borderHover: string;
|
|
1984
|
-
|
|
2141
|
+
borderActive: string;
|
|
1985
2142
|
borderDisable: string;
|
|
1986
2143
|
text: string;
|
|
2144
|
+
textActive: string;
|
|
1987
2145
|
textDisable: string;
|
|
1988
2146
|
};
|
|
1989
2147
|
};
|
|
@@ -2250,6 +2408,16 @@ declare const colors: {
|
|
|
2250
2408
|
ghost: string;
|
|
2251
2409
|
};
|
|
2252
2410
|
};
|
|
2411
|
+
appButton: {
|
|
2412
|
+
bg: string;
|
|
2413
|
+
bgHover: string;
|
|
2414
|
+
bgPress: string;
|
|
2415
|
+
border: string;
|
|
2416
|
+
borderHover: string;
|
|
2417
|
+
borderPress: string;
|
|
2418
|
+
text: string;
|
|
2419
|
+
textDisable: string;
|
|
2420
|
+
};
|
|
2253
2421
|
input: {
|
|
2254
2422
|
bg: string;
|
|
2255
2423
|
bgHover: string;
|
|
@@ -2307,13 +2475,14 @@ declare const colors: {
|
|
|
2307
2475
|
toggleButton: {
|
|
2308
2476
|
bg: string;
|
|
2309
2477
|
bgHover: string;
|
|
2310
|
-
|
|
2478
|
+
bgActive: string;
|
|
2311
2479
|
bgDisable: string;
|
|
2312
2480
|
border: string;
|
|
2313
2481
|
borderHover: string;
|
|
2314
|
-
|
|
2482
|
+
borderActive: string;
|
|
2315
2483
|
borderDisable: string;
|
|
2316
2484
|
text: string;
|
|
2485
|
+
textActive: string;
|
|
2317
2486
|
textDisable: string;
|
|
2318
2487
|
};
|
|
2319
2488
|
};
|
|
@@ -2580,6 +2749,16 @@ declare const colors: {
|
|
|
2580
2749
|
ghost: string;
|
|
2581
2750
|
};
|
|
2582
2751
|
};
|
|
2752
|
+
appButton: {
|
|
2753
|
+
bg: string;
|
|
2754
|
+
bgHover: string;
|
|
2755
|
+
bgPress: string;
|
|
2756
|
+
border: string;
|
|
2757
|
+
borderHover: string;
|
|
2758
|
+
borderPress: string;
|
|
2759
|
+
text: string;
|
|
2760
|
+
textDisable: string;
|
|
2761
|
+
};
|
|
2583
2762
|
input: {
|
|
2584
2763
|
bg: string;
|
|
2585
2764
|
bgHover: string;
|
|
@@ -2637,13 +2816,14 @@ declare const colors: {
|
|
|
2637
2816
|
toggleButton: {
|
|
2638
2817
|
bg: string;
|
|
2639
2818
|
bgHover: string;
|
|
2640
|
-
|
|
2819
|
+
bgActive: string;
|
|
2641
2820
|
bgDisable: string;
|
|
2642
2821
|
border: string;
|
|
2643
2822
|
borderHover: string;
|
|
2644
|
-
|
|
2823
|
+
borderActive: string;
|
|
2645
2824
|
borderDisable: string;
|
|
2646
2825
|
text: string;
|
|
2826
|
+
textActive: string;
|
|
2647
2827
|
textDisable: string;
|
|
2648
2828
|
};
|
|
2649
2829
|
};
|
|
@@ -2910,6 +3090,16 @@ declare const colors: {
|
|
|
2910
3090
|
ghost: string;
|
|
2911
3091
|
};
|
|
2912
3092
|
};
|
|
3093
|
+
appButton: {
|
|
3094
|
+
bg: string;
|
|
3095
|
+
bgHover: string;
|
|
3096
|
+
bgPress: string;
|
|
3097
|
+
border: string;
|
|
3098
|
+
borderHover: string;
|
|
3099
|
+
borderPress: string;
|
|
3100
|
+
text: string;
|
|
3101
|
+
textDisable: string;
|
|
3102
|
+
};
|
|
2913
3103
|
input: {
|
|
2914
3104
|
bg: string;
|
|
2915
3105
|
bgHover: string;
|
|
@@ -2967,13 +3157,14 @@ declare const colors: {
|
|
|
2967
3157
|
toggleButton: {
|
|
2968
3158
|
bg: string;
|
|
2969
3159
|
bgHover: string;
|
|
2970
|
-
|
|
3160
|
+
bgActive: string;
|
|
2971
3161
|
bgDisable: string;
|
|
2972
3162
|
border: string;
|
|
2973
3163
|
borderHover: string;
|
|
2974
|
-
|
|
3164
|
+
borderActive: string;
|
|
2975
3165
|
borderDisable: string;
|
|
2976
3166
|
text: string;
|
|
3167
|
+
textActive: string;
|
|
2977
3168
|
textDisable: string;
|
|
2978
3169
|
};
|
|
2979
3170
|
};
|
|
@@ -3240,6 +3431,16 @@ declare const colors: {
|
|
|
3240
3431
|
ghost: string;
|
|
3241
3432
|
};
|
|
3242
3433
|
};
|
|
3434
|
+
appButton: {
|
|
3435
|
+
bg: string;
|
|
3436
|
+
bgHover: string;
|
|
3437
|
+
bgPress: string;
|
|
3438
|
+
border: string;
|
|
3439
|
+
borderHover: string;
|
|
3440
|
+
borderPress: string;
|
|
3441
|
+
text: string;
|
|
3442
|
+
textDisable: string;
|
|
3443
|
+
};
|
|
3243
3444
|
input: {
|
|
3244
3445
|
bg: string;
|
|
3245
3446
|
bgHover: string;
|
|
@@ -3297,13 +3498,14 @@ declare const colors: {
|
|
|
3297
3498
|
toggleButton: {
|
|
3298
3499
|
bg: string;
|
|
3299
3500
|
bgHover: string;
|
|
3300
|
-
|
|
3501
|
+
bgActive: string;
|
|
3301
3502
|
bgDisable: string;
|
|
3302
3503
|
border: string;
|
|
3303
3504
|
borderHover: string;
|
|
3304
|
-
|
|
3505
|
+
borderActive: string;
|
|
3305
3506
|
borderDisable: string;
|
|
3306
3507
|
text: string;
|
|
3508
|
+
textActive: string;
|
|
3307
3509
|
textDisable: string;
|
|
3308
3510
|
};
|
|
3309
3511
|
};
|
|
@@ -3366,20 +3568,24 @@ declare const FontLoader: React.FC;
|
|
|
3366
3568
|
/**
|
|
3367
3569
|
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
3368
3570
|
*
|
|
3369
|
-
* Pilat Wide — heading/display font, registered at weights 600
|
|
3571
|
+
* Pilat Wide — heading/display font, registered at weights 400, 600, 700, 800.
|
|
3572
|
+
* - 400: Medium (for B2B mode headings)
|
|
3573
|
+
* - 600: Semi-Bold
|
|
3574
|
+
* - 700: Bold
|
|
3575
|
+
* - 800: Black/Heavy (for display text)
|
|
3370
3576
|
*
|
|
3371
3577
|
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
3372
3578
|
* which are the same typeface under a legacy name.
|
|
3579
|
+
* Registered at weights 300, 400, 500, 600, 700.
|
|
3373
3580
|
*/
|
|
3374
|
-
declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
|
|
3581
|
+
declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
|
|
3375
3582
|
|
|
3376
3583
|
type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "xsolla-dark" | "xsolla-light" | "xsollaDark" | "xsollaLight" | "ltg-dark";
|
|
3377
|
-
declare const themeConfig: (mode?: ThemeMode) => {
|
|
3584
|
+
declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
|
|
3378
3585
|
colors: {
|
|
3379
3586
|
background: {
|
|
3380
3587
|
primary: string;
|
|
3381
3588
|
secondary: string;
|
|
3382
|
-
inverse: string;
|
|
3383
3589
|
brand: {
|
|
3384
3590
|
primary: string;
|
|
3385
3591
|
secondary: string;
|
|
@@ -3388,6 +3594,7 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3388
3594
|
primary: string;
|
|
3389
3595
|
secondary: string;
|
|
3390
3596
|
};
|
|
3597
|
+
inverse: string;
|
|
3391
3598
|
success: {
|
|
3392
3599
|
primary: string;
|
|
3393
3600
|
secondary: string;
|
|
@@ -3409,7 +3616,6 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3409
3616
|
primary: string;
|
|
3410
3617
|
secondary: string;
|
|
3411
3618
|
tertiary: string;
|
|
3412
|
-
inverse: string;
|
|
3413
3619
|
brand: {
|
|
3414
3620
|
primary: string;
|
|
3415
3621
|
secondary: string;
|
|
@@ -3418,6 +3624,11 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3418
3624
|
primary: string;
|
|
3419
3625
|
secondary: string;
|
|
3420
3626
|
};
|
|
3627
|
+
inverse: string;
|
|
3628
|
+
static: {
|
|
3629
|
+
light: string;
|
|
3630
|
+
dark: string;
|
|
3631
|
+
};
|
|
3421
3632
|
success: {
|
|
3422
3633
|
primary: string;
|
|
3423
3634
|
secondary: string;
|
|
@@ -3442,17 +3653,13 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3442
3653
|
alert: string;
|
|
3443
3654
|
neutral: string;
|
|
3444
3655
|
};
|
|
3445
|
-
static: {
|
|
3446
|
-
light: string;
|
|
3447
|
-
dark: string;
|
|
3448
|
-
};
|
|
3449
3656
|
};
|
|
3450
3657
|
border: {
|
|
3451
3658
|
primary: string;
|
|
3452
3659
|
secondary: string;
|
|
3453
|
-
inverse: string;
|
|
3454
3660
|
brand: string;
|
|
3455
3661
|
brandExtra: string;
|
|
3662
|
+
inverse: string;
|
|
3456
3663
|
success: string;
|
|
3457
3664
|
warning: string;
|
|
3458
3665
|
alert: string;
|
|
@@ -3637,6 +3844,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3637
3844
|
ghost: string;
|
|
3638
3845
|
};
|
|
3639
3846
|
};
|
|
3847
|
+
appButton: {
|
|
3848
|
+
bg: string;
|
|
3849
|
+
bgHover: string;
|
|
3850
|
+
bgPress: string;
|
|
3851
|
+
border: string;
|
|
3852
|
+
borderHover: string;
|
|
3853
|
+
borderPress: string;
|
|
3854
|
+
text: string;
|
|
3855
|
+
textDisable: string;
|
|
3856
|
+
};
|
|
3640
3857
|
input: {
|
|
3641
3858
|
bg: string;
|
|
3642
3859
|
bgHover: string;
|
|
@@ -3667,9 +3884,23 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3667
3884
|
border: string;
|
|
3668
3885
|
borderHover: string;
|
|
3669
3886
|
};
|
|
3887
|
+
slider: {
|
|
3888
|
+
bg: string;
|
|
3889
|
+
bgHover: string;
|
|
3890
|
+
bgDisable: string;
|
|
3891
|
+
};
|
|
3670
3892
|
switch: {
|
|
3671
3893
|
bg: string;
|
|
3672
3894
|
bgHover: string;
|
|
3895
|
+
bgDisable: string;
|
|
3896
|
+
border: string;
|
|
3897
|
+
borderHover: string;
|
|
3898
|
+
borderDisable: string;
|
|
3899
|
+
};
|
|
3900
|
+
knob: {
|
|
3901
|
+
bg: string;
|
|
3902
|
+
bgHover: string;
|
|
3903
|
+
bgInactive: string;
|
|
3673
3904
|
};
|
|
3674
3905
|
text: {
|
|
3675
3906
|
primary: string;
|
|
@@ -3694,13 +3925,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3694
3925
|
toggleButton: {
|
|
3695
3926
|
bg: string;
|
|
3696
3927
|
bgHover: string;
|
|
3697
|
-
|
|
3928
|
+
bgActive: string;
|
|
3698
3929
|
bgDisable: string;
|
|
3699
3930
|
border: string;
|
|
3700
3931
|
borderHover: string;
|
|
3701
|
-
|
|
3932
|
+
borderActive: string;
|
|
3702
3933
|
borderDisable: string;
|
|
3703
3934
|
text: string;
|
|
3935
|
+
textActive: string;
|
|
3704
3936
|
textDisable: string;
|
|
3705
3937
|
};
|
|
3706
3938
|
};
|
|
@@ -3708,7 +3940,6 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3708
3940
|
background: {
|
|
3709
3941
|
primary: string;
|
|
3710
3942
|
secondary: string;
|
|
3711
|
-
inverse: string;
|
|
3712
3943
|
brand: {
|
|
3713
3944
|
primary: string;
|
|
3714
3945
|
secondary: string;
|
|
@@ -3717,6 +3948,7 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3717
3948
|
primary: string;
|
|
3718
3949
|
secondary: string;
|
|
3719
3950
|
};
|
|
3951
|
+
inverse: string;
|
|
3720
3952
|
success: {
|
|
3721
3953
|
primary: string;
|
|
3722
3954
|
secondary: string;
|
|
@@ -3738,7 +3970,6 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3738
3970
|
primary: string;
|
|
3739
3971
|
secondary: string;
|
|
3740
3972
|
tertiary: string;
|
|
3741
|
-
inverse: string;
|
|
3742
3973
|
brand: {
|
|
3743
3974
|
primary: string;
|
|
3744
3975
|
secondary: string;
|
|
@@ -3747,6 +3978,11 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3747
3978
|
primary: string;
|
|
3748
3979
|
secondary: string;
|
|
3749
3980
|
};
|
|
3981
|
+
inverse: string;
|
|
3982
|
+
static: {
|
|
3983
|
+
light: string;
|
|
3984
|
+
dark: string;
|
|
3985
|
+
};
|
|
3750
3986
|
success: {
|
|
3751
3987
|
primary: string;
|
|
3752
3988
|
secondary: string;
|
|
@@ -3771,17 +4007,13 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3771
4007
|
alert: string;
|
|
3772
4008
|
neutral: string;
|
|
3773
4009
|
};
|
|
3774
|
-
static: {
|
|
3775
|
-
light: string;
|
|
3776
|
-
dark: string;
|
|
3777
|
-
};
|
|
3778
4010
|
};
|
|
3779
4011
|
border: {
|
|
3780
4012
|
primary: string;
|
|
3781
4013
|
secondary: string;
|
|
3782
|
-
inverse: string;
|
|
3783
4014
|
brand: string;
|
|
3784
4015
|
brandExtra: string;
|
|
4016
|
+
inverse: string;
|
|
3785
4017
|
success: string;
|
|
3786
4018
|
warning: string;
|
|
3787
4019
|
alert: string;
|
|
@@ -3966,6 +4198,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3966
4198
|
ghost: string;
|
|
3967
4199
|
};
|
|
3968
4200
|
};
|
|
4201
|
+
appButton: {
|
|
4202
|
+
bg: string;
|
|
4203
|
+
bgHover: string;
|
|
4204
|
+
bgPress: string;
|
|
4205
|
+
border: string;
|
|
4206
|
+
borderHover: string;
|
|
4207
|
+
borderPress: string;
|
|
4208
|
+
text: string;
|
|
4209
|
+
textDisable: string;
|
|
4210
|
+
};
|
|
3969
4211
|
input: {
|
|
3970
4212
|
bg: string;
|
|
3971
4213
|
bgHover: string;
|
|
@@ -3996,9 +4238,23 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3996
4238
|
border: string;
|
|
3997
4239
|
borderHover: string;
|
|
3998
4240
|
};
|
|
4241
|
+
slider: {
|
|
4242
|
+
bg: string;
|
|
4243
|
+
bgHover: string;
|
|
4244
|
+
bgDisable: string;
|
|
4245
|
+
};
|
|
3999
4246
|
switch: {
|
|
4000
4247
|
bg: string;
|
|
4001
4248
|
bgHover: string;
|
|
4249
|
+
bgDisable: string;
|
|
4250
|
+
border: string;
|
|
4251
|
+
borderHover: string;
|
|
4252
|
+
borderDisable: string;
|
|
4253
|
+
};
|
|
4254
|
+
knob: {
|
|
4255
|
+
bg: string;
|
|
4256
|
+
bgHover: string;
|
|
4257
|
+
bgInactive: string;
|
|
4002
4258
|
};
|
|
4003
4259
|
text: {
|
|
4004
4260
|
primary: string;
|
|
@@ -4023,13 +4279,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4023
4279
|
toggleButton: {
|
|
4024
4280
|
bg: string;
|
|
4025
4281
|
bgHover: string;
|
|
4026
|
-
|
|
4282
|
+
bgActive: string;
|
|
4027
4283
|
bgDisable: string;
|
|
4028
4284
|
border: string;
|
|
4029
4285
|
borderHover: string;
|
|
4030
|
-
|
|
4286
|
+
borderActive: string;
|
|
4031
4287
|
borderDisable: string;
|
|
4032
4288
|
text: string;
|
|
4289
|
+
textActive: string;
|
|
4033
4290
|
textDisable: string;
|
|
4034
4291
|
};
|
|
4035
4292
|
};
|
|
@@ -4295,6 +4552,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4295
4552
|
ghost: string;
|
|
4296
4553
|
};
|
|
4297
4554
|
};
|
|
4555
|
+
appButton: {
|
|
4556
|
+
bg: string;
|
|
4557
|
+
bgHover: string;
|
|
4558
|
+
bgPress: string;
|
|
4559
|
+
border: string;
|
|
4560
|
+
borderHover: string;
|
|
4561
|
+
borderPress: string;
|
|
4562
|
+
text: string;
|
|
4563
|
+
textDisable: string;
|
|
4564
|
+
};
|
|
4298
4565
|
input: {
|
|
4299
4566
|
bg: string;
|
|
4300
4567
|
bgHover: string;
|
|
@@ -4352,13 +4619,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4352
4619
|
toggleButton: {
|
|
4353
4620
|
bg: string;
|
|
4354
4621
|
bgHover: string;
|
|
4355
|
-
|
|
4622
|
+
bgActive: string;
|
|
4356
4623
|
bgDisable: string;
|
|
4357
4624
|
border: string;
|
|
4358
4625
|
borderHover: string;
|
|
4359
|
-
|
|
4626
|
+
borderActive: string;
|
|
4360
4627
|
borderDisable: string;
|
|
4361
4628
|
text: string;
|
|
4629
|
+
textActive: string;
|
|
4362
4630
|
textDisable: string;
|
|
4363
4631
|
};
|
|
4364
4632
|
};
|
|
@@ -4624,6 +4892,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4624
4892
|
ghost: string;
|
|
4625
4893
|
};
|
|
4626
4894
|
};
|
|
4895
|
+
appButton: {
|
|
4896
|
+
bg: string;
|
|
4897
|
+
bgHover: string;
|
|
4898
|
+
bgPress: string;
|
|
4899
|
+
border: string;
|
|
4900
|
+
borderHover: string;
|
|
4901
|
+
borderPress: string;
|
|
4902
|
+
text: string;
|
|
4903
|
+
textDisable: string;
|
|
4904
|
+
};
|
|
4627
4905
|
input: {
|
|
4628
4906
|
bg: string;
|
|
4629
4907
|
bgHover: string;
|
|
@@ -4681,13 +4959,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4681
4959
|
toggleButton: {
|
|
4682
4960
|
bg: string;
|
|
4683
4961
|
bgHover: string;
|
|
4684
|
-
|
|
4962
|
+
bgActive: string;
|
|
4685
4963
|
bgDisable: string;
|
|
4686
4964
|
border: string;
|
|
4687
4965
|
borderHover: string;
|
|
4688
|
-
|
|
4966
|
+
borderActive: string;
|
|
4689
4967
|
borderDisable: string;
|
|
4690
4968
|
text: string;
|
|
4969
|
+
textActive: string;
|
|
4691
4970
|
textDisable: string;
|
|
4692
4971
|
};
|
|
4693
4972
|
};
|
|
@@ -4953,6 +5232,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4953
5232
|
ghost: string;
|
|
4954
5233
|
};
|
|
4955
5234
|
};
|
|
5235
|
+
appButton: {
|
|
5236
|
+
bg: string;
|
|
5237
|
+
bgHover: string;
|
|
5238
|
+
bgPress: string;
|
|
5239
|
+
border: string;
|
|
5240
|
+
borderHover: string;
|
|
5241
|
+
borderPress: string;
|
|
5242
|
+
text: string;
|
|
5243
|
+
textDisable: string;
|
|
5244
|
+
};
|
|
4956
5245
|
input: {
|
|
4957
5246
|
bg: string;
|
|
4958
5247
|
bgHover: string;
|
|
@@ -5010,13 +5299,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5010
5299
|
toggleButton: {
|
|
5011
5300
|
bg: string;
|
|
5012
5301
|
bgHover: string;
|
|
5013
|
-
|
|
5302
|
+
bgActive: string;
|
|
5014
5303
|
bgDisable: string;
|
|
5015
5304
|
border: string;
|
|
5016
5305
|
borderHover: string;
|
|
5017
|
-
|
|
5306
|
+
borderActive: string;
|
|
5018
5307
|
borderDisable: string;
|
|
5019
5308
|
text: string;
|
|
5309
|
+
textActive: string;
|
|
5020
5310
|
textDisable: string;
|
|
5021
5311
|
};
|
|
5022
5312
|
};
|
|
@@ -5055,6 +5345,8 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5055
5345
|
heading: string;
|
|
5056
5346
|
body: string;
|
|
5057
5347
|
};
|
|
5348
|
+
typographyTokens: TypographyTokens;
|
|
5349
|
+
productContext: ProductContext;
|
|
5058
5350
|
sizing: {
|
|
5059
5351
|
button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5060
5352
|
height: number;
|
|
@@ -5979,11 +6271,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5979
6271
|
interface DesignSystemContextType {
|
|
5980
6272
|
mode: ThemeMode;
|
|
5981
6273
|
setMode: (mode: ThemeMode) => void;
|
|
6274
|
+
productContext: ProductContext;
|
|
6275
|
+
setProductContext: (productContext: ProductContext) => void;
|
|
5982
6276
|
theme: ReturnType<typeof themeConfig>;
|
|
5983
6277
|
}
|
|
5984
6278
|
declare const XUIProvider: React.FC<{
|
|
5985
6279
|
children: React.ReactNode;
|
|
5986
6280
|
initialMode?: ThemeMode;
|
|
6281
|
+
initialProductContext?: ProductContext;
|
|
5987
6282
|
/** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
|
|
5988
6283
|
loadFonts?: boolean;
|
|
5989
6284
|
}>;
|
|
@@ -6002,4 +6297,4 @@ declare const ModalIdContext: React.Context<string | null>;
|
|
|
6002
6297
|
*/
|
|
6003
6298
|
declare const useModalId: () => string | null;
|
|
6004
6299
|
|
|
6005
|
-
export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
|
6300
|
+
export { FontLoader, ModalIdContext, type ProductContext, type ThemeColors, type ThemeMode, type TypographyBodyVariant, type TypographyTokens, type TypographyVariant, XUIProvider, colors, defaultProductContext, fontFacesCSS, fonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId };
|