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"; 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?: { fontWeight: number; }; paragraph?: { lineHeight: string; spacing?: number; /** The line-height scale step for the paragraph variant */ lineHeightScaleStep?: string; }; } interface TypographyTokens { heading: { h1: TypographyVariant; h2: TypographyVariant; h3: TypographyVariant; h4: TypographyVariant; h5: TypographyVariant; }; basic: { display: TypographyVariant; "body-lg": TypographyBodyVariant; "body-md": TypographyBodyVariant; "body-sm": TypographyBodyVariant; "body-xs": TypographyBodyVariant; "body-xxs": TypographyBodyVariant; }; } declare const typographyTokens: Record; declare const defaultProductContext: ProductContext; declare const getTypographyTokens: (productContext?: ProductContext) => TypographyTokens; declare const getTypographyVariant: (productContext: ProductContext, variant: string) => TypographyVariant | TypographyBodyVariant | undefined; var background = { primary: "#1b2628", secondary: "#141d1f", brand: { primary: "#55dcf6", secondary: "#135d6c" }, brandExtra: { primary: "#9580ff", secondary: "#301b98" }, inverse: "#ffffff", "static": { dark: "#000000", light: "#ffffff" }, success: { primary: "#95ff80", secondary: "#1f301c" }, warning: { primary: "#ffc380", secondary: "#6c4313" }, alert: { primary: "#e84f30", secondary: "#6c2213" }, neutral: { primary: "#99aeb2", secondary: "#34474b" } }; var content = { primary: "#e8eced", secondary: "rgba(255, 255, 255, 0.72)", tertiary: "rgba(255, 255, 255, 0.5)", brand: { primary: "#31cae8", secondary: "#55dcf6" }, brandExtra: { primary: "#7055f6", secondary: "#9580ff" }, inverse: "#000000", "static": { light: "#ffffff", dark: "#000000" }, success: { primary: "#70f655", secondary: "#3dc322" }, warning: { primary: "#f6ab55", secondary: "#c37822" }, alert: { primary: "#f67055", secondary: "#e84f30" }, neutral: { primary: "#99aeb2", secondary: "#4a6368" }, on: { brand: "#000000", brandExtra: "#ffffff", success: "#000000", warning: "#000000", alert: "#ffffff", neutral: "#000000" } }; var border = { primary: "#ffffff", secondary: "rgba(127, 169, 178, 0.3)", brand: "#31cae8", brandExtra: "#9580ff", inverse: "rgba(0, 0, 0, 0.14)", success: "#3dc322", warning: "#c37822", alert: "#c33d22", neutral: "#607f85" }; var overlay = { mono: "rgba(178, 242, 255, 0.06)", brand: "rgba(128, 234, 255, 0.2)", brandExtra: "rgba(149, 128, 255, 0.3)", success: "rgba(149, 255, 128, 0.2)", warning: "rgba(255, 195, 128, 0.24)", alert: "rgba(255, 149, 128, 0.32)", neutral: "rgba(123, 152, 157, 0.28)", monoHover: "rgba(178, 242, 255, 0.12)" }; var layer = { scrim: "rgba(0, 0, 0, 0.45)", float: "rgba(0, 0, 0, 0.75)" }; var control = { brand: { primary: { bg: "#80eaff", bgHover: "#b2f2ff", bgPress: "#55dcf6", bgDisable: "rgba(52, 71, 75, 0.85)", border: "#31cae8", borderHover: "#55dcf6", borderPress: "rgba(255, 255, 255, 0)", borderDisable: "rgba(255, 255, 255, 0)" }, secondary: { bg: "#135d6c", bgHover: "#1b8398", bgPress: "#0b3841", border: "#22a8c3", borderHover: "#22a8c3", borderPress: "rgba(255, 255, 255, 0)" }, tertiary: { bg: "rgba(255, 255, 255, 0)", bgHover: "#0b3841", bgPress: "#135d6c", border: "rgba(255, 255, 255, 0)", borderHover: "rgba(255, 255, 255, 0)", borderPress: "rgba(255, 255, 255, 0)" }, text: { primary: "#000000", secondary: "#80eaff", tertiary: "#80eaff", disable: "rgba(232, 236, 237, 0.2)", ghost: "#80eaff" }, ghost: { bg: "rgba(255, 255, 255, 0)", bgHover: "rgba(128, 234, 255, 0.04)", bgPress: "rgba(128, 234, 255, 0.08)", border: "rgba(128, 234, 255, 0.16)", borderHover: "rgba(128, 234, 255, 0.24)", borderPress: "rgba(128, 234, 255, 0.16)" } }, mono: { primary: { bg: "#ffffff", bgHover: "#e8eced", bgPress: "#f4f5f6", border: "rgba(255, 255, 255, 0)", borderHover: "rgba(255, 255, 255, 0)", borderPress: "rgba(255, 255, 255, 0)" }, secondary: { bg: "#34474b", bgHover: "#4a6368", bgPress: "#233134", border: "#4a6368", borderHover: "#607f85", borderPress: "rgba(255, 255, 255, 0)" }, tertiary: { bg: "rgba(255, 255, 255, 0)", bgHover: "#233134", bgPress: "#34474b", border: "rgba(255, 255, 255, 0)", borderHover: "rgba(255, 255, 255, 0)", borderPress: "rgba(255, 255, 255, 0)" }, text: { primary: "#000000", secondary: "#ffffff", tertiary: "#ffffff", ghost: "#ffffff" }, ghost: { bg: "rgba(255, 255, 255, 0)", bgHover: "rgba(255, 255, 255, 0.04)", bgPress: "rgba(255, 255, 255, 0.08)", border: "rgba(255, 255, 255, 0.16)", borderHover: "rgba(255, 255, 255, 0.24)", borderPress: "rgba(255, 255, 255, 0.16)" } }, brandExtra: { primary: { bg: "#7055f6", bgHover: "#5031e8", bgPress: "#9580ff", border: "rgba(255, 255, 255, 0)", borderHover: "rgba(255, 255, 255, 0)", borderPress: "rgba(255, 255, 255, 0)" }, secondary: { bg: "#22136c", bgHover: "#301b98", bgPress: "#140b41", border: "#7055f6", borderHover: "#9580ff", borderPress: "rgba(255, 255, 255, 0)" }, tertiary: { bg: "rgba(80, 49, 232, 0)", bgHover: "rgba(149, 128, 255, 0.07)", bgPress: "rgba(80, 49, 232, 0.12)", border: "rgba(255, 255, 255, 0)", borderHover: "rgba(255, 255, 255, 0)", borderPress: "rgba(255, 255, 255, 0)" }, text: { primary: "#ffffff", secondary: "#ffffff", tertiary: "#9580ff", ghost: "#cef655" }, ghost: { bg: "rgba(255, 255, 255, 0)", bgHover: "rgba(206, 246, 85, 0.04)", bgPress: "rgba(206, 246, 85, 0.08)", border: "rgba(206, 246, 85, 0.16)", borderHover: "rgba(206, 246, 85, 0.24)", borderPress: "rgba(206, 246, 85, 0.16)" } }, alert: { bg: "#6c2213", border: "#f67055", primary: { bg: "#f67055", bgHover: "#ff9580", bgPress: "#e84f30", border: "rgba(255, 255, 255, 0)", borderHover: "rgba(255, 255, 255, 0)", borderPress: "rgba(255, 255, 255, 0)" }, secondary: { bg: "#6c2213", bgHover: "#98301b", bgPress: "#41140b", border: "#98301b", borderHover: "#c33d22", borderPress: "rgba(255, 255, 255, 0)" }, tertiary: { bg: "rgba(232, 79, 48, 0)", bgHover: "rgba(246, 112, 85, 0.07)", bgPress: "rgba(246, 112, 85, 0.12)", border: "rgba(255, 255, 255, 0)", borderHover: "rgba(255, 255, 255, 0)", borderPress: "rgba(255, 255, 255, 0)" }, text: { primary: "#ffffff", secondary: "#ffffff", tertiary: "#f67055", ghost: "#f67055" }, ghost: { bg: "rgba(255, 255, 255, 0)", bgHover: "rgba(246, 112, 85, 0.04)", bgPress: "rgba(246, 112, 85, 0.08)", border: "rgba(246, 112, 85, 0.16)", borderHover: "rgba(246, 112, 85, 0.24)", borderPress: "rgba(246, 112, 85, 0.16)" } }, input: { bg: "rgba(178, 242, 255, 0.1)", bgHover: "rgba(178, 242, 255, 0.15)", bgDisable: "rgba(178, 242, 255, 0.25)", border: "rgba(178, 242, 255, 0.1)", borderHover: "rgba(178, 242, 255, 0.15)", borderDisable: "rgba(255, 255, 255, 0)", text: "#ffffff", placeholder: "rgba(255, 255, 255, 0.56)", textDisable: "rgba(255, 255, 255, 0.36)" }, focus: { bg: "rgba(0, 0, 0, 0.8)", border: "#31cae8" }, check: { bg: "#135d6c", bgHover: "#1b8398", bgDisable: "rgba(178, 242, 255, 0.25)", border: "#22a8c3", borderHover: "#22a8c3", borderDisable: "rgba(255, 255, 255, 0)", icon: "#80eaff" }, faint: { bg: "rgba(178, 242, 255, 0.15)", bgHover: "rgba(178, 242, 255, 0.2)", border: "rgba(178, 242, 255, 0.1)", borderHover: "rgba(178, 242, 255, 0.15)" }, slider: { bg: "#80eaff", bgHover: "#b2f2ff", bgDisable: "#34474b" }, "switch": { bg: "#135d6c", bgHover: "#1b8398", bgDisable: "rgba(178, 242, 255, 0.25)", border: "#22a8c3", borderHover: "#22a8c3", borderDisable: "rgba(255, 255, 255, 0)" }, knob: { bg: "#80eaff", bgHover: "#b2f2ff", bgActive: "#80eaff", bgActiveHover: "#b2f2ff", bgInactive: "#ffffff", bgInactiveHover: "#f4f5f6", bgDisable: "#34474b" }, text: { primary: "#ffffff", disable: "rgba(255, 255, 255, 0.4)" }, link: { primary: "#55dcf6", primaryHover: "#80eaff", secondary: "#9580ff", secondaryHover: "#bfb2ff" }, segmented: { bg: "rgba(178, 242, 255, 0.1)", bgHover: "rgba(178, 242, 255, 0.1)", bgActive: "rgba(178, 242, 255, 0.15)", border: "rgba(178, 242, 255, 0.1)", borderHover: "rgba(178, 242, 255, 0.1)", borderActive: "rgba(255, 255, 255, 0)", text: "#ffffff", textDisable: "rgba(255, 255, 255, 0.4)" }, tagLabel: { product: { bg: "#d9ff66", text: "#000000", textCompact: "rgba(255, 255, 255, 0.48)" }, rarity: { bg: "#141d1f", text: "#22a8c3" }, name: { bg: "#233134", text: "#b7c5c8" }, account: { bg: "#9580ff", text: "#000000", textCompact: "rgba(255, 255, 255, 0.48)" }, id: { bg: "#34474b", bgSeries: "#000000", textSeries: "#b7c5c8", textNumber: "#b7c5c8", textCompact: "rgba(255, 255, 255, 0.48)" }, subentity: { bg: "#607f85", text: "#000000" }, item: { bg: "#80eaff", text: "#000000", textCompact: "rgba(255, 255, 255, 0.48)" } }, toast: { bg: "#34474b" }, toggleButton: { bg: "rgba(178, 242, 255, 0.1)", bgHover: "rgba(178, 242, 255, 0.15)", bgActive: "#135d6c", bgDisable: "rgba(178, 242, 255, 0.25)", border: "rgba(178, 242, 255, 0.1)", borderHover: "rgba(178, 242, 255, 0.15)", borderActive: "#22a8c3", borderDisable: "rgba(255, 255, 255, 0)", text: "#ffffff", textActive: "#80eaff", textDisable: "rgba(255, 255, 255, 0.36)" }, appButton: { bg: "#34474b", bgHover: "#4b6368", bgPress: "#607f85", border: "#4b6368", borderHover: "#607f85", borderPress: "rgba(255, 255, 255, 0)", text: "#b7c5c8", textDisable: "rgba(232, 236, 237, 0.2)" } }; var pentagramDark = { background: background, content: content, border: border, overlay: overlay, layer: layer, control: control }; /** * NOTE: The "ghost" button variant tokens (control.brand.ghost, control.mono.ghost, * control.brandExtra.ghost, control.alert.ghost, and their text.ghost counterparts) * are developer-added tokens NOT present in the Figma design token exports. * Do NOT delete them when syncing tokens from Figma. * * Similarly, "appButton" tokens are developer-added (by r.tallmadge@xsolla.com). */ declare const colors: { dark: { background: { primary: string; secondary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { dark: string; light: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; }; content: { primary: string; secondary: string; tertiary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { light: string; dark: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; on: { brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; }; }; border: { primary: string; secondary: string; brand: string; brandExtra: string; inverse: string; success: string; warning: string; alert: string; neutral: string; }; overlay: { mono: string; brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; monoHover: string; }; layer: { scrim: string; float: string; }; control: { brand: { primary: { bg: string; bgHover: string; bgPress: string; bgDisable: string; border: string; borderHover: string; borderPress: string; borderDisable: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; disable: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; mono: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; brandExtra: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; alert: { bg: string; border: string; primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; input: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; text: string; placeholder: string; textDisable: string; }; focus: { bg: string; border: string; }; check: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; icon: string; }; faint: { bg: string; bgHover: string; border: string; borderHover: string; }; slider: { bg: string; bgHover: string; bgDisable: string; }; switch: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; }; knob: { bg: string; bgHover: string; bgActive: string; bgActiveHover: string; bgInactive: string; bgInactiveHover: string; bgDisable: string; }; text: { primary: string; disable: string; }; link: { primary: string; primaryHover: string; secondary: string; secondaryHover: string; }; segmented: { bg: string; bgHover: string; bgActive: string; border: string; borderHover: string; borderActive: string; text: string; textDisable: string; }; tagLabel: { product: { bg: string; text: string; textCompact: string; }; rarity: { bg: string; text: string; }; name: { bg: string; text: string; }; account: { bg: string; text: string; textCompact: string; }; id: { bg: string; bgSeries: string; textSeries: string; textNumber: string; textCompact: string; }; subentity: { bg: string; text: string; }; item: { bg: string; text: string; textCompact: string; }; }; toast: { bg: string; }; toggleButton: { bg: string; bgHover: string; bgActive: string; bgDisable: string; border: string; borderHover: string; borderActive: string; borderDisable: string; text: string; textActive: string; textDisable: string; }; appButton: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; text: string; textDisable: string; }; }; }; light: { background: { primary: string; secondary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { dark: string; light: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; }; content: { primary: string; secondary: string; tertiary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { light: string; dark: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; on: { brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; }; }; border: { primary: string; secondary: string; brand: string; brandExtra: string; inverse: string; success: string; warning: string; alert: string; neutral: string; }; overlay: { mono: string; brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; monoHover: string; }; layer: { scrim: string; float: string; }; control: { brand: { primary: { bg: string; bgHover: string; bgPress: string; bgDisable: string; border: string; borderHover: string; borderPress: string; borderDisable: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; disable: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; mono: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; brandExtra: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; alert: { bg: string; border: string; primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; input: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; text: string; placeholder: string; textDisable: string; }; focus: { bg: string; border: string; }; check: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; icon: string; }; faint: { bg: string; bgHover: string; border: string; borderHover: string; }; slider: { bg: string; bgHover: string; bgDisable: string; }; switch: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; }; knob: { bg: string; bgHover: string; bgActive: string; bgActiveHover: string; bgInactive: string; bgInactiveHover: string; bgDisable: string; }; text: { primary: string; disable: string; }; link: { primary: string; primaryHover: string; secondary: string; secondaryHover: string; }; segmented: { bg: string; bgHover: string; bgActive: string; border: string; borderHover: string; borderActive: string; text: string; textDisable: string; }; tagLabel: { product: { bg: string; text: string; textCompact: string; }; rarity: { bg: string; text: string; }; name: { bg: string; text: string; }; account: { bg: string; text: string; textCompact: string; }; id: { bg: string; bgSeries: string; textSeries: string; textNumber: string; textCompact: string; }; subentity: { bg: string; text: string; }; item: { bg: string; text: string; textCompact: string; }; }; toast: { bg: string; }; toggleButton: { bg: string; bgHover: string; bgActive: string; bgDisable: string; border: string; borderHover: string; borderActive: string; borderDisable: string; text: string; textActive: string; textDisable: string; }; appButton: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; text: string; textDisable: string; }; }; }; "pentagram-dark": { background: { primary: string; secondary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { dark: string; light: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; }; content: { primary: string; secondary: string; tertiary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { light: string; dark: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; on: { brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; }; }; border: { primary: string; secondary: string; brand: string; brandExtra: string; inverse: string; success: string; warning: string; alert: string; neutral: string; }; overlay: { mono: string; brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; monoHover: string; }; layer: { scrim: string; float: string; }; control: { brand: { primary: { bg: string; bgHover: string; bgPress: string; bgDisable: string; border: string; borderHover: string; borderPress: string; borderDisable: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; disable: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; mono: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; brandExtra: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; alert: { bg: string; border: string; primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; input: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; text: string; placeholder: string; textDisable: string; }; focus: { bg: string; border: string; }; check: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; icon: string; }; faint: { bg: string; bgHover: string; border: string; borderHover: string; }; slider: { bg: string; bgHover: string; bgDisable: string; }; switch: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; }; knob: { bg: string; bgHover: string; bgActive: string; bgActiveHover: string; bgInactive: string; bgInactiveHover: string; bgDisable: string; }; text: { primary: string; disable: string; }; link: { primary: string; primaryHover: string; secondary: string; secondaryHover: string; }; segmented: { bg: string; bgHover: string; bgActive: string; border: string; borderHover: string; borderActive: string; text: string; textDisable: string; }; tagLabel: { product: { bg: string; text: string; textCompact: string; }; rarity: { bg: string; text: string; }; name: { bg: string; text: string; }; account: { bg: string; text: string; textCompact: string; }; id: { bg: string; bgSeries: string; textSeries: string; textNumber: string; textCompact: string; }; subentity: { bg: string; text: string; }; item: { bg: string; text: string; textCompact: string; }; }; toast: { bg: string; }; toggleButton: { bg: string; bgHover: string; bgActive: string; bgDisable: string; border: string; borderHover: string; borderActive: string; borderDisable: string; text: string; textActive: string; textDisable: string; }; appButton: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; text: string; textDisable: string; }; }; }; "pentagram-light": { background: { primary: string; secondary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { dark: string; light: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; }; content: { primary: string; secondary: string; tertiary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { light: string; dark: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; on: { brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; }; }; border: { primary: string; secondary: string; brand: string; brandExtra: string; inverse: string; success: string; warning: string; alert: string; neutral: string; }; overlay: { mono: string; brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; monoHover: string; }; layer: { scrim: string; float: string; }; control: { brand: { primary: { bg: string; bgHover: string; bgPress: string; bgDisable: string; border: string; borderHover: string; borderPress: string; borderDisable: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; disable: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; mono: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; brandExtra: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; alert: { bg: string; border: string; primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; input: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; text: string; placeholder: string; textDisable: string; }; focus: { bg: string; border: string; }; check: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; icon: string; }; faint: { bg: string; bgHover: string; border: string; borderHover: string; }; slider: { bg: string; bgHover: string; bgDisable: string; }; switch: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; }; knob: { bg: string; bgHover: string; bgActive: string; bgActiveHover: string; bgInactive: string; bgInactiveHover: string; bgDisable: string; }; text: { primary: string; disable: string; }; link: { primary: string; primaryHover: string; secondary: string; secondaryHover: string; }; segmented: { bg: string; bgHover: string; bgActive: string; border: string; borderHover: string; borderActive: string; text: string; textDisable: string; }; tagLabel: { product: { bg: string; text: string; textCompact: string; }; rarity: { bg: string; text: string; }; name: { bg: string; text: string; }; account: { bg: string; text: string; textCompact: string; }; id: { bg: string; bgSeries: string; textSeries: string; textNumber: string; textCompact: string; }; subentity: { bg: string; text: string; }; item: { bg: string; text: string; textCompact: string; }; }; toast: { bg: string; }; toggleButton: { bg: string; bgHover: string; bgActive: string; bgDisable: string; border: string; borderHover: string; borderActive: string; borderDisable: string; text: string; textActive: string; textDisable: string; }; appButton: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; text: string; textDisable: string; }; }; }; "ltg-dark": { background: { primary: string; secondary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { dark: string; light: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; }; content: { primary: string; secondary: string; tertiary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { light: string; dark: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; on: { brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; }; }; border: { primary: string; secondary: string; brand: string; brandExtra: string; inverse: string; success: string; warning: string; alert: string; neutral: string; }; overlay: { mono: string; brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; monoHover: string; }; layer: { scrim: string; float: string; }; control: { brand: { primary: { bg: string; bgHover: string; bgPress: string; bgDisable: string; border: string; borderHover: string; borderPress: string; borderDisable: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; disable: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; mono: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; brandExtra: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; alert: { bg: string; border: string; primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; input: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; text: string; placeholder: string; textDisable: string; }; focus: { bg: string; border: string; }; check: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; icon: string; }; faint: { bg: string; bgHover: string; border: string; borderHover: string; }; slider: { bg: string; bgHover: string; bgDisable: string; }; switch: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; }; knob: { bg: string; bgHover: string; bgActive: string; bgActiveHover: string; bgInactive: string; bgInactiveHover: string; bgDisable: string; }; text: { primary: string; disable: string; }; link: { primary: string; primaryHover: string; secondary: string; secondaryHover: string; }; segmented: { bg: string; bgHover: string; bgActive: string; border: string; borderHover: string; borderActive: string; text: string; textDisable: string; }; tagLabel: { product: { bg: string; text: string; textCompact: string; }; rarity: { bg: string; text: string; }; name: { bg: string; text: string; }; account: { bg: string; text: string; textCompact: string; }; id: { bg: string; bgSeries: string; textSeries: string; textNumber: string; textCompact: string; }; subentity: { bg: string; text: string; }; item: { bg: string; text: string; textCompact: string; }; }; toast: { bg: string; }; toggleButton: { bg: string; bgHover: string; bgActive: string; bgDisable: string; border: string; borderHover: string; borderActive: string; borderDisable: string; text: string; textActive: string; textDisable: string; }; appButton: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; text: string; textDisable: string; }; }; }; blueprints: { background: { primary: string; secondary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { dark: string; light: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; }; content: { primary: string; secondary: string; tertiary: string; brand: { primary: string; secondary: string; }; brandExtra: { primary: string; secondary: string; }; inverse: string; static: { light: string; dark: string; }; success: { primary: string; secondary: string; }; warning: { primary: string; secondary: string; }; alert: { primary: string; secondary: string; }; neutral: { primary: string; secondary: string; }; on: { brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; }; }; border: { primary: string; secondary: string; brand: string; brandExtra: string; inverse: string; success: string; warning: string; alert: string; neutral: string; }; overlay: { mono: string; brand: string; brandExtra: string; success: string; warning: string; alert: string; neutral: string; monoHover: string; }; layer: { scrim: string; float: string; }; control: { brand: { primary: { bg: string; bgHover: string; bgPress: string; bgDisable: string; border: string; borderHover: string; borderPress: string; borderDisable: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; disable: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; mono: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; brandExtra: { primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; alert: { bg: string; border: string; primary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; secondary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; tertiary: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; text: { primary: string; secondary: string; tertiary: string; ghost: string; }; ghost: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; }; }; input: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; text: string; placeholder: string; textDisable: string; }; focus: { bg: string; border: string; }; check: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; icon: string; }; faint: { bg: string; bgHover: string; border: string; borderHover: string; }; slider: { bg: string; bgHover: string; bgDisable: string; }; switch: { bg: string; bgHover: string; bgDisable: string; border: string; borderHover: string; borderDisable: string; }; knob: { bg: string; bgHover: string; bgActive: string; bgActiveHover: string; bgInactive: string; bgInactiveHover: string; bgDisable: string; }; text: { primary: string; disable: string; }; link: { primary: string; primaryHover: string; secondary: string; secondaryHover: string; }; segmented: { bg: string; bgHover: string; bgActive: string; border: string; borderHover: string; borderActive: string; text: string; textDisable: string; }; tagLabel: { product: { bg: string; text: string; textCompact: string; }; rarity: { bg: string; text: string; }; name: { bg: string; text: string; }; account: { bg: string; text: string; textCompact: string; }; id: { bg: string; bgSeries: string; textSeries: string; textNumber: string; textCompact: string; }; subentity: { bg: string; text: string; }; item: { bg: string; text: string; textCompact: string; }; }; toast: { bg: string; }; toggleButton: { bg: string; bgHover: string; bgActive: string; bgDisable: string; border: string; borderHover: string; borderActive: string; borderDisable: string; text: string; textActive: string; textDisable: string; }; appButton: { bg: string; bgHover: string; bgPress: string; border: string; borderHover: string; borderPress: string; text: string; textDisable: string; }; }; }; }; type ThemeColors = typeof pentagramDark; declare const spacing: { xs: number; s: number; m: number; l: number; xl: number; }; declare const radius: { button: number; card: number; contextMenu: number; input: number; tagSmall: number; tagMedium: number; tagLarge: number; avatarSmall: number; avatarLarge: number; avatarCircle: number; }; /** Primitive radius scale. Mirrors Figma "Scale / radius/*" variables. */ declare const radiusScale: { readonly "25": 2; readonly "50": 4; readonly "75": 6; readonly "100": 8; readonly "150": 12; readonly "200": 16; readonly "250": 20; readonly "300": 24; readonly "350": 28; readonly "400": 32; readonly "999": 999; }; /** Primitive border-width scale. Mirrors Figma "Scale / stroke/*" variables. */ declare const stroke: { readonly "1": 1; readonly "2": 2; readonly "3": 3; }; /** * Semantic shape tokens. Mirrors Figma "Theme / Shape" variable collection, * Xsolla Default mode. Values alias into the radiusScale and stroke primitives. */ declare const shape: { readonly button: { readonly xl: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 6; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly xs: { readonly borderRadius: 4; readonly borderWidth: 1; }; }; readonly checkbox: { readonly xl: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 4; readonly borderWidth: 1; }; }; readonly input: { readonly xl: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly xs: { readonly borderRadius: 4; readonly borderWidth: 1; }; }; readonly segmented: { readonly xl: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 4; readonly borderWidth: 1; }; }; readonly segmentedItem: { readonly xl: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 2; readonly borderWidth: 1; }; }; readonly switch: { readonly xl: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 4; readonly borderWidth: 1; }; }; readonly knob: { readonly xl: { readonly borderRadius: 2; }; readonly lg: { readonly borderRadius: 2; }; readonly md: { readonly borderRadius: 2; }; readonly sm: { readonly borderRadius: 2; }; }; readonly tabItem: { readonly xl: { readonly borderRadius: 8; }; readonly lg: { readonly borderRadius: 8; }; readonly md: { readonly borderRadius: 4; }; readonly sm: { readonly borderRadius: 4; }; }; readonly tag: { readonly xl: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 6; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly xs: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly label: { readonly borderRadius: 0; }; }; readonly tooltip: { readonly xl: { readonly borderRadius: 8; }; readonly lg: { readonly borderRadius: 8; }; readonly md: { readonly borderRadius: 8; }; readonly sm: { readonly borderRadius: 4; }; }; readonly radio: { readonly xl: { readonly borderRadius: 999; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 999; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 999; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 999; readonly borderWidth: 1; }; }; readonly contextMenu: { readonly xl: { readonly borderRadius: 8; }; readonly lg: { readonly borderRadius: 8; }; readonly md: { readonly borderRadius: 8; }; readonly sm: { readonly borderRadius: 4; }; readonly xs: { readonly borderRadius: 4; }; }; readonly avatar: { readonly xl: { readonly borderRadius: 8; readonly borderWidth: 2; }; readonly lg: { readonly borderRadius: 6; readonly borderWidth: 2; }; readonly md: { readonly borderRadius: 6; readonly borderWidth: 2; }; readonly sm: { readonly borderRadius: 4; readonly borderWidth: 2; }; readonly xs: { readonly borderRadius: 4; readonly borderWidth: 2; }; readonly xxs: { readonly borderRadius: 2; readonly borderWidth: 2; }; }; readonly modal: { readonly borderRadius: 8; }; readonly toast: { readonly borderRadius: 4; }; readonly toggleButtonGroup: { readonly xl: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly lg: { readonly borderRadius: 8; readonly borderWidth: 1; }; readonly md: { readonly borderRadius: 6; readonly borderWidth: 1; }; readonly sm: { readonly borderRadius: 4; readonly borderWidth: 1; }; readonly xs: { readonly borderRadius: 4; readonly borderWidth: 1; }; }; readonly tagLabel: { readonly borderRadius: 0; }; }; declare const shadow: { active: string; surface: string; surfaceHover: string; popover: string; modal: string; contextMenu: 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; }; /** Returns context-aware font families */ 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; }; declare const typography: { button: { fontFamily: string; fontWeight: string; }; }; /** * 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; } 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 */ declare const fontSize: Record; /** Line-height/display: tight line-heights for headings (roughly 1:1 with font-size) */ declare const lineHeightDisplay: Record; /** Line-height/compact: moderate line-heights for UI body text */ declare const lineHeightCompact: Record; /** Line-height/text: generous line-heights for paragraphs and reading text */ declare const lineHeightText: Record; declare const responsiveTypographyScale: { readonly fontSize: Record; readonly lineHeightDisplay: Record; readonly lineHeightCompact: Record; readonly lineHeightText: Record; }; declare const isWeb: boolean; declare const isNative: boolean; declare const isIOS: boolean; declare const isAndroid: boolean; /** * React component that loads the toolkit's font-face declarations. * Drop-in for any framework — works in Next.js, Vite, CRA, etc. * * Renders nothing to the DOM. Injects a single `