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

package/lib/theme/index.js

@@ -1,65 +1,70 @@
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-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);
+"use strict";
 
-// src/theme/index.ts
-var theme_exports = {};
-__export(theme_exports, {
-  default: () => theme_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _antd = require("antd");
+var _lodash = require("lodash");
+var _default2 = _interopRequireDefault(require("./default"));
+var _obToken = require("./obToken");
+var _internal = require("antd/lib/theme/internal");
+Object.keys(_internal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _internal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _internal[key];
+    }
+  });
 });
-module.exports = __toCommonJS(theme_exports);
-var import_antd = require("antd");
-var import_lodash = require("lodash");
-var import_default = __toESM(require("./default"));
-__reExport(theme_exports, require("antd/lib/theme/internal"), module.exports);
-__reExport(theme_exports, require("antd/lib/theme"), module.exports);
-var seedTokenKeys = Object.keys(import_antd.theme.defaultSeed);
-var seedToken = {
-  ...(0, import_lodash.pick)(import_default.default.token, seedTokenKeys),
+var _theme = require("antd/lib/theme");
+Object.keys(_theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _theme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _theme[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client"; // umi 插件只能 import 支持 CommonJS 语法库和文件，因此需要使用 lib 产物
+const seedTokenKeys = Object.keys(_antd.theme.defaultSeed);
+const seedToken = {
+  ...(0, _lodash.pick)(_default2.default.token, seedTokenKeys),
   // some special seed token should set to ''
   // ref: https://github.com/ant-design/ant-design/blob/master/components/theme/themes/seed.ts#L32
-  colorBgBase: "",
-  colorTextBase: "",
-  colorLink: ""
+  colorBgBase: '',
+  colorTextBase: '',
+  colorLink: ''
 };
-var defaultSeed = {
-  ...import_antd.theme.defaultSeed,
+const defaultSeed = {
+  ..._antd.theme.defaultSeed,
   ...seedToken
 };
-var defaultConfig = import_antd.theme.defaultConfig;
+
+// should use reference assign instead of clone assign
+const defaultConfig = _antd.theme.defaultConfig;
 defaultConfig.token = defaultSeed;
-var theme_default = {
-  ...import_antd.theme,
-  defaultSeed,
-  defaultConfig
+
+// 包装 useToken 以添加 obToken
+const useToken = () => {
+  const result = _antd.theme.useToken();
+  const obToken = (0, _obToken.genObToken)(result.token);
+  return {
+    ...result,
+    obToken
+  };
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/lib/theme/internal"),
-  ...require("antd/lib/theme")
-});
+var _default = exports.default = {
+  ..._antd.theme,
+  defaultSeed,
+  defaultConfig,
+  useToken
+};

package/lib/theme/interface.d.ts

@@ -1 +1,148 @@
+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 小号字体的高度
+     * @nameEN Font height for small size
+     * @desc 小号字体的高度，用于组件中的一些小号字体，如 Pill Tag 等一些组件样式。
+     * @descEN The height of the small font, used in some small font components, such as Pill Tag etc.
+     */
+    fontHeightSM: 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 background hover color
+     * @desc 严重错误色背景悬停色
+     * @descEN The hover color of the critical error background state.
+     */
+    colorFuchsiaBgHover: string;
+    /**
+     * @nameZH 严重错误色悬停色
+     * @nameEN Critical error hover color
+     * @desc 严重错误色悬停色
+     * @descEN The hover color of the critical error state.
+     */
+    colorFuchsiaHover: string;
+    /**
+     * @nameZH 严重错误色激活色
+     * @nameEN Critical error active color
+     * @desc 严重错误色激活色
+     * @descEN The active color of the critical error state.
+     */
+    colorFuchsiaActive: string;
+    /**
+     * @nameZH 严重错误色文本
+     * @nameEN Critical error text color
+     * @desc 严重错误色文本
+     * @descEN The text color of the critical error state.
+     */
+    colorFuchsiaText: string;
+    white: string;
+    black: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    green6: string;
+    orange1: string;
+    orange2: string;
+    orange3: string;
+    orange4: string;
+    orange5: string;
+    orange6: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    red4: string;
+    red5: string;
+    red6: string;
+    fuchsia1: string;
+    fuchsia2: string;
+    fuchsia3: string;
+    fuchsia4: string;
+    fuchsia5: string;
+    fuchsia6: string;
+    colorNaviBg: string;
+    colorNaviBgHover: 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>;
+declare module 'antd/es/table/style' {
+    interface ComponentToken {
+        /**
+         * 英文界面下启用表格内嵌 Button（genSmallBtnStyle）与分页条（含 page size Select）的整套对齐样式。
+         * @descEN Enables full embedded Button and pagination (incl. page-size Select) alignment styles for English UI.
+         * @internal
+         */
+        localeEnEmbeddedControls?: boolean;
+    }
+}

package/lib/theme/interface.js

@@ -1,23 +1,16 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/theme/interface.ts
-var interface_exports = {};
-module.exports = __toCommonJS(interface_exports);
-__reExport(interface_exports, require("antd/es/theme/interface"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/theme/interface")
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _interface = require("antd/es/theme/interface");
+Object.keys(_interface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _interface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interface[key];
+    }
+  });
+});

package/lib/theme/internal.js

@@ -1,23 +1,16 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/theme/internal.ts
-var internal_exports = {};
-module.exports = __toCommonJS(internal_exports);
-__reExport(internal_exports, require("antd/es/theme/internal"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/theme/internal")
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _internal = require("antd/es/theme/internal");
+Object.keys(_internal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _internal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _internal[key];
+    }
+  });
+});

package/lib/theme/obToken.d.ts

@@ -0,0 +1,206 @@
+/**
+ * OceanBase Design System - CSS Variables Style
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ * 根据主题 token 值动态生成
+ */
+import React from 'react';
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import type { GlobalToken } from './interface';
+/**
+ * 根据 token 生成 obToken 对象（CSS 变量的 JavaScript 表示）
+ */
+declare const genObToken: (token: GlobalToken, prefix?: string) => {
+    white: string;
+    gray1: string;
+    gray2: string;
+    gray3: string;
+    gray4: string;
+    gray5: string;
+    gray6: string;
+    gray7: string;
+    gray8: string;
+    gray9: string;
+    gray10: string;
+    black: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    blue4: string;
+    blue5: string;
+    blue6: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    green6: string;
+    orange1: string;
+    orange2: string;
+    orange3: string;
+    orange4: string;
+    orange5: string;
+    orange6: string;
+    red1: string;
+    red2: string;
+    red3: string;
+    red4: string;
+    red5: string;
+    red6: string;
+    fuchsia1: string;
+    fuchsia2: string;
+    fuchsia3: string;
+    fuchsia4: string;
+    fuchsia5: string;
+    fuchsia6: string;
+    colorBgDefault: string;
+    colorBgPrimary: string;
+    colorBgSecondary: string;
+    colorBgHover: string;
+    colorBgHoverSecondary: string;
+    colorBgFocus: string;
+    colorBgSelected: string;
+    colorBgDisabled: string;
+    colorBgInfo: string;
+    colorBgSuccess: string;
+    colorBgWarning: string;
+    colorBgError: string;
+    colorDivider: string;
+    colorBorderDefault: string;
+    colorBorderContainer: string;
+    colorBorderInverse: string;
+    colorBorderHover: string;
+    colorBorderSelected: string;
+    colorBorderFocus: string;
+    colorBorderSuccess: string;
+    colorBorderError: string;
+    colorBorderWarning: string;
+    colorTextDefault: string;
+    colorTextNavigation: string;
+    colorTextLabel: string;
+    colorTextDescription: string;
+    colorTextDisabled: string;
+    colorTextFocus: string;
+    colorTextSelected: string;
+    colorTextLink: string;
+    colorTextInverse: string;
+    colorTextDisabledSelected: string;
+    colorTextSuccess: string;
+    colorTextError: string;
+    colorTextWarning: string;
+    colorIconDefault: string;
+    colorIconHover: string;
+    colorIconDisabled: string;
+    colorIconFocus: string;
+    colorIconInverse: string;
+    colorIconInfo: string;
+    colorIconWarning: string;
+    colorIconSuccess: string;
+    colorIconError: string;
+    colorIconCritical: string;
+    /**
+     * 兼容旧版「状态色」字段（与 DTCG 语义色并存；勿在新代码中使用，亦不在文档中列出）
+     */
+    colorDefaultText: string;
+    colorDefaultIcon: string;
+    colorDefaultFill: string;
+    colorDefaultBorder: string;
+    colorInfoText: string;
+    colorInfoIcon: string;
+    colorInfoFill: string;
+    colorInfoBorder: string;
+    colorSuccessText: string;
+    colorSuccessIcon: string;
+    colorSuccessFill: string;
+    colorSuccessBorder: string;
+    colorWarningText: string;
+    colorWarningIcon: string;
+    colorWarningFill: string;
+    colorWarningBorder: string;
+    colorErrorText: string;
+    colorErrorIcon: string;
+    colorErrorFill: string;
+    colorErrorBorder: string;
+    colorCriticalText: string;
+    colorCriticalIcon: string;
+    colorCriticalFill: string;
+    colorCriticalBorder: string;
+    fontFamilyDefault: string;
+    fontFamilyCode: string;
+    fontWeightSm: number;
+    fontWeightMd: number;
+    fontWeightLg: number;
+    fontSize300: number;
+    fontSize325: number;
+    fontSize400: number;
+    fontSize450: number;
+    fontSize500: number;
+    fontLineHeight500: string;
+    fontLineHeight600: string;
+    fontLineHeight650: string;
+    fontLineHeight700: string;
+    fontH1: string;
+    fontH2: string;
+    fontH3: string;
+    fontH4: string;
+    fontBody1: string;
+    fontBody2: string;
+    fontCaption: string;
+    fontBodyCode: string;
+    shadow1Top: string;
+    shadow1Bottom: string;
+    shadow1Left: string;
+    shadow1Right: string;
+    shadow2: string;
+    radiusSm: number;
+    radiusMd: number;
+    radiusLg: number;
+    space0: number;
+    space50: number;
+    space100: number;
+    space150: number;
+    space200: number;
+    space300: number;
+    space400: number;
+    space500: number;
+    space600: number;
+    space800: number;
+    spaceNegative25: number;
+    naviColorBg: string;
+    naviColorBgHover: string;
+    naviColorBgFocus: string;
+    btnColorPrimaryBg: string;
+    btnColorPrimaryBgHover: string;
+    btnColorPrimaryBgDisabled: string;
+    btnColorPrimaryText: string;
+    btnColorPrimaryIcon: string;
+    btnColorSecondaryBorder: string;
+    btnColorSecondaryText: string;
+    btnColorSecondaryIcon: string;
+    btnColorDangerBorder: string;
+    btnColorDangerText: string;
+    progressColorBgDefault: string;
+    progressColorBgLoading: string;
+    progressColorBgSuccess: string;
+    progressColorBgError: string;
+    switchColorBgDefault: string;
+    switchColorBgDisabled: string;
+    switchColorBgActive: string;
+    switchColorBgDisabledSelected: string;
+};
+/**
+ * 根据 token 生成 CSS 变量样式
+ */
+declare const genCssVariablesStyle: (token: GlobalToken, prefix?: string) => CSSInterpolation;
+export interface CssVariablesStyleProps {
+    /**
+     * CSS 变量前缀，默认为 'ob'
+     */
+    prefix?: string;
+}
+/**
+ * CSS 变量注入组件
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ */
+declare const CssVariablesStyle: React.FC<CssVariablesStyleProps>;
+export { CssVariablesStyle, genCssVariablesStyle, genObToken };
+export default CssVariablesStyle;