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

package/lib/components/Tag/designTokens.js

@@ -19,46 +19,58 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Tag/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  designTokens: () => designTokens,
-  designTokensBlue: () => designTokensBlue,
   designTokensBlueLight: () => designTokensBlueLight,
-  designTokensGreen: () => designTokensGreen,
   designTokensGreenLight: () => designTokensGreenLight,
-  designTokensGrey: () => designTokensGrey,
   designTokensGreyLight: () => designTokensGreyLight,
-  designTokensLakeblue: () => designTokensLakeblue,
   designTokensLakeblueLight: () => designTokensLakeblueLight,
-  designTokensOrange: () => designTokensOrange,
   designTokensOrangeLight: () => designTokensOrangeLight,
-  designTokensPrimary: () => designTokensPrimary,
-  designTokensRed: () => designTokensRed,
   designTokensRedLight: () => designTokensRedLight,
-  designTokensSecondary: () => designTokensSecondary,
-  designTokensYellow: () => designTokensYellow,
   designTokensYellowLight: () => designTokensYellowLight,
-  otherDesignTokens: () => otherDesignTokens
+  useDesignTokens: () => useDesignTokens,
+  useDesignTokensBlue: () => useDesignTokensBlue,
+  useDesignTokensGreen: () => useDesignTokensGreen,
+  useDesignTokensGrey: () => useDesignTokensGrey,
+  useDesignTokensLakeblue: () => useDesignTokensLakeblue,
+  useDesignTokensOrange: () => useDesignTokensOrange,
+  useDesignTokensPrimary: () => useDesignTokensPrimary,
+  useDesignTokensRed: () => useDesignTokensRed,
+  useDesignTokensSecondary: () => useDesignTokensSecondary,
+  useDesignTokensYellow: () => useDesignTokensYellow,
+  useOtherDesignTokens: () => useOtherDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
-var designTokens = {
-  borderRadiusSM: (0, import_tokenHelper.getToken)("borderRadiusTag")
-  // 圆角
-};
-var designTokensPrimary = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: (0, import_tokenHelper.getToken)("colorTagBackgroundPrimary"),
-  // 背景色
-  colorBorder: (0, import_tokenHelper.getToken)("colorTagBackgroundPrimary")
-  // 边框
-};
-var designTokensSecondary = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: (0, import_tokenHelper.getToken)("colorTagBackgroundSecondary"),
-  // 背景色
-  colorBorder: (0, import_tokenHelper.getToken)("colorTagBackgroundSecondary")
-  // 边框
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    borderRadiusSM: getToken2("borderRadiusTag")
+    // 圆角
+  };
+  return designTokens;
+};
+var useDesignTokensPrimary = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensPrimary = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: getToken2("colorTagBackgroundPrimary"),
+    // 背景色
+    colorBorder: getToken2("colorTagBackgroundPrimary")
+    // 边框
+  };
+  return designTokensPrimary;
+};
+var useDesignTokensSecondary = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensSecondary = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: getToken2("colorTagBackgroundSecondary"),
+    // 背景色
+    colorBorder: getToken2("colorTagBackgroundSecondary")
+    // 边框
+  };
+  return designTokensSecondary;
 };
 var designTokensBlueLight = {
   colorText: "#3434E1",
@@ -69,113 +81,145 @@ var designTokensBlueLight = {
   // 边框
 };
 var designTokensGreenLight = {
-  colorText: "#00BC6F",
+  colorText: (0, import_utils.getToken)("colorTagTextGreen"),
   // 文本颜色
-  defaultBg: "#E8FBF3",
+  defaultBg: (0, import_utils.getToken)("colorTagGreenLight"),
   // 背景色
-  colorBorder: "#E8FBF3"
+  colorBorder: (0, import_utils.getToken)("colorTagGreenLight")
   // 边框
 };
 var designTokensYellowLight = {
-  colorText: "#FFC300",
+  colorText: (0, import_utils.getToken)("colorTagTextYellow"),
   // 文本颜色
-  defaultBg: "#FFF8E5",
+  defaultBg: (0, import_utils.getToken)("colorTagYellowLight"),
   // 背景色
-  colorBorder: "#FFF8E5"
+  colorBorder: (0, import_utils.getToken)("colorTagYellowLight")
   // 边框
 };
 var designTokensRedLight = {
-  colorText: "#FA2C2C",
+  colorText: (0, import_utils.getToken)("colorTagTextRed"),
   // 文本颜色
-  defaultBg: "#FFEAEA",
+  defaultBg: (0, import_utils.getToken)("colorTagRedLight"),
   // 背景色
-  colorBorder: "#FFEAEA"
+  colorBorder: (0, import_utils.getToken)("colorTagRedLight")
   // 边框
 };
 var designTokensGreyLight = {
-  colorText: "#545454",
+  colorText: (0, import_utils.getToken)("colorTagTextGrey"),
   // 文本颜色
-  defaultBg: "#E6E6E6",
+  defaultBg: (0, import_utils.getToken)("colorTagGreyLight"),
   // 背景色
-  colorBorder: "#E6E6E6"
+  colorBorder: (0, import_utils.getToken)("colorTagGreyLight")
   // 边框
 };
 var designTokensLakeblueLight = {
-  colorText: "#1482CC",
+  colorText: (0, import_utils.getToken)("colorTagTextLakeBlue"),
   // 文本颜色
-  defaultBg: "#E8F6FF",
+  defaultBg: (0, import_utils.getToken)("colorTagLakeBlueLight"),
   // 背景色
-  colorBorder: "#E8F6FF"
+  colorBorder: (0, import_utils.getToken)("colorTagLakeBlueLight")
   // 边框
 };
 var designTokensOrangeLight = {
-  colorText: "#FF8D1B",
-  // 文本颜色
-  defaultBg: "#FFF4E9",
-  // 背景色
-  colorBorder: "#FFF4E9"
-  // 边框
-};
-var designTokensBlue = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: "#3434E1",
-  // 背景色
-  colorBorder: "#3434E1"
-  // 边框
-};
-var designTokensGreen = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: "#00BC6F",
-  // 背景色
-  colorBorder: "#00BC6F"
-  // 边框
-};
-var designTokensYellow = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: "#FFC300",
-  // 背景色
-  colorBorder: "#FFC300"
-  // 边框
-};
-var designTokensRed = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: "#FA2C2C",
-  // 背景色
-  colorBorder: "#FA2C2C"
-  // 边框
-};
-var designTokensGrey = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: "#B5B5B5",
-  // 背景色
-  colorBorder: "#B5B5B5"
-  // 边框
-};
-var designTokensLakeblue = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: "#1482CC",
-  // 背景色
-  colorBorder: "#1482CC"
-  // 边框
-};
-var designTokensOrange = {
-  colorText: (0, import_tokenHelper.getToken)("colorTagText"),
-  // 文本颜色
-  defaultBg: "#FF8D1B",
-  // 背景色
-  colorBorder: "#FF8D1B"
-  // 边框
-};
-var otherDesignTokens = {
-  padding: `0 ${(0, import_tokenHelper.getToken)("spacingTagPaddingHorizontal")}px`,
-  // 内边距
-  sizingTagShort: `${(0, import_tokenHelper.getToken)("sizingTagShort")}px`,
-  sizingTagTall: `${(0, import_tokenHelper.getToken)("sizingTagTall")}px`,
-  sizingTagTallLg: `${(0, import_tokenHelper.getToken)("sizingTagTallLg")}px`
+  colorText: (0, import_utils.getToken)("colorTagTextOrange"),
+  // 文本颜色
+  defaultBg: (0, import_utils.getToken)("colorTagOrangeLight"),
+  // 背景色
+  colorBorder: (0, import_utils.getToken)("colorTagOrangeLight")
+  // 边框
+};
+var useDesignTokensBlue = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensBlue = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: "#3434E1",
+    // 背景色
+    colorBorder: "#3434E1"
+    // 边框
+  };
+  return designTokensBlue;
+};
+var useDesignTokensGreen = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensGreen = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: getToken2("colorTagBackGroundGreen"),
+    // 背景色
+    colorBorder: getToken2("colorTagBackGroundGreen")
+    // 边框
+  };
+  return designTokensGreen;
+};
+var useDesignTokensYellow = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensYellow = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: getToken2("colorTagBackGroundYellow"),
+    // 背景色
+    colorBorder: getToken2("colorTagBackGroundYellow")
+    // 边框
+  };
+  return designTokensYellow;
+};
+var useDesignTokensRed = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensRed = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: getToken2("colorTagBackGroundRed"),
+    // 背景色
+    colorBorder: getToken2("colorTagBackGroundRed")
+    // 边框
+  };
+  return designTokensRed;
+};
+var useDesignTokensGrey = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensGrey = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: getToken2("colorTagBackGroundGrey"),
+    // 背景色
+    colorBorder: getToken2("colorTagBackGroundGrey")
+    // 边框
+  };
+  return designTokensGrey;
+};
+var useDesignTokensLakeblue = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensLakeblue = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: getToken2("colorTagBackGroundLakeBlue"),
+    // 背景色
+    colorBorder: getToken2("colorTagBackGroundLakeBlue")
+    // 边框
+  };
+  return designTokensLakeblue;
+};
+var useDesignTokensOrange = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const designTokensOrange = {
+    colorText: getToken2("colorTagText"),
+    // 文本颜色
+    defaultBg: getToken2("colorTagBackGroundOrange"),
+    // 背景色
+    colorBorder: getToken2("colorTagBackGroundOrange")
+    // 边框
+  };
+  return designTokensOrange;
+};
+var useOtherDesignTokens = () => {
+  const getToken2 = (0, import_utils.useDynamicTokens)();
+  const otherDesignTokens = {
+    padding: `0 ${getToken2("spacingTagPaddingHorizontal")}px`,
+    // 内边距
+    sizingTagShort: `${getToken2("sizingTagShort")}px`,
+    sizingTagTall: `${getToken2("sizingTagTall")}px`,
+    sizingTagTallLg: `${getToken2("sizingTagTallLg")}px`
+  };
+  return otherDesignTokens;
 };

package/lib/components/Tag/index.d.ts

@@ -7,7 +7,7 @@ export interface TagProps {
     children?: React.ReactNode;
     types?: types;
     style?: React.CSSProperties;
-    inverse?: boolean;
+    light?: boolean;
     block?: boolean;
     [key: string]: any;
 }

package/lib/components/Tag/index.js

@@ -75,7 +75,8 @@ var Tag = (props) => {
     children,
     prefixCls = "tag",
     block = false,
-    style
+    style,
+    className = ""
   } = _a, attr = __objRest(_a, [
     "types",
     "size",
@@ -83,14 +84,26 @@ var Tag = (props) => {
     "children",
     "prefixCls",
     "block",
-    "style"
+    "style",
+    "className"
   ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const otherDesignTokens = (0, import_designTokens.useOtherDesignTokens)();
+  const designTokensPrimary = (0, import_designTokens.useDesignTokensPrimary)();
+  const designTokensSecondary = (0, import_designTokens.useDesignTokensSecondary)();
+  const designTokensBlue = (0, import_designTokens.useDesignTokensBlue)();
+  const designTokensGrey = (0, import_designTokens.useDesignTokensGrey)();
+  const designTokensGreen = (0, import_designTokens.useDesignTokensGreen)();
+  const designTokensRed = (0, import_designTokens.useDesignTokensRed)();
+  const designTokensYellow = (0, import_designTokens.useDesignTokensYellow)();
+  const designTokensOrange = (0, import_designTokens.useDesignTokensOrange)();
+  const designTokensLakeblue = (0, import_designTokens.useDesignTokensLakeblue)();
   const {
     padding,
     sizingTagShort,
     sizingTagTall,
     sizingTagTallLg
-  } = import_designTokens.otherDesignTokens;
+  } = otherDesignTokens;
   const getTagSize = (s) => {
     switch (s) {
       case "tall":
@@ -104,23 +117,23 @@ var Tag = (props) => {
   const getType = (t) => {
     switch (t) {
       case "secondary":
-        return import_designTokens.designTokensSecondary;
+        return designTokensSecondary;
       case "blue":
-        return light ? import_designTokens.designTokensBlueLight : import_designTokens.designTokensBlue;
+        return light ? import_designTokens.designTokensBlueLight : designTokensBlue;
       case "green":
-        return light ? import_designTokens.designTokensGreenLight : import_designTokens.designTokensGreen;
+        return light ? import_designTokens.designTokensGreenLight : designTokensGreen;
       case "red":
-        return light ? import_designTokens.designTokensRedLight : import_designTokens.designTokensRed;
+        return light ? import_designTokens.designTokensRedLight : designTokensRed;
       case "orange":
-        return light ? import_designTokens.designTokensOrangeLight : import_designTokens.designTokensOrange;
+        return light ? import_designTokens.designTokensOrangeLight : designTokensOrange;
       case "grey":
-        return light ? import_designTokens.designTokensGreyLight : import_designTokens.designTokensGrey;
+        return light ? import_designTokens.designTokensGreyLight : designTokensGrey;
       case "lakeblue":
-        return light ? import_designTokens.designTokensLakeblueLight : import_designTokens.designTokensLakeblue;
+        return light ? import_designTokens.designTokensLakeblueLight : designTokensLakeblue;
       case "yellow":
-        return light ? import_designTokens.designTokensYellowLight : import_designTokens.designTokensYellow;
+        return light ? import_designTokens.designTokensYellowLight : designTokensYellow;
       default:
-        return import_designTokens.designTokensPrimary;
+        return designTokensPrimary;
     }
   };
   return /* @__PURE__ */ import_react.default.createElement(
@@ -129,14 +142,14 @@ var Tag = (props) => {
       prefixCls: import_constants.BASE_CLASS_PREFIX,
       theme: {
         components: {
-          Tag: __spreadValues(__spreadValues({}, import_designTokens.designTokens), getType(types))
+          Tag: __spreadValues(__spreadValues({}, designTokens), getType(types))
         }
       }
     },
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Tag,
       __spreadProps(__spreadValues({}, attr), {
-        className: `${import_constants.BASE_CLASS_PREFIX}-${prefixCls}`,
+        className: `${import_constants.BASE_CLASS_PREFIX}-${prefixCls} ${className}`,
         style: __spreadValues({ padding, height: getTagSize(size), width: block ? "100%" : "auto" }, style)
       }),
       /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC12SemiBold" }, children)

package/lib/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/lib/components/Text/designTokens.js

@@ -19,57 +19,71 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Text/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  otherDesignTokens: () => otherDesignTokens
+  useOtherDesignTokens: () => useOtherDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
-var otherDesignTokens = {
-  fontSizeDesktopTitleT23: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT23")}px`,
-  fontSizeDesktopContentC15: `${(0, import_tokenHelper.getToken)("fontSizeDesktopContentC15")}px`,
-  fontSizeDesktopContentC21: `${(0, import_tokenHelper.getToken)("fontSizeDesktopContentC21")}px`,
-  fontSizeDesktopTitleT21: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT21")}px`,
-  fontSizeDesktopTitleT15: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT15")}px`,
-  fontSizeDesktopContentC13: `${(0, import_tokenHelper.getToken)("fontSizeDesktopContentC13")}px`,
-  fontSizeDesktopContentC11: `${(0, import_tokenHelper.getToken)("fontSizeDesktopContentC11")}px`,
-  fontSizeDesktopContentC12: `${(0, import_tokenHelper.getToken)("fontSizeDesktopContentC12")}px`,
-  fontSizeDesktopContentC14: `${(0, import_tokenHelper.getToken)("fontSizeDesktopContentC14")}px`,
-  fontSizeDesktopTitleT1: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT1")}px`,
-  fontSizeDesktopTitleT32: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT32")}px`,
-  fontSizeDesktopTitleT41: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT41")}px`,
-  fontSizeDesktopContentC05: `${(0, import_tokenHelper.getToken)("fontSizeDesktopContentC05")}px`,
-  fontSizeDesktopContentC04: `${(0, import_tokenHelper.getToken)("fontSizeDesktopContentC04")}px`,
-  fontSizeDesktopTitleT7: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT7")}px`,
-  fontSizeDesktopTitleT8: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT8")}px`,
-  fontSizeDesktopTitleT2: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT2")}px`,
-  fontSizeDesktopTitleT5: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT5")}px`,
-  fontSizeDesktopTitleT3: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT3")}px`,
-  fontSizeDesktopTitleT4: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT4")}px`,
-  fontSizeDesktopTitleT10: `${(0, import_tokenHelper.getToken)("fontSizeDesktopTitleT10")}px`,
-  fontSizeMobileContentC04: `${(0, import_tokenHelper.getToken)("fontSizeMobileContentC04")}px`,
-  fontSizeMobileContentC05: `${(0, import_tokenHelper.getToken)("fontSizeMobileContentC05")}px`,
-  fontSizeMobileContentC11: `${(0, import_tokenHelper.getToken)("fontSizeMobileContentC11")}px`,
-  fontSizeMobileContentC12: `${(0, import_tokenHelper.getToken)("fontSizeMobileContentC12")}px`,
-  fontSizeMobileContentC13: `${(0, import_tokenHelper.getToken)("fontSizeMobileContentC13")}px`,
-  fontSizeMobileContentC14: `${(0, import_tokenHelper.getToken)("fontSizeMobileContentC14")}px`,
-  fontSizeMobileContentC15: `${(0, import_tokenHelper.getToken)("fontSizeMobileContentC15")}px`,
-  fontSizeMobileContentC21: `${(0, import_tokenHelper.getToken)("fontSizeMobileContentC21")}px`,
-  fontSizeMobileTitleT12: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT12")}px`,
-  fontSizeMobileTitleT13: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT13")}px`,
-  fontSizeMobileTitleT14: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT14")}px`,
-  fontSizeMobileTitleT15: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT15")}px`,
-  fontSizeMobileTitleT21: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT21")}px`,
-  fontSizeMobileTitleT23: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT23")}px`,
-  fontSizeMobileTitleT24: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT24")}px`,
-  fontSizeMobileTitleT25: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT25")}px`,
-  fontSizeMobileTitleT32: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT32")}px`,
-  fontSizeMobileTitleT34: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT34")}px`,
-  fontSizeMobileTitleT41: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT41")}px`,
-  fontSizeMobileTitleT45: `${(0, import_tokenHelper.getToken)("fontSizeMobileTitleT45")}px`,
-  fontSizeMobileNavigation: `${(0, import_tokenHelper.getToken)("fontSizeMobileNavigation")}px`,
-  fontFamilyPromaryRegular: (0, import_tokenHelper.getToken)("fontFamilyPromaryRegular"),
-  fontFamilyPromarySemiBold: (0, import_tokenHelper.getToken)("fontFamilyPromarySemiBold"),
-  fontFamilyPromaryBold: (0, import_tokenHelper.getToken)("fontFamilyPromaryBold"),
-  fontFamilySecondaryRegular: (0, import_tokenHelper.getToken)("fontFamilySecondaryRegular"),
-  fontFamilySecondarySemiBold: (0, import_tokenHelper.getToken)("fontFamilySecondarySemiBold"),
-  fontFamilySecondaryBold: (0, import_tokenHelper.getToken)("fontFamilySecondaryBold")
+var import_utils = require("../../utils");
+var import_scaleTool = require("../../utils/scaleTool");
+var useOtherDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const otherDesignTokens = {
+    fontSizeDesktopTitleT23: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT23"))}px`,
+    fontSizeDesktopContentC15: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC15"))}px`,
+    fontSizeDesktopContentC21: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC21"))}px`,
+    fontSizeDesktopContentC23: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC23"))}px`,
+    fontSizeDesktopTitleT21: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT21"))}px`,
+    fontSizeDesktopTitleT16: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT16"))}px`,
+    fontSizeDesktopTitleT15: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT15"))}px`,
+    fontSizeDesktopTitleT14: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT14"))}px`,
+    fontSizeDesktopTitleT13: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT13"))}px`,
+    fontSizeDesktopTitleT12: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT12"))}px`,
+    fontSizeDesktopContentC13: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC13"))}px`,
+    fontSizeDesktopContentC11: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC11"))}px`,
+    fontSizeDesktopContentC12: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC12"))}px`,
+    fontSizeDesktopContentC14: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC14"))}px`,
+    fontSizeDesktopTitleT34: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT34"))}px`,
+    fontSizeDesktopTitleT32: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT32"))}px`,
+    fontSizeDesktopTitleT41: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopTitleT41"))}px`,
+    fontSizeDesktopContentC05: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC05"))}px`,
+    fontSizeDesktopContentC04: `${(0, import_scaleTool.wSacle)(getToken("fontSizeDesktopContentC04"))}px`,
+    fontSizeMobileContentC04: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC04"))}px`,
+    fontSizeMobileContentC05: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC05"))}px`,
+    fontSizeMobileContentC11: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC11"))}px`,
+    fontSizeMobileContentC12: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC12"))}px`,
+    fontSizeMobileContentC13: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC13"))}px`,
+    fontSizeMobileContentC14: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC14"))}px`,
+    fontSizeMobileContentC15: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC15"))}px`,
+    fontSizeMobileContentC21: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC21"))}px`,
+    fontSizeMobileContentC23: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileContentC23"))}px`,
+    fontSizeMobileTitleT12: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT12"))}px`,
+    fontSizeMobileTitleT13: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT13"))}px`,
+    fontSizeMobileTitleT14: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT14"))}px`,
+    fontSizeMobileTitleT15: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT15"))}px`,
+    fontSizeMobileTitleT16: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT16"))}px`,
+    fontSizeMobileTitleT21: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT21"))}px`,
+    fontSizeMobileTitleT23: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT23"))}px`,
+    fontSizeMobileTitleT24: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT24"))}px`,
+    fontSizeMobileTitleT25: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT25"))}px`,
+    fontSizeMobileTitleT32: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT32"))}px`,
+    fontSizeMobileTitleT34: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT34"))}px`,
+    fontSizeMobileTitleT41: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT41"))}px`,
+    fontSizeMobileTitleT45: `${(0, import_scaleTool.wSacle)(getToken("fontSizeMobileTitleT45"))}px`,
+    fontSizeMobileNavigation: `${(0, import_scaleTool.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;
 };

package/lib/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;