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

package/lib/theme/default.d.ts

@@ -1,4 +1,50 @@
-import type { ThemeConfig } from 'antd';
+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'";
-declare const _default: ThemeConfig;
+export declare const fontWeightWeakEn = 300;
+export declare const fontWeightEn = 500;
+export declare const fontWeightStrongEn = 600;
+declare const _default: import("antd").ThemeConfig;
 export default _default;

package/lib/theme/default.js

@@ -19,102 +19,371 @@ 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
+  fontFamilyEn: () => fontFamilyEn,
+  fontWeightEn: () => fontWeightEn,
+  fontWeightStrongEn: () => fontWeightStrongEn,
+  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 colorFillSecondary = "#E2E8F3";
-var colorFillTertiary = "#F3F6FC";
-var colorFillQuaternary = "#F8FAFE";
-var colorBorderSecondary = colorFillSecondary;
-var tagColorBorder = "#cdd5e466";
+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 colorBorder = gray5;
+var colorBorderSecondary = gray4;
+var fontSizeSM = 12;
+var tagColorBorder = gray6;
+var borderRadius = 4;
+var borderRadiusMD = 6;
+var borderRadiusLG = 8;
 var fontFamilyEn = `Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'`;
+var fontWeightWeakEn = 300;
+var fontWeightEn = 500;
+var fontWeightStrongEn = 600;
 var defaultTheme = {
   token: {
     fontFamily: `-apple-system, 'Noto Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
     fontFamilyCode: `Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`,
-    borderRadius: 4,
-    borderRadiusLG: 8,
+    fontWeightWeak: 400,
+    fontWeight: 400,
+    fontWeightStrong: 500,
     borderRadiusSM: 2,
+    borderRadius,
+    borderRadiusMD,
+    borderRadiusLG,
+    fontSizeSM,
     fontSize: 13,
-    fontSizeSM: 11,
+    lineHeightSM: 20 / 12,
+    lineHeight: 20 / 13,
+    lineHeightLG: 24 / 16,
+    fontHeight: 20,
+    fontSizeLG: 16,
+    fontSizeHeading1: 24,
+    fontSizeHeading2: 20,
+    fontSizeHeading3: 18,
+    fontSizeHeading4: 16,
+    fontSizeHeading5: 13,
+    lineHeightHeading1: 32 / 24,
+    lineHeightHeading2: 28 / 20,
+    lineHeightHeading3: 26 / 18,
+    lineHeightHeading4: 24 / 16,
+    lineHeightHeading5: 20 / 13,
+    controlHeightSM: 24,
+    controlHeight: 28,
+    colorLinkHover: blue5,
+    colorLinkActive: blue5,
     colorPrimary,
+    colorPrimaryBorder: blue3,
+    colorPrimaryBg: blue1,
+    colorPrimaryBgHover: blue2,
+    colorPrimaryHover: blue5,
+    colorPrimaryActive: blue5,
+    colorPrimaryText: blue6,
     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",
-    colorTextBase: "#000000",
+    colorInfoBorder: blue3,
+    colorInfoBg: blue1,
+    colorInfoBgHover: blue2,
+    colorInfoHover: blue5,
+    colorInfoActive: blue5,
+    colorInfoText: blue6,
+    colorSuccess: green4,
+    colorSuccessBorder: green3,
+    colorSuccessBg: green1,
+    colorSuccessBgHover: green2,
+    colorSuccessHover: green5,
+    colorSuccessActive: green5,
+    colorSuccessText: green6,
+    colorWarning: orange4,
+    colorWarningBorder: orange3,
+    colorWarningBg: orange1,
+    colorWarningBgHover: orange2,
+    colorWarningHover: orange5,
+    colorWarningActive: orange5,
+    colorWarningText: orange6,
+    colorError: red4,
+    colorErrorBorder: red3,
+    colorErrorBg: red1,
+    colorErrorBgHover: red2,
+    colorErrorHover: red5,
+    colorErrorActive: red5,
+    colorErrorText: red6,
+    colorFuchsia: fuchsia4,
+    colorFuchsiaBorder: fuchsia3,
+    colorFuchsiaBg: fuchsia1,
+    colorFuchsiaBgHover: fuchsia2,
+    colorFuchsiaHover: fuchsia5,
+    colorFuchsiaActive: fuchsia5,
+    colorFuchsiaText: fuchsia6,
+    colorTextBase: black,
     colorText,
     colorTextSecondary,
-    colorTextQuaternary: "#c1cbe0",
-    colorTextTertiary: "#8592AD",
-    colorBgBase: "#ffffff",
-    colorBgContainer: "#ffffff",
-    colorBgLayout: colorFillQuaternary,
-    colorBorder: "#CDD5E4",
+    colorTextTertiary,
+    colorTextQuaternary,
+    colorIcon: colorTextSecondary,
+    colorBgBase: white,
+    colorBgContainer: white,
+    colorBgLayout: gray1,
+    colorBgTextHover: gray2,
+    colorBgTextActive: gray3,
+    colorBorder,
     colorBorderSecondary,
-    colorFillQuaternary,
-    colorFillTertiary,
+    colorFill,
     colorFillSecondary,
-    colorFill: "#cdd5e4",
-    colorBgMask: "rgba(19, 32, 57, 0.45)",
-    colorBgElevated: "#ffffff",
-    colorBgSpotlight: "#ffffff",
+    colorFillTertiary,
+    colorFillQuaternary,
+    colorBgContainerDisabled: gray2,
+    colorBgMask: "rgba(19, 32, 57, 0.6)",
+    colorBgElevated: white,
+    colorBgSpotlight: white,
+    controlItemBgHover: gray2,
+    controlItemBgActive: gray2,
+    // 导航特殊色
+    colorNaviBg,
+    colorNaviBgHover,
+    // 阴影
     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,
+    "blue-1": blue1,
+    "blue-2": blue2,
+    "blue-3": blue3,
+    "blue-4": blue4,
+    "blue-5": blue5,
+    "blue-6": blue6,
+    // 绿色 Green
+    green1,
+    green2,
+    green3,
+    green4,
+    green5,
+    green6,
+    "green-1": green1,
+    "green-2": green2,
+    "green-3": green3,
+    "green-4": green4,
+    "green-5": green5,
+    "green-6": green6,
+    // 橙色 Orange
+    orange1,
+    orange2,
+    orange3,
+    orange4,
+    orange5,
+    orange6,
+    "orange-1": orange1,
+    "orange-2": orange2,
+    "orange-3": orange3,
+    "orange-4": orange4,
+    "orange-5": orange5,
+    "orange-6": orange6,
+    // 红色 Red
+    red1,
+    red2,
+    red3,
+    red4,
+    red5,
+    red6,
+    "red-1": red1,
+    "red-2": red2,
+    "red-3": red3,
+    "red-4": red4,
+    "red-5": red5,
+    "red-6": red6,
+    // 紫色 Fuchsia
+    fuchsia1,
+    fuchsia2,
+    fuchsia3,
+    fuchsia4,
+    fuchsia5,
+    fuchsia6
   },
   components: {
+    Alert: {
+      borderRadiusLG: borderRadiusMD
+    },
     Badge: {
-      colorInfo: colorPrimarySecondary
+      statusSize: 8
     },
     Breadcrumb: {
-      fontSize: 12,
-      // @ts-ignore
-      // fontHeight is internal token
+      fontSize: fontSizeSM,
       fontHeight: 20,
       lastItemColor: colorTextSecondary
     },
+    Button: {
+      iconGap: 4,
+      contentFontSizeSM: 12,
+      borderRadiusSM: 4,
+      borderRadius: 4,
+      borderRadiusLG: 4,
+      paddingInlineSM: 8,
+      paddingInline: 12,
+      paddingInlineLG: 12
+    },
+    Card: {
+      headerFontSize: 16,
+      borderRadiusLG
+    },
     Collapse: {
       colorBorder: colorBorderSecondary
     },
+    DatePicker: {
+      borderRadiusLG: borderRadiusMD,
+      colorTextQuaternary: gray7,
+      // work for TimePicker and DatePicker
+      hoverBorderColor: gray7,
+      activeBorderColor: gray7
+    },
+    Descriptions: {
+      labelColor: colorTextSecondary
+    },
+    Dropdown: {
+      borderRadiusLG: borderRadiusMD
+    },
+    Input: {
+      borderRadiusLG: borderRadiusMD,
+      colorTextQuaternary: gray8,
+      // work for Input, InputNumber and AutoComplete
+      hoverBorderColor: gray7,
+      activeBorderColor: gray7
+    },
     InputNumber: {
-      handleVisible: true
+      handleVisible: true,
+      borderRadiusLG: borderRadiusMD,
+      hoverBorderColor: gray7,
+      activeBorderColor: gray7
+    },
+    Message: {
+      borderRadiusLG: borderRadiusMD
+    },
+    Notification: {
+      borderRadiusLG: borderRadiusMD,
+      colorSuccessBg: white,
+      colorErrorBg: white,
+      colorInfoBg: white,
+      colorWarningBg: white
+    },
+    Popover: {
+      borderRadiusLG: borderRadiusMD
     },
     Progress: {
       defaultColor: colorPrimarySecondary
@@ -123,9 +392,16 @@ var defaultTheme = {
       // temporarily fix style for checked disabled Radio.Button
       controlItemBgActiveDisabled: colorFillSecondary
     },
+    Segmented: {
+      trackBg: colorFillTertiary
+    },
     Select: {
+      colorTextQuaternary: gray8,
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
-      multipleItemBg: colorFillQuaternary,
+      borderRadiusLG: borderRadiusMD,
+      hoverBorderColor: gray7,
+      activeBorderColor: gray7,
+      multipleItemBg: gray2,
       multipleItemBorderColor: tagColorBorder,
       multipleItemBorderColorDisabled: tagColorBorder
     },
@@ -137,45 +413,55 @@ var defaultTheme = {
       handleActiveColor: "#5189fb",
       handleColorDisabled: "#b3ccff"
     },
+    Skeleton: {
+      blockRadius: borderRadius
+    },
     Tabs: {
       horizontalItemGutter: 24,
       itemActiveColor: colorText,
       itemSelectedColor: colorText,
-      itemHoverColor: colorText
+      itemHoverColor: colorText,
+      horizontalItemPaddingSM: "12px 0",
+      horizontalItemPadding: "16px 0",
+      horizontalItemPaddingLG: "16px 0"
     },
     Tag: {
-      defaultColor: colorTextSecondary,
-      colorBorder: tagColorBorder
+      colorBorder: tagColorBorder,
+      borderRadiusSM: borderRadius
     },
     Table: {
-      cellFontSize: 12,
+      cellFontSize: fontSizeSM,
       headerSplitColor: "transparent",
-      cellPaddingBlock: 12,
+      cellPaddingBlock: 8,
       cellPaddingInline: 16,
-      cellPaddingBlockMD: 8,
+      cellPaddingBlockMD: 6,
+      cellPaddingInlineMD: 8,
       cellPaddingBlockSM: 4,
+      cellPaddingInlineSM: 6,
       rowHoverBg: colorFillQuaternary,
       rowSelectedBg: colorFillQuaternary,
       rowSelectedHoverBg: colorFillTertiary
     },
     Tooltip: {
-      colorBgSpotlight: "#ffffff",
+      borderRadius: borderRadiusMD,
+      colorBgSpotlight: white,
       colorTextLightSolid: colorText
     },
-    Card: {
-      borderRadiusLG: 8
-    },
+    Typography: {},
     Menu: {
+      borderRadiusLG: borderRadiusMD,
       paddingContentVertical: 0,
       itemHeight: 30,
-      itemBorderRadius: 4,
+      itemBorderRadius: borderRadius,
       // 80 means 50% opacity
-      itemSelectedBg: colorFillSecondary + "80",
-      itemHoverBg: colorFillSecondary + "80",
-      itemColor: colorTextSecondary,
+      itemHoverBg: gray3,
+      itemActiveBg: gray3,
+      itemSelectedBg: gray3,
+      itemColor: gray9,
       itemSelectedColor: colorText,
       itemMarginBlock: 6,
-      groupTitleFontSize: 11
+      groupTitleFontSize: 11,
+      groupTitleColor: colorTextSecondary
     }
   }
 };
@@ -191,5 +477,52 @@ defaultTheme.token = {
 var default_default = (0, import_format.formatTheme)(defaultTheme);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  fontFamilyEn
+  black,
+  blue1,
+  blue2,
+  blue3,
+  blue4,
+  blue5,
+  blue6,
+  colorNaviBg,
+  colorNaviBgHover,
+  fontFamilyEn,
+  fontWeightEn,
+  fontWeightStrongEn,
+  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
 });