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

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

package/es/theme/obToken.js

@@ -0,0 +1,255 @@
+"use client";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * OceanBase Design System - CSS Variables Style
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ * 根据主题 token 值动态生成
+ */
+
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import themeConfig from '.';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 根据 token 生成 obToken 对象（CSS 变量的 JavaScript 表示）
+ */
+var genObToken = function genObToken(token) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ob';
+  return {
+    // ==================== 基础颜色 Token ====================
+    // 中性色 Neutral
+    white: token.white,
+    gray1: token.gray1,
+    gray2: token.gray2,
+    gray3: token.gray3,
+    gray4: token.gray4,
+    gray5: token.gray5,
+    gray6: token.gray6,
+    gray7: token.gray7,
+    gray8: token.gray8,
+    gray9: token.gray9,
+    gray10: token.colorText,
+    black: token.black,
+    // 蓝色 Blue
+    blue1: token.blue1,
+    blue2: token.blue2,
+    blue3: token.blue3,
+    blue4: token.blue4,
+    blue5: token.blue5,
+    blue6: token.blue6,
+    // 绿色 Green
+    green1: token.green1,
+    green2: token.green2,
+    green3: token.green3,
+    green4: token.green4,
+    green5: token.green5,
+    green6: token.green6,
+    // 橙色 Orange
+    orange1: token.orange1,
+    orange2: token.orange2,
+    orange3: token.orange3,
+    orange4: token.orange4,
+    orange5: token.orange5,
+    orange6: token.orange6,
+    // 红色 Red
+    red1: token.red1,
+    red2: token.red2,
+    red3: token.red3,
+    red4: token.red4,
+    red5: token.red5,
+    red6: token.red6,
+    // 紫色 Fuchsia
+    fuchsia1: token.fuchsia1,
+    fuchsia2: token.fuchsia2,
+    fuchsia3: token.fuchsia3,
+    fuchsia4: token.fuchsia4,
+    fuchsia5: token.fuchsia5,
+    fuchsia6: token.fuchsia6,
+    // ==================== 语义颜色 Token ====================
+    // 填充色 Background
+    colorBgDefault: token.colorBgContainer,
+    colorBgPrimary: token.gray1,
+    colorBgSecondary: token.gray2,
+    colorBgHover: token.gray2,
+    colorBgHoverSecondary: token.gray3,
+    colorBgFocus: token.gray3,
+    colorBgSelected: token.blue4,
+    colorBgDisabled: token.gray2,
+    colorBgInfo: token.blue1,
+    colorBgSuccess: token.green1,
+    colorBgWarning: token.orange1,
+    colorBgError: token.red1,
+    // 边框色 Border
+    colorDivider: token.gray4,
+    colorBorderDefault: token.gray5,
+    colorBorderContainer: token.gray4,
+    colorBorderInverse: token.white,
+    colorBorderHover: token.gray7,
+    colorBorderSelected: token.blue4,
+    colorBorderFocus: token.blue4,
+    colorBorderSuccess: token.green4,
+    colorBorderError: token.red4,
+    colorBorderWarning: token.orange4,
+    // 文本色 Text
+    colorTextDefault: token.colorText,
+    colorTextNavigation: token.gray9,
+    colorTextLabel: token.gray8,
+    colorTextDescription: token.gray7,
+    colorTextDisabled: token.gray6,
+    colorTextFocus: token.colorText,
+    colorTextSelected: token.blue4,
+    colorTextLink: token.blue4,
+    colorTextInverse: token.white,
+    colorTextDisabledSelected: token.gray7,
+    colorTextSuccess: token.green4,
+    colorTextError: token.red4,
+    colorTextWarning: token.orange4,
+    // 图标色 Icon
+    colorIconDefault: token.gray8,
+    colorIconHover: token.blue4,
+    colorIconDisabled: token.gray6,
+    colorIconFocus: token.blue4,
+    colorIconInverse: token.white,
+    colorIconInfo: token.blue4,
+    colorIconWarning: token.orange4,
+    colorIconSuccess: token.green4,
+    colorIconError: token.red4,
+    colorIconCritical: token.fuchsia4,
+    /**
+     * 兼容旧版「状态色」字段（与 DTCG 语义色并存；勿在新代码中使用，亦不在文档中列出）
+     */
+    colorDefaultText: token.colorText,
+    colorDefaultIcon: token.gray8,
+    colorDefaultFill: token.gray2,
+    colorDefaultBorder: token.gray2,
+    colorInfoText: token.blue6,
+    colorInfoIcon: token.blue6,
+    colorInfoFill: token.blue1,
+    colorInfoBorder: token.blue3,
+    colorSuccessText: token.green6,
+    colorSuccessIcon: token.green6,
+    colorSuccessFill: token.green1,
+    colorSuccessBorder: token.green3,
+    colorWarningText: token.orange6,
+    colorWarningIcon: token.orange6,
+    colorWarningFill: token.orange1,
+    colorWarningBorder: token.orange3,
+    colorErrorText: token.red6,
+    colorErrorIcon: token.red6,
+    colorErrorFill: token.red1,
+    colorErrorBorder: token.red3,
+    colorCriticalText: token.fuchsia6,
+    colorCriticalIcon: token.fuchsia6,
+    colorCriticalFill: token.fuchsia1,
+    colorCriticalBorder: token.fuchsia3,
+    // ==================== 字体 Token ====================
+    fontFamilyDefault: token.fontFamily,
+    fontFamilyCode: token.fontFamilyCode,
+    fontWeightSm: token.fontWeightWeak,
+    fontWeightMd: token.fontWeight,
+    fontWeightLg: token.fontWeightStrong,
+    fontSize300: token.fontSizeSM,
+    fontSize325: token.fontSize,
+    fontSize400: token.fontSizeLG,
+    fontSize450: token.fontSizeHeading3,
+    fontSize500: token.fontSizeHeading2,
+    fontLineHeight500: '20px',
+    fontLineHeight600: '24px',
+    fontLineHeight650: '26px',
+    fontLineHeight700: '28px',
+    fontH1: "".concat(token.fontWeightStrong, " ").concat(token.fontSizeHeading2, "px/var(--").concat(prefix, "-font-line-height-700) ").concat(token.fontFamily),
+    fontH2: "".concat(token.fontWeightStrong, " ").concat(token.fontSizeHeading3, "px/var(--").concat(prefix, "-font-line-height-650) ").concat(token.fontFamily),
+    fontH3: "".concat(token.fontWeightStrong, " ").concat(token.fontSizeLG, "px/var(--").concat(prefix, "-font-line-height-600) ").concat(token.fontFamily),
+    fontH4: "".concat(token.fontWeightStrong, " ").concat(token.fontSize, "px/var(--").concat(prefix, "-font-line-height-500) ").concat(token.fontFamily),
+    fontBody1: "".concat(token.fontWeight, " ").concat(token.fontSize, "px/var(--").concat(prefix, "-font-line-height-500) ").concat(token.fontFamily),
+    fontBody2: "".concat(token.fontWeightWeak, " ").concat(token.fontSizeSM, "px/var(--").concat(prefix, "-font-line-height-500) ").concat(token.fontFamily),
+    fontCaption: "".concat(token.fontWeightWeak, " ").concat(token.fontSizeSM, "px/var(--").concat(prefix, "-font-line-height-500) ").concat(token.fontFamily),
+    fontBodyCode: "".concat(token.fontWeight, " ").concat(token.fontSize, "px/var(--").concat(prefix, "-font-line-height-500) var(--").concat(prefix, "-font-family-code)"),
+    // ==================== 阴影 Token ====================
+    shadow1Top: '0px -1px 2px 0px hsla(219, 50%, 15%, 0.1)',
+    shadow1Bottom: '0px 1px 2px 0px hsla(219, 50%, 15%, 0.1)',
+    shadow1Left: '-1px 0px 2px 0px hsla(219, 50%, 15%, 0.1)',
+    shadow1Right: '1px 0px 2px 0px hsla(219, 50%, 15%, 0.1)',
+    shadow2: token.boxShadowSecondary,
+    // ==================== 圆角 Token ====================
+    radiusSm: token.borderRadius,
+    radiusMd: token.borderRadiusMD,
+    radiusLg: token.borderRadiusLG,
+    // ==================== 间距 Token ====================
+    space0: 0,
+    space50: 2,
+    space100: token.paddingXXS,
+    space150: 6,
+    space200: token.paddingXS,
+    space300: token.paddingSM,
+    space400: token.padding,
+    space500: token.paddingMD,
+    space600: token.paddingLG,
+    space800: token.paddingXL,
+    spaceNegative25: -1,
+    // ==================== 组件 Token ====================
+    // 导航 Navigation
+    naviColorBg: token.colorNaviBg,
+    naviColorBgHover: token.colorNaviBgHover,
+    naviColorBgFocus: token.colorNaviBgHover,
+    // 按钮 Button
+    btnColorPrimaryBg: token.blue4,
+    btnColorPrimaryBgHover: token.blue5,
+    btnColorPrimaryBgDisabled: token.blue3,
+    btnColorPrimaryText: token.white,
+    btnColorPrimaryIcon: token.white,
+    btnColorSecondaryBorder: token.blue4,
+    btnColorSecondaryText: token.blue4,
+    btnColorSecondaryIcon: token.blue4,
+    btnColorDangerBorder: token.red4,
+    btnColorDangerText: token.red4,
+    // 进度条 Progress
+    progressColorBgDefault: token.gray4,
+    progressColorBgLoading: token.blue4,
+    progressColorBgSuccess: token.green4,
+    progressColorBgError: token.red4,
+    // 开关 Switch
+    switchColorBgDefault: token.gray7,
+    switchColorBgDisabled: token.gray4,
+    switchColorBgActive: token.blue4,
+    switchColorBgDisabledSelected: token.gray5
+  };
+};
+
+/**
+ * 根据 token 生成 CSS 变量样式
+ */
+var genCssVariablesStyle = function genCssVariablesStyle(token) {
+  var _root;
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ob';
+  return [{
+    ':root': (_root = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-white"), token.white), "--".concat(prefix, "-gray-1"), token.gray1), "--".concat(prefix, "-gray-2"), token.gray2), "--".concat(prefix, "-gray-3"), token.gray3), "--".concat(prefix, "-gray-4"), token.gray4), "--".concat(prefix, "-gray-5"), token.gray5), "--".concat(prefix, "-gray-6"), token.gray6), "--".concat(prefix, "-gray-7"), token.gray7), "--".concat(prefix, "-gray-8"), token.gray8), "--".concat(prefix, "-gray-9"), token.gray9), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-gray-10"), token.colorText), "--".concat(prefix, "-black"), token.black), "--".concat(prefix, "-blue-1"), token.blue1), "--".concat(prefix, "-blue-2"), token.blue2), "--".concat(prefix, "-blue-3"), token.blue3), "--".concat(prefix, "-blue-4"), token.blue4), "--".concat(prefix, "-blue-5"), token.blue5), "--".concat(prefix, "-blue-6"), token.blue6), "--".concat(prefix, "-green-1"), token.green1), "--".concat(prefix, "-green-2"), token.green2), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-green-3"), token.green3), "--".concat(prefix, "-green-4"), token.green4), "--".concat(prefix, "-green-5"), token.green5), "--".concat(prefix, "-green-6"), token.green6), "--".concat(prefix, "-orange-1"), token.orange1), "--".concat(prefix, "-orange-2"), token.orange2), "--".concat(prefix, "-orange-3"), token.orange3), "--".concat(prefix, "-orange-4"), token.orange4), "--".concat(prefix, "-orange-5"), token.orange5), "--".concat(prefix, "-orange-6"), token.orange6), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-red-1"), token.red1), "--".concat(prefix, "-red-2"), token.red2), "--".concat(prefix, "-red-3"), token.red3), "--".concat(prefix, "-red-4"), token.red4), "--".concat(prefix, "-red-5"), token.red5), "--".concat(prefix, "-red-6"), token.red6), "--".concat(prefix, "-fuchsia-1"), token.fuchsia1), "--".concat(prefix, "-fuchsia-2"), token.fuchsia2), "--".concat(prefix, "-fuchsia-3"), token.fuchsia3), "--".concat(prefix, "-fuchsia-4"), token.fuchsia4), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-fuchsia-5"), token.fuchsia5), "--".concat(prefix, "-fuchsia-6"), token.fuchsia6), "--".concat(prefix, "-color-bg-default"), token.colorBgContainer), "--".concat(prefix, "-color-bg-primary"), token.gray1), "--".concat(prefix, "-color-bg-secondary"), token.gray2), "--".concat(prefix, "-color-bg-hover"), token.gray2), "--".concat(prefix, "-color-bg-hover-secondary"), token.gray3), "--".concat(prefix, "-color-bg-focus"), token.gray3), "--".concat(prefix, "-color-bg-selected"), token.blue4), "--".concat(prefix, "-color-bg-disabled"), token.gray2), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-color-bg-info"), token.blue1), "--".concat(prefix, "-color-bg-success"), token.green1), "--".concat(prefix, "-color-bg-warning"), token.orange1), "--".concat(prefix, "-color-bg-error"), token.red1), "--".concat(prefix, "-color-divider"), token.gray4), "--".concat(prefix, "-color-border-default"), token.gray5), "--".concat(prefix, "-color-border-container"), token.gray4), "--".concat(prefix, "-color-border-inverse"), token.white), "--".concat(prefix, "-color-border-hover"), token.gray7), "--".concat(prefix, "-color-border-selected"), token.blue4), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-color-border-focus"), token.blue4), "--".concat(prefix, "-color-border-success"), token.green4), "--".concat(prefix, "-color-border-error"), token.red4), "--".concat(prefix, "-color-border-warning"), token.orange4), "--".concat(prefix, "-color-text-default"), token.colorText), "--".concat(prefix, "-color-text-navigation"), token.gray9), "--".concat(prefix, "-color-text-label"), token.gray8), "--".concat(prefix, "-color-text-description"), token.gray7), "--".concat(prefix, "-color-text-disabled"), token.gray6), "--".concat(prefix, "-color-text-focus"), token.colorText), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-color-text-selected"), token.blue4), "--".concat(prefix, "-color-text-link"), token.blue4), "--".concat(prefix, "-color-text-inverse"), token.white), "--".concat(prefix, "-color-text-disabled-selected"), token.gray7), "--".concat(prefix, "-color-text-success"), token.green4), "--".concat(prefix, "-color-text-error"), token.red4), "--".concat(prefix, "-color-text-warning"), token.orange4), "--".concat(prefix, "-color-icon-default"), token.gray8), "--".concat(prefix, "-color-icon-hover"), token.blue4), "--".concat(prefix, "-color-icon-disabled"), token.gray6), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-color-icon-focus"), token.blue4), "--".concat(prefix, "-color-icon-inverse"), token.white), "--".concat(prefix, "-color-icon-info"), token.blue4), "--".concat(prefix, "-color-icon-warning"), token.orange4), "--".concat(prefix, "-color-icon-success"), token.green4), "--".concat(prefix, "-color-icon-error"), token.red4), "--".concat(prefix, "-color-icon-critical"), token.fuchsia4), "--".concat(prefix, "-color-default-text"), token.colorText), "--".concat(prefix, "-color-default-icon"), token.gray8), "--".concat(prefix, "-color-default-fill"), token.gray2), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-color-default-border"), token.gray2), "--".concat(prefix, "-color-info-text"), token.blue6), "--".concat(prefix, "-color-info-icon"), token.blue6), "--".concat(prefix, "-color-info-fill"), token.blue1), "--".concat(prefix, "-color-info-border"), token.blue3), "--".concat(prefix, "-color-success-text"), token.green6), "--".concat(prefix, "-color-success-icon"), token.green6), "--".concat(prefix, "-color-success-fill"), token.green1), "--".concat(prefix, "-color-success-border"), token.green3), "--".concat(prefix, "-color-warning-text"), token.orange6), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-color-warning-icon"), token.orange6), "--".concat(prefix, "-color-warning-fill"), token.orange1), "--".concat(prefix, "-color-warning-border"), token.orange3), "--".concat(prefix, "-color-error-text"), token.red6), "--".concat(prefix, "-color-error-icon"), token.red6), "--".concat(prefix, "-color-error-fill"), token.red1), "--".concat(prefix, "-color-error-border"), token.red3), "--".concat(prefix, "-color-critical-text"), token.fuchsia6), "--".concat(prefix, "-color-critical-icon"), token.fuchsia6), "--".concat(prefix, "-color-critical-fill"), token.fuchsia1), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-color-critical-border"), token.fuchsia3), "--".concat(prefix, "-font-family-default"), token.fontFamily), "--".concat(prefix, "-font-family-code"), token.fontFamilyCode), "--".concat(prefix, "-font-weight-sm"), "".concat(token.fontWeightWeak)), "--".concat(prefix, "-font-weight-md"), "".concat(token.fontWeight)), "--".concat(prefix, "-font-weight-lg"), "".concat(token.fontWeightStrong)), "--".concat(prefix, "-font-size-300"), "".concat(token.fontSizeSM, "px")), "--".concat(prefix, "-font-size-325"), "".concat(token.fontSize, "px")), "--".concat(prefix, "-font-size-400"), "".concat(token.fontSizeLG, "px")), "--".concat(prefix, "-font-size-450"), "".concat(token.fontSizeHeading3, "px")), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-font-size-500"), "".concat(token.fontSizeHeading2, "px")), "--".concat(prefix, "-font-line-height-500"), '20px'), "--".concat(prefix, "-font-line-height-600"), '24px'), "--".concat(prefix, "-font-line-height-650"), '26px'), "--".concat(prefix, "-font-line-height-700"), '28px'), "--".concat(prefix, "-font-h1"), "".concat(token.fontWeightStrong, " ").concat(token.fontSizeHeading2, "px/var(--").concat(prefix, "-font-line-height-700) ").concat(token.fontFamily)), "--".concat(prefix, "-font-h2"), "".concat(token.fontWeightStrong, " ").concat(token.fontSizeHeading3, "px/var(--").concat(prefix, "-font-line-height-650) ").concat(token.fontFamily)), "--".concat(prefix, "-font-h3"), "".concat(token.fontWeightStrong, " ").concat(token.fontSizeLG, "px/var(--").concat(prefix, "-font-line-height-600) ").concat(token.fontFamily)), "--".concat(prefix, "-font-h4"), "".concat(token.fontWeightStrong, " ").concat(token.fontSize, "px/var(--").concat(prefix, "-font-line-height-500) ").concat(token.fontFamily)), "--".concat(prefix, "-font-body1"), "".concat(token.fontWeight, " ").concat(token.fontSize, "px/var(--").concat(prefix, "-font-line-height-500) ").concat(token.fontFamily)), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-font-body2"), "".concat(token.fontWeightWeak, " ").concat(token.fontSizeSM, "px/var(--").concat(prefix, "-font-line-height-500) ").concat(token.fontFamily)), "--".concat(prefix, "-font-caption"), "".concat(token.fontWeightWeak, " ").concat(token.fontSizeSM, "px/var(--").concat(prefix, "-font-line-height-500) ").concat(token.fontFamily)), "--".concat(prefix, "-font-body-code"), "".concat(token.fontWeight, " ").concat(token.fontSize, "px/var(--").concat(prefix, "-font-line-height-500) var(--").concat(prefix, "-font-family-code)")), "--".concat(prefix, "-shadow-1-top"), '0px -1px 2px 0px hsla(219, 50%, 15%, 0.1)'), "--".concat(prefix, "-shadow-1-bottom"), '0px 1px 2px 0px hsla(219, 50%, 15%, 0.1)'), "--".concat(prefix, "-shadow-1-left"), '-1px 0px 2px 0px hsla(219, 50%, 15%, 0.1)'), "--".concat(prefix, "-shadow-1-right"), '1px 0px 2px 0px hsla(219, 50%, 15%, 0.1)'), "--".concat(prefix, "-shadow-2"), token.boxShadowSecondary), "--".concat(prefix, "-radius-sm"), "".concat(token.borderRadius, "px")), "--".concat(prefix, "-radius-md"), "".concat(token.borderRadiusMD, "px")), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-radius-lg"), "".concat(token.borderRadiusLG, "px")), "--".concat(prefix, "-space-0"), '0px'), "--".concat(prefix, "-space-50"), '2px'), "--".concat(prefix, "-space-100"), "".concat(token.paddingXXS, "px")), "--".concat(prefix, "-space-150"), '6px'), "--".concat(prefix, "-space-200"), "".concat(token.paddingXS, "px")), "--".concat(prefix, "-space-300"), "".concat(token.paddingSM, "px")), "--".concat(prefix, "-space-400"), "".concat(token.padding, "px")), "--".concat(prefix, "-space-500"), "".concat(token.paddingMD, "px")), "--".concat(prefix, "-space-600"), "".concat(token.paddingLG, "px")), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-space-800"), "".concat(token.paddingXL, "px")), "--".concat(prefix, "-space-negative-25"), '-1px'), "--".concat(prefix, "-navi-color-bg"), token.colorNaviBg), "--".concat(prefix, "-navi-color-bg-hover"), token.colorNaviBgHover), "--".concat(prefix, "-navi-color-bg-focus"), token.colorNaviBgHover), "--".concat(prefix, "-btn-color-primary-bg"), token.blue4), "--".concat(prefix, "-btn-color-primary-bg-hover"), token.blue5), "--".concat(prefix, "-btn-color-primary-bg-disabled"), token.blue3), "--".concat(prefix, "-btn-color-primary-text"), token.white), "--".concat(prefix, "-btn-color-primary-icon"), token.white), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-btn-color-secondary-border"), token.blue4), "--".concat(prefix, "-btn-color-secondary-text"), token.blue4), "--".concat(prefix, "-btn-color-secondary-icon"), token.blue4), "--".concat(prefix, "-btn-color-danger-border"), token.red4), "--".concat(prefix, "-btn-color-danger-text"), token.red4), "--".concat(prefix, "-progress-color-bg-default"), token.gray4), "--".concat(prefix, "-progress-color-bg-loading"), token.blue4), "--".concat(prefix, "-progress-color-bg-success"), token.green4), "--".concat(prefix, "-progress-color-bg-error"), token.red4), "--".concat(prefix, "-switch-color-bg-default"), token.gray7), _defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-switch-color-bg-disabled"), token.gray4), "--".concat(prefix, "-switch-color-bg-active"), token.blue4), "--".concat(prefix, "-switch-color-bg-disabled-selected"), token.gray5))
+  }];
+};
+/**
+ * CSS 变量注入组件
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ */
+var CssVariablesStyle = function CssVariablesStyle(_ref) {
+  var _ref$prefix = _ref.prefix,
+    prefix = _ref$prefix === void 0 ? 'ob' : _ref$prefix;
+  var _themeConfig$useToken = themeConfig.useToken(),
+    theme = _themeConfig$useToken.theme,
+    token = _themeConfig$useToken.token;
+  var wrapSSR = useStyleRegister({
+    theme: theme,
+    token: token,
+    path: ['ob-css-variables'],
+    hashId: '',
+    order: -1001 // 在全局样式之前注入
+  }, function () {
+    return genCssVariablesStyle(token, prefix);
+  });
+  return wrapSSR( /*#__PURE__*/_jsx(_Fragment, {}));
+};
+export { CssVariablesStyle, genCssVariablesStyle, genObToken };
+export default CssVariablesStyle;

package/es/theme/obTokenMeta.d.ts

@@ -0,0 +1,24 @@
+/**
+ * CSS Variables Metadata
+ * CSS 变量元数据定义，用于文档展示
+ */
+export type ObTokenCategory = 'color' | 'color-bg' | 'color-border' | 'color-text' | 'color-icon' | 'font' | 'shadow' | 'radius' | 'space' | 'component';
+export interface ObTokenMeta {
+    /** 变量名 (不含前缀) */
+    name: string;
+    /** 描述 */
+    desc: string;
+    /** 英文描述 */
+    descEn?: string;
+    /** 分类 */
+    category: ObTokenCategory;
+    /** token 来源 (用于获取值) */
+    token?: string;
+    /** 固定值 (非 token) */
+    value?: string;
+}
+/**
+ * CSS 变量元数据
+ */
+export declare const obTokenMeta: ObTokenMeta[];
+export default obTokenMeta;