@xsolla/xui-core 0.161.3 → 0.162.0

package/index.js

@@ -1287,13 +1287,419 @@ var ltg_dark_default = {
   }
 };
 
+// src/tokens/blueprints.json
+var blueprints_default = {
+  background: {
+    primary: "#ffffff",
+    secondary: "#f3f3f2",
+    brand: {
+      primary: "#80eaff",
+      secondary: "#b2f2ff"
+    },
+    brandExtra: {
+      primary: "#7055f6",
+      secondary: "#9580ff"
+    },
+    inverse: "#000000",
+    static: {
+      dark: "#000000",
+      light: "#ffffff"
+    },
+    success: {
+      primary: "#95ff80",
+      secondary: "#bfffb2"
+    },
+    warning: {
+      primary: "#ffc380",
+      secondary: "#ffdbb2"
+    },
+    alert: {
+      primary: "#f67055",
+      secondary: "#ffbfb2"
+    },
+    neutral: {
+      primary: "#99aeb2",
+      secondary: "#d7dee0"
+    }
+  },
+  content: {
+    primary: "#000000",
+    secondary: "rgba(0, 0, 0, 0.75)",
+    tertiary: "rgba(0, 0, 0, 0.6)",
+    brand: {
+      primary: "#22a8c3",
+      secondary: "#31cae8"
+    },
+    brandExtra: {
+      primary: "#301b98",
+      secondary: "#3d22c3"
+    },
+    inverse: "#ffffff",
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    },
+    success: {
+      primary: "#30981b",
+      secondary: "#3dc322"
+    },
+    warning: {
+      primary: "#c37822",
+      secondary: "#f6ab55"
+    },
+    alert: {
+      primary: "#e84f30",
+      secondary: "#f67055"
+    },
+    neutral: {
+      primary: "#34474b",
+      secondary: "#607f85"
+    },
+    on: {
+      brand: "#000000",
+      brandExtra: "#000000",
+      success: "#000000",
+      warning: "#000000",
+      alert: "#ffffff",
+      neutral: "#000000"
+    }
+  },
+  border: {
+    primary: "#000000",
+    secondary: "rgba(0, 0, 0, 0.1)",
+    brand: "#31cae8",
+    brandExtra: "#5031e8",
+    inverse: "rgba(255, 255, 255, 0.15)",
+    success: "#50e831",
+    warning: "#e89331",
+    alert: "#e84f30",
+    neutral: "#7b989d"
+  },
+  overlay: {
+    mono: "rgba(0, 0, 0, 0.05)",
+    brand: "rgba(128, 234, 255, 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)",
+    monoHover: "rgba(0, 0, 0, 0.1)"
+  },
+  layer: {
+    scrim: "rgba(0, 0, 0, 0.75)",
+    float: "rgba(0, 0, 0, 0.5)"
+  },
+  control: {
+    brand: {
+      primary: {
+        bg: "#80eaff",
+        bgHover: "#b2f2ff",
+        bgPress: "#55dcf6",
+        bgDisable: "#cccccc",
+        border: "#31cae8",
+        borderHover: "#55dcf6",
+        borderPress: "rgba(255, 255, 255, 0)",
+        borderDisable: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "#ccf6ff",
+        bgHover: "#e5fbff",
+        bgPress: "#b2f2ff",
+        border: "#80eaff",
+        borderHover: "#b2f2ff",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "#e5fbff",
+        bgPress: "#ccf6ff",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#1b8398",
+        disable: "#999999",
+        ghost: "#22a8c3"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(34, 168, 195, 0.04)",
+        bgPress: "rgba(34, 168, 195, 0.08)",
+        border: "rgba(34, 168, 195, 0.1)",
+        borderHover: "rgba(34, 168, 195, 0.16)",
+        borderPress: "rgba(34, 168, 195, 0.1)"
+      }
+    },
+    mono: {
+      primary: {
+        bg: "#141d1f",
+        bgHover: "#233134",
+        bgPress: "#000000",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "#dadbd7",
+        bgHover: "#e6e7e4",
+        bgPress: "#c1c2bc",
+        border: "#c1c2bc",
+        borderHover: "#dadbd7",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "#f3f3f2",
+        bgPress: "#e6e7e4",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#000000",
+        ghost: "#000000"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(0, 0, 0, 0.04)",
+        bgPress: "rgba(0, 0, 0, 0.08)",
+        border: "rgba(0, 0, 0, 0.1)",
+        borderHover: "rgba(0, 0, 0, 0.16)",
+        borderPress: "rgba(0, 0, 0, 0.1)"
+      }
+    },
+    brandExtra: {
+      primary: {
+        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(80, 49, 232, 0.4)",
+        bgHover: "rgba(149, 128, 255, 0.4)",
+        bgPress: "rgba(80, 49, 232, 0.4)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        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)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#301b98",
+        ghost: "#79971b"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(121, 151, 27, 0.04)",
+        bgPress: "rgba(121, 151, 27, 0.08)",
+        border: "rgba(121, 151, 27, 0.1)",
+        borderHover: "rgba(121, 151, 27, 0.16)",
+        borderPress: "rgba(121, 151, 27, 0.1)"
+      }
+    },
+    alert: {
+      bg: "#ffbfb2",
+      border: "#e84f30",
+      primary: {
+        bg: "#e84f30",
+        bgHover: "#f67055",
+        bgPress: "#c33d22",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        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)",
+        borderPress: "rgba(246, 112, 85, 0.32)"
+      },
+      tertiary: {
+        bg: "rgba(255, 43, 0, 0)",
+        bgHover: "rgba(255, 85, 51, 0.07)",
+        bgPress: "rgba(204, 34, 0, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#c33d22",
+        ghost: "#c33d22"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(195, 61, 34, 0.04)",
+        bgPress: "rgba(195, 61, 34, 0.08)",
+        border: "rgba(195, 61, 34, 0.1)",
+        borderHover: "rgba(195, 61, 34, 0.16)",
+        borderPress: "rgba(195, 61, 34, 0.1)"
+      }
+    },
+    input: {
+      bg: "#ffffff",
+      bgHover: "#f4f5f6",
+      bgDisable: "#e8eced",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.15)",
+      borderDisable: "rgba(0, 0, 0, 0)",
+      text: "#000000",
+      placeholder: "rgba(0, 0, 0, 0.6)",
+      textDisable: "rgba(5, 5, 5, 0.36)"
+    },
+    focus: {
+      bg: "#ffffff",
+      border: "#31cae8"
+    },
+    check: {
+      bg: "#ccf6ff",
+      bgHover: "#e5fbff",
+      bgDisable: "rgba(0, 0, 0, 0.25)",
+      border: "#80eaff",
+      borderHover: "#b2f2ff",
+      borderDisable: "rgba(0, 0, 0, 0)",
+      icon: "#000000"
+    },
+    faint: {
+      bg: "rgba(0, 0, 0, 0.15)",
+      bgHover: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.15)"
+    },
+    slider: {
+      bg: "#80eaff",
+      bgHover: "#b2f2ff",
+      bgDisable: "#cccccc"
+    },
+    switch: {
+      bg: "#000000",
+      bgHover: "#1b2628",
+      bgDisable: "rgba(0, 0, 0, 0.25)",
+      border: "rgba(0, 0, 0, 0)",
+      borderHover: "rgba(0, 0, 0, 0)",
+      borderDisable: "rgba(0, 0, 0, 0)"
+    },
+    knob: {
+      bg: "#ffffff",
+      bgHover: "#e8eced",
+      bgActive: "#ffffff",
+      bgActiveHover: "#e8eced",
+      bgInactive: "#000000",
+      bgInactiveHover: "#e8eced",
+      bgDisable: "#000000"
+    },
+    text: {
+      primary: "#000000",
+      disable: "rgba(0, 0, 0, 0.4)"
+    },
+    link: {
+      primary: "#22a8c3",
+      primaryHover: "#31cae8",
+      secondary: "#9bc323",
+      secondaryHover: "#bae831"
+    },
+    segmented: {
+      bg: "rgba(0, 0, 0, 0.08)",
+      bgHover: "rgba(0, 0, 0, 0.08)",
+      bgActive: "#ffffff",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.1)",
+      borderActive: "rgba(0, 0, 0, 0)",
+      text: "#000000",
+      textDisable: "rgba(0, 0, 0, 0.4)"
+    },
+    tagLabel: {
+      product: {
+        bg: "#dfff80",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      rarity: {
+        bg: "#141d1f",
+        text: "#22a8c3"
+      },
+      name: {
+        bg: "#ffffff",
+        text: "#000000"
+      },
+      account: {
+        bg: "#9580ff",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      id: {
+        bg: "#dadbd7",
+        bgSeries: "#000000",
+        textSeries: "#d7dee0",
+        textNumber: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      subentity: {
+        bg: "#a8aaa2",
+        text: "#000000"
+      },
+      item: {
+        bg: "#55dcf6",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      }
+    },
+    toast: {
+      bg: "#233134"
+    },
+    toggleButton: {
+      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",
+      textActive: "#000000",
+      textDisable: "rgba(0, 0, 0, 0.36)"
+    },
+    appButton: {
+      bg: "#dadbd7",
+      bgHover: "#c1c2bc",
+      bgPress: "#a8aaa2",
+      border: "#c1c2bc",
+      borderHover: "#a8aaa2",
+      borderPress: "rgba(255, 255, 255, 0)",
+      text: "#000000",
+      textDisable: "#999999"
+    }
+  }
+};
+
 // src/tokens/colors.ts
 var colors = {
   dark: pentagram_dark_default,
   light: pentagram_light_default,
   "pentagram-dark": pentagram_dark_default,
   "pentagram-light": pentagram_light_default,
-  "ltg-dark": ltg_dark_default
+  "ltg-dark": ltg_dark_default,
+  blueprints: blueprints_default
 };
 
 // src/tokens/spacing.ts