@oceanbase/design 1.0.0-alpha.8 → 1.0.0-alpha.9

package/lib/table/index.js

@@ -65,6 +65,7 @@ function Table(props, ref) {
     collapseText,
     openText,
     expandable,
+    scroll,
     hiddenCancelBtn = false,
     prefixCls: customizePrefixCls,
     className
@@ -130,6 +131,7 @@ function Table(props, ref) {
     }
     return item;
   });
+  const hasEllipsisColumn = newColumns.some((item) => item.ellipsis);
   const handleSelectedData = (selectedRowKeys, selectedRows, info) => {
     setCurrentSelectedRowKeys(selectedRowKeys);
     setCurrentSelectedRows(selectedRows);
@@ -224,6 +226,11 @@ function Table(props, ref) {
             (_a2 = rowSelection == null ? void 0 : rowSelection.onChange) == null ? void 0 : _a2.call(rowSelection, selectedRowKeys, selectedRows, info);
           }
         } : void 0,
+        scroll: {
+          // enable auto x scroll when there is no ellipsis column
+          x: hasEllipsisColumn ? void 0 : "max-content",
+          ...scroll
+        },
         footer,
         pagination: pagination === false ? false : {
           ...pagination,

package/lib/table/style/index.js

@@ -29,6 +29,7 @@ var genTableStyle = (token) => {
   const {
     antCls,
     componentCls,
+    iconCls,
     colorText,
     colorBgBase,
     colorTextSecondary,
@@ -76,6 +77,10 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody-virtual-scrollbar ${componentCls}-tbody-virtual-scrollbar-thumb`]: {
           background: `${token.colorFillSecondary} !important`
         },
+        // for custom expand icon
+        [`${componentCls}-row-indent+${iconCls}`]: {
+          marginInlineEnd: token.marginXS
+        },
         // expandRowByClick 行样式
         [`tr${componentCls}-expand-row-by-click`]: {
           cursor: "pointer"
@@ -209,12 +214,16 @@ var genTableStyle = (token) => {
               marginLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).equal()
             },
             [`& > *${componentCls}-expanded-row-fixed`]: {
-              paddingLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.padding).equal()
+              paddingLeft: calc(token.marginXL).add(calc(token.lineWidth).mul(2).equal()).add(token.padding).equal(),
+              margin: `-${(0, import_cssinjs.unit)(token.marginXS)} -${(0, import_cssinjs.unit)(token.margin)}`
             }
           },
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
             marginLeft: calc(token.margin).add(calc(token.lineWidth).mul(2).equal()).equal()
+          },
+          [`tr > td > ${componentCls}-expanded-row-fixed > ${componentCls}-wrapper:only-child ${componentCls}`]: {
+            marginLeft: -token.padding
           }
         }
       },

package/lib/tag/style/index.js

@@ -42,6 +42,7 @@ var genTagStyle = (token) => {
   const { antCls, componentCls, iconCls } = token;
   return {
     [`${componentCls}`]: {
+      lineHeight: token.lineHeight,
       paddingInline: token.paddingXS,
       fontSize: token.fontSizeSM,
       [`&:not(${componentCls}-pill)`]: {
@@ -72,7 +73,6 @@ var genTagStyle = (token) => {
       },
       ["&-pill"]: {
         borderRadius: 100,
-        lineHeight: token.lineHeight,
         marginInlineEnd: token.marginXXS
       }
     }

package/lib/theme/default.d.ts

@@ -1,3 +1,47 @@
+export declare const white = "#ffffff";
+export declare const gray1 = "#fbfcfe";
+export declare const gray2 = "#f5f7fc";
+export declare const gray3 = "#ebeff7";
+export declare const gray4 = "#e2e8f3";
+export declare const gray5 = "#cdd5e4";
+export declare const gray6 = "#b6c0d4";
+export declare const gray7 = "#8592ad";
+export declare const gray8 = "#5c6b8a";
+export declare const gray9 = "#3b4a69";
+export declare const gray10 = "#132039";
+export declare const black = "#000000";
+export declare const blue1 = "#f3f8fe";
+export declare const blue2 = "#b3d3ff";
+export declare const blue3 = "#619ef3";
+export declare const blue4 = "#0d6cf2";
+export declare const blue5 = "#0852bb";
+export declare const blue6 = "#0d3c80";
+export declare const green1 = "#f5faf8";
+export declare const green2 = "#b3e6d5";
+export declare const green3 = "#79d1b4";
+export declare const green4 = "#16b882";
+export declare const green5 = "#0a8c61";
+export declare const green6 = "#09593f";
+export declare const orange1 = "#fff9ee";
+export declare const orange2 = "#ffe7c2";
+export declare const orange3 = "#fac373";
+export declare const orange4 = "#f49f25";
+export declare const orange5 = "#ac690b";
+export declare const orange6 = "#6c4408";
+export declare const red1 = "#fff2f2";
+export declare const red2 = "#ffd6d6";
+export declare const red3 = "#f69898";
+export declare const red4 = "#eb4242";
+export declare const red5 = "#b52727";
+export declare const red6 = "#8a1b1b";
+export declare const fuchsia1 = "#faf0fc";
+export declare const fuchsia2 = "#e8caee";
+export declare const fuchsia3 = "#d88ee7";
+export declare const fuchsia4 = "#b04ec4";
+export declare const fuchsia5 = "#802792";
+export declare const fuchsia6 = "#580e67";
+export declare const colorNaviBg = "#f1f6ff";
+export declare const colorNaviBgHover = "#e8effb";
 export declare const fontFamilyEn = "Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'";
 export declare const fontWeightWeakEn = 300;
 export declare const fontWeightEn = 500;

package/lib/theme/default.js

@@ -19,24 +19,112 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/theme/default.ts
 var default_exports = {};
 __export(default_exports, {
+  black: () => black,
+  blue1: () => blue1,
+  blue2: () => blue2,
+  blue3: () => blue3,
+  blue4: () => blue4,
+  blue5: () => blue5,
+  blue6: () => blue6,
+  colorNaviBg: () => colorNaviBg,
+  colorNaviBgHover: () => colorNaviBgHover,
   default: () => default_default,
   fontFamilyEn: () => fontFamilyEn,
   fontWeightEn: () => fontWeightEn,
   fontWeightStrongEn: () => fontWeightStrongEn,
-  fontWeightWeakEn: () => fontWeightWeakEn
+  fontWeightWeakEn: () => fontWeightWeakEn,
+  fuchsia1: () => fuchsia1,
+  fuchsia2: () => fuchsia2,
+  fuchsia3: () => fuchsia3,
+  fuchsia4: () => fuchsia4,
+  fuchsia5: () => fuchsia5,
+  fuchsia6: () => fuchsia6,
+  gray1: () => gray1,
+  gray10: () => gray10,
+  gray2: () => gray2,
+  gray3: () => gray3,
+  gray4: () => gray4,
+  gray5: () => gray5,
+  gray6: () => gray6,
+  gray7: () => gray7,
+  gray8: () => gray8,
+  gray9: () => gray9,
+  green1: () => green1,
+  green2: () => green2,
+  green3: () => green3,
+  green4: () => green4,
+  green5: () => green5,
+  green6: () => green6,
+  orange1: () => orange1,
+  orange2: () => orange2,
+  orange3: () => orange3,
+  orange4: () => orange4,
+  orange5: () => orange5,
+  orange6: () => orange6,
+  red1: () => red1,
+  red2: () => red2,
+  red3: () => red3,
+  red4: () => red4,
+  red5: () => red5,
+  red6: () => red6,
+  white: () => white
 });
 module.exports = __toCommonJS(default_exports);
 var import_format = require("./util/format");
-var colorPrimary = "#0D6CF2";
-var colorPrimarySecondary = "#598CF3";
-var colorText = "#132039";
-var colorTextSecondary = "#5C6B8A";
-var colorTextTertiary = "#8592AD";
-var colorTextQuaternary = "#B6C0D4";
-var colorFill = "#CDD5E4";
-var colorFillSecondary = "#E2E8F3";
-var colorFillTertiary = "#EBEFF7";
-var colorFillQuaternary = "#F5F7FC";
+var white = "#ffffff";
+var gray1 = "#fbfcfe";
+var gray2 = "#f5f7fc";
+var gray3 = "#ebeff7";
+var gray4 = "#e2e8f3";
+var gray5 = "#cdd5e4";
+var gray6 = "#b6c0d4";
+var gray7 = "#8592ad";
+var gray8 = "#5c6b8a";
+var gray9 = "#3b4a69";
+var gray10 = "#132039";
+var black = "#000000";
+var blue1 = "#f3f8fe";
+var blue2 = "#b3d3ff";
+var blue3 = "#619ef3";
+var blue4 = "#0d6cf2";
+var blue5 = "#0852bb";
+var blue6 = "#0d3c80";
+var green1 = "#f5faf8";
+var green2 = "#b3e6d5";
+var green3 = "#79d1b4";
+var green4 = "#16b882";
+var green5 = "#0a8c61";
+var green6 = "#09593f";
+var orange1 = "#fff9ee";
+var orange2 = "#ffe7c2";
+var orange3 = "#fac373";
+var orange4 = "#f49f25";
+var orange5 = "#ac690b";
+var orange6 = "#6c4408";
+var red1 = "#fff2f2";
+var red2 = "#ffd6d6";
+var red3 = "#f69898";
+var red4 = "#eb4242";
+var red5 = "#b52727";
+var red6 = "#8a1b1b";
+var fuchsia1 = "#faf0fc";
+var fuchsia2 = "#e8caee";
+var fuchsia3 = "#d88ee7";
+var fuchsia4 = "#b04ec4";
+var fuchsia5 = "#802792";
+var fuchsia6 = "#580e67";
+var colorNaviBg = "#f1f6ff";
+var colorNaviBgHover = "#e8effb";
+var colorPrimary = blue4;
+var colorPrimarySecondary = "#598cf3";
+var colorText = gray10;
+var colorTextSecondary = gray8;
+var colorTextTertiary = gray7;
+var colorTextQuaternary = gray6;
+var colorFill = gray5;
+var colorFillSecondary = gray4;
+var colorFillTertiary = gray3;
+var colorFillQuaternary = gray2;
 var colorBorderSecondary = colorFillSecondary;
 var fontSizeSM = 12;
 var tagColorBorder = colorTextQuaternary;
@@ -72,36 +160,36 @@ var defaultTheme = {
     controlHeight: 28,
     colorPrimary,
     colorInfo: colorPrimary,
-    colorInfoBorder: "#619EF3",
-    colorInfoBg: "#F3F8FE",
-    colorInfoHover: "#0852BB",
-    colorInfoActive: "#0852BB",
-    colorInfoText: "#0D3C80",
-    colorSuccess: "#16B882",
-    colorSuccessBorder: "#79D1B4",
-    colorSuccessBg: "#F5FAF8",
-    colorSuccessText: "#09593F",
-    colorWarning: "#F49F25",
-    colorWarningBorder: "#FAC373",
-    colorWarningBg: "#FFF9EE",
-    colorWarningText: "#6C4408",
-    colorError: "#EB4242",
-    colorErrorBorder: "#F69898",
-    colorErrorBg: "#FFF2F2",
-    colorErrorText: "#8A1B1B",
-    colorFuchsia: "#B04EC4",
-    colorFuchsiaBorder: "#D88EE7",
-    colorFuchsiaBg: "#FAF0FC",
-    colorFuchsiaText: "#580E67",
-    colorTextBase: "#000000",
+    colorInfoBorder: blue3,
+    colorInfoBg: blue1,
+    colorInfoHover: blue5,
+    colorInfoActive: blue5,
+    colorInfoText: blue6,
+    colorSuccess: green4,
+    colorSuccessBorder: green3,
+    colorSuccessBg: green1,
+    colorSuccessText: green6,
+    colorWarning: orange4,
+    colorWarningBorder: orange3,
+    colorWarningBg: orange1,
+    colorWarningText: orange6,
+    colorError: red4,
+    colorErrorBorder: red3,
+    colorErrorBg: red1,
+    colorErrorText: red6,
+    colorFuchsia: fuchsia4,
+    colorFuchsiaBorder: fuchsia3,
+    colorFuchsiaBg: fuchsia1,
+    colorFuchsiaText: fuchsia6,
+    colorTextBase: black,
     colorText,
     colorTextSecondary,
     colorTextTertiary,
     colorTextQuaternary,
     colorIcon: colorTextSecondary,
-    colorBgBase: "#ffffff",
-    colorBgContainer: "#ffffff",
-    colorBgLayout: "#FBFCFE",
+    colorBgBase: white,
+    colorBgContainer: white,
+    colorBgLayout: gray1,
     colorBorder: colorFill,
     colorBorderSecondary,
     colorFill,
@@ -110,14 +198,66 @@ var defaultTheme = {
     colorFillQuaternary,
     colorBgContainerDisabled: colorFillTertiary,
     colorBgMask: "rgba(19, 32, 57, 0.6)",
-    colorBgElevated: "#ffffff",
-    colorBgSpotlight: "#ffffff",
+    colorBgElevated: white,
+    colorBgSpotlight: white,
     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)",
     wireframe: false,
     // Remove focus outline
-    lineWidthFocus: 0
+    lineWidthFocus: 0,
+    // ==================== 基础颜色 Token ====================
+    // 黑白色
+    white,
+    black,
+    // 中性色 Neutral
+    gray1,
+    gray2,
+    gray3,
+    gray4,
+    gray5,
+    gray6,
+    gray7,
+    gray8,
+    gray9,
+    // 蓝色 Blue
+    blue1,
+    blue2,
+    blue3,
+    blue4,
+    blue5,
+    blue6,
+    // 绿色 Green
+    green1,
+    green2,
+    green3,
+    green4,
+    green5,
+    green6,
+    // 橙色 Orange
+    orange1,
+    orange2,
+    orange3,
+    orange4,
+    orange5,
+    orange6,
+    // 红色 Red
+    red1,
+    red2,
+    red3,
+    red4,
+    red5,
+    red6,
+    // 紫色 Fuchsia
+    fuchsia1,
+    fuchsia2,
+    fuchsia3,
+    fuchsia4,
+    fuchsia5,
+    fuchsia6,
+    // 导航特殊色
+    colorNaviBg,
+    colorNaviBgHover
   },
   components: {
     Alert: {
@@ -132,6 +272,7 @@ var defaultTheme = {
       lastItemColor: colorTextSecondary
     },
     Button: {
+      iconGap: 4,
       contentFontSizeSM: 12,
       borderRadiusSM: 4,
       borderRadius: 4,
@@ -198,7 +339,10 @@ var defaultTheme = {
       horizontalItemGutter: 24,
       itemActiveColor: colorText,
       itemSelectedColor: colorText,
-      itemHoverColor: colorText
+      itemHoverColor: colorText,
+      horizontalItemPaddingSM: "12px 0",
+      horizontalItemPadding: "16px 0",
+      horizontalItemPaddingLG: "16px 0"
     },
     Tag: {
       colorBorder: tagColorBorder,
@@ -210,14 +354,16 @@ var defaultTheme = {
       cellPaddingBlock: 8,
       cellPaddingInline: 16,
       cellPaddingBlockMD: 6,
+      cellPaddingInlineMD: 8,
       cellPaddingBlockSM: 4,
+      cellPaddingInlineSM: 6,
       rowHoverBg: colorFillQuaternary,
       rowSelectedBg: colorFillQuaternary,
       rowSelectedHoverBg: colorFillTertiary
     },
     Tooltip: {
       borderRadius: borderRadiusMD,
-      colorBgSpotlight: "#ffffff",
+      colorBgSpotlight: white,
       colorTextLightSolid: colorText
     },
     Menu: {
@@ -249,8 +395,52 @@ defaultTheme.token = {
 var default_default = (0, import_format.formatTheme)(defaultTheme);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  black,
+  blue1,
+  blue2,
+  blue3,
+  blue4,
+  blue5,
+  blue6,
+  colorNaviBg,
+  colorNaviBgHover,
   fontFamilyEn,
   fontWeightEn,
   fontWeightStrongEn,
-  fontWeightWeakEn
+  fontWeightWeakEn,
+  fuchsia1,
+  fuchsia2,
+  fuchsia3,
+  fuchsia4,
+  fuchsia5,
+  fuchsia6,
+  gray1,
+  gray10,
+  gray2,
+  gray3,
+  gray4,
+  gray5,
+  gray6,
+  gray7,
+  gray8,
+  gray9,
+  green1,
+  green2,
+  green3,
+  green4,
+  green5,
+  green6,
+  orange1,
+  orange2,
+  orange3,
+  orange4,
+  orange5,
+  orange6,
+  red1,
+  red2,
+  red3,
+  red4,
+  red5,
+  red6,
+  white
 });

package/lib/theme/interface.d.ts

@@ -59,6 +59,49 @@ export interface AliasToken extends AntAliasToken {
      * @descEN The text color of the critical error state.
      */
     colorFuchsiaText: string;
+    white: string;
+    black: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    green6: string;
+    orange1: string;
+    orange2: string;
+    orange3: string;
+    orange4: string;
+    orange5: string;
+    orange6: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    red4: string;
+    red5: string;
+    red6: string;
+    fuchsia1: string;
+    fuchsia2: string;
+    fuchsia3: string;
+    fuchsia4: string;
+    fuchsia5: string;
+    fuchsia6: string;
+    colorNaviBg: string;
+    colorNaviBgHover: string;
 }
 /** Final token which contains the components level override */
 export type GlobalToken = GlobalTokenTypeUtil<ComponentTokenMap, AliasToken>;

package/lib/theme/style/compact.less

@@ -45,17 +45,17 @@
 @wireframe: false;
 @motion: true;
 @blue-1: #e6f4ff;
-@blue1: #e6f4ff;
+@blue1: #f3f8fe;
 @blue-2: #b0dbff;
-@blue2: #b0dbff;
+@blue2: #b3d3ff;
 @blue-3: #87c5ff;
-@blue3: #87c5ff;
+@blue3: #619ef3;
 @blue-4: #5eacff;
-@blue4: #5eacff;
+@blue4: #0d6cf2;
 @blue-5: #3690ff;
-@blue5: #3690ff;
+@blue5: #0852bb;
 @blue-6: #0d6cf2;
-@blue6: #0d6cf2;
+@blue6: #0d3c80;
 @blue-7: #004ecc;
 @blue7: #004ecc;
 @blue-8: #003aa6;
@@ -105,17 +105,17 @@
 @cyan-10: #002329;
 @cyan10: #002329;
 @green-1: #e4f7ed;
-@green1: #e4f7ed;
+@green1: #f5faf8;
 @green-2: #b2ebd0;
-@green2: #b2ebd0;
+@green2: #b3e6d5;
 @green-3: #85deb7;
-@green3: #85deb7;
+@green3: #79d1b4;
 @green-4: #5cd1a2;
-@green4: #5cd1a2;
+@green4: #16b882;
 @green-5: #37c491;
-@green5: #37c491;
+@green5: #0a8c61;
 @green-6: #16b882;
-@green6: #16b882;
+@green6: #09593f;
 @green-7: #0a9169;
 @green7: #0a9169;
 @green-8: #026b4f;
@@ -165,17 +165,17 @@
 @pink-10: #520339;
 @pink10: #520339;
 @red-1: #fff2f0;
-@red1: #fff2f0;
+@red1: #fff2f2;
 @red-2: #ffedeb;
-@red2: #ffedeb;
+@red2: #ffd6d6;
 @red-3: #ffc8c2;
-@red3: #ffc8c2;
+@red3: #f69898;
 @red-4: #ffa099;
-@red4: #ffa099;
+@red4: #eb4242;
 @red-5: #f7716d;
-@red5: #f7716d;
+@red5: #b52727;
 @red-6: #eb4242;
-@red6: #eb4242;
+@red6: #8a1b1b;
 @red-7: #c42d32;
 @red7: #c42d32;
 @red-8: #9e1c25;
@@ -185,17 +185,17 @@
 @red-10: #520a13;
 @red10: #520a13;
 @orange-1: #fff7e6;
-@orange1: #fff7e6;
+@orange1: #fff9ee;
 @orange-2: #ffe7ba;
-@orange2: #ffe7ba;
+@orange2: #ffe7c2;
 @orange-3: #ffd591;
-@orange3: #ffd591;
+@orange3: #fac373;
 @orange-4: #ffc069;
-@orange4: #ffc069;
+@orange4: #f49f25;
 @orange-5: #ffa940;
-@orange5: #ffa940;
+@orange5: #ac690b;
 @orange-6: #fa8c16;
-@orange6: #fa8c16;
+@orange6: #6c4408;
 @orange-7: #d46b08;
 @orange7: #d46b08;
 @orange-8: #ad4e00;
@@ -426,6 +426,25 @@
 @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;
+@white: #ffffff;
+@black: #000000;
+@gray1: #fbfcfe;
+@gray2: #f5f7fc;
+@gray3: #ebeff7;
+@gray4: #e2e8f3;
+@gray5: #cdd5e4;
+@gray6: #b6c0d4;
+@gray7: #8592ad;
+@gray8: #5c6b8a;
+@gray9: #3b4a69;
+@fuchsia1: #faf0fc;
+@fuchsia2: #e8caee;
+@fuchsia3: #d88ee7;
+@fuchsia4: #b04ec4;
+@fuchsia5: #802792;
+@fuchsia6: #580e67;
+@colorNaviBg: #f1f6ff;
+@colorNaviBgHover: #e8effb;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
 @colorFillAlter: #f5f7fc;