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

package/es/theme/default.js

@@ -11,51 +11,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 colorFillHover = '#EFF3FA';
-var colorFillSelected = '#E2E8F3';
+var colorFillTertiary = '#EBEFF7';
+var colorFillQuaternary = '#F5F7FC';
 var colorBorderSecondary = colorFillSecondary;
 var fontSizeSM = 12;
-// Calculated by colorBorder and getWeakenBorderColor()
-var tagColorBorder = '#cdd5e466';
+var tagColorBorder = colorTextQuaternary;
 export var fontFamilyEn = "Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'";
+export var fontWeightWeakEn = 400;
+export var fontWeightEn = 500;
+export 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: 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: 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: colorText,
     colorTextSecondary: colorTextSecondary,
@@ -64,14 +77,15 @@ var defaultTheme = {
     colorIcon: colorTextSecondary,
     colorBgBase: '#ffffff',
     colorBgContainer: '#ffffff',
-    colorBgLayout: colorFillQuaternary,
+    colorBgLayout: '#FBFCFE',
     colorBorder: colorFill,
     colorBorderSecondary: colorBorderSecondary,
     colorFill: colorFill,
     colorFillSecondary: colorFillSecondary,
     colorFillTertiary: colorFillTertiary,
     colorFillQuaternary: 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)',
@@ -82,13 +96,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
@@ -109,6 +136,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,
@@ -133,8 +163,8 @@ var defaultTheme = {
       itemHoverColor: colorText
     },
     Tag: {
-      defaultColor: colorTextSecondary,
-      colorBorder: tagColorBorder
+      colorBorder: tagColorBorder,
+      borderRadiusSM: 4
     },
     Table: {
       cellFontSize: fontSizeSM,
@@ -162,7 +192,8 @@ var defaultTheme = {
       itemColor: '#36496F',
       itemSelectedColor: colorText,
       itemMarginBlock: 6,
-      groupTitleFontSize: 11
+      groupTitleFontSize: 11,
+      groupTitleColor: colorTextSecondary
     }
   }
 };

package/es/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/es/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/es/theme/interface.js

@@ -1 +1,4 @@
-export * from 'antd/es/theme/interface';
+export * from 'antd/es/theme/interface';
+
+/** Final token which contains the components level override */
+export {};

package/es/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;