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

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/style/global.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import 'antd/dist/reset.css';
+declare const GlobalStyle: React.FC;
+export { GlobalStyle };
+export default GlobalStyle;

package/es/style/global.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import themeConfig from "../theme";
+import interFont from "../fonts/Inter.woff2";
+import consolasFont from "../fonts/Consolas.woff2";
+import helveticaNeueFont from "../fonts/HelveticaNeue.woff2";
+import 'antd/dist/reset.css';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var genGlobalStyle = function genGlobalStyle(token) {
+  return [
+  // Priority: local font > self-hosting font > remote font
+  {
+    '@font-face': {
+      fontFamily: "'Inter'",
+      src: "local('Inter'), url(".concat(interFont, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2') format('woff2')"),
+      fontDisplay: 'swap'
+    }
+  }, {
+    '@font-face': {
+      fontFamily: "'Consolas'",
+      src: "local('Consolas'), url(".concat(consolasFont, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2') format('woff2')"),
+      fontDisplay: 'swap'
+    }
+  }, {
+    '@font-face': {
+      fontFamily: "'Helvetica Neue'",
+      src: "local('Helvetica Neue'), url(".concat(helveticaNeueFont, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2') format('woff2')"),
+      fontDisplay: 'swap'
+    }
+  },
+  // Global element styles
+  {
+    'pre, code, kbd, samp': {
+      fontFamily: token.fontFamilyCode
+    },
+    '*': {
+      scrollbarColor: "".concat(token.colorFillSecondary, " transparent")
+    },
+    '.rc-virtual-list-scrollbar-thumb': {
+      background: "".concat(token.colorFillSecondary, " !important")
+    }
+  }];
+};
+var GlobalStyle = function GlobalStyle() {
+  var _themeConfig$useToken = themeConfig.useToken(),
+    theme = _themeConfig$useToken.theme,
+    token = _themeConfig$useToken.token;
+  var wrapSSR = useStyleRegister({
+    theme: theme,
+    token: token,
+    path: ['global'],
+    hashId: '',
+    // Empty hashId for global styles
+    order: -1000 // Inject before other styles
+  }, function () {
+    return genGlobalStyle(token);
+  });
+  return wrapSSR( /*#__PURE__*/_jsx(_Fragment, {}));
+};
+export { GlobalStyle };
+export default GlobalStyle;

package/es/style/reset.css

@@ -1 +1,2 @@
-@import '~antd/dist/reset.css';
+/* antd/dist/reset.css is imported in global.tsx */
+/* reserve this file for compatibility with antd */

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/theme/compact.d.ts

@@ -1,5 +1,5 @@
 declare const compactTheme: {
-    token: import("antd/es/theme/internal").AliasToken;
+    token: import("antd/es/theme/internal").SeedToken;
     components: {
         InputNumber: {
             handleVisible: boolean;

package/es/theme/compact.js

@@ -1,10 +1,6 @@
-import { theme } from 'antd';
-import themeConfig from "./index";
+import theme from "./index";
 var compactTheme = {
-  token: theme.getDesignToken({
-    algorithm: theme.compactAlgorithm,
-    token: themeConfig.defaultSeed
-  }),
+  token: theme.defaultSeed,
   components: {
     InputNumber: {
       handleVisible: true

package/es/theme/default.js

@@ -19,6 +19,9 @@ var colorFillQuaternary = '#F5F7FC';
 var colorBorderSecondary = colorFillSecondary;
 var fontSizeSM = 12;
 var tagColorBorder = colorTextQuaternary;
+var borderRadius = 4;
+var borderRadiusMD = 6;
+var borderRadiusLG = 8;
 export var fontFamilyEn = "Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'";
 export var fontWeightWeakEn = 400;
 export var fontWeightEn = 500;
@@ -31,9 +34,9 @@ var defaultTheme = {
     fontWeight: 400,
     fontWeightStrong: 500,
     borderRadiusSM: 2,
-    borderRadius: 4,
-    borderRadiusMD: 6,
-    borderRadiusLG: 8,
+    borderRadius: borderRadius,
+    borderRadiusMD: borderRadiusMD,
+    borderRadiusLG: borderRadiusLG,
     fontSizeSM: fontSizeSM,
     fontSize: 13,
     lineHeight: 20 / 13,
@@ -97,7 +100,7 @@ var defaultTheme = {
   },
   components: {
     Alert: {
-      borderRadiusLG: 6
+      borderRadiusLG: borderRadiusMD
     },
     Badge: {
       statusSize: 8
@@ -118,16 +121,29 @@ var defaultTheme = {
     },
     Card: {
       headerFontSize: 16,
-      borderRadiusLG: 8
+      borderRadiusLG: borderRadiusLG
     },
     Collapse: {
       colorBorder: colorBorderSecondary
     },
+    DatePicker: {
+      borderRadiusLG: borderRadiusMD
+    },
     Descriptions: {
       labelColor: colorTextSecondary
     },
+    Dropdown: {
+      borderRadiusLG: borderRadiusMD
+    },
+    Input: {
+      borderRadiusLG: borderRadiusMD
+    },
     InputNumber: {
-      handleVisible: true
+      handleVisible: true,
+      borderRadiusLG: borderRadiusMD
+    },
+    Popover: {
+      borderRadiusLG: borderRadiusMD
     },
     Progress: {
       defaultColor: colorPrimarySecondary
@@ -141,6 +157,7 @@ var defaultTheme = {
     },
     Select: {
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
+      borderRadiusLG: borderRadiusMD,
       multipleItemBg: colorFillQuaternary,
       multipleItemBorderColor: tagColorBorder,
       multipleItemBorderColorDisabled: tagColorBorder
@@ -154,7 +171,7 @@ var defaultTheme = {
       handleColorDisabled: '#b3ccff'
     },
     Skeleton: {
-      blockRadius: 4
+      blockRadius: borderRadius
     },
     Tabs: {
       horizontalItemGutter: 24,
@@ -164,7 +181,7 @@ var defaultTheme = {
     },
     Tag: {
       colorBorder: tagColorBorder,
-      borderRadiusSM: 4
+      borderRadiusSM: borderRadius
     },
     Table: {
       cellFontSize: fontSizeSM,
@@ -178,13 +195,15 @@ var defaultTheme = {
       rowSelectedHoverBg: colorFillTertiary
     },
     Tooltip: {
+      borderRadius: borderRadiusMD,
       colorBgSpotlight: '#ffffff',
       colorTextLightSolid: colorText
     },
     Menu: {
+      borderRadiusLG: borderRadiusMD,
       paddingContentVertical: 0,
       itemHeight: 30,
-      itemBorderRadius: 4,
+      itemBorderRadius: borderRadius,
       // 80 means 50% opacity
       itemHoverBg: colorFillSecondary + '80',
       itemActiveBg: colorFillSecondary + '80',

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);

package/lib/alert/style/index.js

@@ -23,6 +23,7 @@ __export(style_exports, {
   genAlertStyle: () => genAlertStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var import_lodash = require("lodash");
 var genAlertTypeStyle = (type, token) => {
@@ -54,17 +55,31 @@ var genAlertTypeStyle = (type, token) => {
   };
 };
 var genAlertStyle = (token) => {
-  const { componentCls, colorIcon, colorIconHover, motionDurationMid } = token;
-  const height = token.fontSize * token.lineHeight;
+  const { componentCls, colorIcon, colorIconHover, motionDurationMid, calc } = token;
+  const height = calc(token.fontSize).mul(token.lineHeight).equal();
   const iconWidth = token.fontSizeLG;
-  const contentStartOffset = iconWidth + token.marginXS;
+  const contentStartOffset = calc(iconWidth).add(token.marginXS).equal();
   const closeIconWidth = height;
+  const contentWidth = (0, import_cssinjs.unit)(
+    calc(contentStartOffset).add(closeIconWidth).add(token.padding).equal()
+  );
+  const actionWidth = (0, import_cssinjs.unit)(calc(contentStartOffset).add(token.padding).equal());
   return {
     [`${componentCls}`]: {
       // vertical align to flex-start
       alignItems: "flex-start !important",
       paddingInline: token.padding,
       position: "relative",
+      [`${componentCls}-content`]: {
+        flex: `1 1 calc(100% - ${contentWidth})`,
+        minWidth: 0,
+        maxWidth: `calc(100% - ${contentWidth})`,
+        wordBreak: "break-word"
+      },
+      [`${componentCls}-action`]: {
+        width: `calc(100% - ${actionWidth})`,
+        marginInlineStart: contentStartOffset
+      },
       [`${componentCls}-icon`]: {
         height,
         fontSize: token.fontSizeLG,
@@ -103,15 +118,7 @@ var genAlertStyle = (token) => {
     },
     [`${componentCls}:not(${componentCls}-with-description)`]: {
       flexWrap: "wrap",
-      [`${componentCls}-content`]: {
-        flex: `1 1 calc(100% - ${contentStartOffset + closeIconWidth + token.padding}px)`,
-        minWidth: 0,
-        maxWidth: `calc(100% - ${contentStartOffset + closeIconWidth + token.padding}px)`,
-        wordBreak: "break-word"
-      },
       [`${componentCls}-action`]: {
-        width: `calc(100% - ${contentStartOffset + token.padding}px)`,
-        marginInlineStart: contentStartOffset,
         marginTop: token.marginXS
       }
     },
@@ -127,15 +134,7 @@ var genAlertStyle = (token) => {
       [`${componentCls}-description`]: {
         wordBreak: "break-word"
       },
-      [`${componentCls}-content`]: {
-        flex: `1 1 calc(100% - ${contentStartOffset + closeIconWidth + token.padding}px)`,
-        minWidth: 0,
-        maxWidth: `calc(100% - ${contentStartOffset + closeIconWidth + token.padding}px)`,
-        wordBreak: "break-word"
-      },
       [`${componentCls}-action`]: {
-        width: `calc(100% - ${contentStartOffset + token.padding}px)`,
-        marginInlineStart: contentStartOffset,
         marginTop: token.marginSM
       },
       [`${componentCls}-close-icon`]: {

package/lib/button/style/index.js

@@ -25,11 +25,17 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genButtonStyle = (token) => {
-  return {};
+  const { componentCls } = token;
+  return {
+    [`${componentCls}`]: {
+      // remove box-shadow for button
+      boxShadow: "none !important"
+    }
+  };
 };
 var style_default = (prefixCls, isAliyun) => {
   const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Button", (token) => {
-    return isAliyun ? [] : [genButtonStyle(token)];
+    return [genButtonStyle(token)];
   });
   return useStyle(prefixCls);
 };

package/lib/card/style/index.js

@@ -24,6 +24,7 @@ __export(style_exports, {
   genTableStyle: () => genTableStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_style = require("../../tabs/style");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTableStyle = (padding, token) => {
@@ -55,7 +56,7 @@ var genTableStyle = (padding, token) => {
   };
 };
 var genCardStyle = (token) => {
-  const { componentCls, antCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG } = token;
+  const { componentCls, antCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG, calc } = token;
   const tableComponentCls = `${antCls}-table`;
   return {
     [`${componentCls}`]: {
@@ -68,7 +69,7 @@ var genCardStyle = (token) => {
       },
       // nested and bordered Card radius
       [`${componentCls}${componentCls}-bordered`]: {
-        borderRadius: token.borderRadiusLG - 2,
+        borderRadius: calc(token.borderRadiusLG).sub(2).equal(),
         [`${componentCls}${componentCls}-bordered`]: {
           borderRadius: token.borderRadius,
           [`${componentCls}${componentCls}-bordered`]: {
@@ -95,7 +96,7 @@ var genCardStyle = (token) => {
     },
     [`${componentCls}${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-body`]: {
-        padding: `0 ${paddingLG}px ${paddingLG}px ${paddingLG}px`
+        padding: `0 ${(0, import_cssinjs.unit)(paddingLG)} ${(0, import_cssinjs.unit)(paddingLG)} ${(0, import_cssinjs.unit)(paddingLG)}`
       }
     },
     [`${componentCls}-small`]: {
@@ -105,7 +106,7 @@ var genCardStyle = (token) => {
     },
     [`${componentCls}-small${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-body`]: {
-        padding: `0 ${paddingSM}px ${paddingSM}px ${paddingSM}px`
+        padding: `0 ${(0, import_cssinjs.unit)(paddingSM)} ${(0, import_cssinjs.unit)(paddingSM)} ${(0, import_cssinjs.unit)(paddingSM)}`
       }
     },
     [`${componentCls}-small${componentCls}-contain-tabs >${componentCls}-head`]: {
@@ -145,7 +146,7 @@ var genCardStyle = (token) => {
     [`&${componentCls}-has-title${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-body`]: {
         [`& > ${tableComponentCls}-wrapper ${tableComponentCls}:not(${tableComponentCls}-bordered):first-child`]: {
-          marginTop: -token.marginSM
+          marginTop: calc(token.marginSM).mul(-1).equal()
         }
       }
     },

package/lib/checkbox/style/index.js

@@ -25,13 +25,14 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genCheckboxStyle = (token) => {
-  const { componentCls, fontSize, fontSizeLG, lineHeight } = token;
+  const { componentCls, fontSize, fontSizeLG, lineHeight, calc } = token;
+  const translateY = calc(calc(fontSize).mul(lineHeight).equal()).sub(fontSizeLG).div(2).equal();
   return {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}`]: {
         alignSelf: "baseline",
         [`${componentCls}-inner`]: {
-          transform: `translate(0px, ${(fontSize * lineHeight - fontSizeLG) / 2}px)`
+          transform: `translate(0px, ${translateY})`
         }
       }
     }

package/lib/config-provider/index.d.ts

@@ -14,8 +14,9 @@ export * from 'antd/es/config-provider/SizeContext';
 export * from 'antd/es/config-provider/DisabledContext';
 export * from 'antd/es/config-provider';
 export interface ThemeConfig extends AntThemeConfig {
-    isDark?: boolean;
     isAliyun?: boolean;
+    isDark?: boolean;
+    isCompact?: boolean;
 }
 export type CardConfig = AntCardConfig & {
     divided?: boolean;