@xsolla/switch-theme-customization 0.167.0 → 0.168.0

package/index.d.ts

@@ -171,54 +171,6 @@ interface Typography {
     };
 }
 
-type GlobalStyles = 'switch' | 'brand' | 'publisherV2' | 'influencerAccount' | 'lightstream' | 'pentagram';
-interface Theme {
-    colors: Colors$1<string>;
-    typo: Typography;
-    misc: Misc;
-    shadows: Shadows;
-    typoMobile?: Typography;
-    typoTablet?: Typography;
-    globalStyle?: GlobalStyles;
-}
-type ThemeVariant = Pick<Theme, 'colors'>;
-
-type Size = 'sm' | 'md' | 'lg';
-
-declare const paystation4: Theme;
-declare const paystation4Dark: Theme;
-declare const paystation4Take2: Theme;
-declare const paystation4Gaijin: Theme;
-declare const paystation4Nexters: Theme;
-declare const paystation4Themes: {
-    light: Theme;
-    dark: Theme;
-    take2: Theme;
-    gaijin: Theme;
-    nexters: Theme;
-};
-
-declare const publisherV2: Theme;
-declare const publisherV2Dark: Theme;
-declare const publisherV2Themes: {
-    light: Theme;
-    dark: Theme;
-};
-
-declare const emails: Theme;
-declare const emailsDark: Theme;
-declare const emailsThemes: {
-    light: Theme;
-    dark: Theme;
-};
-
-declare const themesBaseColorsArray: {
-    theme: string;
-    baseColors: BaseColors<colord.Colord>;
-}[];
-declare const themesBaseColors: Record<string, BaseColors>;
-declare const themesColorsScheme: Record<string, (base: BaseColors) => void>;
-
 interface PentagramBaseColors {
     content: Colord;
     contentInverse: Colord;
@@ -240,6 +192,9 @@ interface PentagramBaseColors {
     onAlert: Colord;
     onNeutral: Colord;
 }
+type PentagramBaseColorsHsl = {
+    [K in keyof PentagramBaseColors]: string;
+};
 interface ControlVariant {
     bg: string;
     bgHover: string;
@@ -253,6 +208,7 @@ interface ControlVariantWithDisable extends ControlVariant {
     borderDisable: string;
 }
 interface ThemeScheme {
+    base: PentagramBaseColorsHsl;
     background: {
         primary: string;
         secondary: string;
@@ -442,7 +398,11 @@ interface ThemeScheme {
         knob: {
             bg: string;
             bgHover: string;
+            bgActive: string;
+            bgActiveHover: string;
             bgInactive: string;
+            bgInactiveHover: string;
+            bgDisable: string;
         };
         text: {
             primary: string;
@@ -480,14 +440,634 @@ interface ThemeScheme {
     };
 }
 type PresetName = string;
+/** Canonical pentagram colors in DB / themeContentPentagram (scheme output without seed `base`). */
+type ThemeSchemeColors = Omit<ThemeScheme, "base">;
+
+var heading = {
+	h1: {
+		fontSize: "450",
+		lineHeight: "display/450",
+		fontWeight: 700
+	},
+	h2: {
+		fontSize: "350",
+		lineHeight: "display/350",
+		fontWeight: 700
+	},
+	h3: {
+		fontSize: "300",
+		lineHeight: "display/300",
+		fontWeight: 700
+	},
+	h4: {
+		fontSize: "250",
+		lineHeight: "display/250",
+		fontWeight: 700
+	},
+	h5: {
+		fontSize: "200",
+		lineHeight: "display/200",
+		fontWeight: 700
+	}
+};
+var basic = {
+	display: {
+		fontFamily: "compact",
+		fontSize: "300",
+		lineHeight: "compact/300",
+		fontWeight: 500
+	},
+	bodyLg: {
+		fontSize: "175",
+		lineHeight: "compact/175",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/250",
+			lineHeight: "text/175"
+		}
+	},
+	bodyMd: {
+		fontSize: "150",
+		lineHeight: "compact/150",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/200",
+			lineHeight: "text/150"
+		}
+	},
+	bodySm: {
+		fontSize: "125",
+		lineHeight: "compact/125",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/150",
+			lineHeight: "text/125"
+		}
+	},
+	bodyXs: {
+		fontSize: "100",
+		lineHeight: "compact/100",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/100",
+			lineHeight: "text/100"
+		}
+	},
+	bodyXxs: {
+		fontSize: "75",
+		lineHeight: "compact/75",
+		"default": {
+			fontWeight: 400
+		},
+		accent: {
+			fontWeight: 500
+		},
+		paragraph: {
+			spacing: "spacing/75",
+			lineHeight: "text/75"
+		}
+	}
+};
+var control = {
+	button: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "200"
+		}
+	},
+	input: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "200"
+		}
+	},
+	checkbox: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		}
+	},
+	tab: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "300"
+		}
+	},
+	radio: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		}
+	},
+	segmentedItem: {
+		xl: {
+			scale: "500"
+		},
+		lg: {
+			scale: "400"
+		},
+		md: {
+			scale: "300"
+		},
+		sm: {
+			scale: "200"
+		}
+	},
+	tag: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "200"
+		}
+	},
+	toggleButton: {
+		xl: {
+			scale: "600"
+		},
+		lg: {
+			scale: "500"
+		},
+		md: {
+			scale: "400"
+		},
+		sm: {
+			scale: "300"
+		},
+		xs: {
+			scale: "200"
+		}
+	}
+};
+var typoPrimitives = {
+	heading: heading,
+	basic: basic,
+	control: control
+};
+
+var button = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var checkbox = {
+	xl: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var input = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var cell = {
+	borderRadius: "radius/100",
+	borderWidth: "stroke/1"
+};
+var modal = {
+	borderRadius: "radius/100"
+};
+var toast = {
+	borderRadius: "radius/50",
+	borderWidth: "0px"
+};
+var segmentedItem = {
+	xl: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/25",
+		borderWidth: "stroke/1"
+	}
+};
+var segmented = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var knob = {
+	xl: {
+		borderRadius: "radius/25"
+	},
+	lg: {
+		borderRadius: "radius/25"
+	},
+	md: {
+		borderRadius: "radius/25"
+	},
+	sm: {
+		borderRadius: "radius/25"
+	}
+};
+var tabItem = {
+	xl: {
+		borderRadius: "radius/100"
+	},
+	lg: {
+		borderRadius: "radius/100"
+	},
+	md: {
+		borderRadius: "radius/50"
+	},
+	sm: {
+		borderRadius: "radius/50"
+	}
+};
+var tag = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var tagLabel = {
+	borderRadius: "0px"
+};
+var tooltip = {
+	xl: {
+		borderRadius: "radius/100"
+	},
+	lg: {
+		borderRadius: "radius/100"
+	},
+	md: {
+		borderRadius: "radius/100"
+	},
+	sm: {
+		borderRadius: "radius/50"
+	}
+};
+var radio = {
+	xl: {
+		borderRadius: "radius/999",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/999",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/999",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/999",
+		borderWidth: "stroke/1"
+	}
+};
+var contextMenu = {
+	xl: {
+		borderRadius: "radius/100"
+	},
+	lg: {
+		borderRadius: "radius/100"
+	},
+	md: {
+		borderRadius: "radius/100"
+	},
+	sm: {
+		borderRadius: "radius/50"
+	}
+};
+var avatar = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/2"
+	},
+	lg: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/2"
+	},
+	md: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/2"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/2"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/2"
+	},
+	xxs: {
+		borderRadius: "radius/25",
+		borderWidth: "stroke/2"
+	}
+};
+var toggleButtonGroup = {
+	xl: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/100",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/75",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	xs: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+};
+var shapePrimitives = {
+	button: button,
+	checkbox: checkbox,
+	input: input,
+	cell: cell,
+	modal: modal,
+	toast: toast,
+	segmentedItem: segmentedItem,
+	segmented: segmented,
+	"switch": {
+	xl: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	lg: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	md: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	},
+	sm: {
+		borderRadius: "radius/50",
+		borderWidth: "stroke/1"
+	}
+},
+	knob: knob,
+	tabItem: tabItem,
+	tag: tag,
+	tagLabel: tagLabel,
+	tooltip: tooltip,
+	radio: radio,
+	contextMenu: contextMenu,
+	avatar: avatar,
+	toggleButtonGroup: toggleButtonGroup
+};
+
+type TypoPrimitives = typeof typoPrimitives;
+type ShapePrimitives = typeof shapePrimitives;
+
+type GlobalStyles = "switch" | "brand" | "publisherV2" | "influencerAccount" | "lightstream" | "pentagram";
+interface Theme {
+    colors: Colors$1<string>;
+    typo: Typography;
+    misc: Misc;
+    shadows: Shadows;
+    typoMobile?: Typography;
+    typoTablet?: Typography;
+    globalStyle?: GlobalStyles;
+}
+interface PentagramTheme {
+    colors: ThemeScheme;
+    typo: TypoPrimitives;
+    shape: ShapePrimitives;
+    shadows: Shadows;
+    globalStyle?: GlobalStyles;
+}
+type ThemeVariant = Pick<Theme, "colors">;
+
+type Size = 'sm' | 'md' | 'lg';
+
+declare const paystation4: Theme;
+declare const paystation4Dark: Theme;
+declare const paystation4Take2: Theme;
+declare const paystation4Gaijin: Theme;
+declare const paystation4Nexters: Theme;
+declare const paystation4Themes: {
+    light: Theme;
+    dark: Theme;
+    take2: Theme;
+    gaijin: Theme;
+    nexters: Theme;
+};
+
+declare const publisherV2: Theme;
+declare const publisherV2Dark: Theme;
+declare const publisherV2Themes: {
+    light: Theme;
+    dark: Theme;
+};
+
+declare const emails: Theme;
+declare const emailsDark: Theme;
+declare const emailsThemes: {
+    light: Theme;
+    dark: Theme;
+};
+
+declare const themesBaseColorsArray: {
+    theme: string;
+    baseColors: BaseColors<colord.Colord>;
+}[];
+declare const themesBaseColors: Record<string, BaseColors>;
+declare const themesColorsScheme: Record<string, (base: BaseColors) => void>;
+
+/**
+ * Mapped LIGHT scheme from new to old set of variables
+ */
+declare const paystation4PentagramLightLegacyCompatible: Theme;
+/**
+ * Mapped DARK scheme from new to old set of variables
+ */
+declare const paystation4PentagramDarkLegacyCompatible: Theme;
+declare const paystation4PentagramLight: PentagramTheme;
+declare const paystation4PentagramDark: PentagramTheme;
 
 declare const baseDark: PentagramBaseColors;
-declare const createDarkScheme: (b: PentagramBaseColors) => ThemeScheme;
-declare const payStationDarkScheme: ThemeScheme;
+declare const pentagramDarkScheme: (b: PentagramBaseColors) => ThemeScheme;
+declare const pentagramDark: ThemeScheme;
 
 declare const base: PentagramBaseColors;
-declare const createScheme: (b: PentagramBaseColors) => ThemeScheme;
-declare const payStationScheme: ThemeScheme;
+declare const pentagramLightScheme: (b: PentagramBaseColors) => ThemeScheme;
+declare const pentagramLight: ThemeScheme;
+
+/**
+ * Maps Pentagram colors → legacy Switch Colors structure.
+ *
+ * Converts `themeContentPentagram.colors` (nested ThemeSchemeColors)
+ * to the legacy format so products on the old variable set keep working.
+ *
+ * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ */
+
+/**
+ * @param colors Pentagram colors from DB or generated scheme (without seed `base`)
+ * @returns Legacy colors without `base` (seed colors are added separately)
+ */
+declare function mapThemeSchemeToLegacy(colors: ThemeSchemeColors): Pick<Colors$1<string>, "core" | "control">;
 
 declare const themes: Record<string, Theme>;
 
@@ -1964,4 +2544,313 @@ declare function themeGenerator(props: {
 }): ThemeScheme;
 declare function themeGenerator(props: ThemeFunctionType): Theme;
 
-export { type BaseColors, type BaseColorsIndex, type ColorValue, type Colors$1 as Colors, type ComponentBaseColors$1 as ComponentBaseColors, type Misc, type PentagramBaseColors, type PresetName, type Shadows, type Size, type Theme, type ThemeFunctionType, type ThemeScheme, type ThemeVariant, type Typography, base, baseDark, createDarkScheme, createScheme, emails, emailsDark, emailsThemes, generateWithScheme, palettes, payStationDarkScheme, payStationScheme, paystation4, paystation4Dark, paystation4Gaijin, paystation4Nexters, paystation4Take2, paystation4Themes, primaryPalette, publisherV2, publisherV2Dark, publisherV2Themes, themeGenerator, themes, themesBaseColors, themesBaseColorsArray, themesColorsScheme };
+/**
+ * Resolves Pentagram design token aliases to concrete CSS values.
+ *
+ * Source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ * Scale tables: see FONT_SIZE_SCALE and LINE_HEIGHT_* constants below.
+ *
+ * This resolver converts aliases like "font-size/300" → "28px" (desktop) or "24px" (mobile).
+ * It is used BEFORE the mappers (mapPentagramTypoToLegacy, mapPentagramShapeToLegacy).
+ *
+ * @example
+ * ```typescript
+ * const resolver = new PentagramResolver('desktop');
+ * const resolvedTypo = resolver.resolvePrimitives(themeContentPentagram.typo);
+ * const legacyTypo = mapPentagramTypoToLegacy(resolvedTypo);
+ * ```
+ */
+type Device = "desktop" | "mobile";
+declare class PentagramResolver {
+    private device;
+    constructor(device?: Device);
+    setDevice(device: Device): void;
+    /**
+     * Resolve a single alias to a concrete value.
+     *
+     * @param alias - Alias string like "300" (fontSize), "display/300" (lineHeight), or "radius/100"
+     * @param context - Optional context hint: 'fontSize' or 'lineHeight'
+     * @returns Resolved value (e.g., "28px") or original if not an alias
+     */
+    resolve(alias: string | number, context?: "fontSize" | "lineHeight"): string | number;
+    /**
+     * Recursively resolve all aliases in an object.
+     *
+     * @param obj - Object containing alias strings
+     * @returns New object with all aliases resolved to concrete values
+     */
+    resolvePrimitives<T>(obj: T): T;
+    /**
+     * Check if a value is already resolved (not an alias).
+     */
+    private isResolved;
+}
+/**
+ * Create a resolver for the given device.
+ *
+ * @param device - 'desktop' (default) or 'mobile'
+ * @returns PentagramResolver instance
+ *
+ * @example
+ * ```typescript
+ * const resolver = createResolver('desktop');
+ * const resolved = resolver.resolvePrimitives(pentagramTypo);
+ * ```
+ */
+declare function createResolver(device?: Device): PentagramResolver;
+/**
+ * Resolve all aliases in a Pentagram primitives object for desktop device.
+ * Convenience function for the most common case.
+ *
+ * @example
+ * ```typescript
+ * const resolvedTypo = resolveForDesktop(themeContentPentagram.typo);
+ * ```
+ */
+declare function resolveForDesktop<T>(obj: T): T;
+/**
+ * Resolve all aliases in a Pentagram primitives object for mobile device.
+ */
+declare function resolveForMobile<T>(obj: T): T;
+
+/**
+ * Maps Pentagram Typography → Legacy Typography structure.
+ *
+ * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ *
+ * Used for themes that have themeContentPentagram.typo (new set).
+ * Converts to themeContent.typo (old set) so that Pay Station 4 keeps working.
+ *
+ * NOTE: This mapper expects RESOLVED values (px), not aliases like "font-size/300".
+ * Use PentagramResolver to resolve aliases before calling this mapper.
+ */
+interface TypographyStyle {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight?: number;
+    textTransform?: string;
+    [key: string]: string | number | undefined;
+}
+interface PentagramTypoBasicVariant {
+    fontSize: string;
+    lineHeight: string;
+    default?: {
+        fontWeight: number;
+    };
+    accent?: {
+        fontWeight: number;
+    };
+    paragraph?: {
+        spacing?: string;
+        lineHeight?: string;
+    };
+}
+/** Resolved control size (after PentagramResolver expands `{ scale: "400" }`). */
+type PentagramTypoControlSize = Pick<TypographyStyle, "fontSize" | "lineHeight">;
+/**
+ * Pentagram Typography structure (from themeContentPentagram.typo)
+ */
+interface PentagramTypo {
+    heading: {
+        h1: TypographyStyle;
+        h2: TypographyStyle;
+        h3: TypographyStyle;
+        h4: TypographyStyle;
+        h5: TypographyStyle;
+    };
+    basic: {
+        display: TypographyStyle & {
+            fontFamily?: string;
+        };
+        bodyLg: PentagramTypoBasicVariant;
+        bodyMd: PentagramTypoBasicVariant;
+        bodySm: PentagramTypoBasicVariant;
+        bodyXs: PentagramTypoBasicVariant;
+        bodyXxs: PentagramTypoBasicVariant;
+    };
+    control: {
+        button: Record<string, PentagramTypoControlSize>;
+        input: Record<string, PentagramTypoControlSize>;
+        checkbox: Record<string, PentagramTypoControlSize>;
+        tab: Record<string, PentagramTypoControlSize>;
+        radio: Record<string, PentagramTypoControlSize>;
+        segmentedItem?: Record<string, PentagramTypoControlSize>;
+        tag?: Record<string, PentagramTypoControlSize>;
+        toggleButton?: Record<string, PentagramTypoControlSize>;
+    };
+}
+/**
+ * Legacy Typography structure (themeContent.typo)
+ */
+interface LegacyTypo {
+    fontFamily: string;
+    core: {
+        h1: TypographyStyle;
+        h2: TypographyStyle;
+        h3: TypographyStyle;
+        h4: TypographyStyle;
+        bodyMd: TypographyStyle;
+        bodyMdAccent: TypographyStyle;
+        bodyLg: TypographyStyle;
+        bodyLgAccent: TypographyStyle;
+        paragraph: TypographyStyle;
+        label: TypographyStyle;
+        minor: TypographyStyle;
+        strong: TypographyStyle;
+    };
+    components: {
+        button: Record<string, TypographyStyle>;
+        input: Record<string, TypographyStyle>;
+        tab: Record<string, TypographyStyle>;
+        check: Record<string, TypographyStyle>;
+        label: Record<string, TypographyStyle>;
+    };
+}
+/**
+ * Maps Pentagram typography to legacy typography structure.
+ *
+ * @param pentagram - Pentagram typography (RESOLVED values, not aliases)
+ * @param fontFamily - Optional custom font family (defaults to GraphikLCWebUikit)
+ * @returns Legacy typography structure for themeContent.typo
+ *
+ * @example
+ * ```typescript
+ * // First resolve aliases
+ * const resolver = new PentagramResolver('desktop');
+ * const resolvedTypo = resolver.resolvePrimitives(themeContentPentagram.typo);
+ *
+ * // Then map to legacy
+ * const legacyTypo = mapPentagramTypoToLegacy(resolvedTypo);
+ * ```
+ */
+declare function mapPentagramTypoToLegacy(pentagram: PentagramTypo, fontFamily?: string): LegacyTypo;
+/**
+ * These legacy variables are DELETED in Pentagram and should NOT be mapped:
+ *
+ * - components.heading (sm/md/lg) — was uppercase labels, not used in PS4
+ * - components.fieldGroup (sm/md/lg) — never used in PS4
+ * - core.strong — never used in PS4
+ * - core.bodyLg — replaced by bodyLgAccent (only accent variant used)
+ *
+ * If PS4 code still references these variables, it will fall back to
+ * default CSS values from design-typography-variables.scss
+ */
+declare const DELETED_LEGACY_TYPO_VARS: readonly ["components.heading", "components.fieldGroup", "core.strong", "core.bodyLg"];
+
+/**
+ * Maps Pentagram Shape → Legacy Misc structure.
+ *
+ * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ *
+ * Pentagram has per-component, per-size shape tokens (button.xl.borderRadius, etc).
+ * Legacy misc has single borderRadius per component type (borderRadius.button).
+ *
+ * This mapper uses the "md" size as default for legacy compatibility.
+ *
+ * NOTE: This mapper expects RESOLVED values (px), not aliases like "radius/100".
+ * Use PentagramResolver to resolve aliases before calling this mapper.
+ */
+interface PentagramShapeSize {
+    borderRadius?: string;
+    borderWidth?: string;
+}
+interface PentagramShape {
+    button?: Record<string, PentagramShapeSize>;
+    checkbox?: Record<string, PentagramShapeSize>;
+    input?: Record<string, PentagramShapeSize>;
+    cell?: PentagramShapeSize;
+    modal?: PentagramShapeSize;
+    toast?: PentagramShapeSize;
+    segmentedItem?: Record<string, PentagramShapeSize>;
+    segmented?: Record<string, PentagramShapeSize>;
+    switch?: Record<string, PentagramShapeSize>;
+    knob?: Record<string, {
+        borderRadius?: string;
+    }>;
+    tabItem?: Record<string, PentagramShapeSize>;
+    tag?: Record<string, PentagramShapeSize>;
+    tagLabel?: {
+        borderRadius?: string;
+    };
+    tooltip?: Record<string, PentagramShapeSize>;
+    radio?: Record<string, PentagramShapeSize>;
+    contextMenu?: Record<string, PentagramShapeSize>;
+    avatar?: Record<string, PentagramShapeSize>;
+    toggleButtonGroup?: Record<string, PentagramShapeSize>;
+}
+interface LegacyMisc {
+    borderRadiusScale: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderWidth: string;
+    borderRadius: {
+        input: string;
+        button: string;
+        buttonIcon: string;
+        popup: string;
+        checkbox: string;
+        tag: string;
+    };
+    minWidth: {
+        button: string;
+    };
+}
+/**
+ * Maps Pentagram shape to legacy misc structure.
+ *
+ * @param pentagram - Pentagram shape (RESOLVED values, not aliases)
+ * @param existingMisc - Optional existing misc to merge with (preserves non-shape values)
+ * @returns Legacy misc structure for themeContent.misc
+ *
+ * @example
+ * ```typescript
+ * // First resolve aliases
+ * const resolver = new PentagramResolver('desktop');
+ * const resolvedShape = resolver.resolvePrimitives(themeContentPentagram.shape);
+ *
+ * // Then map to legacy
+ * const legacyMisc = mapPentagramShapeToLegacy(resolvedShape);
+ * ```
+ */
+declare function mapPentagramShapeToLegacy(pentagram: PentagramShape, existingMisc?: Partial<LegacyMisc>): LegacyMisc;
+/**
+ * If PS4 adopts per-size CSS variables (--shape-button-md-borderRadius),
+ * this function can generate them directly from Pentagram shape.
+ *
+ * This is for future use when PS4 migrates to granular shape tokens.
+ */
+declare function flattenPentagramShapeToVars(pentagram: PentagramShape): Record<string, string>;
+
+/**
+ * Orchestrator: maps full themeContentPentagram → legacy themeContent.
+ *
+ * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
+ */
+
+interface PentagramThemeContent {
+    colors: ThemeSchemeColors;
+    typo: PentagramTypo;
+    shape: PentagramShape;
+    shadows?: Shadows;
+}
+interface LegacyThemeContent {
+    colors: Colors$1<string>;
+    typo: LegacyTypo;
+    misc: LegacyMisc;
+    shadows?: Shadows;
+}
+/**
+ * Builds legacy `base` seed colors from Pentagram colors.
+ * See Variables mapping table → base.* section.
+ */
+declare function buildBaseColorsFromPentagram(colors: ThemeSchemeColors): BaseColors<string>;
+/**
+ * Maps full themeContentPentagram to legacy themeContent.
+ * Resolves typo/shape aliases to absolute values before mapping.
+ */
+declare function mapPentagramThemeToLegacy(pentagram: PentagramThemeContent, device?: Device): LegacyThemeContent;
+
+export { type BaseColors, type BaseColorsIndex, type ColorValue, type Colors$1 as Colors, type ComponentBaseColors$1 as ComponentBaseColors, DELETED_LEGACY_TYPO_VARS, type Device, type LegacyMisc, type LegacyThemeContent, type LegacyTypo, type Misc, type PentagramBaseColors, type PentagramBaseColorsHsl, PentagramResolver, type PentagramShape, type PentagramThemeContent, type PentagramTypo, type PresetName, type Shadows, type ShapePrimitives, type Size, type Theme, type ThemeFunctionType, type ThemeScheme, type ThemeSchemeColors, type ThemeVariant, type TypoPrimitives, type Typography, type TypographyStyle, base, baseDark, buildBaseColorsFromPentagram, createResolver, emails, emailsDark, emailsThemes, flattenPentagramShapeToVars, generateWithScheme, mapPentagramShapeToLegacy, mapPentagramThemeToLegacy, mapPentagramTypoToLegacy, mapThemeSchemeToLegacy, palettes, paystation4, paystation4Dark, paystation4Gaijin, paystation4Nexters, paystation4PentagramDark, paystation4PentagramDarkLegacyCompatible, paystation4PentagramLight, paystation4PentagramLightLegacyCompatible, paystation4Take2, paystation4Themes, pentagramDark, pentagramDarkScheme, pentagramLight, pentagramLightScheme, primaryPalette, publisherV2, publisherV2Dark, publisherV2Themes, resolveForDesktop, resolveForMobile, shapePrimitives, themeGenerator, themes, themesBaseColors, themesBaseColorsArray, themesColorsScheme, typoPrimitives };