@xsolla/xui-core 0.113.0 → 0.114.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.
- package/index.d.mts +52 -4
- package/index.d.ts +52 -4
- package/index.js +243 -5
- package/index.js.flow +52 -6
- package/index.js.map +1 -1
- package/index.mjs +239 -5
- 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",
|
|
@@ -3532,15 +3568,20 @@ declare const FontLoader: React.FC;
|
|
|
3532
3568
|
/**
|
|
3533
3569
|
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
3534
3570
|
*
|
|
3535
|
-
* 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)
|
|
3536
3576
|
*
|
|
3537
3577
|
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
3538
3578
|
* which are the same typeface under a legacy name.
|
|
3579
|
+
* Registered at weights 300, 400, 500, 600, 700.
|
|
3539
3580
|
*/
|
|
3540
|
-
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";
|
|
3541
3582
|
|
|
3542
3583
|
type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "xsolla-dark" | "xsolla-light" | "xsollaDark" | "xsollaLight" | "ltg-dark";
|
|
3543
|
-
declare const themeConfig: (mode?: ThemeMode) => {
|
|
3584
|
+
declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
|
|
3544
3585
|
colors: {
|
|
3545
3586
|
background: {
|
|
3546
3587
|
primary: string;
|
|
@@ -5304,6 +5345,8 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5304
5345
|
heading: string;
|
|
5305
5346
|
body: string;
|
|
5306
5347
|
};
|
|
5348
|
+
typographyTokens: TypographyTokens;
|
|
5349
|
+
productContext: ProductContext;
|
|
5307
5350
|
sizing: {
|
|
5308
5351
|
button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5309
5352
|
height: number;
|
|
@@ -6228,11 +6271,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
6228
6271
|
interface DesignSystemContextType {
|
|
6229
6272
|
mode: ThemeMode;
|
|
6230
6273
|
setMode: (mode: ThemeMode) => void;
|
|
6274
|
+
productContext: ProductContext;
|
|
6275
|
+
setProductContext: (productContext: ProductContext) => void;
|
|
6231
6276
|
theme: ReturnType<typeof themeConfig>;
|
|
6232
6277
|
}
|
|
6233
6278
|
declare const XUIProvider: React.FC<{
|
|
6234
6279
|
children: React.ReactNode;
|
|
6235
6280
|
initialMode?: ThemeMode;
|
|
6281
|
+
initialProductContext?: ProductContext;
|
|
6282
|
+
/** Use `initialProductContext` instead. */
|
|
6283
|
+
productContext?: never;
|
|
6236
6284
|
/** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
|
|
6237
6285
|
loadFonts?: boolean;
|
|
6238
6286
|
}>;
|
|
@@ -6251,4 +6299,4 @@ declare const ModalIdContext: React.Context<string | null>;
|
|
|
6251
6299
|
*/
|
|
6252
6300
|
declare const useModalId: () => string | null;
|
|
6253
6301
|
|
|
6254
|
-
export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
|
6302
|
+
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 };
|
package/index.d.ts
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",
|
|
@@ -3532,15 +3568,20 @@ declare const FontLoader: React.FC;
|
|
|
3532
3568
|
/**
|
|
3533
3569
|
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
3534
3570
|
*
|
|
3535
|
-
* 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)
|
|
3536
3576
|
*
|
|
3537
3577
|
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
3538
3578
|
* which are the same typeface under a legacy name.
|
|
3579
|
+
* Registered at weights 300, 400, 500, 600, 700.
|
|
3539
3580
|
*/
|
|
3540
|
-
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";
|
|
3541
3582
|
|
|
3542
3583
|
type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "xsolla-dark" | "xsolla-light" | "xsollaDark" | "xsollaLight" | "ltg-dark";
|
|
3543
|
-
declare const themeConfig: (mode?: ThemeMode) => {
|
|
3584
|
+
declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
|
|
3544
3585
|
colors: {
|
|
3545
3586
|
background: {
|
|
3546
3587
|
primary: string;
|
|
@@ -5304,6 +5345,8 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5304
5345
|
heading: string;
|
|
5305
5346
|
body: string;
|
|
5306
5347
|
};
|
|
5348
|
+
typographyTokens: TypographyTokens;
|
|
5349
|
+
productContext: ProductContext;
|
|
5307
5350
|
sizing: {
|
|
5308
5351
|
button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5309
5352
|
height: number;
|
|
@@ -6228,11 +6271,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
6228
6271
|
interface DesignSystemContextType {
|
|
6229
6272
|
mode: ThemeMode;
|
|
6230
6273
|
setMode: (mode: ThemeMode) => void;
|
|
6274
|
+
productContext: ProductContext;
|
|
6275
|
+
setProductContext: (productContext: ProductContext) => void;
|
|
6231
6276
|
theme: ReturnType<typeof themeConfig>;
|
|
6232
6277
|
}
|
|
6233
6278
|
declare const XUIProvider: React.FC<{
|
|
6234
6279
|
children: React.ReactNode;
|
|
6235
6280
|
initialMode?: ThemeMode;
|
|
6281
|
+
initialProductContext?: ProductContext;
|
|
6282
|
+
/** Use `initialProductContext` instead. */
|
|
6283
|
+
productContext?: never;
|
|
6236
6284
|
/** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
|
|
6237
6285
|
loadFonts?: boolean;
|
|
6238
6286
|
}>;
|
|
@@ -6251,4 +6299,4 @@ declare const ModalIdContext: React.Context<string | null>;
|
|
|
6251
6299
|
*/
|
|
6252
6300
|
declare const useModalId: () => string | null;
|
|
6253
6301
|
|
|
6254
|
-
export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
|
6302
|
+
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 };
|
package/index.js
CHANGED
|
@@ -34,8 +34,11 @@ __export(index_exports, {
|
|
|
34
34
|
ModalIdContext: () => ModalIdContext,
|
|
35
35
|
XUIProvider: () => XUIProvider,
|
|
36
36
|
colors: () => colors,
|
|
37
|
+
defaultProductContext: () => defaultProductContext,
|
|
37
38
|
fontFacesCSS: () => fontFacesCSS,
|
|
38
39
|
fonts: () => fonts,
|
|
40
|
+
getTypographyTokens: () => getTypographyTokens,
|
|
41
|
+
getTypographyVariant: () => getTypographyVariant,
|
|
39
42
|
isAndroid: () => isAndroid,
|
|
40
43
|
isIOS: () => isIOS,
|
|
41
44
|
isNative: () => isNative,
|
|
@@ -45,6 +48,7 @@ __export(index_exports, {
|
|
|
45
48
|
spacing: () => spacing,
|
|
46
49
|
themeConfig: () => themeConfig,
|
|
47
50
|
typography: () => typography,
|
|
51
|
+
typographyTokens: () => typographyTokens,
|
|
48
52
|
useDesignSystem: () => useDesignSystem,
|
|
49
53
|
useId: () => useId,
|
|
50
54
|
useModalId: () => useModalId
|
|
@@ -1854,6 +1858,207 @@ var typography = {
|
|
|
1854
1858
|
}
|
|
1855
1859
|
};
|
|
1856
1860
|
|
|
1861
|
+
// src/tokens/typography.ts
|
|
1862
|
+
var typographyTokens = {
|
|
1863
|
+
b2c: {
|
|
1864
|
+
heading: {
|
|
1865
|
+
h1: { fontSize: 40, lineHeight: "48px", fontWeight: 700 },
|
|
1866
|
+
h2: { fontSize: 32, lineHeight: "38px", fontWeight: 700 },
|
|
1867
|
+
h3: { fontSize: 28, lineHeight: "34px", fontWeight: 700 },
|
|
1868
|
+
h4: { fontSize: 24, lineHeight: "28px", fontWeight: 700 },
|
|
1869
|
+
h5: { fontSize: 20, lineHeight: "24px", fontWeight: 700 }
|
|
1870
|
+
},
|
|
1871
|
+
basic: {
|
|
1872
|
+
display: { fontSize: 48, lineHeight: "58px", fontWeight: 800 },
|
|
1873
|
+
"body-lg": {
|
|
1874
|
+
fontSize: 18,
|
|
1875
|
+
lineHeight: "24px",
|
|
1876
|
+
fontWeight: 400,
|
|
1877
|
+
accent: { fontWeight: 500 },
|
|
1878
|
+
paragraph: { lineHeight: "26px", spacing: 20 }
|
|
1879
|
+
},
|
|
1880
|
+
"body-md": {
|
|
1881
|
+
fontSize: 16,
|
|
1882
|
+
lineHeight: "20px",
|
|
1883
|
+
fontWeight: 400,
|
|
1884
|
+
accent: { fontWeight: 500 },
|
|
1885
|
+
paragraph: { lineHeight: "22px", spacing: 16 }
|
|
1886
|
+
},
|
|
1887
|
+
"body-sm": {
|
|
1888
|
+
fontSize: 14,
|
|
1889
|
+
lineHeight: "18px",
|
|
1890
|
+
fontWeight: 400,
|
|
1891
|
+
accent: { fontWeight: 500 },
|
|
1892
|
+
paragraph: { lineHeight: "20px", spacing: 12 }
|
|
1893
|
+
},
|
|
1894
|
+
"body-xs": {
|
|
1895
|
+
fontSize: 12,
|
|
1896
|
+
lineHeight: "16px",
|
|
1897
|
+
fontWeight: 400,
|
|
1898
|
+
accent: { fontWeight: 500 },
|
|
1899
|
+
paragraph: { lineHeight: "18px", spacing: 8 }
|
|
1900
|
+
}
|
|
1901
|
+
}
|
|
1902
|
+
},
|
|
1903
|
+
b2b: {
|
|
1904
|
+
heading: {
|
|
1905
|
+
h1: { fontSize: 56, lineHeight: "68px", fontWeight: 400 },
|
|
1906
|
+
h2: { fontSize: 48, lineHeight: "58px", fontWeight: 400 },
|
|
1907
|
+
h3: { fontSize: 32, lineHeight: "38px", fontWeight: 400 },
|
|
1908
|
+
h4: { fontSize: 24, lineHeight: "28px", fontWeight: 400 },
|
|
1909
|
+
h5: { fontSize: 20, lineHeight: "24px", fontWeight: 600 }
|
|
1910
|
+
},
|
|
1911
|
+
basic: {
|
|
1912
|
+
display: { fontSize: 64, lineHeight: "78px", fontWeight: 400 },
|
|
1913
|
+
"body-lg": {
|
|
1914
|
+
fontSize: 18,
|
|
1915
|
+
lineHeight: "24px",
|
|
1916
|
+
fontWeight: 400,
|
|
1917
|
+
accent: { fontWeight: 500 },
|
|
1918
|
+
paragraph: { lineHeight: "26px", spacing: 20 }
|
|
1919
|
+
},
|
|
1920
|
+
"body-md": {
|
|
1921
|
+
fontSize: 16,
|
|
1922
|
+
lineHeight: "20px",
|
|
1923
|
+
fontWeight: 400,
|
|
1924
|
+
accent: { fontWeight: 500 },
|
|
1925
|
+
paragraph: { lineHeight: "22px", spacing: 16 }
|
|
1926
|
+
},
|
|
1927
|
+
"body-sm": {
|
|
1928
|
+
fontSize: 14,
|
|
1929
|
+
lineHeight: "18px",
|
|
1930
|
+
fontWeight: 400,
|
|
1931
|
+
accent: { fontWeight: 500 },
|
|
1932
|
+
paragraph: { lineHeight: "20px", spacing: 12 }
|
|
1933
|
+
},
|
|
1934
|
+
"body-xs": {
|
|
1935
|
+
fontSize: 12,
|
|
1936
|
+
lineHeight: "16px",
|
|
1937
|
+
fontWeight: 400,
|
|
1938
|
+
accent: { fontWeight: 500 },
|
|
1939
|
+
paragraph: { lineHeight: "18px", spacing: 8 }
|
|
1940
|
+
}
|
|
1941
|
+
}
|
|
1942
|
+
},
|
|
1943
|
+
paystation: {
|
|
1944
|
+
heading: {
|
|
1945
|
+
h1: { fontSize: 28, lineHeight: "34px", fontWeight: 700 },
|
|
1946
|
+
h2: { fontSize: 24, lineHeight: "28px", fontWeight: 700 },
|
|
1947
|
+
h3: { fontSize: 20, lineHeight: "24px", fontWeight: 700 },
|
|
1948
|
+
h4: { fontSize: 18, lineHeight: "22px", fontWeight: 700 },
|
|
1949
|
+
h5: { fontSize: 16, lineHeight: "20px", fontWeight: 700 }
|
|
1950
|
+
},
|
|
1951
|
+
basic: {
|
|
1952
|
+
display: { fontSize: 40, lineHeight: "48px", fontWeight: 800 },
|
|
1953
|
+
"body-lg": {
|
|
1954
|
+
fontSize: 16,
|
|
1955
|
+
lineHeight: "20px",
|
|
1956
|
+
fontWeight: 400,
|
|
1957
|
+
accent: { fontWeight: 500 },
|
|
1958
|
+
paragraph: { lineHeight: "22px", spacing: 16 }
|
|
1959
|
+
},
|
|
1960
|
+
"body-md": {
|
|
1961
|
+
fontSize: 14,
|
|
1962
|
+
lineHeight: "18px",
|
|
1963
|
+
fontWeight: 400,
|
|
1964
|
+
accent: { fontWeight: 500 },
|
|
1965
|
+
paragraph: { lineHeight: "20px", spacing: 12 }
|
|
1966
|
+
},
|
|
1967
|
+
"body-sm": {
|
|
1968
|
+
fontSize: 12,
|
|
1969
|
+
lineHeight: "16px",
|
|
1970
|
+
fontWeight: 400,
|
|
1971
|
+
accent: { fontWeight: 500 },
|
|
1972
|
+
paragraph: { lineHeight: "18px", spacing: 8 }
|
|
1973
|
+
},
|
|
1974
|
+
"body-xs": {
|
|
1975
|
+
fontSize: 10,
|
|
1976
|
+
lineHeight: "14px",
|
|
1977
|
+
fontWeight: 400,
|
|
1978
|
+
accent: { fontWeight: 500 },
|
|
1979
|
+
paragraph: { lineHeight: "14px", spacing: 6 }
|
|
1980
|
+
}
|
|
1981
|
+
}
|
|
1982
|
+
},
|
|
1983
|
+
presentation: {
|
|
1984
|
+
heading: {
|
|
1985
|
+
h1: { fontSize: 56, lineHeight: "68px", fontWeight: 700 },
|
|
1986
|
+
h2: { fontSize: 48, lineHeight: "58px", fontWeight: 700 },
|
|
1987
|
+
h3: { fontSize: 40, lineHeight: "48px", fontWeight: 700 },
|
|
1988
|
+
h4: { fontSize: 32, lineHeight: "38px", fontWeight: 700 },
|
|
1989
|
+
h5: { fontSize: 28, lineHeight: "34px", fontWeight: 700 }
|
|
1990
|
+
},
|
|
1991
|
+
basic: {
|
|
1992
|
+
display: { fontSize: 64, lineHeight: "78px", fontWeight: 800 },
|
|
1993
|
+
"body-lg": {
|
|
1994
|
+
fontSize: 24,
|
|
1995
|
+
lineHeight: "30px",
|
|
1996
|
+
fontWeight: 400,
|
|
1997
|
+
accent: { fontWeight: 500 },
|
|
1998
|
+
paragraph: { lineHeight: "34px", spacing: 24 }
|
|
1999
|
+
},
|
|
2000
|
+
"body-md": {
|
|
2001
|
+
fontSize: 20,
|
|
2002
|
+
lineHeight: "26px",
|
|
2003
|
+
fontWeight: 400,
|
|
2004
|
+
accent: { fontWeight: 500 },
|
|
2005
|
+
paragraph: { lineHeight: "28px", spacing: 20 }
|
|
2006
|
+
},
|
|
2007
|
+
"body-sm": {
|
|
2008
|
+
fontSize: 18,
|
|
2009
|
+
lineHeight: "24px",
|
|
2010
|
+
fontWeight: 400,
|
|
2011
|
+
accent: { fontWeight: 500 },
|
|
2012
|
+
paragraph: { lineHeight: "26px", spacing: 16 }
|
|
2013
|
+
},
|
|
2014
|
+
"body-xs": {
|
|
2015
|
+
fontSize: 16,
|
|
2016
|
+
lineHeight: "20px",
|
|
2017
|
+
fontWeight: 400,
|
|
2018
|
+
accent: { fontWeight: 500 },
|
|
2019
|
+
paragraph: { lineHeight: "22px", spacing: 12 }
|
|
2020
|
+
}
|
|
2021
|
+
}
|
|
2022
|
+
}
|
|
2023
|
+
};
|
|
2024
|
+
var defaultProductContext = "b2b";
|
|
2025
|
+
var getTypographyTokens = (productContext = defaultProductContext) => {
|
|
2026
|
+
return typographyTokens[productContext] || typographyTokens[defaultProductContext];
|
|
2027
|
+
};
|
|
2028
|
+
var getTypographyVariant = (productContext, variant) => {
|
|
2029
|
+
const tokens = getTypographyTokens(productContext);
|
|
2030
|
+
if (variant in tokens.heading) {
|
|
2031
|
+
return tokens.heading[variant];
|
|
2032
|
+
}
|
|
2033
|
+
if (variant === "display") {
|
|
2034
|
+
return tokens.basic.display;
|
|
2035
|
+
}
|
|
2036
|
+
const bodyVariantMap = {
|
|
2037
|
+
bodyLg: "body-lg",
|
|
2038
|
+
bodyMd: "body-md",
|
|
2039
|
+
bodySm: "body-sm",
|
|
2040
|
+
bodyXs: "body-xs"
|
|
2041
|
+
};
|
|
2042
|
+
const bodyKey = bodyVariantMap[variant.replace("Accent", "").replace("Paragraph", "")];
|
|
2043
|
+
if (bodyKey && bodyKey in tokens.basic) {
|
|
2044
|
+
const baseVariant = tokens.basic[bodyKey];
|
|
2045
|
+
if (variant.includes("Accent") && baseVariant.accent) {
|
|
2046
|
+
return {
|
|
2047
|
+
...baseVariant,
|
|
2048
|
+
fontWeight: baseVariant.accent.fontWeight
|
|
2049
|
+
};
|
|
2050
|
+
}
|
|
2051
|
+
if (variant.includes("Paragraph") && baseVariant.paragraph) {
|
|
2052
|
+
return {
|
|
2053
|
+
...baseVariant,
|
|
2054
|
+
lineHeight: baseVariant.paragraph.lineHeight
|
|
2055
|
+
};
|
|
2056
|
+
}
|
|
2057
|
+
return baseVariant;
|
|
2058
|
+
}
|
|
2059
|
+
return void 0;
|
|
2060
|
+
};
|
|
2061
|
+
|
|
1857
2062
|
// src/fonts/FontLoader.tsx
|
|
1858
2063
|
var import_react = require("react");
|
|
1859
2064
|
|
|
@@ -1868,6 +2073,13 @@ var CDN_BASE = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
|
|
|
1868
2073
|
var fontFacesCSS = `
|
|
1869
2074
|
/* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */
|
|
1870
2075
|
|
|
2076
|
+
@font-face {
|
|
2077
|
+
font-family: 'Pilat Wide';
|
|
2078
|
+
src: url('${CDN_BASE}/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');
|
|
2079
|
+
font-weight: 400;
|
|
2080
|
+
font-style: normal;
|
|
2081
|
+
font-display: swap;
|
|
2082
|
+
}
|
|
1871
2083
|
@font-face {
|
|
1872
2084
|
font-family: 'Pilat Wide';
|
|
1873
2085
|
src: url('${CDN_BASE}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
|
|
@@ -1913,6 +2125,13 @@ var fontFacesCSS = `
|
|
|
1913
2125
|
font-style: normal;
|
|
1914
2126
|
font-display: swap;
|
|
1915
2127
|
}
|
|
2128
|
+
@font-face {
|
|
2129
|
+
font-family: 'Aktiv Grotesk';
|
|
2130
|
+
src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
|
|
2131
|
+
font-weight: 600;
|
|
2132
|
+
font-style: normal;
|
|
2133
|
+
font-display: swap;
|
|
2134
|
+
}
|
|
1916
2135
|
@font-face {
|
|
1917
2136
|
font-family: 'Aktiv Grotesk';
|
|
1918
2137
|
src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
|
|
@@ -1946,7 +2165,7 @@ FontLoader.displayName = "FontLoader";
|
|
|
1946
2165
|
|
|
1947
2166
|
// src/index.tsx
|
|
1948
2167
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
1949
|
-
var themeConfig = (mode = "dark") => ({
|
|
2168
|
+
var themeConfig = (mode = "dark", productContext = defaultProductContext) => ({
|
|
1950
2169
|
colors: colors[mode],
|
|
1951
2170
|
spacing,
|
|
1952
2171
|
radius,
|
|
@@ -1957,6 +2176,8 @@ var themeConfig = (mode = "dark") => ({
|
|
|
1957
2176
|
heading: fonts.heading,
|
|
1958
2177
|
body: fonts.body
|
|
1959
2178
|
},
|
|
2179
|
+
typographyTokens: getTypographyTokens(productContext),
|
|
2180
|
+
productContext,
|
|
1960
2181
|
sizing: {
|
|
1961
2182
|
button: (size) => {
|
|
1962
2183
|
const configs = {
|
|
@@ -2905,15 +3126,25 @@ var themeConfig = (mode = "dark") => ({
|
|
|
2905
3126
|
var DesignSystemContext = (0, import_react2.createContext)(
|
|
2906
3127
|
void 0
|
|
2907
3128
|
);
|
|
2908
|
-
var XUIProvider = ({
|
|
3129
|
+
var XUIProvider = ({
|
|
3130
|
+
children,
|
|
3131
|
+
initialMode = "dark",
|
|
3132
|
+
initialProductContext = defaultProductContext,
|
|
3133
|
+
loadFonts = true
|
|
3134
|
+
}) => {
|
|
2909
3135
|
const [mode, setMode] = (0, import_react2.useState)(initialMode);
|
|
3136
|
+
const [productContext, setProductContext] = (0, import_react2.useState)(
|
|
3137
|
+
initialProductContext
|
|
3138
|
+
);
|
|
2910
3139
|
const value = (0, import_react2.useMemo)(
|
|
2911
3140
|
() => ({
|
|
2912
3141
|
mode,
|
|
2913
3142
|
setMode,
|
|
2914
|
-
|
|
3143
|
+
productContext,
|
|
3144
|
+
setProductContext,
|
|
3145
|
+
theme: themeConfig(mode, productContext)
|
|
2915
3146
|
}),
|
|
2916
|
-
[mode]
|
|
3147
|
+
[mode, productContext]
|
|
2917
3148
|
);
|
|
2918
3149
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DesignSystemContext.Provider, { value, children: [
|
|
2919
3150
|
loadFonts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontLoader, {}),
|
|
@@ -2927,7 +3158,10 @@ var useDesignSystem = () => {
|
|
|
2927
3158
|
mode: "dark",
|
|
2928
3159
|
setMode: () => {
|
|
2929
3160
|
},
|
|
2930
|
-
|
|
3161
|
+
productContext: defaultProductContext,
|
|
3162
|
+
setProductContext: () => {
|
|
3163
|
+
},
|
|
3164
|
+
theme: themeConfig("dark", defaultProductContext)
|
|
2931
3165
|
};
|
|
2932
3166
|
}
|
|
2933
3167
|
return context;
|
|
@@ -2947,8 +3181,11 @@ var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
|
|
|
2947
3181
|
ModalIdContext,
|
|
2948
3182
|
XUIProvider,
|
|
2949
3183
|
colors,
|
|
3184
|
+
defaultProductContext,
|
|
2950
3185
|
fontFacesCSS,
|
|
2951
3186
|
fonts,
|
|
3187
|
+
getTypographyTokens,
|
|
3188
|
+
getTypographyVariant,
|
|
2952
3189
|
isAndroid,
|
|
2953
3190
|
isIOS,
|
|
2954
3191
|
isNative,
|
|
@@ -2958,6 +3195,7 @@ var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
|
|
|
2958
3195
|
spacing,
|
|
2959
3196
|
themeConfig,
|
|
2960
3197
|
typography,
|
|
3198
|
+
typographyTokens,
|
|
2961
3199
|
useDesignSystem,
|
|
2962
3200
|
useId,
|
|
2963
3201
|
useModalId
|
package/index.js.flow
CHANGED
|
@@ -8,7 +8,37 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
import React from 'react';
|
|
11
|
-
declare
|
|
11
|
+
declare type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";declare interface TypographyVariant {
|
|
12
|
+
fontSize: number,
|
|
13
|
+
lineHeight: string,
|
|
14
|
+
fontWeight: number,
|
|
15
|
+
} declare type TypographyBodyVariant = {
|
|
16
|
+
accent?: {
|
|
17
|
+
fontWeight: number,...
|
|
18
|
+
},
|
|
19
|
+
paragraph?: {
|
|
20
|
+
lineHeight: string,
|
|
21
|
+
spacing?: number,...
|
|
22
|
+
},...
|
|
23
|
+
} & TypographyVariant
|
|
24
|
+
declare interface TypographyTokens {
|
|
25
|
+
heading: {
|
|
26
|
+
h1: TypographyVariant,
|
|
27
|
+
h2: TypographyVariant,
|
|
28
|
+
h3: TypographyVariant,
|
|
29
|
+
h4: TypographyVariant,
|
|
30
|
+
h5: TypographyVariant,...
|
|
31
|
+
},
|
|
32
|
+
basic: {
|
|
33
|
+
display: TypographyVariant,
|
|
34
|
+
"body-lg": TypographyBodyVariant,
|
|
35
|
+
"body-md": TypographyBodyVariant,
|
|
36
|
+
"body-sm": TypographyBodyVariant,
|
|
37
|
+
"body-xs": TypographyBodyVariant,...
|
|
38
|
+
},
|
|
39
|
+
} declare var typographyTokens: {[key: ProductContext]: TypographyTokens, ...};declare var defaultProductContext: ProductContext;declare var getTypographyTokens: (productContext?: ProductContext) => TypographyTokens;declare var getTypographyVariant: (
|
|
40
|
+
productContext: ProductContext,
|
|
41
|
+
variant: string) => TypographyVariant | TypographyBodyVariant | void;declare var background: undefined: /* NO PRINT IMPLEMENTED: ObjectLiteralExpression */ any
|
|
12
42
|
;declare var content: undefined: /* NO PRINT IMPLEMENTED: ObjectLiteralExpression */ any
|
|
13
43
|
;declare var border: undefined: /* NO PRINT IMPLEMENTED: ObjectLiteralExpression */ any
|
|
14
44
|
;declare var overlay: undefined: /* NO PRINT IMPLEMENTED: ObjectLiteralExpression */ any
|
|
@@ -3186,12 +3216,17 @@ declare var FontLoader: React.FC;
|
|
|
3186
3216
|
/**
|
|
3187
3217
|
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
3188
3218
|
*
|
|
3189
|
-
* Pilat Wide — heading/display font, registered at weights 600
|
|
3219
|
+
* Pilat Wide — heading/display font, registered at weights 400, 600, 700, 800.
|
|
3220
|
+
* - 400: Medium (for B2B mode headings)
|
|
3221
|
+
* - 600: Semi-Bold
|
|
3222
|
+
* - 700: Bold
|
|
3223
|
+
* - 800: Black/Heavy (for display text)
|
|
3190
3224
|
*
|
|
3191
3225
|
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
3192
3226
|
* which are the same typeface under a legacy name.
|
|
3227
|
+
* Registered at weights 300, 400, 500, 600, 700.
|
|
3193
3228
|
*/
|
|
3194
|
-
declare var fontFacesCSS: "\n /* ── Pilat Wide (headings) ── */\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 /* ── Aktiv Grotesk (body) — served from Sharp Grotesk CDN files ── */\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"
|
|
3229
|
+
declare var fontFacesCSS: "\n /* ── Pilat Wide (headings) ── */\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 /* ── Aktiv Grotesk (body) — served from Sharp Grotesk CDN files ── */\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"
|
|
3195
3230
|
;declare type ThemeMode = "dark"
|
|
3196
3231
|
| "light"
|
|
3197
3232
|
| "pentagram-dark"
|
|
@@ -3201,7 +3236,8 @@ declare var fontFacesCSS: "\n /* ── Pilat Wide (headings) ── */\n\n @f
|
|
|
3201
3236
|
| "xsollaDark"
|
|
3202
3237
|
| "xsollaLight"
|
|
3203
3238
|
| "ltg-dark";declare var themeConfig: (
|
|
3204
|
-
mode?: ThemeMode
|
|
3239
|
+
mode?: ThemeMode,
|
|
3240
|
+
productContext?: ProductContext) => {
|
|
3205
3241
|
colors: {
|
|
3206
3242
|
background: {
|
|
3207
3243
|
primary: string,
|
|
@@ -4969,6 +5005,8 @@ primary: string,
|
|
|
4969
5005
|
heading: string,
|
|
4970
5006
|
body: string,...
|
|
4971
5007
|
},
|
|
5008
|
+
typographyTokens: TypographyTokens,
|
|
5009
|
+
productContext: ProductContext,
|
|
4972
5010
|
sizing: {
|
|
4973
5011
|
button: (
|
|
4974
5012
|
size: "xl"
|
|
@@ -6026,10 +6064,18 @@ itemGap: number,...
|
|
|
6026
6064
|
};declare interface DesignSystemContextType {
|
|
6027
6065
|
mode: ThemeMode,
|
|
6028
6066
|
setMode: (mode: ThemeMode) => void,
|
|
6067
|
+
productContext: ProductContext,
|
|
6068
|
+
setProductContext: (productContext: ProductContext) => void,
|
|
6029
6069
|
theme: $Call<<R>((...args: any[]) => R) => R, typeof themeConfig>,
|
|
6030
6070
|
} declare var XUIProvider: React.FC<{
|
|
6031
6071
|
children: React.ReactNode,
|
|
6032
6072
|
initialMode?: ThemeMode,
|
|
6073
|
+
initialProductContext?: ProductContext,
|
|
6074
|
+
|
|
6075
|
+
/**
|
|
6076
|
+
* Use `initialProductContext` instead.
|
|
6077
|
+
*/
|
|
6078
|
+
productContext?: empty,
|
|
6033
6079
|
|
|
6034
6080
|
/**
|
|
6035
6081
|
* Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native.
|
|
@@ -6048,8 +6094,8 @@ declare var ModalIdContext: React.Context<string | null>;
|
|
|
6048
6094
|
* Returns null if not inside a modal.
|
|
6049
6095
|
*/
|
|
6050
6096
|
declare var useModalId: () => string | null;export type {
|
|
6051
|
-
ThemeColors,ThemeMode
|
|
6097
|
+
ProductContext,ThemeColors,ThemeMode,TypographyBodyVariant,TypographyTokens,TypographyVariant
|
|
6052
6098
|
}
|
|
6053
6099
|
declare export {
|
|
6054
|
-
FontLoader,ModalIdContext,XUIProvider,colors,fontFacesCSS,fonts,isAndroid,isIOS,isNative,isWeb,radius,shadow,spacing,themeConfig,typography,useDesignSystem,useId,useModalId
|
|
6100
|
+
FontLoader,ModalIdContext,XUIProvider,colors,defaultProductContext,fontFacesCSS,fonts,getTypographyTokens,getTypographyVariant,isAndroid,isIOS,isNative,isWeb,radius,shadow,spacing,themeConfig,typography,typographyTokens,useDesignSystem,useId,useModalId
|
|
6055
6101
|
}
|