@xsolla/switch-theme-customization 0.187.3 → 0.188.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.d.ts CHANGED
@@ -171,7 +171,7 @@ interface Typography {
171
171
  };
172
172
  }
173
173
 
174
- interface PentagramBaseColors {
174
+ interface XuiBaseColors {
175
175
  content: Colord;
176
176
  contentInverse: Colord;
177
177
  background: Colord;
@@ -192,8 +192,8 @@ interface PentagramBaseColors {
192
192
  onAlert: Colord;
193
193
  onNeutral: Colord;
194
194
  }
195
- type PentagramBaseColorsHsl = {
196
- [K in keyof PentagramBaseColors]: string;
195
+ type XuiBaseColorsHsl = {
196
+ [K in keyof XuiBaseColors]: string;
197
197
  };
198
198
  interface ControlVariant {
199
199
  bg: string;
@@ -208,7 +208,7 @@ interface ControlVariantWithDisable extends ControlVariant {
208
208
  borderDisable: string;
209
209
  }
210
210
  interface ThemeScheme {
211
- base: PentagramBaseColorsHsl;
211
+ base: XuiBaseColorsHsl;
212
212
  background: {
213
213
  primary: string;
214
214
  secondary: string;
@@ -440,46 +440,52 @@ interface ThemeScheme {
440
440
  };
441
441
  }
442
442
  type PresetName = string;
443
- /** Canonical pentagram colors in DB / themeContentPentagram (scheme output without seed `base`). */
443
+ /** Canonical XUI colors in DB / themeContentXui (scheme output without seed `base`). */
444
444
  type ThemeSchemeColors = Omit<ThemeScheme, "base">;
445
445
 
446
446
  var heading = {
447
447
  h1: {
448
- fontSize: "450",
449
- lineHeight: "display/450",
448
+ fontFamily: "font-family/display",
449
+ fontSize: "font-size/450",
450
+ lineHeight: "line-height-display/450",
450
451
  fontWeight: 700
451
452
  },
452
453
  h2: {
453
- fontSize: "350",
454
- lineHeight: "display/350",
454
+ fontFamily: "font-family/display",
455
+ fontSize: "font-size/350",
456
+ lineHeight: "line-height-display/350",
455
457
  fontWeight: 700
456
458
  },
457
459
  h3: {
458
- fontSize: "300",
459
- lineHeight: "display/300",
460
+ fontFamily: "font-family/display",
461
+ fontSize: "font-size/300",
462
+ lineHeight: "line-height-display/300",
460
463
  fontWeight: 700
461
464
  },
462
465
  h4: {
463
- fontSize: "250",
464
- lineHeight: "display/250",
466
+ fontFamily: "font-family/display",
467
+ fontSize: "font-size/250",
468
+ lineHeight: "line-height-display/250",
465
469
  fontWeight: 700
466
470
  },
467
471
  h5: {
468
- fontSize: "200",
469
- lineHeight: "display/200",
472
+ fontFamily: "font-family/display",
473
+ fontSize: "font-size/200",
474
+ lineHeight: "line-height-display/200",
470
475
  fontWeight: 700
471
476
  }
472
477
  };
473
478
  var basic = {
474
479
  display: {
475
- fontFamily: "compact",
476
- fontSize: "300",
477
- lineHeight: "compact/300",
480
+ fontFamily: "font-family/compact",
481
+ fontSize: "font-size/300",
482
+ lineHeight: "line-height-compact/300",
478
483
  fontWeight: 500
479
484
  },
480
485
  bodyLg: {
481
- fontSize: "175",
482
- lineHeight: "compact/175",
486
+ fontFamily: "font-family/compact",
487
+ fontSize: "font-size/175",
488
+ lineHeight: "line-height-compact/175",
483
489
  "default": {
484
490
  fontWeight: 400
485
491
  },
@@ -488,12 +494,13 @@ var basic = {
488
494
  },
489
495
  paragraph: {
490
496
  spacing: "spacing/250",
491
- lineHeight: "text/175"
497
+ lineHeight: "line-height-text/175"
492
498
  }
493
499
  },
494
500
  bodyMd: {
495
- fontSize: "150",
496
- lineHeight: "compact/150",
501
+ fontFamily: "font-family/compact",
502
+ fontSize: "font-size/150",
503
+ lineHeight: "line-height-compact/150",
497
504
  "default": {
498
505
  fontWeight: 400
499
506
  },
@@ -502,12 +509,13 @@ var basic = {
502
509
  },
503
510
  paragraph: {
504
511
  spacing: "spacing/200",
505
- lineHeight: "text/150"
512
+ lineHeight: "line-height-text/150"
506
513
  }
507
514
  },
508
515
  bodySm: {
509
- fontSize: "125",
510
- lineHeight: "compact/125",
516
+ fontFamily: "font-family/compact",
517
+ fontSize: "font-size/125",
518
+ lineHeight: "line-height-compact/125",
511
519
  "default": {
512
520
  fontWeight: 400
513
521
  },
@@ -516,12 +524,13 @@ var basic = {
516
524
  },
517
525
  paragraph: {
518
526
  spacing: "spacing/150",
519
- lineHeight: "text/125"
527
+ lineHeight: "line-height-text/125"
520
528
  }
521
529
  },
522
530
  bodyXs: {
523
- fontSize: "100",
524
- lineHeight: "compact/100",
531
+ fontFamily: "font-family/compact",
532
+ fontSize: "font-size/100",
533
+ lineHeight: "line-height-compact/100",
525
534
  "default": {
526
535
  fontWeight: 400
527
536
  },
@@ -530,12 +539,13 @@ var basic = {
530
539
  },
531
540
  paragraph: {
532
541
  spacing: "spacing/100",
533
- lineHeight: "text/100"
542
+ lineHeight: "line-height-text/100"
534
543
  }
535
544
  },
536
545
  bodyXxs: {
537
- fontSize: "75",
538
- lineHeight: "compact/75",
546
+ fontFamily: "font-family/compact",
547
+ fontSize: "font-size/75",
548
+ lineHeight: "line-height-compact/75",
539
549
  "default": {
540
550
  fontWeight: 400
541
551
  },
@@ -544,136 +554,173 @@ var basic = {
544
554
  },
545
555
  paragraph: {
546
556
  spacing: "spacing/75",
547
- lineHeight: "text/75"
557
+ lineHeight: "line-height-text/75"
548
558
  }
549
559
  }
550
560
  };
551
561
  var control = {
552
562
  button: {
553
563
  xl: {
554
- scale: "600"
564
+ fontSize: "component-scale-font-size/600",
565
+ lineHeight: "component-scale-line-height/600"
555
566
  },
556
567
  lg: {
557
- scale: "500"
568
+ fontSize: "component-scale-font-size/500",
569
+ lineHeight: "component-scale-line-height/500"
558
570
  },
559
571
  md: {
560
- scale: "400"
572
+ fontSize: "component-scale-font-size/400",
573
+ lineHeight: "component-scale-line-height/400"
561
574
  },
562
575
  sm: {
563
- scale: "300"
576
+ fontSize: "component-scale-font-size/300",
577
+ lineHeight: "component-scale-line-height/300"
564
578
  },
565
579
  xs: {
566
- scale: "200"
580
+ fontSize: "component-scale-font-size/200",
581
+ lineHeight: "component-scale-line-height/200"
567
582
  }
568
583
  },
569
584
  input: {
570
585
  xl: {
571
- scale: "600"
586
+ fontSize: "component-scale-font-size/600",
587
+ lineHeight: "component-scale-line-height/600"
572
588
  },
573
589
  lg: {
574
- scale: "500"
590
+ fontSize: "component-scale-font-size/500",
591
+ lineHeight: "component-scale-line-height/500"
575
592
  },
576
593
  md: {
577
- scale: "400"
594
+ fontSize: "component-scale-font-size/400",
595
+ lineHeight: "component-scale-line-height/400"
578
596
  },
579
597
  sm: {
580
- scale: "300"
598
+ fontSize: "component-scale-font-size/300",
599
+ lineHeight: "component-scale-line-height/300"
581
600
  },
582
601
  xs: {
583
- scale: "200"
602
+ fontSize: "component-scale-font-size/200",
603
+ lineHeight: "component-scale-line-height/200"
584
604
  }
585
605
  },
586
606
  checkbox: {
587
607
  xl: {
588
- scale: "600"
608
+ fontSize: "component-scale-font-size/600",
609
+ lineHeight: "component-scale-line-height/600"
589
610
  },
590
611
  lg: {
591
- scale: "500"
612
+ fontSize: "component-scale-font-size/500",
613
+ lineHeight: "component-scale-line-height/500"
592
614
  },
593
615
  md: {
594
- scale: "400"
616
+ fontSize: "component-scale-font-size/400",
617
+ lineHeight: "component-scale-line-height/400"
595
618
  },
596
619
  sm: {
597
- scale: "300"
620
+ fontSize: "component-scale-font-size/300",
621
+ lineHeight: "component-scale-line-height/300"
598
622
  }
599
623
  },
600
624
  tab: {
601
625
  xl: {
602
- scale: "600"
626
+ fontSize: "component-scale-font-size/600",
627
+ lineHeight: "component-scale-line-height/600"
603
628
  },
604
629
  lg: {
605
- scale: "500"
630
+ fontSize: "component-scale-font-size/500",
631
+ lineHeight: "component-scale-line-height/500"
606
632
  },
607
633
  md: {
608
- scale: "400"
634
+ fontSize: "component-scale-font-size/400",
635
+ lineHeight: "component-scale-line-height/400"
609
636
  },
610
637
  sm: {
611
- scale: "300"
638
+ fontSize: "component-scale-font-size/300",
639
+ lineHeight: "component-scale-line-height/300"
612
640
  },
613
641
  xs: {
614
- scale: "300"
642
+ fontSize: "component-scale-font-size/300",
643
+ lineHeight: "component-scale-line-height/300"
615
644
  }
616
645
  },
617
646
  radio: {
618
647
  xl: {
619
- scale: "600"
648
+ fontSize: "component-scale-font-size/600",
649
+ lineHeight: "component-scale-line-height/600"
620
650
  },
621
651
  lg: {
622
- scale: "500"
652
+ fontSize: "component-scale-font-size/500",
653
+ lineHeight: "component-scale-line-height/500"
623
654
  },
624
655
  md: {
625
- scale: "400"
656
+ fontSize: "component-scale-font-size/400",
657
+ lineHeight: "component-scale-line-height/400"
626
658
  },
627
659
  sm: {
628
- scale: "300"
660
+ fontSize: "component-scale-font-size/300",
661
+ lineHeight: "component-scale-line-height/300"
629
662
  }
630
663
  },
631
664
  segmentedItem: {
632
665
  xl: {
633
- scale: "500"
666
+ fontSize: "component-scale-font-size/500",
667
+ lineHeight: "component-scale-line-height/500"
634
668
  },
635
669
  lg: {
636
- scale: "400"
670
+ fontSize: "component-scale-font-size/400",
671
+ lineHeight: "component-scale-line-height/400"
637
672
  },
638
673
  md: {
639
- scale: "300"
674
+ fontSize: "component-scale-font-size/300",
675
+ lineHeight: "component-scale-line-height/300"
640
676
  },
641
677
  sm: {
642
- scale: "200"
678
+ fontSize: "component-scale-font-size/200",
679
+ lineHeight: "component-scale-line-height/200"
643
680
  }
644
681
  },
645
682
  tag: {
646
683
  xl: {
647
- scale: "600"
684
+ fontSize: "component-scale-font-size/600",
685
+ lineHeight: "component-scale-line-height/600"
648
686
  },
649
687
  lg: {
650
- scale: "500"
688
+ fontSize: "component-scale-font-size/500",
689
+ lineHeight: "component-scale-line-height/500"
651
690
  },
652
691
  md: {
653
- scale: "400"
692
+ fontSize: "component-scale-font-size/400",
693
+ lineHeight: "component-scale-line-height/400"
654
694
  },
655
695
  sm: {
656
- scale: "300"
696
+ fontSize: "component-scale-font-size/300",
697
+ lineHeight: "component-scale-line-height/300"
657
698
  },
658
699
  xs: {
659
- scale: "200"
700
+ fontSize: "component-scale-font-size/200",
701
+ lineHeight: "component-scale-line-height/200"
660
702
  }
661
703
  },
662
704
  toggleButton: {
663
705
  xl: {
664
- scale: "600"
706
+ fontSize: "component-scale-font-size/600",
707
+ lineHeight: "component-scale-line-height/600"
665
708
  },
666
709
  lg: {
667
- scale: "500"
710
+ fontSize: "component-scale-font-size/500",
711
+ lineHeight: "component-scale-line-height/500"
668
712
  },
669
713
  md: {
670
- scale: "400"
714
+ fontSize: "component-scale-font-size/400",
715
+ lineHeight: "component-scale-line-height/400"
671
716
  },
672
717
  sm: {
673
- scale: "300"
718
+ fontSize: "component-scale-font-size/300",
719
+ lineHeight: "component-scale-line-height/300"
674
720
  },
675
721
  xs: {
676
- scale: "200"
722
+ fontSize: "component-scale-font-size/200",
723
+ lineHeight: "component-scale-line-height/200"
677
724
  }
678
725
  }
679
726
  };
@@ -980,7 +1027,7 @@ var shapePrimitives = {
980
1027
  type TypoPrimitives = typeof typoPrimitives;
981
1028
  type ShapePrimitives = typeof shapePrimitives;
982
1029
 
983
- type GlobalStyles = "switch" | "brand" | "publisherV2" | "influencerAccount" | "lightstream" | "pentagram";
1030
+ type GlobalStyles = "switch" | "brand" | "publisherV2" | "influencerAccount" | "lightstream" | "xui";
984
1031
  interface Theme {
985
1032
  colors: Colors$1<string>;
986
1033
  typo: Typography;
@@ -990,11 +1037,11 @@ interface Theme {
990
1037
  typoTablet?: Typography;
991
1038
  globalStyle?: GlobalStyles;
992
1039
  }
993
- interface PentagramTheme {
994
- colors: ThemeScheme;
995
- typo: TypoPrimitives;
1040
+ interface XuiTheme {
1041
+ color: ThemeScheme;
1042
+ text: TypoPrimitives;
996
1043
  shape: ShapePrimitives;
997
- shadows: Shadows;
1044
+ shadow: Shadows;
998
1045
  globalStyle?: GlobalStyles;
999
1046
  }
1000
1047
  type ThemeVariant = Pick<Theme, "colors">;
@@ -1038,33 +1085,33 @@ declare const themesColorsScheme: Record<string, (base: BaseColors) => void>;
1038
1085
  /**
1039
1086
  * Mapped LIGHT scheme from new to old set of variables
1040
1087
  */
1041
- declare const paystation4PentagramLightLegacyCompatible: Theme;
1088
+ declare const paystationXuiLightLegacyCompatible: Theme;
1042
1089
  /**
1043
1090
  * Mapped DARK scheme from new to old set of variables
1044
1091
  */
1045
- declare const paystation4PentagramDarkLegacyCompatible: Theme;
1046
- declare const paystation4PentagramLight: PentagramTheme;
1047
- declare const paystation4PentagramDark: PentagramTheme;
1092
+ declare const paystationXuiDarkLegacyCompatible: Theme;
1093
+ declare const paystationXuiLight: XuiTheme;
1094
+ declare const paystationXuiDark: XuiTheme;
1048
1095
 
1049
- declare const baseDark: PentagramBaseColors;
1050
- declare const pentagramDarkScheme: (b: PentagramBaseColors) => ThemeScheme;
1051
- declare const pentagramDark: ThemeScheme;
1096
+ declare const baseDark: XuiBaseColors;
1097
+ declare const xuiDarkScheme: (b: XuiBaseColors) => ThemeScheme;
1098
+ declare const xuiDark: ThemeScheme;
1052
1099
 
1053
- declare const base: PentagramBaseColors;
1054
- declare const pentagramLightScheme: (b: PentagramBaseColors) => ThemeScheme;
1055
- declare const pentagramLight: ThemeScheme;
1100
+ declare const base: XuiBaseColors;
1101
+ declare const xuiLightScheme: (b: XuiBaseColors) => ThemeScheme;
1102
+ declare const xuiLight: ThemeScheme;
1056
1103
 
1057
1104
  /**
1058
- * Maps Pentagram colors → legacy Switch Colors structure.
1105
+ * Maps XUI colors → legacy Switch Colors structure.
1059
1106
  *
1060
- * Converts `themeContentPentagram.colors` (nested ThemeSchemeColors)
1107
+ * Converts `themeContentXui.colors` (nested ThemeSchemeColors)
1061
1108
  * to the legacy format so products on the old variable set keep working.
1062
1109
  *
1063
1110
  * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
1064
1111
  */
1065
1112
 
1066
1113
  /**
1067
- * @param colors Pentagram colors from DB or generated scheme (without seed `base`)
1114
+ * @param colors XUI colors from DB or generated scheme (without seed `base`)
1068
1115
  * @returns Legacy colors without `base` (seed colors are added separately)
1069
1116
  */
1070
1117
  declare function mapThemeSchemeToLegacy(colors: ThemeSchemeColors): Pick<Colors$1<string>, "core" | "control">;
@@ -2521,8 +2568,8 @@ interface ThemeGenerateType {
2521
2568
  globalStyle?: GlobalStyles;
2522
2569
  }
2523
2570
 
2524
- declare const pentagramColorsScheme: Record<string, (b: PentagramBaseColors) => ThemeScheme>;
2525
- type PentagramSchemeName = keyof typeof pentagramColorsScheme;
2571
+ declare const xuiColorsScheme: Record<string, (b: XuiBaseColors) => ThemeScheme>;
2572
+ type XuiSchemeName = keyof typeof xuiColorsScheme;
2526
2573
  type ThemeFunctionType = {
2527
2574
  schemeName: string;
2528
2575
  baseColors?: BaseColors;
@@ -2533,35 +2580,35 @@ declare const generateWithScheme: ({ schemeName, baseColors, parentTheme, }: The
2533
2580
  /**
2534
2581
  * Supports two theme generation systems via overloads:
2535
2582
  * - Legacy (Switch-based): accepts old BaseColors (10 tokens), returns Theme with typo/misc/shadows
2536
- * - Pentagram: accepts PentagramBaseColors (19 tokens), returns flat ThemeScheme
2583
+ * - XUI: accepts XuiBaseColors (19 tokens), returns flat ThemeScheme
2537
2584
  *
2538
2585
  * Overloads allow product-themes to call themeGenerator with a unified API —
2539
2586
  * only schemeName and baseColors change, return type is inferred automatically.
2540
2587
  */
2541
2588
  declare function themeGenerator(props: {
2542
- schemeName: PentagramSchemeName;
2543
- baseColors?: PentagramBaseColors;
2589
+ schemeName: XuiSchemeName;
2590
+ baseColors?: XuiBaseColors;
2544
2591
  }): ThemeScheme;
2545
2592
  declare function themeGenerator(props: ThemeFunctionType): Theme;
2546
2593
 
2547
2594
  /**
2548
- * Resolves Pentagram design token aliases to concrete CSS values.
2595
+ * Resolves XUI design token aliases to concrete CSS values.
2549
2596
  *
2550
2597
  * Source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
2551
2598
  * Scale tables: see FONT_SIZE_SCALE and LINE_HEIGHT_* constants below.
2552
2599
  *
2553
2600
  * This resolver converts aliases like "font-size/300" → "28px" (desktop) or "24px" (mobile).
2554
- * It is used BEFORE the mappers (mapPentagramTypoToLegacy, mapPentagramShapeToLegacy).
2601
+ * It is used BEFORE the mappers (mapXuiTypoToLegacy, mapXuiShapeToLegacy).
2555
2602
  *
2556
2603
  * @example
2557
2604
  * ```typescript
2558
- * const resolver = new PentagramResolver('desktop');
2559
- * const resolvedTypo = resolver.resolvePrimitives(themeContentPentagram.typo);
2560
- * const legacyTypo = mapPentagramTypoToLegacy(resolvedTypo);
2605
+ * const resolver = new XuiResolver('desktop');
2606
+ * const resolvedTypo = resolver.resolvePrimitives(themeContentXui.typo);
2607
+ * const legacyTypo = mapXuiTypoToLegacy(resolvedTypo);
2561
2608
  * ```
2562
2609
  */
2563
2610
  type Device = "desktop" | "mobile";
2564
- declare class PentagramResolver {
2611
+ declare class XuiResolver {
2565
2612
  private device;
2566
2613
  constructor(device?: Device);
2567
2614
  setDevice(device: Device): void;
@@ -2589,40 +2636,40 @@ declare class PentagramResolver {
2589
2636
  * Create a resolver for the given device.
2590
2637
  *
2591
2638
  * @param device - 'desktop' (default) or 'mobile'
2592
- * @returns PentagramResolver instance
2639
+ * @returns XuiResolver instance
2593
2640
  *
2594
2641
  * @example
2595
2642
  * ```typescript
2596
2643
  * const resolver = createResolver('desktop');
2597
- * const resolved = resolver.resolvePrimitives(pentagramTypo);
2644
+ * const resolved = resolver.resolvePrimitives(xuiTypo);
2598
2645
  * ```
2599
2646
  */
2600
- declare function createResolver(device?: Device): PentagramResolver;
2647
+ declare function createResolver(device?: Device): XuiResolver;
2601
2648
  /**
2602
- * Resolve all aliases in a Pentagram primitives object for desktop device.
2649
+ * Resolve all aliases in an XUI primitives object for desktop device.
2603
2650
  * Convenience function for the most common case.
2604
2651
  *
2605
2652
  * @example
2606
2653
  * ```typescript
2607
- * const resolvedTypo = resolveForDesktop(themeContentPentagram.typo);
2654
+ * const resolvedTypo = resolveForDesktop(themeContentXui.typo);
2608
2655
  * ```
2609
2656
  */
2610
2657
  declare function resolveForDesktop<T>(obj: T): T;
2611
2658
  /**
2612
- * Resolve all aliases in a Pentagram primitives object for mobile device.
2659
+ * Resolve all aliases in an XUI primitives object for mobile device.
2613
2660
  */
2614
2661
  declare function resolveForMobile<T>(obj: T): T;
2615
2662
 
2616
2663
  /**
2617
- * Maps Pentagram Typography → Legacy Typography structure.
2664
+ * Maps XUI Typography → Legacy Typography structure.
2618
2665
  *
2619
2666
  * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
2620
2667
  *
2621
- * Used for themes that have themeContentPentagram.typo (new set).
2668
+ * Used for themes that have themeContentXui.typo (new set).
2622
2669
  * Converts to themeContent.typo (old set) so that Pay Station 4 keeps working.
2623
2670
  *
2624
2671
  * NOTE: This mapper expects RESOLVED values (px), not aliases like "font-size/300".
2625
- * Use PentagramResolver to resolve aliases before calling this mapper.
2672
+ * Use XuiResolver to resolve aliases before calling this mapper.
2626
2673
  */
2627
2674
  interface TypographyStyle {
2628
2675
  fontSize: string;
@@ -2631,7 +2678,8 @@ interface TypographyStyle {
2631
2678
  textTransform?: string;
2632
2679
  [key: string]: string | number | undefined;
2633
2680
  }
2634
- interface PentagramTypoBasicVariant {
2681
+ interface XuiTypoBasicVariant {
2682
+ fontFamily?: string;
2635
2683
  fontSize: string;
2636
2684
  lineHeight: string;
2637
2685
  default?: {
@@ -2645,12 +2693,12 @@ interface PentagramTypoBasicVariant {
2645
2693
  lineHeight?: string;
2646
2694
  };
2647
2695
  }
2648
- /** Resolved control size (after PentagramResolver expands `{ scale: "400" }`). */
2649
- type PentagramTypoControlSize = Pick<TypographyStyle, "fontSize" | "lineHeight">;
2696
+ /** Resolved control size (after XuiResolver expands `{ scale: "400" }`). */
2697
+ type XuiTypoControlSize = Pick<TypographyStyle, "fontSize" | "lineHeight">;
2650
2698
  /**
2651
- * Pentagram Typography structure (from themeContentPentagram.typo)
2699
+ * XUI typography structure (from themeContentXui.typo)
2652
2700
  */
2653
- interface PentagramTypo {
2701
+ interface XuiTypo {
2654
2702
  heading: {
2655
2703
  h1: TypographyStyle;
2656
2704
  h2: TypographyStyle;
@@ -2662,21 +2710,21 @@ interface PentagramTypo {
2662
2710
  display: TypographyStyle & {
2663
2711
  fontFamily?: string;
2664
2712
  };
2665
- bodyLg: PentagramTypoBasicVariant;
2666
- bodyMd: PentagramTypoBasicVariant;
2667
- bodySm: PentagramTypoBasicVariant;
2668
- bodyXs: PentagramTypoBasicVariant;
2669
- bodyXxs: PentagramTypoBasicVariant;
2713
+ bodyLg: XuiTypoBasicVariant;
2714
+ bodyMd: XuiTypoBasicVariant;
2715
+ bodySm: XuiTypoBasicVariant;
2716
+ bodyXs: XuiTypoBasicVariant;
2717
+ bodyXxs: XuiTypoBasicVariant;
2670
2718
  };
2671
2719
  control: {
2672
- button: Record<string, PentagramTypoControlSize>;
2673
- input: Record<string, PentagramTypoControlSize>;
2674
- checkbox: Record<string, PentagramTypoControlSize>;
2675
- tab: Record<string, PentagramTypoControlSize>;
2676
- radio: Record<string, PentagramTypoControlSize>;
2677
- segmentedItem?: Record<string, PentagramTypoControlSize>;
2678
- tag?: Record<string, PentagramTypoControlSize>;
2679
- toggleButton?: Record<string, PentagramTypoControlSize>;
2720
+ button: Record<string, XuiTypoControlSize>;
2721
+ input: Record<string, XuiTypoControlSize>;
2722
+ checkbox: Record<string, XuiTypoControlSize>;
2723
+ tab: Record<string, XuiTypoControlSize>;
2724
+ radio: Record<string, XuiTypoControlSize>;
2725
+ segmentedItem?: Record<string, XuiTypoControlSize>;
2726
+ tag?: Record<string, XuiTypoControlSize>;
2727
+ toggleButton?: Record<string, XuiTypoControlSize>;
2680
2728
  };
2681
2729
  }
2682
2730
  /**
@@ -2707,25 +2755,25 @@ interface LegacyTypo {
2707
2755
  };
2708
2756
  }
2709
2757
  /**
2710
- * Maps Pentagram typography to legacy typography structure.
2758
+ * Maps XUI typography to legacy typography structure.
2711
2759
  *
2712
- * @param pentagram - Pentagram typography (RESOLVED values, not aliases)
2760
+ * @param xui - XUI typography (RESOLVED values, not aliases)
2713
2761
  * @param fontFamily - Optional custom font family (defaults to GraphikLCWebUikit)
2714
2762
  * @returns Legacy typography structure for themeContent.typo
2715
2763
  *
2716
2764
  * @example
2717
2765
  * ```typescript
2718
2766
  * // First resolve aliases
2719
- * const resolver = new PentagramResolver('desktop');
2720
- * const resolvedTypo = resolver.resolvePrimitives(themeContentPentagram.typo);
2767
+ * const resolver = new XuiResolver('desktop');
2768
+ * const resolvedTypo = resolver.resolvePrimitives(themeContentXui.typo);
2721
2769
  *
2722
2770
  * // Then map to legacy
2723
- * const legacyTypo = mapPentagramTypoToLegacy(resolvedTypo);
2771
+ * const legacyTypo = mapXuiTypoToLegacy(resolvedTypo);
2724
2772
  * ```
2725
2773
  */
2726
- declare function mapPentagramTypoToLegacy(pentagram: PentagramTypo, fontFamily?: string): LegacyTypo;
2774
+ declare function mapXuiTypoToLegacy(xui: XuiTypo, fontFamily?: string): LegacyTypo;
2727
2775
  /**
2728
- * These legacy variables are DELETED in Pentagram and should NOT be mapped:
2776
+ * These legacy variables are DELETED in XUI and should NOT be mapped:
2729
2777
  *
2730
2778
  * - components.heading (sm/md/lg) — was uppercase labels, not used in PS4
2731
2779
  * - components.fieldGroup (sm/md/lg) — never used in PS4
@@ -2738,45 +2786,45 @@ declare function mapPentagramTypoToLegacy(pentagram: PentagramTypo, fontFamily?:
2738
2786
  declare const DELETED_LEGACY_TYPO_VARS: readonly ["components.heading", "components.fieldGroup", "core.strong", "core.bodyLg"];
2739
2787
 
2740
2788
  /**
2741
- * Maps Pentagram Shape → Legacy Misc structure.
2789
+ * Maps XUI Shape → Legacy Misc structure.
2742
2790
  *
2743
2791
  * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
2744
2792
  *
2745
- * Pentagram has per-component, per-size shape tokens (button.xl.borderRadius, etc).
2793
+ * XUI has per-component, per-size shape tokens (button.xl.borderRadius, etc).
2746
2794
  * Legacy misc has single borderRadius per component type (borderRadius.button).
2747
2795
  *
2748
2796
  * This mapper uses the "md" size as default for legacy compatibility.
2749
2797
  *
2750
2798
  * NOTE: This mapper expects RESOLVED values (px), not aliases like "radius/100".
2751
- * Use PentagramResolver to resolve aliases before calling this mapper.
2799
+ * Use XuiResolver to resolve aliases before calling this mapper.
2752
2800
  */
2753
- interface PentagramShapeSize {
2801
+ interface XuiShapeSize {
2754
2802
  borderRadius?: string;
2755
2803
  borderWidth?: string;
2756
2804
  }
2757
- interface PentagramShape {
2758
- button?: Record<string, PentagramShapeSize>;
2759
- checkbox?: Record<string, PentagramShapeSize>;
2760
- input?: Record<string, PentagramShapeSize>;
2761
- cell?: PentagramShapeSize;
2762
- modal?: PentagramShapeSize;
2763
- toast?: PentagramShapeSize;
2764
- segmentedItem?: Record<string, PentagramShapeSize>;
2765
- segmented?: Record<string, PentagramShapeSize>;
2766
- switch?: Record<string, PentagramShapeSize>;
2805
+ interface XuiShape {
2806
+ button?: Record<string, XuiShapeSize>;
2807
+ checkbox?: Record<string, XuiShapeSize>;
2808
+ input?: Record<string, XuiShapeSize>;
2809
+ cell?: XuiShapeSize;
2810
+ modal?: XuiShapeSize;
2811
+ toast?: XuiShapeSize;
2812
+ segmentedItem?: Record<string, XuiShapeSize>;
2813
+ segmented?: Record<string, XuiShapeSize>;
2814
+ switch?: Record<string, XuiShapeSize>;
2767
2815
  knob?: Record<string, {
2768
2816
  borderRadius?: string;
2769
2817
  }>;
2770
- tabItem?: Record<string, PentagramShapeSize>;
2771
- tag?: Record<string, PentagramShapeSize>;
2818
+ tabItem?: Record<string, XuiShapeSize>;
2819
+ tag?: Record<string, XuiShapeSize>;
2772
2820
  tagLabel?: {
2773
2821
  borderRadius?: string;
2774
2822
  };
2775
- tooltip?: Record<string, PentagramShapeSize>;
2776
- radio?: Record<string, PentagramShapeSize>;
2777
- contextMenu?: Record<string, PentagramShapeSize>;
2778
- avatar?: Record<string, PentagramShapeSize>;
2779
- toggleButtonGroup?: Record<string, PentagramShapeSize>;
2823
+ tooltip?: Record<string, XuiShapeSize>;
2824
+ radio?: Record<string, XuiShapeSize>;
2825
+ contextMenu?: Record<string, XuiShapeSize>;
2826
+ avatar?: Record<string, XuiShapeSize>;
2827
+ toggleButtonGroup?: Record<string, XuiShapeSize>;
2780
2828
  }
2781
2829
  interface LegacyMisc {
2782
2830
  borderRadiusScale: {
@@ -2799,42 +2847,42 @@ interface LegacyMisc {
2799
2847
  };
2800
2848
  }
2801
2849
  /**
2802
- * Maps Pentagram shape to legacy misc structure.
2850
+ * Maps XUI shape to legacy misc structure.
2803
2851
  *
2804
- * @param pentagram - Pentagram shape (RESOLVED values, not aliases)
2852
+ * @param xui - XUI shape (RESOLVED values, not aliases)
2805
2853
  * @param existingMisc - Optional existing misc to merge with (preserves non-shape values)
2806
2854
  * @returns Legacy misc structure for themeContent.misc
2807
2855
  *
2808
2856
  * @example
2809
2857
  * ```typescript
2810
2858
  * // First resolve aliases
2811
- * const resolver = new PentagramResolver('desktop');
2812
- * const resolvedShape = resolver.resolvePrimitives(themeContentPentagram.shape);
2859
+ * const resolver = new XuiResolver('desktop');
2860
+ * const resolvedShape = resolver.resolvePrimitives(themeContentXui.shape);
2813
2861
  *
2814
2862
  * // Then map to legacy
2815
- * const legacyMisc = mapPentagramShapeToLegacy(resolvedShape);
2863
+ * const legacyMisc = mapXuiShapeToLegacy(resolvedShape);
2816
2864
  * ```
2817
2865
  */
2818
- declare function mapPentagramShapeToLegacy(pentagram: PentagramShape, existingMisc?: Partial<LegacyMisc>): LegacyMisc;
2866
+ declare function mapXuiShapeToLegacy(xui: XuiShape, existingMisc?: Partial<LegacyMisc>): LegacyMisc;
2819
2867
  /**
2820
2868
  * If PS4 adopts per-size CSS variables (--shape-button-md-borderRadius),
2821
- * this function can generate them directly from Pentagram shape.
2869
+ * this function can generate them directly from XUI shape.
2822
2870
  *
2823
2871
  * This is for future use when PS4 migrates to granular shape tokens.
2824
2872
  */
2825
- declare function flattenPentagramShapeToVars(pentagram: PentagramShape): Record<string, string>;
2873
+ declare function flattenXuiShapeToVars(xui: XuiShape): Record<string, string>;
2826
2874
 
2827
2875
  /**
2828
- * Orchestrator: maps full themeContentPentagram → legacy themeContent.
2876
+ * Orchestrator: maps full themeContentXui → legacy themeContent.
2829
2877
  *
2830
2878
  * Mapping source: https://xsolla.atlassian.net/wiki/spaces/SDS/pages/23998955662/Variables+mapping
2831
2879
  */
2832
2880
 
2833
- interface PentagramThemeContent {
2834
- colors: ThemeSchemeColors;
2835
- typo: PentagramTypo;
2836
- shape: PentagramShape;
2837
- shadows?: Shadows;
2881
+ interface ThemeContentXui {
2882
+ color: ThemeSchemeColors;
2883
+ text: XuiTypo;
2884
+ shape: XuiShape;
2885
+ shadow?: Shadows;
2838
2886
  }
2839
2887
  interface LegacyThemeContent {
2840
2888
  colors: Colors$1<string>;
@@ -2843,14 +2891,14 @@ interface LegacyThemeContent {
2843
2891
  shadows?: Shadows;
2844
2892
  }
2845
2893
  /**
2846
- * Builds legacy `base` seed colors from Pentagram colors.
2894
+ * Builds legacy `base` seed colors from XUI colors.
2847
2895
  * See Variables mapping table → base.* section.
2848
2896
  */
2849
- declare function buildBaseColorsFromPentagram(colors: ThemeSchemeColors): BaseColors<string>;
2897
+ declare function buildBaseColorsFromXui(colors: ThemeSchemeColors): BaseColors<string>;
2850
2898
  /**
2851
- * Maps full themeContentPentagram to legacy themeContent.
2899
+ * Maps full themeContentXui to legacy themeContent.
2852
2900
  * Resolves typo/shape aliases to absolute values before mapping.
2853
2901
  */
2854
- declare function mapPentagramThemeToLegacy(pentagram: PentagramThemeContent, device?: Device): LegacyThemeContent;
2902
+ declare function mapXuiThemeToLegacy(xui: ThemeContentXui, device?: Device): LegacyThemeContent;
2855
2903
 
2856
- 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 };
2904
+ 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 XuiBaseColors as PentagramBaseColors, type XuiBaseColorsHsl as PentagramBaseColorsHsl, XuiResolver as PentagramResolver, type XuiShape as PentagramShape, type ThemeContentXui as PentagramThemeContent, type XuiTypo as PentagramTypo, type PresetName, type Shadows, type ShapePrimitives, type Size, type Theme, type ThemeContentXui as ThemeContentPentagram, type ThemeContentXui, type ThemeFunctionType, type ThemeScheme, type ThemeSchemeColors, type ThemeVariant, type TypoPrimitives, type Typography, type TypographyStyle, type XuiBaseColors, type XuiBaseColorsHsl, XuiResolver, type XuiShape, type XuiTypo, base, baseDark, buildBaseColorsFromXui as buildBaseColorsFromPentagram, buildBaseColorsFromXui, createResolver, emails, emailsDark, emailsThemes, flattenXuiShapeToVars as flattenPentagramShapeToVars, flattenXuiShapeToVars, generateWithScheme, mapXuiShapeToLegacy as mapPentagramShapeToLegacy, mapXuiThemeToLegacy as mapPentagramThemeToLegacy, mapXuiTypoToLegacy as mapPentagramTypoToLegacy, mapThemeSchemeToLegacy, mapXuiShapeToLegacy, mapXuiThemeToLegacy, mapXuiTypoToLegacy, palettes, paystation4, paystation4Dark, paystation4Gaijin, paystation4Nexters, paystationXuiDark as paystation4PentagramDark, paystationXuiDarkLegacyCompatible as paystation4PentagramDarkLegacyCompatible, paystationXuiLight as paystation4PentagramLight, paystationXuiLightLegacyCompatible as paystation4PentagramLightLegacyCompatible, paystation4Take2, paystation4Themes, paystationXuiDark as paystation4XuiDark, paystationXuiDarkLegacyCompatible as paystation4XuiDarkLegacyCompatible, paystationXuiLight as paystation4XuiLight, paystationXuiLightLegacyCompatible as paystation4XuiLightLegacyCompatible, paystationXuiDark, paystationXuiDarkLegacyCompatible, paystationXuiLight, paystationXuiLightLegacyCompatible, xuiDark as pentagramDark, xuiDarkScheme as pentagramDarkScheme, xuiLight as pentagramLight, xuiLightScheme as pentagramLightScheme, primaryPalette, publisherV2, publisherV2Dark, publisherV2Themes, resolveForDesktop, resolveForMobile, shapePrimitives, themeGenerator, themes, themesBaseColors, themesBaseColorsArray, themesColorsScheme, typoPrimitives, xuiDark, xuiDarkScheme, xuiLight, xuiLightScheme };