@oceanbase/design 1.0.0-alpha.4 → 1.0.0-alpha.5

package/es/alert/index.js

@@ -13,6 +13,7 @@ import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, In
 import classNames from 'classnames';
 import ConfigProvider from "../config-provider";
 import useStyle from "./style";
+import theme from "../theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from 'antd/es/alert';
 var iconMapOutlined = {
@@ -32,6 +33,8 @@ var Alert = function Alert(_ref) {
     customizePrefixCls = _ref.prefixCls,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
   // banner exists and type is empty, use warning type by default for correct icon
   var type = banner && !typeProp ? 'warning' : typeProp;
   var _useContext = useContext(ConfigProvider.ConfigContext),

package/es/alert/style/index.js

@@ -32,13 +32,14 @@ export var genAlertStyle = function genAlertStyle(token) {
   var componentCls = token.componentCls,
     colorIcon = token.colorIcon,
     colorIconHover = token.colorIconHover,
-    motionDurationMid = token.motionDurationMid;
+    motionDurationMid = token.motionDurationMid,
+    calc = token.calc;
   // height = fontSize * lineHeight
-  var height = token.fontSize * token.lineHeight;
+  var height = calc(token.fontSize).mul(token.lineHeight).equal();
   // icon width = fontSizeLG (icon size)
   var iconWidth = token.fontSizeLG;
   // content and action start position = icon width + icon margin
-  var contentStartOffset = iconWidth + token.marginXS;
+  var contentStartOffset = calc(iconWidth).add(token.marginXS).equal();
   // close icon width (approximate)
   var closeIconWidth = height;
   return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
@@ -75,12 +76,12 @@ export var genAlertStyle = function genAlertStyle(token) {
   }), "&".concat(componentCls, "-success"), genAlertTypeStyle('success', token)), "&".concat(componentCls, "-info"), genAlertTypeStyle('info', token)), "&".concat(componentCls, "-warning"), genAlertTypeStyle('warning', token)), "&".concat(componentCls, "-error"), genAlertTypeStyle('error', token))), "".concat(componentCls, ":not(").concat(componentCls, "-with-description)"), _defineProperty(_defineProperty({
     flexWrap: 'wrap'
   }, "".concat(componentCls, "-content"), {
-    flex: "1 1 calc(100% - ".concat(contentStartOffset + closeIconWidth + token.padding, "px)"),
+    flex: "1 1 ".concat(calc('100%').sub(contentStartOffset).sub(closeIconWidth).sub(token.padding).equal()),
     minWidth: 0,
-    maxWidth: "calc(100% - ".concat(contentStartOffset + closeIconWidth + token.padding, "px)"),
+    maxWidth: calc('100%').sub(contentStartOffset).sub(closeIconWidth).sub(token.padding).equal(),
     wordBreak: 'break-word'
   }), "".concat(componentCls, "-action"), {
-    width: "calc(100% - ".concat(contentStartOffset + token.padding, "px)"),
+    width: calc('100%').sub(contentStartOffset).sub(token.padding).equal(),
     marginInlineStart: contentStartOffset,
     marginTop: token.marginXS
   })), "".concat(componentCls).concat(componentCls, "-with-description"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
@@ -94,12 +95,12 @@ export var genAlertStyle = function genAlertStyle(token) {
   }), "".concat(componentCls, "-description"), {
     wordBreak: 'break-word'
   }), "".concat(componentCls, "-content"), {
-    flex: "1 1 calc(100% - ".concat(contentStartOffset + closeIconWidth + token.padding, "px)"),
+    flex: "1 1 ".concat(calc('100%').sub(contentStartOffset).sub(closeIconWidth).sub(token.padding).equal()),
     minWidth: 0,
-    maxWidth: "calc(100% - ".concat(contentStartOffset + closeIconWidth + token.padding, "px)"),
+    maxWidth: calc('100%').sub(contentStartOffset).sub(closeIconWidth).sub(token.padding).equal(),
     wordBreak: 'break-word'
   }), "".concat(componentCls, "-action"), {
-    width: "calc(100% - ".concat(contentStartOffset + token.padding, "px)"),
+    width: calc('100%').sub(contentStartOffset).sub(token.padding).equal(),
     marginInlineStart: contentStartOffset,
     marginTop: token.marginSM
   }), "".concat(componentCls, "-close-icon"), {

package/es/card/style/index.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { unit } from '@ant-design/cssinjs';
 import { genTabsStyle } from "../../tabs/style";
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genTableStyle = function genTableStyle(padding, token) {
@@ -26,14 +27,15 @@ export var genCardStyle = function genCardStyle(token) {
     tabsComponentCls = token.tabsComponentCls,
     tabsPrefixCls = token.tabsPrefixCls,
     paddingSM = token.paddingSM,
-    paddingLG = token.paddingLG;
+    paddingLG = token.paddingLG,
+    calc = token.calc;
   var tableComponentCls = "".concat(antCls, "-table");
   return _ref2 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref2, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-body"), {
     paddingTop: token.padding
   }), "".concat(componentCls, ":not(").concat(componentCls, "-bordered):not(").concat(componentCls, "-type-inner)"), {
     boxShadow: 'none'
   }), "".concat(componentCls).concat(componentCls, "-bordered"), _defineProperty({
-    borderRadius: token.borderRadiusLG - 2
+    borderRadius: calc(token.borderRadiusLG).sub(2).equal()
   }, "".concat(componentCls).concat(componentCls, "-bordered"), _defineProperty({
     borderRadius: token.borderRadius
   }, "".concat(componentCls).concat(componentCls, "-bordered"), {
@@ -46,11 +48,11 @@ export var genCardStyle = function genCardStyle(token) {
   }, tabsComponentCls, _defineProperty({}, "&".concat(tabsComponentCls, "-top, &").concat(tabsComponentCls, "-bottom"), _defineProperty({}, "".concat(tabsComponentCls, "-nav::before"), {
     border: 'none'
   }))))), "".concat(componentCls).concat(componentCls, "-no-divider:not(").concat(componentCls, "-contain-tabs)"), _defineProperty({}, "".concat(componentCls, "-body"), {
-    padding: "0 ".concat(paddingLG, "px ").concat(paddingLG, "px ").concat(paddingLG, "px")
+    padding: "0 ".concat(unit(paddingLG), " ").concat(unit(paddingLG), " ").concat(unit(paddingLG))
   })), "".concat(componentCls, "-small"), _defineProperty({}, "".concat(componentCls, "-body"), {
     paddingTop: token.paddingXS
   })), "".concat(componentCls, "-small").concat(componentCls, "-no-divider:not(").concat(componentCls, "-contain-tabs)"), _defineProperty({}, "".concat(componentCls, "-body"), {
-    padding: "0 ".concat(paddingSM, "px ").concat(paddingSM, "px ").concat(paddingSM, "px")
+    padding: "0 ".concat(unit(paddingSM), " ").concat(unit(paddingSM), " ").concat(unit(paddingSM))
   })), "".concat(componentCls, "-small").concat(componentCls, "-contain-tabs >").concat(componentCls, "-head"), _defineProperty({}, "".concat(componentCls, "-head-title, ").concat(componentCls, "-head-extra"), {
     paddingTop: token.paddingXS
   })), "".concat(componentCls).concat(componentCls, "-contain-tabs"), _defineProperty({}, "".concat(componentCls, "-head"), _objectSpread(_objectSpread({}, genTabsStyle(_objectSpread(_objectSpread({}, token), {}, {
@@ -65,7 +67,7 @@ export var genCardStyle = function genCardStyle(token) {
     // work for Card not containing Card.Grid
     marginBottom: 0
   })), "&".concat(componentCls, "-has-title").concat(componentCls, "-no-divider:not(").concat(componentCls, "-contain-tabs)"), _defineProperty({}, "".concat(componentCls, "-body"), _defineProperty({}, "& > ".concat(tableComponentCls, "-wrapper ").concat(tableComponentCls, ":not(").concat(tableComponentCls, "-bordered):first-child"), {
-    marginTop: -token.marginSM
+    marginTop: calc(token.marginSM).mul(-1).equal()
   }))), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref2, "".concat(componentCls).concat(componentCls, "-no-body-horizontal-padding"), genTableStyle(paddingLG, token)), "".concat(componentCls).concat(componentCls, "-no-body-horizontal-padding").concat(componentCls, "-small"), genTableStyle(paddingSM, token)), "".concat(componentCls).concat(componentCls, "-collapsible"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-title-wrapper"), _defineProperty({
     userSelect: 'none'
   }, "".concat(componentCls, "-collapsible-icon"), {

package/es/checkbox/style/index.js

@@ -7,11 +7,13 @@ export var genCheckboxStyle = function genCheckboxStyle(token) {
   var componentCls = token.componentCls,
     fontSize = token.fontSize,
     fontSizeLG = token.fontSizeLG,
-    lineHeight = token.lineHeight;
+    lineHeight = token.lineHeight,
+    calc = token.calc;
+  var translateY = calc(calc(fontSize).mul(lineHeight).equal()).sub(fontSizeLG).div(2).equal();
   return _defineProperty({}, "".concat(componentCls, "-wrapper"), _defineProperty({}, "".concat(componentCls), _defineProperty({
     alignSelf: 'baseline'
   }, "".concat(componentCls, "-inner"), {
-    transform: "translate(0px, ".concat((fontSize * lineHeight - fontSizeLG) / 2, "px)")
+    transform: "translate(0px, ".concat(translateY, ")")
   })));
 };
 export default (function (prefixCls) {

package/es/descriptions/style/index.js

@@ -32,7 +32,8 @@ export var genVerticalStyle = function genVerticalStyle(size, token) {
 };
 export var genDescriptionsStyle = function genDescriptionsStyle(token) {
   var componentCls = token.componentCls,
-    typographyComponentCls = token.typographyComponentCls;
+    typographyComponentCls = token.typographyComponentCls,
+    calc = token.calc;
   return _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _objectSpread(_objectSpread({}, genVerticalStyle('default', token)), {}, _defineProperty(_defineProperty({}, "".concat(componentCls, "-item-container"), _defineProperty({}, "".concat(componentCls, "-item-content"), _defineProperty({
     paddingRight: 12
   }, "".concat(typographyComponentCls, "-edit-content"), {
@@ -41,7 +42,7 @@ export var genDescriptionsStyle = function genDescriptionsStyle(token) {
     marginBottom: 0
   }))), "".concat(componentCls, "-item-container:has(", "".concat(typographyComponentCls, "-edit-content"), ")"), {
     alignItems: 'center',
-    height: token.fontSize * token.lineHeight
+    height: calc(token.fontSize).mul(token.lineHeight).equal()
   }))), "".concat(componentCls).concat(componentCls, "-middle"), genVerticalStyle('middle', token)), "".concat(componentCls).concat(componentCls, "-small"), genVerticalStyle('small', token));
 };
 export default (function (prefixCls, typographyPrefixCls) {

package/es/drawer/style/index.js

@@ -2,18 +2,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { unit } from '@ant-design/cssinjs';
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genDrawerStyle = function genDrawerStyle(token) {
   var componentCls = token.componentCls,
     antCls = token.antCls,
     fontSizeHeading3 = token.fontSizeHeading3,
-    colorSplit = token.colorSplit;
+    colorSplit = token.colorSplit,
+    calc = token.calc;
   var contentPadding = token.paddingLG;
   var boxShadowBottom = '0 2px 4px 0 rgba(54,69,99,0.04), 0 1px 6px -1px rgba(54,69,99,0.04), 0 1px 2px 0 rgba(54,69,99,0.06)';
   var boxShadowTop = '0 -2px 4px 0 rgba(54,69,99,0.04), 0 -1px 6px -1px rgba(54,69,99,0.04), 0 -1px 2px 0 rgba(54,69,99,0.06)';
   return _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-content"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-header"), _defineProperty(_defineProperty({
     position: 'relative',
-    padding: "".concat(token.padding, "px ").concat(token.paddingLG, "px"),
+    padding: "".concat(unit(token.padding), " ").concat(unit(token.paddingLG)),
     borderBottom: 'none',
     transition: "box-shadow ".concat(token.motionDurationMid),
     // ensure header box-shadow cover body content
@@ -29,8 +31,8 @@ export var genDrawerStyle = function genDrawerStyle(token) {
     height: '1px',
     backgroundColor: colorSplit,
     // 使用负margin让分割线贯通到content边缘
-    marginLeft: "-".concat(token.paddingLG, "px"),
-    marginRight: "-".concat(token.paddingLG, "px")
+    marginLeft: calc(token.paddingLG).mul(-1).equal(),
+    marginRight: calc(token.paddingLG).mul(-1).equal()
   })), "".concat(componentCls, "-header-shadow"), {
     boxShadow: boxShadowBottom
   }), "".concat(componentCls, "-body"), {
@@ -42,7 +44,7 @@ export var genDrawerStyle = function genDrawerStyle(token) {
     overflow: 'auto'
   }), "".concat(componentCls, "-footer-container"), _defineProperty({
     position: 'sticky',
-    padding: "".concat(token.padding, "px ").concat(token.paddingLG, "px"),
+    padding: "".concat(unit(token.padding), " ").concat(unit(token.paddingLG)),
     transition: "box-shadow ".concat(token.motionDurationMid),
     // ensure footer box-shadow cover body content
     zIndex: 10

package/es/empty/style/index.js

@@ -2,13 +2,15 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { unit } from '@ant-design/cssinjs';
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genEmptyStyle = function genEmptyStyle(token) {
   var antCls = token.antCls,
     componentCls = token.componentCls,
     colorTextTertiary = token.colorTextTertiary,
     colorText = token.colorText,
-    colorTextSecondary = token.colorTextSecondary;
+    colorTextSecondary = token.colorTextSecondary,
+    calc = token.calc;
   return _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty({}, "".concat(componentCls, "-image"), {
     height: 160,
     marginBottom: 0
@@ -36,7 +38,7 @@ export var genEmptyStyle = function genEmptyStyle(token) {
   }, "".concat(antCls, "-steps-item-container"), _defineProperty(_defineProperty({}, "".concat(antCls, "-steps-item-icon"), _defineProperty({
     height: token.controlHeightSM,
     width: token.controlHeightSM,
-    lineHeight: "".concat(token.controlHeightSM, "px"),
+    lineHeight: unit(token.controlHeightSM),
     backgroundColor: token.colorFillSecondary,
     // override default border color
     borderColor: token.colorFillSecondary
@@ -47,9 +49,9 @@ export var genEmptyStyle = function genEmptyStyle(token) {
     color: colorText,
     fontSize: token.fontSize,
     fontWeight: token.fontWeightStrong,
-    lineHeight: "".concat(token.controlHeightSM, "px"),
+    lineHeight: unit(token.controlHeightSM),
     '&::after': {
-      top: token.controlHeightSM / 2
+      top: calc(token.controlHeightSM).div(2).equal()
     }
   }), "".concat(antCls, "-steps-item-description"), {
     color: colorTextTertiary,

package/es/form/style/index.js

@@ -4,7 +4,8 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genFormStyle = function genFormStyle(token) {
-  var componentCls = token.componentCls;
+  var componentCls = token.componentCls,
+    calc = token.calc;
   return _defineProperty(_defineProperty({}, componentCls, _defineProperty({}, "".concat(componentCls, "-item-extra"), {
     paddingTop: token.paddingXXS,
     fontSize: token.fontSizeSM
@@ -18,7 +19,7 @@ export var genFormStyle = function genFormStyle(token) {
   }), "".concat(componentCls, "-item-label"), {
     paddingBottom: token.paddingXXS
   }), "".concat(componentCls, "-item-description"), {
-    paddingBottom: token.paddingXXS + 2,
+    paddingBottom: calc(token.paddingXXS).add(2).equal(),
     fontSize: token.fontSizeSM,
     color: token.colorTextDescription
   })));

package/es/modal/style/index.js

@@ -10,10 +10,11 @@ export var genModalStyle = function genModalStyle(token) {
     fontSizeHeading5 = token.fontSizeHeading5,
     lineHeightHeading5 = token.lineHeightHeading5,
     fontSizeHeading3 = token.fontSizeHeading3,
-    colorSplit = token.colorSplit;
+    colorSplit = token.colorSplit,
+    calc = token.calc;
   var top = 100;
   var bottom = 100;
-  var titleHeight = fontSizeHeading5 * lineHeightHeading5;
+  var titleHeight = calc(fontSizeHeading5).mul(lineHeightHeading5).equal();
   return _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, ":not(").concat(componentCls, "-confirm):not(").concat(componentCls, "-progress)"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-content"), _defineProperty(_defineProperty(_defineProperty({
     paddingBlock: token.padding
   }, "".concat(componentCls, "-close"), {
@@ -35,11 +36,11 @@ export var genModalStyle = function genModalStyle(token) {
     backgroundColor: colorSplit,
     // antd Modal content默认padding通常是24px，使用负margin让分割线贯通
     // 如果antd使用其他padding值，可能需要调整
-    marginLeft: "-".concat(token.paddingLG, "px"),
-    marginRight: "-".concat(token.paddingLG, "px")
+    marginLeft: calc(token.paddingLG).mul(-1).equal(),
+    marginRight: calc(token.paddingLG).mul(-1).equal()
   })), "".concat(componentCls, "-body"), {
     paddingTop: token.paddingLG,
-    marginInline: "-".concat(token.marginLG, "px"),
+    marginInline: calc(token.marginLG).mul(-1).equal(),
     paddingInline: token.paddingLG
   })), "".concat(componentCls, "-footer"), _defineProperty(_defineProperty({
     paddingTop: token.paddingLG,
@@ -85,7 +86,7 @@ export var genModalStyle = function genModalStyle(token) {
   }), "".concat(componentCls, "-body"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-confirm-title"), {
     fontSize: fontSizeHeading3
   }), "".concat(componentCls, "-confirm-body > ").concat(token.iconCls), {
-    height: token.fontSizeHeading3 * token.lineHeight
+    height: calc(token.fontSizeHeading3).mul(token.lineHeight).equal()
   }), "".concat(componentCls, "-confirm-paragraph"), {
     rowGap: token.marginSM
   }), "".concat(componentCls, "-confirm-content"), {

package/es/radio/style/index.js

@@ -8,11 +8,13 @@ export var genRadioStyle = function genRadioStyle(token) {
     radioSize = token.radioSize,
     fontSize = token.fontSize,
     fontSizeLG = token.fontSizeLG,
-    lineHeight = token.lineHeight;
+    lineHeight = token.lineHeight,
+    calc = token.calc;
+  var marginBottom = calc(calc(fontSize).mul(lineHeight).equal()).sub(radioSize || fontSizeLG).div(-2).equal();
   return _defineProperty({}, "".concat(componentCls, "-wrapper"), _defineProperty({}, "".concat(componentCls), _defineProperty({
     alignSelf: 'baseline'
   }, "".concat(componentCls, "-inner"), {
-    marginBottom: -(fontSize * lineHeight - (radioSize || fontSizeLG)) / 2
+    marginBottom: marginBottom
   })));
 };
 export default (function (prefixCls) {

package/es/slider/style/index.js

@@ -2,7 +2,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { toNumber } from 'lodash';
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genSliderStyle = function genSliderStyle(token) {
   var componentCls = token.componentCls,
@@ -11,13 +10,16 @@ export var genSliderStyle = function genSliderStyle(token) {
     _token$handleSize = token.handleSize,
     handleSize = _token$handleSize === void 0 ? 10 : _token$handleSize,
     _token$handleLineWidt = token.handleLineWidth,
-    handleLineWidth = _token$handleLineWidt === void 0 ? 2 : _token$handleLineWidt;
+    handleLineWidth = _token$handleLineWidt === void 0 ? 2 : _token$handleLineWidt,
+    calc = token.calc;
+  var dotSizeHalf = calc(dotSize).div(2).equal();
+  var handleOffset = calc(handleSize).add(calc(handleLineWidth).mul(2).equal()).div(2).equal();
   return _defineProperty({}, "".concat(componentCls).concat(componentCls, "-horizontal"), _defineProperty({}, "".concat(componentCls, "-mark"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-mark-text[style*=\"left: 0%;\"]"), {
-    transform: "translateX(calc(0% - ".concat(dotSize / 2, "px)) !important")
+    transform: "translateX(calc(0% - ".concat(dotSizeHalf, ")) !important")
   }), "".concat(componentCls, "-mark-text[style*=\"left: 100%;\"]"), {
-    transform: "translateX(calc(-100% + ".concat(dotSize / 2, "px)) !important")
+    transform: "translateX(calc(-100% + ".concat(dotSizeHalf, ")) !important")
   }), "".concat(componentCls, "-mark-text[style=\"transform: translateX(-50%);\"]"), {
-    transform: "translateX(calc(0% - ".concat((handleSize + toNumber(handleLineWidth) * 2) / 2, "px)) !important")
+    transform: "translateX(calc(0% - ".concat(handleOffset, ")) !important")
   })));
 };
 export default (function (prefixCls) {

package/es/spin/style/index.js

@@ -7,9 +7,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 var genSizeStyle = function genSizeStyle(spinDotSize, token) {
   var componentCls = token.componentCls,
-    colorText = token.colorText;
+    colorText = token.colorText,
+    calc = token.calc;
   var spinDotWidth = spinDotSize;
-  var spinDotHight = spinDotWidth * (295 / 397);
+  var spinDotHight = calc(spinDotWidth).mul(295).div(397).equal();
   return _defineProperty({}, "&".concat(componentCls, "-oceanbase"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-dot"), {
     width: spinDotWidth,
     height: spinDotHight
@@ -20,22 +21,23 @@ var genSizeStyle = function genSizeStyle(spinDotSize, token) {
 };
 var genNestedSizeStyle = function genNestedSizeStyle(spinDotSize, token) {
   var componentCls = token.componentCls,
-    fontSize = token.fontSize;
+    fontSize = token.fontSize,
+    calc = token.calc;
   var spinDotWidth = spinDotSize;
   // oceanbase indicator is rectangle instead of square, should calculate actual height by ratio
   // width: 295px
   // height: 397px
-  var spinDotHight = spinDotWidth * (295 / 397);
-  var dotMarginLeft = -spinDotWidth / 2;
-  var dotMarginTop = -spinDotHight / 2;
-  var textPaddingTop = (spinDotHight - fontSize) / 2 + 2;
+  var spinDotHight = calc(spinDotWidth).mul(295).div(397).equal();
+  var dotMarginLeft = calc(spinDotWidth).div(-2).equal();
+  var dotMarginTop = calc(spinDotHight).div(-2).equal();
+  var textPaddingTop = calc(spinDotHight).sub(fontSize).div(2).add(2).equal();
   return _defineProperty({}, "&".concat(componentCls, "-oceanbase, & > ").concat(componentCls, "-oceanbase"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-dot"), {
     marginLeft: dotMarginLeft,
     marginTop: dotMarginTop
   }), "".concat(componentCls, "-text"), {
     paddingTop: textPaddingTop
   }), "&".concat(componentCls, "-show-text ").concat(componentCls, "-dot"), {
-    marginTop: dotMarginTop - 10
+    marginTop: calc(dotMarginTop).sub(10).equal()
   }));
 };
 export var genSpinStyle = function genSpinStyle(token) {
@@ -50,16 +52,17 @@ export default (function (prefixCls) {
     // should expand by 2x for oceanbase indicator
     // because it's inner padding is smaller than antd default indicator
     // const ratio = 3;
+    var calc = token.calc;
     return [genSpinStyle(_objectSpread(_objectSpread({}, token), {}, {
       // https://github.com/ant-design/ant-design/blob/master/components/spin/style/index.tsx#L238
       // spinDotSize: (token.controlHeightLG / 2) * ratio,
       // spinDotSizeSM: token.controlHeightLG * 0.35 * ratio,
       // spinDotSizeLG: token.controlHeight * ratio,
-      spinDotSize: token.controlHeight * 1.75,
+      spinDotSize: calc(token.controlHeight).mul(1.75).equal(),
       // 56,
-      spinDotSizeSM: token.controlHeight * 1.125,
+      spinDotSizeSM: calc(token.controlHeight).mul(1.125).equal(),
       // 36
-      spinDotSizeLG: token.controlHeight * 2.25 // 72
+      spinDotSizeLG: calc(token.controlHeight).mul(2.25).equal() // 72
     }))];
   });
   return useStyle(prefixCls);

package/es/table/style/index.js

@@ -2,6 +2,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { unit } from '@ant-design/cssinjs';
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genTableStyle = function genTableStyle(token) {
   var _ref;
@@ -17,8 +18,8 @@ export var genTableStyle = function genTableStyle(token) {
     colorBorderSecondary = token.colorBorderSecondary,
     padding = token.padding,
     marginLG = token.marginLG,
-    marginXS = token.marginXS;
-  console.log(token.fontWeight);
+    marginXS = token.marginXS,
+    calc = token.calc;
   return _ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "".concat(componentCls, "-wrapper ").concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
     color: colorText,
     backgroundColor: colorBgBase,
@@ -47,7 +48,7 @@ export var genTableStyle = function genTableStyle(token) {
   })), "tr > td", {
     transition: "background ".concat(token.motionDurationMid)
   }), "".concat(componentCls, "-placeholder td"), {}), "".concat(componentCls, "-empty-wrapper"), {
-    minHeight: 360 - token.paddingSM * 2,
+    minHeight: calc(360).sub(calc(token.paddingSM).mul(2).equal()).equal(),
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center'
@@ -62,11 +63,11 @@ export var genTableStyle = function genTableStyle(token) {
   }), "".concat(componentCls, "-empty-wrapper"), {
     minHeight: 'auto'
   })))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-middle"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-empty-wrapper"), {
-    minHeight: 260 - token.paddingXS * 2
+    minHeight: calc(260).sub(calc(token.paddingXS).mul(2).equal()).equal()
   }))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-small"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-empty-wrapper"), {
-    minHeight: 160 - token.paddingXXS * 2
+    minHeight: calc(160).sub(calc(token.paddingXXS).mul(2).equal()).equal()
   }))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-bordered"), _defineProperty({}, "".concat(componentCls, "-footer"), {
-    borderRadius: "0px 0px ".concat(token.borderRadiusLG, "px ").concat(token.borderRadiusLG, "px")
+    borderRadius: "0px 0px ".concat(unit(token.borderRadiusLG), " ").concat(unit(token.borderRadiusLG))
   })), "".concat(componentCls, "-wrapper").concat(componentCls, "-inner-bordered ").concat(componentCls, "-bordered"), _defineProperty({}, "".concat(componentCls, "-container"), _defineProperty({
     borderInlineStart: 'none',
     borderTop: 'none'
@@ -81,26 +82,26 @@ export var genTableStyle = function genTableStyle(token) {
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
   }), "".concat(componentCls, "-wrapper").concat(componentCls, "-expandable"), _defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-expanded-row > td"), _defineProperty(_defineProperty({}, "& > *:not(".concat(componentCls, "-wrapper):not(").concat(componentCls, "-expanded-row-fixed)"), {
-    marginLeft: token.marginXL + token.lineWidth * 2
+    marginLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
   }), "& > *".concat(componentCls, "-expanded-row-fixed"), {
-    paddingLeft: token.marginXL + token.lineWidth * 2 + token.padding
+    paddingLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.padding).equal()
   })), "tr > td > ".concat(componentCls, "-wrapper:only-child ").concat(componentCls), {
-    marginLeft: token.margin + token.lineWidth * 2
+    marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).equal()
   }))), "".concat(componentCls, "-middle, ").concat(componentCls, "-small"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr > td > ".concat(componentCls, "-wrapper:only-child ").concat(componentCls), {
-    marginLeft: token.margin + token.lineWidth * 2 + token.margin
+    marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).add(token.margin).equal()
   })))), "".concat(componentCls, "-wrapper").concat(componentCls, "-expandable").concat(componentCls, "-selectable"), _defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-expanded-row > td"), _defineProperty(_defineProperty({}, "& > *:not(".concat(componentCls, "-wrapper):not(").concat(componentCls, "-expanded-row-fixed)"), {
-    marginLeft: token.marginXL + token.marginXL + token.lineWidth * 2
+    marginLeft: calc(token.marginXL).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
   }), "& > *".concat(componentCls, "-expanded-row-fixed"), {
-    paddingLeft: token.marginXL + token.marginXL + token.lineWidth * 2 + token.padding
+    paddingLeft: calc(token.marginXL).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.padding).equal()
   })), "tr > td > ".concat(componentCls, "-wrapper:only-child ").concat(componentCls), {
-    marginLeft: token.margin + token.marginXL + token.lineWidth * 2
+    marginLeft: calc(token.margin).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
   }))), "".concat(componentCls, "-middle, ").concat(componentCls, "-small"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr > td > ".concat(componentCls, "-wrapper:only-child ").concat(componentCls), {
-    marginLeft: token.margin + token.marginXL + token.lineWidth * 2 + token.margin
+    marginLeft: calc(token.margin).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.margin).equal()
   })))), "".concat(componentCls, "-wrapper ").concat(antCls, "-spin-blur"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-placeholder"), {
     // hide empty when Table loading
     visibility: 'hidden'
   }))), _defineProperty(_defineProperty(_defineProperty(_ref, "".concat(componentCls, "-wrapper"), _defineProperty({}, "".concat(componentCls, "-pagination"), _defineProperty(_defineProperty({}, "&".concat(antCls, "-pagination"), {
-    padding: "".concat(padding, "px 0"),
+    padding: "".concat(unit(padding), " 0"),
     margin: '0 !important'
   }), "".concat(componentCls, "-batch-operation-bar"), _defineProperty({
     position: 'absolute',
@@ -111,7 +112,7 @@ export var genTableStyle = function genTableStyle(token) {
     color: colorTextSecondary,
     fontWeight: token.fontWeightStrong
   }, "".concat(componentCls, "-batch-operation-selection-count"), {
-    margin: "0 ".concat(marginXS, "px"),
+    margin: "0 ".concat(unit(marginXS)),
     color: colorLink
   }))))), "".concat(antCls, "-popover").concat(componentCls, "-batch-operation-selection-popover"), _defineProperty({}, "".concat(antCls, "-popover-inner"), {
     padding: 0

package/es/typography/style/index.js

@@ -2,13 +2,18 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { unit } from '@ant-design/cssinjs';
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genTypographyStyle = function genTypographyStyle(token) {
   var componentCls = token.componentCls,
     controlHeight = token.controlHeight,
     fontSize = token.fontSize,
-    lineHeight = token.lineHeight;
-  var marginOffset = (controlHeight - fontSize * lineHeight) / 2;
+    lineHeight = token.lineHeight,
+    calc = token.calc;
+  var marginOffset = calc(controlHeight).sub(calc(fontSize).mul(lineHeight).equal()).div(2).equal();
+  var paddingTop = calc(marginOffset).sub(token.lineWidth).equal();
+  var paddingInline = calc(token.paddingSM).sub(token.lineWidth).equal();
+  var negativeMarginOffset = calc(marginOffset).mul(-1).equal();
   return _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty({
     lineHeight: 'inherit',
     color: 'inherit',
@@ -18,39 +23,39 @@ export var genTypographyStyle = function genTypographyStyle(token) {
   })), "".concat(componentCls).concat(componentCls, "-editable-text:not(").concat(componentCls, "-edit-content)"), {
     '&:hover': {
       background: token.colorBgContainer,
-      border: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorBorder),
+      border: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorBorder),
       borderRadius: token.borderRadius,
       position: 'relative',
-      insetInlineStart: -token.paddingSM,
-      padding: "".concat(marginOffset - token.lineWidth, "px ").concat(token.paddingSM - token.lineWidth, "px")
+      insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+      padding: "".concat(paddingTop, " ").concat(paddingInline)
     },
     'div&:hover': {
       height: token.controlHeight,
-      marginTop: -marginOffset,
-      marginBottom: "calc(1em - ".concat(marginOffset, "px)")
+      marginTop: negativeMarginOffset,
+      marginBottom: calc('1em').sub(marginOffset).equal()
     },
     'span&:hover': {
       display: 'inline-block',
       height: token.controlHeight,
-      marginTop: -marginOffset,
-      marginBottom: -marginOffset
+      marginTop: negativeMarginOffset,
+      marginBottom: negativeMarginOffset
     },
     'h1&:hover, h2&:hover, h3&:hover, h4&:hover, h5&:hover': {
-      marginTop: "".concat(-marginOffset, "px !important"),
-      marginBottom: "".concat(-marginOffset, "px !important")
+      marginTop: "".concat(negativeMarginOffset, " !important"),
+      marginBottom: "".concat(negativeMarginOffset, " !important")
     }
   }), "".concat(componentCls).concat(componentCls, "-edit-content"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-div&"), {
-    insetInlineStart: -token.paddingSM,
-    marginTop: -marginOffset,
-    marginBottom: "calc(1em - ".concat(marginOffset, "px)")
+    insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+    marginTop: negativeMarginOffset,
+    marginBottom: calc('1em').sub(marginOffset).equal()
   }), "".concat(componentCls, "-span&"), {
-    insetInlineStart: -token.paddingSM,
-    marginTop: -marginOffset,
-    marginBottom: -marginOffset
+    insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+    marginTop: negativeMarginOffset,
+    marginBottom: negativeMarginOffset
   }), "".concat(componentCls, "-h1&, ").concat(componentCls, "-h2&, ").concat(componentCls, "-h3&, ").concat(componentCls, "-h4&, ").concat(componentCls, "-h5&"), {
-    insetInlineStart: -token.paddingSM,
-    marginTop: "".concat(-marginOffset, "px !important"),
-    marginBottom: "".concat(-marginOffset, "px !important")
+    insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+    marginTop: "".concat(negativeMarginOffset, " !important"),
+    marginBottom: "".concat(negativeMarginOffset, " !important")
   }));
 };
 export default (function (prefixCls) {

package/lib/alert/index.js

@@ -39,6 +39,7 @@ var import_icons = require("@oceanbase/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_style = __toESM(require("./style"));
+var import_theme = __toESM(require("../theme"));
 __reExport(alert_exports, require("antd/es/alert"), module.exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var iconMapOutlined = {
@@ -58,6 +59,7 @@ var Alert = ({
   className,
   ...restProps
 }) => {
+  const { token } = import_theme.default.useToken();
   const type = banner && !typeProp ? "warning" : typeProp;
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("alert", customizePrefixCls);