@xsolla/xui-core 0.216.1 → 0.217.0

package/index.mjs

@@ -2624,18 +2624,36 @@ var colors = {
 };
 
 // src/tokens/spacing.ts
+var spacingScale = {
+  "25": 2,
+  "50": 4,
+  "75": 6,
+  "100": 8,
+  "150": 12,
+  "200": 16,
+  "250": 20,
+  "300": 24,
+  "350": 28,
+  "400": 32,
+  "450": 36,
+  "500": 40,
+  "600": 48,
+  "700": 56,
+  "800": 64,
+  "900": 72
+};
 var spacing = {
-  xs: 4,
-  sm: 8,
-  md: 16,
-  lg: 24,
-  xl: 32,
+  xs: spacingScale["50"],
+  sm: spacingScale["100"],
+  md: spacingScale["200"],
+  lg: spacingScale["300"],
+  xl: spacingScale["400"],
   /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
-  s: 8,
+  s: spacingScale["100"],
   /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
-  m: 16,
+  m: spacingScale["200"],
   /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
-  l: 24
+  l: spacingScale["300"]
 };
 var radius = {
   button: 4,
@@ -2700,7 +2718,8 @@ var shape = {
     xl: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
     lg: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
     md: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
-    sm: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
+    sm: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] },
+    xs: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
   },
   switch: {
     xl: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
@@ -2763,7 +2782,9 @@ var shape = {
     borderRadius: radiusScale["100"]
   },
   toast: {
-    borderRadius: radiusScale["50"]
+    borderRadius: radiusScale["50"],
+    /** Figma "toast/frame/border-width" is 0 — toast is borderless by design. */
+    borderWidth: 0
   },
   toggleButtonGroup: {
     xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
@@ -2922,6 +2943,92 @@ var responsiveTypographyScale = {
 };
 
 // src/tokens/typography.ts
+var displayVariants = {
+  b2c: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 700,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 700,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["300"].common,
+      lineHeight: `${lineHeightCompact["300"].common}px`,
+      fontWeight: 500,
+      scaleStep: "300",
+      lineHeightCategory: "compact",
+      fontRole: "compact"
+    }
+  },
+  b2b: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 300,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 300,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["750"].common,
+      lineHeight: `${lineHeightDisplay["750"].common}px`,
+      fontWeight: 400,
+      scaleStep: "750",
+      lineHeightCategory: "display",
+      fontRole: "display"
+    }
+  },
+  corpsite: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 300,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 300,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["750"].common,
+      lineHeight: `${lineHeightDisplay["750"].common}px`,
+      fontWeight: 400,
+      scaleStep: "750",
+      lineHeightCategory: "display",
+      fontRole: "display"
+    }
+  }
+};
 var typographyTokens = {
   b2c: {
     heading: {
@@ -2962,13 +3069,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      display: {
-        fontSize: fontSize["550"].common,
-        lineHeight: `${lineHeightDisplay["550"].common}px`,
-        fontWeight: 800,
-        scaleStep: "550",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.b2c,
+      display: displayVariants.b2c["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3075,13 +3177,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      display: {
-        fontSize: fontSize["750"].common,
-        lineHeight: `${lineHeightDisplay["750"].common}px`,
-        fontWeight: 400,
-        scaleStep: "750",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.b2b,
+      display: displayVariants.b2b["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3188,16 +3285,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      // Figma splits corpsite display into display-lg (96px) / display-md (80px)
-      // / display-sm (64px). The app models a single `display`; mapped to
-      // display-lg (step 900) — the largest, matching Figma's primary display.
-      display: {
-        fontSize: fontSize["900"].common,
-        lineHeight: `${lineHeightDisplay["900"].common}px`,
-        fontWeight: 300,
-        scaleStep: "900",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.corpsite,
+      display: displayVariants.corpsite["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3275,8 +3364,18 @@ var getTypographyVariant = (productContext, variant) => {
   if (variant in tokens.heading) {
     return tokens.heading[variant];
   }
-  if (variant === "display") {
-    return tokens.basic.display;
+  const displayVariantMap = {
+    display: "display-lg",
+    displayLg: "display-lg",
+    displayMd: "display-md",
+    displaySm: "display-sm",
+    "display-lg": "display-lg",
+    "display-md": "display-md",
+    "display-sm": "display-sm"
+  };
+  const displayKey = displayVariantMap[variant];
+  if (displayKey) {
+    return tokens.basic[displayKey];
   }
   const bodyVariantMap = {
     bodyLg: "body-lg",
@@ -4955,7 +5054,10 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         triggerGap: 12,
         triggerMinHeight: 56,
         surfaceRadius: radiusScale["50"],
-        cellRadius: radiusScale["100"],
+        // Must match surfaceRadius: the root clips with `overflow: hidden`, so a
+        // larger cell radius makes the trigger cell's corners show through the
+        // smaller root arc (XUITSD-55).
+        cellRadius: radiusScale["50"],
         iconSlotSize: 32,
         iconSlotRadius: radiusScale["50"],
         chevronSize: 24,
@@ -5201,6 +5303,7 @@ export {
   shadow,
   shape,
   spacing,
+  spacingScale,
   stroke,
   themeConfig,
   typography,