@xsolla/xui-core 0.161.3 → 0.162.0-pr294.1780506771

package/README.md

@@ -51,6 +51,7 @@ function MyWidget({ label, themeMode, themeProductContext }: MyWidgetProps) {
 | `"dark"` | Pentagram Dark (default) |
 | `"light"` | Pentagram Light |
 | `"ltg-dark"` | LTG Dark |
+| `"blueprints"` | Blueprints |
 
 ## Per-Component Overrides
 
@@ -62,10 +63,32 @@ Every component accepts `themeMode` and `themeProductContext` props to override
 
 For custom components, use `useResolvedTheme` instead of `useDesignSystem`.
 
+## Responsive Typography
+
+By default, `XUIProvider` injects CSS custom properties (`--xui-font-size-*`, `--xui-lh-*`) with `@media` queries so text scales between mobile and desktop breakpoints. Pass `responsive={false}` to disable this — all components will use the fixed common/desktop values instead.
+
+```tsx
+// Default — responsive scaling via CSS vars + @media
+<XUIProvider>
+  <App />
+</XUIProvider>
+
+// Opt-out — fixed sizes, no @media queries injected
+<XUIProvider responsive={false}>
+  <App />
+</XUIProvider>
+```
+
+The `responsive` flag is also available from `useDesignSystem()` if a component needs to branch on it:
+
+```tsx
+const { responsive } = useDesignSystem();
+```
+
 ## Exports
 
-- `XUIProvider` — Root context provider; accepts `initialMode` (see theme modes above)
-- `useDesignSystem` — Hook returning `{ theme, mode, setMode }`; falls back to dark theme if no provider
+- `XUIProvider` — Root context provider; accepts `initialMode` (see theme modes above) and `responsive` (opt-out of responsive typography, defaults to `true`)
+- `useDesignSystem` — Hook returning `{ theme, mode, setMode, responsive }`; falls back to dark theme if no provider
 - `useResolvedTheme` — Hook returning resolved theme with per-component overrides applied; same return shape as `useDesignSystem`
 - `ThemeOverrideProps` — Type: `{ themeMode?: ThemeMode; themeProductContext?: ProductContext }`
 - `themeConfig` — Function returning the full theme object for a given `ThemeMode`
@@ -73,16 +96,16 @@ For custom components, use `useResolvedTheme` instead of `useDesignSystem`.
 - `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)
+- `responsiveTypographyScale` — Raw responsive font-size and line-height data (13 steps × 2 device modes: common/mobile)
 - `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`)
 - `FontLoader` — Component that injects the `@font-face` declarations for XUI fonts
 - `fontFacesCSS` — Raw `@font-face` CSS string (for SSR or manual injection)
-- `ThemeMode` — Type: `"dark"` | `"light"` | `"ltg-dark"`
+- `ThemeMode` — Type: `"dark"` | `"light"` | `"ltg-dark"` | `"blueprints"`
 - `ThemeColors` — Type of the colour token object
-- `ProductContext` — Type of the `themeProductContext` prop (e.g. `"b2c"`, `"paystation"`)
+- `ProductContext` — Type of the `themeProductContext` prop: `"b2c"` | `"b2b"`
 - `colors` — Raw colour tokens for all themes
 - `spacing` — Spacing scale (`xs`, `s`, `m`, `l`, `xl`)
 - `radius` — Border-radius tokens (button, card, input, tag, avatar variants)
@@ -118,7 +141,7 @@ export const Card = ({ title, themeMode, themeProductContext }: CardProps) => {
 <XUIProvider initialMode="dark">
   <Card title="Dark card" />
   <Card title="Light card" themeMode="light" />
-  <Card title="Paystation card" themeMode="light" themeProductContext="paystation" />
+  <Card title="B2C card" themeMode="light" themeProductContext="b2c" />
 </XUIProvider>
 ```