@xsolla/xui-core 0.214.1 → 0.216.0

package/index.mjs

@@ -3602,6 +3602,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
     );
   }
   const contextFonts = getFonts(productContext);
+  const contextTypography = getTypographyTokens(productContext);
   return {
     colors: colors[mode],
     spacing,
@@ -3613,7 +3614,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
       heading: contextFonts.heading,
       body: contextFonts.body
     },
-    typographyTokens: getTypographyTokens(productContext),
+    typographyTokens: contextTypography,
     productContext,
     sizing: {
       button: (size) => {
@@ -4622,15 +4623,66 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         };
         return configs[size];
       },
+      /**
+       * SupportingText sizing.
+       *
+       * Typography is bound to the `Theme / Typography` body tokens rather than
+       * hardcoded px values, so a change to the Figma-synced scale propagates
+       * automatically. Each size maps to the body token whose font-size and
+       * compact line-height match the corresponding Figma size variant:
+       *
+       * | size | typography token | font-size / line-height | icon | gap |
+       * | ---- | ---------------- | ----------------------- | ---- | --- |
+       * | xl   | `body-lg`        | 18 / 24                 | 18   | 6   |
+       * | lg   | `body-md`        | 16 / 20                 | 18   | 6   |
+       * | md   | `body-sm`        | 14 / 18                 | 18   | 6   |
+       * | sm   | `body-xs`        | 12 / 16                 | 14   | 4   |
+       * | xs   | `body-xxs`       | 10 / 14                 | 14   | 4   |
+       *
+       * `requiredIndicator` is the required-field asterisk that sits beside a
+       * label. Figma renders it one step down the same scale, so it aliases the
+       * next-smaller size's token instead of carrying its own table.
+       *
+       * `gap` is the spacing between the text and its trailing icon (Figma
+       * `Label & icon` frame item-spacing).
+       *
+       * @see https://www.figma.com/design/m0qqLlCvR29fvqj0EzlLAU/Xsolla-UI-Toolkit?node-id=5680-33147
+       */
       supportingText: (size) => {
-        const configs = {
-          xl: { fontSize: 18, lineHeight: "20px", gap: 6, iconSize: 18 },
-          lg: { fontSize: 16, lineHeight: "18px", gap: 6, iconSize: 18 },
-          md: { fontSize: 14, lineHeight: "16px", gap: 6, iconSize: 18 },
-          sm: { fontSize: 12, lineHeight: "14px", gap: 4, iconSize: 16 },
-          xs: { fontSize: 10, lineHeight: "10px", gap: 4, iconSize: 16 }
+        const typographyBySize = {
+          xl: contextTypography.basic["body-lg"],
+          lg: contextTypography.basic["body-md"],
+          md: contextTypography.basic["body-sm"],
+          sm: contextTypography.basic["body-xs"],
+          xs: contextTypography.basic["body-xxs"]
+        };
+        const dimensions = {
+          xl: { gap: 6, iconSize: 18 },
+          lg: { gap: 6, iconSize: 18 },
+          md: { gap: 6, iconSize: 18 },
+          sm: { gap: 4, iconSize: 14 },
+          xs: { gap: 4, iconSize: 14 }
+        };
+        const requiredIndicatorSizeMap = {
+          xl: "lg",
+          lg: "md",
+          md: "sm",
+          sm: "xs",
+          xs: "xs"
+        };
+        const typography2 = typographyBySize[size];
+        const requiredTypography = typographyBySize[requiredIndicatorSizeMap[size]];
+        return {
+          fontSize: typography2.fontSize,
+          lineHeight: typography2.lineHeight,
+          fontWeight: typography2.fontWeight,
+          fontFamily: contextFonts.body,
+          requiredIndicator: {
+            fontSize: requiredTypography.fontSize,
+            lineHeight: requiredTypography.lineHeight
+          },
+          ...dimensions[size]
         };
-        return configs[size];
       },
       iconWrapper: (size) => {
         const configs = {