@xsolla/xui-core 0.112.0 → 0.113.0-pr183.1773205188
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 +232 -29
- package/index.d.ts +232 -29
- package/index.js +436 -113
- package/index.js.flow +202 -11
- package/index.js.map +1 -1
- package/index.mjs +432 -113
- package/index.mjs.map +1 -1
- package/package.json +5 -2
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)",
|
|
@@ -601,6 +647,16 @@ declare const colors: {
|
|
|
601
647
|
ghost: string;
|
|
602
648
|
};
|
|
603
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
|
+
};
|
|
604
660
|
input: {
|
|
605
661
|
bg: string;
|
|
606
662
|
bgHover: string;
|
|
@@ -946,6 +1002,16 @@ declare const colors: {
|
|
|
946
1002
|
ghost: string;
|
|
947
1003
|
};
|
|
948
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
|
+
};
|
|
949
1015
|
input: {
|
|
950
1016
|
bg: string;
|
|
951
1017
|
bgHover: string;
|
|
@@ -1291,6 +1357,16 @@ declare const colors: {
|
|
|
1291
1357
|
ghost: string;
|
|
1292
1358
|
};
|
|
1293
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
|
+
};
|
|
1294
1370
|
input: {
|
|
1295
1371
|
bg: string;
|
|
1296
1372
|
bgHover: string;
|
|
@@ -1636,6 +1712,16 @@ declare const colors: {
|
|
|
1636
1712
|
ghost: string;
|
|
1637
1713
|
};
|
|
1638
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
|
+
};
|
|
1639
1725
|
input: {
|
|
1640
1726
|
bg: string;
|
|
1641
1727
|
bgHover: string;
|
|
@@ -1981,6 +2067,16 @@ declare const colors: {
|
|
|
1981
2067
|
ghost: string;
|
|
1982
2068
|
};
|
|
1983
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
|
+
};
|
|
1984
2080
|
input: {
|
|
1985
2081
|
bg: string;
|
|
1986
2082
|
bgHover: string;
|
|
@@ -2312,6 +2408,16 @@ declare const colors: {
|
|
|
2312
2408
|
ghost: string;
|
|
2313
2409
|
};
|
|
2314
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
|
+
};
|
|
2315
2421
|
input: {
|
|
2316
2422
|
bg: string;
|
|
2317
2423
|
bgHover: string;
|
|
@@ -2643,6 +2749,16 @@ declare const colors: {
|
|
|
2643
2749
|
ghost: string;
|
|
2644
2750
|
};
|
|
2645
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
|
+
};
|
|
2646
2762
|
input: {
|
|
2647
2763
|
bg: string;
|
|
2648
2764
|
bgHover: string;
|
|
@@ -2974,6 +3090,16 @@ declare const colors: {
|
|
|
2974
3090
|
ghost: string;
|
|
2975
3091
|
};
|
|
2976
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
|
+
};
|
|
2977
3103
|
input: {
|
|
2978
3104
|
bg: string;
|
|
2979
3105
|
bgHover: string;
|
|
@@ -3305,6 +3431,16 @@ declare const colors: {
|
|
|
3305
3431
|
ghost: string;
|
|
3306
3432
|
};
|
|
3307
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
|
+
};
|
|
3308
3444
|
input: {
|
|
3309
3445
|
bg: string;
|
|
3310
3446
|
bgHover: string;
|
|
@@ -3432,15 +3568,20 @@ declare const FontLoader: React.FC;
|
|
|
3432
3568
|
/**
|
|
3433
3569
|
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
3434
3570
|
*
|
|
3435
|
-
* 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)
|
|
3436
3576
|
*
|
|
3437
3577
|
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
3438
3578
|
* which are the same typeface under a legacy name.
|
|
3579
|
+
* Registered at weights 300, 400, 500, 600, 700.
|
|
3439
3580
|
*/
|
|
3440
|
-
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";
|
|
3441
3582
|
|
|
3442
3583
|
type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "xsolla-dark" | "xsolla-light" | "xsollaDark" | "xsollaLight" | "ltg-dark";
|
|
3443
|
-
declare const themeConfig: (mode?: ThemeMode) => {
|
|
3584
|
+
declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
|
|
3444
3585
|
colors: {
|
|
3445
3586
|
background: {
|
|
3446
3587
|
primary: string;
|
|
@@ -3703,6 +3844,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
3703
3844
|
ghost: string;
|
|
3704
3845
|
};
|
|
3705
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
|
+
};
|
|
3706
3857
|
input: {
|
|
3707
3858
|
bg: string;
|
|
3708
3859
|
bgHover: string;
|
|
@@ -4047,6 +4198,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4047
4198
|
ghost: string;
|
|
4048
4199
|
};
|
|
4049
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
|
+
};
|
|
4050
4211
|
input: {
|
|
4051
4212
|
bg: string;
|
|
4052
4213
|
bgHover: string;
|
|
@@ -4391,6 +4552,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4391
4552
|
ghost: string;
|
|
4392
4553
|
};
|
|
4393
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
|
+
};
|
|
4394
4565
|
input: {
|
|
4395
4566
|
bg: string;
|
|
4396
4567
|
bgHover: string;
|
|
@@ -4721,6 +4892,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
4721
4892
|
ghost: string;
|
|
4722
4893
|
};
|
|
4723
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
|
+
};
|
|
4724
4905
|
input: {
|
|
4725
4906
|
bg: string;
|
|
4726
4907
|
bgHover: string;
|
|
@@ -5051,6 +5232,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5051
5232
|
ghost: string;
|
|
5052
5233
|
};
|
|
5053
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
|
+
};
|
|
5054
5245
|
input: {
|
|
5055
5246
|
bg: string;
|
|
5056
5247
|
bgHover: string;
|
|
@@ -5154,6 +5345,8 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5154
5345
|
heading: string;
|
|
5155
5346
|
body: string;
|
|
5156
5347
|
};
|
|
5348
|
+
typographyTokens: TypographyTokens;
|
|
5349
|
+
productContext: ProductContext;
|
|
5157
5350
|
sizing: {
|
|
5158
5351
|
button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5159
5352
|
height: number;
|
|
@@ -5380,30 +5573,35 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5380
5573
|
fontSize: number;
|
|
5381
5574
|
radius: number;
|
|
5382
5575
|
borderWidth: number;
|
|
5576
|
+
fieldGap: number;
|
|
5383
5577
|
} | {
|
|
5384
5578
|
size: number;
|
|
5385
5579
|
gap: number;
|
|
5386
5580
|
fontSize: number;
|
|
5387
5581
|
radius: number;
|
|
5388
5582
|
borderWidth: number;
|
|
5583
|
+
fieldGap: number;
|
|
5389
5584
|
} | {
|
|
5390
5585
|
size: number;
|
|
5391
5586
|
gap: number;
|
|
5392
5587
|
fontSize: number;
|
|
5393
5588
|
radius: number;
|
|
5394
5589
|
borderWidth: number;
|
|
5590
|
+
fieldGap: number;
|
|
5395
5591
|
} | {
|
|
5396
5592
|
size: number;
|
|
5397
5593
|
gap: number;
|
|
5398
5594
|
fontSize: number;
|
|
5399
5595
|
radius: number;
|
|
5400
5596
|
borderWidth: number;
|
|
5597
|
+
fieldGap: number;
|
|
5401
5598
|
} | {
|
|
5402
5599
|
size: number;
|
|
5403
5600
|
gap: number;
|
|
5404
5601
|
fontSize: number;
|
|
5405
5602
|
radius: number;
|
|
5406
5603
|
borderWidth: number;
|
|
5604
|
+
fieldGap: number;
|
|
5407
5605
|
};
|
|
5408
5606
|
textarea: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5409
5607
|
height: number;
|
|
@@ -6078,11 +6276,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
6078
6276
|
interface DesignSystemContextType {
|
|
6079
6277
|
mode: ThemeMode;
|
|
6080
6278
|
setMode: (mode: ThemeMode) => void;
|
|
6279
|
+
productContext: ProductContext;
|
|
6280
|
+
setProductContext: (productContext: ProductContext) => void;
|
|
6081
6281
|
theme: ReturnType<typeof themeConfig>;
|
|
6082
6282
|
}
|
|
6083
6283
|
declare const XUIProvider: React.FC<{
|
|
6084
6284
|
children: React.ReactNode;
|
|
6085
6285
|
initialMode?: ThemeMode;
|
|
6286
|
+
initialProductContext?: ProductContext;
|
|
6287
|
+
/** Use `initialProductContext` instead. */
|
|
6288
|
+
productContext?: never;
|
|
6086
6289
|
/** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
|
|
6087
6290
|
loadFonts?: boolean;
|
|
6088
6291
|
}>;
|
|
@@ -6101,4 +6304,4 @@ declare const ModalIdContext: React.Context<string | null>;
|
|
|
6101
6304
|
*/
|
|
6102
6305
|
declare const useModalId: () => string | null;
|
|
6103
6306
|
|
|
6104
|
-
export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
|
6307
|
+
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 };
|