@xsolla/switch-theme-customization 0.155.0 → 0.156.0-pr277.1779161117

package/index.d.mts

@@ -219,6 +219,276 @@ declare const themesBaseColorsArray: {
 declare const themesBaseColors: Record<string, BaseColors>;
 declare const themesColorsScheme: Record<string, (base: BaseColors) => void>;
 
+interface PentagramBaseColors {
+    content: Colord;
+    contentInverse: Colord;
+    background: Colord;
+    backgroundInverse: Colord;
+    brand: Colord;
+    brandExtra: Colord;
+    success: Colord;
+    warning: Colord;
+    alert: Colord;
+    neutral: Colord;
+    mono: Colord;
+    linkPrimary: Colord;
+    linkSecondary: Colord;
+    onBrand: Colord;
+    onBrandExtra: Colord;
+    onSuccess: Colord;
+    onWarning: Colord;
+    onAlert: Colord;
+    onNeutral: Colord;
+}
+interface ControlVariant {
+    bg: string;
+    bgHover: string;
+    bgPress: string;
+    border: string;
+    borderHover: string;
+    borderPress: string;
+}
+interface ControlVariantWithDisable extends ControlVariant {
+    bgDisable: string;
+    borderDisable: string;
+}
+interface ThemeScheme {
+    background: {
+        primary: string;
+        secondary: string;
+        brand: {
+            primary: string;
+            secondary: string;
+        };
+        brandExtra: {
+            primary: string;
+            secondary: string;
+        };
+        success: {
+            primary: string;
+            secondary: string;
+        };
+        warning: {
+            primary: string;
+            secondary: string;
+        };
+        alert: {
+            primary: string;
+            secondary: string;
+        };
+        neutral: {
+            primary: string;
+            secondary: string;
+        };
+        inverse: string;
+        static: {
+            light: string;
+            dark: string;
+        };
+    };
+    content: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        brand: {
+            primary: string;
+            secondary: string;
+        };
+        brandExtra: {
+            primary: string;
+            secondary: string;
+        };
+        success: {
+            primary: string;
+            secondary: string;
+        };
+        warning: {
+            primary: string;
+            secondary: string;
+        };
+        alert: {
+            primary: string;
+            secondary: string;
+        };
+        neutral: {
+            primary: string;
+            secondary: string;
+        };
+        inverse: string;
+        static: {
+            light: string;
+            dark: string;
+        };
+        on: {
+            brand: string;
+            brandExtra: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
+        };
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        inverse: string;
+        brand: string;
+        brandExtra: string;
+        success: string;
+        warning: string;
+        alert: string;
+        neutral: string;
+    };
+    overlay: {
+        mono: string;
+        brand: string;
+        brandExtra: string;
+        success: string;
+        warning: string;
+        alert: string;
+        neutral: string;
+    };
+    layer: {
+        scrim: string;
+        float: string;
+    };
+    control: {
+        brand: {
+            primary: ControlVariantWithDisable;
+            secondary: ControlVariant;
+            tertiary: ControlVariant;
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                disable: string;
+            };
+        };
+        mono: {
+            primary: ControlVariant;
+            secondary: ControlVariant;
+            tertiary: ControlVariant;
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+        brandExtra: {
+            primary: ControlVariant;
+            secondary: ControlVariant;
+            tertiary: ControlVariant;
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+        alert: {
+            bg: string;
+            border: string;
+            primary: ControlVariant;
+            secondary: ControlVariant;
+            tertiary: ControlVariant;
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: 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;
+            bgInactive: 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;
+        };
+        toggleButton: {
+            bg: string;
+            bgHover: string;
+            bgActive: string;
+            bgDisable: string;
+            border: string;
+            borderHover: string;
+            borderActive: string;
+            borderDisable: string;
+            text: string;
+            textActive: string;
+            textDisable: string;
+        };
+    };
+}
+type PresetName = string;
+
+declare const baseDark: PentagramBaseColors;
+declare const createDarkScheme: (b: PentagramBaseColors) => ThemeScheme;
+declare const payStationDarkScheme: ThemeScheme;
+
+declare const base: PentagramBaseColors;
+declare const createScheme: (b: PentagramBaseColors) => ThemeScheme;
+declare const payStationScheme: ThemeScheme;
+
 declare const themes: Record<string, Theme>;
 
 declare const palettes: {
@@ -1671,13 +1941,27 @@ interface ThemeGenerateType {
     globalStyle?: GlobalStyles;
 }
 
+declare const pentagramColorsScheme: Record<string, (b: PentagramBaseColors) => ThemeScheme>;
+type PentagramSchemeName = keyof typeof pentagramColorsScheme;
 type ThemeFunctionType = {
     schemeName: string;
     baseColors?: BaseColors;
     customParams?: ThemeGenerateType;
     parentTheme?: Theme;
 };
-declare const generateWithScheme: ({ schemeName, baseColors, parentTheme }: ThemeFunctionType) => Theme & void;
-declare const themeGenerator: (props: ThemeFunctionType) => Theme;
+declare const generateWithScheme: ({ schemeName, baseColors, parentTheme, }: ThemeFunctionType) => Theme & void;
+/**
+ * Supports two theme generation systems via overloads:
+ * - Legacy (Switch-based): accepts old BaseColors (10 tokens), returns Theme with typo/misc/shadows
+ * - Pentagram: accepts PentagramBaseColors (19 tokens), returns flat ThemeScheme
+ *
+ * Overloads allow product-themes to call themeGenerator with a unified API —
+ * only schemeName and baseColors change, return type is inferred automatically.
+ */
+declare function themeGenerator(props: {
+    schemeName: PentagramSchemeName;
+    baseColors?: PentagramBaseColors;
+}): 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 Shadows, type Size, type Theme, type ThemeFunctionType, type ThemeVariant, type Typography, emails, emailsDark, emailsThemes, generateWithScheme, palettes, paystation4, paystation4Dark, paystation4Gaijin, paystation4Nexters, paystation4Take2, paystation4Themes, primaryPalette, publisherV2, publisherV2Dark, publisherV2Themes, themeGenerator, themes, themesBaseColors, themesBaseColorsArray, themesColorsScheme };
+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 };

package/index.d.ts

@@ -219,6 +219,276 @@ declare const themesBaseColorsArray: {
 declare const themesBaseColors: Record<string, BaseColors>;
 declare const themesColorsScheme: Record<string, (base: BaseColors) => void>;
 
+interface PentagramBaseColors {
+    content: Colord;
+    contentInverse: Colord;
+    background: Colord;
+    backgroundInverse: Colord;
+    brand: Colord;
+    brandExtra: Colord;
+    success: Colord;
+    warning: Colord;
+    alert: Colord;
+    neutral: Colord;
+    mono: Colord;
+    linkPrimary: Colord;
+    linkSecondary: Colord;
+    onBrand: Colord;
+    onBrandExtra: Colord;
+    onSuccess: Colord;
+    onWarning: Colord;
+    onAlert: Colord;
+    onNeutral: Colord;
+}
+interface ControlVariant {
+    bg: string;
+    bgHover: string;
+    bgPress: string;
+    border: string;
+    borderHover: string;
+    borderPress: string;
+}
+interface ControlVariantWithDisable extends ControlVariant {
+    bgDisable: string;
+    borderDisable: string;
+}
+interface ThemeScheme {
+    background: {
+        primary: string;
+        secondary: string;
+        brand: {
+            primary: string;
+            secondary: string;
+        };
+        brandExtra: {
+            primary: string;
+            secondary: string;
+        };
+        success: {
+            primary: string;
+            secondary: string;
+        };
+        warning: {
+            primary: string;
+            secondary: string;
+        };
+        alert: {
+            primary: string;
+            secondary: string;
+        };
+        neutral: {
+            primary: string;
+            secondary: string;
+        };
+        inverse: string;
+        static: {
+            light: string;
+            dark: string;
+        };
+    };
+    content: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        brand: {
+            primary: string;
+            secondary: string;
+        };
+        brandExtra: {
+            primary: string;
+            secondary: string;
+        };
+        success: {
+            primary: string;
+            secondary: string;
+        };
+        warning: {
+            primary: string;
+            secondary: string;
+        };
+        alert: {
+            primary: string;
+            secondary: string;
+        };
+        neutral: {
+            primary: string;
+            secondary: string;
+        };
+        inverse: string;
+        static: {
+            light: string;
+            dark: string;
+        };
+        on: {
+            brand: string;
+            brandExtra: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
+        };
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        inverse: string;
+        brand: string;
+        brandExtra: string;
+        success: string;
+        warning: string;
+        alert: string;
+        neutral: string;
+    };
+    overlay: {
+        mono: string;
+        brand: string;
+        brandExtra: string;
+        success: string;
+        warning: string;
+        alert: string;
+        neutral: string;
+    };
+    layer: {
+        scrim: string;
+        float: string;
+    };
+    control: {
+        brand: {
+            primary: ControlVariantWithDisable;
+            secondary: ControlVariant;
+            tertiary: ControlVariant;
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+                disable: string;
+            };
+        };
+        mono: {
+            primary: ControlVariant;
+            secondary: ControlVariant;
+            tertiary: ControlVariant;
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+        brandExtra: {
+            primary: ControlVariant;
+            secondary: ControlVariant;
+            tertiary: ControlVariant;
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+        alert: {
+            bg: string;
+            border: string;
+            primary: ControlVariant;
+            secondary: ControlVariant;
+            tertiary: ControlVariant;
+            text: {
+                primary: string;
+                secondary: string;
+                tertiary: 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;
+            bgInactive: 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;
+        };
+        toggleButton: {
+            bg: string;
+            bgHover: string;
+            bgActive: string;
+            bgDisable: string;
+            border: string;
+            borderHover: string;
+            borderActive: string;
+            borderDisable: string;
+            text: string;
+            textActive: string;
+            textDisable: string;
+        };
+    };
+}
+type PresetName = string;
+
+declare const baseDark: PentagramBaseColors;
+declare const createDarkScheme: (b: PentagramBaseColors) => ThemeScheme;
+declare const payStationDarkScheme: ThemeScheme;
+
+declare const base: PentagramBaseColors;
+declare const createScheme: (b: PentagramBaseColors) => ThemeScheme;
+declare const payStationScheme: ThemeScheme;
+
 declare const themes: Record<string, Theme>;
 
 declare const palettes: {
@@ -1671,13 +1941,27 @@ interface ThemeGenerateType {
     globalStyle?: GlobalStyles;
 }
 
+declare const pentagramColorsScheme: Record<string, (b: PentagramBaseColors) => ThemeScheme>;
+type PentagramSchemeName = keyof typeof pentagramColorsScheme;
 type ThemeFunctionType = {
     schemeName: string;
     baseColors?: BaseColors;
     customParams?: ThemeGenerateType;
     parentTheme?: Theme;
 };
-declare const generateWithScheme: ({ schemeName, baseColors, parentTheme }: ThemeFunctionType) => Theme & void;
-declare const themeGenerator: (props: ThemeFunctionType) => Theme;
+declare const generateWithScheme: ({ schemeName, baseColors, parentTheme, }: ThemeFunctionType) => Theme & void;
+/**
+ * Supports two theme generation systems via overloads:
+ * - Legacy (Switch-based): accepts old BaseColors (10 tokens), returns Theme with typo/misc/shadows
+ * - Pentagram: accepts PentagramBaseColors (19 tokens), returns flat ThemeScheme
+ *
+ * Overloads allow product-themes to call themeGenerator with a unified API —
+ * only schemeName and baseColors change, return type is inferred automatically.
+ */
+declare function themeGenerator(props: {
+    schemeName: PentagramSchemeName;
+    baseColors?: PentagramBaseColors;
+}): 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 Shadows, type Size, type Theme, type ThemeFunctionType, type ThemeVariant, type Typography, emails, emailsDark, emailsThemes, generateWithScheme, palettes, paystation4, paystation4Dark, paystation4Gaijin, paystation4Nexters, paystation4Take2, paystation4Themes, primaryPalette, publisherV2, publisherV2Dark, publisherV2Themes, themeGenerator, themes, themesBaseColors, themesBaseColorsArray, themesColorsScheme };
+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 };