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

package/lib/components/Tabs/designTokens.js

@@ -19,72 +19,89 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Tabs/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  designFillTokens: () => designFillTokens,
-  designTokens: () => designTokens,
-  inverseDesignTokens: () => inverseDesignTokens,
-  otherDesignToken: () => otherDesignToken
+  useDesignFillTokens: () => useDesignFillTokens,
+  useDesignTokens: () => useDesignTokens,
+  useInverseDesignTokens: () => useInverseDesignTokens,
+  useOtherDesignTokens: () => useOtherDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
-var otherDesignToken = {
-  colorTabsTextSubtitleInverseInactive: (0, import_tokenHelper.getToken)("colorTabsTextSubtitleInverseInactive"),
-  colorTabsTextSubtitleInactive: (0, import_tokenHelper.getToken)("colorTabsTextSubtitleInactive"),
-  colorTabsIconInactiveInverse: (0, import_tokenHelper.getToken)("colorTabsIconInactiveInverse"),
-  colorTabsIconActiveInverse: (0, import_tokenHelper.getToken)("colorTabsIconActiveInverse"),
-  colorTabsIconInactive: (0, import_tokenHelper.getToken)("colorTabsIconInactive"),
-  colorTabsIconActive: (0, import_tokenHelper.getToken)("colorTabsIconActive"),
-  colorTabsTextSubtitleInverse: (0, import_tokenHelper.getToken)("colorTabsTextSubtitleInverse"),
-  colorTabsTextSubtitle: (0, import_tokenHelper.getToken)("colorTabsTextSubtitle"),
-  sizingTabsIcon: (0, import_tokenHelper.getToken)("sizingTabsIcon")
+var import_scaleTool = require("../../utils/scaleTool");
+var import_utils = require("../../utils");
+var useOtherDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const otherDesignToken = {
+    colorTabsTextSubtitleInverseInactive: getToken("colorTabsTextSubtitleInverseInactive"),
+    colorTabsTextSubtitleInactive: getToken("colorTabsTextSubtitleInactive"),
+    colorTabsIconInactiveInverse: getToken("colorTabsIconInactiveInverse"),
+    colorTabsIconActiveInverse: getToken("colorTabsIconActiveInverse"),
+    colorTabsIconInactive: getToken("colorTabsIconInactive"),
+    colorTabsIconActive: getToken("colorTabsIconActive"),
+    colorTabsTextSubtitleInverse: getToken("colorTabsTextSubtitleInverse"),
+    colorTabsTextSubtitle: getToken("colorTabsTextSubtitle"),
+    sizingTabsIcon: (0, import_scaleTool.wSacle)(getToken("sizingTabsIcon"))
+  };
+  return otherDesignToken;
 };
-var designTokens = {
-  inkBarColor: (0, import_tokenHelper.getToken)("colorTabsBorderActive"),
-  // 选中的边框颜色
-  itemSelectedColor: (0, import_tokenHelper.getToken)("colorTabsTextTitle"),
-  // 选中的label颜色
-  itemHoverColor: (0, import_tokenHelper.getToken)("colorTabsTextTitle"),
-  // hover label颜色
-  itemActiveColor: (0, import_tokenHelper.getToken)("colorTabsTextTitle"),
-  // active label颜色
-  itemColor: (0, import_tokenHelper.getToken)("colorTabsTextTitleInactive"),
-  // 默认label颜色
-  colorBorderSecondary: (0, import_tokenHelper.getToken)("colorTabsBorderInactive"),
-  // 未选中的边框
-  horizontalItemPadding: `${(0, import_tokenHelper.getToken)("spacingTabsVerticalGap")}px ${(0, import_tokenHelper.getToken)("spacingTabsPaddingHorizontal")}px`,
-  lineWidthBold: (0, import_tokenHelper.getToken)("borderWidthTabsActive")
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    inkBarColor: getToken("colorTabsBorderActive"),
+    // 选中的边框颜色
+    itemSelectedColor: getToken("colorTabsTextTitle"),
+    // 选中的label颜色
+    itemHoverColor: getToken("colorTabsTextTitle"),
+    // hover label颜色
+    itemActiveColor: getToken("colorTabsTextTitle"),
+    // active label颜色
+    itemColor: getToken("colorTabsTextTitleInactive"),
+    // 默认label颜色
+    colorBorderSecondary: getToken("colorTabsBorderInactive"),
+    // 未选中的边框
+    horizontalItemPadding: `${(0, import_scaleTool.wSacle)(getToken("spacingTabsVerticalGap"))}px ${(0, import_scaleTool.wSacle)(getToken("spacingTabsPaddingHorizontal"))}px`,
+    lineWidthBold: getToken("borderWidthTabsActive")
+  };
+  return designTokens;
 };
-var designFillTokens = {
-  inkBarColor: "#4D28E8",
-  // 选中的边框颜色
-  itemSelectedColor: "#fff",
-  // 选中的label颜色
-  itemHoverColor: (0, import_tokenHelper.getToken)("colorTabsTextTitle"),
-  // hover label颜色
-  itemActiveColor: (0, import_tokenHelper.getToken)("colorTabsTextTitle"),
-  // active label颜色
-  itemColor: (0, import_tokenHelper.getToken)("colorTabsTextTitleInactive"),
-  // 默认label颜色
-  colorBorderSecondary: "#F5F5F8",
-  // 未选中的边框
-  cardPadding: `6px ${(0, import_tokenHelper.getToken)("spacingTabsPaddingHorizontal")}px`,
-  colorFillAlter: "#F5F5F8",
-  lineWidth: 0,
-  // 线条宽度
-  colorBgContainer: "#4D28E8"
+var useDesignFillTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designFillTokens = {
+    inkBarColor: "#4D28E8",
+    // 选中的边框颜色
+    itemSelectedColor: "#fff",
+    // 选中的label颜色
+    itemHoverColor: getToken("colorTabsTextTitle"),
+    // hover label颜色
+    itemActiveColor: getToken("colorTabsTextTitle"),
+    // active label颜色
+    itemColor: getToken("colorTabsTextTitleInactive"),
+    // 默认label颜色
+    colorBorderSecondary: "#F5F5F8",
+    // 未选中的边框
+    cardPadding: `${(0, import_scaleTool.wSacle)(6)}px ${(0, import_scaleTool.wSacle)(getToken("spacingTabsPaddingHorizontal"))}px`,
+    colorFillAlter: "#F5F5F8",
+    lineWidth: 0,
+    // 线条宽度
+    colorBgContainer: "#4D28E8"
+  };
+  return designFillTokens;
 };
-var inverseDesignTokens = {
-  inkBarColor: (0, import_tokenHelper.getToken)("colorTabsBorderActiveInverse"),
-  // 选中的边框颜色
-  itemSelectedColor: (0, import_tokenHelper.getToken)("colorTabsTextTitleInverse"),
-  // 选中的label颜色
-  itemHoverColor: (0, import_tokenHelper.getToken)("colorTabsTextTitleInverse"),
-  // hover label颜色
-  itemActiveColor: (0, import_tokenHelper.getToken)("colorTabsTextTitleInverse"),
-  // active label颜色
-  itemColor: (0, import_tokenHelper.getToken)("colorTabsTextTitleInverseInactive"),
-  // 默认label颜色
-  colorBorderSecondary: (0, import_tokenHelper.getToken)("colorTabsBorderInactiveInverse"),
-  // 未选中的边框
-  horizontalItemPadding: `${(0, import_tokenHelper.getToken)("spacingTabsVerticalGap")}px ${(0, import_tokenHelper.getToken)("spacingTabsPaddingHorizontal")}px`,
-  lineWidthBold: (0, import_tokenHelper.getToken)("borderWidthTabsActive")
+var useInverseDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const inverseDesignTokens = {
+    inkBarColor: getToken("colorTabsBorderActiveInverse"),
+    // 选中的边框颜色
+    itemSelectedColor: getToken("colorTabsTextTitleInverse"),
+    // 选中的label颜色
+    itemHoverColor: getToken("colorTabsTextTitleInverse"),
+    // hover label颜色
+    itemActiveColor: getToken("colorTabsTextTitleInverse"),
+    // active label颜色
+    itemColor: getToken("colorTabsTextTitleInverseInactive"),
+    // 默认label颜色
+    colorBorderSecondary: getToken("colorTabsBorderInactiveInverse"),
+    // 未选中的边框
+    horizontalItemPadding: `${(0, import_scaleTool.wSacle)(getToken("spacingTabsVerticalGap"))}px ${(0, import_scaleTool.wSacle)(getToken("spacingTabsPaddingHorizontal"))}px`,
+    lineWidthBold: getToken("borderWidthTabsActive")
+  };
+  return inverseDesignTokens;
 };

package/lib/components/Tabs/index.js

@@ -76,30 +76,36 @@ var Tabs = (props) => {
     items = [],
     type = "default",
     defaultActiveKey,
-    prefixCls = `${import_constants.BASE_CLASS_PREFIX}-tabs`
+    prefixCls = `${import_constants.BASE_CLASS_PREFIX}-tabs`,
+    className = ""
   } = _a, attr = __objRest(_a, [
     "inverse",
     "children",
     "items",
     "type",
     "defaultActiveKey",
-    "prefixCls"
+    "prefixCls",
+    "className"
   ]);
-  const subTitleColor = inverse ? import_designTokens.otherDesignToken.colorTabsTextSubtitleInverseInactive : import_designTokens.otherDesignToken.colorTabsTextSubtitleInactive;
-  const subTitleActiveColor = inverse ? import_designTokens.otherDesignToken.colorTabsTextSubtitleInverse : import_designTokens.otherDesignToken.colorTabsTextSubtitle;
-  const iconColor = inverse ? import_designTokens.otherDesignToken.colorTabsIconInactiveInverse : import_designTokens.otherDesignToken.colorTabsIconInactive;
-  const iconActiveColor = inverse ? import_designTokens.otherDesignToken.colorTabsIconActiveInverse : import_designTokens.otherDesignToken.colorTabsIconActive;
+  const otherDesignToken = (0, import_designTokens.useOtherDesignTokens)();
+  const designFillTokens = (0, import_designTokens.useDesignFillTokens)();
+  const inverseDesignTokens = (0, import_designTokens.useInverseDesignTokens)();
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const subTitleColor = inverse ? otherDesignToken.colorTabsTextSubtitleInverseInactive : otherDesignToken.colorTabsTextSubtitleInactive;
+  const subTitleActiveColor = inverse ? otherDesignToken.colorTabsTextSubtitleInverse : otherDesignToken.colorTabsTextSubtitle;
+  const iconColor = inverse ? otherDesignToken.colorTabsIconInactiveInverse : otherDesignToken.colorTabsIconInactive;
+  const iconActiveColor = inverse ? otherDesignToken.colorTabsIconActiveInverse : otherDesignToken.colorTabsIconActive;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
-      token: { baseColor: "blue" },
+      token: {},
       path: [`${prefixCls}`]
     }, () => `
       .${prefixCls}-card.${prefixCls}-fill>.${prefixCls}-nav .${prefixCls}-tab {
         border-radius: 18px;
       }
       .${prefixCls}-card.${prefixCls}-fill .${prefixCls}-nav-list {
-        background: ${import_designTokens.designFillTokens.colorFillAlter};
+        background: ${designFillTokens.colorFillAlter};
         border-radius: 18px;
       }
     `);
@@ -111,12 +117,13 @@ var Tabs = (props) => {
     setActiveKey(key);
   };
   const item = items.map((i) => __spreadProps(__spreadValues({
-    label: /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-item` }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: i.key === activeKey ? iconActiveColor : iconColor, fontSize: import_designTokens.otherDesignToken.sizingTabsIcon } }, i.icon), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC14Regular", className: `${prefixCls}-item-title` }, i.title), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC12Regular", style: { color: i.key === activeKey ? subTitleActiveColor : subTitleColor } }, i.subTitle))
+    label: /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-item` }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: i.key === activeKey ? iconActiveColor : iconColor, fontSize: otherDesignToken.sizingTabsIcon } }, i.icon), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC14Regular", className: `${prefixCls}-item-title` }, i.title), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC12Regular", style: { color: i.key === activeKey ? subTitleActiveColor : subTitleColor } }, i.subTitle))
   }, i), {
     icon: null
   }));
-  const inverseStoken = inverse ? import_designTokens.inverseDesignTokens : import_designTokens.designTokens;
-  const fillStoken = type === "fill" ? import_designTokens.designFillTokens : inverseStoken;
+  const inverseStoken = inverse ? inverseDesignTokens : designTokens;
+  const fillStoken = type === "fill" ? designFillTokens : inverseStoken;
+  const fillClass = type === "fill" ? `${prefixCls}-fill` : "";
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.ConfigProvider,
     {
@@ -136,7 +143,7 @@ var Tabs = (props) => {
         items: item,
         onTabClick: handleTabClick,
         type: type === "fill" ? "card" : "line",
-        className: type === "fill" ? `${prefixCls}-fill` : ""
+        className: `${fillClass} ${className}`
       }),
       children
     )

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

@@ -1,12 +1,12 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadiusSM: any;
 };
-declare const designTokensPrimary: {
+declare const useDesignTokensPrimary: () => {
     colorText: any;
     defaultBg: any;
     colorBorder: any;
 };
-declare const designTokensSecondary: {
+declare const useDesignTokensSecondary: () => {
     colorText: any;
     defaultBg: any;
     colorBorder: any;
@@ -17,74 +17,74 @@ declare const designTokensBlueLight: {
     colorBorder: string;
 };
 declare const designTokensGreenLight: {
-    colorText: string;
-    defaultBg: string;
-    colorBorder: string;
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
 };
 declare const designTokensYellowLight: {
-    colorText: string;
-    defaultBg: string;
-    colorBorder: string;
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
 };
 declare const designTokensRedLight: {
-    colorText: string;
-    defaultBg: string;
-    colorBorder: string;
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
 };
 declare const designTokensGreyLight: {
-    colorText: string;
-    defaultBg: string;
-    colorBorder: string;
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
 };
 declare const designTokensLakeblueLight: {
-    colorText: string;
-    defaultBg: string;
-    colorBorder: string;
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
 };
 declare const designTokensOrangeLight: {
-    colorText: string;
-    defaultBg: string;
-    colorBorder: string;
+    colorText: any;
+    defaultBg: any;
+    colorBorder: any;
 };
-declare const designTokensBlue: {
+declare const useDesignTokensBlue: () => {
     colorText: any;
     defaultBg: string;
     colorBorder: string;
 };
-declare const designTokensGreen: {
+declare const useDesignTokensGreen: () => {
     colorText: any;
-    defaultBg: string;
-    colorBorder: string;
+    defaultBg: any;
+    colorBorder: any;
 };
-declare const designTokensYellow: {
+declare const useDesignTokensYellow: () => {
     colorText: any;
-    defaultBg: string;
-    colorBorder: string;
+    defaultBg: any;
+    colorBorder: any;
 };
-declare const designTokensRed: {
+declare const useDesignTokensRed: () => {
     colorText: any;
-    defaultBg: string;
-    colorBorder: string;
+    defaultBg: any;
+    colorBorder: any;
 };
-declare const designTokensGrey: {
+declare const useDesignTokensGrey: () => {
     colorText: any;
-    defaultBg: string;
-    colorBorder: string;
+    defaultBg: any;
+    colorBorder: any;
 };
-declare const designTokensLakeblue: {
+declare const useDesignTokensLakeblue: () => {
     colorText: any;
-    defaultBg: string;
-    colorBorder: string;
+    defaultBg: any;
+    colorBorder: any;
 };
-declare const designTokensOrange: {
+declare const useDesignTokensOrange: () => {
     colorText: any;
-    defaultBg: string;
-    colorBorder: string;
+    defaultBg: any;
+    colorBorder: any;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     padding: string;
     sizingTagShort: string;
     sizingTagTall: string;
     sizingTagTallLg: string;
 };
-export { designTokens, otherDesignTokens, designTokensPrimary, designTokensSecondary, designTokensBlue, designTokensGrey, designTokensGreen, designTokensRed, designTokensYellow, designTokensOrange, designTokensLakeblue, designTokensBlueLight, designTokensGreyLight, designTokensGreenLight, designTokensRedLight, designTokensYellowLight, designTokensOrangeLight, designTokensLakeblueLight, };
+export { useDesignTokens, useOtherDesignTokens, useDesignTokensPrimary, useDesignTokensSecondary, useDesignTokensBlue, useDesignTokensGrey, useDesignTokensGreen, useDesignTokensRed, useDesignTokensYellow, useDesignTokensOrange, useDesignTokensLakeblue, designTokensBlueLight, designTokensGreyLight, designTokensGreenLight, designTokensRedLight, designTokensYellowLight, designTokensOrangeLight, designTokensLakeblueLight, };