@xsolla/xui-core 0.214.1 → 0.216.0

package/index.d.mts

@@ -8434,31 +8434,86 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             helperSize: number;
             gap: number;
         };
+        /**
+         * 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: "xl" | "lg" | "md" | "sm" | "xs") => {
+            gap: 6;
+            iconSize: 18;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         } | {
+            gap: 6;
+            iconSize: 18;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         } | {
+            gap: 6;
+            iconSize: 18;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         } | {
+            gap: 4;
+            iconSize: 14;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         } | {
+            gap: 4;
+            iconSize: 14;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         };
         iconWrapper: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs") => {
             size: number;

package/index.d.ts

@@ -8434,31 +8434,86 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             helperSize: number;
             gap: number;
         };
+        /**
+         * 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: "xl" | "lg" | "md" | "sm" | "xs") => {
+            gap: 6;
+            iconSize: 18;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         } | {
+            gap: 6;
+            iconSize: 18;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         } | {
+            gap: 6;
+            iconSize: 18;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         } | {
+            gap: 4;
+            iconSize: 14;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         } | {
+            gap: 4;
+            iconSize: 14;
             fontSize: number;
             lineHeight: string;
-            gap: number;
-            iconSize: number;
+            fontWeight: number;
+            fontFamily: string;
+            requiredIndicator: {
+                fontSize: number;
+                lineHeight: string;
+            };
         };
         iconWrapper: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs") => {
             size: number;

package/index.js

@@ -3682,6 +3682,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
     );
   }
   const contextFonts = getFonts(productContext);
+  const contextTypography = getTypographyTokens(productContext);
   return {
     colors: colors[mode],
     spacing,
@@ -3693,7 +3694,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
       heading: contextFonts.heading,
       body: contextFonts.body
     },
-    typographyTokens: getTypographyTokens(productContext),
+    typographyTokens: contextTypography,
     productContext,
     sizing: {
       button: (size) => {
@@ -4702,15 +4703,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 = {