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

package/lib/theme/dark.d.ts

@@ -1,52 +1,5 @@
 declare const darkTheme: {
-    token: {
-        colorPrimary: string;
-        colorSuccess: string;
-        colorWarning: string;
-        colorError: string;
-        colorInfo: string;
-        colorTextBase: string;
-        colorBgBase: string;
-        colorLink: string;
-        fontFamily: string;
-        fontFamilyCode: string;
-        fontSize: number;
-        lineWidth: number;
-        lineType: string;
-        borderRadius: number;
-        sizeUnit: number;
-        sizeStep: number;
-        sizePopupArrow: number;
-        controlHeight: number;
-        zIndexBase: number;
-        zIndexPopupBase: number;
-        opacityImage: number;
-        motionUnit: number;
-        motionBase: number;
-        motionEaseOutCirc: string;
-        motionEaseInOutCirc: string;
-        motionEaseInOut: string;
-        motionEaseOutBack: string;
-        motionEaseInBack: string;
-        motionEaseInQuint: string;
-        motionEaseOutQuint: string;
-        motionEaseOut: string;
-        wireframe: boolean;
-        motion: boolean;
-        blue: string;
-        purple: string;
-        cyan: string;
-        green: string;
-        magenta: string;
-        pink: string;
-        red: string;
-        orange: string;
-        yellow: string;
-        volcano: string;
-        geekblue: string;
-        lime: string;
-        gold: string;
-    };
+    token: import("antd/es/theme/internal").SeedToken;
     components: {
         InputNumber: {
             handleVisible: boolean;

package/lib/theme/default.d.ts

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

package/lib/theme/default.js

@@ -20,7 +20,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var default_exports = {};
 __export(default_exports, {
   default: () => default_default,
-  fontFamilyEn: () => fontFamilyEn
+  fontFamilyEn: () => fontFamilyEn,
+  fontWeightEn: () => fontWeightEn,
+  fontWeightStrongEn: () => fontWeightStrongEn,
+  fontWeightWeakEn: () => fontWeightWeakEn
 });
 module.exports = __toCommonJS(default_exports);
 var import_format = require("./util/format");
@@ -29,40 +32,64 @@ var colorPrimarySecondary = "#598CF3";
 var colorText = "#132039";
 var colorTextSecondary = "#5C6B8A";
 var colorTextTertiary = "#8592AD";
-var colorTextQuaternary = "#C1CBE0";
+var colorTextQuaternary = "#B6C0D4";
 var colorFill = "#CDD5E4";
 var colorFillSecondary = "#E2E8F3";
-var colorFillTertiary = "#F3F6FC";
-var colorFillQuaternary = "#F8FAFE";
+var colorFillTertiary = "#EFF3FA";
+var colorFillQuaternary = "#F7F9FC";
 var colorBorderSecondary = colorFillSecondary;
-var tagColorBorder = "#cdd5e466";
+var fontSizeSM = 12;
+var tagColorBorder = colorTextQuaternary;
 var fontFamilyEn = `Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'`;
+var fontWeightWeakEn = 400;
+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: 6,
+    fontWeightWeak: 400,
+    fontWeight: 400,
+    fontWeightStrong: 500,
     borderRadiusSM: 2,
+    borderRadius: 4,
+    borderRadiusMD: 6,
+    borderRadiusLG: 8,
+    fontSizeSM,
     fontSize: 13,
-    fontSizeSM: 12,
+    lineHeight: 20 / 13,
+    fontHeight: 20,
+    fontSizeLG: 16,
+    fontSizeHeading1: 24,
+    fontSizeHeading2: 20,
+    fontSizeHeading3: 18,
+    fontSizeHeading4: 16,
+    fontSizeHeading5: 13,
+    controlHeightSM: 24,
+    controlHeight: 28,
     colorPrimary,
     colorInfo: colorPrimary,
-    colorInfoBorder: "#598CF3",
-    colorInfoBg: "#EAF1FF",
-    colorInfoText: "#083E8B",
-    colorSuccess: "#14B781",
-    colorSuccessBorder: "#7ED7BA",
-    colorSuccessBg: "#E8F8F3",
-    colorSuccessText: "#096547",
+    colorInfoBorder: "#619EF3",
+    colorInfoBg: "#F3F8FE",
+    colorInfoHover: "#0852BB",
+    colorInfoActive: "#0852BB",
+    colorInfoText: "#0D3C80",
+    colorSuccess: "#16B882",
+    colorSuccessBorder: "#79D1B4",
+    colorSuccessBg: "#F5FAF8",
+    colorSuccessText: "#09593F",
     colorWarning: "#F49F25",
-    colorWarningBorder: "#F9CB87",
-    colorWarningBg: "#FEF6E9",
-    colorWarningText: "#5B3600",
-    colorError: "#EF4343",
+    colorWarningBorder: "#FAC373",
+    colorWarningBg: "#FFF9EE",
+    colorWarningText: "#6C4408",
+    colorError: "#EB4242",
     colorErrorBorder: "#F69898",
-    colorErrorBg: "#FDECEC",
+    colorErrorBg: "#FFF2F2",
     colorErrorText: "#8A1B1B",
+    colorFuchsia: "#B04EC4",
+    colorFuchsiaBorder: "#D88EE7",
+    colorFuchsiaBg: "#FAF0FC",
+    colorFuchsiaText: "#580E67",
     colorTextBase: "#000000",
     colorText,
     colorTextSecondary,
@@ -78,7 +105,8 @@ var defaultTheme = {
     colorFillSecondary,
     colorFillTertiary,
     colorFillQuaternary,
-    colorBgMask: "rgba(19, 32, 57, 0.45)",
+    colorBgContainerDisabled: colorFillTertiary,
+    colorBgMask: "rgba(19, 32, 57, 0.6)",
     colorBgElevated: "#ffffff",
     colorBgSpotlight: "#ffffff",
     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)",
@@ -89,16 +117,20 @@ var defaultTheme = {
     lineWidthFocus: 0
   },
   components: {
-    Badge: {
-      colorInfo: colorPrimarySecondary
-    },
     Breadcrumb: {
-      fontSize: 12,
-      // @ts-ignore
-      // fontHeight is internal token
+      fontSize: fontSizeSM,
       fontHeight: 20,
       lastItemColor: colorTextSecondary
     },
+    Button: {
+      contentFontSizeSM: 12,
+      borderRadiusSM: 4,
+      borderRadius: 4,
+      borderRadiusLG: 4,
+      paddingInlineSM: 8,
+      paddingInline: 12,
+      paddingInlineLG: 12
+    },
     Card: {
       headerFontSize: 16,
       borderRadiusLG: 8
@@ -106,6 +138,9 @@ var defaultTheme = {
     Collapse: {
       colorBorder: colorBorderSecondary
     },
+    Descriptions: {
+      labelColor: colorTextSecondary
+    },
     InputNumber: {
       handleVisible: true
     },
@@ -116,6 +151,9 @@ var defaultTheme = {
       // temporarily fix style for checked disabled Radio.Button
       controlItemBgActiveDisabled: colorFillSecondary
     },
+    Segmented: {
+      trackBg: colorFillTertiary
+    },
     Select: {
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
       multipleItemBg: colorFillQuaternary,
@@ -130,6 +168,9 @@ var defaultTheme = {
       handleActiveColor: "#5189fb",
       handleColorDisabled: "#b3ccff"
     },
+    Skeleton: {
+      blockRadius: 4
+    },
     Tabs: {
       horizontalItemGutter: 24,
       itemActiveColor: colorText,
@@ -137,15 +178,15 @@ var defaultTheme = {
       itemHoverColor: colorText
     },
     Tag: {
-      defaultColor: colorTextSecondary,
-      colorBorder: tagColorBorder
+      colorBorder: tagColorBorder,
+      borderRadiusSM: 4
     },
     Table: {
-      cellFontSize: 12,
+      cellFontSize: fontSizeSM,
       headerSplitColor: "transparent",
-      cellPaddingBlock: 12,
+      cellPaddingBlock: 8,
       cellPaddingInline: 16,
-      cellPaddingBlockMD: 8,
+      cellPaddingBlockMD: 6,
       cellPaddingBlockSM: 4,
       rowHoverBg: colorFillQuaternary,
       rowSelectedBg: colorFillQuaternary,
@@ -166,7 +207,8 @@ var defaultTheme = {
       itemColor: "#36496F",
       itemSelectedColor: colorText,
       itemMarginBlock: 6,
-      groupTitleFontSize: 11
+      groupTitleFontSize: 11,
+      groupTitleColor: colorTextSecondary
     }
   }
 };
@@ -182,5 +224,8 @@ defaultTheme.token = {
 var default_default = (0, import_format.formatTheme)(defaultTheme);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  fontFamilyEn
+  fontFamilyEn,
+  fontWeightEn,
+  fontWeightStrongEn,
+  fontWeightWeakEn
 });

package/lib/theme/index.d.ts

@@ -1,71 +1,34 @@
 /// <reference types="react" />
+import { theme } from 'antd';
+import type { Theme } from '@ant-design/cssinjs';
+import type { SeedToken } from 'antd/lib/theme/interface';
+import type { GlobalToken, AliasToken } from './interface';
 export * from 'antd/lib/theme/internal';
 export * from 'antd/lib/theme';
-declare const _default: {
-    defaultSeed: {
-        colorPrimary: string;
-        colorSuccess: string;
-        colorWarning: string;
-        colorError: string;
-        colorInfo: string;
-        colorTextBase: string;
-        colorBgBase: string;
-        colorLink: string;
-        fontFamily: string;
-        fontFamilyCode: string;
-        fontSize: number;
-        lineWidth: number;
-        lineType: string;
-        borderRadius: number;
-        sizeUnit: number;
-        sizeStep: number;
-        sizePopupArrow: number;
-        controlHeight: number;
-        zIndexBase: number;
-        zIndexPopupBase: number;
-        opacityImage: number;
-        motionUnit: number;
-        motionBase: number;
-        motionEaseOutCirc: string;
-        motionEaseInOutCirc: string;
-        motionEaseInOut: string;
-        motionEaseOutBack: string;
-        motionEaseInBack: string;
-        motionEaseInQuint: string;
-        motionEaseOutQuint: string;
-        motionEaseOut: string;
-        wireframe: boolean;
-        motion: boolean;
-        blue: string;
-        purple: string;
-        cyan: string;
-        green: string;
-        magenta: string;
-        pink: string;
-        red: string;
-        orange: string;
-        yellow: string;
-        volcano: string;
-        geekblue: string;
-        lime: string;
-        gold: string;
+declare const _default: Omit<{
+    defaultSeed: import("antd/es/theme/interface/seeds").SeedToken;
+    useToken: () => {
+        theme: Theme<import("antd/es/theme/interface/seeds").SeedToken, import("antd/es/theme/internal").AliasToken>;
+        token: import("antd").GlobalToken;
+        hashId: string;
     };
+    defaultAlgorithm: typeof import("antd/es/theme/themes/default").default;
+    darkAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("antd/es/theme/interface/seeds").SeedToken, import("antd/es/theme/interface/maps").MapToken>;
+    compactAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("antd/es/theme/interface/seeds").SeedToken, import("antd/es/theme/interface/maps").MapToken>;
+    getDesignToken: (config?: import("antd").ThemeConfig) => import("antd/es/theme/internal").AliasToken;
     defaultConfig: {
-        token: import("antd/es/theme/internal").SeedToken;
+        token: import("antd/es/theme/interface/seeds").SeedToken;
         override: {
-            override: import("antd/es/theme/internal").SeedToken;
+            override: import("antd/es/theme/interface/seeds").SeedToken;
         };
         hashed: boolean;
     };
+    _internalContext: import("react").Context<import("antd/es/theme/context").DesignTokenProviderProps>;
+}, "useToken"> & {
     useToken: () => {
-        theme: import("@ant-design/cssinjs").Theme<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/internal").AliasToken>;
-        token: import("antd").GlobalToken;
+        theme: Theme<SeedToken, AliasToken>;
+        token: GlobalToken;
         hashId: string;
     };
-    defaultAlgorithm: typeof import("antd/es/theme/themes/default").default;
-    darkAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/interface").MapToken>;
-    compactAlgorithm: import("@ant-design/cssinjs").DerivativeFunc<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/interface").MapToken>;
-    getDesignToken: (config?: import("antd").ThemeConfig) => import("antd/es/theme/internal").AliasToken;
-    _internalContext: import("react").Context<import("antd/es/theme/context").DesignTokenProviderProps>;
 };
 export default _default;

package/lib/theme/interface.d.ts

@@ -1 +1,67 @@
+import type { GlobalToken as GlobalTokenTypeUtil, OverrideTokenMap as OverrideTokenTypeUtil, FullToken as FullTokenTypeUtil, TokenMapKey } from '@ant-design/cssinjs-utils';
+import type { AliasToken as AntAliasToken, ComponentTokenMap } from 'antd/es/theme/interface';
 export * from 'antd/es/theme/interface';
+export interface AliasToken extends AntAliasToken {
+    /**
+     * @nameZH 正文的字体粗细
+     * @nameEN Font weight for body text
+     * @desc 控制正文的字体粗细。
+     * @descEN Control the font weight of body text.
+     */
+    fontWeight: number;
+    /**
+     * @nameZH 辅助描述的字体粗细，一般弱于正文
+     * @nameEN Font weight for auxiliary description, usually weaker than body text
+     * @desc 控制辅助描述的字体粗细，一般弱于正文。
+     * @descEN Control the font weight of auxiliary description, usually weaker than body text.
+     */
+    fontWeightWeak: number;
+    /**
+     * @nameZH 等于 fontSize * lineHeight 的值
+     * @nameEN Round of fontSize * lineHeight
+     * @desc 等于 fontSize * lineHeight 的值。
+     * @descEN Round of fontSize * lineHeight.
+     */
+    fontHeight: number;
+    /**
+     * @nameZH MD号圆角
+     * @nameEN MD Border Radius
+     * @desc MD号圆角，用于组件中的一些中圆角，如嵌套 Card、Alert、Tooltip、Dropdown 等一些组件样式。
+     * @descEN MD size border radius, used in some medium border radius components, such as nested Card, Alert, Tooltip, Dropdown etc.
+     * @default 6
+     */
+    borderRadiusMD: number;
+    /**
+     * @nameZH 严重错误色
+     * @nameEN Critical Error Color
+     * @desc 用于表示操作严重失败的 Token 序列，如严重错误告警等。
+     * @descEN Used to represent the visual elements of the operation serious failure, such as critical error alert etc.
+     */
+    colorFuchsia: string;
+    /**
+     * @nameZH 严重错误色的描边色
+     * @nameEN Critical error border color
+     * @desc 严重错误色的描边色
+     * @descEN The border color of the critical error state.
+     */
+    colorFuchsiaBorder: string;
+    /**
+     * @nameZH 严重错误色背景
+     * @nameEN Critical error background color
+     * @desc 严重错误色背景
+     * @descEN The background color of the critical error state.
+     */
+    colorFuchsiaBg: string;
+    /**
+     * @nameZH 严重错误色文本
+     * @nameEN Critical error text color
+     * @desc 严重错误色文本
+     * @descEN The text color of the critical error state.
+     */
+    colorFuchsiaText: string;
+}
+/** Final token which contains the components level override */
+export type GlobalToken = GlobalTokenTypeUtil<ComponentTokenMap, AliasToken>;
+export type OverrideToken = OverrideTokenTypeUtil<ComponentTokenMap, AliasToken>;
+export type OverrideComponent = TokenMapKey<ComponentTokenMap>;
+export type FullToken<C extends TokenMapKey<ComponentTokenMap>> = FullTokenTypeUtil<ComponentTokenMap, AliasToken, C>;

package/lib/theme/style/aliyun.less

@@ -104,22 +104,22 @@
 @cyan9: #00474f;
 @cyan-10: #002329;
 @cyan10: #002329;
-@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-1: #e4f7ed;
+@green1: #e4f7ed;
+@green-2: #b2ebd0;
+@green2: #b2ebd0;
+@green-3: #85deb7;
+@green3: #85deb7;
+@green-4: #5cd1a2;
+@green4: #5cd1a2;
+@green-5: #37c491;
+@green5: #37c491;
+@green-6: #16b882;
+@green6: #16b882;
+@green-7: #0a9169;
+@green7: #0a9169;
+@green-8: #026b4f;
+@green8: #026b4f;
 @green-9: #004535;
 @green9: #004535;
 @green-10: #001f18;
@@ -172,18 +172,18 @@
 @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;
+@red-5: #f7716d;
+@red5: #f7716d;
+@red-6: #eb4242;
+@red6: #eb4242;
+@red-7: #c42d32;
+@red7: #c42d32;
+@red-8: #9e1c25;
+@red8: #9e1c25;
+@red-9: #78101a;
+@red9: #78101a;
+@red-10: #520a13;
+@red10: #520a13;
 @orange-1: #fff7e6;
 @orange1: #fff7e6;
 @orange-2: #ffe7ba;
@@ -332,25 +332,25 @@
 @colorPrimaryText: #0d6cf2;
 @colorPrimaryTextActive: #004ecc;
 @colorSuccessBg: #dff4e5;
-@colorSuccessBgHover: #b0ebcf;
+@colorSuccessBgHover: #b2ebd0;
 @colorSuccessBorder: #dff4e5;
-@colorSuccessBorderHover: #5ad1a1;
-@colorSuccessHover: #5ad1a1;
-@colorSuccessActive: #099168;
-@colorSuccessTextHover: #35c490;
-@colorSuccessText: #14b781;
-@colorSuccessTextActive: #099168;
+@colorSuccessBorderHover: #5cd1a2;
+@colorSuccessHover: #5cd1a2;
+@colorSuccessActive: #0a9169;
+@colorSuccessTextHover: #37c491;
+@colorSuccessText: #16b882;
+@colorSuccessTextActive: #0a9169;
 @colorErrorBg: #fff2f0;
 @colorErrorBgHover: #ffedeb;
 @colorErrorBgFilledHover: #ffddd9;
 @colorErrorBgActive: #ffc8c2;
 @colorErrorBorder: #ffc8c2;
 @colorErrorBorderHover: #ffa099;
-@colorErrorHover: #fc746f;
-@colorErrorActive: #c92e34;
-@colorErrorTextHover: #fc746f;
-@colorErrorText: #ef4343;
-@colorErrorTextActive: #c92e34;
+@colorErrorHover: #f7716d;
+@colorErrorActive: #c42d32;
+@colorErrorTextHover: #f7716d;
+@colorErrorText: #eb4242;
+@colorErrorTextActive: #c42d32;
 @colorWarningBg: #fffbf0;
 @colorWarningBgHover: #fff0c9;
 @colorWarningBorder: #ffe1a1;
@@ -402,7 +402,7 @@
 @sizeXS: 8px;
 @sizeXXS: 4px;
 @controlHeightSM: 24px;
-@controlHeightXS: 16px;
+@controlHeightXS: 14px;
 @controlHeightLG: 36px;
 @motionDurationFast: 0.1s;
 @motionDurationMid: 0.2s;