@xsolla/xui-core 0.111.0 → 0.112.0

package/index.mjs

@@ -321,13 +321,14 @@ var xsolla_dark_default = {
     toggleButton: {
       bg: "rgba(255, 255, 255, 0.1)",
       bgHover: "rgba(255, 255, 255, 0.15)",
-      bgPress: "#000000",
+      bgActive: "#000000",
       bgDisable: "rgba(255, 255, 255, 0.06)",
       border: "rgba(255, 255, 255, 0.16)",
       borderHover: "rgba(255, 255, 255, 0.16)",
-      borderPress: "rgba(255, 255, 255, 0)",
+      borderActive: "rgba(255, 255, 255, 0)",
       borderDisable: "rgba(255, 255, 255, 0.16)",
       text: "#e8eced",
+      textActive: "#e8eced",
       textDisable: "rgba(255, 255, 255, 0.4)"
     }
   }
@@ -653,13 +654,14 @@ var xsolla_light_default = {
     toggleButton: {
       bg: "#ffffff",
       bgHover: "rgba(0, 0, 0, 0.06)",
-      bgPress: "rgba(0, 0, 0, 0.1)",
+      bgActive: "rgba(0, 0, 0, 0.1)",
       bgDisable: "rgba(0, 0, 0, 0.15)",
       border: "rgba(0, 0, 0, 0.1)",
       borderHover: "rgba(0, 0, 0, 0.1)",
-      borderPress: "rgba(0, 0, 0, 0.1)",
+      borderActive: "rgba(0, 0, 0, 0.1)",
       borderDisable: "rgba(0, 0, 0, 0.1)",
       text: "#000000",
+      textActive: "#000000",
       textDisable: "rgba(255, 255, 255, 0.4)"
     }
   }
@@ -670,7 +672,6 @@ var pentagram_dark_default = {
   background: {
     primary: "#1b2628",
     secondary: "#141d1f",
-    inverse: "#ffffff",
     brand: {
       primary: "#80eaff",
       secondary: "#0b3841"
@@ -679,6 +680,7 @@ var pentagram_dark_default = {
       primary: "#cef655",
       secondary: "#566c13"
     },
+    inverse: "#ffffff",
     success: {
       primary: "#95ff80",
       secondary: "#14410b"
@@ -700,7 +702,6 @@ var pentagram_dark_default = {
     primary: "#e8eced",
     secondary: "rgba(232, 236, 237, 0.72)",
     tertiary: "rgba(232, 236, 237, 0.58)",
-    inverse: "#000000",
     brand: {
       primary: "#80eaff",
       secondary: "#55dcf6"
@@ -709,6 +710,11 @@ var pentagram_dark_default = {
       primary: "#cef655",
       secondary: "#9bc323"
     },
+    inverse: "#000000",
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    },
     success: {
       primary: "#70f655",
       secondary: "#3dc322"
@@ -732,25 +738,21 @@ var pentagram_dark_default = {
       warning: "#000000",
       alert: "#ffffff",
       neutral: "#ffffff"
-    },
-    static: {
-      light: "#ffffff",
-      dark: "#000000"
     }
   },
   border: {
     primary: "#ffffff",
     secondary: "rgba(255, 255, 255, 0.16)",
-    inverse: "rgba(0, 0, 0, 0.15)",
     brand: "#55dcf6",
     brandExtra: "#cef655",
+    inverse: "rgba(0, 0, 0, 0.15)",
     success: "#70f655",
     warning: "#f6ab55",
     alert: "#f67055",
     neutral: "#9580ff"
   },
   overlay: {
-    mono: "rgba(255, 255, 255, 0.1)",
+    mono: "rgba(178, 242, 255, 0.06)",
     brand: "rgba(128, 234, 255, 0.2)",
     brandExtra: "rgba(206, 246, 85, 0.3)",
     success: "rgba(149, 255, 128, 0.2)",
@@ -929,15 +931,15 @@ var pentagram_dark_default = {
       }
     },
     input: {
-      bg: "#34474b",
-      bgHover: "#4b6368",
-      bgDisable: "#34474b",
-      border: "#4b6368",
-      borderHover: "#607f85",
+      bg: "rgba(178, 242, 255, 0.12)",
+      bgHover: "rgba(178, 242, 255, 0.15)",
+      bgDisable: "rgba(178, 242, 255, 0.25)",
+      border: "rgba(178, 242, 255, 0.1)",
+      borderHover: "rgba(178, 242, 255, 0.15)",
       borderDisable: "rgba(255, 255, 255, 0)",
-      text: "#e8eced",
-      placeholder: "#7b989d",
-      textDisable: "rgba(215, 222, 224, 0.2)"
+      text: "#ffffff",
+      placeholder: "rgba(255, 255, 255, 0.56)",
+      textDisable: "rgba(255, 255, 255, 0.36)"
     },
     focus: {
       bg: "#000000",
@@ -946,21 +948,35 @@ var pentagram_dark_default = {
     check: {
       bg: "#135d6c",
       bgHover: "#1b8398",
-      bgDisable: "rgba(255, 255, 255, 0.25)",
+      bgDisable: "rgba(178, 242, 255, 0.25)",
       border: "#22a8c3",
       borderHover: "#22a8c3",
       borderDisable: "rgba(255, 255, 255, 0)",
       text: "#80eaff"
     },
     faint: {
-      bg: "rgba(255, 255, 255, 0.15)",
-      bgHover: "rgba(255, 255, 255, 0.2)",
-      border: "rgba(255, 255, 255, 0.1)",
-      borderHover: "rgba(255, 255, 255, 0.15)"
+      bg: "rgba(178, 242, 255, 0.15)",
+      bgHover: "rgba(178, 242, 255, 0.2)",
+      border: "rgba(178, 242, 255, 0.1)",
+      borderHover: "rgba(178, 242, 255, 0.15)"
+    },
+    slider: {
+      bg: "#80eaff",
+      bgHover: "#b2f2ff",
+      bgDisable: "rgba(52, 71, 75, 0.85)"
     },
     switch: {
-      bg: "rgba(255, 255, 255, 0.1)",
-      bgHover: "rgba(255, 255, 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: {
+      bg: "#80eaff",
+      bgHover: "#b2f2ff",
+      bgInactive: "#ffffff"
     },
     text: {
       primary: "#ffffff",
@@ -973,26 +989,27 @@ var pentagram_dark_default = {
       secondaryHover: "#dfff80"
     },
     segmented: {
-      bg: "rgba(0, 0, 0, 0.3)",
-      bgHover: "rgba(255, 255, 255, 0.1)",
-      bgActive: "rgba(255, 255, 255, 0.15)",
-      border: "rgba(255, 255, 255, 0.1)",
-      borderHover: "rgba(255, 255, 255, 0.1)",
+      bg: "rgba(178, 242, 255, 0.1)",
+      bgHover: "rgba(178, 242, 255, 0.1)",
+      bgActive: "rgba(178, 242, 255, 0.15)",
+      border: "rgba(178, 242, 255, 0.1)",
+      borderHover: "rgba(178, 242, 255, 0.1)",
       borderActive: "rgba(255, 255, 255, 0)",
       text: "#ffffff",
       textDisable: "rgba(255, 255, 255, 0.4)"
     },
     toggleButton: {
-      bg: "#34474b",
-      bgHover: "#4b6368",
-      bgPress: "#2d4448",
-      bgDisable: "#34474b",
-      border: "#4b6368",
-      borderHover: "#607f85",
-      borderPress: "#b2f2ff",
+      bg: "rgba(178, 242, 255, 0.12)",
+      bgHover: "rgba(178, 242, 255, 0.15)",
+      bgActive: "#135d6c",
+      bgDisable: "rgba(178, 242, 255, 0.25)",
+      border: "rgba(178, 242, 255, 0.1)",
+      borderHover: "rgba(178, 242, 255, 0.15)",
+      borderActive: "#22a8c3",
       borderDisable: "rgba(255, 255, 255, 0)",
-      text: "#e8eced",
-      textDisable: "rgba(255, 255, 255, 0.4)"
+      text: "#ffffff",
+      textActive: "#80eaff",
+      textDisable: "rgba(255, 255, 255, 0.36)"
     }
   }
 };
@@ -1002,7 +1019,6 @@ var pentagram_light_default = {
   background: {
     primary: "#ffffff",
     secondary: "#f3f3f2",
-    inverse: "#000000",
     brand: {
       primary: "#80eaff",
       secondary: "#b2f2ff"
@@ -1011,6 +1027,7 @@ var pentagram_light_default = {
       primary: "#cef655",
       secondary: "#dfff80"
     },
+    inverse: "#000000",
     success: {
       primary: "#95ff80",
       secondary: "#bfffb2"
@@ -1032,7 +1049,6 @@ var pentagram_light_default = {
     primary: "#000000",
     secondary: "rgba(0, 0, 0, 0.75)",
     tertiary: "rgba(0, 0, 0, 0.6)",
-    inverse: "#ffffff",
     brand: {
       primary: "#22a8c3",
       secondary: "#31cae8"
@@ -1041,6 +1057,11 @@ var pentagram_light_default = {
       primary: "#79971b",
       secondary: "#9bc323"
     },
+    inverse: "#ffffff",
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    },
     success: {
       primary: "#30981b",
       secondary: "#3dc322"
@@ -1064,18 +1085,14 @@ var pentagram_light_default = {
       warning: "#000000",
       alert: "#ffffff",
       neutral: "#ffffff"
-    },
-    static: {
-      light: "#ffffff",
-      dark: "#000000"
     }
   },
   border: {
     primary: "#000000",
     secondary: "rgba(0, 0, 0, 0.1)",
-    inverse: "rgba(255, 255, 255, 0.15)",
     brand: "#31cae8",
     brandExtra: "#bae831",
+    inverse: "rgba(255, 255, 255, 0.15)",
     success: "#30981b",
     warning: "#e89331",
     alert: "#e84f30",
@@ -1261,15 +1278,15 @@ var pentagram_light_default = {
       }
     },
     input: {
-      bg: "#dadbd7",
-      bgHover: "#c1c2bc",
-      bgDisable: "#dadbd7",
-      border: "#c1c2bc",
-      borderHover: "#a8aaa2",
+      bg: "rgba(0, 0, 0, 0.08)",
+      bgHover: "rgba(0, 0, 0, 0.15)",
+      bgDisable: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.15)",
       borderDisable: "rgba(0, 0, 0, 0)",
-      text: "#050505",
-      placeholder: "#8e9187",
-      textDisable: "rgba(5, 5, 5, 0.2)"
+      text: "#000000",
+      placeholder: "rgba(0, 0, 0, 0.6)",
+      textDisable: "rgba(5, 5, 5, 0.36)"
     },
     focus: {
       bg: "#ffffff",
@@ -1290,9 +1307,23 @@ var pentagram_light_default = {
       border: "rgba(0, 0, 0, 0.1)",
       borderHover: "rgba(0, 0, 0, 0.15)"
     },
+    slider: {
+      bg: "#80eaff",
+      bgHover: "#b2f2ff",
+      bgDisable: "#cccccc"
+    },
     switch: {
-      bg: "rgba(0, 0, 0, 0.1)",
-      bgHover: "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: {
+      bg: "#000000",
+      bgHover: "#233134",
+      bgInactive: "#000000"
     },
     text: {
       primary: "#000000",
@@ -1315,16 +1346,17 @@ var pentagram_light_default = {
       textDisable: "rgba(0, 0, 0, 0.4)"
     },
     toggleButton: {
-      bg: "#dadbd7",
-      bgHover: "#c1c2bc",
-      bgPress: "#d2e4e2",
-      bgDisable: "#dadbd7",
-      border: "#c1c2bc",
-      borderHover: "#a8aaa2",
-      borderPress: "#b2f2ff",
-      borderDisable: "rgba(0, 0, 0, 0.1)",
+      bg: "rgba(0, 0, 0, 0.08)",
+      bgHover: "rgba(0, 0, 0, 0.15)",
+      bgActive: "#ccf6ff",
+      bgDisable: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.15)",
+      borderActive: "#80eaff",
+      borderDisable: "rgba(0, 0, 0, 0)",
       text: "#000000",
-      textDisable: "rgba(255, 255, 255, 0.4)"
+      textActive: "#000000",
+      textDisable: "rgba(0, 0, 0, 0.36)"
     }
   }
 };
@@ -1649,13 +1681,14 @@ var ltg_dark_default = {
     toggleButton: {
       bg: "#ffffff",
       bgHover: "#ffffff",
-      bgPress: "#ffffff",
+      bgActive: "#ffffff",
       bgDisable: "#ffffff",
       border: "#ffffff",
       borderHover: "#ffffff",
-      borderPress: "#ffffff",
+      borderActive: "#ffffff",
       borderDisable: "#ffffff",
       text: "#ffffff",
+      textActive: "#ffffff",
       textDisable: "#ffffff"
     }
   }