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

package/lib/components/ListItem/style/index.less

@@ -1,14 +1,47 @@
 @import './variables.less';
+@component: list-item;
 
-.@{prefix}-list-item {
+.@{prefix}-@{component} {
   display: flex;
   flex-direction: row;
   align-items: center;
   overflow: hidden;
 
-  .@{prefix}-item-left {
+  &.default {
+    justify-content: space-between;
+
+    .@{prefix}-@{component}-title {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+
+      &.line1 {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      &.line2 {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    }
+
+    .@{prefix}-@{component}-subTitle {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .@{prefix}-@{component}-left {
 
-    .@{prefix}-icon-container {
+    .@{prefix}-@{component}-icon-container {
       width: 80px;
       height: 80px;
       display: flex;
@@ -17,7 +50,7 @@
       flex-shrink: 0;
     }
 
-    .@{prefix}-image-container {
+    .@{prefix}-@{component}-image-container {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -27,7 +60,7 @@
 
   }
 
-  .@{prefix}-item-right {
+  .@{prefix}-@{component}-right {
     display: flex;
     flex: 1;
     min-width: 0;
@@ -35,11 +68,11 @@
     align-items: center;
     justify-content: space-between;
 
-    .@{prefix}-title-sub-warp {
+    .@{prefix}-@{component}-title-sub-warp {
       flex: 1;
       overflow: hidden;
 
-      .@{prefix}-item-title {
+      .@{prefix}-@{component}-title {
         display: block;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -60,7 +93,7 @@
         }
       }
 
-      .@{prefix}-item-subTitle {
+      .@{prefix}-@{component}-subTitle {
         display: block;
         white-space: nowrap;
         overflow: hidden;
@@ -68,7 +101,7 @@
       }
     }
 
-    .@{prefix}-sub-icon {
+    .@{prefix}-@{component}-sub-icon {
       display: flex;
       align-items: center;
     }

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

@@ -1,31 +1,22 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadiusLG: any;
     titleColor: any;
     contentBg: any;
     headerBg: any;
     colorText: any;
     colorBgMask: any;
+    colorIcon: any;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     width: string;
-    spacingModalCardPaddingTop: any;
-    spacingModalButtonStickyPaddingVertical: any;
-    spacingModalCardVerticalGap: any;
-    spacingModalCardPaddingHorizontal: any;
+    spacingModalCardPaddingTop: number;
+    spacingModalButtonStickyPaddingVertical: number;
+    spacingModalCardVerticalGap: number;
+    spacingModalCardPaddingHorizontal: number;
+    spacingModalButtonStickyPaddingHorizontal: number;
+    spacingModalCardPaddingBottom: number;
 };
-declare const commonToken: {
+declare const useCommonToken: () => {
     [x: string]: string | number;
 };
-declare const styleToken: {
-    [x: string]: string | number;
-};
-declare const stickyFooterStyleToken: {
-    [x: string]: string | number;
-};
-declare const stickyHeaderFooterStyleToken: {
-    [x: string]: string | number;
-};
-declare const stickyHeaderStyleToken: {
-    [x: string]: string | number;
-};
-export { designTokens, otherDesignTokens, styleToken, stickyFooterStyleToken, stickyHeaderStyleToken, stickyHeaderFooterStyleToken, commonToken };
+export { useDesignTokens, useOtherDesignTokens, useCommonToken };

package/lib/components/Modal/designTokens.js

@@ -19,70 +19,54 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Modal/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  commonToken: () => commonToken,
-  designTokens: () => designTokens,
-  otherDesignTokens: () => otherDesignTokens,
-  stickyFooterStyleToken: () => stickyFooterStyleToken,
-  stickyHeaderFooterStyleToken: () => stickyHeaderFooterStyleToken,
-  stickyHeaderStyleToken: () => stickyHeaderStyleToken,
-  styleToken: () => styleToken
+  useCommonToken: () => useCommonToken,
+  useDesignTokens: () => useDesignTokens,
+  useOtherDesignTokens: () => useOtherDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenHelper = require("../../utils/tokenHelper");
+var import_utils = require("../../utils");
+var import_scaleTool = require("../../utils/scaleTool");
 var import_constants = require("../../constants");
 var prefixCls = import_constants.cssClasses.PREFIX + "-modal";
-var designTokens = {
-  borderRadiusLG: (0, import_tokenHelper.getToken)("borderRadiusModal"),
-  // 圆角
-  titleColor: (0, import_tokenHelper.getToken)("colorModalTextHeader"),
-  // header文本颜色
-  contentBg: (0, import_tokenHelper.getToken)("colorModalBackground"),
-  // 背景
-  headerBg: (0, import_tokenHelper.getToken)("colorModalBackground"),
-  // 背景
-  colorText: (0, import_tokenHelper.getToken)("colorModalTextBody"),
-  // 内容文本颜色
-  colorBgMask: (0, import_tokenHelper.getToken)("colorModalOverlay")
-  // 遮罩颜色
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    borderRadiusLG: getToken("borderRadiusModal"),
+    // 圆角
+    titleColor: getToken("colorModalTextHeader"),
+    // header文本颜色
+    contentBg: getToken("colorModalBackground"),
+    // 背景
+    headerBg: getToken("colorModalBackground"),
+    // 背景
+    colorText: getToken("colorModalTextBody"),
+    // 内容文本颜色
+    colorBgMask: getToken("colorModalOverlay"),
+    // 遮罩颜色
+    colorIcon: getToken("colorModalIcon")
+    // icon颜色
+  };
+  return designTokens;
 };
-var otherDesignTokens = {
-  width: `calc(100vw - ${(0, import_tokenHelper.getToken)("spacingModalPaddingHorizontal")}px - ${(0, import_tokenHelper.getToken)("spacingModalPaddingHorizontal")}px)`,
-  // 宽度
-  spacingModalCardPaddingTop: (0, import_tokenHelper.getToken)("spacingModalCardPaddingTop"),
-  spacingModalButtonStickyPaddingVertical: (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingVertical"),
-  spacingModalCardVerticalGap: (0, import_tokenHelper.getToken)("spacingModalCardVerticalGap"),
-  spacingModalCardPaddingHorizontal: (0, import_tokenHelper.getToken)("spacingModalCardPaddingHorizontal")
+var useOtherDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const otherDesignTokens = {
+    width: `calc(100vw - ${(0, import_scaleTool.wSacle)(getToken("spacingModalPaddingHorizontal"))}px - ${(0, import_scaleTool.wSacle)(getToken("spacingModalPaddingHorizontal"))}px)`,
+    // 宽度
+    spacingModalCardPaddingTop: (0, import_scaleTool.wSacle)(getToken("spacingModalCardPaddingTop")),
+    spacingModalButtonStickyPaddingVertical: (0, import_scaleTool.wSacle)(getToken("spacingModalButtonStickyPaddingVertical")),
+    spacingModalCardVerticalGap: (0, import_scaleTool.wSacle)(getToken("spacingModalCardVerticalGap")),
+    spacingModalCardPaddingHorizontal: (0, import_scaleTool.wSacle)(getToken("spacingModalCardPaddingHorizontal")),
+    spacingModalButtonStickyPaddingHorizontal: (0, import_scaleTool.wSacle)(getToken("spacingModalButtonStickyPaddingHorizontal")),
+    spacingModalCardPaddingBottom: (0, import_scaleTool.wSacle)(getToken("spacingModalCardPaddingBottom"))
+  };
+  return otherDesignTokens;
 };
-var commonToken = {
-  [`--${prefixCls}-footer-margin-top`]: 0,
-  [`--${prefixCls}-footer-padding`]: `${(0, import_tokenHelper.getToken)("spacingModalButtonPaddingTop")}px 0 0`
-};
-var styleToken = {
-  [`--${prefixCls}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingBottom")}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
-  [`--${prefixCls}-footer-border-top`]: "none",
-  [`--${prefixCls}-footer-padding`]: 0,
-  [`--${prefixCls}-body-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0`,
-  [`--${prefixCls}-header-margin-bottom`]: 0
-};
-var stickyFooterStyleToken = {
-  [`--${prefixCls}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${40 + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingVertical") + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
-  [`--${prefixCls}-footer-padding`]: `${otherDesignTokens.spacingModalButtonStickyPaddingVertical}px ${(0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px`,
-  [`--${prefixCls}-footer-border-top`]: "1px solid #E1E1E1",
-  [`--${prefixCls}-body-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0`,
-  [`--${prefixCls}-header-margin-bottom`]: 0
-};
-var stickyHeaderFooterStyleToken = {
-  [`--${prefixCls}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${40 + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingVertical") + (0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
-  [`--${prefixCls}-footer-padding`]: `${otherDesignTokens.spacingModalButtonStickyPaddingVertical}px ${(0, import_tokenHelper.getToken)("spacingModalButtonStickyPaddingHorizontal")}px`,
-  [`--${prefixCls}-footer-border-top`]: "1px solid #E1E1E1",
-  [`--${prefixCls}-body-padding`]: 0,
-  [`--${prefixCls}-header-margin-bottom`]: `${otherDesignTokens.spacingModalCardVerticalGap}px`
-};
-var stickyHeaderStyleToken = {
-  [`--${prefixCls}-content-padding`]: `0 ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${(0, import_tokenHelper.getToken)("spacingModalCardPaddingBottom")}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
-  [`--${prefixCls}-footer-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0 0`,
-  [`--${prefixCls}-footer-border-top`]: "none",
-  [`--${prefixCls}-body-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop * 2 + 26}px 0 0 0`,
-  [`--${prefixCls}-header-margin-bottom`]: 0,
-  [`--${prefixCls}-header-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`
+var useCommonToken = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const commonToken = {
+    [`--${prefixCls}-footer-margin-top`]: 0,
+    [`--${prefixCls}-footer-padding`]: `${(0, import_scaleTool.wSacle)(getToken("spacingModalButtonPaddingTop"))}px 0 0`
+  };
+  return commonToken;
 };

package/lib/components/Modal/index.js

@@ -1,6 +1,8 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -76,7 +79,8 @@ var Modal = (props) => {
     size = "50%",
     prefix = `${import_constants.cssClasses.PREFIX}-modal`,
     footerAlign = "right",
-    footer = null
+    footer = null,
+    className = ""
   } = _a, attr = __objRest(_a, [
     "title",
     "style",
@@ -86,16 +90,50 @@ var Modal = (props) => {
     "size",
     "prefix",
     "footerAlign",
-    "footer"
+    "footer",
+    "className"
   ]);
+  const designTokens = (0, import_designTokens.useDesignTokens)();
+  const otherDesignTokens = (0, import_designTokens.useOtherDesignTokens)();
+  const commonToken = (0, import_designTokens.useCommonToken)();
   const {
     spacingModalCardPaddingTop,
-    spacingModalButtonStickyPaddingVertical
-  } = import_designTokens.otherDesignTokens;
+    spacingModalButtonStickyPaddingVertical,
+    spacingModalCardPaddingHorizontal
+  } = otherDesignTokens;
+  const styleToken = {
+    [`--${prefix}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${otherDesignTokens.spacingModalCardPaddingBottom}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
+    [`--${prefix}-footer-border-top`]: "none",
+    [`--${prefix}-footer-padding`]: 0,
+    [`--${prefix}-body-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0`,
+    [`--${prefix}-header-margin-bottom`]: 0
+  };
+  const stickyFooterStyleToken = {
+    [`--${prefix}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${40 + otherDesignTokens.spacingModalButtonStickyPaddingVertical + otherDesignTokens.spacingModalButtonStickyPaddingHorizontal}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
+    [`--${prefix}-footer-padding`]: `${otherDesignTokens.spacingModalButtonStickyPaddingVertical}px ${otherDesignTokens.spacingModalButtonStickyPaddingHorizontal}px`,
+    [`--${prefix}-footer-border-top`]: "1px solid #E1E1E1",
+    [`--${prefix}-body-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0`,
+    [`--${prefix}-header-margin-bottom`]: 0
+  };
+  const stickyHeaderFooterStyleToken = {
+    [`--${prefix}-content-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${40 + otherDesignTokens.spacingModalButtonStickyPaddingVertical + otherDesignTokens.spacingModalButtonStickyPaddingHorizontal}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
+    [`--${prefix}-footer-padding`]: `${otherDesignTokens.spacingModalButtonStickyPaddingVertical}px ${otherDesignTokens.spacingModalButtonStickyPaddingHorizontal}px`,
+    [`--${prefix}-footer-border-top`]: "1px solid #E1E1E1",
+    [`--${prefix}-body-padding`]: 0,
+    [`--${prefix}-header-margin-bottom`]: `${otherDesignTokens.spacingModalCardVerticalGap}px`
+  };
+  const stickyHeaderStyleToken = {
+    [`--${prefix}-content-padding`]: `0 ${otherDesignTokens.spacingModalCardPaddingHorizontal}px ${otherDesignTokens.spacingModalCardPaddingBottom}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`,
+    [`--${prefix}-footer-padding`]: `${otherDesignTokens.spacingModalCardVerticalGap}px 0 0`,
+    [`--${prefix}-footer-border-top`]: "none",
+    [`--${prefix}-body-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop * 2 + 26}px 0 0 0`,
+    [`--${prefix}-header-margin-bottom`]: 0,
+    [`--${prefix}-header-padding`]: `${otherDesignTokens.spacingModalCardPaddingTop}px ${otherDesignTokens.spacingModalCardPaddingHorizontal}px`
+  };
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
-      token: { baseColor: "blue" },
+      token: {},
       path: [`${prefix}`]
     }, () => `
       .${prefix}-sticky-headers .${prefix}-header {
@@ -118,21 +156,30 @@ var Modal = (props) => {
       .${prefix}-center .${prefix}-footer {
         text-align: center;
       }
+      .${prefix} .${prefix}-close {
+        top: ${spacingModalCardPaddingHorizontal - 4}px
+      }
+      .${prefix}-mobile .${prefix}-close-x {
+        font-size: 24px;
+      }
+      .${prefix}-desktop .${prefix}-close-x {
+        font-size: 16px;
+      }
     `);
     return hashId;
   };
   useCustomButtonStyle();
-  const commonStyle = __spreadValues({}, import_designTokens.commonToken);
+  const commonStyle = __spreadValues({}, commonToken);
   const getStyle = () => {
     switch (type) {
       case "stickyHeaderFooter":
-        return import_designTokens.stickyHeaderFooterStyleToken;
+        return stickyHeaderFooterStyleToken;
       case "stickyHeader":
-        return import_designTokens.stickyHeaderStyleToken;
+        return stickyHeaderStyleToken;
       case "stickyFooter":
-        return import_designTokens.stickyFooterStyleToken;
+        return stickyFooterStyleToken;
       default:
-        return import_designTokens.styleToken;
+        return styleToken;
     }
   };
   const customStyle = __spreadValues({}, getStyle());
@@ -146,7 +193,7 @@ var Modal = (props) => {
       prefixCls: import_constants.cssClasses.PREFIX,
       theme: {
         components: {
-          Modal: __spreadValues({}, import_designTokens.designTokens)
+          Modal: __spreadValues({}, designTokens)
         },
         cssVar: true,
         hashed: false
@@ -154,13 +201,13 @@ var Modal = (props) => {
     },
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Modal,
-      __spreadValues({
-        width: breakpoint === "desktop" ? size : import_designTokens.otherDesignTokens.width,
+      __spreadProps(__spreadValues({}, attr), {
+        width: breakpoint === "desktop" ? size : otherDesignTokens.width,
         title: /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "TitleT21Bold" }, title),
-        style: __spreadValues(__spreadValues(__spreadValues({ top: "10%" }, commonStyle), customStyle), style),
         footer,
-        className: `${stickyFooterClass} ${prefix}-${breakpoint} ${prefix}-${footerAlign} ${stickyHeaderClass} ${stickyHeaderFooterClass}`
-      }, attr),
+        className: `${stickyFooterClass} ${prefix}-${breakpoint} ${prefix}-${footerAlign} ${stickyHeaderClass} ${stickyHeaderFooterClass} ${className}`,
+        style: __spreadValues(__spreadValues(__spreadValues({ top: "10%" }, commonStyle), customStyle), style)
+      }),
       /* @__PURE__ */ import_react.default.createElement(import_Text.default, { size: "ContentC14Regular" }, children)
     )
   ));

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

@@ -1,10 +1,11 @@
-declare const designTokens: {
-    spacingTopNavigationPaddingHorizontal: any;
-    spacingTopNavigationPaddingBottom: any;
-    spacingTopNavigationHorizontalGap: any;
-    spacingTopNavigationIconButtonHorizontalGap: any;
-    spacingTopNavigationTextLinkPaddingRight: any;
-    spacingTopNavigationTitlePaddingVertical: any;
+declare const useDesignTokens: () => {
+    spacingTopNavigationPaddingHorizontal: number;
+    spacingTopNavigationPaddingBottom: number;
+    spacingTopNavigationPaddingTop: number;
+    spacingTopNavigationHorizontalGap: number;
+    spacingTopNavigationIconButtonHorizontalGap: number;
+    spacingTopNavigationTextLinkPaddingRight: number;
+    spacingTopNavigationTitlePaddingVertical: number;
     colorTopNavigationTitleStandard: any;
     colorTopNavigationTitleInverse: any;
     colorTopNavigationGradient: any;
@@ -13,4 +14,4 @@ declare const designTokens: {
     colorTopNavigationBackgroundHaze: any;
     colorTopNavigationBackgroundInverse: any;
 };
-export default designTokens;
+export { useDesignTokens };

package/lib/components/Navigation/designTokens.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,38 +14,35 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/Navigation/designTokens.ts
 var designTokens_exports = {};
 __export(designTokens_exports, {
-  default: () => designTokens_default
+  useDesignTokens: () => useDesignTokens
 });
 module.exports = __toCommonJS(designTokens_exports);
-var import_tokenManager = __toESM(require("../../utils/tokenManager"));
-var designTokens = {
-  spacingTopNavigationPaddingHorizontal: import_tokenManager.default.tokenKey("spacingTopNavigationPaddingHorizontal"),
-  // 左右padding
-  spacingTopNavigationPaddingBottom: import_tokenManager.default.tokenKey("spacingTopNavigationPaddingBottom"),
-  //底部padding
-  spacingTopNavigationHorizontalGap: import_tokenManager.default.tokenKey("spacingTopNavigationHorizontalGap"),
-  spacingTopNavigationIconButtonHorizontalGap: import_tokenManager.default.tokenKey("spacingTopNavigationIconButtonHorizontalGap"),
-  spacingTopNavigationTextLinkPaddingRight: import_tokenManager.default.tokenKey("spacingTopNavigationTextLinkPaddingRight"),
-  spacingTopNavigationTitlePaddingVertical: import_tokenManager.default.tokenKey("spacingTopNavigationTitlePaddingVertical"),
-  colorTopNavigationTitleStandard: import_tokenManager.default.tokenKey("colorTopNavigationTitleStandard"),
-  colorTopNavigationTitleInverse: import_tokenManager.default.tokenKey("colorTopNavigationTitleInverse"),
-  colorTopNavigationGradient: import_tokenManager.default.tokenKey("colorTopNavigationGradient"),
-  colorTopNavigationBackground: import_tokenManager.default.tokenKey("colorTopNavigationBackground"),
-  colorTopNavigationBorderBottom: import_tokenManager.default.tokenKey("colorTopNavigationBorderBottom"),
-  colorTopNavigationBackgroundHaze: import_tokenManager.default.tokenKey("colorTopNavigationBackgroundHaze"),
-  colorTopNavigationBackgroundInverse: import_tokenManager.default.tokenKey("colorTopNavigationBackgroundInverse")
+var import_scaleTool = require("../../utils/scaleTool");
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    spacingTopNavigationPaddingHorizontal: (0, import_scaleTool.wSacle)(getToken("spacingTopNavigationPaddingHorizontal")),
+    // 左右padding
+    spacingTopNavigationPaddingBottom: (0, import_scaleTool.wSacle)(getToken("spacingTopNavigationPaddingBottom")),
+    //底部padding
+    spacingTopNavigationPaddingTop: (0, import_scaleTool.wSacle)(getToken("spacingTopNavigationPaddingTop")),
+    spacingTopNavigationHorizontalGap: (0, import_scaleTool.wSacle)(getToken("spacingTopNavigationHorizontalGap")),
+    spacingTopNavigationIconButtonHorizontalGap: (0, import_scaleTool.wSacle)(getToken("spacingTopNavigationIconButtonHorizontalGap")),
+    spacingTopNavigationTextLinkPaddingRight: (0, import_scaleTool.wSacle)(getToken("spacingTopNavigationTextLinkPaddingRight")),
+    spacingTopNavigationTitlePaddingVertical: (0, import_scaleTool.wSacle)(getToken("spacingTopNavigationTitlePaddingVertical")),
+    colorTopNavigationTitleStandard: getToken("colorTopNavigationTitleStandard"),
+    colorTopNavigationTitleInverse: getToken("colorTopNavigationTitleInverse"),
+    colorTopNavigationGradient: getToken("colorTopNavigationGradient"),
+    colorTopNavigationBackground: getToken("colorTopNavigationBackground"),
+    colorTopNavigationBorderBottom: getToken("colorTopNavigationBorderBottom"),
+    colorTopNavigationBackgroundHaze: getToken("colorTopNavigationBackgroundHaze"),
+    colorTopNavigationBackgroundInverse: getToken("colorTopNavigationBackgroundInverse")
+  };
+  return designTokens;
 };
-var designTokens_default = designTokens;

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

@@ -17,6 +17,7 @@ export interface INavigationProps {
     rightIcons?: RightIcon[];
     leftIconName?: string;
     imgBackground?: boolean;
+    hidegoback?: boolean;
     rightLink?: RightLinkConfig;
     titleIconBadge?: TitleIconBadgeConfig;
     title?: string;

package/lib/components/Navigation/index.js

@@ -59,7 +59,7 @@ __export(Navigation_exports, {
 });
 module.exports = __toCommonJS(Navigation_exports);
 var import_react = __toESM(require("react"));
-var import_designTokens = __toESM(require("./designTokens"));
+var import_designTokens = require("./designTokens");
 var import_cssinjs = require("@ant-design/cssinjs");
 var import_lodash = require("lodash");
 var import_theme = require("../../utils/theme");
@@ -69,7 +69,7 @@ var import_style = require("./style/index.less");
 var Navigation = (_a) => {
   var _b = _a, {
     hideBorder,
-    className,
+    className = "",
     rightIcons,
     rightLink,
     title,
@@ -79,7 +79,8 @@ var Navigation = (_a) => {
     imgBackground,
     noRight = false,
     leftIconName,
-    leftIconSize
+    leftIconSize,
+    hidegoback = false
   } = _b, restProps = __objRest(_b, [
     "hideBorder",
     "className",
@@ -92,12 +93,15 @@ var Navigation = (_a) => {
     "imgBackground",
     "noRight",
     "leftIconName",
-    "leftIconSize"
+    "leftIconSize",
+    "hidegoback"
   ]);
   var _a2;
+  const designTokens = (0, import_designTokens.useDesignTokens)();
   const {
     spacingTopNavigationPaddingHorizontal,
     spacingTopNavigationPaddingBottom,
+    spacingTopNavigationPaddingTop,
     colorTopNavigationBorderBottom,
     spacingTopNavigationTextLinkPaddingRight,
     colorTopNavigationBackgroundInverse,
@@ -105,8 +109,7 @@ var Navigation = (_a) => {
     colorTopNavigationTitleStandard,
     colorTopNavigationTitleInverse,
     colorTopNavigationGradient
-  } = import_designTokens.default;
-  console.log("designTokens", import_designTokens.default);
+  } = designTokens;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
@@ -117,7 +120,7 @@ var Navigation = (_a) => {
         padding-left: ${spacingTopNavigationPaddingHorizontal}px;
         padding-right: ${spacingTopNavigationPaddingHorizontal}px;
         padding-bottom: ${spacingTopNavigationPaddingBottom}px;
-        padding-top: ${spacingTopNavigationPaddingBottom}px;  // TODO：设计稿上没有暂时加的
+        padding-top: ${spacingTopNavigationPaddingTop}px;  
         border-bottom: 1px solid ${colorTopNavigationBorderBottom};
         background-color:${colorTopNavigationBackground};
         &.inverse {
@@ -162,12 +165,10 @@ var Navigation = (_a) => {
   return /* @__PURE__ */ import_react.default.createElement(
     "header",
     __spreadValues({
-      className: `${import_constants.cssClasses.PREFIX}-header  ${hideBorder ? "hideBorder" : ""}  ${isInverse ? "inverse" : ""} ${imgBackground ? "imgBackground" : ""} ${noRight ? "noRight" : ""} ${className || ""}`
+      className: `${import_constants.cssClasses.PREFIX}-header ${hideBorder ? "hideBorder" : ""} ${isInverse ? "inverse" : ""} ${imgBackground ? "imgBackground" : ""} ${noRight ? "noRight" : ""} ${className || ""}`
     }, restProps),
-    /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, customeIconSize: leftIconSize, inverse: isInverse, size: "medium", name: leftIconName || "icon-a-Backarrow-copy", onClick: onGoBack }),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `
-        ${import_constants.cssClasses.PREFIX}-title-warp
-      ` }, !(0, import_lodash.isEmpty)(titleIconBadge) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-badge` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { inverse: isInverse, size: 24, style: { marginRight: "4px" }, name: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "ContentC14Bold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, titleIconBadge.title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-badge` }, +titleIconBadge.badge > 99 ? "99+" : titleIconBadge.badge)) : /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "ContentC14Bold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
+    !hidegoback && /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, customeIconSize: leftIconSize, inverse: isInverse, size: "medium", name: leftIconName || "icon-a-Backarrow-copy", onClick: onGoBack }),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-warp` }, !(0, import_lodash.isEmpty)(titleIconBadge) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-badge` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { inverse: isInverse, size: 24, style: { marginRight: "4px" }, name: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, titleIconBadge.title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-badge` }, +titleIconBadge.badge > 99 ? "99+" : titleIconBadge.badge)) : /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
     !noRight && /* @__PURE__ */ import_react.default.createElement(import__.IconButtonGroup, { className: `${import_constants.cssClasses.PREFIX}-rightWarp` }, (_a2 = rightIcons == null ? void 0 : rightIcons.slice(0, 3)) == null ? void 0 : _a2.map((i, index) => /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { inverse: isInverse, key: index, name: i.iconName, size: "medium", onClick: i.onIconClick })), !(0, import_lodash.isEmpty)(rightLink) && /* @__PURE__ */ import_react.default.createElement(import__.TextLink, { inverse: isInverse, className: `${import_constants.cssClasses.PREFIX}-right-link`, type: import__.TextLinkEnum.default, text: rightLink.linkText, onClick: rightLink.onLinkClick }))
   );
 };

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

@@ -0,0 +1,9 @@
+declare const useDesignTokens: () => {
+    colorNotificationBackgroundInfo: any;
+    borderRadiusNotification: any;
+    spacingNotificationPaddingHorizontal: any;
+    spacingNotificationPaddingVertical: any;
+    colorNotificationTextTitle: any;
+    colorNotificationTextBody: any;
+};
+export { useDesignTokens };

package/lib/components/Notification/designTokens.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Notification/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  useDesignTokens: () => useDesignTokens
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_utils = require("../../utils");
+var useDesignTokens = () => {
+  const getToken = (0, import_utils.useDynamicTokens)();
+  const designTokens = {
+    colorNotificationBackgroundInfo: getToken("colorNotificationBackgroundInfo"),
+    borderRadiusNotification: getToken("borderRadiusNotification"),
+    spacingNotificationPaddingHorizontal: getToken("spacingNotificationPaddingHorizontal"),
+    spacingNotificationPaddingVertical: getToken("spacingNotificationPaddingVertical"),
+    colorNotificationTextTitle: getToken("colorNotificationTextTitle"),
+    colorNotificationTextBody: getToken("colorNotificationTextBody")
+  };
+  return designTokens;
+};