@xsolla/xui-core 0.148.2 → 0.149.0

package/index.js

@@ -79,8 +79,8 @@ var pentagram_dark_default = {
       secondary: "#0b3841"
     },
     brandExtra: {
-      primary: "#cef655",
-      secondary: "#566c13"
+      primary: "#7055f6",
+      secondary: "#22136c"
     },
     inverse: "#ffffff",
     static: {
@@ -113,7 +113,7 @@ var pentagram_dark_default = {
       secondary: "#55dcf6"
     },
     brandExtra: {
-      primary: "#cef655",
+      primary: "#7055f6",
       secondary: "#9580ff"
     },
     inverse: "#000000",
@@ -148,7 +148,7 @@ var pentagram_dark_default = {
   },
   border: {
     primary: "#ffffff",
-    secondary: "rgba(178, 242, 255, 0.1)",
+    secondary: "rgba(178, 242, 255, 0.15)",
     brand: "#31cae8",
     brandExtra: "#9580ff",
     inverse: "rgba(0, 0, 0, 0.15)",
@@ -159,17 +159,17 @@ var pentagram_dark_default = {
   },
   overlay: {
     mono: "rgba(178, 242, 255, 0.06)",
-    monoHover: "rgba(178, 242, 255, 0.12)",
     brand: "rgba(128, 234, 255, 0.2)",
-    brandExtra: "rgba(206, 246, 85, 0.3)",
+    brandExtra: "rgba(149, 128, 255, 0.3)",
     success: "rgba(149, 255, 128, 0.2)",
     warning: "rgba(255, 195, 128, 0.24)",
     alert: "rgba(232, 79, 48, 0.32)",
-    neutral: "rgba(123, 152, 157, 0.28)"
+    neutral: "rgba(123, 152, 157, 0.28)",
+    monoHover: "rgba(178, 242, 255, 0.12)"
   },
   layer: {
     scrim: "rgba(0, 0, 0, 0.5)",
-    float: "#000000"
+    float: "rgba(0, 0, 0, 0.5)"
   },
   control: {
     brand: {
@@ -257,25 +257,25 @@ var pentagram_dark_default = {
     },
     brandExtra: {
       primary: {
-        bg: "#cef655",
-        bgHover: "#bae831",
-        bgPress: "#dfff80",
+        bg: "#7055f6",
+        bgHover: "#5031e8",
+        bgPress: "#9580ff",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(186, 232, 49, 0.4)",
-        bgHover: "rgba(206, 246, 85, 0.4)",
-        bgPress: "rgba(186, 232, 49, 0.4)",
-        border: "rgba(255, 255, 255, 0)",
-        borderHover: "rgba(255, 255, 255, 0)",
+        bg: "rgba(80, 49, 232, 0.4)",
+        bgHover: "rgba(149, 128, 255, 0.4)",
+        bgPress: "rgba(80, 49, 232, 0.4)",
+        border: "#7055f6",
+        borderHover: "#9580ff",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
-        bg: "rgba(186, 232, 49, 0)",
-        bgHover: "rgba(206, 246, 85, 0.07)",
-        bgPress: "rgba(186, 232, 49, 0.12)",
+        bg: "rgba(80, 49, 232, 0)",
+        bgHover: "rgba(149, 128, 255, 0.07)",
+        bgPress: "rgba(80, 49, 232, 0.12)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
         borderPress: "rgba(255, 255, 255, 0)"
@@ -310,8 +310,8 @@ var pentagram_dark_default = {
         bg: "rgba(232, 79, 48, 0.4)",
         bgHover: "rgba(246, 112, 85, 0.4)",
         bgPress: "rgba(195, 61, 34, 0.4)",
-        border: "rgba(255, 255, 255, 0)",
-        borderHover: "rgba(255, 255, 255, 0)",
+        border: "rgba(246, 112, 85, 0.32)",
+        borderHover: "rgba(246, 112, 85, 0.32)",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
@@ -349,7 +349,7 @@ var pentagram_dark_default = {
       textDisable: "rgba(255, 255, 255, 0.36)"
     },
     focus: {
-      bg: "#000000",
+      bg: "rgba(0, 0, 0, 0.5)",
       border: "#31cae8"
     },
     check: {
@@ -373,11 +373,11 @@ var pentagram_dark_default = {
       bgDisable: "rgba(52, 71, 75, 0.85)"
     },
     switch: {
-      bg: "#34474b",
-      bgDisable: "rgba(255, 255, 255, 0.15)",
-      bgHover: "#44595e",
-      border: "rgba(178, 242, 255, 0.1)",
-      borderHover: "rgba(178, 242, 255, 0.15)",
+      bg: "#135d6c",
+      bgHover: "#1b8398",
+      bgDisable: "rgba(178, 242, 255, 0.25)",
+      border: "#22a8c3",
+      borderHover: "#22a8c3",
       borderDisable: "rgba(255, 255, 255, 0)"
     },
     knob: {
@@ -477,8 +477,8 @@ var pentagram_light_default = {
       secondary: "#b2f2ff"
     },
     brandExtra: {
-      primary: "#cef655",
-      secondary: "#dfff80"
+      primary: "#7055f6",
+      secondary: "#9580ff"
     },
     inverse: "#000000",
     static: {
@@ -511,8 +511,8 @@ var pentagram_light_default = {
       secondary: "#31cae8"
     },
     brandExtra: {
-      primary: "#79971b",
-      secondary: "#9bc323"
+      primary: "#301b98",
+      secondary: "#3d22c3"
     },
     inverse: "#ffffff",
     static: {
@@ -548,7 +548,7 @@ var pentagram_light_default = {
     primary: "#000000",
     secondary: "rgba(0, 0, 0, 0.1)",
     brand: "#31cae8",
-    brandExtra: "#bae831",
+    brandExtra: "#5031e8",
     inverse: "rgba(255, 255, 255, 0.15)",
     success: "#50e831",
     warning: "#e89331",
@@ -557,17 +557,17 @@ var pentagram_light_default = {
   },
   overlay: {
     mono: "rgba(0, 0, 0, 0.05)",
-    monoHover: "rgba(0, 0, 0, 0.1)",
     brand: "rgba(128, 234, 255, 0.3)",
-    brandExtra: "rgba(206, 246, 85, 0.3)",
+    brandExtra: "rgba(149, 128, 255, 0.3)",
     success: "rgba(149, 255, 128, 0.24)",
     warning: "rgba(255, 195, 128, 0.28)",
     alert: "rgba(232, 79, 48, 0.24)",
-    neutral: "rgba(96, 127, 133, 0.24)"
+    neutral: "rgba(96, 127, 133, 0.24)",
+    monoHover: "rgba(0, 0, 0, 0.1)"
   },
   layer: {
     scrim: "rgba(0, 0, 0, 0.75)",
-    float: "#ffffff"
+    float: "rgba(255, 255, 255, 0.8)"
   },
   control: {
     brand: {
@@ -655,25 +655,25 @@ var pentagram_light_default = {
     },
     brandExtra: {
       primary: {
-        bg: "#bae831",
-        bgHover: "#cef655",
-        bgPress: "#9bc323",
+        bg: "#7055f6",
+        bgHover: "#5031e8",
+        bgPress: "#3d22c3",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(186, 232, 49, 0.4)",
-        bgHover: "rgba(206, 246, 85, 0.4)",
-        bgPress: "rgba(186, 232, 49, 0.4)",
-        border: "rgba(255, 255, 255, 0)",
-        borderHover: "rgba(255, 255, 255, 0)",
+        bg: "rgba(80, 49, 232, 0.4)",
+        bgHover: "rgba(149, 128, 255, 0.4)",
+        bgPress: "rgba(80, 49, 232, 0.4)",
+        border: "#9580ff",
+        borderHover: "#bfb2ff",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
-        bg: "rgba(186, 232, 49, 0)",
-        bgHover: "rgba(206, 246, 85, 0.07)",
-        bgPress: "rgba(186, 232, 49, 0.12)",
+        bg: "rgba(80, 49, 232, 0)",
+        bgHover: "rgba(149, 128, 255, 0.07)",
+        bgPress: "rgba(80, 49, 232, 0.12)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
         borderPress: "rgba(255, 255, 255, 0)"
@@ -681,7 +681,7 @@ var pentagram_light_default = {
       text: {
         primary: "#ffffff",
         secondary: "#000000",
-        tertiary: "#79971b",
+        tertiary: "#301b98",
         ghost: "#79971b"
       },
       ghost: {
@@ -708,8 +708,8 @@ var pentagram_light_default = {
         bg: "rgba(232, 79, 48, 0.4)",
         bgHover: "rgba(246, 112, 85, 0.4)",
         bgPress: "rgba(195, 61, 34, 0.4)",
-        border: "rgba(255, 255, 255, 0)",
-        borderHover: "rgba(255, 255, 255, 0)",
+        border: "rgba(246, 112, 85, 0.32)",
+        borderHover: "rgba(246, 112, 85, 0.32)",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
@@ -747,7 +747,7 @@ var pentagram_light_default = {
       textDisable: "rgba(5, 5, 5, 0.36)"
     },
     focus: {
-      bg: "#ffffff",
+      bg: "rgba(255, 255, 255, 0.8)",
       border: "#31cae8"
     },
     check: {
@@ -771,11 +771,11 @@ var pentagram_light_default = {
       bgDisable: "#cccccc"
     },
     switch: {
-      bg: "#d7dee0",
-      bgDisable: "rgba(0, 0, 0, 0.15)",
-      bgHover: "#c0cacd",
-      border: "rgba(0, 0, 0, 0.1)",
-      borderHover: "rgba(0, 0, 0, 0.15)",
+      bg: "#ccf6ff",
+      bgHover: "#e5fbff",
+      bgDisable: "rgba(0, 0, 0, 0.25)",
+      border: "#80eaff",
+      borderHover: "#b2f2ff",
       borderDisable: "rgba(0, 0, 0, 0)"
     },
     knob: {
@@ -788,10 +788,10 @@ var pentagram_light_default = {
       disable: "rgba(0, 0, 0, 0.4)"
     },
     link: {
-      primary: "#22a8c3",
-      primaryHover: "#31cae8",
-      secondary: "#9bc323",
-      secondaryHover: "#bae831"
+      primary: "#1b8398",
+      primaryHover: "#22a8c3",
+      secondary: "#3d22c3",
+      secondaryHover: "#5031e8"
     },
     segmented: {
       bg: "rgba(0, 0, 0, 0.08)",
@@ -868,8 +868,8 @@ var pentagram_light_default = {
 // src/tokens/ltg-dark.json
 var ltg_dark_default = {
   background: {
-    primary: "#0d143a",
-    secondary: "#161d45",
+    primary: "#161d45",
+    secondary: "#0d143a",
     brand: {
       primary: "#454f88",
       secondary: "#2b335e"
@@ -897,13 +897,13 @@ var ltg_dark_default = {
     },
     neutral: {
       primary: "#7f8bc9",
-      secondary: "#b0baee"
+      secondary: "#2b335e"
     }
   },
   content: {
     primary: "#ffffff",
     secondary: "rgba(255, 255, 255, 0.76)",
-    tertiary: "rgba(255, 255, 255, 0.5)",
+    tertiary: "rgba(255, 255, 255, 0.58)",
     brand: {
       primary: "#ffffff",
       secondary: "rgba(255, 255, 255, 0.76)"
@@ -934,7 +934,7 @@ var ltg_dark_default = {
       secondary: "#8066ff"
     },
     on: {
-      brand: "#000000",
+      brand: "#ffffff",
       brandExtra: "#0d143a",
       success: "#000000",
       warning: "#000000",
@@ -948,24 +948,24 @@ var ltg_dark_default = {
     brand: "#ffffff",
     brandExtra: "#8576fd",
     inverse: "rgba(0, 0, 0, 0.15)",
-    success: "#14b87e",
+    success: "#75f0b9",
     warning: "#ffe566",
     alert: "#f53d3d",
     neutral: "#7f8bc9"
   },
   overlay: {
     mono: "rgba(255, 255, 255, 0.1)",
-    monoHover: "rgba(255, 255, 255, 0.2)",
-    brand: "rgba(255, 255, 255, 0.3)",
+    brand: "rgba(83, 94, 153, 0.5)",
     brandExtra: "rgba(133, 118, 253, 0.3)",
     success: "rgba(20, 184, 126, 0.3)",
     warning: "rgba(255, 229, 102, 0.3)",
     alert: "rgba(245, 61, 61, 0.3)",
-    neutral: "rgba(127, 139, 201, 0.3)"
+    neutral: "rgba(127, 139, 201, 0.3)",
+    monoHover: "rgba(255, 255, 255, 0.2)"
   },
   layer: {
     scrim: "rgba(0, 0, 0, 0.5)",
-    float: "#0a0f2b"
+    float: "rgba(10, 15, 43, 0.5)"
   },
   control: {
     brand: {
@@ -973,18 +973,18 @@ var ltg_dark_default = {
         bg: "#ffca43",
         bgHover: "#f2c173",
         bgPress: "#ffbb33",
-        bgDisable: "rgba(13, 20, 58, 0.3)",
+        bgDisable: "#484848",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
         borderPress: "rgba(255, 255, 255, 0)",
         borderDisable: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "#ffffff",
-        bgHover: "rgba(255, 255, 255, 0.76)",
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(255, 255, 255, 0.1)",
         bgPress: "rgba(255, 255, 255, 0.5)",
-        border: "rgba(255, 255, 255, 0)",
-        borderHover: "rgba(255, 255, 255, 0)",
+        border: "rgba(255, 255, 255, 0.2)",
+        borderHover: "rgba(255, 255, 255, 0.4)",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
@@ -997,7 +997,7 @@ var ltg_dark_default = {
       },
       text: {
         primary: "#000000",
-        secondary: "#000000",
+        secondary: "#ffffff",
         tertiary: "#000000",
         disable: "#c4d1d4",
         ghost: "#ffca43"
@@ -1037,7 +1037,7 @@ var ltg_dark_default = {
         borderPress: "rgba(255, 255, 255, 0)"
       },
       text: {
-        primary: "#000000",
+        primary: "#0d143a",
         secondary: "#ffffff",
         tertiary: "#ffffff",
         ghost: "#ffffff"
@@ -1134,18 +1134,18 @@ var ltg_dark_default = {
       }
     },
     input: {
-      bg: "rgba(255, 255, 255, 0.12)",
-      bgHover: "rgba(255, 255, 255, 0.15)",
+      bg: "#292f52",
+      bgHover: "#2d3661",
       bgDisable: "rgba(255, 255, 255, 0.25)",
-      border: "rgba(255, 255, 255, 0)",
-      borderHover: "rgba(255, 255, 255, 0.1)",
+      border: "#7f8bc9",
+      borderHover: "rgba(127, 139, 201, 0.7)",
       borderDisable: "rgba(255, 255, 255, 0)",
       text: "#ffffff",
       placeholder: "rgba(255, 255, 255, 0.55)",
       textDisable: "rgba(255, 255, 255, 0.36)"
     },
     focus: {
-      bg: "rgba(255, 255, 255, 0.2)",
+      bg: "#0a0f2b",
       border: "#8576fd"
     },
     check: {
@@ -1170,8 +1170,8 @@ var ltg_dark_default = {
     },
     switch: {
       bg: "rgba(255, 255, 255, 0.1)",
-      bgDisable: "rgba(255, 255, 255, 0.2)",
       bgHover: "rgba(255, 255, 255, 0.15)",
+      bgDisable: "rgba(255, 255, 255, 0.2)",
       border: "#ffffff",
       borderHover: "#ffffff",
       borderDisable: "rgba(255, 255, 255, 0)"
@@ -1194,7 +1194,7 @@ var ltg_dark_default = {
     segmented: {
       bg: "rgba(255, 255, 255, 0.1)",
       bgHover: "rgba(255, 255, 255, 0.1)",
-      bgActive: "#2e3766",
+      bgActive: "rgba(255, 255, 255, 0.15)",
       border: "rgba(255, 255, 255, 0.1)",
       borderHover: "rgba(255, 255, 255, 0.1)",
       borderActive: "rgba(255, 255, 255, 0)",
@@ -2654,37 +2654,37 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           xl: {
             size: 64,
             fontSize: 20,
-            iconSize: 48,
+            iconSize: 32,
             badgeSize: 20,
             badgeOffsetCircle: { right: -4, top: -4 },
             badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: radius.avatarSmall,
+            borderRadiusSquare: 8,
             borderRadiusCircle: radius.avatarCircle
           },
           lg: {
             size: 56,
             fontSize: 20,
-            iconSize: 40,
+            iconSize: 28,
             badgeSize: 20,
             badgeOffsetCircle: { right: -4, top: -4 },
             badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: radius.avatarSmall,
+            borderRadiusSquare: 6,
             borderRadiusCircle: radius.avatarCircle
           },
           md: {
             size: 48,
             fontSize: 18,
-            iconSize: 32,
+            iconSize: 24,
             badgeSize: 20,
             badgeOffsetCircle: { right: -5, top: -5 },
             badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: radius.avatarSmall,
+            borderRadiusSquare: 6,
             borderRadiusCircle: radius.avatarCircle
           },
           sm: {
             size: 40,
             fontSize: 16,
-            iconSize: 24,
+            iconSize: 20,
             badgeSize: 20,
             badgeOffsetCircle: { right: -6, top: -6 },
             badgeOffsetSquare: { right: -8, top: -8 },
@@ -2694,7 +2694,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           xs: {
             size: 32,
             fontSize: 12,
-            iconSize: 24,
+            iconSize: 16,
             badgeSize: 8,
             badgeOffsetCircle: { right: -1, top: -1 },
             badgeOffsetSquare: { right: -3, top: -3 },
@@ -2704,11 +2704,11 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           xxs: {
             size: 24,
             fontSize: 10,
-            iconSize: 16,
+            iconSize: 12,
             badgeSize: 6,
             badgeOffsetCircle: { right: -1, top: -1 },
             badgeOffsetSquare: { right: -2, top: -2 },
-            borderRadiusSquare: radius.avatarSmall,
+            borderRadiusSquare: 2,
             borderRadiusCircle: radius.avatarCircle
           }
         };