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

package/lib/table/style/index.js

@@ -23,6 +23,7 @@ __export(style_exports, {
   genTableStyle: () => genTableStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTableStyle = (token) => {
   const {
@@ -38,7 +39,8 @@ var genTableStyle = (token) => {
     colorBorderSecondary,
     padding,
     marginLG,
-    marginXS
+    marginXS,
+    calc
   } = token;
   return {
     // 表格通用样式
@@ -53,9 +55,8 @@ var genTableStyle = (token) => {
       // head 样式
       [`${componentCls}-thead > tr`]: {
         ["th"]: {
-          // 弱化列标题
           color: colorTextSecondary,
-          fontWeight: "normal",
+          fontWeight: token.fontWeight,
           backgroundColor: colorBgBase
         },
         // 去掉排序列表头的灰色背景
@@ -93,7 +94,7 @@ var genTableStyle = (token) => {
         // empty style
         [`${componentCls}-placeholder td`]: {},
         [`${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"
@@ -123,7 +124,7 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper ${componentCls}${componentCls}-middle`]: {
       [`${componentCls}-tbody`]: {
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: 260 - token.paddingXS * 2
+          minHeight: calc(260).sub(calc(token.paddingXS).mul(2).equal()).equal()
         }
       }
     },
@@ -131,14 +132,14 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper ${componentCls}${componentCls}-small`]: {
       [`${componentCls}-tbody`]: {
         [`${componentCls}-empty-wrapper`]: {
-          minHeight: 160 - token.paddingXXS * 2
+          minHeight: calc(160).sub(calc(token.paddingXXS).mul(2).equal()).equal()
         }
       }
     },
     // 带边框的表格样式
     [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
       [`${componentCls}-footer`]: {
-        borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
+        borderRadius: `0px 0px ${(0, import_cssinjs.unit)(token.borderRadiusLG)} ${(0, import_cssinjs.unit)(token.borderRadiusLG)}`
       }
     },
     // 带内部边框的表格样式
@@ -159,7 +160,6 @@ var genTableStyle = (token) => {
       [`${componentCls}-thead, ${componentCls}-tbody`]: {
         ["td, th"]: {
           [`&${componentCls}-row-expand-icon-cell`]: {
-            backgroundColor: colorBgBase,
             // 设置 paddingRight 即可
             paddingRight: token.paddingXS
           },
@@ -202,15 +202,15 @@ var genTableStyle = (token) => {
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
             [`& > *:not(${componentCls}-wrapper):not(${componentCls}-expanded-row-fixed)`]: {
-              marginLeft: token.marginXL + token.lineWidth * 2
+              marginLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
             },
             [`& > *${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 > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.lineWidth * 2
+            marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).equal()
           }
         }
       },
@@ -218,7 +218,7 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody`]: {
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.lineWidth * 2 + token.margin
+            marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).add(token.margin).equal()
           }
         }
       }
@@ -230,15 +230,15 @@ var genTableStyle = (token) => {
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
             [`& > *:not(${componentCls}-wrapper):not(${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()
             },
             [`& > *${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 > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.margin + token.marginXL + token.lineWidth * 2
+            marginLeft: calc(token.margin).add(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
           }
         }
       },
@@ -246,7 +246,7 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody`]: {
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${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()
           }
         }
       }
@@ -264,7 +264,7 @@ var genTableStyle = (token) => {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}-pagination`]: {
         [`&${antCls}-pagination`]: {
-          padding: `${padding}px 0`,
+          padding: `${(0, import_cssinjs.unit)(padding)} 0`,
           margin: "0 !important"
         },
         // 批量操作栏样式
@@ -275,9 +275,9 @@ var genTableStyle = (token) => {
           marginRight: marginLG,
           [`${componentCls}-batch-operation-selection`]: {
             color: colorTextSecondary,
-            fontWeight: 500,
+            fontWeight: token.fontWeightStrong,
             [`${componentCls}-batch-operation-selection-count`]: {
-              margin: `0 ${marginXS}px`,
+              margin: `0 ${(0, import_cssinjs.unit)(marginXS)}`,
               color: colorLink
             }
           }

package/lib/tabs/style/index.js

@@ -36,6 +36,11 @@ var genTabsStyle = (token) => {
           }
         }
       },
+      [`&${componentCls}-left, &${componentCls}-right`]: {
+        [`${componentCls}-tab[data-node-key^=divider-]`]: {
+          paddingBlock: 0
+        }
+      },
       [`${componentCls}-tab`]: {
         /** @deprecated */
         [`${componentCls}-tab-tag`]: {

package/lib/tag/index.d.ts

@@ -4,6 +4,7 @@ import type { Ellipsis } from '../_util/getEllipsisConfig';
 export * from 'antd/es/tag';
 export interface TagProps extends AntTagProps {
     ellipsis?: Ellipsis;
+    pill?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>> & {
     CheckableTag: React.ForwardRefExoticComponent<import("antd/es/tag").CheckableTagProps & React.RefAttributes<HTMLSpanElement>>;

package/lib/tag/index.js

@@ -53,6 +53,7 @@ var Tag = import_react.default.forwardRef(
         title: children
       }
     },
+    pill,
     ...restProps
   }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
@@ -61,7 +62,8 @@ var Tag = import_react.default.forwardRef(
     const ellipsisConfig = (0, import_getEllipsisConfig.getEllipsisConfig)(ellipsis, children);
     const tagCls = (0, import_classnames.default)(
       {
-        [`${prefixCls}-ellipsis`]: !!ellipsisConfig
+        [`${prefixCls}-ellipsis`]: !!ellipsisConfig,
+        [`${prefixCls}-pill`]: pill
       },
       className
     );

package/lib/tag/style/index.js

@@ -44,6 +44,9 @@ var genTagStyle = (token) => {
     [`${componentCls}`]: {
       paddingInline: token.paddingXS,
       fontSize: token.fontSizeSM,
+      [`&:not(${componentCls}-pill)`]: {
+        fontWeight: token.fontWeightStrong
+      },
       [`${componentCls}-close-icon${iconCls}`]: {
         marginInlineStart: token.marginXXS
       },
@@ -66,6 +69,11 @@ var genTagStyle = (token) => {
       },
       ["&-borderless"]: {
         borderColor: "transparent"
+      },
+      ["&-pill"]: {
+        borderRadius: 100,
+        lineHeight: token.lineHeight,
+        marginInlineEnd: token.marginXXS
       }
     }
   };

package/lib/theme/default.js

@@ -35,8 +35,8 @@ var colorTextTertiary = "#8592AD";
 var colorTextQuaternary = "#B6C0D4";
 var colorFill = "#CDD5E4";
 var colorFillSecondary = "#E2E8F3";
-var colorFillTertiary = "#EFF3FA";
-var colorFillQuaternary = "#F7F9FC";
+var colorFillTertiary = "#EBEFF7";
+var colorFillQuaternary = "#F5F7FC";
 var colorBorderSecondary = colorFillSecondary;
 var fontSizeSM = 12;
 var tagColorBorder = colorTextQuaternary;
@@ -98,7 +98,7 @@ var defaultTheme = {
     colorIcon: colorTextSecondary,
     colorBgBase: "#ffffff",
     colorBgContainer: "#ffffff",
-    colorBgLayout: colorFillQuaternary,
+    colorBgLayout: "#FBFCFE",
     colorBorder: colorFill,
     colorBorderSecondary,
     colorFill,
@@ -117,6 +117,12 @@ var defaultTheme = {
     lineWidthFocus: 0
   },
   components: {
+    Alert: {
+      borderRadiusLG: 6
+    },
+    Badge: {
+      statusSize: 8
+    },
     Breadcrumb: {
       fontSize: fontSizeSM,
       fontHeight: 20,

package/lib/theme/style/compact.less

@@ -310,12 +310,12 @@
 @colorTextQuaternary: #b6c0d4;
 @colorFill: #cdd5e4;
 @colorFillSecondary: #e2e8f3;
-@colorFillTertiary: #eff3fa;
-@colorFillQuaternary: #f7f9fc;
+@colorFillTertiary: #ebeff7;
+@colorFillQuaternary: #f5f7fc;
 @colorBgSolid: rgb(0,0,0);
 @colorBgSolidHover: rgba(0,0,0,0.75);
 @colorBgSolidActive: rgba(0,0,0,0.95);
-@colorBgLayout: #f7f9fc;
+@colorBgLayout: #fbfcfe;
 @colorBgContainer: #ffffff;
 @colorBgElevated: #ffffff;
 @colorBgSpotlight: #ffffff;
@@ -421,14 +421,14 @@
 @colorFuchsiaBg: #faf0fc;
 @colorFuchsiaText: #580e67;
 @colorIcon: #8592ad;
-@colorBgContainerDisabled: #eff3fa;
+@colorBgContainerDisabled: #ebeff7;
 @boxShadow: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadowSecondary: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadowTertiary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @lineWidthFocus: 3px;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
-@colorFillAlter: #f7f9fc;
+@colorFillAlter: #f5f7fc;
 @colorBorderBg: #ffffff;
 @colorSplit: rgba(13,63,155,0.12);
 @colorTextPlaceholder: #b6c0d4;
@@ -446,11 +446,11 @@
 @fontSizeIcon: 12px;
 @controlOutlineWidth: 2px;
 @controlInteractiveSize: 14px;
-@controlItemBgHover: #eff3fa;
+@controlItemBgHover: #ebeff7;
 @controlItemBgActive: #e6f4ff;
 @controlItemBgActiveHover: #b0dbff;
 @controlItemBgActiveDisabled: #cdd5e4;
-@controlTmpOutline: #f7f9fc;
+@controlTmpOutline: #f5f7fc;
 @controlOutline: rgba(5,145,255,0.1);
 @opacityLoading: 0.65;
 @linkDecoration: none;

package/lib/theme/style/default.less

@@ -310,12 +310,12 @@
 @colorTextQuaternary: #b6c0d4;
 @colorFill: #cdd5e4;
 @colorFillSecondary: #e2e8f3;
-@colorFillTertiary: #eff3fa;
-@colorFillQuaternary: #f7f9fc;
+@colorFillTertiary: #ebeff7;
+@colorFillQuaternary: #f5f7fc;
 @colorBgSolid: rgb(0,0,0);
 @colorBgSolidHover: rgba(0,0,0,0.75);
 @colorBgSolidActive: rgba(0,0,0,0.95);
-@colorBgLayout: #f7f9fc;
+@colorBgLayout: #fbfcfe;
 @colorBgContainer: #ffffff;
 @colorBgElevated: #ffffff;
 @colorBgSpotlight: #ffffff;
@@ -421,14 +421,14 @@
 @colorFuchsiaBg: #faf0fc;
 @colorFuchsiaText: #580e67;
 @colorIcon: #8592ad;
-@colorBgContainerDisabled: #eff3fa;
+@colorBgContainerDisabled: #ebeff7;
 @boxShadow: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadowSecondary: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadowTertiary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @lineWidthFocus: 3px;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
-@colorFillAlter: #f7f9fc;
+@colorFillAlter: #f5f7fc;
 @colorBorderBg: #ffffff;
 @colorSplit: rgba(13,63,155,0.12);
 @colorTextPlaceholder: #b6c0d4;
@@ -446,11 +446,11 @@
 @fontSizeIcon: 12px;
 @controlOutlineWidth: 2px;
 @controlInteractiveSize: 14px;
-@controlItemBgHover: #eff3fa;
+@controlItemBgHover: #ebeff7;
 @controlItemBgActive: #e6f4ff;
 @controlItemBgActiveHover: #b0dbff;
 @controlItemBgActiveDisabled: #cdd5e4;
-@controlTmpOutline: #f7f9fc;
+@controlTmpOutline: #f5f7fc;
 @controlOutline: rgba(5,145,255,0.1);
 @opacityLoading: 0.65;
 @linkDecoration: none;

package/lib/typography/style/index.js

@@ -23,10 +23,14 @@ __export(style_exports, {
   genTypographyStyle: () => genTypographyStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTypographyStyle = (token) => {
-  const { componentCls, controlHeight, fontSize, lineHeight } = token;
-  const marginOffset = (controlHeight - fontSize * lineHeight) / 2;
+  const { componentCls, controlHeight, fontSize, lineHeight, calc } = token;
+  const marginOffset = calc(controlHeight).sub(calc(fontSize).mul(lineHeight).equal()).div(2).equal();
+  const paddingTop = calc(marginOffset).sub(token.lineWidth).equal();
+  const paddingInline = calc(token.paddingSM).sub(token.lineWidth).equal();
+  const negativeMarginOffset = calc(marginOffset).mul(-1).equal();
   return {
     // inherit color and lineHeight from parent instead of fixed colorText
     [`${componentCls}`]: {
@@ -40,43 +44,43 @@ var genTypographyStyle = (token) => {
     [`${componentCls}${componentCls}-editable-text:not(${componentCls}-edit-content)`]: {
       "&:hover": {
         background: token.colorBgContainer,
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+        border: `${(0, import_cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
         borderRadius: token.borderRadius,
         position: "relative",
-        insetInlineStart: -token.paddingSM,
-        padding: `${marginOffset - token.lineWidth}px ${token.paddingSM - token.lineWidth}px`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        padding: `${paddingTop} ${paddingInline}`
       },
       "div&:hover": {
         height: token.controlHeight,
-        marginTop: -marginOffset,
-        marginBottom: `calc(1em - ${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: `${-marginOffset}px !important`,
-        marginBottom: `${-marginOffset}px !important`
+        marginTop: `${negativeMarginOffset} !important`,
+        marginBottom: `${negativeMarginOffset} !important`
       }
     },
     [`${componentCls}${componentCls}-edit-content`]: {
       [`${componentCls}-div&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: -marginOffset,
-        marginBottom: `calc(1em - ${marginOffset}px)`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        marginTop: negativeMarginOffset,
+        marginBottom: calc("1em").sub(marginOffset).equal()
       },
       [`${componentCls}-span&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: -marginOffset,
-        marginBottom: -marginOffset
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        marginTop: negativeMarginOffset,
+        marginBottom: negativeMarginOffset
       },
       [`${componentCls}-h1&, ${componentCls}-h2&, ${componentCls}-h3&, ${componentCls}-h4&, ${componentCls}-h5&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: `${-marginOffset}px !important`,
-        marginBottom: `${-marginOffset}px !important`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        marginTop: `${negativeMarginOffset} !important`,
+        marginBottom: `${negativeMarginOffset} !important`
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -31,7 +31,6 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "**/*.less",
     "**/*.css"
   ],
   "scripts": {
@@ -43,9 +42,9 @@
     "@inline-svg-unique-id/react": "^1.2.3",
     "@oceanbase/aliyun-theme": "^0.1.6",
     "@oceanbase/icons": "^1.0.0-alpha.0",
-    "@oceanbase/util": "^1.0.0-alpha.1",
+    "@oceanbase/util": "^1.0.0-alpha.2",
     "ahooks": "^2.10.14",
-    "antd": "^5.27.5",
+    "antd": "^5.29.1",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.13.0",
@@ -55,7 +54,7 @@
   "devDependencies": {
     "@ant-design/cssinjs-utils": "^1.1.3",
     "@babel/cli": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-env": "^7.28.5",
     "antd-token-previewer": "^2.0.8",
     "rc-select": "^14.16.8",
     "rc-slider": "^11.1.9",
@@ -66,5 +65,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "62c3cf2b25248d70e4f1826e69c019a38e03753e"
+  "gitHead": "c716061dd0da7a44ab09515d43972d2212e59d0f"
 }