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

package/es/components/Tabs/designTokens.js

@@ -1,64 +1,81 @@
-import { getToken } from "../../utils/tokenHelper";
-var 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: getToken('sizingTabsIcon')
+import { wSacle } from "../../utils/scaleTool";
+import { useDynamicTokens } from "../../utils";
+var useOtherDesignTokens = function useOtherDesignTokens() {
+  var getToken = useDynamicTokens();
+  var 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: wSacle(getToken('sizingTabsIcon'))
+  };
+  return otherDesignToken;
 };
-var 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: "".concat(getToken('spacingTabsVerticalGap'), "px ").concat(getToken('spacingTabsPaddingHorizontal'), "px"),
-  lineWidthBold: getToken('borderWidthTabsActive')
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var 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: "".concat(wSacle(getToken('spacingTabsVerticalGap')), "px ").concat(wSacle(getToken('spacingTabsPaddingHorizontal')), "px"),
+    lineWidthBold: getToken('borderWidthTabsActive')
+  };
+  return designTokens;
 };
-var designFillTokens = {
-  inkBarColor: '#4D28E8',
-  // 选中的边框颜色
-  itemSelectedColor: '#fff',
-  // 选中的label颜色
-  itemHoverColor: getToken('colorTabsTextTitle'),
-  // hover label颜色
-  itemActiveColor: getToken('colorTabsTextTitle'),
-  // active label颜色
-  itemColor: getToken('colorTabsTextTitleInactive'),
-  // 默认label颜色
-  colorBorderSecondary: '#F5F5F8',
-  // 未选中的边框
-  cardPadding: "6px ".concat(getToken('spacingTabsPaddingHorizontal'), "px"),
-  colorFillAlter: '#F5F5F8',
-  lineWidth: 0,
-  // 线条宽度
-  colorBgContainer: '#4D28E8'
+var useDesignFillTokens = function useDesignFillTokens() {
+  var getToken = useDynamicTokens();
+  var designFillTokens = {
+    inkBarColor: '#4D28E8',
+    // 选中的边框颜色
+    itemSelectedColor: '#fff',
+    // 选中的label颜色
+    itemHoverColor: getToken('colorTabsTextTitle'),
+    // hover label颜色
+    itemActiveColor: getToken('colorTabsTextTitle'),
+    // active label颜色
+    itemColor: getToken('colorTabsTextTitleInactive'),
+    // 默认label颜色
+    colorBorderSecondary: '#F5F5F8',
+    // 未选中的边框
+    cardPadding: "".concat(wSacle(6), "px ").concat(wSacle(getToken('spacingTabsPaddingHorizontal')), "px"),
+    colorFillAlter: '#F5F5F8',
+    lineWidth: 0,
+    // 线条宽度
+    colorBgContainer: '#4D28E8'
+  };
+  return designFillTokens;
 };
-var 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: "".concat(getToken('spacingTabsVerticalGap'), "px ").concat(getToken('spacingTabsPaddingHorizontal'), "px"),
-  lineWidthBold: getToken('borderWidthTabsActive')
+var useInverseDesignTokens = function useInverseDesignTokens() {
+  var getToken = useDynamicTokens();
+  var 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: "".concat(wSacle(getToken('spacingTabsVerticalGap')), "px ").concat(wSacle(getToken('spacingTabsPaddingHorizontal')), "px"),
+    lineWidthBold: getToken('borderWidthTabsActive')
+  };
+  return inverseDesignTokens;
 };
-export { otherDesignToken, designTokens, inverseDesignTokens, designFillTokens };
+export { useOtherDesignTokens, useDesignTokens, useDesignFillTokens, useInverseDesignTokens };

package/es/components/Tabs/index.js

@@ -5,11 +5,11 @@ import _Tabs from "antd/es/tabs";
 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 = ["inverse", "children", "items", "type", "defaultActiveKey", "prefixCls"];
+var _excluded = ["inverse", "children", "items", "type", "defaultActiveKey", "prefixCls", "className"];
 import React, { useState } from 'react';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { theme } from "../../utils/theme";
-import { designTokens, inverseDesignTokens, otherDesignToken, designFillTokens } from "./designTokens";
+import { useOtherDesignTokens, useDesignTokens, useDesignFillTokens, useInverseDesignTokens } from "./designTokens";
 import { BASE_CLASS_PREFIX } from "../../constants";
 import Text from "../Text";
 import "./style/index.less";
@@ -24,7 +24,13 @@ var Tabs = function Tabs(props) {
     defaultActiveKey = props.defaultActiveKey,
     _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? "".concat(BASE_CLASS_PREFIX, "-tabs") : _props$prefixCls,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     attr = _objectWithoutProperties(props, _excluded);
+  var otherDesignToken = useOtherDesignTokens();
+  var designFillTokens = useDesignFillTokens();
+  var inverseDesignTokens = useInverseDesignTokens();
+  var designTokens = useDesignTokens();
 
   // inverse表示反选，颜色不同
   var subTitleColor = inverse ? otherDesignToken.colorTabsTextSubtitleInverseInactive : otherDesignToken.colorTabsTextSubtitleInactive; // 默认subTitle颜色
@@ -35,9 +41,7 @@ var Tabs = function Tabs(props) {
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
-      token: {
-        baseColor: 'blue'
-      },
+      token: {},
       path: ["".concat(prefixCls)]
     }, function () {
       return "\n      .".concat(prefixCls, "-card.").concat(prefixCls, "-fill>.").concat(prefixCls, "-nav .").concat(prefixCls, "-tab {\n        border-radius: 18px;\n      }\n      .").concat(prefixCls, "-card.").concat(prefixCls, "-fill .").concat(prefixCls, "-nav-list {\n        background: ").concat(designFillTokens.colorFillAlter, ";\n        border-radius: 18px;\n      }\n    ");
@@ -80,6 +84,7 @@ var Tabs = function Tabs(props) {
   });
   var inverseStoken = inverse ? inverseDesignTokens : designTokens;
   var fillStoken = type === 'fill' ? designFillTokens : inverseStoken;
+  var fillClass = type === 'fill' ? "".concat(prefixCls, "-fill") : '';
   return /*#__PURE__*/_jsx(_ConfigProvider, {
     prefixCls: BASE_CLASS_PREFIX,
     theme: {
@@ -94,7 +99,7 @@ var Tabs = function Tabs(props) {
       items: item,
       onTabClick: handleTabClick,
       type: type === 'fill' ? "card" : "line",
-      className: type === 'fill' ? "".concat(prefixCls, "-fill") : '',
+      className: "".concat(fillClass, " ").concat(className),
       children: children
     }))
   });

package/es/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, };

package/es/components/Tag/designTokens.js

@@ -1,20 +1,32 @@
-import { getToken } from "../../utils/tokenHelper";
-var designTokens = {
-  borderRadiusSM: getToken('borderRadiusTag') // 圆角
-};
-var designTokensPrimary = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: getToken('colorTagBackgroundPrimary'),
-  // 背景色
-  colorBorder: getToken('colorTagBackgroundPrimary') // 边框
-};
-var designTokensSecondary = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: getToken('colorTagBackgroundSecondary'),
-  // 背景色
-  colorBorder: getToken('colorTagBackgroundSecondary') // 边框
+import { getToken, useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    borderRadiusSM: getToken('borderRadiusTag') // 圆角
+  };
+  return designTokens;
+};
+var useDesignTokensPrimary = function useDesignTokensPrimary() {
+  var getToken = useDynamicTokens();
+  var designTokensPrimary = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: getToken('colorTagBackgroundPrimary'),
+    // 背景色
+    colorBorder: getToken('colorTagBackgroundPrimary') // 边框
+  };
+  return designTokensPrimary;
+};
+var useDesignTokensSecondary = function useDesignTokensSecondary() {
+  var getToken = useDynamicTokens();
+  var designTokensSecondary = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: getToken('colorTagBackgroundSecondary'),
+    // 背景色
+    colorBorder: getToken('colorTagBackgroundSecondary') // 边框
+  };
+  return designTokensSecondary;
 };
 var designTokensBlueLight = {
   colorText: '#3434E1',
@@ -24,101 +36,133 @@ var designTokensBlueLight = {
   colorBorder: '#EBEBFC' // 边框
 };
 var designTokensGreenLight = {
-  colorText: '#00BC6F',
+  colorText: getToken('colorTagTextGreen'),
   // 文本颜色
-  defaultBg: '#E8FBF3',
+  defaultBg: getToken('colorTagGreenLight'),
   // 背景色
-  colorBorder: '#E8FBF3' // 边框
+  colorBorder: getToken('colorTagGreenLight') // 边框
 };
 var designTokensYellowLight = {
-  colorText: '#FFC300',
+  colorText: getToken('colorTagTextYellow'),
   // 文本颜色
-  defaultBg: '#FFF8E5',
+  defaultBg: getToken('colorTagYellowLight'),
   // 背景色
-  colorBorder: '#FFF8E5' // 边框
+  colorBorder: getToken('colorTagYellowLight') // 边框
 };
 var designTokensRedLight = {
-  colorText: '#FA2C2C',
+  colorText: getToken('colorTagTextRed'),
   // 文本颜色
-  defaultBg: '#FFEAEA',
+  defaultBg: getToken('colorTagRedLight'),
   // 背景色
-  colorBorder: '#FFEAEA' // 边框
+  colorBorder: getToken('colorTagRedLight') // 边框
 };
 var designTokensGreyLight = {
-  colorText: '#545454',
+  colorText: getToken('colorTagTextGrey'),
   // 文本颜色
-  defaultBg: '#E6E6E6',
+  defaultBg: getToken('colorTagGreyLight'),
   // 背景色
-  colorBorder: '#E6E6E6' // 边框
+  colorBorder: getToken('colorTagGreyLight') // 边框
 };
 var designTokensLakeblueLight = {
-  colorText: '#1482CC',
+  colorText: getToken('colorTagTextLakeBlue'),
   // 文本颜色
-  defaultBg: '#E8F6FF',
+  defaultBg: getToken('colorTagLakeBlueLight'),
   // 背景色
-  colorBorder: '#E8F6FF' // 边框
+  colorBorder: getToken('colorTagLakeBlueLight') // 边框
 };
 var designTokensOrangeLight = {
-  colorText: '#FF8D1B',
-  // 文本颜色
-  defaultBg: '#FFF4E9',
-  // 背景色
-  colorBorder: '#FFF4E9' // 边框
-};
-var designTokensBlue = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: '#3434E1',
-  // 背景色
-  colorBorder: '#3434E1' // 边框
-};
-var designTokensGreen = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: '#00BC6F',
-  // 背景色
-  colorBorder: '#00BC6F' // 边框
-};
-var designTokensYellow = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: '#FFC300',
-  // 背景色
-  colorBorder: '#FFC300' // 边框
-};
-var designTokensRed = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: '#FA2C2C',
-  // 背景色
-  colorBorder: '#FA2C2C' // 边框
-};
-var designTokensGrey = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: '#B5B5B5',
-  // 背景色
-  colorBorder: '#B5B5B5' // 边框
-};
-var designTokensLakeblue = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: '#1482CC',
-  // 背景色
-  colorBorder: '#1482CC' // 边框
-};
-var designTokensOrange = {
-  colorText: getToken('colorTagText'),
-  // 文本颜色
-  defaultBg: '#FF8D1B',
-  // 背景色
-  colorBorder: '#FF8D1B' // 边框
-};
-var otherDesignTokens = {
-  padding: "0 ".concat(getToken('spacingTagPaddingHorizontal'), "px"),
-  // 内边距
-  sizingTagShort: "".concat(getToken('sizingTagShort'), "px"),
-  sizingTagTall: "".concat(getToken('sizingTagTall'), "px"),
-  sizingTagTallLg: "".concat(getToken('sizingTagTallLg'), "px")
-};
-export { designTokens, otherDesignTokens, designTokensPrimary, designTokensSecondary, designTokensBlue, designTokensGrey, designTokensGreen, designTokensRed, designTokensYellow, designTokensOrange, designTokensLakeblue, designTokensBlueLight, designTokensGreyLight, designTokensGreenLight, designTokensRedLight, designTokensYellowLight, designTokensOrangeLight, designTokensLakeblueLight };
+  colorText: getToken('colorTagTextOrange'),
+  // 文本颜色
+  defaultBg: getToken('colorTagOrangeLight'),
+  // 背景色
+  colorBorder: getToken('colorTagOrangeLight') // 边框
+};
+var useDesignTokensBlue = function useDesignTokensBlue() {
+  var getToken = useDynamicTokens();
+  var designTokensBlue = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: '#3434E1',
+    // 背景色
+    colorBorder: '#3434E1' // 边框
+  };
+  return designTokensBlue;
+};
+var useDesignTokensGreen = function useDesignTokensGreen() {
+  var getToken = useDynamicTokens();
+  var designTokensGreen = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: getToken('colorTagBackGroundGreen'),
+    // 背景色
+    colorBorder: getToken('colorTagBackGroundGreen') // 边框
+  };
+  return designTokensGreen;
+};
+var useDesignTokensYellow = function useDesignTokensYellow() {
+  var getToken = useDynamicTokens();
+  var designTokensYellow = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: getToken('colorTagBackGroundYellow'),
+    // 背景色
+    colorBorder: getToken('colorTagBackGroundYellow') // 边框
+  };
+  return designTokensYellow;
+};
+var useDesignTokensRed = function useDesignTokensRed() {
+  var getToken = useDynamicTokens();
+  var designTokensRed = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: getToken('colorTagBackGroundRed'),
+    // 背景色
+    colorBorder: getToken('colorTagBackGroundRed') // 边框
+  };
+  return designTokensRed;
+};
+var useDesignTokensGrey = function useDesignTokensGrey() {
+  var getToken = useDynamicTokens();
+  var designTokensGrey = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: getToken('colorTagBackGroundGrey'),
+    // 背景色
+    colorBorder: getToken('colorTagBackGroundGrey') // 边框
+  };
+  return designTokensGrey;
+};
+var useDesignTokensLakeblue = function useDesignTokensLakeblue() {
+  var getToken = useDynamicTokens();
+  var designTokensLakeblue = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: getToken('colorTagBackGroundLakeBlue'),
+    // 背景色
+    colorBorder: getToken('colorTagBackGroundLakeBlue') // 边框
+  };
+  return designTokensLakeblue;
+};
+var useDesignTokensOrange = function useDesignTokensOrange() {
+  var getToken = useDynamicTokens();
+  var designTokensOrange = {
+    colorText: getToken('colorTagText'),
+    // 文本颜色
+    defaultBg: getToken('colorTagBackGroundOrange'),
+    // 背景色
+    colorBorder: getToken('colorTagBackGroundOrange') // 边框
+  };
+  return designTokensOrange;
+};
+var useOtherDesignTokens = function useOtherDesignTokens() {
+  var getToken = useDynamicTokens();
+  var otherDesignTokens = {
+    padding: "0 ".concat(getToken('spacingTagPaddingHorizontal'), "px"),
+    // 内边距
+    sizingTagShort: "".concat(getToken('sizingTagShort'), "px"),
+    sizingTagTall: "".concat(getToken('sizingTagTall'), "px"),
+    sizingTagTallLg: "".concat(getToken('sizingTagTallLg'), "px")
+  };
+  return otherDesignTokens;
+};
+export { useDesignTokens, useOtherDesignTokens, useDesignTokensPrimary, useDesignTokensSecondary, useDesignTokensBlue, useDesignTokensGrey, useDesignTokensGreen, useDesignTokensRed, useDesignTokensYellow, useDesignTokensOrange, useDesignTokensLakeblue, designTokensBlueLight, designTokensGreyLight, designTokensGreenLight, designTokensRedLight, designTokensYellowLight, designTokensOrangeLight, designTokensLakeblueLight };

package/es/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/es/components/Tag/index.js

@@ -4,9 +4,9 @@ import "antd/es/tag/style";
 import _Tag from "antd/es/tag";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["types", "size", "light", "children", "prefixCls", "block", "style"];
+var _excluded = ["types", "size", "light", "children", "prefixCls", "block", "style", "className"];
 import React from 'react';
-import { designTokens, otherDesignTokens, designTokensPrimary, designTokensSecondary, designTokensBlue, designTokensGrey, designTokensGreen, designTokensRed, designTokensYellow, designTokensOrange, designTokensLakeblue, designTokensBlueLight, designTokensGreyLight, designTokensGreenLight, designTokensRedLight, designTokensYellowLight, designTokensOrangeLight, designTokensLakeblueLight } from "./designTokens";
+import { useDesignTokens, useOtherDesignTokens, useDesignTokensPrimary, useDesignTokensSecondary, useDesignTokensBlue, useDesignTokensGrey, useDesignTokensGreen, useDesignTokensRed, useDesignTokensYellow, useDesignTokensOrange, useDesignTokensLakeblue, designTokensBlueLight, designTokensGreyLight, designTokensGreenLight, designTokensRedLight, designTokensYellowLight, designTokensOrangeLight, designTokensLakeblueLight } from "./designTokens";
 import { BASE_CLASS_PREFIX } from "../../constants";
 import Text from "../Text";
 import "./style/index.less";
@@ -24,7 +24,20 @@ var Tag = function Tag(props) {
     _props$block = props.block,
     block = _props$block === void 0 ? false : _props$block,
     style = props.style,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var otherDesignTokens = useOtherDesignTokens();
+  var designTokensPrimary = useDesignTokensPrimary();
+  var designTokensSecondary = useDesignTokensSecondary();
+  var designTokensBlue = useDesignTokensBlue();
+  var designTokensGrey = useDesignTokensGrey();
+  var designTokensGreen = useDesignTokensGreen();
+  var designTokensRed = useDesignTokensRed();
+  var designTokensYellow = useDesignTokensYellow();
+  var designTokensOrange = useDesignTokensOrange();
+  var designTokensLakeblue = useDesignTokensLakeblue();
   var padding = otherDesignTokens.padding,
     sizingTagShort = otherDesignTokens.sizingTagShort,
     sizingTagTall = otherDesignTokens.sizingTagTall,
@@ -69,7 +82,7 @@ var Tag = function Tag(props) {
       }
     },
     children: /*#__PURE__*/_jsx(_Tag, _objectSpread(_objectSpread({}, attr), {}, {
-      className: "".concat(BASE_CLASS_PREFIX, "-").concat(prefixCls),
+      className: "".concat(BASE_CLASS_PREFIX, "-").concat(prefixCls, " ").concat(className),
       style: _objectSpread({
         padding: padding,
         height: getTagSize(size),