@fle-ui/next 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/tabs/style/index.js

@@ -1,84 +1,79 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _internal = require("../../theme/internal");
-
+exports.prepareComponentToken = exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
 var _style = require("../../style");
-
+var _internal = require("../../theme/internal");
 var _motion = _interopRequireDefault(require("./motion"));
-
 var genCardStyle = function genCardStyle(token) {
-  var _ref, _ref4, _ref6, _ref10, _ref12, _ref14;
-
+  var _$concat$concat, _$concat$concat4, _$concat$concat5, _$concat$concat8, _$concat$concat9, _$concat5;
   var componentCls = token.componentCls,
-      tabsCardHorizontalPadding = token.tabsCardHorizontalPadding,
-      tabsCardHeadBackground = token.tabsCardHeadBackground,
-      tabsCardGutter = token.tabsCardGutter,
-      colorSplit = token.colorSplit;
-  return (0, _defineProperty2["default"])({}, componentCls + "-card", (_ref14 = {}, (0, _defineProperty2["default"])(_ref14, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (_ref = {}, (0, _defineProperty2["default"])(_ref, componentCls + "-tab", {
+    tabsCardPadding = token.tabsCardPadding,
+    cardBg = token.cardBg,
+    cardGutter = token.cardGutter,
+    colorBorderSecondary = token.colorBorderSecondary,
+    itemSelectedColor = token.itemSelectedColor;
+  return _defineProperty({}, "".concat(componentCls, "-card"), (_$concat5 = {}, _defineProperty(_$concat5, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), (_$concat$concat = {}, _defineProperty(_$concat$concat, "".concat(componentCls, "-tab"), {
     margin: 0,
-    padding: tabsCardHorizontalPadding,
-    background: tabsCardHeadBackground,
-    border: token.lineWidth + "px " + token.lineType + " " + colorSplit,
-    transition: "all " + token.motionDurationSlow + " " + token.motionEaseInOut
-  }), (0, _defineProperty2["default"])(_ref, componentCls + "-tab-active", {
-    color: token.colorPrimary,
+    padding: tabsCardPadding,
+    background: cardBg,
+    border: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(colorBorderSecondary),
+    transition: "all ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut)
+  }), _defineProperty(_$concat$concat, "".concat(componentCls, "-tab-active"), {
+    color: itemSelectedColor,
     background: token.colorBgContainer
-  }), (0, _defineProperty2["default"])(_ref, componentCls + "-ink-bar", {
+  }), _defineProperty(_$concat$concat, "".concat(componentCls, "-ink-bar"), {
     visibility: 'hidden'
-  }), _ref)), (0, _defineProperty2["default"])(_ref14, "&" + componentCls + "-top, &" + componentCls + "-bottom", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-tab + " + componentCls + "-tab", {
+  }), _$concat$concat)), _defineProperty(_$concat5, "&".concat(componentCls, "-top, &").concat(componentCls, "-bottom"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-tab + ").concat(componentCls, "-tab"), {
     marginLeft: {
       _skip_check_: true,
-      value: tabsCardGutter + "px"
+      value: (0, _cssinjs.unit)(cardGutter)
     }
-  }))), (0, _defineProperty2["default"])(_ref14, "&" + componentCls + "-top", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (_ref4 = {}, (0, _defineProperty2["default"])(_ref4, componentCls + "-tab", {
-    borderRadius: token.borderRadiusLG + "px " + token.borderRadiusLG + "px 0 0"
-  }), (0, _defineProperty2["default"])(_ref4, componentCls + "-tab-active", {
+  }))), _defineProperty(_$concat5, "&".concat(componentCls, "-top"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), (_$concat$concat4 = {}, _defineProperty(_$concat$concat4, "".concat(componentCls, "-tab"), {
+    borderRadius: "".concat((0, _cssinjs.unit)(token.borderRadiusLG), " ").concat((0, _cssinjs.unit)(token.borderRadiusLG), " 0 0")
+  }), _defineProperty(_$concat$concat4, "".concat(componentCls, "-tab-active"), {
     borderBottomColor: token.colorBgContainer
-  }), _ref4))), (0, _defineProperty2["default"])(_ref14, "&" + componentCls + "-bottom", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (_ref6 = {}, (0, _defineProperty2["default"])(_ref6, componentCls + "-tab", {
-    borderRadius: "0 0 " + token.borderRadiusLG + "px " + token.borderRadiusLG + "px"
-  }), (0, _defineProperty2["default"])(_ref6, componentCls + "-tab-active", {
+  }), _$concat$concat4))), _defineProperty(_$concat5, "&".concat(componentCls, "-bottom"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), (_$concat$concat5 = {}, _defineProperty(_$concat$concat5, "".concat(componentCls, "-tab"), {
+    borderRadius: "0 0 ".concat((0, _cssinjs.unit)(token.borderRadiusLG), " ").concat((0, _cssinjs.unit)(token.borderRadiusLG))
+  }), _defineProperty(_$concat$concat5, "".concat(componentCls, "-tab-active"), {
     borderTopColor: token.colorBgContainer
-  }), _ref6))), (0, _defineProperty2["default"])(_ref14, "&" + componentCls + "-left, &" + componentCls + "-right", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-tab + " + componentCls + "-tab", {
-    marginTop: tabsCardGutter + "px"
-  }))), (0, _defineProperty2["default"])(_ref14, "&" + componentCls + "-left", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (_ref10 = {}, (0, _defineProperty2["default"])(_ref10, componentCls + "-tab", {
+  }), _$concat$concat5))), _defineProperty(_$concat5, "&".concat(componentCls, "-left, &").concat(componentCls, "-right"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-tab + ").concat(componentCls, "-tab"), {
+    marginTop: (0, _cssinjs.unit)(cardGutter)
+  }))), _defineProperty(_$concat5, "&".concat(componentCls, "-left"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), (_$concat$concat8 = {}, _defineProperty(_$concat$concat8, "".concat(componentCls, "-tab"), {
     borderRadius: {
       _skip_check_: true,
-      value: token.borderRadiusLG + "px 0 0 " + token.borderRadiusLG + "px"
+      value: "".concat((0, _cssinjs.unit)(token.borderRadiusLG), " 0 0 ").concat((0, _cssinjs.unit)(token.borderRadiusLG))
     }
-  }), (0, _defineProperty2["default"])(_ref10, componentCls + "-tab-active", {
+  }), _defineProperty(_$concat$concat8, "".concat(componentCls, "-tab-active"), {
     borderRightColor: {
       _skip_check_: true,
       value: token.colorBgContainer
     }
-  }), _ref10))), (0, _defineProperty2["default"])(_ref14, "&" + componentCls + "-right", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (_ref12 = {}, (0, _defineProperty2["default"])(_ref12, componentCls + "-tab", {
+  }), _$concat$concat8))), _defineProperty(_$concat5, "&".concat(componentCls, "-right"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), (_$concat$concat9 = {}, _defineProperty(_$concat$concat9, "".concat(componentCls, "-tab"), {
     borderRadius: {
       _skip_check_: true,
-      value: "0 " + token.borderRadiusLG + "px " + token.borderRadiusLG + "px 0"
+      value: "0 ".concat((0, _cssinjs.unit)(token.borderRadiusLG), " ").concat((0, _cssinjs.unit)(token.borderRadiusLG), " 0")
     }
-  }), (0, _defineProperty2["default"])(_ref12, componentCls + "-tab-active", {
+  }), _defineProperty(_$concat$concat9, "".concat(componentCls, "-tab-active"), {
     borderLeftColor: {
       _skip_check_: true,
       value: token.colorBgContainer
     }
-  }), _ref12))), _ref14));
+  }), _$concat$concat9))), _$concat5));
 };
-
 var genDropdownStyle = function genDropdownStyle(token) {
   var componentCls = token.componentCls,
-      tabsHoverColor = token.tabsHoverColor,
-      dropdownEdgeChildVerticalPadding = token.dropdownEdgeChildVerticalPadding;
-  return (0, _defineProperty2["default"])({}, componentCls + "-dropdown", (0, _extends5["default"])((0, _extends5["default"])({}, (0, _style.resetComponent)(token)), (0, _defineProperty2["default"])({
+    itemHoverColor = token.itemHoverColor,
+    dropdownEdgeChildVerticalPadding = token.dropdownEdgeChildVerticalPadding;
+  return _defineProperty({}, "".concat(componentCls, "-dropdown"), Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), _defineProperty({
     position: 'absolute',
     top: -9999,
     left: {
@@ -90,10 +85,10 @@ var genDropdownStyle = function genDropdownStyle(token) {
     '&-hidden': {
       display: 'none'
     }
-  }, componentCls + "-dropdown-menu", {
+  }, "".concat(componentCls, "-dropdown-menu"), {
     maxHeight: token.tabsDropdownHeight,
     margin: 0,
-    padding: dropdownEdgeChildVerticalPadding + "px 0",
+    padding: "".concat((0, _cssinjs.unit)(dropdownEdgeChildVerticalPadding), " 0"),
     overflowX: 'hidden',
     overflowY: 'auto',
     textAlign: {
@@ -105,19 +100,19 @@ var genDropdownStyle = function genDropdownStyle(token) {
     backgroundClip: 'padding-box',
     borderRadius: token.borderRadiusLG,
     outline: 'none',
-    boxShadow: token.boxShadow,
-    '&-item': (0, _extends5["default"])((0, _extends5["default"])({}, _style.textEllipsis), {
+    boxShadow: token.boxShadowSecondary,
+    '&-item': Object.assign(Object.assign({}, _style.textEllipsis), {
       display: 'flex',
       alignItems: 'center',
       minWidth: token.tabsDropdownWidth,
       margin: 0,
-      padding: token.paddingXXS + "px " + token.paddingSM + "px",
+      padding: "".concat((0, _cssinjs.unit)(token.paddingXXS), " ").concat((0, _cssinjs.unit)(token.paddingSM)),
       color: token.colorText,
       fontWeight: 'normal',
       fontSize: token.fontSize,
       lineHeight: token.lineHeight,
       cursor: 'pointer',
-      transition: "all " + token.motionDurationSlow,
+      transition: "all ".concat(token.motionDurationSlow),
       '> span': {
         flex: 1,
         whiteSpace: 'nowrap'
@@ -134,7 +129,7 @@ var genDropdownStyle = function genDropdownStyle(token) {
         border: 0,
         cursor: 'pointer',
         '&:hover': {
-          color: tabsHoverColor
+          color: itemHoverColor
         }
       },
       '&:hover': {
@@ -150,17 +145,19 @@ var genDropdownStyle = function genDropdownStyle(token) {
     })
   })));
 };
-
 var genPositionStyle = function genPositionStyle(token) {
-  var _ref17, _ref18, _ref23, _ref24, _ref25, _ref29, _ref32, _ref33;
-
+  var _$concat6, _$concat$concat10, _$concat8, _$concat9, _$concat$concat14, _$concat10, _$concat11, _ref3;
   var componentCls = token.componentCls,
-      margin = token.margin,
-      colorSplit = token.colorSplit;
-  return _ref33 = {}, (0, _defineProperty2["default"])(_ref33, componentCls + "-top, " + componentCls + "-bottom", (0, _defineProperty2["default"])({
+    margin = token.margin,
+    colorBorderSecondary = token.colorBorderSecondary,
+    horizontalMargin = token.horizontalMargin,
+    verticalItemPadding = token.verticalItemPadding,
+    verticalItemMargin = token.verticalItemMargin,
+    calc = token.calc;
+  return _ref3 = {}, _defineProperty(_ref3, "".concat(componentCls, "-top, ").concat(componentCls, "-bottom"), _defineProperty({
     flexDirection: 'column'
-  }, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (_ref18 = {
-    margin: "0 0 " + margin + "px 0",
+  }, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), (_$concat$concat10 = {
+    margin: horizontalMargin,
     '&::before': {
       position: 'absolute',
       right: {
@@ -171,15 +168,15 @@ var genPositionStyle = function genPositionStyle(token) {
         _skip_check_: true,
         value: 0
       },
-      borderBottom: token.lineWidth + "px " + token.lineType + " " + colorSplit,
+      borderBottom: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(colorBorderSecondary),
       content: "''"
     }
-  }, (0, _defineProperty2["default"])(_ref18, componentCls + "-ink-bar", {
+  }, _defineProperty(_$concat$concat10, "".concat(componentCls, "-ink-bar"), {
     height: token.lineWidthBold,
     '&-animated': {
-      transition: "width " + token.motionDurationSlow + ", left " + token.motionDurationSlow + ",\n            right " + token.motionDurationSlow
+      transition: "width ".concat(token.motionDurationSlow, ", left ").concat(token.motionDurationSlow, ",\n            right ").concat(token.motionDurationSlow)
     }
-  }), (0, _defineProperty2["default"])(_ref18, componentCls + "-nav-wrap", (_ref17 = {
+  }), _defineProperty(_$concat$concat10, "".concat(componentCls, "-nav-wrap"), (_$concat6 = {
     '&::before, &::after': {
       top: 0,
       bottom: 0,
@@ -199,36 +196,36 @@ var genPositionStyle = function genPositionStyle(token) {
       },
       boxShadow: token.boxShadowTabsOverflowRight
     }
-  }, (0, _defineProperty2["default"])(_ref17, "&" + componentCls + "-nav-wrap-ping-left::before", {
+  }, _defineProperty(_$concat6, "&".concat(componentCls, "-nav-wrap-ping-left::before"), {
     opacity: 1
-  }), (0, _defineProperty2["default"])(_ref17, "&" + componentCls + "-nav-wrap-ping-right::after", {
+  }), _defineProperty(_$concat6, "&".concat(componentCls, "-nav-wrap-ping-right::after"), {
     opacity: 1
-  }), _ref17)), _ref18))), (0, _defineProperty2["default"])(_ref33, componentCls + "-top", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav,\n        > div > " + componentCls + "-nav", (0, _defineProperty2["default"])({
+  }), _$concat6)), _$concat$concat10))), _defineProperty(_ref3, "".concat(componentCls, "-top"), _defineProperty({}, "> ".concat(componentCls, "-nav,\n        > div > ").concat(componentCls, "-nav"), _defineProperty({
     '&::before': {
       bottom: 0
     }
-  }, componentCls + "-ink-bar", {
+  }, "".concat(componentCls, "-ink-bar"), {
     bottom: 0
-  }))), (0, _defineProperty2["default"])(_ref33, componentCls + "-bottom", (_ref23 = {}, (0, _defineProperty2["default"])(_ref23, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (0, _defineProperty2["default"])({
+  }))), _defineProperty(_ref3, "".concat(componentCls, "-bottom"), (_$concat8 = {}, _defineProperty(_$concat8, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), _defineProperty({
     order: 1,
-    marginTop: margin + "px",
+    marginTop: margin,
     marginBottom: 0,
     '&::before': {
       top: 0
     }
-  }, componentCls + "-ink-bar", {
+  }, "".concat(componentCls, "-ink-bar"), {
     top: 0
-  })), (0, _defineProperty2["default"])(_ref23, "> " + componentCls + "-content-holder, > div > " + componentCls + "-content-holder", {
+  })), _defineProperty(_$concat8, "> ".concat(componentCls, "-content-holder, > div > ").concat(componentCls, "-content-holder"), {
     order: 0
-  }), _ref23)), (0, _defineProperty2["default"])(_ref33, componentCls + "-left, " + componentCls + "-right", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (_ref25 = {
+  }), _$concat8)), _defineProperty(_ref3, "".concat(componentCls, "-left, ").concat(componentCls, "-right"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), (_$concat$concat14 = {
     flexDirection: 'column',
-    minWidth: token.controlHeight * 1.25
-  }, (0, _defineProperty2["default"])(_ref25, componentCls + "-tab", {
-    padding: token.paddingXS + "px " + token.paddingLG + "px",
+    minWidth: calc(token.controlHeight).mul(1.25).equal()
+  }, _defineProperty(_$concat$concat14, "".concat(componentCls, "-tab"), {
+    padding: verticalItemPadding,
     textAlign: 'center'
-  }), (0, _defineProperty2["default"])(_ref25, componentCls + "-tab + " + componentCls + "-tab", {
-    margin: token.margin + "px 0 0 0"
-  }), (0, _defineProperty2["default"])(_ref25, componentCls + "-nav-wrap", (_ref24 = {
+  }), _defineProperty(_$concat$concat14, "".concat(componentCls, "-tab + ").concat(componentCls, "-tab"), {
+    margin: verticalItemMargin
+  }), _defineProperty(_$concat$concat14, "".concat(componentCls, "-nav-wrap"), (_$concat9 = {
     flexDirection: 'column',
     '&::before, &::after': {
       right: {
@@ -249,130 +246,138 @@ var genPositionStyle = function genPositionStyle(token) {
       bottom: 0,
       boxShadow: token.boxShadowTabsOverflowBottom
     }
-  }, (0, _defineProperty2["default"])(_ref24, "&" + componentCls + "-nav-wrap-ping-top::before", {
+  }, _defineProperty(_$concat9, "&".concat(componentCls, "-nav-wrap-ping-top::before"), {
     opacity: 1
-  }), (0, _defineProperty2["default"])(_ref24, "&" + componentCls + "-nav-wrap-ping-bottom::after", {
+  }), _defineProperty(_$concat9, "&".concat(componentCls, "-nav-wrap-ping-bottom::after"), {
     opacity: 1
-  }), _ref24)), (0, _defineProperty2["default"])(_ref25, componentCls + "-ink-bar", {
+  }), _$concat9)), _defineProperty(_$concat$concat14, "".concat(componentCls, "-ink-bar"), {
     width: token.lineWidthBold,
     '&-animated': {
-      transition: "height " + token.motionDurationSlow + ", top " + token.motionDurationSlow
+      transition: "height ".concat(token.motionDurationSlow, ", top ").concat(token.motionDurationSlow)
     }
-  }), (0, _defineProperty2["default"])(_ref25, componentCls + "-nav-list, " + componentCls + "-nav-operations", {
+  }), _defineProperty(_$concat$concat14, "".concat(componentCls, "-nav-list, ").concat(componentCls, "-nav-operations"), {
     flex: '1 0 auto',
+    // fix safari scroll problem
     flexDirection: 'column'
-  }), _ref25))), (0, _defineProperty2["default"])(_ref33, componentCls + "-left", (_ref29 = {}, (0, _defineProperty2["default"])(_ref29, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-ink-bar", {
+  }), _$concat$concat14))), _defineProperty(_ref3, "".concat(componentCls, "-left"), (_$concat10 = {}, _defineProperty(_$concat10, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-ink-bar"), {
     right: {
       _skip_check_: true,
       value: 0
     }
-  })), (0, _defineProperty2["default"])(_ref29, "> " + componentCls + "-content-holder, > div > " + componentCls + "-content-holder", (0, _defineProperty2["default"])({
+  })), _defineProperty(_$concat10, "> ".concat(componentCls, "-content-holder, > div > ").concat(componentCls, "-content-holder"), _defineProperty({
     marginLeft: {
       _skip_check_: true,
-      value: "-" + token.lineWidth + "px"
+      value: (0, _cssinjs.unit)(calc(token.lineWidth).mul(-1).equal())
     },
     borderLeft: {
       _skip_check_: true,
-      value: token.lineWidth + "px " + token.lineType + " " + token.colorBorder
+      value: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorBorder)
     }
-  }, "> " + componentCls + "-content > " + componentCls + "-tabpane", {
+  }, "> ".concat(componentCls, "-content > ").concat(componentCls, "-tabpane"), {
     paddingLeft: {
       _skip_check_: true,
       value: token.paddingLG
     }
-  })), _ref29)), (0, _defineProperty2["default"])(_ref33, componentCls + "-right", (_ref32 = {}, (0, _defineProperty2["default"])(_ref32, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (0, _defineProperty2["default"])({
+  })), _$concat10)), _defineProperty(_ref3, "".concat(componentCls, "-right"), (_$concat11 = {}, _defineProperty(_$concat11, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), _defineProperty({
     order: 1
-  }, componentCls + "-ink-bar", {
+  }, "".concat(componentCls, "-ink-bar"), {
     left: {
       _skip_check_: true,
       value: 0
     }
-  })), (0, _defineProperty2["default"])(_ref32, "> " + componentCls + "-content-holder, > div > " + componentCls + "-content-holder", (0, _defineProperty2["default"])({
+  })), _defineProperty(_$concat11, "> ".concat(componentCls, "-content-holder, > div > ").concat(componentCls, "-content-holder"), _defineProperty({
     order: 0,
     marginRight: {
       _skip_check_: true,
-      value: -token.lineWidth
+      value: calc(token.lineWidth).mul(-1).equal()
     },
     borderRight: {
       _skip_check_: true,
-      value: token.lineWidth + "px " + token.lineType + " " + token.colorBorder
+      value: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorBorder)
     }
-  }, "> " + componentCls + "-content > " + componentCls + "-tabpane", {
+  }, "> ".concat(componentCls, "-content > ").concat(componentCls, "-tabpane"), {
     paddingRight: {
       _skip_check_: true,
       value: token.paddingLG
     }
-  })), _ref32)), _ref33;
+  })), _$concat11)), _ref3;
 };
-
 var genSizeStyle = function genSizeStyle(token) {
-  var _ref41, _ref44, _ref45;
-
+  var _$concat19, _$concat22, _ref4;
   var componentCls = token.componentCls,
-      padding = token.padding;
-  return _ref45 = {}, (0, _defineProperty2["default"])(_ref45, componentCls, {
-    '&-small': (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-tab", {
-      padding: token.paddingXS + "px 0",
-      fontSize: token.fontSize
+    cardPaddingSM = token.cardPaddingSM,
+    cardPaddingLG = token.cardPaddingLG,
+    horizontalItemPaddingSM = token.horizontalItemPaddingSM,
+    horizontalItemPaddingLG = token.horizontalItemPaddingLG;
+  return _ref4 = {}, _defineProperty(_ref4, componentCls, {
+    '&-small': _defineProperty({}, "> ".concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-tab"), {
+      padding: horizontalItemPaddingSM,
+      fontSize: token.titleFontSizeSM
     })),
-    '&-large': (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-tab", {
-      padding: padding + "px 0",
-      fontSize: token.fontSizeLG
+    '&-large': _defineProperty({}, "> ".concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-tab"), {
+      padding: horizontalItemPaddingLG,
+      fontSize: token.titleFontSizeLG
     }))
-  }), (0, _defineProperty2["default"])(_ref45, componentCls + "-card", (_ref44 = {}, (0, _defineProperty2["default"])(_ref44, "&" + componentCls + "-small", (_ref41 = {}, (0, _defineProperty2["default"])(_ref41, "> " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-tab", {
-    padding: token.paddingXXS * 1.5 + "px " + padding + "px"
-  })), (0, _defineProperty2["default"])(_ref41, "&" + componentCls + "-bottom", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav " + componentCls + "-tab", {
-    borderRadius: "0 0 " + token.borderRadius + "px " + token.borderRadius + "px"
-  })), (0, _defineProperty2["default"])(_ref41, "&" + componentCls + "-top", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav " + componentCls + "-tab", {
-    borderRadius: token.borderRadius + "px " + token.borderRadius + "px 0 0"
-  })), (0, _defineProperty2["default"])(_ref41, "&" + componentCls + "-right", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav " + componentCls + "-tab", {
+  }), _defineProperty(_ref4, "".concat(componentCls, "-card"), (_$concat22 = {}, _defineProperty(_$concat22, "&".concat(componentCls, "-small"), (_$concat19 = {}, _defineProperty(_$concat19, "> ".concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-tab"), {
+    padding: cardPaddingSM
+  })), _defineProperty(_$concat19, "&".concat(componentCls, "-bottom"), _defineProperty({}, "> ".concat(componentCls, "-nav ").concat(componentCls, "-tab"), {
+    borderRadius: "0 0 ".concat((0, _cssinjs.unit)(token.borderRadius), " ").concat((0, _cssinjs.unit)(token.borderRadius))
+  })), _defineProperty(_$concat19, "&".concat(componentCls, "-top"), _defineProperty({}, "> ".concat(componentCls, "-nav ").concat(componentCls, "-tab"), {
+    borderRadius: "".concat((0, _cssinjs.unit)(token.borderRadius), " ").concat((0, _cssinjs.unit)(token.borderRadius), " 0 0")
+  })), _defineProperty(_$concat19, "&".concat(componentCls, "-right"), _defineProperty({}, "> ".concat(componentCls, "-nav ").concat(componentCls, "-tab"), {
     borderRadius: {
       _skip_check_: true,
-      value: "0 " + token.borderRadius + "px " + token.borderRadius + "px 0"
+      value: "0 ".concat((0, _cssinjs.unit)(token.borderRadius), " ").concat((0, _cssinjs.unit)(token.borderRadius), " 0")
     }
-  })), (0, _defineProperty2["default"])(_ref41, "&" + componentCls + "-left", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav " + componentCls + "-tab", {
+  })), _defineProperty(_$concat19, "&".concat(componentCls, "-left"), _defineProperty({}, "> ".concat(componentCls, "-nav ").concat(componentCls, "-tab"), {
     borderRadius: {
       _skip_check_: true,
-      value: token.borderRadius + "px 0 0 " + token.borderRadius + "px"
+      value: "".concat((0, _cssinjs.unit)(token.borderRadius), " 0 0 ").concat((0, _cssinjs.unit)(token.borderRadius))
     }
-  })), _ref41)), (0, _defineProperty2["default"])(_ref44, "&" + componentCls + "-large", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-tab", {
-    padding: token.paddingXS + "px " + padding + "px " + token.paddingXXS * 1.5 + "px"
-  }))), _ref44)), _ref45;
+  })), _$concat19)), _defineProperty(_$concat22, "&".concat(componentCls, "-large"), _defineProperty({}, "> ".concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-tab"), {
+    padding: cardPaddingLG
+  }))), _$concat22)), _ref4;
 };
-
 var genTabStyle = function genTabStyle(token) {
-  var _tabCls, _ref46;
-
+  var _tabCls, _ref5;
   var componentCls = token.componentCls,
-      tabsActiveColor = token.tabsActiveColor,
-      tabsHoverColor = token.tabsHoverColor,
-      iconCls = token.iconCls,
-      tabsHorizontalGutter = token.tabsHorizontalGutter;
-  var tabCls = componentCls + "-tab";
-  return _ref46 = {}, (0, _defineProperty2["default"])(_ref46, tabCls, (_tabCls = {
+    itemActiveColor = token.itemActiveColor,
+    itemHoverColor = token.itemHoverColor,
+    iconCls = token.iconCls,
+    tabsHorizontalItemMargin = token.tabsHorizontalItemMargin,
+    horizontalItemPadding = token.horizontalItemPadding,
+    itemSelectedColor = token.itemSelectedColor,
+    itemColor = token.itemColor;
+  var tabCls = "".concat(componentCls, "-tab");
+  return _ref5 = {}, _defineProperty(_ref5, tabCls, (_tabCls = {
     position: 'relative',
+    WebkitTouchCallout: 'none',
+    WebkitTapHighlightColor: 'transparent',
     display: 'inline-flex',
     alignItems: 'center',
-    padding: token.paddingSM + "px 0",
-    fontSize: token.fontSize + "px",
+    padding: horizontalItemPadding,
+    fontSize: token.titleFontSize,
     background: 'transparent',
     border: 0,
     outline: 'none',
     cursor: 'pointer',
-    '&-btn, &-remove': (0, _extends5["default"])({
+    color: itemColor,
+    '&-btn, &-remove': Object.assign({
       '&:focus:not(:focus-visible), &:active': {
-        color: tabsActiveColor
+        color: itemActiveColor
       }
     }, (0, _style.genFocusStyle)(token)),
-    '&-btn': {
+    '&-btn': _defineProperty({
       outline: 'none',
       transition: 'all 0.3s'
-    },
+    }, "".concat(tabCls, "-icon:not(:last-child)"), {
+      marginInlineEnd: token.marginSM
+    }),
     '&-remove': {
       flex: 'none',
       marginRight: {
         _skip_check_: true,
-        value: -token.marginXXS
+        value: token.calc(token.marginXXS).mul(-1).equal()
       },
       marginLeft: {
         _skip_check_: true,
@@ -384,124 +389,121 @@ var genTabStyle = function genTabStyle(token) {
       border: 'none',
       outline: 'none',
       cursor: 'pointer',
-      transition: "all " + token.motionDurationSlow,
+      transition: "all ".concat(token.motionDurationSlow),
       '&:hover': {
         color: token.colorTextHeading
       }
     },
     '&:hover': {
-      color: tabsHoverColor
+      color: itemHoverColor
     }
-  }, (0, _defineProperty2["default"])(_tabCls, "&" + tabCls + "-active " + tabCls + "-btn", {
-    color: token.colorPrimary,
+  }, _defineProperty(_tabCls, "&".concat(tabCls, "-active ").concat(tabCls, "-btn"), {
+    color: itemSelectedColor,
     textShadow: token.tabsActiveTextShadow
-  }), (0, _defineProperty2["default"])(_tabCls, "&" + tabCls + "-disabled", {
+  }), _defineProperty(_tabCls, "&".concat(tabCls, "-disabled"), {
     color: token.colorTextDisabled,
     cursor: 'not-allowed'
-  }), (0, _defineProperty2["default"])(_tabCls, "&" + tabCls + "-disabled " + tabCls + "-btn, &" + tabCls + "-disabled " + componentCls + "-remove", {
+  }), _defineProperty(_tabCls, "&".concat(tabCls, "-disabled ").concat(tabCls, "-btn, &").concat(tabCls, "-disabled ").concat(componentCls, "-remove"), {
     '&:focus, &:active': {
       color: token.colorTextDisabled
     }
-  }), (0, _defineProperty2["default"])(_tabCls, "& " + tabCls + "-remove " + iconCls, {
+  }), _defineProperty(_tabCls, "& ".concat(tabCls, "-remove ").concat(iconCls), {
     margin: 0
-  }), (0, _defineProperty2["default"])(_tabCls, iconCls, {
+  }), _defineProperty(_tabCls, "".concat(iconCls, ":not(:last-child)"), {
     marginRight: {
       _skip_check_: true,
       value: token.marginSM
     }
-  }), _tabCls)), (0, _defineProperty2["default"])(_ref46, tabCls + " + " + tabCls, {
+  }), _tabCls)), _defineProperty(_ref5, "".concat(tabCls, " + ").concat(tabCls), {
     margin: {
       _skip_check_: true,
-      value: "0 0 0 " + tabsHorizontalGutter + "px"
+      value: tabsHorizontalItemMargin
     }
-  }), _ref46;
+  }), _ref5;
 };
-
 var genRtlStyle = function genRtlStyle(token) {
-  var _ref48, _ref50, _ref51, _rtlCls, _ref55;
-
+  var _$concat24, _$concat26, _$concat27, _rtlCls, _ref6;
   var componentCls = token.componentCls,
-      tabsHorizontalGutter = token.tabsHorizontalGutter,
-      iconCls = token.iconCls,
-      tabsCardGutter = token.tabsCardGutter;
-  var rtlCls = componentCls + "-rtl";
-  return _ref55 = {}, (0, _defineProperty2["default"])(_ref55, rtlCls, (_rtlCls = {
+    tabsHorizontalItemMarginRTL = token.tabsHorizontalItemMarginRTL,
+    iconCls = token.iconCls,
+    cardGutter = token.cardGutter,
+    calc = token.calc;
+  var rtlCls = "".concat(componentCls, "-rtl");
+  return _ref6 = {}, _defineProperty(_ref6, rtlCls, (_rtlCls = {
     direction: 'rtl'
-  }, (0, _defineProperty2["default"])(_rtlCls, componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-tab", (_ref48 = {
+  }, _defineProperty(_rtlCls, "".concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-tab"), (_$concat24 = {
     margin: {
       _skip_check_: true,
-      value: "0 0 0 " + tabsHorizontalGutter + "px"
+      value: tabsHorizontalItemMarginRTL
     }
-  }, (0, _defineProperty2["default"])(_ref48, componentCls + "-tab:last-of-type", {
+  }, _defineProperty(_$concat24, "".concat(componentCls, "-tab:last-of-type"), {
     marginLeft: {
       _skip_check_: true,
       value: 0
     }
-  }), (0, _defineProperty2["default"])(_ref48, iconCls, {
+  }), _defineProperty(_$concat24, iconCls, {
     marginRight: {
       _skip_check_: true,
       value: 0
     },
     marginLeft: {
       _skip_check_: true,
-      value: token.marginSM + "px"
+      value: (0, _cssinjs.unit)(token.marginSM)
     }
-  }), (0, _defineProperty2["default"])(_ref48, componentCls + "-tab-remove", (0, _defineProperty2["default"])({
+  }), _defineProperty(_$concat24, "".concat(componentCls, "-tab-remove"), _defineProperty({
     marginRight: {
       _skip_check_: true,
-      value: token.marginXS + "px"
+      value: (0, _cssinjs.unit)(token.marginXS)
     },
     marginLeft: {
       _skip_check_: true,
-      value: "-" + token.marginXXS + "px"
+      value: (0, _cssinjs.unit)(calc(token.marginXXS).mul(-1).equal())
     }
   }, iconCls, {
     margin: 0
-  })), _ref48))), (0, _defineProperty2["default"])(_rtlCls, "&" + componentCls + "-left", (_ref50 = {}, (0, _defineProperty2["default"])(_ref50, "> " + componentCls + "-nav", {
+  })), _$concat24))), _defineProperty(_rtlCls, "&".concat(componentCls, "-left"), (_$concat26 = {}, _defineProperty(_$concat26, "> ".concat(componentCls, "-nav"), {
     order: 1
-  }), (0, _defineProperty2["default"])(_ref50, "> " + componentCls + "-content-holder", {
+  }), _defineProperty(_$concat26, "> ".concat(componentCls, "-content-holder"), {
     order: 0
-  }), _ref50)), (0, _defineProperty2["default"])(_rtlCls, "&" + componentCls + "-right", (_ref51 = {}, (0, _defineProperty2["default"])(_ref51, "> " + componentCls + "-nav", {
+  }), _$concat26)), _defineProperty(_rtlCls, "&".concat(componentCls, "-right"), (_$concat27 = {}, _defineProperty(_$concat27, "> ".concat(componentCls, "-nav"), {
     order: 0
-  }), (0, _defineProperty2["default"])(_ref51, "> " + componentCls + "-content-holder", {
+  }), _defineProperty(_$concat27, "> ".concat(componentCls, "-content-holder"), {
     order: 1
-  }), _ref51)), (0, _defineProperty2["default"])(_rtlCls, "&" + componentCls + "-card" + componentCls + "-top, &" + componentCls + "-card" + componentCls + "-bottom", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-tab + " + componentCls + "-tab", {
+  }), _$concat27)), _defineProperty(_rtlCls, "&".concat(componentCls, "-card").concat(componentCls, "-top, &").concat(componentCls, "-card").concat(componentCls, "-bottom"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-tab + ").concat(componentCls, "-tab"), {
     marginRight: {
       _skip_check_: true,
-      value: tabsCardGutter + "px"
+      value: cardGutter
     },
     marginLeft: {
       _skip_check_: true,
       value: 0
     }
-  }))), _rtlCls)), (0, _defineProperty2["default"])(_ref55, componentCls + "-dropdown-rtl", {
+  }))), _rtlCls)), _defineProperty(_ref6, "".concat(componentCls, "-dropdown-rtl"), {
     direction: 'rtl'
-  }), (0, _defineProperty2["default"])(_ref55, componentCls + "-menu-item", (0, _defineProperty2["default"])({}, componentCls + "-dropdown-rtl", {
+  }), _defineProperty(_ref6, "".concat(componentCls, "-menu-item"), _defineProperty({}, "".concat(componentCls, "-dropdown-rtl"), {
     textAlign: {
       _skip_check_: true,
       value: 'right'
     }
-  })), _ref55;
+  })), _ref6;
 };
-
 var genTabsStyle = function genTabsStyle(token) {
-  var _ref56, _extends3, _extends4, _ref60;
-
+  var _$concat$concat21, _Object$assign2, _Object$assign3, _ref7;
   var componentCls = token.componentCls,
-      tabsCardHorizontalPadding = token.tabsCardHorizontalPadding,
-      tabsCardHeight = token.tabsCardHeight,
-      tabsCardGutter = token.tabsCardGutter,
-      tabsHoverColor = token.tabsHoverColor,
-      tabsActiveColor = token.tabsActiveColor,
-      colorSplit = token.colorSplit;
-  return _ref60 = {}, (0, _defineProperty2["default"])(_ref60, componentCls, (0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])((0, _extends5["default"])({}, (0, _style.resetComponent)(token)), (_extends3 = {
+    tabsCardPadding = token.tabsCardPadding,
+    cardHeight = token.cardHeight,
+    cardGutter = token.cardGutter,
+    itemHoverColor = token.itemHoverColor,
+    itemActiveColor = token.itemActiveColor,
+    colorBorderSecondary = token.colorBorderSecondary;
+  return _ref7 = {}, _defineProperty(_ref7, componentCls, Object.assign(Object.assign(Object.assign(Object.assign({}, (0, _style.resetComponent)(token)), (_Object$assign2 = {
     display: 'flex'
-  }, (0, _defineProperty2["default"])(_extends3, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (_ref56 = {
+  }, _defineProperty(_Object$assign2, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), (_$concat$concat21 = {
     position: 'relative',
     display: 'flex',
     flex: 'none',
     alignItems: 'center'
-  }, (0, _defineProperty2["default"])(_ref56, componentCls + "-nav-wrap", {
+  }, _defineProperty(_$concat$concat21, "".concat(componentCls, "-nav-wrap"), {
     position: 'relative',
     display: 'flex',
     flex: 'auto',
@@ -509,31 +511,33 @@ var genTabsStyle = function genTabsStyle(token) {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     transform: 'translate(0)',
+    // Fix chrome render bug
     // >>>>> Ping shadow
     '&::before, &::after': {
       position: 'absolute',
       zIndex: 1,
       opacity: 0,
-      transition: "opacity " + token.motionDurationSlow,
+      transition: "opacity ".concat(token.motionDurationSlow),
       content: "''",
       pointerEvents: 'none'
     }
-  }), (0, _defineProperty2["default"])(_ref56, componentCls + "-nav-list", {
+  }), _defineProperty(_$concat$concat21, "".concat(componentCls, "-nav-list"), {
     position: 'relative',
     display: 'flex',
-    transition: "opacity " + token.motionDurationSlow
-  }), (0, _defineProperty2["default"])(_ref56, componentCls + "-nav-operations", {
+    transition: "opacity ".concat(token.motionDurationSlow)
+  }), _defineProperty(_$concat$concat21, "".concat(componentCls, "-nav-operations"), {
     display: 'flex',
     alignSelf: 'stretch'
-  }), (0, _defineProperty2["default"])(_ref56, componentCls + "-nav-operations-hidden", {
+  }), _defineProperty(_$concat$concat21, "".concat(componentCls, "-nav-operations-hidden"), {
     position: 'absolute',
     visibility: 'hidden',
     pointerEvents: 'none'
-  }), (0, _defineProperty2["default"])(_ref56, componentCls + "-nav-more", {
+  }), _defineProperty(_$concat$concat21, "".concat(componentCls, "-nav-more"), {
     position: 'relative',
-    padding: tabsCardHorizontalPadding,
+    padding: tabsCardPadding,
     background: 'transparent',
     border: 0,
+    color: token.colorText,
     '&::after': {
       position: 'absolute',
       right: {
@@ -545,73 +549,97 @@ var genTabsStyle = function genTabsStyle(token) {
         _skip_check_: true,
         value: 0
       },
-      height: token.controlHeightLG / 8,
+      height: token.calc(token.controlHeightLG).div(8).equal(),
       transform: 'translateY(100%)',
       content: "''"
     }
-  }), (0, _defineProperty2["default"])(_ref56, componentCls + "-nav-add", (0, _extends5["default"])({
-    minWidth: tabsCardHeight + "px",
+  }), _defineProperty(_$concat$concat21, "".concat(componentCls, "-nav-add"), Object.assign({
+    minWidth: cardHeight,
+    minHeight: cardHeight,
     marginLeft: {
       _skip_check_: true,
-      value: tabsCardGutter + "px"
+      value: cardGutter
     },
-    padding: "0 " + token.paddingXS + "px",
+    padding: "0 ".concat((0, _cssinjs.unit)(token.paddingXS)),
     background: 'transparent',
-    border: token.lineWidth + "px " + token.lineType + " " + colorSplit,
-    borderRadius: token.borderRadiusLG + "px " + token.borderRadiusLG + "px 0 0",
+    border: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(colorBorderSecondary),
+    borderRadius: "".concat((0, _cssinjs.unit)(token.borderRadiusLG), " ").concat((0, _cssinjs.unit)(token.borderRadiusLG), " 0 0"),
     outline: 'none',
     cursor: 'pointer',
-    transition: "all " + token.motionDurationSlow + " " + token.motionEaseInOut,
+    color: token.colorText,
+    transition: "all ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut),
     '&:hover': {
-      color: tabsHoverColor
+      color: itemHoverColor
     },
     '&:active, &:focus:not(:focus-visible)': {
-      color: tabsActiveColor
+      color: itemActiveColor
     }
-  }, (0, _style.genFocusStyle)(token))), _ref56)), (0, _defineProperty2["default"])(_extends3, componentCls + "-extra-content", {
+  }, (0, _style.genFocusStyle)(token))), _$concat$concat21)), _defineProperty(_Object$assign2, "".concat(componentCls, "-extra-content"), {
     flex: 'none'
-  }), (0, _defineProperty2["default"])(_extends3, componentCls + "-ink-bar", {
+  }), _defineProperty(_Object$assign2, "".concat(componentCls, "-ink-bar"), {
     position: 'absolute',
-    background: token.colorPrimary,
+    background: token.inkBarColor,
     pointerEvents: 'none'
-  }), _extends3)), genTabStyle(token)), (_extends4 = {}, (0, _defineProperty2["default"])(_extends4, componentCls + "-content", {
+  }), _Object$assign2)), genTabStyle(token)), (_Object$assign3 = {}, _defineProperty(_Object$assign3, "".concat(componentCls, "-content"), {
     position: 'relative',
     width: '100%'
-  }), (0, _defineProperty2["default"])(_extends4, componentCls + "-content-holder", {
+  }), _defineProperty(_Object$assign3, "".concat(componentCls, "-content-holder"), {
     flex: 'auto',
     minWidth: 0,
     minHeight: 0
-  }), (0, _defineProperty2["default"])(_extends4, componentCls + "-tabpane", {
+  }), _defineProperty(_Object$assign3, "".concat(componentCls, "-tabpane"), {
     outline: 'none',
     '&-hidden': {
       display: 'none'
     }
-  }), _extends4))), (0, _defineProperty2["default"])(_ref60, componentCls + "-centered", (0, _defineProperty2["default"])({}, "> " + componentCls + "-nav, > div > " + componentCls + "-nav", (0, _defineProperty2["default"])({}, componentCls + "-nav-wrap", (0, _defineProperty2["default"])({}, "&:not([class*='" + componentCls + "-nav-wrap-ping'])", {
+  }), _Object$assign3))), _defineProperty(_ref7, "".concat(componentCls, "-centered"), _defineProperty({}, "> ".concat(componentCls, "-nav, > div > ").concat(componentCls, "-nav"), _defineProperty({}, "".concat(componentCls, "-nav-wrap"), _defineProperty({}, "&:not([class*='".concat(componentCls, "-nav-wrap-ping'])"), {
     justifyContent: 'center'
-  })))), _ref60;
-}; // ============================== Export ==============================
-
-
-var _default = (0, _internal.genComponentStyleHook)('Tabs', function (token) {
-  var tabsCardHeight = token.controlHeightLG;
+  })))), _ref7;
+};
+var prepareComponentToken = function prepareComponentToken(token) {
+  var cardHeight = token.controlHeightLG;
+  return {
+    zIndexPopup: token.zIndexPopupBase + 50,
+    cardBg: token.colorFillAlter,
+    cardHeight: cardHeight,
+    // Initialize with empty string, because cardPadding will be calculated with cardHeight by default.
+    cardPadding: "".concat((cardHeight - Math.round(token.fontSize * token.lineHeight)) / 2 - token.lineWidth, "px ").concat(token.padding, "px"),
+    cardPaddingSM: "".concat(token.paddingXXS * 1.5, "px ").concat(token.padding, "px"),
+    cardPaddingLG: "".concat(token.paddingXS, "px ").concat(token.padding, "px ").concat(token.paddingXXS * 1.5, "px"),
+    titleFontSize: token.fontSize,
+    titleFontSizeLG: token.fontSizeLG,
+    titleFontSizeSM: token.fontSize,
+    inkBarColor: token.colorPrimary,
+    horizontalMargin: "0 0 ".concat(token.margin, "px 0"),
+    horizontalItemGutter: 32,
+    // Fixed Value
+    // Initialize with empty string, because horizontalItemMargin will be calculated with horizontalItemGutter by default.
+    horizontalItemMargin: "",
+    horizontalItemMarginRTL: "",
+    horizontalItemPadding: "".concat(token.paddingSM, "px 0"),
+    horizontalItemPaddingSM: "".concat(token.paddingXS, "px 0"),
+    horizontalItemPaddingLG: "".concat(token.padding, "px 0"),
+    verticalItemPadding: "".concat(token.paddingXS, "px ").concat(token.paddingLG, "px"),
+    verticalItemMargin: "".concat(token.margin, "px 0 0 0"),
+    itemColor: token.colorText,
+    itemSelectedColor: token.colorPrimary,
+    itemHoverColor: token.colorPrimaryHover,
+    itemActiveColor: token.colorPrimaryActive,
+    cardGutter: token.marginXXS / 2
+  };
+};
+// ============================== Export ==============================
+exports.prepareComponentToken = prepareComponentToken;
+var _default = exports.default = (0, _internal.genStyleHooks)('Tabs', function (token) {
   var tabsToken = (0, _internal.mergeToken)(token, {
-    tabsHoverColor: token.colorPrimaryHover,
-    tabsActiveColor: token.colorPrimaryActive,
-    tabsCardHorizontalPadding: (tabsCardHeight - Math.round(token.fontSize * token.lineHeight)) / 2 - token.lineWidth + "px " + token.padding + "px",
-    tabsCardHeight: tabsCardHeight,
-    tabsCardGutter: token.marginXXS / 2,
-    tabsHorizontalGutter: 32,
-    tabsCardHeadBackground: token.colorFillAlter,
+    // `cardPadding` is empty by default, so we could calculate with dynamic `cardHeight`
+    tabsCardPadding: token.cardPadding,
     dropdownEdgeChildVerticalPadding: token.paddingXXS,
     tabsActiveTextShadow: '0 0 0.25px currentcolor',
     tabsDropdownHeight: 200,
-    tabsDropdownWidth: 120
+    tabsDropdownWidth: 120,
+    tabsHorizontalItemMargin: "0 0 0 ".concat((0, _cssinjs.unit)(token.horizontalItemGutter)),
+    tabsHorizontalItemMarginRTL: "0 0 0 ".concat((0, _cssinjs.unit)(token.horizontalItemGutter))
   });
-  return [genSizeStyle(tabsToken), genRtlStyle(tabsToken), genPositionStyle(tabsToken), genDropdownStyle(tabsToken), genCardStyle(tabsToken), genTabsStyle(tabsToken), (0, _motion["default"])(tabsToken)];
-}, function (token) {
-  return {
-    zIndexPopup: token.zIndexPopupBase + 50
-  };
-});
-
-exports["default"] = _default;
+  return [genSizeStyle(tabsToken), genRtlStyle(tabsToken), genPositionStyle(tabsToken), genDropdownStyle(tabsToken), genCardStyle(tabsToken), genTabsStyle(tabsToken), (0, _motion.default)(tabsToken)];
+}, prepareComponentToken);