@oceanbase/design 1.0.0-alpha.1 → 1.0.0-alpha.11

package/es/spin/index.js

@@ -5,8 +5,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+"use client";
 import { Spin as AntSpin } from 'antd';
 import classNames from 'classnames';
 import React, { useContext } from 'react';
@@ -36,9 +43,10 @@ var Spin = function Spin(_ref) {
   var isGrayIndicator = isDefaultIndicator && gray;
   var prefixCls = getPrefixCls('spin', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR;
+    _useStyle2 = _slicedToArray(_useStyle, 1),
+    wrapCSSVar = _useStyle2[0];
   var spinCls = classNames(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-oceanbase"), isDefaultIndicator), "".concat(prefixCls, "-oceanbase-gray"), isGrayIndicator), className);
-  return wrapSSR( /*#__PURE__*/_jsx(AntSpin, _objectSpread({
+  return wrapCSSVar( /*#__PURE__*/_jsx(AntSpin, _objectSpread({
     prefixCls: customizePrefixCls,
     className: spinCls,
     indicator: indicator

package/es/spin/style/index.d.ts

@@ -1,13 +1,10 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type SpinToken = FullToken<'Spin'> & {
     spinDotSize: number;
     spinDotSizeSM: number;
     spinDotSizeLG: number;
 };
 export declare const genSpinStyle: GenerateStyle<SpinToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
 export default _default;

package/es/spin/style/index.js

@@ -4,12 +4,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+import { genStyleHooks } from "../../_util/genComponentStyleHook";
 var genSizeStyle = function genSizeStyle(spinDotSize, token) {
   var componentCls = token.componentCls,
-    colorText = token.colorText;
+    colorText = token.colorText,
+    calc = token.calc;
   var spinDotWidth = spinDotSize;
-  var spinDotHight = spinDotWidth * (295 / 397);
+  var spinDotHight = calc(spinDotWidth).mul(295).div(397).equal();
   return _defineProperty({}, "&".concat(componentCls, "-oceanbase"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-dot"), {
     width: spinDotWidth,
     height: spinDotHight
@@ -20,22 +21,23 @@ var genSizeStyle = function genSizeStyle(spinDotSize, token) {
 };
 var genNestedSizeStyle = function genNestedSizeStyle(spinDotSize, token) {
   var componentCls = token.componentCls,
-    fontSize = token.fontSize;
+    fontSize = token.fontSize,
+    calc = token.calc;
   var spinDotWidth = spinDotSize;
   // oceanbase indicator is rectangle instead of square, should calculate actual height by ratio
   // width: 295px
   // height: 397px
-  var spinDotHight = spinDotWidth * (295 / 397);
-  var dotMarginLeft = -spinDotWidth / 2;
-  var dotMarginTop = -spinDotHight / 2;
-  var textPaddingTop = (spinDotHight - fontSize) / 2 + 2;
+  var spinDotHight = calc(spinDotWidth).mul(295).div(397).equal();
+  var dotMarginLeft = calc(spinDotWidth).div(-2).equal();
+  var dotMarginTop = calc(spinDotHight).div(-2).equal();
+  var textPaddingTop = calc(spinDotHight).sub(fontSize).div(2).add(2).equal();
   return _defineProperty({}, "&".concat(componentCls, "-oceanbase, & > ").concat(componentCls, "-oceanbase"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-dot"), {
     marginLeft: dotMarginLeft,
     marginTop: dotMarginTop
   }), "".concat(componentCls, "-text"), {
     paddingTop: textPaddingTop
   }), "&".concat(componentCls, "-show-text ").concat(componentCls, "-dot"), {
-    marginTop: dotMarginTop - 10
+    marginTop: calc(dotMarginTop).sub(10).equal()
   }));
 };
 export var genSpinStyle = function genSpinStyle(token) {
@@ -45,22 +47,20 @@ export var genSpinStyle = function genSpinStyle(token) {
     spinDotSizeLG = token.spinDotSizeLG;
   return _defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({}, "&", genSizeStyle(spinDotSize, token)), "&-sm", genSizeStyle(spinDotSizeSM, token)), "&-lg", genSizeStyle(spinDotSizeLG, token))), "".concat(componentCls, "-nested-loading"), _defineProperty({}, "> div > ".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({}, "&", genNestedSizeStyle(spinDotSize, token)), "&-sm", genNestedSizeStyle(spinDotSizeSM, token)), "&-lg", genNestedSizeStyle(spinDotSizeLG, token))));
 };
-export default (function (prefixCls) {
-  var useStyle = genComponentStyleHook('Spin', function (token) {
-    // should expand by 2x for oceanbase indicator
-    // because it's inner padding is smaller than antd default indicator
-    // const ratio = 3;
-    return [genSpinStyle(_objectSpread(_objectSpread({}, token), {}, {
-      // https://github.com/ant-design/ant-design/blob/master/components/spin/style/index.tsx#L238
-      // spinDotSize: (token.controlHeightLG / 2) * ratio,
-      // spinDotSizeSM: token.controlHeightLG * 0.35 * ratio,
-      // spinDotSizeLG: token.controlHeight * ratio,
-      spinDotSize: token.controlHeight * 1.75,
-      // 56,
-      spinDotSizeSM: token.controlHeight * 1.125,
-      // 36
-      spinDotSizeLG: token.controlHeight * 2.25 // 72
-    }))];
-  });
-  return useStyle(prefixCls);
+export default genStyleHooks('Spin', function (token) {
+  // should expand by 2x for oceanbase indicator
+  // because it's inner padding is smaller than antd default indicator
+  // const ratio = 3;
+  var calc = token.calc;
+  return [genSpinStyle(_objectSpread(_objectSpread({}, token), {}, {
+    // https://github.com/ant-design/ant-design/blob/master/components/spin/style/index.tsx#L238
+    // spinDotSize: (token.controlHeightLG / 2) * ratio,
+    // spinDotSizeSM: token.controlHeightLG * 0.35 * ratio,
+    // spinDotSizeLG: token.controlHeight * ratio,
+    spinDotSize: calc(token.controlHeight).mul(1.75).equal(),
+    // 56,
+    spinDotSizeSM: calc(token.controlHeight).mul(1.125).equal(),
+    // 36
+    spinDotSizeLG: calc(token.controlHeight).mul(2.25).equal() // 72
+  }))];
 });

package/es/static-function/index.js

@@ -5,17 +5,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
+"use client";
+import { useContext } from 'react';
 import { App, message as antMessage, Modal as AntModal, notification as antNotification } from 'antd';
 import formatToken from 'antd/lib/theme/util/alias';
+import ConfigProvider from "../config-provider";
+import useModalStyle from "../modal/style";
 import theme from "../theme";
 import defaultTheme from "../theme/default";
 var defaultAlgorithm = theme.defaultAlgorithm,
   defaultSeed = theme.defaultSeed,
   useToken = theme.useToken;
 
-// 设置默认 token
+// set default token
 var mapToken = _objectSpread(_objectSpread(_objectSpread({}, defaultAlgorithm(defaultSeed)), defaultTheme.token), {}, {
-  // 需要覆盖部分 Alias Token 的值
+  // need to override some Alias Token values
   override: {
     boxShadow: (_defaultTheme$token = defaultTheme.token) === null || _defaultTheme$token === void 0 ? void 0 : _defaultTheme$token.boxShadow,
     boxShadowSecondary: (_defaultTheme$token2 = defaultTheme.token) === null || _defaultTheme$token2 === void 0 ? void 0 : _defaultTheme$token2.boxShadowSecondary,
@@ -27,10 +31,16 @@ var message = antMessage;
 var notification = antNotification;
 var modal = AntModal;
 export default (function () {
-  // 自动注入 useToken，避免每次使用都要声明一遍，比较繁琐
+  // automatically inject useToken, avoid declaring it every time
   token = useToken().token;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('modal');
+
+  // register Modal style, ensure static function can also apply style
+  useModalStyle(prefixCls);
   var staticFunction = App.useApp();
-  // 替换 antd 的静态方法，支持消费 ConfigProvider 配置
+  // replace antd's static methods, support consuming ConfigProvider configuration
   message = _objectSpread(_objectSpread({}, staticFunction.message), {}, {
     useMessage: antMessage.useMessage
   });

package/es/statistic/index.js

@@ -1 +1,2 @@
+"use client";
 export * from 'antd/es/statistic';

package/es/steps/index.js

@@ -1 +1,2 @@
+"use client";
 export * from 'antd/es/steps';

package/es/style/cssVariables.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 '../theme/interface';
+/**
+ * 根据 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 };
+export default CssVariablesStyle;

package/es/style/cssVariables.js

@@ -0,0 +1,49 @@
+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); }
+"use client";
+/**
+ * OceanBase Design System - CSS Variables Style
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ * 根据主题 token 值动态生成
+ */
+
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import themeConfig from "../theme";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 根据 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.gray3), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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-focus"), token.blue4), "--".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), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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), "--".concat(prefix, "-color-text-selected"), token.blue4), "--".concat(prefix, "-color-text-link"), token.blue4), "--".concat(prefix, "-color-text-inverse"), token.white), "--".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-default-text"), token.colorText), "--".concat(prefix, "-color-default-icon"), token.gray8), "--".concat(prefix, "-color-default-fill"), token.gray2), "--".concat(prefix, "-color-default-border"), token.gray2), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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), "--".concat(prefix, "-color-warning-icon"), token.orange6), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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), "--".concat(prefix, "-color-critical-border"), token.fuchsia3), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".concat(prefix, "-font-family-default"), token.fontFamily), "--".concat(prefix, "-font-weight-sm"), token.fontWeightWeak), "--".concat(prefix, "-font-weight-md"), token.fontWeight), "--".concat(prefix, "-font-weight-lg"), 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")), "--".concat(prefix, "-font-size-500"), "".concat(token.fontSizeHeading2, "px")), "--".concat(prefix, "-font-line-height-500"), '20px'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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)), "--".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)), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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")), "--".concat(prefix, "-radius-lg"), "".concat(token.borderRadiusLG, "px")), "--".concat(prefix, "-space-0"), '0px'), "--".concat(prefix, "-space-50"), '2px'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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")), "--".concat(prefix, "-space-800"), "".concat(token.paddingXL, "px")), "--".concat(prefix, "-spacing-negative-25"), '-1px'), "--".concat(prefix, "-navi-color-bg"), token.colorNaviBg), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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), "--".concat(prefix, "-btn-color-secondary-border"), token.blue4), "--".concat(prefix, "-btn-color-secondary-text"), token.blue4), "--".concat(prefix, "-btn-color-secondary-icon"), token.blue4), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_root, "--".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), "--".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 };
+export default CssVariablesStyle;

package/es/style/cssVariablesMeta.d.ts

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