@xsolla/xui-core 0.157.0 → 0.158.0

package/index.js

@@ -169,7 +169,7 @@ var pentagram_dark_default = {
   },
   layer: {
     scrim: "rgba(0, 0, 0, 0.5)",
-    float: "rgba(0, 0, 0, 0.5)"
+    float: "rgba(0, 0, 0, 0.8)"
   },
   control: {
     brand: {
@@ -265,9 +265,9 @@ var pentagram_dark_default = {
         borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(80, 49, 232, 0.4)",
-        bgHover: "rgba(149, 128, 255, 0.4)",
-        bgPress: "rgba(80, 49, 232, 0.4)",
+        bg: "#22136c",
+        bgHover: "#301b98",
+        bgPress: "#140b41",
         border: "#7055f6",
         borderHover: "#9580ff",
         borderPress: "rgba(255, 255, 255, 0)"
@@ -307,11 +307,11 @@ var pentagram_dark_default = {
         borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(232, 79, 48, 0.4)",
-        bgHover: "rgba(246, 112, 85, 0.4)",
-        bgPress: "rgba(195, 61, 34, 0.4)",
-        border: "rgba(246, 112, 85, 0.32)",
-        borderHover: "rgba(246, 112, 85, 0.32)",
+        bg: "#6c2213",
+        bgHover: "#98301b",
+        bgPress: "#41140b",
+        border: "#98301b",
+        borderHover: "#c33d22",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
@@ -349,7 +349,7 @@ var pentagram_dark_default = {
       textDisable: "rgba(255, 255, 255, 0.36)"
     },
     focus: {
-      bg: "rgba(0, 0, 0, 0.5)",
+      bg: "rgba(0, 0, 0, 0.8)",
       border: "#31cae8"
     },
     check: {
@@ -383,7 +383,11 @@ var pentagram_dark_default = {
     knob: {
       bg: "#80eaff",
       bgHover: "#b2f2ff",
-      bgInactive: "#ffffff"
+      bgActive: "#80eaff",
+      bgActiveHover: "#b2f2ff",
+      bgInactive: "#ffffff",
+      bgInactiveHover: "#f4f5f6",
+      bgDisable: "rgba(255, 255, 255, 0.4)"
     },
     text: {
       primary: "#ffffff",
@@ -427,8 +431,8 @@ var pentagram_dark_default = {
       id: {
         bg: "#34474b",
         bgSeries: "#000000",
-        textSeries: "#4b6368",
-        textNumber: "#000000",
+        textSeries: "#b7c5c8",
+        textNumber: "#b7c5c8",
         textCompact: "rgba(255, 255, 255, 0.48)"
       },
       subentity: {
@@ -441,6 +445,9 @@ var pentagram_dark_default = {
         textCompact: "rgba(255, 255, 255, 0.48)"
       }
     },
+    toast: {
+      bg: "#34474b"
+    },
     toggleButton: {
       bg: "rgba(178, 242, 255, 0.1)",
       bgHover: "rgba(178, 242, 255, 0.15)",
@@ -507,7 +514,7 @@ var pentagram_light_default = {
     secondary: "rgba(0, 0, 0, 0.75)",
     tertiary: "rgba(0, 0, 0, 0.6)",
     brand: {
-      primary: "#22a8c3",
+      primary: "#1b8398",
       secondary: "#31cae8"
     },
     brandExtra: {
@@ -663,9 +670,9 @@ var pentagram_light_default = {
         borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(80, 49, 232, 0.4)",
-        bgHover: "rgba(149, 128, 255, 0.4)",
-        bgPress: "rgba(80, 49, 232, 0.4)",
+        bg: "#bfb2ff",
+        bgHover: "#d4ccff",
+        bgPress: "#9580ff",
         border: "#9580ff",
         borderHover: "#bfb2ff",
         borderPress: "rgba(255, 255, 255, 0)"
@@ -705,11 +712,11 @@ var pentagram_light_default = {
         borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(232, 79, 48, 0.4)",
-        bgHover: "rgba(246, 112, 85, 0.4)",
-        bgPress: "rgba(195, 61, 34, 0.4)",
-        border: "rgba(246, 112, 85, 0.32)",
-        borderHover: "rgba(246, 112, 85, 0.32)",
+        bg: "#ffbfb2",
+        bgHover: "#ffd5cc",
+        bgPress: "#ff9580",
+        border: "#ff9580",
+        borderHover: "#ffbfb2",
         borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
@@ -751,13 +758,13 @@ var pentagram_light_default = {
       border: "#31cae8"
     },
     check: {
-      bg: "#ccf6ff",
-      bgHover: "#e5fbff",
+      bg: "#233134",
+      bgHover: "#4b6368",
       bgDisable: "rgba(0, 0, 0, 0.25)",
-      border: "#80eaff",
-      borderHover: "#b2f2ff",
+      border: "#233134",
+      borderHover: "#4b6368",
       borderDisable: "rgba(0, 0, 0, 0)",
-      icon: "#000000"
+      icon: "#ffffff"
     },
     faint: {
       bg: "rgba(0, 0, 0, 0.15)",
@@ -766,22 +773,26 @@ var pentagram_light_default = {
       borderHover: "rgba(0, 0, 0, 0.15)"
     },
     slider: {
-      bg: "#80eaff",
-      bgHover: "#b2f2ff",
+      bg: "#233134",
+      bgHover: "#4b6368",
       bgDisable: "#cccccc"
     },
     switch: {
-      bg: "#ccf6ff",
-      bgHover: "#e5fbff",
+      bg: "#233134",
+      bgHover: "#4b6368",
       bgDisable: "rgba(0, 0, 0, 0.25)",
-      border: "#80eaff",
-      borderHover: "#b2f2ff",
+      border: "#233134",
+      borderHover: "#4b6368",
       borderDisable: "rgba(0, 0, 0, 0)"
     },
     knob: {
-      bg: "#000000",
-      bgHover: "#233134",
-      bgInactive: "#000000"
+      bg: "#233134",
+      bgHover: "#4b6368",
+      bgActive: "#ffffff",
+      bgActiveHover: "#f4f5f6",
+      bgInactive: "#ffffff",
+      bgInactiveHover: "#f4f5f6",
+      bgDisable: "rgba(0, 0, 0, 0.3)"
     },
     text: {
       primary: "#000000",
@@ -839,17 +850,20 @@ var pentagram_light_default = {
         textCompact: "rgba(0, 0, 0, 0.48)"
       }
     },
+    toast: {
+      bg: "#34474b"
+    },
     toggleButton: {
       bg: "rgba(0, 0, 0, 0.08)",
       bgHover: "rgba(0, 0, 0, 0.15)",
-      bgActive: "#ccf6ff",
+      bgActive: "#233134",
       bgDisable: "rgba(0, 0, 0, 0.2)",
       border: "rgba(0, 0, 0, 0.1)",
       borderHover: "rgba(0, 0, 0, 0.15)",
-      borderActive: "#80eaff",
+      borderActive: "#233134",
       borderDisable: "rgba(0, 0, 0, 0)",
       text: "#000000",
-      textActive: "#000000",
+      textActive: "#ffffff",
       textDisable: "rgba(0, 0, 0, 0.36)"
     },
     appButton: {
@@ -1179,7 +1193,11 @@ var ltg_dark_default = {
     knob: {
       bg: "#ffffff",
       bgHover: "#f6f8f9",
-      bgInactive: "#ffffff"
+      bgActive: "#ffffff",
+      bgActiveHover: "#f6f8f9",
+      bgInactive: "#ffffff",
+      bgInactiveHover: "#f6f8f9",
+      bgDisable: "#ffffff"
     },
     text: {
       primary: "#ffffff",
@@ -1223,8 +1241,8 @@ var ltg_dark_default = {
       id: {
         bg: "#d7dee0",
         bgSeries: "#000000",
-        textSeries: "#d7dee0",
-        textNumber: "#000000",
+        textSeries: "#b7c5c8",
+        textNumber: "#b7c5c8",
         textCompact: "rgba(255, 255, 255, 0.48)"
       },
       subentity: {
@@ -1237,6 +1255,9 @@ var ltg_dark_default = {
         textCompact: "rgba(255, 255, 255, 0.48)"
       }
     },
+    toast: {
+      bg: "#233134"
+    },
     toggleButton: {
       bg: "rgba(255, 255, 255, 0.1)",
       bgHover: "rgba(255, 255, 255, 0.15)",
@@ -1283,6 +1304,7 @@ var spacing = {
 var radius = {
   button: 4,
   card: 12,
+  contextMenu: 8,
   input: 4,
   tagSmall: 4,
   tagMedium: 6,
@@ -1298,7 +1320,8 @@ var shadow = {
   surface: "0px 1px 2px rgba(7, 7, 8, 0.2), 0px 2px 6px 2px rgba(7, 7, 8, 0.1)",
   surfaceHover: "0px 4px 8px 3px rgba(7, 7, 8, 0.1), 0px 1px 3px rgba(7, 7, 8, 0.2)",
   popover: "0px 6px 10px 4px rgba(7, 7, 8, 0.1), 0px 2px 3px rgba(7, 7, 8, 0.2)",
-  modal: "0px 8px 12px 6px rgba(7, 7, 8, 0.1), 0px 4px 4px rgba(7, 7, 8, 0.2)"
+  modal: "0px 8px 12px 6px rgba(7, 7, 8, 0.1), 0px 4px 4px rgba(7, 7, 8, 0.2)",
+  contextMenu: "0px 4px 12px rgba(0, 0, 0, 0.15)"
 };
 
 // src/tokens/fonts.ts
@@ -1375,11 +1398,11 @@ var typographyTokens = {
     },
     basic: {
       display: {
-        fontSize: 48,
-        lineHeight: "48px",
-        fontWeight: 800,
-        scaleStep: "550",
-        lineHeightCategory: "display"
+        fontSize: 28,
+        lineHeight: "36px",
+        fontWeight: 500,
+        scaleStep: "300",
+        lineHeightCategory: "compact"
       },
       "body-lg": {
         fontSize: 18,
@@ -2321,26 +2344,29 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         const configs = {
           xl: {
             size: 24,
+            iconSize: 10,
             fontSize: 20,
             lineHeight: 22,
             descriptionFontSize: 18,
             descriptionLineHeight: 20,
             labelGap: 12,
             textGap: 4,
-            borderWidth: 2
+            borderWidth: 1
           },
           lg: {
             size: 20,
+            iconSize: 8,
             fontSize: 18,
             lineHeight: 20,
             descriptionFontSize: 16,
             descriptionLineHeight: 18,
             labelGap: 10,
             textGap: 2,
-            borderWidth: 2
+            borderWidth: 1
           },
           md: {
             size: 18,
+            iconSize: 8,
             fontSize: 16,
             lineHeight: 18,
             descriptionFontSize: 14,
@@ -2351,11 +2377,12 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           },
           sm: {
             size: 16,
+            iconSize: 6,
             fontSize: 14,
             lineHeight: 16,
             descriptionFontSize: 12,
             descriptionLineHeight: 14,
-            labelGap: 8,
+            labelGap: 6,
             textGap: 0,
             borderWidth: 1
           }
@@ -3187,75 +3214,95 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
       contextMenu: (size) => {
         const configs = {
           xl: {
-            paddingVertical: 8,
+            paddingVertical: 0,
             itemPaddingHorizontal: 16,
             itemPaddingVertical: 18,
             fontSize: 20,
-            lineHeight: 22,
+            lineHeight: 26,
             descriptionFontSize: 18,
             iconSize: 18,
             gap: 12,
             minWidth: 276,
+            panelWidth: 320,
+            statusDotSize: 12,
+            iconWrapperSize: 40,
+            triggerOffset: 4,
+            borderRadius: 8,
             // Search sizing from Figma
             searchPaddingHorizontal: 16,
             searchPaddingVertical: 18,
             searchGap: 18,
             searchFontSize: 20,
-            searchLineHeight: 22,
+            searchLineHeight: 26,
             searchIconSize: 18
           },
           lg: {
-            paddingVertical: 8,
+            paddingVertical: 0,
             itemPaddingHorizontal: 14,
             itemPaddingVertical: 14,
             fontSize: 18,
-            lineHeight: 20,
+            lineHeight: 24,
             descriptionFontSize: 16,
             iconSize: 18,
             gap: 10,
             minWidth: 220,
+            panelWidth: 296,
+            statusDotSize: 10,
+            iconWrapperSize: 36,
+            triggerOffset: 4,
+            borderRadius: 8,
             // Search sizing from Figma
             searchPaddingHorizontal: 14,
             searchPaddingVertical: 14,
             searchGap: 14,
             searchFontSize: 18,
-            searchLineHeight: 20,
+            searchLineHeight: 24,
             searchIconSize: 18
           },
           md: {
-            paddingVertical: 8,
+            paddingVertical: 0,
             itemPaddingHorizontal: 12,
             itemPaddingVertical: 11,
             fontSize: 16,
-            lineHeight: 18,
+            lineHeight: 20,
             descriptionFontSize: 14,
             iconSize: 18,
             gap: 8,
             minWidth: 172,
+            panelWidth: 272,
+            statusDotSize: 8,
+            iconWrapperSize: 32,
+            triggerOffset: 4,
+            borderRadius: 8,
             // Search sizing from Figma
             searchPaddingHorizontal: 12,
             searchPaddingVertical: 11,
             searchGap: 10,
             searchFontSize: 16,
-            searchLineHeight: 18,
+            searchLineHeight: 20,
             searchIconSize: 18
           },
           sm: {
-            paddingVertical: 8,
+            paddingVertical: 0,
             itemPaddingHorizontal: 10,
             itemPaddingVertical: 8,
             fontSize: 14,
-            lineHeight: 16,
+            lineHeight: 18,
             descriptionFontSize: 12,
             iconSize: 18,
             gap: 8,
             minWidth: 132,
+            panelWidth: 248,
+            statusDotSize: 6,
+            iconWrapperSize: 24,
+            triggerOffset: 4,
+            borderRadius: 4,
             // Search sizing from Figma
             searchPaddingHorizontal: 10,
             searchPaddingVertical: 7,
             searchGap: 6,
             searchFontSize: 14,
-            searchLineHeight: 16,
+            searchLineHeight: 18,
             searchIconSize: 18
           }
         };