@oceanbase/design 1.0.0-alpha.0 → 1.0.0-alpha.2

package/es/theme/style/default.less

@@ -1,20 +1,20 @@
 @blue: #0d6cf2;
 @purple: #722ED1;
 @cyan: #13C2C2;
-@green: #0ac185;
+@green: #14b781;
 @magenta: #EB2F96;
 @pink: #EB2F96;
-@red: #f93939;
+@red: #ef4343;
 @orange: #FA8C16;
-@yellow: #ffa21a;
+@yellow: #f49f25;
 @volcano: #FA541C;
 @geekblue: #2F54EB;
 @gold: #FAAD14;
 @lime: #A0D911;
 @colorPrimary: #0d6cf2;
-@colorSuccess: #0ac185;
-@colorWarning: #ffa21a;
-@colorError: #f93939;
+@colorSuccess: #14b781;
+@colorWarning: #f49f25;
+@colorError: #ef4343;
 @colorInfo: #0d6cf2;
 @colorLink: #0d6cf2;
 @colorTextBase: #000000;
@@ -38,7 +38,7 @@
 @sizeUnit: 4px;
 @sizeStep: 4px;
 @sizePopupArrow: 16px;
-@controlHeight: 32px;
+@controlHeight: 28px;
 @zIndexBase: 0;
 @zIndexPopupBase: 1000;
 @opacityImage: 1;
@@ -104,26 +104,26 @@
 @cyan9: #00474f;
 @cyan-10: #002329;
 @cyan10: #002329;
-@green-1: #e6fff2;
-@green1: #e6fff2;
-@green-2: #a9f5d1;
-@green2: #a9f5d1;
-@green-3: #7be8b9;
-@green3: #7be8b9;
-@green-4: #51dba4;
-@green4: #51dba4;
-@green-5: #2bcf93;
-@green5: #2bcf93;
-@green-6: #0ac185;
-@green6: #0ac185;
-@green-7: #009c6d;
-@green7: #009c6d;
-@green-8: #007556;
-@green8: #007556;
-@green-9: #004f3d;
-@green9: #004f3d;
-@green-10: #002921;
-@green10: #002921;
+@green-1: #e1f7ec;
+@green1: #e1f7ec;
+@green-2: #b0ebcf;
+@green2: #b0ebcf;
+@green-3: #83deb6;
+@green3: #83deb6;
+@green-4: #5ad1a1;
+@green4: #5ad1a1;
+@green-5: #35c490;
+@green5: #35c490;
+@green-6: #14b781;
+@green6: #14b781;
+@green-7: #099168;
+@green7: #099168;
+@green-8: #016b4f;
+@green8: #016b4f;
+@green-9: #004535;
+@green9: #004535;
+@green-10: #001f18;
+@green10: #001f18;
 @magenta-1: #fff0f6;
 @magenta1: #fff0f6;
 @magenta-2: #ffd6e7;
@@ -166,24 +166,24 @@
 @pink10: #520339;
 @red-1: #fff2f0;
 @red1: #fff2f0;
-@red-2: #ffe2de;
-@red2: #ffe2de;
-@red-3: #ffbcb5;
-@red3: #ffbcb5;
-@red-4: #ff948c;
-@red4: #ff948c;
-@red-5: #ff6963;
-@red5: #ff6963;
-@red-6: #f93939;
-@red6: #f93939;
-@red-7: #d4262c;
-@red7: #d4262c;
-@red-8: #ad1721;
-@red8: #ad1721;
-@red-9: #870b17;
-@red9: #870b17;
-@red-10: #610713;
-@red10: #610713;
+@red-2: #ffedeb;
+@red2: #ffedeb;
+@red-3: #ffc8c2;
+@red3: #ffc8c2;
+@red-4: #ffa099;
+@red4: #ffa099;
+@red-5: #fc746f;
+@red5: #fc746f;
+@red-6: #ef4343;
+@red6: #ef4343;
+@red-7: #c92e34;
+@red7: #c92e34;
+@red-8: #a31d26;
+@red8: #a31d26;
+@red-9: #7d101b;
+@red9: #7d101b;
+@red-10: #570a15;
+@red10: #570a15;
 @orange-1: #fff7e6;
 @orange1: #fff7e6;
 @orange-2: #ffe7ba;
@@ -204,26 +204,26 @@
 @orange9: #873800;
 @orange-10: #612500;
 @orange10: #612500;
-@yellow-1: #fff9e6;
-@yellow1: #fff9e6;
-@yellow-2: #ffedbd;
-@yellow2: #ffedbd;
-@yellow-3: #ffdf94;
-@yellow3: #ffdf94;
-@yellow-4: #ffce6b;
-@yellow4: #ffce6b;
-@yellow-5: #ffba42;
-@yellow5: #ffba42;
-@yellow-6: #ffa21a;
-@yellow6: #ffa21a;
-@yellow-7: #d9800b;
-@yellow7: #d9800b;
-@yellow-8: #b35f00;
-@yellow8: #b35f00;
-@yellow-9: #8c4600;
-@yellow9: #8c4600;
-@yellow-10: #663000;
-@yellow10: #663000;
+@yellow-1: #fffbf0;
+@yellow1: #fffbf0;
+@yellow-2: #fff0c9;
+@yellow2: #fff0c9;
+@yellow-3: #ffe1a1;
+@yellow3: #ffe1a1;
+@yellow-4: #ffd078;
+@yellow4: #ffd078;
+@yellow-5: #ffbc4f;
+@yellow5: #ffbc4f;
+@yellow-6: #f49f25;
+@yellow6: #f49f25;
+@yellow-7: #cf7b15;
+@yellow7: #cf7b15;
+@yellow-8: #a85b08;
+@yellow8: #a85b08;
+@yellow-9: #823f00;
+@yellow9: #823f00;
+@yellow-10: #5c2900;
+@yellow10: #5c2900;
 @volcano-1: #fff2e8;
 @volcano1: #fff2e8;
 @volcano-2: #ffd8bf;
@@ -331,56 +331,56 @@
 @colorPrimaryTextHover: #3690ff;
 @colorPrimaryText: #0d6cf2;
 @colorPrimaryTextActive: #004ecc;
-@colorSuccessBg: #eef8f5;
-@colorSuccessBgHover: #dbf0e9;
-@colorSuccessBorder: #b3e6d5;
-@colorSuccessBorderHover: #4dcca2;
-@colorSuccessHover: #4dcca2;
-@colorSuccessActive: #00b378;
-@colorSuccessTextHover: #4dcca2;
-@colorSuccessText: #0ac185;
-@colorSuccessTextActive: #00b378;
-@colorErrorBg: #ffebeb;
-@colorErrorBgHover: #ffd6d6;
-@colorErrorBgFilledHover: #ffd7d3;
-@colorErrorBgActive: #ffbcb5;
-@colorErrorBorder: #ffb3b3;
-@colorErrorBorderHover: #ff7575;
-@colorErrorHover: #ff7575;
-@colorErrorActive: #cc0000;
-@colorErrorTextHover: #ff7575;
-@colorErrorText: #ff1a1a;
-@colorErrorTextActive: #cc0000;
-@colorWarningBg: #fff5e5;
-@colorWarningBgHover: #ffe7c2;
-@colorWarningBorder: #ffd699;
-@colorWarningBorderHover: #ffc166;
-@colorWarningHover: #ffc166;
-@colorWarningActive: #ff9700;
-@colorWarningTextHover: #ffc166;
-@colorWarningText: #ffa21a;
-@colorWarningTextActive: #ff9700;
-@colorInfoBg: #e6f4ff;
+@colorSuccessBg: #e8f8f3;
+@colorSuccessBgHover: #b0ebcf;
+@colorSuccessBorder: #7ed7ba;
+@colorSuccessBorderHover: #5ad1a1;
+@colorSuccessHover: #5ad1a1;
+@colorSuccessActive: #099168;
+@colorSuccessTextHover: #35c490;
+@colorSuccessText: #096547;
+@colorSuccessTextActive: #099168;
+@colorErrorBg: #fdecec;
+@colorErrorBgHover: #ffedeb;
+@colorErrorBgFilledHover: #ffddd9;
+@colorErrorBgActive: #ffc8c2;
+@colorErrorBorder: #f69898;
+@colorErrorBorderHover: #ffa099;
+@colorErrorHover: #fc746f;
+@colorErrorActive: #c92e34;
+@colorErrorTextHover: #fc746f;
+@colorErrorText: #8a1b1b;
+@colorErrorTextActive: #c92e34;
+@colorWarningBg: #fef6e9;
+@colorWarningBgHover: #fff0c9;
+@colorWarningBorder: #f9cb87;
+@colorWarningBorderHover: #ffd078;
+@colorWarningHover: #ffd078;
+@colorWarningActive: #cf7b15;
+@colorWarningTextHover: #ffbc4f;
+@colorWarningText: #5b3600;
+@colorWarningTextActive: #cf7b15;
+@colorInfoBg: #eaf1ff;
 @colorInfoBgHover: #b0dbff;
-@colorInfoBorder: #87c5ff;
+@colorInfoBorder: #598cf3;
 @colorInfoBorderHover: #5eacff;
 @colorInfoHover: #5eacff;
 @colorInfoActive: #004ecc;
 @colorInfoTextHover: #3690ff;
-@colorInfoText: #0d6cf2;
+@colorInfoText: #083e8b;
 @colorInfoTextActive: #004ecc;
 @colorLinkHover: #5eacff;
 @colorLinkActive: #004ecc;
 @colorBgMask: rgba(19, 32, 57, 0.45);
 @colorWhite: #fff;
-@fontSizeSM: 11px;
-@fontSizeLG: 14px;
+@fontSizeSM: 12px;
+@fontSizeLG: 16px;
 @fontSizeXL: 18px;
-@fontSizeHeading1: 34px;
-@fontSizeHeading2: 28px;
-@fontSizeHeading3: 22px;
-@fontSizeHeading4: 18px;
-@fontSizeHeading5: 14px;
+@fontSizeHeading1: 24px;
+@fontSizeHeading2: 20px;
+@fontSizeHeading3: 18px;
+@fontSizeHeading4: 16px;
+@fontSizeHeading5: 13px;
 @lineHeight: 1.6153846153846154;
 @lineHeightLG: 1.5714285714285714;
 @lineHeightSM: 1.8;
@@ -401,9 +401,9 @@
 @sizeSM: 12px;
 @sizeXS: 8px;
 @sizeXXS: 4px;
-@controlHeightSM: 24px;
-@controlHeightXS: 16px;
-@controlHeightLG: 40px;
+@controlHeightSM: 21px;
+@controlHeightXS: 14px;
+@controlHeightLG: 35px;
 @motionDurationFast: 0.1s;
 @motionDurationMid: 0.2s;
 @motionDurationSlow: 0.3s;
@@ -412,6 +412,7 @@
 @borderRadiusSM: 2px;
 @borderRadiusLG: 8px;
 @borderRadiusOuter: 4px;
+@colorIcon: #8592ad;
 @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);
@@ -428,16 +429,15 @@
 @colorTextLabel: #5c6b8a;
 @colorTextDescription: #8592ad;
 @colorTextLightSolid: #fff;
-@colorHighlight: #f93939;
+@colorHighlight: #ef4343;
 @colorBgTextHover: #e2e8f3;
 @colorBgTextActive: #cdd5e4;
-@colorIcon: #8592ad;
 @colorIconHover: #132039;
-@colorErrorOutline: rgba(255,5,5,0.08);
-@colorWarningOutline: rgba(255,164,19,0.11);
-@fontSizeIcon: 11px;
+@colorErrorOutline: rgba(230,17,17,0.08);
+@colorWarningOutline: rgba(244,155,11,0.09);
+@fontSizeIcon: 12px;
 @controlOutlineWidth: 2px;
-@controlInteractiveSize: 16px;
+@controlInteractiveSize: 14px;
 @controlItemBgHover: #f3f6fc;
 @controlItemBgActive: #e6f4ff;
 @controlItemBgActiveHover: #b0dbff;

package/lib/badge/style/index.js

@@ -26,17 +26,15 @@ module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genBadgeStyle = (token) => {
   const { componentCls } = token;
-  const dotSize = token.fontSizeLG / 2;
   return {
     [`${componentCls}`]: {
-      // inherit color from parent instead of fixed colorText
-      color: "inherit"
+      // make status text inherit parent style
+      color: "inherit",
+      fontSize: "inherit"
     },
     [`${componentCls}${componentCls}-status`]: {
       // dot style
       [`${componentCls}-status-dot`]: {
-        width: dotSize,
-        height: dotSize,
         [`&${componentCls}-status-default`]: {
           backgroundColor: token.colorFill
         }
@@ -66,8 +64,9 @@ var genBadgeStyle = (token) => {
       },
       [`${componentCls}-status-text`]: {
         marginInlineStart: token.marginXS,
-        // inherit color from parent instead of fixed colorText
-        color: "inherit"
+        // inherit style from parent
+        color: "inherit",
+        fontSize: "inherit"
       }
     }
   };

package/lib/card/index.js

@@ -48,6 +48,7 @@ var Card = import_react.default.forwardRef(
     size,
     title,
     tabList,
+    tabProps,
     divided: outerDivided,
     prefixCls: customizePrefixCls,
     bodyStyle,
@@ -87,6 +88,10 @@ var Card = import_react.default.forwardRef(
           size,
           title,
           tabList: newTabList,
+          tabProps: {
+            size: "middle",
+            ...tabProps
+          },
           prefixCls: customizePrefixCls,
           bodyStyle,
           styles,

package/lib/card/style/index.js

@@ -62,6 +62,16 @@ var genCardStyle = (token) => {
       // nested Card style
       [`${componentCls}:not(${componentCls}-bordered):not(${componentCls}-type-inner)`]: {
         boxShadow: "none"
+      },
+      // nested Card border radius
+      [`${componentCls}`]: {
+        borderRadius: token.borderRadiusLG - 2,
+        [`${componentCls}`]: {
+          borderRadius: token.borderRadius,
+          [`${componentCls}`]: {
+            borderRadius: token.borderRadiusSM
+          }
+        }
       }
     },
     [`${componentCls}${componentCls}-no-divider`]: {

package/lib/descriptions/style/index.js

@@ -29,7 +29,7 @@ var genVerticalStyle = (size, token) => {
   const { componentCls } = token;
   const paddingMap = {
     default: {
-      paddingIn: token.paddingXS,
+      paddingIn: token.paddingXXS,
       paddingOut: token.paddingLG
     },
     middle: {
@@ -54,6 +54,11 @@ var genVerticalStyle = (size, token) => {
         [`& > th, & > td`]: {
           paddingBottom: paddingConfig.paddingOut
         }
+      },
+      [`${componentCls}-item`]: {
+        [`${componentCls}-item-label`]: {
+          fontSize: token.fontSizeSM
+        }
       }
     }
   };

package/lib/form/FormItem.d.ts

@@ -4,7 +4,7 @@ import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { TooltipProps } from '../tooltip';
 declare const AntFormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     useStatus: () => {
-        status?: "" | "warning" | "error" | "success" | "validating";
+        status?: "" | "error" | "warning" | "success" | "validating";
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

package/lib/table/style/index.js

@@ -91,9 +91,7 @@ var genTableStyle = (token) => {
           transition: `background ${token.motionDurationMid}`
         },
         // empty style
-        [`${componentCls}-placeholder td`]: {
-          borderBottom: "none"
-        },
+        [`${componentCls}-placeholder td`]: {},
         [`${componentCls}-empty-wrapper`]: {
           minHeight: 360 - token.paddingSM * 2,
           display: "flex",
@@ -143,7 +141,7 @@ var genTableStyle = (token) => {
         borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
       }
     },
-    // 带边框的表格样式
+    // 带内部边框的表格样式
     [`${componentCls}-wrapper${componentCls}-inner-bordered ${componentCls}-bordered`]: {
       [`${componentCls}-container`]: {
         borderInlineStart: "none",

package/lib/tabs/style/index.js

@@ -40,11 +40,10 @@ var genTabsStyle = (token) => {
         /** @deprecated */
         [`${componentCls}-tab-tag`]: {
           color: colorTextSecondary,
-          fontFamily: "PingFangSC",
           fontSize: 12,
           borderRadius: 12,
           marginInlineEnd: 0,
-          height: 20
+          height: token.controlHeightSM
         },
         [`${componentCls}-tab-badge`]: {
           [`>${antCls}-badge-count`]: {

package/lib/theme/default.js

@@ -27,11 +27,15 @@ var import_format = require("./util/format");
 var colorPrimary = "#0D6CF2";
 var colorPrimarySecondary = "#598CF3";
 var colorText = "#132039";
-var colorTextSecondary = "#5c6b8a";
+var colorTextSecondary = "#5C6B8A";
+var colorTextTertiary = "#8592AD";
+var colorTextQuaternary = "#C1CBE0";
+var colorFill = "#CDD5E4";
 var colorFillSecondary = "#E2E8F3";
 var colorFillTertiary = "#F3F6FC";
 var colorFillQuaternary = "#F8FAFE";
 var colorBorderSecondary = colorFillSecondary;
+var fontSizeSM = 12;
 var tagColorBorder = "#cdd5e466";
 var fontFamilyEn = `Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'`;
 var defaultTheme = {
@@ -42,53 +46,46 @@ var defaultTheme = {
     borderRadiusLG: 8,
     borderRadiusSM: 2,
     fontSize: 13,
-    fontSizeSM: 11,
+    fontSizeSM,
+    fontSizeLG: 16,
+    fontSizeHeading1: 24,
+    fontSizeHeading2: 20,
+    fontSizeHeading3: 18,
+    fontSizeHeading4: 16,
+    fontSizeHeading5: 13,
+    controlHeight: 28,
     colorPrimary,
     colorInfo: colorPrimary,
-    colorSuccess: "#0ac185",
-    colorSuccessBg: "#EEF8F5",
-    colorSuccessBgHover: "#dbf0e9",
-    colorSuccessBorder: "#B3E6D5",
-    colorSuccessBorderHover: "#4DCCA2",
-    colorSuccessHover: "#4DCCA2",
-    colorSuccessActive: "#00B378",
-    colorSuccessTextHover: "#4DCCA2",
-    colorSuccessText: "#0AC185",
-    colorSuccessTextActive: "#00B378",
-    colorWarning: "#FFA21A",
-    colorWarningBg: "#FFF5E5",
-    colorWarningBgHover: "#ffe7c2",
-    colorWarningBorder: "#FFD699",
-    colorWarningBorderHover: "#FFC166",
-    colorWarningHover: "#FFC166",
-    colorWarningActive: "#FF9700",
-    colorWarningTextHover: "#FFC166",
-    colorWarningText: "#FFA21A",
-    colorWarningTextActive: "#FF9700",
-    colorErrorBg: "#ffebeb",
-    colorErrorBgHover: "#ffd6d6",
-    colorErrorBorder: "#FFB3B3",
-    colorErrorBorderHover: "#ff7575",
-    colorErrorHover: "#ff7575",
-    colorErrorActive: "#CC0000",
-    colorErrorTextHover: "#ff7575",
-    colorErrorText: "#ff1a1a",
-    colorErrorTextActive: "#CC0000",
-    colorError: "#F93939",
+    colorInfoBorder: colorPrimarySecondary,
+    colorInfoBg: "#EAF1FF",
+    colorInfoText: "#083E8B",
+    colorSuccess: "#14B781",
+    colorSuccessBorder: "#7ED7BA",
+    colorSuccessBg: "#E8F8F3",
+    colorSuccessText: "#096547",
+    colorWarning: "#F49F25",
+    colorWarningBorder: "#F9CB87",
+    colorWarningBg: "#FEF6E9",
+    colorWarningText: "#5B3600",
+    colorError: "#EF4343",
+    colorErrorBorder: "#F69898",
+    colorErrorBg: "#FDECEC",
+    colorErrorText: "#8A1B1B",
     colorTextBase: "#000000",
     colorText,
     colorTextSecondary,
-    colorTextQuaternary: "#c1cbe0",
-    colorTextTertiary: "#8592AD",
+    colorTextTertiary,
+    colorTextQuaternary,
+    colorIcon: colorTextSecondary,
     colorBgBase: "#ffffff",
     colorBgContainer: "#ffffff",
     colorBgLayout: colorFillQuaternary,
-    colorBorder: "#CDD5E4",
+    colorBorder: colorFill,
     colorBorderSecondary,
-    colorFillQuaternary,
-    colorFillTertiary,
+    colorFill,
     colorFillSecondary,
-    colorFill: "#cdd5e4",
+    colorFillTertiary,
+    colorFillQuaternary,
     colorBgMask: "rgba(19, 32, 57, 0.45)",
     colorBgElevated: "#ffffff",
     colorBgSpotlight: "#ffffff",
@@ -100,19 +97,23 @@ var defaultTheme = {
     lineWidthFocus: 0
   },
   components: {
-    Badge: {
-      colorInfo: colorPrimarySecondary
-    },
     Breadcrumb: {
-      fontSize: 12,
+      fontSize: fontSizeSM,
       // @ts-ignore
       // fontHeight is internal token
       fontHeight: 20,
       lastItemColor: colorTextSecondary
     },
+    Card: {
+      headerFontSize: 16,
+      borderRadiusLG: 8
+    },
     Collapse: {
       colorBorder: colorBorderSecondary
     },
+    Descriptions: {
+      labelColor: colorTextSecondary
+    },
     InputNumber: {
       handleVisible: true
     },
@@ -137,6 +138,9 @@ var defaultTheme = {
       handleActiveColor: "#5189fb",
       handleColorDisabled: "#b3ccff"
     },
+    Skeleton: {
+      blockRadius: 4
+    },
     Tabs: {
       horizontalItemGutter: 24,
       itemActiveColor: colorText,
@@ -148,11 +152,11 @@ var defaultTheme = {
       colorBorder: tagColorBorder
     },
     Table: {
-      cellFontSize: 12,
+      cellFontSize: fontSizeSM,
       headerSplitColor: "transparent",
-      cellPaddingBlock: 12,
+      cellPaddingBlock: 8,
       cellPaddingInline: 16,
-      cellPaddingBlockMD: 8,
+      cellPaddingBlockMD: 6,
       cellPaddingBlockSM: 4,
       rowHoverBg: colorFillQuaternary,
       rowSelectedBg: colorFillQuaternary,
@@ -162,17 +166,15 @@ var defaultTheme = {
       colorBgSpotlight: "#ffffff",
       colorTextLightSolid: colorText
     },
-    Card: {
-      borderRadiusLG: 8
-    },
     Menu: {
       paddingContentVertical: 0,
       itemHeight: 30,
       itemBorderRadius: 4,
       // 80 means 50% opacity
-      itemSelectedBg: colorFillSecondary + "80",
       itemHoverBg: colorFillSecondary + "80",
-      itemColor: colorTextSecondary,
+      itemActiveBg: colorFillSecondary + "80",
+      itemSelectedBg: colorFillSecondary + "80",
+      itemColor: "#36496F",
       itemSelectedColor: colorText,
       itemMarginBlock: 6,
       groupTitleFontSize: 11