@digitalc/dxp-ui 0.0.5-alpha.15 → 0.0.5-alpha.17

package/es/components/Text/designTokens.d.ts

@@ -1,25 +1,23 @@
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     fontSizeDesktopTitleT23: string;
     fontSizeDesktopContentC15: string;
     fontSizeDesktopContentC21: string;
+    fontSizeDesktopContentC23: string;
     fontSizeDesktopTitleT21: string;
+    fontSizeDesktopTitleT16: string;
     fontSizeDesktopTitleT15: string;
+    fontSizeDesktopTitleT14: string;
+    fontSizeDesktopTitleT13: string;
+    fontSizeDesktopTitleT12: string;
     fontSizeDesktopContentC13: string;
     fontSizeDesktopContentC11: string;
     fontSizeDesktopContentC12: string;
     fontSizeDesktopContentC14: string;
-    fontSizeDesktopTitleT1: string;
+    fontSizeDesktopTitleT34: string;
     fontSizeDesktopTitleT32: string;
     fontSizeDesktopTitleT41: string;
     fontSizeDesktopContentC05: string;
     fontSizeDesktopContentC04: string;
-    fontSizeDesktopTitleT7: string;
-    fontSizeDesktopTitleT8: string;
-    fontSizeDesktopTitleT2: string;
-    fontSizeDesktopTitleT5: string;
-    fontSizeDesktopTitleT3: string;
-    fontSizeDesktopTitleT4: string;
-    fontSizeDesktopTitleT10: string;
     fontSizeMobileContentC04: string;
     fontSizeMobileContentC05: string;
     fontSizeMobileContentC11: string;
@@ -28,10 +26,12 @@ declare const otherDesignTokens: {
     fontSizeMobileContentC14: string;
     fontSizeMobileContentC15: string;
     fontSizeMobileContentC21: string;
+    fontSizeMobileContentC23: string;
     fontSizeMobileTitleT12: string;
     fontSizeMobileTitleT13: string;
     fontSizeMobileTitleT14: string;
     fontSizeMobileTitleT15: string;
+    fontSizeMobileTitleT16: string;
     fontSizeMobileTitleT21: string;
     fontSizeMobileTitleT23: string;
     fontSizeMobileTitleT24: string;
@@ -47,5 +47,14 @@ declare const otherDesignTokens: {
     fontFamilySecondaryRegular: any;
     fontFamilySecondarySemiBold: any;
     fontFamilySecondaryBold: any;
+    lineHeightT15M: number;
+    lineHeightT16M: number;
+    lineHeightC21M: number;
+    lineHeightC14: number;
+    lineHeightC21: number;
+    lineHeightT15: number;
+    lineHeightT16: number;
+    lineHeightC15M: number;
+    lineHeightC15: number;
 };
-export { otherDesignTokens };
+export { useOtherDesignTokens };

package/es/components/Text/designTokens.js

@@ -1,52 +1,66 @@
-import { getToken } from "../../utils/tokenHelper";
-var otherDesignTokens = {
-  fontSizeDesktopTitleT23: "".concat(getToken('fontSizeDesktopTitleT23'), "px"),
-  fontSizeDesktopContentC15: "".concat(getToken('fontSizeDesktopContentC15'), "px"),
-  fontSizeDesktopContentC21: "".concat(getToken('fontSizeDesktopContentC21'), "px"),
-  fontSizeDesktopTitleT21: "".concat(getToken('fontSizeDesktopTitleT21'), "px"),
-  fontSizeDesktopTitleT15: "".concat(getToken('fontSizeDesktopTitleT15'), "px"),
-  fontSizeDesktopContentC13: "".concat(getToken('fontSizeDesktopContentC13'), "px"),
-  fontSizeDesktopContentC11: "".concat(getToken('fontSizeDesktopContentC11'), "px"),
-  fontSizeDesktopContentC12: "".concat(getToken('fontSizeDesktopContentC12'), "px"),
-  fontSizeDesktopContentC14: "".concat(getToken('fontSizeDesktopContentC14'), "px"),
-  fontSizeDesktopTitleT1: "".concat(getToken('fontSizeDesktopTitleT1'), "px"),
-  fontSizeDesktopTitleT32: "".concat(getToken('fontSizeDesktopTitleT32'), "px"),
-  fontSizeDesktopTitleT41: "".concat(getToken('fontSizeDesktopTitleT41'), "px"),
-  fontSizeDesktopContentC05: "".concat(getToken('fontSizeDesktopContentC05'), "px"),
-  fontSizeDesktopContentC04: "".concat(getToken('fontSizeDesktopContentC04'), "px"),
-  fontSizeDesktopTitleT7: "".concat(getToken('fontSizeDesktopTitleT7'), "px"),
-  fontSizeDesktopTitleT8: "".concat(getToken('fontSizeDesktopTitleT8'), "px"),
-  fontSizeDesktopTitleT2: "".concat(getToken('fontSizeDesktopTitleT2'), "px"),
-  fontSizeDesktopTitleT5: "".concat(getToken('fontSizeDesktopTitleT5'), "px"),
-  fontSizeDesktopTitleT3: "".concat(getToken('fontSizeDesktopTitleT3'), "px"),
-  fontSizeDesktopTitleT4: "".concat(getToken('fontSizeDesktopTitleT4'), "px"),
-  fontSizeDesktopTitleT10: "".concat(getToken('fontSizeDesktopTitleT10'), "px"),
-  fontSizeMobileContentC04: "".concat(getToken('fontSizeMobileContentC04'), "px"),
-  fontSizeMobileContentC05: "".concat(getToken('fontSizeMobileContentC05'), "px"),
-  fontSizeMobileContentC11: "".concat(getToken('fontSizeMobileContentC11'), "px"),
-  fontSizeMobileContentC12: "".concat(getToken('fontSizeMobileContentC12'), "px"),
-  fontSizeMobileContentC13: "".concat(getToken('fontSizeMobileContentC13'), "px"),
-  fontSizeMobileContentC14: "".concat(getToken('fontSizeMobileContentC14'), "px"),
-  fontSizeMobileContentC15: "".concat(getToken('fontSizeMobileContentC15'), "px"),
-  fontSizeMobileContentC21: "".concat(getToken('fontSizeMobileContentC21'), "px"),
-  fontSizeMobileTitleT12: "".concat(getToken('fontSizeMobileTitleT12'), "px"),
-  fontSizeMobileTitleT13: "".concat(getToken('fontSizeMobileTitleT13'), "px"),
-  fontSizeMobileTitleT14: "".concat(getToken('fontSizeMobileTitleT14'), "px"),
-  fontSizeMobileTitleT15: "".concat(getToken('fontSizeMobileTitleT15'), "px"),
-  fontSizeMobileTitleT21: "".concat(getToken('fontSizeMobileTitleT21'), "px"),
-  fontSizeMobileTitleT23: "".concat(getToken('fontSizeMobileTitleT23'), "px"),
-  fontSizeMobileTitleT24: "".concat(getToken('fontSizeMobileTitleT24'), "px"),
-  fontSizeMobileTitleT25: "".concat(getToken('fontSizeMobileTitleT25'), "px"),
-  fontSizeMobileTitleT32: "".concat(getToken('fontSizeMobileTitleT32'), "px"),
-  fontSizeMobileTitleT34: "".concat(getToken('fontSizeMobileTitleT34'), "px"),
-  fontSizeMobileTitleT41: "".concat(getToken('fontSizeMobileTitleT41'), "px"),
-  fontSizeMobileTitleT45: "".concat(getToken('fontSizeMobileTitleT45'), "px"),
-  fontSizeMobileNavigation: "".concat(getToken('fontSizeMobileNavigation'), "px"),
-  fontFamilyPromaryRegular: getToken('fontFamilyPromaryRegular'),
-  fontFamilyPromarySemiBold: getToken('fontFamilyPromarySemiBold'),
-  fontFamilyPromaryBold: getToken('fontFamilyPromaryBold'),
-  fontFamilySecondaryRegular: getToken('fontFamilySecondaryRegular'),
-  fontFamilySecondarySemiBold: getToken('fontFamilySecondarySemiBold'),
-  fontFamilySecondaryBold: getToken('fontFamilySecondaryBold')
+import { useDynamicTokens } from "../../utils";
+import { wSacle } from "../../utils/scaleTool";
+var useOtherDesignTokens = function useOtherDesignTokens() {
+  var getToken = useDynamicTokens();
+  var otherDesignTokens = {
+    fontSizeDesktopTitleT23: "".concat(wSacle(getToken('fontSizeDesktopTitleT23')), "px"),
+    fontSizeDesktopContentC15: "".concat(wSacle(getToken('fontSizeDesktopContentC15')), "px"),
+    fontSizeDesktopContentC21: "".concat(wSacle(getToken('fontSizeDesktopContentC21')), "px"),
+    fontSizeDesktopContentC23: "".concat(wSacle(getToken('fontSizeDesktopContentC23')), "px"),
+    fontSizeDesktopTitleT21: "".concat(wSacle(getToken('fontSizeDesktopTitleT21')), "px"),
+    fontSizeDesktopTitleT16: "".concat(wSacle(getToken('fontSizeDesktopTitleT16')), "px"),
+    fontSizeDesktopTitleT15: "".concat(wSacle(getToken('fontSizeDesktopTitleT15')), "px"),
+    fontSizeDesktopTitleT14: "".concat(wSacle(getToken('fontSizeDesktopTitleT14')), "px"),
+    fontSizeDesktopTitleT13: "".concat(wSacle(getToken('fontSizeDesktopTitleT13')), "px"),
+    fontSizeDesktopTitleT12: "".concat(wSacle(getToken('fontSizeDesktopTitleT12')), "px"),
+    fontSizeDesktopContentC13: "".concat(wSacle(getToken('fontSizeDesktopContentC13')), "px"),
+    fontSizeDesktopContentC11: "".concat(wSacle(getToken('fontSizeDesktopContentC11')), "px"),
+    fontSizeDesktopContentC12: "".concat(wSacle(getToken('fontSizeDesktopContentC12')), "px"),
+    fontSizeDesktopContentC14: "".concat(wSacle(getToken('fontSizeDesktopContentC14')), "px"),
+    fontSizeDesktopTitleT34: "".concat(wSacle(getToken('fontSizeDesktopTitleT34')), "px"),
+    fontSizeDesktopTitleT32: "".concat(wSacle(getToken('fontSizeDesktopTitleT32')), "px"),
+    fontSizeDesktopTitleT41: "".concat(wSacle(getToken('fontSizeDesktopTitleT41')), "px"),
+    fontSizeDesktopContentC05: "".concat(wSacle(getToken('fontSizeDesktopContentC05')), "px"),
+    fontSizeDesktopContentC04: "".concat(wSacle(getToken('fontSizeDesktopContentC04')), "px"),
+    fontSizeMobileContentC04: "".concat(wSacle(getToken('fontSizeMobileContentC04')), "px"),
+    fontSizeMobileContentC05: "".concat(wSacle(getToken('fontSizeMobileContentC05')), "px"),
+    fontSizeMobileContentC11: "".concat(wSacle(getToken('fontSizeMobileContentC11')), "px"),
+    fontSizeMobileContentC12: "".concat(wSacle(getToken('fontSizeMobileContentC12')), "px"),
+    fontSizeMobileContentC13: "".concat(wSacle(getToken('fontSizeMobileContentC13')), "px"),
+    fontSizeMobileContentC14: "".concat(wSacle(getToken('fontSizeMobileContentC14')), "px"),
+    fontSizeMobileContentC15: "".concat(wSacle(getToken('fontSizeMobileContentC15')), "px"),
+    fontSizeMobileContentC21: "".concat(wSacle(getToken('fontSizeMobileContentC21')), "px"),
+    fontSizeMobileContentC23: "".concat(wSacle(getToken('fontSizeMobileContentC23')), "px"),
+    fontSizeMobileTitleT12: "".concat(wSacle(getToken('fontSizeMobileTitleT12')), "px"),
+    fontSizeMobileTitleT13: "".concat(wSacle(getToken('fontSizeMobileTitleT13')), "px"),
+    fontSizeMobileTitleT14: "".concat(wSacle(getToken('fontSizeMobileTitleT14')), "px"),
+    fontSizeMobileTitleT15: "".concat(wSacle(getToken('fontSizeMobileTitleT15')), "px"),
+    fontSizeMobileTitleT16: "".concat(wSacle(getToken('fontSizeMobileTitleT16')), "px"),
+    fontSizeMobileTitleT21: "".concat(wSacle(getToken('fontSizeMobileTitleT21')), "px"),
+    fontSizeMobileTitleT23: "".concat(wSacle(getToken('fontSizeMobileTitleT23')), "px"),
+    fontSizeMobileTitleT24: "".concat(wSacle(getToken('fontSizeMobileTitleT24')), "px"),
+    fontSizeMobileTitleT25: "".concat(wSacle(getToken('fontSizeMobileTitleT25')), "px"),
+    fontSizeMobileTitleT32: "".concat(wSacle(getToken('fontSizeMobileTitleT32')), "px"),
+    fontSizeMobileTitleT34: "".concat(wSacle(getToken('fontSizeMobileTitleT34')), "px"),
+    fontSizeMobileTitleT41: "".concat(wSacle(getToken('fontSizeMobileTitleT41')), "px"),
+    fontSizeMobileTitleT45: "".concat(wSacle(getToken('fontSizeMobileTitleT45')), "px"),
+    fontSizeMobileNavigation: "".concat(wSacle(getToken('fontSizeMobileNavigation')), "px"),
+    fontFamilyPromaryRegular: getToken('fontFamilyPromaryRegular'),
+    fontFamilyPromarySemiBold: getToken('fontFamilyPromarySemiBold'),
+    fontFamilyPromaryBold: getToken('fontFamilyPromaryBold'),
+    fontFamilySecondaryRegular: getToken('fontFamilySecondaryRegular'),
+    fontFamilySecondarySemiBold: getToken('fontFamilySecondarySemiBold'),
+    fontFamilySecondaryBold: getToken('fontFamilySecondaryBold'),
+    lineHeightT15M: getToken('fontSizeMobileTitleT15') >= 20 ? 1.25 : 1.5,
+    lineHeightT16M: getToken('fontSizeMobileTitleT16') >= 20 ? 1.25 : 1.5,
+    lineHeightC21M: getToken('fontSizeMobileContentC21') >= 20 ? 1.25 : 1.5,
+    lineHeightC14: getToken('fontSizeDesktopContentC14') >= 20 ? 1.25 : 1.5,
+    lineHeightC21: getToken('fontSizeDesktopContentC21') >= 20 ? 1.25 : 1.5,
+    lineHeightT15: getToken('fontSizeDesktopTitleT15') >= 20 ? 1.25 : 1.5,
+    lineHeightT16: getToken('fontSizeDesktopTitleT16') >= 20 ? 1.25 : 1.5,
+    lineHeightC15M: getToken('fontSizeMobileContentC15') >= 20 ? 1.25 : 1.5,
+    lineHeightC15: getToken('fontSizeDesktopContentC15') >= 20 ? 1.25 : 1.5
+  };
+  return otherDesignTokens;
 };
-export { otherDesignTokens };
+export { useOtherDesignTokens };

package/es/components/Text/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import './style/index.less';
-export type Size = 'TitleT41Bold' | 'TitleT32Bold' | 'TitleT23Bold' | 'TitleT21Bold' | 'TitleT15Bold' | 'ContentC14Bold' | 'ContentC14Regular' | 'ContentC14Strikethrough' | 'ContentC14TextLink' | 'ContentC13Bold' | 'ContentC13Regular' | 'ContentC13Strikethrough' | 'ContentC13TextLink' | 'ContentC12Regular' | 'ContentC12Strikethrough' | 'ContentC12SemiBold' | 'ContentC12Bold' | 'ContentC12TextLink' | 'navigation';
+export type Size = 'TitleT41Bold' | 'TitleT34Bold' | 'TitleT32Bold' | 'TitleT23Bold' | 'TitleT21Bold' | 'TitleT16Bold' | 'TitleT15Bold' | 'TitleT14Bold' | 'TitleT13Bold' | 'TitleT12Bold' | 'ContentC23Bold' | 'ContentC21Bold' | 'ContentC15Bold' | 'ContentC14Bold' | 'ContentC14Regular' | 'ContentC14Strikethrough' | 'ContentC14TextLink' | 'ContentC13Bold' | 'ContentC13Regular' | 'ContentC13Strikethrough' | 'ContentC13TextLink' | 'ContentC12Regular' | 'ContentC12Strikethrough' | 'ContentC12SemiBold' | 'ContentC12Bold' | 'ContentC12TextLink' | 'NavigationBold';
 export interface TextProps {
+    color?: string;
     children?: React.ReactNode;
     className?: string;
     size?: Size;

package/es/components/Text/index.js

@@ -1,18 +1,20 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "size", "prefixCls", "style", "breakpoint"];
+var _excluded = ["color", "children", "className", "size", "prefixCls", "style", "breakpoint"];
 import React from 'react';
 import { default as classNames } from 'classnames';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { theme } from "../../utils/theme";
-import { otherDesignTokens } from "./designTokens";
+import { useOtherDesignTokens } from "./designTokens";
 import { cssClasses } from "../../constants";
 import "./style/index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Text = function Text(props) {
-  var children = props.children,
-    className = props.className,
+  var color = props.color,
+    children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     _props$size = props.size,
     size = _props$size === void 0 ? 'ContentC14Bold' : _props$size,
     _props$prefixCls = props.prefixCls,
@@ -21,9 +23,18 @@ var Text = function Text(props) {
     _props$breakpoint = props.breakpoint,
     breakpoint = _props$breakpoint === void 0 ? 'Mobile' : _props$breakpoint,
     attr = _objectWithoutProperties(props, _excluded);
+  var otherDesignTokens = useOtherDesignTokens();
   var fontSizeDesktopTitleT23 = otherDesignTokens.fontSizeDesktopTitleT23,
+    fontSizeDesktopContentC15 = otherDesignTokens.fontSizeDesktopContentC15,
+    fontSizeDesktopContentC21 = otherDesignTokens.fontSizeDesktopContentC21,
+    fontSizeDesktopContentC23 = otherDesignTokens.fontSizeDesktopContentC23,
     fontSizeDesktopTitleT21 = otherDesignTokens.fontSizeDesktopTitleT21,
+    fontSizeDesktopTitleT34 = otherDesignTokens.fontSizeDesktopTitleT34,
+    fontSizeDesktopTitleT16 = otherDesignTokens.fontSizeDesktopTitleT16,
     fontSizeDesktopTitleT15 = otherDesignTokens.fontSizeDesktopTitleT15,
+    fontSizeDesktopTitleT14 = otherDesignTokens.fontSizeDesktopTitleT14,
+    fontSizeDesktopTitleT13 = otherDesignTokens.fontSizeDesktopTitleT13,
+    fontSizeDesktopTitleT12 = otherDesignTokens.fontSizeDesktopTitleT12,
     fontSizeDesktopContentC13 = otherDesignTokens.fontSizeDesktopContentC13,
     fontSizeDesktopContentC12 = otherDesignTokens.fontSizeDesktopContentC12,
     fontSizeDesktopContentC14 = otherDesignTokens.fontSizeDesktopContentC14,
@@ -32,15 +43,33 @@ var Text = function Text(props) {
     fontSizeMobileContentC12 = otherDesignTokens.fontSizeMobileContentC12,
     fontSizeMobileContentC13 = otherDesignTokens.fontSizeMobileContentC13,
     fontSizeMobileContentC14 = otherDesignTokens.fontSizeMobileContentC14,
+    fontSizeMobileContentC15 = otherDesignTokens.fontSizeMobileContentC15,
+    fontSizeMobileContentC21 = otherDesignTokens.fontSizeMobileContentC21,
+    fontSizeMobileContentC23 = otherDesignTokens.fontSizeMobileContentC23,
+    fontSizeMobileTitleT12 = otherDesignTokens.fontSizeMobileTitleT12,
+    fontSizeMobileTitleT13 = otherDesignTokens.fontSizeMobileTitleT13,
+    fontSizeMobileTitleT14 = otherDesignTokens.fontSizeMobileTitleT14,
     fontSizeMobileTitleT15 = otherDesignTokens.fontSizeMobileTitleT15,
+    fontSizeMobileTitleT16 = otherDesignTokens.fontSizeMobileTitleT16,
     fontSizeMobileTitleT21 = otherDesignTokens.fontSizeMobileTitleT21,
     fontSizeMobileTitleT23 = otherDesignTokens.fontSizeMobileTitleT23,
     fontSizeMobileTitleT32 = otherDesignTokens.fontSizeMobileTitleT32,
+    fontSizeMobileTitleT34 = otherDesignTokens.fontSizeMobileTitleT34,
     fontSizeMobileTitleT41 = otherDesignTokens.fontSizeMobileTitleT41,
+    fontSizeMobileNavigation = otherDesignTokens.fontSizeMobileNavigation,
     fontFamilyPromaryBold = otherDesignTokens.fontFamilyPromaryBold,
     fontFamilySecondaryRegular = otherDesignTokens.fontFamilySecondaryRegular,
     fontFamilySecondarySemiBold = otherDesignTokens.fontFamilySecondarySemiBold,
-    fontFamilySecondaryBold = otherDesignTokens.fontFamilySecondaryBold;
+    fontFamilySecondaryBold = otherDesignTokens.fontFamilySecondaryBold,
+    lineHeightT15M = otherDesignTokens.lineHeightT15M,
+    lineHeightT16M = otherDesignTokens.lineHeightT16M,
+    lineHeightC21M = otherDesignTokens.lineHeightC21M,
+    lineHeightC14 = otherDesignTokens.lineHeightC14,
+    lineHeightC15M = otherDesignTokens.lineHeightC15M,
+    lineHeightC15 = otherDesignTokens.lineHeightC15,
+    lineHeightC21 = otherDesignTokens.lineHeightC21,
+    lineHeightT15 = otherDesignTokens.lineHeightT15,
+    lineHeightT16 = otherDesignTokens.lineHeightT16;
   var fontFamilyMap = {
     fontFamilyPromaryRegular: "Regular",
     fontFamilyPromarySemiBold: "SemiBold",
@@ -52,21 +81,22 @@ var Text = function Text(props) {
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
-      token: {
-        baseColor: 'blue'
-      },
+      token: {},
       path: ["".concat(prefixCls, "-size")]
     }, function () {
-      return "\n      .".concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT41Bold {\n        font-size: ").concat(fontSizeMobileTitleT41, ";\n        line-height: 1.2;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        // font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT32Bold {\n        font-size: ").concat(fontSizeMobileTitleT32, ";\n        line-height: 1.2;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT23Bold {\n        font-size: ").concat(fontSizeMobileTitleT23, ";\n        line-height: 1.2;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT21Bold {\n        font-size: ").concat(fontSizeMobileTitleT21, ";\n        line-height: 1.25;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-TitleT15Bold {\n        font-size: ").concat(fontSizeMobileTitleT15, ";\n        line-height: 1.25;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Bold {\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Regular {\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC14TextLink {\n        color: #4E28E8;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC14, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Bold {\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Regular {\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC13TextLink {\n        color: #4E28E8;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC13, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Regular {\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Strikethrough {\n        color: #757575;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        text-decoration: line-through;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12SemiBold {\n        font-family: ").concat(fontFamilySecondarySemiBold, "-").concat(fontFamilyMap.fontFamilySecondarySemiBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12Bold {\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-mobile.").concat(prefixCls, "-size-ContentC12TextLink  {\n        color: #4E28E8;\n        font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeMobileContentC12, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT41Bold {\n        font-size: ").concat(fontSizeDesktopTitleT41, ";\n        line-height: 1.2;\n        font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT32Bold {\n        font-size: ").concat(fontSizeDesktopTitleT32, ";\n        line-height: 1.2;\n        font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT23Bold {\n        font-size: ").concat(fontSizeDesktopTitleT23, ";\n        line-height: 1.2;\n        font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT21Bold {\n        font-size: ").concat(fontSizeDesktopTitleT21, ";\n        line-height: 1.25;\n        font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-TitleT15Bold {\n        font-size: ").concat(fontSizeDesktopTitleT15, ";\n        line-height: 1.25;\n        font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Bold {\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Regular {\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family:  ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC14TextLink {\n        color: #4E28E8;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC14, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Bold {\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Regular {\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13Strikethrough {\n        color: #757575;\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        text-decoration: line-through;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC13TextLink {\n        color: #4E28E8;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC13, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Regular {\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.1px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Strikethrough {\n        color: #757575;\n        font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n        font-weight: normal;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        text-decoration: line-through;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12SemiBold {\n        font-family: ").concat(fontFamilySecondarySemiBold, "-").concat(fontFamilyMap.fontFamilySecondarySemiBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12Bold {\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        letter-spacing: 0.2px;\n      }\n      .").concat(prefixCls, "-desktop.").concat(prefixCls, "-size-ContentC12TextLink  {\n        color: #4E28E8;\n        font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n        font-weight: bold;\n        font-size: ").concat(fontSizeDesktopContentC12, ";\n        line-height: 1.5;\n        text-decoration: underline;\n        letter-spacing: 0.2px;\n      }\n    ");
+      return "\n      .".concat(prefixCls, "-mobile {\n        &.").concat(prefixCls, "-size-NavigationBold {\n          font-size: ").concat(fontSizeMobileNavigation, ";\n          line-height: 1.25;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT41Bold {\n          font-size: ").concat(fontSizeMobileTitleT41, ";\n          line-height: 1.25;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT34Bold {\n          font-size: ").concat(fontSizeMobileTitleT34, ";\n          line-height: 1.25;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT32Bold {\n          font-size: ").concat(fontSizeMobileTitleT32, ";\n          line-height: 1.25;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT23Bold {\n          font-size: ").concat(fontSizeMobileTitleT23, ";\n          line-height: 1.25;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT21Bold {\n          font-size: ").concat(fontSizeMobileTitleT21, ";\n          line-height: 1.25;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT16Bold {\n          font-size: ").concat(fontSizeMobileTitleT16, ";\n          line-height: ").concat(lineHeightT16M, ";\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT15Bold {\n          font-size: ").concat(fontSizeMobileTitleT15, ";\n          line-height: ").concat(lineHeightT15M, ";\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT14Bold {\n          font-size: ").concat(fontSizeMobileTitleT14, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT13Bold {\n          font-size: ").concat(fontSizeMobileTitleT13, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT12Bold {\n          font-size: ").concat(fontSizeMobileTitleT12, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC23Bold {\n          font-size: ").concat(fontSizeMobileContentC23, ";\n          line-height: 1.25;\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC21Bold {\n          font-size: ").concat(fontSizeMobileContentC21, ";\n          line-height: ").concat(lineHeightC21M, ";\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC15Bold {\n          font-size: ").concat(fontSizeMobileContentC15, ";\n          line-height: ").concat(lineHeightC15M, ";\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC14Bold {\n          font-size: ").concat(fontSizeMobileContentC14, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC14Regular {\n          font-size: ").concat(fontSizeMobileContentC14, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC14Strikethrough {\n          color: #757575;\n          font-size: ").concat(fontSizeMobileContentC14, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          text-decoration: line-through;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC14TextLink {\n          color: #4E28E8;\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeMobileContentC14, ";\n          line-height: 1.5;\n          text-decoration: underline;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC13Bold {\n          font-size: ").concat(fontSizeMobileContentC13, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC13Regular {\n          font-size: ").concat(fontSizeMobileContentC13, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC13Strikethrough {\n          color: #757575;\n          font-size: ").concat(fontSizeMobileContentC13, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          text-decoration: line-through;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC13TextLink {\n          color: #4E28E8;\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeMobileContentC13, ";\n          line-height: 1.5;\n          text-decoration: underline;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12Regular {\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          font-size: ").concat(fontSizeMobileContentC12, ";\n          line-height: 1.5;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12Strikethrough {\n          color: #757575;\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          font-size: ").concat(fontSizeMobileContentC12, ";\n          line-height: 1.5;\n          text-decoration: line-through;\n          letter-spacing: 0.2px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12SemiBold {\n          font-family: ").concat(fontFamilySecondarySemiBold, "-").concat(fontFamilyMap.fontFamilySecondarySemiBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeMobileContentC12, ";\n          line-height: 1.5;\n          letter-spacing: 0.2px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12Bold {\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeMobileContentC12, ";\n          line-height: 1.5;\n          letter-spacing: 0.2px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12TextLink  {\n          color: #4E28E8;\n          font-family: ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeMobileContentC12, ";\n          line-height: 1.5;\n          text-decoration: underline;\n          letter-spacing: 0.2px;\n        }\n      }\n      .").concat(prefixCls, "-desktop {\n        &.").concat(prefixCls, "-size-TitleT41Bold {\n          font-size: ").concat(fontSizeDesktopTitleT41, ";\n          line-height: 1.25;\n          font-family: ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT34Bold {\n          font-size: ").concat(fontSizeDesktopTitleT34, ";\n          line-height: 1.25;\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT32Bold {\n          font-size: ").concat(fontSizeDesktopTitleT32, ";\n          line-height: 1.25;\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT23Bold {\n          font-size: ").concat(fontSizeDesktopTitleT23, ";\n          line-height: 1.25;\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT21Bold {\n          font-size: ").concat(fontSizeDesktopTitleT21, ";\n          line-height: 1.25;\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT16Bold {\n          font-size: ").concat(fontSizeDesktopTitleT16, ";\n          line-height: ").concat(lineHeightT16, ";\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT15Bold {\n          font-size: ").concat(fontSizeDesktopTitleT15, ";\n          line-height: ").concat(lineHeightT15, ";\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT14Bold {\n          font-size: ").concat(fontSizeDesktopTitleT14, ";\n          line-height: 1.5;\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT13Bold {\n          font-size: ").concat(fontSizeDesktopTitleT13, ";\n          line-height: 1.5;\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-TitleT12Bold {\n          font-size: ").concat(fontSizeDesktopTitleT12, ";\n          line-height: 1.5;\n          font-family:  ").concat(fontFamilyPromaryBold, "-").concat(fontFamilyMap.fontFamilyPromaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC23Bold {\n          font-size: ").concat(fontSizeDesktopContentC23, ";\n          line-height: 1.25;\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC21Bold {\n          font-size: ").concat(fontSizeDesktopContentC21, ";\n          line-height: ").concat(lineHeightC21, ";\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC15Bold {\n          font-size: ").concat(fontSizeDesktopContentC15, ";\n          line-height: ").concat(lineHeightC15, ";\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC14Bold {\n          font-size: ").concat(fontSizeDesktopContentC14, ";\n          line-height: ").concat(lineHeightC14, ";\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC14Regular {\n          font-size: ").concat(fontSizeDesktopContentC14, ";\n          line-height: ").concat(lineHeightC14, ";\n          font-family:  ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC14Strikethrough {\n          color: #757575;\n          font-size: ").concat(fontSizeDesktopContentC14, ";\n          line-height: ").concat(lineHeightC14, ";\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          text-decoration: line-through;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC14TextLink {\n          color: #4E28E8;\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeDesktopContentC14, ";\n          line-height: ").concat(lineHeightC14, ";\n          text-decoration: underline;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC13Bold {\n          font-size: ").concat(fontSizeDesktopContentC13, ";\n          line-height: 1.5;\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n        }\n        &.").concat(prefixCls, "-size-ContentC13Regular {\n          font-size: ").concat(fontSizeDesktopContentC13, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC13Strikethrough {\n          color: #757575;\n          font-size: ").concat(fontSizeDesktopContentC13, ";\n          line-height: 1.5;\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          text-decoration: line-through;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC13TextLink {\n          color: #4E28E8;\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeDesktopContentC13, ";\n          line-height: 1.5;\n          text-decoration: underline;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12Regular {\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          font-size: ").concat(fontSizeDesktopContentC12, ";\n          line-height: 1.5;\n          letter-spacing: 0.1px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12Strikethrough {\n          color: #757575;\n          font-family: ").concat(fontFamilySecondaryRegular, "-").concat(fontFamilyMap.fontFamilySecondaryRegular, ";\n          font-weight: normal;\n          font-size: ").concat(fontSizeDesktopContentC12, ";\n          line-height: 1.5;\n          text-decoration: line-through;\n          letter-spacing: 0.2px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12SemiBold {\n          font-family: ").concat(fontFamilySecondarySemiBold, "-").concat(fontFamilyMap.fontFamilySecondarySemiBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeDesktopContentC12, ";\n          line-height: 1.5;\n          letter-spacing: 0.2px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12Bold {\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeDesktopContentC12, ";\n          line-height: 1.5;\n          letter-spacing: 0.2px;\n        }\n        &.").concat(prefixCls, "-size-ContentC12TextLink  {\n          color: #4E28E8;\n          font-family:  ").concat(fontFamilySecondaryBold, "-").concat(fontFamilyMap.fontFamilySecondaryBold, ";\n          font-weight: bold;\n          font-size: ").concat(fontSizeDesktopContentC12, ";\n          line-height: 1.5;\n          text-decoration: underline;\n          letter-spacing: 0.2px;\n        }\n      }\n    ");
     });
     return hashId;
   };
   useCustomButtonStyle();
   var baseProps = {
-    className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-size-").concat(size), size), breakpoint === 'Desktop' ? "".concat(prefixCls, "-desktop") : "".concat(prefixCls, "-mobile"), className),
-    style: style
+    className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-size-").concat(size), size), breakpoint === 'Desktop' ? "".concat(prefixCls, "-desktop") : "".concat(prefixCls, "-mobile"), className)
   };
-  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread(_objectSpread({}, baseProps), attr), {}, {
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread(_objectSpread({}, baseProps), {}, {
+    style: _objectSpread({
+      color: color
+    }, style)
+  }, attr), {}, {
     children: children
   }));
 };

package/es/components/TextInputInside/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadius: any;
     paddingInline: any;
     colorText: any;
@@ -10,7 +10,7 @@ declare const designTokens: {
     colorBgContainer: any;
     colorBgContainerDisabled: any;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     hoverBorderColor: any;
     activeBorderColor: any;
     paddingBlock: any;
@@ -26,13 +26,4 @@ declare const otherDesignTokens: {
     colorErrorBorder: any;
     colorInputBackgroundHaze: any;
 };
-declare const commonToken: {
-    [x: string]: string | number;
-};
-declare const styleToken: {
-    [x: string]: string;
-};
-declare const stickyStyleToken: {
-    [x: string]: string;
-};
-export { designTokens, otherDesignTokens, styleToken, stickyStyleToken, commonToken };
+export { useDesignTokens, useOtherDesignTokens };

package/es/components/TextInputInside/designTokens.js

@@ -1,59 +1,61 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { getToken } from "../../utils/tokenHelper";
-import { cssClasses } from "../../constants";
-var prefixCls = cssClasses.PREFIX + '-modal';
-var designTokens = {
-  borderRadius: getToken('borderRadiusInput'),
-  // 圆角
-  // paddingBlock: getToken('spacingInputPaddingVertical'), // 纵向内边距
-  paddingInline: getToken('spacingInputPaddingHorizontal'),
-  // 横向内边距
-  colorText: getToken('colorInputTextActive'),
-  // 内容文本颜色
-  colorBorder: 'transparent',
-  // 边框颜色
-  hoverBorderColor: 'transparent',
-  // 边框颜色
-  activeBorderColor: 'transparent',
-  // 边框颜色
-  activeShadow: '',
-  // 边框shadow颜色
-  colorError: 'transparent',
-  // 错误边框颜色
-  colorBgContainer: getToken('colorInputBackground'),
-  // 背景颜色
-  colorBgContainerDisabled: getToken('colorInputBackgroundHaze') // 背景颜色
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    borderRadius: getToken('borderRadiusInput'),
+    // 圆角
+    // paddingBlock: getToken('spacingInputPaddingVertical'), // 纵向内边距
+    paddingInline: getToken('spacingInputPaddingHorizontal'),
+    // 横向内边距
+    colorText: getToken('colorInputTextActive'),
+    // 内容文本颜色
+    colorBorder: 'transparent',
+    // 边框颜色
+    hoverBorderColor: 'transparent',
+    // 边框颜色
+    activeBorderColor: 'transparent',
+    // 边框颜色
+    activeShadow: '',
+    // 边框shadow颜色
+    colorError: 'transparent',
+    // 错误边框颜色
+    colorBgContainer: getToken('colorInputBackground'),
+    // 背景颜色
+    colorBgContainerDisabled: getToken('colorInputBackgroundHaze') // 背景颜色
+  };
+  return designTokens;
 };
-var otherDesignTokens = {
-  hoverBorderColor: getToken('colorInputBorderActive'),
-  // hover边框颜色
-  activeBorderColor: getToken('colorInputBorderActive'),
-  // active边框颜色
-  paddingBlock: getToken('spacingInputPaddingVerticalLg'),
-  // 纵向内边距
-  colorLabelActive: getToken('colorInputTextLabelActive'),
-  // label激活状态的颜色
-  colorLabel: getToken('colorInputTextLabel'),
-  // label文本颜色
-  width: "calc(100vw - ".concat(getToken('spacingModalPaddingHorizontal'), "px - ").concat(getToken('spacingModalPaddingHorizontal'), "px)"),
-  // 宽度
-  colorError: getToken('colorInputTextError'),
-  // 错误信息文本颜色
-  iconPaddingLeft: getToken('spacingInputIconPaddingLeft'),
-  // 错误信息文本颜色
-  colorInputIconStandard: getToken('colorInputIconStandard'),
-  // 标准icon颜色
-  spacingInputTextHintMessagePaddingTop: getToken('spacingInputTextHintMessagePaddingTop'),
-  // 错误信息文本颜色
-  colorInputTextHintMessage: getToken('colorInputTextHintMessage'),
-  // 信息文本颜色
-  colorInputTextCounter: getToken('colorInputTextCounter'),
-  // 字数统计文本颜色
-  colorErrorBorder: getToken('colorInputBorderError'),
-  // error颜色
-  colorInputBackgroundHaze: getToken('colorInputBackgroundHaze') // 背景颜色
+var useOtherDesignTokens = function useOtherDesignTokens() {
+  var getToken = useDynamicTokens();
+  var otherDesignTokens = {
+    hoverBorderColor: getToken('colorInputBorderActive'),
+    // hover边框颜色
+    activeBorderColor: getToken('colorInputBorderActive'),
+    // active边框颜色
+    paddingBlock: getToken('spacingInputPaddingVerticalLg'),
+    // 纵向内边距
+    colorLabelActive: getToken('colorInputTextLabelActive'),
+    // label激活状态的颜色
+    colorLabel: getToken('colorInputTextLabel'),
+    // label文本颜色
+    width: "calc(100vw - ".concat(getToken('spacingModalPaddingHorizontal'), "px - ").concat(getToken('spacingModalPaddingHorizontal'), "px)"),
+    // 宽度
+    colorError: getToken('colorInputTextError'),
+    // 错误信息文本颜色
+    iconPaddingLeft: getToken('spacingInputIconPaddingLeft'),
+    // 错误信息文本颜色
+    colorInputIconStandard: getToken('colorInputIconStandard'),
+    // 标准icon颜色
+    spacingInputTextHintMessagePaddingTop: getToken('spacingInputTextHintMessagePaddingTop'),
+    // 错误信息文本颜色
+    colorInputTextHintMessage: getToken('colorInputTextHintMessage'),
+    // 信息文本颜色
+    colorInputTextCounter: getToken('colorInputTextCounter'),
+    // 字数统计文本颜色
+    colorErrorBorder: getToken('colorInputBorderError'),
+    // error颜色
+    colorInputBackgroundHaze: getToken('colorInputBackgroundHaze') // 背景颜色
+  };
+  return otherDesignTokens;
 };
-var commonToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-header-margin-bottom"), 0), "--".concat(prefixCls, "-footer-margin-top"), 0), "--".concat(prefixCls, "-footer-padding"), "".concat(getToken('spacingModalButtonPaddingTop'), "px 0 0")), "--".concat(prefixCls, "-body-padding"), "".concat(getToken('spacingModalCardVerticalGap'), "px 0"));
-var styleToken = _defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "".concat(getToken('spacingModalCardPaddingTop'), "px ").concat(getToken('spacingModalCardPaddingHorizontal'), "px ").concat(getToken('spacingModalCardPaddingBottom'), "px ").concat(getToken('spacingModalCardPaddingHorizontal'), "px")), "--".concat(prefixCls, "-footer-border-top"), 'none'), "--".concat(prefixCls, "-footer-padding"), '0px');
-var stickyStyleToken = _defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "".concat(getToken('spacingModalCardPaddingTop'), "px ").concat(getToken('spacingModalCardPaddingHorizontal'), "px ").concat(40 + getToken('spacingModalButtonStickyPaddingVertical') + getToken('spacingModalButtonStickyPaddingHorizontal'), "px ").concat(getToken('spacingModalCardPaddingHorizontal'), "px")), "--".concat(prefixCls, "-footer-padding"), "".concat(getToken('spacingModalButtonStickyPaddingVertical'), "px ").concat(getToken('spacingModalButtonStickyPaddingHorizontal'), "px")), "--".concat(prefixCls, "-footer-border-top"), '1px solid #E1E1E1');
-export { designTokens, otherDesignTokens, styleToken, stickyStyleToken, commonToken };
+export { useDesignTokens, useOtherDesignTokens };

package/es/components/TextInputInside/index.js

@@ -5,12 +5,12 @@ import _Input from "antd/es/input";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "message", "status", "type", "image", "count", "value", "disabled"];
+var _excluded = ["label", "message", "status", "type", "image", "count", "value", "disabled", "className"];
 import React, { useState, useRef } from 'react';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { theme } from "../../utils/theme";
 import { cssClasses } from "../../constants";
-import { designTokens, otherDesignTokens } from "./designTokens";
+import { useDesignTokens, useOtherDesignTokens } from "./designTokens";
 import Text from "../Text";
 import Icon from "../Icon";
 import "./style/index.less";
@@ -25,7 +25,11 @@ var TextInputInside = function TextInputInside(props) {
     count = props.count,
     value = props.value,
     disabled = props.disabled,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var otherDesignTokens = useOtherDesignTokens();
   var paddingInline = designTokens.paddingInline,
     colorBgContainer = designTokens.colorBgContainer,
     borderRadius = designTokens.borderRadius;
@@ -55,9 +59,7 @@ var TextInputInside = function TextInputInside(props) {
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
-      token: {
-        baseColor: 'blue'
-      },
+      token: {},
       path: ["".concat(prefix)]
     }, function () {
       return "\n      .".concat(prefix, " {\n        height: ").concat(paddingBlock * 2 + 24, "px;\n        background: ").concat(colorBgContainer, ";\n        padding: ").concat(paddingBlock, "px ").concat(paddingInline, "px;\n        border-radius: ").concat(borderRadius, "px;\n        border: 1px solid #fff;\n      }\n      .").concat(prefix, ":hover {\n        border-color: ").concat(hoverBorderColor, ";\n      }\n      .").concat(prefix, ":active {\n        border-color: ").concat(activeBorderColor, ";\n      }\n      .").concat(prefix, "-label {\n        color: ").concat(colorLabel, ";\n      }\n      .").concat(prefix, "-focus .").concat(prefix, "-label {\n        top: 7px;\n        color: ").concat(colorLabelActive, ";\n      }\n      .").concat(prefix, "-has-search {\n        padding-right: ").concat(paddingInline + iconPaddingLeft + 24, "px;\n      }\n      .").concat(prefix, "-focus {\n        padding-top: 30px;\n        padding-bottom: 10px;\n      }\n      .").concat(prefix, "-error {\n        border: 1px solid ").concat(colorErrorBorder, ";\n      }\n      .").concat(prefix, "-error:hover {\n        border-color: ").concat(colorErrorBorder, ";\n      }\n      .").concat(prefix, "-error:active {\n        border-color: ").concat(colorErrorBorder, ";\n      }\n      .").concat(prefix, "-tips {\n        bottom: -").concat(spacingInputTextHintMessagePaddingTop + 18, "px;\n        color: ").concat(colorInputTextHintMessage, ";\n      }\n      .").concat(prefix, "-error-tips {\n        color: ").concat(colorError, ";\n      }\n      .").concat(prefix, "-right {\n        right: ").concat(paddingInline, "px;\n        color: ").concat(colorInputIconStandard, ";\n        top: ").concat(paddingBlock, "px;\n        line-height: 1;\n      }\n     .").concat(prefix, "-count {\n        color: ").concat(colorInputTextCounter, ";\n      }\n     .").concat(prefix, "-disabled {\n        background: ").concat(colorInputBackgroundHaze, ";\n        border-color: ").concat(colorInputBackgroundHaze, ";\n      }\n      .").concat(prefix, "-disabled:hover {\n        border-color: ").concat(colorInputBackgroundHaze, ";\n      }\n      .").concat(prefix, "-disabled:active {\n        border-color: ").concat(colorInputBackgroundHaze, ";\n      }\n    ");
@@ -68,6 +70,7 @@ var TextInputInside = function TextInputInside(props) {
   var error = status === 'error' ? "".concat(prefix, "-error") : '';
   var disabledStyle = disabled ? "".concat(prefix, "-disabled") : '';
   var focusStyle = focus || value ? "".concat(prefix, "-focus") : '';
+  var searchClass = isEmpty(type) ? '' : "".concat(prefix, "-has-search");
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(_ConfigProvider, {
       wave: {
@@ -82,7 +85,7 @@ var TextInputInside = function TextInputInside(props) {
         hashed: false
       },
       children: /*#__PURE__*/_jsxs("div", {
-        className: "".concat(prefix, " ").concat(focusStyle, " ").concat(error, " ").concat(disabledStyle),
+        className: "".concat(prefix, " ").concat(focusStyle, " ").concat(error, " ").concat(disabledStyle, " ").concat(className),
         children: [/*#__PURE__*/_jsx("span", {
           className: "".concat(prefix, "-label"),
           onClick: function onClick() {
@@ -96,7 +99,7 @@ var TextInputInside = function TextInputInside(props) {
             children: label
           })
         }), /*#__PURE__*/_jsx(_Input, _objectSpread({
-          className: isEmpty(type) ? '' : "".concat(prefix, "-has-search"),
+          className: searchClass,
           onFocus: function onFocus() {
             setFocus(true);
           },