@oceanbase/design 1.0.0-alpha.5 → 1.0.0-alpha.6

package/lib/config-provider/index.js

@@ -45,7 +45,9 @@ var import_static_function = __toESM(require("../static-function"));
 var import_theme = __toESM(require("../theme"));
 var import_default = __toESM(require("../theme/default"));
 var import_dark = __toESM(require("../theme/dark"));
+var import_compact = __toESM(require("../theme/compact"));
 var import_DefaultRenderEmpty = __toESM(require("./DefaultRenderEmpty"));
+var import_global = __toESM(require("../style/global"));
 __reExport(config_provider_exports, require("./navigate"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider/context"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider/SizeContext"), module.exports);
@@ -57,8 +59,8 @@ var ExtendedConfigContext = import_react.default.createContext({
   hideOnSinglePage: false,
   injectStaticFunction: true
 });
-var getLocaleTokenValue = (locale, tokenKey, tokenValue, tokenValueEn) => {
-  return tokenValue !== import_default.default.token[tokenKey] ? { [tokenKey]: tokenValue } : ["en", "en-gb"].includes(locale.locale) ? { [tokenKey]: tokenValueEn } : {};
+var getLocaleTokenValue = (mergedThemeToken, locale, tokenKey, tokenValue, tokenValueEn) => {
+  return tokenValue !== mergedThemeToken[tokenKey] ? { [tokenKey]: tokenValue } : ["en", "en-gb"].includes(locale.locale) ? { [tokenKey]: tokenValueEn } : {};
 };
 var ConfigProvider = ({
   children,
@@ -79,13 +81,43 @@ var ConfigProvider = ({
   var _a, _b, _c, _d;
   const parentContext = import_react.default.useContext(import_antd.ConfigProvider.ConfigContext);
   const parentExtendedContext = import_react.default.useContext(ExtendedConfigContext);
-  const { isDark, isAliyun } = (0, import_lodash.merge)({}, parentContext.theme, theme);
-  const customTheme = isAliyun ? import_aliyun_theme.default : isDark ? import_dark.default : void 0;
+  const { isAliyun, isDark, isCompact } = (0, import_lodash.merge)({}, parentContext.theme, theme);
+  const aliyunThemeConfig = isAliyun ? import_aliyun_theme.default : void 0;
+  const darkThemeConfig = isDark && !isAliyun ? isCompact ? import_dark.default : {
+    ...import_dark.default,
+    token: {
+      ...import_dark.default.token,
+      ...Object.fromEntries(
+        Object.entries(import_default.default.token).filter(
+          ([key]) => {
+            var _a2;
+            return !((_a2 = key == null ? void 0 : key.toLowerCase()) == null ? void 0 : _a2.startsWith("color"));
+          }
+        )
+      )
+    }
+  } : void 0;
+  const compactThemeConfig = isCompact && !isAliyun ? isDark ? import_compact.default : {
+    ...import_compact.default,
+    token: {
+      ...import_compact.default.token,
+      ...Object.fromEntries(
+        Object.entries(import_default.default.token).filter(
+          ([key]) => {
+            var _a2;
+            return ((_a2 = key == null ? void 0 : key.toLowerCase()) == null ? void 0 : _a2.startsWith("color")) && !["colorBgBase", "colorTextBase"].includes(key);
+          }
+        )
+      )
+    }
+  } : void 0;
   const mergedTheme = (0, import_lodash.merge)(
     {},
-    customTheme ? {} : import_default.default,
+    isAliyun ? {} : isDark || isCompact ? import_theme.default.defaultSeed : import_default.default,
     parentContext.theme,
-    customTheme,
+    aliyunThemeConfig,
+    darkThemeConfig,
+    compactThemeConfig,
     theme
   );
   const { token } = import_theme.default.useToken();
@@ -154,9 +186,22 @@ var ConfigProvider = ({
       tabs: (0, import_lodash.merge)({}, parentContext.tabs, tabs),
       theme: (0, import_lodash.merge)({}, mergedTheme, {
         token: {
-          ...getLocaleTokenValue(mergedLocale, "fontFamily", fontFamily, import_default.fontFamilyEn),
-          ...getLocaleTokenValue(mergedLocale, "fontWeight", fontWeight, import_default.fontWeightEn),
           ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontFamily",
+            fontFamily,
+            import_default.fontFamilyEn
+          ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontWeight",
+            fontWeight,
+            import_default.fontWeightEn
+          ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
             mergedLocale,
             "fontWeightStrong",
             fontWeightStrong,
@@ -175,10 +220,13 @@ var ConfigProvider = ({
             // inject static function to outermost ConfigProvider only
             injectStaticFunction: false
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cssinjs.StyleProvider, { ...mergedStyleProviderProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_app.default, { component: false, ...appProps, children: [
-            children,
-            parentExtendedContext.injectStaticFunction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_static_function.default, {})
-          ] }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cssinjs.StyleProvider, { ...mergedStyleProviderProps, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_global.default, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_app.default, { component: false, ...appProps, children: [
+              children,
+              parentExtendedContext.injectStaticFunction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_static_function.default, {})
+            ] })
+          ] })
         }
       )
     }

package/lib/form/FormItem.d.ts

@@ -4,7 +4,7 @@ import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { TooltipProps } from '../tooltip';
 declare const AntFormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     useStatus: () => {
-        status?: "" | "success" | "warning" | "error" | "validating";
+        status?: "" | "warning" | "error" | "success" | "validating";
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import './global.css';
 export * from 'antd';
 export { version } from '../package.json';
 export { default as Alert } from './alert';

package/lib/index.js

@@ -72,7 +72,6 @@ __export(src_exports, {
   version: () => import_package.version
 });
 module.exports = __toCommonJS(src_exports);
-var import_global = require("./global.css");
 __reExport(src_exports, require("antd"), module.exports);
 var import_package = require("../package.json");
 var import_alert = __toESM(require("./alert"));

package/lib/style/global.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import 'antd/dist/reset.css';
+declare const GlobalStyle: React.FC;
+export { GlobalStyle };
+export default GlobalStyle;

package/lib/style/global.js

@@ -0,0 +1,101 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/style/global.tsx
+var global_exports = {};
+__export(global_exports, {
+  GlobalStyle: () => GlobalStyle,
+  default: () => global_default
+});
+module.exports = __toCommonJS(global_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_theme = __toESM(require("../theme"));
+var import_Inter = __toESM(require("../fonts/Inter.woff2"));
+var import_Consolas = __toESM(require("../fonts/Consolas.woff2"));
+var import_HelveticaNeue = __toESM(require("../fonts/HelveticaNeue.woff2"));
+var import_reset = require("antd/dist/reset.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var genGlobalStyle = (token) => {
+  return [
+    // Priority: local font > self-hosting font > remote font
+    {
+      "@font-face": {
+        fontFamily: "'Inter'",
+        src: `local('Inter'), url(${import_Inter.default}) format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2') format('woff2')`,
+        fontDisplay: "swap"
+      }
+    },
+    {
+      "@font-face": {
+        fontFamily: "'Consolas'",
+        src: `local('Consolas'), url(${import_Consolas.default}) format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2') format('woff2')`,
+        fontDisplay: "swap"
+      }
+    },
+    {
+      "@font-face": {
+        fontFamily: "'Helvetica Neue'",
+        src: `local('Helvetica Neue'), url(${import_HelveticaNeue.default}) format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2') format('woff2')`,
+        fontDisplay: "swap"
+      }
+    },
+    // Global element styles
+    {
+      "pre, code, kbd, samp": {
+        fontFamily: token.fontFamilyCode
+      },
+      "*": {
+        scrollbarColor: `${token.colorFillSecondary} transparent`
+      },
+      ".rc-virtual-list-scrollbar-thumb": {
+        background: `${token.colorFillSecondary} !important`
+      }
+    }
+  ];
+};
+var GlobalStyle = () => {
+  const { theme, token } = import_theme.default.useToken();
+  const wrapSSR = (0, import_cssinjs.useStyleRegister)(
+    {
+      theme,
+      token,
+      path: ["global"],
+      hashId: "",
+      // Empty hashId for global styles
+      order: -1e3
+      // Inject before other styles
+    },
+    () => genGlobalStyle(token)
+  );
+  return wrapSSR(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}));
+};
+var global_default = GlobalStyle;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStyle
+});

package/lib/style/reset.css

@@ -1 +1,2 @@
-@import '~antd/dist/reset.css';
+/* antd/dist/reset.css is imported in global.tsx */
+/* reserve this file for compatibility with antd */

package/lib/theme/compact.d.ts

@@ -1,5 +1,5 @@
 declare const compactTheme: {
-    token: import("antd/es/theme/internal").AliasToken;
+    token: import("antd/es/theme/internal").SeedToken;
     components: {
         InputNumber: {
             handleVisible: boolean;

package/lib/theme/compact.js

@@ -32,13 +32,9 @@ __export(compact_exports, {
   default: () => compact_default
 });
 module.exports = __toCommonJS(compact_exports);
-var import_antd = require("antd");
 var import_index = __toESM(require("./index"));
 var compactTheme = {
-  token: import_antd.theme.getDesignToken({
-    algorithm: import_antd.theme.compactAlgorithm,
-    token: import_index.default.defaultSeed
-  }),
+  token: import_index.default.defaultSeed,
   components: {
     InputNumber: {
       handleVisible: true

package/lib/theme/default.js

@@ -40,6 +40,9 @@ var colorFillQuaternary = "#F5F7FC";
 var colorBorderSecondary = colorFillSecondary;
 var fontSizeSM = 12;
 var tagColorBorder = colorTextQuaternary;
+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 = 400;
 var fontWeightEn = 500;
@@ -52,9 +55,9 @@ var defaultTheme = {
     fontWeight: 400,
     fontWeightStrong: 500,
     borderRadiusSM: 2,
-    borderRadius: 4,
-    borderRadiusMD: 6,
-    borderRadiusLG: 8,
+    borderRadius,
+    borderRadiusMD,
+    borderRadiusLG,
     fontSizeSM,
     fontSize: 13,
     lineHeight: 20 / 13,
@@ -118,7 +121,7 @@ var defaultTheme = {
   },
   components: {
     Alert: {
-      borderRadiusLG: 6
+      borderRadiusLG: borderRadiusMD
     },
     Badge: {
       statusSize: 8
@@ -139,16 +142,29 @@ var defaultTheme = {
     },
     Card: {
       headerFontSize: 16,
-      borderRadiusLG: 8
+      borderRadiusLG
     },
     Collapse: {
       colorBorder: colorBorderSecondary
     },
+    DatePicker: {
+      borderRadiusLG: borderRadiusMD
+    },
     Descriptions: {
       labelColor: colorTextSecondary
     },
+    Dropdown: {
+      borderRadiusLG: borderRadiusMD
+    },
+    Input: {
+      borderRadiusLG: borderRadiusMD
+    },
     InputNumber: {
-      handleVisible: true
+      handleVisible: true,
+      borderRadiusLG: borderRadiusMD
+    },
+    Popover: {
+      borderRadiusLG: borderRadiusMD
     },
     Progress: {
       defaultColor: colorPrimarySecondary
@@ -162,6 +178,7 @@ var defaultTheme = {
     },
     Select: {
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
+      borderRadiusLG: borderRadiusMD,
       multipleItemBg: colorFillQuaternary,
       multipleItemBorderColor: tagColorBorder,
       multipleItemBorderColorDisabled: tagColorBorder
@@ -175,7 +192,7 @@ var defaultTheme = {
       handleColorDisabled: "#b3ccff"
     },
     Skeleton: {
-      blockRadius: 4
+      blockRadius: borderRadius
     },
     Tabs: {
       horizontalItemGutter: 24,
@@ -185,7 +202,7 @@ var defaultTheme = {
     },
     Tag: {
       colorBorder: tagColorBorder,
-      borderRadiusSM: 4
+      borderRadiusSM: borderRadius
     },
     Table: {
       cellFontSize: fontSizeSM,
@@ -199,13 +216,15 @@ var defaultTheme = {
       rowSelectedHoverBg: colorFillTertiary
     },
     Tooltip: {
+      borderRadius: borderRadiusMD,
       colorBgSpotlight: "#ffffff",
       colorTextLightSolid: colorText
     },
     Menu: {
+      borderRadiusLG: borderRadiusMD,
       paddingContentVertical: 0,
       itemHeight: 30,
-      itemBorderRadius: 4,
+      itemBorderRadius: borderRadius,
       // 80 means 50% opacity
       itemHoverBg: colorFillSecondary + "80",
       itemActiveBg: colorFillSecondary + "80",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -65,5 +65,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "c716061dd0da7a44ab09515d43972d2212e59d0f"
+  "gitHead": "7ce9c565c23262a8ffaeab5904095ca65806def9"
 }

package/es/global.css

@@ -1,48 +0,0 @@
-@import '~antd/dist/reset.css';
-
-@font-face {
-  font-family: 'Inter';
-  /* load priority: local font > self-hosting font > remote font */
-  src:
-    local('Inter'),
-    url('./fonts/Inter.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2')
-      format('woff2');
-  /* load strategy: use default font as fallback */
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Consolas';
-  src:
-    local('Consolas'),
-    url('./fonts/Consolas.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Helvetica Neue';
-  src:
-    local('Helvetica Neue'),
-    url('./fonts/HelveticaNeue.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
-
-* {
-  scrollbar-color: #e2e8f3 transparent;
-}
-
-.rc-virtual-list-scrollbar-thumb {
-  background: #e2e8f3 !important;
-}

package/lib/global.css

@@ -1,48 +0,0 @@
-@import '~antd/dist/reset.css';
-
-@font-face {
-  font-family: 'Inter';
-  /* load priority: local font > self-hosting font > remote font */
-  src:
-    local('Inter'),
-    url('./fonts/Inter.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2')
-      format('woff2');
-  /* load strategy: use default font as fallback */
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Consolas';
-  src:
-    local('Consolas'),
-    url('./fonts/Consolas.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Helvetica Neue';
-  src:
-    local('Helvetica Neue'),
-    url('./fonts/HelveticaNeue.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
-
-* {
-  scrollbar-color: #e2e8f3 transparent;
-}
-
-.rc-virtual-list-scrollbar-thumb {
-  background: #e2e8f3 !important;
-}