@xsolla/xui-core 0.113.0 → 0.114.0

package/index.mjs

@@ -1803,6 +1803,207 @@ var typography = {
   }
 };
 
+// src/tokens/typography.ts
+var typographyTokens = {
+  b2c: {
+    heading: {
+      h1: { fontSize: 40, lineHeight: "48px", fontWeight: 700 },
+      h2: { fontSize: 32, lineHeight: "38px", fontWeight: 700 },
+      h3: { fontSize: 28, lineHeight: "34px", fontWeight: 700 },
+      h4: { fontSize: 24, lineHeight: "28px", fontWeight: 700 },
+      h5: { fontSize: 20, lineHeight: "24px", fontWeight: 700 }
+    },
+    basic: {
+      display: { fontSize: 48, lineHeight: "58px", fontWeight: 800 },
+      "body-lg": {
+        fontSize: 18,
+        lineHeight: "24px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "26px", spacing: 20 }
+      },
+      "body-md": {
+        fontSize: 16,
+        lineHeight: "20px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "22px", spacing: 16 }
+      },
+      "body-sm": {
+        fontSize: 14,
+        lineHeight: "18px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "20px", spacing: 12 }
+      },
+      "body-xs": {
+        fontSize: 12,
+        lineHeight: "16px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "18px", spacing: 8 }
+      }
+    }
+  },
+  b2b: {
+    heading: {
+      h1: { fontSize: 56, lineHeight: "68px", fontWeight: 400 },
+      h2: { fontSize: 48, lineHeight: "58px", fontWeight: 400 },
+      h3: { fontSize: 32, lineHeight: "38px", fontWeight: 400 },
+      h4: { fontSize: 24, lineHeight: "28px", fontWeight: 400 },
+      h5: { fontSize: 20, lineHeight: "24px", fontWeight: 600 }
+    },
+    basic: {
+      display: { fontSize: 64, lineHeight: "78px", fontWeight: 400 },
+      "body-lg": {
+        fontSize: 18,
+        lineHeight: "24px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "26px", spacing: 20 }
+      },
+      "body-md": {
+        fontSize: 16,
+        lineHeight: "20px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "22px", spacing: 16 }
+      },
+      "body-sm": {
+        fontSize: 14,
+        lineHeight: "18px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "20px", spacing: 12 }
+      },
+      "body-xs": {
+        fontSize: 12,
+        lineHeight: "16px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "18px", spacing: 8 }
+      }
+    }
+  },
+  paystation: {
+    heading: {
+      h1: { fontSize: 28, lineHeight: "34px", fontWeight: 700 },
+      h2: { fontSize: 24, lineHeight: "28px", fontWeight: 700 },
+      h3: { fontSize: 20, lineHeight: "24px", fontWeight: 700 },
+      h4: { fontSize: 18, lineHeight: "22px", fontWeight: 700 },
+      h5: { fontSize: 16, lineHeight: "20px", fontWeight: 700 }
+    },
+    basic: {
+      display: { fontSize: 40, lineHeight: "48px", fontWeight: 800 },
+      "body-lg": {
+        fontSize: 16,
+        lineHeight: "20px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "22px", spacing: 16 }
+      },
+      "body-md": {
+        fontSize: 14,
+        lineHeight: "18px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "20px", spacing: 12 }
+      },
+      "body-sm": {
+        fontSize: 12,
+        lineHeight: "16px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "18px", spacing: 8 }
+      },
+      "body-xs": {
+        fontSize: 10,
+        lineHeight: "14px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "14px", spacing: 6 }
+      }
+    }
+  },
+  presentation: {
+    heading: {
+      h1: { fontSize: 56, lineHeight: "68px", fontWeight: 700 },
+      h2: { fontSize: 48, lineHeight: "58px", fontWeight: 700 },
+      h3: { fontSize: 40, lineHeight: "48px", fontWeight: 700 },
+      h4: { fontSize: 32, lineHeight: "38px", fontWeight: 700 },
+      h5: { fontSize: 28, lineHeight: "34px", fontWeight: 700 }
+    },
+    basic: {
+      display: { fontSize: 64, lineHeight: "78px", fontWeight: 800 },
+      "body-lg": {
+        fontSize: 24,
+        lineHeight: "30px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "34px", spacing: 24 }
+      },
+      "body-md": {
+        fontSize: 20,
+        lineHeight: "26px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "28px", spacing: 20 }
+      },
+      "body-sm": {
+        fontSize: 18,
+        lineHeight: "24px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "26px", spacing: 16 }
+      },
+      "body-xs": {
+        fontSize: 16,
+        lineHeight: "20px",
+        fontWeight: 400,
+        accent: { fontWeight: 500 },
+        paragraph: { lineHeight: "22px", spacing: 12 }
+      }
+    }
+  }
+};
+var defaultProductContext = "b2b";
+var getTypographyTokens = (productContext = defaultProductContext) => {
+  return typographyTokens[productContext] || typographyTokens[defaultProductContext];
+};
+var getTypographyVariant = (productContext, variant) => {
+  const tokens = getTypographyTokens(productContext);
+  if (variant in tokens.heading) {
+    return tokens.heading[variant];
+  }
+  if (variant === "display") {
+    return tokens.basic.display;
+  }
+  const bodyVariantMap = {
+    bodyLg: "body-lg",
+    bodyMd: "body-md",
+    bodySm: "body-sm",
+    bodyXs: "body-xs"
+  };
+  const bodyKey = bodyVariantMap[variant.replace("Accent", "").replace("Paragraph", "")];
+  if (bodyKey && bodyKey in tokens.basic) {
+    const baseVariant = tokens.basic[bodyKey];
+    if (variant.includes("Accent") && baseVariant.accent) {
+      return {
+        ...baseVariant,
+        fontWeight: baseVariant.accent.fontWeight
+      };
+    }
+    if (variant.includes("Paragraph") && baseVariant.paragraph) {
+      return {
+        ...baseVariant,
+        lineHeight: baseVariant.paragraph.lineHeight
+      };
+    }
+    return baseVariant;
+  }
+  return void 0;
+};
+
 // src/fonts/FontLoader.tsx
 import { useEffect, useRef } from "react";
 
@@ -1817,6 +2018,13 @@ var CDN_BASE = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
 var fontFacesCSS = `
   /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */
 
+  @font-face {
+    font-family: 'Pilat Wide';
+    src: url('${CDN_BASE}/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
   @font-face {
     font-family: 'Pilat Wide';
     src: url('${CDN_BASE}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
@@ -1862,6 +2070,13 @@ var fontFacesCSS = `
     font-style: normal;
     font-display: swap;
   }
+  @font-face {
+    font-family: 'Aktiv Grotesk';
+    src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+  }
   @font-face {
     font-family: 'Aktiv Grotesk';
     src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
@@ -1895,7 +2110,7 @@ FontLoader.displayName = "FontLoader";
 
 // src/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var themeConfig = (mode = "dark") => ({
+var themeConfig = (mode = "dark", productContext = defaultProductContext) => ({
   colors: colors[mode],
   spacing,
   radius,
@@ -1906,6 +2121,8 @@ var themeConfig = (mode = "dark") => ({
     heading: fonts.heading,
     body: fonts.body
   },
+  typographyTokens: getTypographyTokens(productContext),
+  productContext,
   sizing: {
     button: (size) => {
       const configs = {
@@ -2854,15 +3071,25 @@ var themeConfig = (mode = "dark") => ({
 var DesignSystemContext = createContext(
   void 0
 );
-var XUIProvider = ({ children, initialMode = "dark", loadFonts = true }) => {
+var XUIProvider = ({
+  children,
+  initialMode = "dark",
+  initialProductContext = defaultProductContext,
+  loadFonts = true
+}) => {
   const [mode, setMode] = useState(initialMode);
+  const [productContext, setProductContext] = useState(
+    initialProductContext
+  );
   const value = useMemo(
     () => ({
       mode,
       setMode,
-      theme: themeConfig(mode)
+      productContext,
+      setProductContext,
+      theme: themeConfig(mode, productContext)
     }),
-    [mode]
+    [mode, productContext]
   );
   return /* @__PURE__ */ jsxs(DesignSystemContext.Provider, { value, children: [
     loadFonts && /* @__PURE__ */ jsx(FontLoader, {}),
@@ -2876,7 +3103,10 @@ var useDesignSystem = () => {
       mode: "dark",
       setMode: () => {
       },
-      theme: themeConfig("dark")
+      productContext: defaultProductContext,
+      setProductContext: () => {
+      },
+      theme: themeConfig("dark", defaultProductContext)
     };
   }
   return context;
@@ -2895,8 +3125,11 @@ export {
   ModalIdContext,
   XUIProvider,
   colors,
+  defaultProductContext,
   fontFacesCSS,
   fonts,
+  getTypographyTokens,
+  getTypographyVariant,
   isAndroid,
   isIOS,
   isNative,
@@ -2906,6 +3139,7 @@ export {
   spacing,
   themeConfig,
   typography,
+  typographyTokens,
   useDesignSystem,
   useId,
   useModalId