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

package/lib/tag/style/index.js

@@ -25,42 +25,34 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_internal = require("antd/es/theme/internal");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var import_internal2 = require("antd/lib/theme/internal");
-var import_getWeakenBorderColor = require("../../_util/getWeakenBorderColor");
-var getTagBorderColor = (color) => {
-  return (0, import_getWeakenBorderColor.getWeakenBorderColor)(color);
-};
 var genTagPresetStatusStyle = (token, status) => {
-  const borderColorMap = {
-    success: token.colorSuccessBorder,
-    processing: token.colorInfoBorder,
-    error: token.colorErrorBorder,
-    warning: token.colorWarningBorder
+  const colorMap = {
+    success: token.colorSuccessText,
+    processing: token.colorInfoText,
+    error: token.colorErrorText,
+    warning: token.colorWarningText
   };
   return {
     [`${token.componentCls}${token.componentCls}-${status}`]: {
-      borderColor: getTagBorderColor(borderColorMap[status])
+      color: colorMap[status]
     }
   };
 };
-var genPresetStyle = (token) => (0, import_internal2.genPresetColor)(token, (colorKey, { lightBorderColor }) => {
-  return {
-    [`${token.componentCls}${token.componentCls}-${colorKey}`]: {
-      borderColor: getTagBorderColor(lightBorderColor)
-    }
-  };
-});
 var genTagStyle = (token) => {
-  const { antCls, componentCls, tagPaddingHorizontal, lineWidth, calc } = token;
-  const paddingInline = calc(tagPaddingHorizontal).sub(lineWidth).equal();
+  const { antCls, componentCls, iconCls } = token;
   return {
     [`${componentCls}`]: {
       paddingInline: token.paddingXS,
-      borderColor: getTagBorderColor(token.colorBorder),
       fontSize: token.fontSizeSM,
+      [`&:not(${componentCls}-pill)`]: {
+        fontWeight: token.fontWeightStrong
+      },
+      [`${componentCls}-close-icon${iconCls}`]: {
+        marginInlineStart: token.marginXXS
+      },
       [`${antCls}-typography`]: {
         [`${componentCls}-icon`]: {
-          marginInlineEnd: paddingInline
+          marginInlineEnd: token.marginXXS
         }
       },
       ["&-ellipsis"]: {
@@ -77,19 +69,20 @@ var genTagStyle = (token) => {
       },
       ["&-borderless"]: {
         borderColor: "transparent"
+      },
+      ["&-pill"]: {
+        borderRadius: 100,
+        lineHeight: token.lineHeight,
+        marginInlineEnd: token.marginXXS
       }
     }
   };
 };
 var style_default = (prefixCls) => {
   const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Tag", (token) => {
-    const tagToken = (0, import_internal.mergeToken)(token, {
-      tagPaddingHorizontal: 8
-      // Fixed padding.
-    });
+    const tagToken = (0, import_internal.mergeToken)(token, {});
     return [
       genTagStyle(tagToken),
-      genPresetStyle(tagToken),
       genTagPresetStatusStyle(tagToken, "success"),
       genTagPresetStatusStyle(tagToken, "error"),
       genTagPresetStatusStyle(tagToken, "processing"),

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,48 +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 = "#EBEFF7";
+var colorFillQuaternary = "#F5F7FC";
 var colorBorderSecondary = colorFillSecondary;
 var fontSizeSM = 12;
-var tagColorBorder = "#cdd5e466";
+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`,
+    fontWeightWeak: 400,
+    fontWeight: 400,
+    fontWeightStrong: 500,
+    borderRadiusSM: 2,
     borderRadius: 4,
+    borderRadiusMD: 6,
     borderRadiusLG: 8,
-    borderRadiusSM: 2,
-    fontSize: 13,
     fontSizeSM,
+    fontSize: 13,
+    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: colorPrimarySecondary,
-    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,
@@ -79,14 +98,15 @@ var defaultTheme = {
     colorIcon: colorTextSecondary,
     colorBgBase: "#ffffff",
     colorBgContainer: "#ffffff",
-    colorBgLayout: colorFillQuaternary,
+    colorBgLayout: "#FBFCFE",
     colorBorder: colorFill,
     colorBorderSecondary,
     colorFill,
     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)",
@@ -97,13 +117,26 @@ var defaultTheme = {
     lineWidthFocus: 0
   },
   components: {
+    Alert: {
+      borderRadiusLG: 6
+    },
+    Badge: {
+      statusSize: 8
+    },
     Breadcrumb: {
       fontSize: fontSizeSM,
-      // @ts-ignore
-      // fontHeight is internal token
       fontHeight: 20,
       lastItemColor: colorTextSecondary
     },
+    Button: {
+      contentFontSizeSM: 12,
+      borderRadiusSM: 4,
+      borderRadius: 4,
+      borderRadiusLG: 4,
+      paddingInlineSM: 8,
+      paddingInline: 12,
+      paddingInlineLG: 12
+    },
     Card: {
       headerFontSize: 16,
       borderRadiusLG: 8
@@ -124,6 +157,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,
@@ -148,8 +184,8 @@ var defaultTheme = {
       itemHoverColor: colorText
     },
     Tag: {
-      defaultColor: colorTextSecondary,
-      colorBorder: tagColorBorder
+      colorBorder: tagColorBorder,
+      borderRadiusSM: 4
     },
     Table: {
       cellFontSize: fontSizeSM,
@@ -177,7 +213,8 @@ var defaultTheme = {
       itemColor: "#36496F",
       itemSelectedColor: colorText,
       itemMarginBlock: 6,
-      groupTitleFontSize: 11
+      groupTitleFontSize: 11,
+      groupTitleColor: colorTextSecondary
     }
   }
 };
@@ -193,5 +230,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;