@xsolla/xui-core 0.134.0 → 0.136.0

package/index.mjs

@@ -1,5 +1,5 @@
 // src/index.tsx
-import React2, { createContext, useContext, useState, useMemo } from "react";
+import React3, { createContext, useContext, useState, useMemo } from "react";
 
 // src/tokens/pentagram-dark.json
 var pentagram_dark_default = {
@@ -1245,12 +1245,16 @@ var bodyFont = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
 var fonts = {
   heading: displayFontByContext.b2b,
   body: bodyFont,
+  /** Paragraph/reading font — same families as body */
+  text: bodyFont,
   /** @deprecated Use `heading` or `body` instead */
   primary: bodyFont
 };
 var getFonts = (productContext = "b2b") => ({
   heading: displayFontByContext[productContext],
   body: bodyFont,
+  /** Paragraph/reading font — same families as body */
+  text: bodyFont,
   /** @deprecated Use `heading` or `body` instead */
   primary: bodyFont
 });
@@ -1265,189 +1269,453 @@ var typography = {
 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 }
+      h1: {
+        fontSize: 40,
+        lineHeight: "40px",
+        fontWeight: 700,
+        scaleStep: "450",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: 32,
+        lineHeight: "32px",
+        fontWeight: 700,
+        scaleStep: "350",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: 28,
+        lineHeight: "28px",
+        fontWeight: 700,
+        scaleStep: "300",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: 24,
+        lineHeight: "24px",
+        fontWeight: 700,
+        scaleStep: "250",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: 20,
+        lineHeight: "20px",
+        fontWeight: 700,
+        scaleStep: "200",
+        lineHeightCategory: "display"
+      }
     },
     basic: {
-      display: { fontSize: 48, lineHeight: "58px", fontWeight: 800 },
+      display: {
+        fontSize: 48,
+        lineHeight: "48px",
+        fontWeight: 800,
+        scaleStep: "550",
+        lineHeightCategory: "display"
+      },
       "body-lg": {
         fontSize: 18,
         lineHeight: "24px",
         fontWeight: 400,
+        scaleStep: "175",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "26px", spacing: 20 }
+        paragraph: {
+          lineHeight: "26px",
+          spacing: 20,
+          lineHeightScaleStep: "175"
+        }
       },
       "body-md": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 16 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 16,
+          lineHeightScaleStep: "150"
+        }
       },
       "body-sm": {
         fontSize: 14,
         lineHeight: "18px",
         fontWeight: 400,
+        scaleStep: "125",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "20px", spacing: 12 }
+        paragraph: {
+          lineHeight: "20px",
+          spacing: 12,
+          lineHeightScaleStep: "125"
+        }
       },
       "body-xs": {
         fontSize: 12,
         lineHeight: "16px",
         fontWeight: 400,
+        scaleStep: "100",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "18px", spacing: 8 }
+        paragraph: {
+          lineHeight: "18px",
+          spacing: 8,
+          lineHeightScaleStep: "100"
+        }
       },
       "body-xxs": {
         fontSize: 10,
         lineHeight: "14px",
         fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "14px", spacing: 6 }
+        paragraph: {
+          lineHeight: "14px",
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
       }
     }
   },
   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 }
+      h1: {
+        fontSize: 56,
+        lineHeight: "56px",
+        fontWeight: 400,
+        scaleStep: "650",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: 48,
+        lineHeight: "48px",
+        fontWeight: 400,
+        scaleStep: "550",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: 32,
+        lineHeight: "32px",
+        fontWeight: 400,
+        scaleStep: "350",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: 24,
+        lineHeight: "24px",
+        fontWeight: 400,
+        scaleStep: "250",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: 20,
+        lineHeight: "20px",
+        fontWeight: 600,
+        scaleStep: "200",
+        lineHeightCategory: "display"
+      }
     },
     basic: {
-      display: { fontSize: 64, lineHeight: "78px", fontWeight: 400 },
+      display: {
+        fontSize: 64,
+        lineHeight: "64px",
+        fontWeight: 400,
+        scaleStep: "750",
+        lineHeightCategory: "display"
+      },
       "body-lg": {
         fontSize: 18,
         lineHeight: "24px",
         fontWeight: 400,
+        scaleStep: "175",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "26px", spacing: 20 }
+        paragraph: {
+          lineHeight: "26px",
+          spacing: 20,
+          lineHeightScaleStep: "175"
+        }
       },
       "body-md": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 16 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 16,
+          lineHeightScaleStep: "150"
+        }
       },
       "body-sm": {
         fontSize: 14,
         lineHeight: "18px",
         fontWeight: 400,
+        scaleStep: "125",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "20px", spacing: 12 }
+        paragraph: {
+          lineHeight: "20px",
+          spacing: 12,
+          lineHeightScaleStep: "125"
+        }
       },
       "body-xs": {
         fontSize: 12,
         lineHeight: "16px",
         fontWeight: 400,
+        scaleStep: "100",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "18px", spacing: 8 }
+        paragraph: {
+          lineHeight: "18px",
+          spacing: 8,
+          lineHeightScaleStep: "100"
+        }
       },
       "body-xxs": {
         fontSize: 10,
         lineHeight: "14px",
         fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "14px", spacing: 6 }
+        paragraph: {
+          lineHeight: "14px",
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
       }
     }
   },
   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 }
+      h1: {
+        fontSize: 28,
+        lineHeight: "28px",
+        fontWeight: 700,
+        scaleStep: "300",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: 24,
+        lineHeight: "24px",
+        fontWeight: 700,
+        scaleStep: "250",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: 20,
+        lineHeight: "20px",
+        fontWeight: 700,
+        scaleStep: "200",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: 18,
+        lineHeight: "18px",
+        fontWeight: 700,
+        scaleStep: "175",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: 16,
+        lineHeight: "16px",
+        fontWeight: 700,
+        scaleStep: "150",
+        lineHeightCategory: "display"
+      }
     },
     basic: {
-      display: { fontSize: 40, lineHeight: "48px", fontWeight: 800 },
+      display: {
+        fontSize: 40,
+        lineHeight: "40px",
+        fontWeight: 800,
+        scaleStep: "450",
+        lineHeightCategory: "display"
+      },
       "body-lg": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 16 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 16,
+          lineHeightScaleStep: "150"
+        }
       },
       "body-md": {
         fontSize: 14,
         lineHeight: "18px",
         fontWeight: 400,
+        scaleStep: "125",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "20px", spacing: 12 }
+        paragraph: {
+          lineHeight: "20px",
+          spacing: 12,
+          lineHeightScaleStep: "125"
+        }
       },
       "body-sm": {
         fontSize: 12,
         lineHeight: "16px",
         fontWeight: 400,
+        scaleStep: "100",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "18px", spacing: 8 }
+        paragraph: {
+          lineHeight: "18px",
+          spacing: 8,
+          lineHeightScaleStep: "100"
+        }
       },
       "body-xs": {
         fontSize: 10,
         lineHeight: "14px",
         fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "14px", spacing: 6 }
+        paragraph: {
+          lineHeight: "14px",
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
       },
       "body-xxs": {
         fontSize: 10,
         lineHeight: "14px",
         fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "14px", spacing: 6 }
+        paragraph: {
+          lineHeight: "14px",
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
       }
     }
   },
   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 }
+      h1: {
+        fontSize: 56,
+        lineHeight: "56px",
+        fontWeight: 700,
+        scaleStep: "650",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: 48,
+        lineHeight: "48px",
+        fontWeight: 700,
+        scaleStep: "550",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: 40,
+        lineHeight: "40px",
+        fontWeight: 700,
+        scaleStep: "450",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: 32,
+        lineHeight: "32px",
+        fontWeight: 700,
+        scaleStep: "350",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: 28,
+        lineHeight: "28px",
+        fontWeight: 700,
+        scaleStep: "300",
+        lineHeightCategory: "display"
+      }
     },
     basic: {
-      display: { fontSize: 64, lineHeight: "78px", fontWeight: 800 },
+      display: {
+        fontSize: 64,
+        lineHeight: "64px",
+        fontWeight: 800,
+        scaleStep: "750",
+        lineHeightCategory: "display"
+      },
       "body-lg": {
         fontSize: 24,
         lineHeight: "30px",
         fontWeight: 400,
+        scaleStep: "250",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "34px", spacing: 24 }
+        paragraph: {
+          lineHeight: "34px",
+          spacing: 24,
+          lineHeightScaleStep: "250"
+        }
       },
       "body-md": {
         fontSize: 20,
         lineHeight: "26px",
         fontWeight: 400,
+        scaleStep: "200",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "28px", spacing: 20 }
+        paragraph: {
+          lineHeight: "28px",
+          spacing: 20,
+          lineHeightScaleStep: "200"
+        }
       },
       "body-sm": {
         fontSize: 18,
         lineHeight: "24px",
         fontWeight: 400,
+        scaleStep: "175",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "26px", spacing: 16 }
+        paragraph: {
+          lineHeight: "26px",
+          spacing: 16,
+          lineHeightScaleStep: "175"
+        }
       },
       "body-xs": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 12 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 12,
+          lineHeightScaleStep: "150"
+        }
       },
       "body-xxs": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 12 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 12,
+          lineHeightScaleStep: "150"
+        }
       }
     }
   }
@@ -1634,6 +1902,167 @@ var FontLoader = () => {
 };
 FontLoader.displayName = "FontLoader";
 
+// src/styles/TypographyStyleLoader.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/tokens/responsive-typography.ts
+var SCALE_STEPS = [
+  "75",
+  "100",
+  "125",
+  "150",
+  "175",
+  "200",
+  "250",
+  "300",
+  "350",
+  "450",
+  "550",
+  "650",
+  "750"
+];
+var fontSize = {
+  "75": { common: 10, mobile: 10, desktop: 10 },
+  "100": { common: 12, mobile: 11, desktop: 12 },
+  "125": { common: 14, mobile: 12, desktop: 14 },
+  "150": { common: 16, mobile: 14, desktop: 16 },
+  "175": { common: 18, mobile: 16, desktop: 18 },
+  "200": { common: 20, mobile: 18, desktop: 20 },
+  "250": { common: 24, mobile: 20, desktop: 24 },
+  "300": { common: 28, mobile: 24, desktop: 28 },
+  "350": { common: 32, mobile: 28, desktop: 32 },
+  "450": { common: 40, mobile: 32, desktop: 40 },
+  "550": { common: 48, mobile: 40, desktop: 48 },
+  "650": { common: 56, mobile: 48, desktop: 56 },
+  "750": { common: 64, mobile: 56, desktop: 64 }
+};
+var lineHeightDisplay = {
+  "75": { common: 10, mobile: 10, desktop: 10 },
+  "100": { common: 12, mobile: 11, desktop: 12 },
+  "125": { common: 14, mobile: 12, desktop: 14 },
+  "150": { common: 16, mobile: 14, desktop: 16 },
+  "175": { common: 18, mobile: 16, desktop: 18 },
+  "200": { common: 20, mobile: 18, desktop: 20 },
+  "250": { common: 24, mobile: 20, desktop: 24 },
+  "300": { common: 28, mobile: 24, desktop: 28 },
+  "350": { common: 32, mobile: 28, desktop: 32 },
+  "450": { common: 40, mobile: 32, desktop: 40 },
+  "550": { common: 48, mobile: 40, desktop: 48 },
+  "650": { common: 56, mobile: 48, desktop: 56 },
+  "750": { common: 64, mobile: 56, desktop: 64 }
+};
+var lineHeightCompact = {
+  "75": { common: 14, mobile: 13, desktop: 14 },
+  "100": { common: 16, mobile: 14, desktop: 16 },
+  "125": { common: 18, mobile: 16, desktop: 18 },
+  "150": { common: 20, mobile: 18, desktop: 20 },
+  "175": { common: 24, mobile: 20, desktop: 24 },
+  "200": { common: 26, mobile: 24, desktop: 26 },
+  "250": { common: 30, mobile: 26, desktop: 30 },
+  "300": { common: 36, mobile: 30, desktop: 36 },
+  "350": { common: 42, mobile: 36, desktop: 42 },
+  "450": { common: 52, mobile: 42, desktop: 52 },
+  "550": { common: 62, mobile: 52, desktop: 62 },
+  "650": { common: 72, mobile: 62, desktop: 72 },
+  "750": { common: 82, mobile: 72, desktop: 82 }
+};
+var lineHeightText = {
+  "75": { common: 14, mobile: 13, desktop: 14 },
+  "100": { common: 18, mobile: 14, desktop: 18 },
+  "125": { common: 20, mobile: 16, desktop: 20 },
+  "150": { common: 22, mobile: 18, desktop: 22 },
+  "175": { common: 26, mobile: 20, desktop: 26 },
+  "200": { common: 28, mobile: 24, desktop: 28 },
+  "250": { common: 34, mobile: 26, desktop: 34 },
+  "300": { common: 40, mobile: 30, desktop: 40 },
+  "350": { common: 44, mobile: 36, desktop: 44 },
+  "450": { common: 56, mobile: 42, desktop: 56 },
+  "550": { common: 66, mobile: 52, desktop: 66 },
+  "650": { common: 78, mobile: 62, desktop: 78 },
+  "750": { common: 88, mobile: 72, desktop: 88 }
+};
+var responsiveTypographyScale = {
+  fontSize,
+  lineHeightDisplay,
+  lineHeightCompact,
+  lineHeightText
+};
+
+// src/tokens/breakpoints.ts
+var breakpoints = {
+  /** Mobile: 0 – 767px */
+  mobile: 0,
+  /** Desktop: 768px and above */
+  desktop: 768
+};
+var MOBILE_MAX_WIDTH = breakpoints.desktop - 1;
+
+// src/styles/typography-css.ts
+function buildDeclarations(mode) {
+  const lines = [];
+  for (const step of SCALE_STEPS) {
+    const fs = fontSize[step];
+    lines.push(
+      `--xui-font-size-${step}:${fs[mode === "desktop" ? "common" : "mobile"]}px`
+    );
+  }
+  for (const step of SCALE_STEPS) {
+    const lh = lineHeightDisplay[step];
+    lines.push(
+      `--xui-lh-display-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
+    );
+  }
+  for (const step of SCALE_STEPS) {
+    const lh = lineHeightCompact[step];
+    lines.push(
+      `--xui-lh-compact-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
+    );
+  }
+  for (const step of SCALE_STEPS) {
+    const lh = lineHeightText[step];
+    lines.push(
+      `--xui-lh-text-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
+    );
+  }
+  return lines.join(";");
+}
+var _cached = null;
+function generateTypographyCSS() {
+  if (_cached) return _cached;
+  const desktopVars = buildDeclarations("desktop");
+  const mobileVars = buildDeclarations("mobile");
+  _cached = `:root{${desktopVars}}@media(max-width:${MOBILE_MAX_WIDTH}px){:root{${mobileVars}}}`;
+  return _cached;
+}
+var cssVar = {
+  fontSize: (step) => `var(--xui-font-size-${step})`,
+  lhDisplay: (step) => `var(--xui-lh-display-${step})`,
+  lhCompact: (step) => `var(--xui-lh-compact-${step})`,
+  lhText: (step) => `var(--xui-lh-text-${step})`
+};
+
+// src/styles/TypographyStyleLoader.tsx
+var injected2 = false;
+function injectTypographyStyles() {
+  if (!isWeb || injected2) return;
+  const style = document.createElement("style");
+  style.setAttribute("data-xui-typography", "");
+  style.textContent = generateTypographyCSS();
+  document.head.appendChild(style);
+  injected2 = true;
+}
+var TypographyStyleLoader = () => {
+  const mountedRef = useRef2(false);
+  useEffect2(() => {
+    if (!mountedRef.current) {
+      injectTypographyStyles();
+      mountedRef.current = true;
+    }
+  }, []);
+  return null;
+};
+TypographyStyleLoader.displayName = "TypographyStyleLoader";
+
 // src/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEPRECATED_MODES = /* @__PURE__ */ new Set([
@@ -2596,7 +3025,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
       },
       modal: () => {
         return {
-          borderRadius: 12,
+          borderRadius: 8,
           headerPadding: 8,
           contentPadding: 40,
           headerButtonSize: "xl",
@@ -2708,6 +3137,7 @@ var XUIProvider = ({
   );
   return /* @__PURE__ */ jsxs(DesignSystemContext.Provider, { value, children: [
     loadFonts && /* @__PURE__ */ jsx(FontLoader, {}),
+    /* @__PURE__ */ jsx(TypographyStyleLoader, {}),
     children
   ] });
 };
@@ -2750,22 +3180,29 @@ var useResolvedTheme = (overrides) => {
   };
 };
 var idCounter = 0;
-var hasReactUseId = typeof React2.useId === "function";
+var hasReactUseId = typeof React3.useId === "function";
 var useIdFallback = () => {
   const [id] = useState(() => `xui-${++idCounter}`);
   return id;
 };
-var useId = hasReactUseId ? React2.useId : useIdFallback;
+var useId = hasReactUseId ? React3.useId : useIdFallback;
 var ModalIdContext = createContext(null);
 var useModalId = () => useContext(ModalIdContext);
 export {
   FontLoader,
+  MOBILE_MAX_WIDTH,
   ModalIdContext,
+  SCALE_STEPS,
+  TypographyStyleLoader,
   XUIProvider,
+  breakpoints,
   colors,
+  cssVar,
   defaultProductContext,
   fontFacesCSS,
+  fontSize,
   fonts,
+  generateTypographyCSS,
   getFonts,
   getTypographyTokens,
   getTypographyVariant,
@@ -2773,7 +3210,11 @@ export {
   isIOS,
   isNative,
   isWeb,
+  lineHeightCompact,
+  lineHeightDisplay,
+  lineHeightText,
   radius,
+  responsiveTypographyScale,
   shadow,
   spacing,
   themeConfig,