@xsolla/xui-core 0.161.1 → 0.161.2-pr314.1779767525

package/index.d.mts

@@ -157,7 +157,7 @@ var overlay = {
 };
 var layer = {
 	scrim: "rgba(0, 0, 0, 0.5)",
-	float: "rgba(0, 0, 0, 0.5)"
+	float: "rgba(0, 0, 0, 0.8)"
 };
 var control = {
 	brand: {
@@ -253,9 +253,9 @@ var control = {
 			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)"
@@ -295,11 +295,11 @@ var control = {
 			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: {
@@ -337,7 +337,7 @@ var control = {
 		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: {
@@ -374,7 +374,7 @@ var control = {
 		bgActive: "#80eaff",
 		bgActiveHover: "#b2f2ff",
 		bgInactive: "#ffffff",
-		bgInactiveHover: "#f6f8f9",
+		bgInactiveHover: "#f4f5f6",
 		bgDisable: "rgba(255, 255, 255, 0.4)"
 	},
 	text: {
@@ -419,8 +419,8 @@ var control = {
 		id: {
 			bg: "#34474b",
 			bgSeries: "#000000",
-			textSeries: "#4b6368",
-			textNumber: "#000000",
+			textSeries: "#b7c5c8",
+			textNumber: "#b7c5c8",
 			textCompact: "rgba(255, 255, 255, 0.48)"
 		},
 		subentity: {
@@ -433,6 +433,9 @@ var control = {
 			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)",
@@ -850,6 +853,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -1250,6 +1256,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -1650,6 +1659,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -2050,6 +2062,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -2450,6 +2465,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -3357,6 +3375,9 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -3756,6 +3777,9 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -4155,6 +4179,9 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -6229,6 +6256,9 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                         textCompact: string;
                     };
                 };
+                toast: {
+                    bg: string;
+                };
                 toggleButton: {
                     bg: string;
                     bgHover: string;
@@ -6628,6 +6658,9 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                         textCompact: string;
                     };
                 };
+                toast: {
+                    bg: string;
+                };
                 toggleButton: {
                     bg: string;
                     bgHover: string;
@@ -7027,6 +7060,9 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                         textCompact: string;
                     };
                 };
+                toast: {
+                    bg: string;
+                };
                 toggleButton: {
                     bg: string;
                     bgHover: string;

package/index.d.ts

@@ -157,7 +157,7 @@ var overlay = {
 };
 var layer = {
 	scrim: "rgba(0, 0, 0, 0.5)",
-	float: "rgba(0, 0, 0, 0.5)"
+	float: "rgba(0, 0, 0, 0.8)"
 };
 var control = {
 	brand: {
@@ -253,9 +253,9 @@ var control = {
 			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)"
@@ -295,11 +295,11 @@ var control = {
 			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: {
@@ -337,7 +337,7 @@ var control = {
 		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: {
@@ -374,7 +374,7 @@ var control = {
 		bgActive: "#80eaff",
 		bgActiveHover: "#b2f2ff",
 		bgInactive: "#ffffff",
-		bgInactiveHover: "#f6f8f9",
+		bgInactiveHover: "#f4f5f6",
 		bgDisable: "rgba(255, 255, 255, 0.4)"
 	},
 	text: {
@@ -419,8 +419,8 @@ var control = {
 		id: {
 			bg: "#34474b",
 			bgSeries: "#000000",
-			textSeries: "#4b6368",
-			textNumber: "#000000",
+			textSeries: "#b7c5c8",
+			textNumber: "#b7c5c8",
 			textCompact: "rgba(255, 255, 255, 0.48)"
 		},
 		subentity: {
@@ -433,6 +433,9 @@ var control = {
 			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)",
@@ -850,6 +853,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -1250,6 +1256,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -1650,6 +1659,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -2050,6 +2062,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -2450,6 +2465,9 @@ declare const colors: {
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -3357,6 +3375,9 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -3756,6 +3777,9 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -4155,6 +4179,9 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                     textCompact: string;
                 };
             };
+            toast: {
+                bg: string;
+            };
             toggleButton: {
                 bg: string;
                 bgHover: string;
@@ -6229,6 +6256,9 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                         textCompact: string;
                     };
                 };
+                toast: {
+                    bg: string;
+                };
                 toggleButton: {
                     bg: string;
                     bgHover: string;
@@ -6628,6 +6658,9 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                         textCompact: string;
                     };
                 };
+                toast: {
+                    bg: string;
+                };
                 toggleButton: {
                     bg: string;
                     bgHover: string;
@@ -7027,6 +7060,9 @@ declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
                         textCompact: string;
                     };
                 };
+                toast: {
+                    bg: string;
+                };
                 toggleButton: {
                     bg: string;
                     bgHover: string;

package/index.js

@@ -172,7 +172,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: {
@@ -268,9 +268,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)"
@@ -310,11 +310,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: {
@@ -352,7 +352,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: {
@@ -389,7 +389,7 @@ var pentagram_dark_default = {
       bgActive: "#80eaff",
       bgActiveHover: "#b2f2ff",
       bgInactive: "#ffffff",
-      bgInactiveHover: "#f6f8f9",
+      bgInactiveHover: "#f4f5f6",
       bgDisable: "rgba(255, 255, 255, 0.4)"
     },
     text: {
@@ -434,8 +434,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: {
@@ -448,6 +448,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)",
@@ -514,7 +517,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: {
@@ -670,9 +673,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)"
@@ -712,11 +715,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: {
@@ -758,13 +761,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)",
@@ -773,26 +776,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",
-      bgActive: "#000000",
-      bgActiveHover: "#233134",
-      bgInactive: "#000000",
-      bgInactiveHover: "#233134",
-      bgDisable: "rgba(0, 0, 0, 0.4)"
+      bg: "#233134",
+      bgHover: "#4b6368",
+      bgActive: "#ffffff",
+      bgActiveHover: "#f4f5f6",
+      bgInactive: "#ffffff",
+      bgInactiveHover: "#f4f5f6",
+      bgDisable: "rgba(0, 0, 0, 0.3)"
     },
     text: {
       primary: "#000000",
@@ -850,17 +853,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: {
@@ -1194,7 +1200,7 @@ var ltg_dark_default = {
       bgActiveHover: "#f6f8f9",
       bgInactive: "#ffffff",
       bgInactiveHover: "#f6f8f9",
-      bgDisable: "rgba(255, 255, 255, 0.4)"
+      bgDisable: "#ffffff"
     },
     text: {
       primary: "#ffffff",
@@ -1238,8 +1244,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: {
@@ -1252,6 +1258,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)",