@xsolla/xui-core 0.148.2 → 0.149.0

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.
Files changed (7) hide show
  1. package/index.d.mts +49 -49
  2. package/index.d.ts +49 -49
  3. package/index.js +94 -94
  4. package/index.js.map +1 -1
  5. package/index.mjs +94 -94
  6. package/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/index.mjs CHANGED
@@ -11,8 +11,8 @@ var pentagram_dark_default = {
11
11
  secondary: "#0b3841"
12
12
  },
13
13
  brandExtra: {
14
- primary: "#cef655",
15
- secondary: "#566c13"
14
+ primary: "#7055f6",
15
+ secondary: "#22136c"
16
16
  },
17
17
  inverse: "#ffffff",
18
18
  static: {
@@ -45,7 +45,7 @@ var pentagram_dark_default = {
45
45
  secondary: "#55dcf6"
46
46
  },
47
47
  brandExtra: {
48
- primary: "#cef655",
48
+ primary: "#7055f6",
49
49
  secondary: "#9580ff"
50
50
  },
51
51
  inverse: "#000000",
@@ -80,7 +80,7 @@ var pentagram_dark_default = {
80
80
  },
81
81
  border: {
82
82
  primary: "#ffffff",
83
- secondary: "rgba(178, 242, 255, 0.1)",
83
+ secondary: "rgba(178, 242, 255, 0.15)",
84
84
  brand: "#31cae8",
85
85
  brandExtra: "#9580ff",
86
86
  inverse: "rgba(0, 0, 0, 0.15)",
@@ -91,17 +91,17 @@ var pentagram_dark_default = {
91
91
  },
92
92
  overlay: {
93
93
  mono: "rgba(178, 242, 255, 0.06)",
94
- monoHover: "rgba(178, 242, 255, 0.12)",
95
94
  brand: "rgba(128, 234, 255, 0.2)",
96
- brandExtra: "rgba(206, 246, 85, 0.3)",
95
+ brandExtra: "rgba(149, 128, 255, 0.3)",
97
96
  success: "rgba(149, 255, 128, 0.2)",
98
97
  warning: "rgba(255, 195, 128, 0.24)",
99
98
  alert: "rgba(232, 79, 48, 0.32)",
100
- neutral: "rgba(123, 152, 157, 0.28)"
99
+ neutral: "rgba(123, 152, 157, 0.28)",
100
+ monoHover: "rgba(178, 242, 255, 0.12)"
101
101
  },
102
102
  layer: {
103
103
  scrim: "rgba(0, 0, 0, 0.5)",
104
- float: "#000000"
104
+ float: "rgba(0, 0, 0, 0.5)"
105
105
  },
106
106
  control: {
107
107
  brand: {
@@ -189,25 +189,25 @@ var pentagram_dark_default = {
189
189
  },
190
190
  brandExtra: {
191
191
  primary: {
192
- bg: "#cef655",
193
- bgHover: "#bae831",
194
- bgPress: "#dfff80",
192
+ bg: "#7055f6",
193
+ bgHover: "#5031e8",
194
+ bgPress: "#9580ff",
195
195
  border: "rgba(255, 255, 255, 0)",
196
196
  borderHover: "rgba(255, 255, 255, 0)",
197
197
  borderPress: "rgba(255, 255, 255, 0)"
198
198
  },
199
199
  secondary: {
200
- bg: "rgba(186, 232, 49, 0.4)",
201
- bgHover: "rgba(206, 246, 85, 0.4)",
202
- bgPress: "rgba(186, 232, 49, 0.4)",
203
- border: "rgba(255, 255, 255, 0)",
204
- borderHover: "rgba(255, 255, 255, 0)",
200
+ bg: "rgba(80, 49, 232, 0.4)",
201
+ bgHover: "rgba(149, 128, 255, 0.4)",
202
+ bgPress: "rgba(80, 49, 232, 0.4)",
203
+ border: "#7055f6",
204
+ borderHover: "#9580ff",
205
205
  borderPress: "rgba(255, 255, 255, 0)"
206
206
  },
207
207
  tertiary: {
208
- bg: "rgba(186, 232, 49, 0)",
209
- bgHover: "rgba(206, 246, 85, 0.07)",
210
- bgPress: "rgba(186, 232, 49, 0.12)",
208
+ bg: "rgba(80, 49, 232, 0)",
209
+ bgHover: "rgba(149, 128, 255, 0.07)",
210
+ bgPress: "rgba(80, 49, 232, 0.12)",
211
211
  border: "rgba(255, 255, 255, 0)",
212
212
  borderHover: "rgba(255, 255, 255, 0)",
213
213
  borderPress: "rgba(255, 255, 255, 0)"
@@ -242,8 +242,8 @@ var pentagram_dark_default = {
242
242
  bg: "rgba(232, 79, 48, 0.4)",
243
243
  bgHover: "rgba(246, 112, 85, 0.4)",
244
244
  bgPress: "rgba(195, 61, 34, 0.4)",
245
- border: "rgba(255, 255, 255, 0)",
246
- borderHover: "rgba(255, 255, 255, 0)",
245
+ border: "rgba(246, 112, 85, 0.32)",
246
+ borderHover: "rgba(246, 112, 85, 0.32)",
247
247
  borderPress: "rgba(255, 255, 255, 0)"
248
248
  },
249
249
  tertiary: {
@@ -281,7 +281,7 @@ var pentagram_dark_default = {
281
281
  textDisable: "rgba(255, 255, 255, 0.36)"
282
282
  },
283
283
  focus: {
284
- bg: "#000000",
284
+ bg: "rgba(0, 0, 0, 0.5)",
285
285
  border: "#31cae8"
286
286
  },
287
287
  check: {
@@ -305,11 +305,11 @@ var pentagram_dark_default = {
305
305
  bgDisable: "rgba(52, 71, 75, 0.85)"
306
306
  },
307
307
  switch: {
308
- bg: "#34474b",
309
- bgDisable: "rgba(255, 255, 255, 0.15)",
310
- bgHover: "#44595e",
311
- border: "rgba(178, 242, 255, 0.1)",
312
- borderHover: "rgba(178, 242, 255, 0.15)",
308
+ bg: "#135d6c",
309
+ bgHover: "#1b8398",
310
+ bgDisable: "rgba(178, 242, 255, 0.25)",
311
+ border: "#22a8c3",
312
+ borderHover: "#22a8c3",
313
313
  borderDisable: "rgba(255, 255, 255, 0)"
314
314
  },
315
315
  knob: {
@@ -409,8 +409,8 @@ var pentagram_light_default = {
409
409
  secondary: "#b2f2ff"
410
410
  },
411
411
  brandExtra: {
412
- primary: "#cef655",
413
- secondary: "#dfff80"
412
+ primary: "#7055f6",
413
+ secondary: "#9580ff"
414
414
  },
415
415
  inverse: "#000000",
416
416
  static: {
@@ -443,8 +443,8 @@ var pentagram_light_default = {
443
443
  secondary: "#31cae8"
444
444
  },
445
445
  brandExtra: {
446
- primary: "#79971b",
447
- secondary: "#9bc323"
446
+ primary: "#301b98",
447
+ secondary: "#3d22c3"
448
448
  },
449
449
  inverse: "#ffffff",
450
450
  static: {
@@ -480,7 +480,7 @@ var pentagram_light_default = {
480
480
  primary: "#000000",
481
481
  secondary: "rgba(0, 0, 0, 0.1)",
482
482
  brand: "#31cae8",
483
- brandExtra: "#bae831",
483
+ brandExtra: "#5031e8",
484
484
  inverse: "rgba(255, 255, 255, 0.15)",
485
485
  success: "#50e831",
486
486
  warning: "#e89331",
@@ -489,17 +489,17 @@ var pentagram_light_default = {
489
489
  },
490
490
  overlay: {
491
491
  mono: "rgba(0, 0, 0, 0.05)",
492
- monoHover: "rgba(0, 0, 0, 0.1)",
493
492
  brand: "rgba(128, 234, 255, 0.3)",
494
- brandExtra: "rgba(206, 246, 85, 0.3)",
493
+ brandExtra: "rgba(149, 128, 255, 0.3)",
495
494
  success: "rgba(149, 255, 128, 0.24)",
496
495
  warning: "rgba(255, 195, 128, 0.28)",
497
496
  alert: "rgba(232, 79, 48, 0.24)",
498
- neutral: "rgba(96, 127, 133, 0.24)"
497
+ neutral: "rgba(96, 127, 133, 0.24)",
498
+ monoHover: "rgba(0, 0, 0, 0.1)"
499
499
  },
500
500
  layer: {
501
501
  scrim: "rgba(0, 0, 0, 0.75)",
502
- float: "#ffffff"
502
+ float: "rgba(255, 255, 255, 0.8)"
503
503
  },
504
504
  control: {
505
505
  brand: {
@@ -587,25 +587,25 @@ var pentagram_light_default = {
587
587
  },
588
588
  brandExtra: {
589
589
  primary: {
590
- bg: "#bae831",
591
- bgHover: "#cef655",
592
- bgPress: "#9bc323",
590
+ bg: "#7055f6",
591
+ bgHover: "#5031e8",
592
+ bgPress: "#3d22c3",
593
593
  border: "rgba(255, 255, 255, 0)",
594
594
  borderHover: "rgba(255, 255, 255, 0)",
595
595
  borderPress: "rgba(255, 255, 255, 0)"
596
596
  },
597
597
  secondary: {
598
- bg: "rgba(186, 232, 49, 0.4)",
599
- bgHover: "rgba(206, 246, 85, 0.4)",
600
- bgPress: "rgba(186, 232, 49, 0.4)",
601
- border: "rgba(255, 255, 255, 0)",
602
- borderHover: "rgba(255, 255, 255, 0)",
598
+ bg: "rgba(80, 49, 232, 0.4)",
599
+ bgHover: "rgba(149, 128, 255, 0.4)",
600
+ bgPress: "rgba(80, 49, 232, 0.4)",
601
+ border: "#9580ff",
602
+ borderHover: "#bfb2ff",
603
603
  borderPress: "rgba(255, 255, 255, 0)"
604
604
  },
605
605
  tertiary: {
606
- bg: "rgba(186, 232, 49, 0)",
607
- bgHover: "rgba(206, 246, 85, 0.07)",
608
- bgPress: "rgba(186, 232, 49, 0.12)",
606
+ bg: "rgba(80, 49, 232, 0)",
607
+ bgHover: "rgba(149, 128, 255, 0.07)",
608
+ bgPress: "rgba(80, 49, 232, 0.12)",
609
609
  border: "rgba(255, 255, 255, 0)",
610
610
  borderHover: "rgba(255, 255, 255, 0)",
611
611
  borderPress: "rgba(255, 255, 255, 0)"
@@ -613,7 +613,7 @@ var pentagram_light_default = {
613
613
  text: {
614
614
  primary: "#ffffff",
615
615
  secondary: "#000000",
616
- tertiary: "#79971b",
616
+ tertiary: "#301b98",
617
617
  ghost: "#79971b"
618
618
  },
619
619
  ghost: {
@@ -640,8 +640,8 @@ var pentagram_light_default = {
640
640
  bg: "rgba(232, 79, 48, 0.4)",
641
641
  bgHover: "rgba(246, 112, 85, 0.4)",
642
642
  bgPress: "rgba(195, 61, 34, 0.4)",
643
- border: "rgba(255, 255, 255, 0)",
644
- borderHover: "rgba(255, 255, 255, 0)",
643
+ border: "rgba(246, 112, 85, 0.32)",
644
+ borderHover: "rgba(246, 112, 85, 0.32)",
645
645
  borderPress: "rgba(255, 255, 255, 0)"
646
646
  },
647
647
  tertiary: {
@@ -679,7 +679,7 @@ var pentagram_light_default = {
679
679
  textDisable: "rgba(5, 5, 5, 0.36)"
680
680
  },
681
681
  focus: {
682
- bg: "#ffffff",
682
+ bg: "rgba(255, 255, 255, 0.8)",
683
683
  border: "#31cae8"
684
684
  },
685
685
  check: {
@@ -703,11 +703,11 @@ var pentagram_light_default = {
703
703
  bgDisable: "#cccccc"
704
704
  },
705
705
  switch: {
706
- bg: "#d7dee0",
707
- bgDisable: "rgba(0, 0, 0, 0.15)",
708
- bgHover: "#c0cacd",
709
- border: "rgba(0, 0, 0, 0.1)",
710
- borderHover: "rgba(0, 0, 0, 0.15)",
706
+ bg: "#ccf6ff",
707
+ bgHover: "#e5fbff",
708
+ bgDisable: "rgba(0, 0, 0, 0.25)",
709
+ border: "#80eaff",
710
+ borderHover: "#b2f2ff",
711
711
  borderDisable: "rgba(0, 0, 0, 0)"
712
712
  },
713
713
  knob: {
@@ -720,10 +720,10 @@ var pentagram_light_default = {
720
720
  disable: "rgba(0, 0, 0, 0.4)"
721
721
  },
722
722
  link: {
723
- primary: "#22a8c3",
724
- primaryHover: "#31cae8",
725
- secondary: "#9bc323",
726
- secondaryHover: "#bae831"
723
+ primary: "#1b8398",
724
+ primaryHover: "#22a8c3",
725
+ secondary: "#3d22c3",
726
+ secondaryHover: "#5031e8"
727
727
  },
728
728
  segmented: {
729
729
  bg: "rgba(0, 0, 0, 0.08)",
@@ -800,8 +800,8 @@ var pentagram_light_default = {
800
800
  // src/tokens/ltg-dark.json
801
801
  var ltg_dark_default = {
802
802
  background: {
803
- primary: "#0d143a",
804
- secondary: "#161d45",
803
+ primary: "#161d45",
804
+ secondary: "#0d143a",
805
805
  brand: {
806
806
  primary: "#454f88",
807
807
  secondary: "#2b335e"
@@ -829,13 +829,13 @@ var ltg_dark_default = {
829
829
  },
830
830
  neutral: {
831
831
  primary: "#7f8bc9",
832
- secondary: "#b0baee"
832
+ secondary: "#2b335e"
833
833
  }
834
834
  },
835
835
  content: {
836
836
  primary: "#ffffff",
837
837
  secondary: "rgba(255, 255, 255, 0.76)",
838
- tertiary: "rgba(255, 255, 255, 0.5)",
838
+ tertiary: "rgba(255, 255, 255, 0.58)",
839
839
  brand: {
840
840
  primary: "#ffffff",
841
841
  secondary: "rgba(255, 255, 255, 0.76)"
@@ -866,7 +866,7 @@ var ltg_dark_default = {
866
866
  secondary: "#8066ff"
867
867
  },
868
868
  on: {
869
- brand: "#000000",
869
+ brand: "#ffffff",
870
870
  brandExtra: "#0d143a",
871
871
  success: "#000000",
872
872
  warning: "#000000",
@@ -880,24 +880,24 @@ var ltg_dark_default = {
880
880
  brand: "#ffffff",
881
881
  brandExtra: "#8576fd",
882
882
  inverse: "rgba(0, 0, 0, 0.15)",
883
- success: "#14b87e",
883
+ success: "#75f0b9",
884
884
  warning: "#ffe566",
885
885
  alert: "#f53d3d",
886
886
  neutral: "#7f8bc9"
887
887
  },
888
888
  overlay: {
889
889
  mono: "rgba(255, 255, 255, 0.1)",
890
- monoHover: "rgba(255, 255, 255, 0.2)",
891
- brand: "rgba(255, 255, 255, 0.3)",
890
+ brand: "rgba(83, 94, 153, 0.5)",
892
891
  brandExtra: "rgba(133, 118, 253, 0.3)",
893
892
  success: "rgba(20, 184, 126, 0.3)",
894
893
  warning: "rgba(255, 229, 102, 0.3)",
895
894
  alert: "rgba(245, 61, 61, 0.3)",
896
- neutral: "rgba(127, 139, 201, 0.3)"
895
+ neutral: "rgba(127, 139, 201, 0.3)",
896
+ monoHover: "rgba(255, 255, 255, 0.2)"
897
897
  },
898
898
  layer: {
899
899
  scrim: "rgba(0, 0, 0, 0.5)",
900
- float: "#0a0f2b"
900
+ float: "rgba(10, 15, 43, 0.5)"
901
901
  },
902
902
  control: {
903
903
  brand: {
@@ -905,18 +905,18 @@ var ltg_dark_default = {
905
905
  bg: "#ffca43",
906
906
  bgHover: "#f2c173",
907
907
  bgPress: "#ffbb33",
908
- bgDisable: "rgba(13, 20, 58, 0.3)",
908
+ bgDisable: "#484848",
909
909
  border: "rgba(255, 255, 255, 0)",
910
910
  borderHover: "rgba(255, 255, 255, 0)",
911
911
  borderPress: "rgba(255, 255, 255, 0)",
912
912
  borderDisable: "rgba(255, 255, 255, 0)"
913
913
  },
914
914
  secondary: {
915
- bg: "#ffffff",
916
- bgHover: "rgba(255, 255, 255, 0.76)",
915
+ bg: "rgba(255, 255, 255, 0)",
916
+ bgHover: "rgba(255, 255, 255, 0.1)",
917
917
  bgPress: "rgba(255, 255, 255, 0.5)",
918
- border: "rgba(255, 255, 255, 0)",
919
- borderHover: "rgba(255, 255, 255, 0)",
918
+ border: "rgba(255, 255, 255, 0.2)",
919
+ borderHover: "rgba(255, 255, 255, 0.4)",
920
920
  borderPress: "rgba(255, 255, 255, 0)"
921
921
  },
922
922
  tertiary: {
@@ -929,7 +929,7 @@ var ltg_dark_default = {
929
929
  },
930
930
  text: {
931
931
  primary: "#000000",
932
- secondary: "#000000",
932
+ secondary: "#ffffff",
933
933
  tertiary: "#000000",
934
934
  disable: "#c4d1d4",
935
935
  ghost: "#ffca43"
@@ -969,7 +969,7 @@ var ltg_dark_default = {
969
969
  borderPress: "rgba(255, 255, 255, 0)"
970
970
  },
971
971
  text: {
972
- primary: "#000000",
972
+ primary: "#0d143a",
973
973
  secondary: "#ffffff",
974
974
  tertiary: "#ffffff",
975
975
  ghost: "#ffffff"
@@ -1066,18 +1066,18 @@ var ltg_dark_default = {
1066
1066
  }
1067
1067
  },
1068
1068
  input: {
1069
- bg: "rgba(255, 255, 255, 0.12)",
1070
- bgHover: "rgba(255, 255, 255, 0.15)",
1069
+ bg: "#292f52",
1070
+ bgHover: "#2d3661",
1071
1071
  bgDisable: "rgba(255, 255, 255, 0.25)",
1072
- border: "rgba(255, 255, 255, 0)",
1073
- borderHover: "rgba(255, 255, 255, 0.1)",
1072
+ border: "#7f8bc9",
1073
+ borderHover: "rgba(127, 139, 201, 0.7)",
1074
1074
  borderDisable: "rgba(255, 255, 255, 0)",
1075
1075
  text: "#ffffff",
1076
1076
  placeholder: "rgba(255, 255, 255, 0.55)",
1077
1077
  textDisable: "rgba(255, 255, 255, 0.36)"
1078
1078
  },
1079
1079
  focus: {
1080
- bg: "rgba(255, 255, 255, 0.2)",
1080
+ bg: "#0a0f2b",
1081
1081
  border: "#8576fd"
1082
1082
  },
1083
1083
  check: {
@@ -1102,8 +1102,8 @@ var ltg_dark_default = {
1102
1102
  },
1103
1103
  switch: {
1104
1104
  bg: "rgba(255, 255, 255, 0.1)",
1105
- bgDisable: "rgba(255, 255, 255, 0.2)",
1106
1105
  bgHover: "rgba(255, 255, 255, 0.15)",
1106
+ bgDisable: "rgba(255, 255, 255, 0.2)",
1107
1107
  border: "#ffffff",
1108
1108
  borderHover: "#ffffff",
1109
1109
  borderDisable: "rgba(255, 255, 255, 0)"
@@ -1126,7 +1126,7 @@ var ltg_dark_default = {
1126
1126
  segmented: {
1127
1127
  bg: "rgba(255, 255, 255, 0.1)",
1128
1128
  bgHover: "rgba(255, 255, 255, 0.1)",
1129
- bgActive: "#2e3766",
1129
+ bgActive: "rgba(255, 255, 255, 0.15)",
1130
1130
  border: "rgba(255, 255, 255, 0.1)",
1131
1131
  borderHover: "rgba(255, 255, 255, 0.1)",
1132
1132
  borderActive: "rgba(255, 255, 255, 0)",
@@ -2586,37 +2586,37 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
2586
2586
  xl: {
2587
2587
  size: 64,
2588
2588
  fontSize: 20,
2589
- iconSize: 48,
2589
+ iconSize: 32,
2590
2590
  badgeSize: 20,
2591
2591
  badgeOffsetCircle: { right: -4, top: -4 },
2592
2592
  badgeOffsetSquare: { right: -8, top: -8 },
2593
- borderRadiusSquare: radius.avatarSmall,
2593
+ borderRadiusSquare: 8,
2594
2594
  borderRadiusCircle: radius.avatarCircle
2595
2595
  },
2596
2596
  lg: {
2597
2597
  size: 56,
2598
2598
  fontSize: 20,
2599
- iconSize: 40,
2599
+ iconSize: 28,
2600
2600
  badgeSize: 20,
2601
2601
  badgeOffsetCircle: { right: -4, top: -4 },
2602
2602
  badgeOffsetSquare: { right: -8, top: -8 },
2603
- borderRadiusSquare: radius.avatarSmall,
2603
+ borderRadiusSquare: 6,
2604
2604
  borderRadiusCircle: radius.avatarCircle
2605
2605
  },
2606
2606
  md: {
2607
2607
  size: 48,
2608
2608
  fontSize: 18,
2609
- iconSize: 32,
2609
+ iconSize: 24,
2610
2610
  badgeSize: 20,
2611
2611
  badgeOffsetCircle: { right: -5, top: -5 },
2612
2612
  badgeOffsetSquare: { right: -8, top: -8 },
2613
- borderRadiusSquare: radius.avatarSmall,
2613
+ borderRadiusSquare: 6,
2614
2614
  borderRadiusCircle: radius.avatarCircle
2615
2615
  },
2616
2616
  sm: {
2617
2617
  size: 40,
2618
2618
  fontSize: 16,
2619
- iconSize: 24,
2619
+ iconSize: 20,
2620
2620
  badgeSize: 20,
2621
2621
  badgeOffsetCircle: { right: -6, top: -6 },
2622
2622
  badgeOffsetSquare: { right: -8, top: -8 },
@@ -2626,7 +2626,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
2626
2626
  xs: {
2627
2627
  size: 32,
2628
2628
  fontSize: 12,
2629
- iconSize: 24,
2629
+ iconSize: 16,
2630
2630
  badgeSize: 8,
2631
2631
  badgeOffsetCircle: { right: -1, top: -1 },
2632
2632
  badgeOffsetSquare: { right: -3, top: -3 },
@@ -2636,11 +2636,11 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
2636
2636
  xxs: {
2637
2637
  size: 24,
2638
2638
  fontSize: 10,
2639
- iconSize: 16,
2639
+ iconSize: 12,
2640
2640
  badgeSize: 6,
2641
2641
  badgeOffsetCircle: { right: -1, top: -1 },
2642
2642
  badgeOffsetSquare: { right: -2, top: -2 },
2643
- borderRadiusSquare: radius.avatarSmall,
2643
+ borderRadiusSquare: 2,
2644
2644
  borderRadiusCircle: radius.avatarCircle
2645
2645
  }
2646
2646
  };