@xsolla/xui-core 0.134.0 → 0.136.0

package/README.md

@@ -72,6 +72,12 @@ For custom components, use `useResolvedTheme` instead of `useDesignSystem`.
 - `useId` — Stable unique ID hook; polyfills `React.useId` for React < 18
 - `ModalIdContext` — Context holding the current modal's ID for portal-based components
 - `useModalId` — Hook returning the current modal ID, or `null` if outside a modal
+- `breakpoints` — Responsive breakpoints: `{ mobile: 0, desktop: 768 }`
+- `responsiveTypographyScale` — Raw responsive font-size and line-height data (13 steps × 3 device modes)
+- `SCALE_STEPS` — Array of all scale step identifiers
+- `generateTypographyCSS` — Returns the full CSS string for responsive typography custom properties
+- `cssVar` — Helper to get CSS variable references: `cssVar.fontSize("350")` → `"var(--xui-font-size-350)"`
+- `TypographyStyleLoader` — Component that injects responsive typography CSS (rendered automatically by `XUIProvider`)
 - `ThemeMode` — Type: `"dark"` | `"light"` | `"ltg-dark"`
 - `ThemeColors` — Type of the colour token object
 - `colors` — Raw colour tokens for all themes

package/index.d.mts

@@ -1,10 +1,30 @@
 import React from 'react';
 
+/**
+ * Typography token definitions for different product contexts.
+ *
+ * ProductContext determines typography scales — font sizes, line heights,
+ * and font weights vary between B2B, B2C, Pay Station, and Presentation.
+ *
+ * Values are synced from the Figma "Theme / Typography" variable collection.
+ * Each semantic token (e.g., heading/h1/font-size) aliases into the responsive
+ * scale defined in responsive-typography.ts. The `scaleStep` field records
+ * which scale step a token maps to, enabling CSS variable consumption on web.
+ *
+ * Line-height categories:
+ *   - Headings and display use "display" line-heights (tight, ~1:1)
+ *   - Body default/accent use "compact" line-heights (moderate)
+ *   - Body paragraph uses "text" line-heights (generous, for reading)
+ */
 type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
 interface TypographyVariant {
     fontSize: number;
     lineHeight: string;
     fontWeight: number;
+    /** The responsive scale step this variant maps to (e.g., "650" for 56px) */
+    scaleStep?: string;
+    /** The line-height category: "display", "compact", or "text" */
+    lineHeightCategory?: "display" | "compact" | "text";
 }
 interface TypographyBodyVariant extends TypographyVariant {
     accent?: {
@@ -13,6 +33,8 @@ interface TypographyBodyVariant extends TypographyVariant {
     paragraph?: {
         lineHeight: string;
         spacing?: number;
+        /** The line-height scale step for the paragraph variant */
+        lineHeightScaleStep?: string;
     };
 }
 interface TypographyTokens {
@@ -2459,10 +2481,25 @@ declare const shadow: {
     modal: string;
 };
 
+/**
+ * Font family definitions per ProductContext.
+ *
+ * Figma "Font" variable collection defines 3 roles:
+ *   - display: heading/display font (Pilat or Pilat Wide)
+ *   - compact: body/UI font (Aktiv Grotesk or Montserrat)
+ *   - text: paragraph/reading font (same families as compact)
+ *
+ * The `heading` and `body` exports map to these Figma roles:
+ *   heading → display
+ *   body → compact (also used for text contexts)
+ */
+
 /** Static fonts object (defaults to B2B for backwards compatibility) */
 declare const fonts: {
     heading: string;
     body: string;
+    /** Paragraph/reading font — same families as body */
+    text: string;
     /** @deprecated Use `heading` or `body` instead */
     primary: string;
 };
@@ -2470,6 +2507,8 @@ declare const fonts: {
 declare const getFonts: (productContext?: ProductContext) => {
     heading: string;
     body: string;
+    /** Paragraph/reading font — same families as body */
+    text: string;
     /** @deprecated Use `heading` or `body` instead */
     primary: string;
 };
@@ -2480,6 +2519,73 @@ declare const typography: {
     };
 };
 
+/**
+ * Responsive breakpoint definitions for the design system.
+ *
+ * Derived from the Figma "Responsive / Typography" variable collection,
+ * which has three modes: Common, Mobile, Desktop.
+ * Common and Desktop share identical values; Mobile scales down.
+ *
+ * Usage (CSS):
+ *   @media (max-width: 767px) { ... }   // Mobile
+ *   @media (min-width: 768px) { ... }    // Desktop
+ *
+ * Usage (JS):
+ *   import { breakpoints } from '@xsolla/xui-core';
+ *   const isMobile = window.innerWidth < breakpoints.desktop;
+ */
+declare const breakpoints: {
+    /** Mobile: 0 – 767px */
+    readonly mobile: 0;
+    /** Desktop: 768px and above */
+    readonly desktop: 768;
+};
+type BreakpointKey = keyof typeof breakpoints;
+/**
+ * Max-width media query value for targeting mobile devices.
+ * Use in CSS: `@media (max-width: ${MOBILE_MAX_WIDTH}px)`
+ */
+declare const MOBILE_MAX_WIDTH: number;
+
+/**
+ * Responsive typography scale tokens sourced from the Figma
+ * "Responsive / Typography" variable collection.
+ *
+ * Three device modes: Common (default), Mobile, Desktop.
+ * Common and Desktop have identical values. Mobile scales down.
+ *
+ * These are the raw building blocks. Semantic tokens in typography.ts
+ * alias into this scale (e.g., B2B heading/h1/font-size → font-size/650).
+ *
+ * On web, these are injected as CSS custom properties (--xui-font-size-*, --xui-lh-*)
+ * with @media overrides for mobile. Components consume a single CSS variable
+ * and scale automatically by viewport.
+ *
+ * @see {@link ../styles/typography-css.ts} for CSS generation
+ * @see {@link ./breakpoints.ts} for breakpoint definitions
+ */
+interface ResponsiveValue {
+    common: number;
+    mobile: number;
+    desktop: number;
+}
+type ScaleStep = "75" | "100" | "125" | "150" | "175" | "200" | "250" | "300" | "350" | "450" | "550" | "650" | "750";
+declare const SCALE_STEPS: ScaleStep[];
+/** Font-size scale: 13 steps from 10px to 64px (desktop) */
+declare const fontSize: Record<ScaleStep, ResponsiveValue>;
+/** Line-height/display: tight line-heights for headings (roughly 1:1 with font-size) */
+declare const lineHeightDisplay: Record<ScaleStep, ResponsiveValue>;
+/** Line-height/compact: moderate line-heights for UI body text */
+declare const lineHeightCompact: Record<ScaleStep, ResponsiveValue>;
+/** Line-height/text: generous line-heights for paragraphs and reading text */
+declare const lineHeightText: Record<ScaleStep, ResponsiveValue>;
+declare const responsiveTypographyScale: {
+    readonly fontSize: Record<ScaleStep, ResponsiveValue>;
+    readonly lineHeightDisplay: Record<ScaleStep, ResponsiveValue>;
+    readonly lineHeightCompact: Record<ScaleStep, ResponsiveValue>;
+    readonly lineHeightText: Record<ScaleStep, ResponsiveValue>;
+};
+
 declare const isWeb: boolean;
 declare const isNative: boolean;
 declare const isIOS: boolean;
@@ -2506,6 +2612,46 @@ declare const FontLoader: React.FC;
  */
 declare const fontFacesCSS = "\n  /* \u2500\u2500 Pilat Wide (B2C 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 Pilat (B2B headings) \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/55a03110b2400b778d485de2c8d064c0.woff2') format('woff2');\n    font-weight: 300;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/e968c9cc76e48ff6111c90534549bbf9.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/ed4fe74e88aaacc6978f06a862e75b08.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/7450f429979af7eaa8fa4d4d91cee927.woff2') format('woff2');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/218d647ff7690c1e312f6943e29af375.woff2') format('woff2');\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";
 
+declare const TypographyStyleLoader: React.FC;
+
+/**
+ * Generates the CSS custom properties string for responsive typography.
+ *
+ * Produces two blocks:
+ * 1. :root — Desktop/Common values (the default)
+ * 2. @media (max-width: 767px) :root — Mobile overrides
+ *
+ * CSS variable naming convention (mirrors Figma variable names):
+ *   --xui-font-size-{step}       → e.g. --xui-font-size-150: 16px
+ *   --xui-lh-display-{step}      → e.g. --xui-lh-display-150: 16px
+ *   --xui-lh-compact-{step}      → e.g. --xui-lh-compact-150: 20px
+ *   --xui-lh-text-{step}         → e.g. --xui-lh-text-150: 22px
+ *
+ * Consumers can use these in CSS or styled-components:
+ *   font-size: var(--xui-font-size-350);
+ *   line-height: var(--xui-lh-compact-350);
+ *
+ * @see {@link ../tokens/responsive-typography.ts} for raw token data
+ * @see {@link ../tokens/breakpoints.ts} for breakpoint definitions
+ */
+/**
+ * Returns the full CSS string for responsive typography custom properties.
+ * The result is memoized — safe to call multiple times.
+ */
+declare function generateTypographyCSS(): string;
+/**
+ * Returns the CSS variable name for a given font-size scale step.
+ * Useful when the Typography component needs to reference a CSS variable.
+ *
+ * @example cssVar.fontSize("350") → "var(--xui-font-size-350)"
+ */
+declare const cssVar: {
+    readonly fontSize: (step: string) => string;
+    readonly lhDisplay: (step: string) => string;
+    readonly lhCompact: (step: string) => string;
+    readonly lhText: (step: string) => string;
+};
+
 type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "ltg-dark";
 declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
     colors: {
@@ -3722,6 +3868,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
     fonts: {
         heading: string;
         body: string;
+        text: string;
         primary: string;
     };
     typography: {
@@ -5935,6 +6082,7 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
         fonts: {
             heading: string;
             body: string;
+            text: string;
             primary: string;
         };
         typography: {
@@ -6924,4 +7072,4 @@ declare const ModalIdContext: React.Context<string | null>;
  */
 declare const useModalId: () => string | null;
 
-export { FontLoader, ModalIdContext, type ProductContext, type ThemeColors, type ThemeMode, type ThemeOverrideProps, type TypographyBodyVariant, type TypographyTokens, type TypographyVariant, XUIProvider, colors, defaultProductContext, fontFacesCSS, fonts, getFonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useResolvedTheme };
+export { type BreakpointKey, FontLoader, MOBILE_MAX_WIDTH, ModalIdContext, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, type ThemeColors, type ThemeMode, type ThemeOverrideProps, type TypographyBodyVariant, TypographyStyleLoader, type TypographyTokens, type TypographyVariant, XUIProvider, breakpoints, colors, cssVar, defaultProductContext, fontFacesCSS, fontSize, fonts, generateTypographyCSS, getFonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, lineHeightCompact, lineHeightDisplay, lineHeightText, radius, responsiveTypographyScale, shadow, spacing, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useResolvedTheme };

package/index.d.ts

@@ -1,10 +1,30 @@
 import React from 'react';
 
+/**
+ * Typography token definitions for different product contexts.
+ *
+ * ProductContext determines typography scales — font sizes, line heights,
+ * and font weights vary between B2B, B2C, Pay Station, and Presentation.
+ *
+ * Values are synced from the Figma "Theme / Typography" variable collection.
+ * Each semantic token (e.g., heading/h1/font-size) aliases into the responsive
+ * scale defined in responsive-typography.ts. The `scaleStep` field records
+ * which scale step a token maps to, enabling CSS variable consumption on web.
+ *
+ * Line-height categories:
+ *   - Headings and display use "display" line-heights (tight, ~1:1)
+ *   - Body default/accent use "compact" line-heights (moderate)
+ *   - Body paragraph uses "text" line-heights (generous, for reading)
+ */
 type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
 interface TypographyVariant {
     fontSize: number;
     lineHeight: string;
     fontWeight: number;
+    /** The responsive scale step this variant maps to (e.g., "650" for 56px) */
+    scaleStep?: string;
+    /** The line-height category: "display", "compact", or "text" */
+    lineHeightCategory?: "display" | "compact" | "text";
 }
 interface TypographyBodyVariant extends TypographyVariant {
     accent?: {
@@ -13,6 +33,8 @@ interface TypographyBodyVariant extends TypographyVariant {
     paragraph?: {
         lineHeight: string;
         spacing?: number;
+        /** The line-height scale step for the paragraph variant */
+        lineHeightScaleStep?: string;
     };
 }
 interface TypographyTokens {
@@ -2459,10 +2481,25 @@ declare const shadow: {
     modal: string;
 };
 
+/**
+ * Font family definitions per ProductContext.
+ *
+ * Figma "Font" variable collection defines 3 roles:
+ *   - display: heading/display font (Pilat or Pilat Wide)
+ *   - compact: body/UI font (Aktiv Grotesk or Montserrat)
+ *   - text: paragraph/reading font (same families as compact)
+ *
+ * The `heading` and `body` exports map to these Figma roles:
+ *   heading → display
+ *   body → compact (also used for text contexts)
+ */
+
 /** Static fonts object (defaults to B2B for backwards compatibility) */
 declare const fonts: {
     heading: string;
     body: string;
+    /** Paragraph/reading font — same families as body */
+    text: string;
     /** @deprecated Use `heading` or `body` instead */
     primary: string;
 };
@@ -2470,6 +2507,8 @@ declare const fonts: {
 declare const getFonts: (productContext?: ProductContext) => {
     heading: string;
     body: string;
+    /** Paragraph/reading font — same families as body */
+    text: string;
     /** @deprecated Use `heading` or `body` instead */
     primary: string;
 };
@@ -2480,6 +2519,73 @@ declare const typography: {
     };
 };
 
+/**
+ * Responsive breakpoint definitions for the design system.
+ *
+ * Derived from the Figma "Responsive / Typography" variable collection,
+ * which has three modes: Common, Mobile, Desktop.
+ * Common and Desktop share identical values; Mobile scales down.
+ *
+ * Usage (CSS):
+ *   @media (max-width: 767px) { ... }   // Mobile
+ *   @media (min-width: 768px) { ... }    // Desktop
+ *
+ * Usage (JS):
+ *   import { breakpoints } from '@xsolla/xui-core';
+ *   const isMobile = window.innerWidth < breakpoints.desktop;
+ */
+declare const breakpoints: {
+    /** Mobile: 0 – 767px */
+    readonly mobile: 0;
+    /** Desktop: 768px and above */
+    readonly desktop: 768;
+};
+type BreakpointKey = keyof typeof breakpoints;
+/**
+ * Max-width media query value for targeting mobile devices.
+ * Use in CSS: `@media (max-width: ${MOBILE_MAX_WIDTH}px)`
+ */
+declare const MOBILE_MAX_WIDTH: number;
+
+/**
+ * Responsive typography scale tokens sourced from the Figma
+ * "Responsive / Typography" variable collection.
+ *
+ * Three device modes: Common (default), Mobile, Desktop.
+ * Common and Desktop have identical values. Mobile scales down.
+ *
+ * These are the raw building blocks. Semantic tokens in typography.ts
+ * alias into this scale (e.g., B2B heading/h1/font-size → font-size/650).
+ *
+ * On web, these are injected as CSS custom properties (--xui-font-size-*, --xui-lh-*)
+ * with @media overrides for mobile. Components consume a single CSS variable
+ * and scale automatically by viewport.
+ *
+ * @see {@link ../styles/typography-css.ts} for CSS generation
+ * @see {@link ./breakpoints.ts} for breakpoint definitions
+ */
+interface ResponsiveValue {
+    common: number;
+    mobile: number;
+    desktop: number;
+}
+type ScaleStep = "75" | "100" | "125" | "150" | "175" | "200" | "250" | "300" | "350" | "450" | "550" | "650" | "750";
+declare const SCALE_STEPS: ScaleStep[];
+/** Font-size scale: 13 steps from 10px to 64px (desktop) */
+declare const fontSize: Record<ScaleStep, ResponsiveValue>;
+/** Line-height/display: tight line-heights for headings (roughly 1:1 with font-size) */
+declare const lineHeightDisplay: Record<ScaleStep, ResponsiveValue>;
+/** Line-height/compact: moderate line-heights for UI body text */
+declare const lineHeightCompact: Record<ScaleStep, ResponsiveValue>;
+/** Line-height/text: generous line-heights for paragraphs and reading text */
+declare const lineHeightText: Record<ScaleStep, ResponsiveValue>;
+declare const responsiveTypographyScale: {
+    readonly fontSize: Record<ScaleStep, ResponsiveValue>;
+    readonly lineHeightDisplay: Record<ScaleStep, ResponsiveValue>;
+    readonly lineHeightCompact: Record<ScaleStep, ResponsiveValue>;
+    readonly lineHeightText: Record<ScaleStep, ResponsiveValue>;
+};
+
 declare const isWeb: boolean;
 declare const isNative: boolean;
 declare const isIOS: boolean;
@@ -2506,6 +2612,46 @@ declare const FontLoader: React.FC;
  */
 declare const fontFacesCSS = "\n  /* \u2500\u2500 Pilat Wide (B2C 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 Pilat (B2B headings) \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/55a03110b2400b778d485de2c8d064c0.woff2') format('woff2');\n    font-weight: 300;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/e968c9cc76e48ff6111c90534549bbf9.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/ed4fe74e88aaacc6978f06a862e75b08.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/7450f429979af7eaa8fa4d4d91cee927.woff2') format('woff2');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279/218d647ff7690c1e312f6943e29af375.woff2') format('woff2');\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";
 
+declare const TypographyStyleLoader: React.FC;
+
+/**
+ * Generates the CSS custom properties string for responsive typography.
+ *
+ * Produces two blocks:
+ * 1. :root — Desktop/Common values (the default)
+ * 2. @media (max-width: 767px) :root — Mobile overrides
+ *
+ * CSS variable naming convention (mirrors Figma variable names):
+ *   --xui-font-size-{step}       → e.g. --xui-font-size-150: 16px
+ *   --xui-lh-display-{step}      → e.g. --xui-lh-display-150: 16px
+ *   --xui-lh-compact-{step}      → e.g. --xui-lh-compact-150: 20px
+ *   --xui-lh-text-{step}         → e.g. --xui-lh-text-150: 22px
+ *
+ * Consumers can use these in CSS or styled-components:
+ *   font-size: var(--xui-font-size-350);
+ *   line-height: var(--xui-lh-compact-350);
+ *
+ * @see {@link ../tokens/responsive-typography.ts} for raw token data
+ * @see {@link ../tokens/breakpoints.ts} for breakpoint definitions
+ */
+/**
+ * Returns the full CSS string for responsive typography custom properties.
+ * The result is memoized — safe to call multiple times.
+ */
+declare function generateTypographyCSS(): string;
+/**
+ * Returns the CSS variable name for a given font-size scale step.
+ * Useful when the Typography component needs to reference a CSS variable.
+ *
+ * @example cssVar.fontSize("350") → "var(--xui-font-size-350)"
+ */
+declare const cssVar: {
+    readonly fontSize: (step: string) => string;
+    readonly lhDisplay: (step: string) => string;
+    readonly lhCompact: (step: string) => string;
+    readonly lhText: (step: string) => string;
+};
+
 type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "ltg-dark";
 declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
     colors: {
@@ -3722,6 +3868,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
     fonts: {
         heading: string;
         body: string;
+        text: string;
         primary: string;
     };
     typography: {
@@ -5935,6 +6082,7 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
         fonts: {
             heading: string;
             body: string;
+            text: string;
             primary: string;
         };
         typography: {
@@ -6924,4 +7072,4 @@ declare const ModalIdContext: React.Context<string | null>;
  */
 declare const useModalId: () => string | null;
 
-export { FontLoader, ModalIdContext, type ProductContext, type ThemeColors, type ThemeMode, type ThemeOverrideProps, type TypographyBodyVariant, type TypographyTokens, type TypographyVariant, XUIProvider, colors, defaultProductContext, fontFacesCSS, fonts, getFonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useResolvedTheme };
+export { type BreakpointKey, FontLoader, MOBILE_MAX_WIDTH, ModalIdContext, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, type ThemeColors, type ThemeMode, type ThemeOverrideProps, type TypographyBodyVariant, TypographyStyleLoader, type TypographyTokens, type TypographyVariant, XUIProvider, breakpoints, colors, cssVar, defaultProductContext, fontFacesCSS, fontSize, fonts, generateTypographyCSS, getFonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, lineHeightCompact, lineHeightDisplay, lineHeightText, radius, responsiveTypographyScale, shadow, spacing, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useResolvedTheme };