@oceanbase/design 1.0.0-alpha.7 → 1.0.0-alpha.9

package/lib/descriptions/style/index.js

@@ -67,13 +67,31 @@ var genDescriptionsStyle = (token) => {
   const { componentCls, typographyComponentCls, calc } = token;
   return {
     [`${componentCls}`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.margin
+      },
+      // collapsible title style
+      [`${componentCls}-title-wrapper`]: {
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        userSelect: "none",
+        [`${componentCls}-collapsible-icon`]: {
+          fontSize: token.fontSizeLG
+        }
+      },
       ...genVerticalStyle("default", token),
+      [`${componentCls}-row > th, ${componentCls}-row > td`]: {
+        paddingRight: token.paddingLG
+      },
       [`${componentCls}-item-label`]: {
-        fontWeight: token.fontWeightWeak
+        fontWeight: token.fontWeightWeak,
+        [`&${componentCls}-item-no-colon::after`]: {
+          display: "none"
+        }
       },
       [`${componentCls}-item-container`]: {
         [`${componentCls}-item-content`]: {
-          paddingRight: 12,
           [`${typographyComponentCls}-edit-content`]: {
             insetInlineStart: 0,
             marginTop: 0,
@@ -86,8 +104,71 @@ var genDescriptionsStyle = (token) => {
         height: calc(token.fontSize).mul(token.lineHeight).equal()
       }
     },
-    [`${componentCls}${componentCls}-middle`]: genVerticalStyle("middle", token),
-    [`${componentCls}${componentCls}-small`]: genVerticalStyle("small", token)
+    [`${componentCls}${componentCls}-middle`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.marginSM
+      },
+      ...genVerticalStyle("middle", token)
+    },
+    [`${componentCls}${componentCls}-small`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.marginXS
+      },
+      ...genVerticalStyle("small", token)
+    },
+    // collapsed state
+    [`${componentCls}${componentCls}-collapsed`]: {
+      [`${componentCls}-view`]: {
+        display: "none"
+      }
+    },
+    // contentAlign="left": label column auto width based on longest label
+    // For non-bordered mode: use CSS Grid to make label and content align across rows
+    [`${componentCls}${componentCls}-content-align-left:not(${componentCls}-bordered)`]: {
+      [`${componentCls}-view`]: {
+        display: "block"
+      },
+      // Make table, tbody, tr, td all transparent to grid layout
+      [`${componentCls}-view > table`]: {
+        display: "grid",
+        gridTemplateColumns: "auto 1fr"
+      },
+      [`${componentCls}-view > table > tbody`]: {
+        display: "contents"
+      },
+      [`${componentCls}-row`]: {
+        display: "contents"
+      },
+      [`${componentCls}-row > td${componentCls}-item`]: {
+        display: "contents"
+      },
+      [`${componentCls}-item-container`]: {
+        display: "contents"
+      },
+      [`${componentCls}-item-label`]: {
+        whiteSpace: "nowrap",
+        paddingBottom: token.padding,
+        paddingInlineEnd: token.paddingLG
+      },
+      [`${componentCls}-item-content`]: {
+        paddingBottom: token.padding
+      }
+    },
+    // For bordered mode: label and content are in separate th and td
+    [`${componentCls}${componentCls}-content-align-left${componentCls}-bordered`]: {
+      [`${componentCls}-view > table`]: {
+        tableLayout: "auto"
+      },
+      [`${componentCls}-row`]: {
+        [`& > th`]: {
+          whiteSpace: "nowrap",
+          width: 1
+        },
+        [`& > td`]: {
+          width: "100%"
+        }
+      }
+    }
   };
 };
 var style_default = (prefixCls, typographyPrefixCls) => {

package/lib/drawer/style/index.js

@@ -26,14 +26,16 @@ module.exports = __toCommonJS(style_exports);
 var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genDrawerStyle = (token) => {
-  const { componentCls, antCls, fontSizeHeading3, colorSplit, calc } = token;
+  const { componentCls, antCls, iconCls, fontSizeHeading3, colorSplit, calc } = token;
   const contentPadding = token.paddingLG;
-  const boxShadowBottom = "0 2px 4px 0 rgba(54,69,99,0.04), 0 1px 6px -1px rgba(54,69,99,0.04), 0 1px 2px 0 rgba(54,69,99,0.06)";
-  const boxShadowTop = "0 -2px 4px 0 rgba(54,69,99,0.04), 0 -1px 6px -1px rgba(54,69,99,0.04), 0 -1px 2px 0 rgba(54,69,99,0.06)";
+  const boxShadowTop = "0 -1px 2px 0 rgba(19, 33, 57, 0.1)";
+  const boxShadowBottom = "0 1px 2px 0 rgba(19, 33, 57, 0.1)";
   return {
     [`${componentCls}`]: {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
+        // to avoid x scroll
+        overflow: "initial",
         [`${componentCls}-header`]: {
           position: "relative",
           padding: `${(0, import_cssinjs.unit)(token.padding)} ${(0, import_cssinjs.unit)(token.paddingLG)}`,
@@ -42,7 +44,10 @@ var genDrawerStyle = (token) => {
           // ensure header box-shadow cover body content
           zIndex: 10,
           [`${componentCls}-title`]: {
-            fontSize: fontSizeHeading3
+            fontSize: fontSizeHeading3,
+            [iconCls]: {
+              fontSize: token.fontSizeLG
+            }
           },
           // 标题栏底部增加分割线
           "&::after": {

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/form/FormItem.js

@@ -85,24 +85,23 @@ var FormItem = ({
   }
   const isVertical = layout === "vertical" || vertical;
   const descriptionContent = description && isVertical ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-item-description`, children: description }) : null;
+  const actionContent = action && (layout === "vertical" || vertical) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item-action`, children: action }) : null;
   return wrapSSR(
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       AntFormItem,
       {
         layout,
-        label: action && (layout === "vertical" || vertical) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        label: actionContent || descriptionContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
           label,
-          action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item-action`, children: action })
+          actionContent,
+          descriptionContent
         ] }) : label,
         tooltip,
         required: (0, import_lodash.isPlainObject)(children) && ((_a = children.type) == null ? void 0 : _a.__ANT_SWITCH) ? true : void 0,
         prefixCls: customizePrefixCls,
         className: formItemCls,
         ...restProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          descriptionContent,
-          children
-        ] })
+        children
       }
     )
   );

package/lib/form/style/index.js

@@ -28,6 +28,7 @@ var genFormStyle = (token) => {
   const { componentCls, calc } = token;
   return {
     [componentCls]: {
+      // extra style
       [`${componentCls}-item-explain, ${componentCls}-item-extra`]: {
         paddingTop: token.paddingXXS,
         fontSize: token.fontSizeSM
@@ -36,27 +37,28 @@ var genFormStyle = (token) => {
         paddingTop: 0
       }
     },
+    // vertical layout style
     [`${componentCls}${componentCls}-vertical`]: {
       [`${componentCls}-item:not(${componentCls}-item-horizontal)`]: {
-        [`${componentCls}-item-label > label`]: {
-          width: "100%",
-          [`${componentCls}-item-action`]: {
-            position: "absolute",
-            right: 0
-          }
-        }
-      },
-      [`${componentCls}-item-has-description`]: {
+        // description style
         [`${componentCls}-item-control-input`]: {
           minHeight: "auto"
         },
         [`${componentCls}-item-label`]: {
-          paddingBottom: token.paddingXXS
+          paddingBottom: calc(token.paddingXXS).add(2).equal()
         },
         [`${componentCls}-item-description`]: {
-          paddingBottom: calc(token.paddingXXS).add(2).equal(),
+          paddingTop: token.paddingXXS,
           fontSize: token.fontSizeSM,
           color: token.colorTextDescription
+        },
+        // action style
+        [`${componentCls}-item-label > label`]: {
+          width: "100%",
+          [`${componentCls}-item-action`]: {
+            position: "absolute",
+            right: 0
+          }
         }
       }
     }

package/lib/slider/style/index.js

@@ -23,11 +23,14 @@ __export(style_exports, {
   genSliderStyle: () => genSliderStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genSliderStyle = (token) => {
   const { componentCls, dotSize = 8, handleSize = 10, handleLineWidth = 2, calc } = token;
-  const dotSizeHalf = calc(dotSize).div(2).equal();
-  const handleOffset = calc(handleSize).add(calc(handleLineWidth).mul(2).equal()).div(2).equal();
+  const dotSizeHalf = (0, import_cssinjs.unit)(calc(dotSize).div(2).equal());
+  const handleOffset = (0, import_cssinjs.unit)(
+    calc(handleSize).add(calc(handleLineWidth).mul(2).equal()).div(2).equal()
+  );
   return {
     [`${componentCls}${componentCls}-horizontal`]: {
       [`${componentCls}-mark`]: {

package/lib/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/lib/style/cssVariables.js

@@ -0,0 +1,261 @@
+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/cssVariables.tsx
+var cssVariables_exports = {};
+__export(cssVariables_exports, {
+  CssVariablesStyle: () => CssVariablesStyle,
+  default: () => cssVariables_default,
+  genCssVariablesStyle: () => genCssVariablesStyle
+});
+module.exports = __toCommonJS(cssVariables_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_theme = __toESM(require("../theme"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var genCssVariablesStyle = (token, prefix = "ob") => {
+  return [
+    {
+      ":root": {
+        // ==================== 基础颜色 Token ====================
+        // 中性色 Neutral
+        [`--${prefix}-white`]: token.white,
+        [`--${prefix}-gray-1`]: token.gray1,
+        [`--${prefix}-gray-2`]: token.gray2,
+        [`--${prefix}-gray-3`]: token.gray3,
+        [`--${prefix}-gray-4`]: token.gray4,
+        [`--${prefix}-gray-5`]: token.gray5,
+        [`--${prefix}-gray-6`]: token.gray6,
+        [`--${prefix}-gray-7`]: token.gray7,
+        [`--${prefix}-gray-8`]: token.gray8,
+        [`--${prefix}-gray-9`]: token.gray9,
+        [`--${prefix}-gray-10`]: token.colorText,
+        [`--${prefix}-black`]: token.black,
+        // 蓝色 Blue
+        [`--${prefix}-blue-1`]: token.blue1,
+        [`--${prefix}-blue-2`]: token.blue2,
+        [`--${prefix}-blue-3`]: token.blue3,
+        [`--${prefix}-blue-4`]: token.blue4,
+        [`--${prefix}-blue-5`]: token.blue5,
+        [`--${prefix}-blue-6`]: token.blue6,
+        // 绿色 Green
+        [`--${prefix}-green-1`]: token.green1,
+        [`--${prefix}-green-2`]: token.green2,
+        [`--${prefix}-green-3`]: token.green3,
+        [`--${prefix}-green-4`]: token.green4,
+        [`--${prefix}-green-5`]: token.green5,
+        [`--${prefix}-green-6`]: token.green6,
+        // 橙色 Orange
+        [`--${prefix}-orange-1`]: token.orange1,
+        [`--${prefix}-orange-2`]: token.orange2,
+        [`--${prefix}-orange-3`]: token.orange3,
+        [`--${prefix}-orange-4`]: token.orange4,
+        [`--${prefix}-orange-5`]: token.orange5,
+        [`--${prefix}-orange-6`]: token.orange6,
+        // 红色 Red
+        [`--${prefix}-red-1`]: token.red1,
+        [`--${prefix}-red-2`]: token.red2,
+        [`--${prefix}-red-3`]: token.red3,
+        [`--${prefix}-red-4`]: token.red4,
+        [`--${prefix}-red-5`]: token.red5,
+        [`--${prefix}-red-6`]: token.red6,
+        // 紫色 Fuchsia
+        [`--${prefix}-fuchsia-1`]: token.fuchsia1,
+        [`--${prefix}-fuchsia-2`]: token.fuchsia2,
+        [`--${prefix}-fuchsia-3`]: token.fuchsia3,
+        [`--${prefix}-fuchsia-4`]: token.fuchsia4,
+        [`--${prefix}-fuchsia-5`]: token.fuchsia5,
+        [`--${prefix}-fuchsia-6`]: token.fuchsia6,
+        // ==================== 语义颜色 Token ====================
+        // 填充色 Background
+        [`--${prefix}-color-bg-default`]: token.colorBgContainer,
+        [`--${prefix}-color-bg-primary`]: token.gray1,
+        [`--${prefix}-color-bg-secondary`]: token.gray2,
+        [`--${prefix}-color-bg-hover`]: token.gray2,
+        [`--${prefix}-color-bg-hover-secondary`]: token.gray3,
+        [`--${prefix}-color-bg-focus`]: token.gray3,
+        [`--${prefix}-color-bg-active`]: token.blue4,
+        [`--${prefix}-color-bg-disabled`]: token.gray3,
+        // 边框色 Border
+        [`--${prefix}-color-divider`]: token.gray4,
+        [`--${prefix}-color-border-default`]: token.gray5,
+        [`--${prefix}-color-border-container`]: token.gray4,
+        [`--${prefix}-color-border-inverse`]: token.white,
+        [`--${prefix}-color-border-hover`]: token.blue4,
+        [`--${prefix}-color-border-focus`]: token.blue4,
+        [`--${prefix}-color-border-error`]: token.red4,
+        [`--${prefix}-color-border-warning`]: token.orange4,
+        // 文本色 Text
+        [`--${prefix}-color-text-default`]: token.colorText,
+        [`--${prefix}-color-text-navigation`]: token.gray9,
+        [`--${prefix}-color-text-label`]: token.gray8,
+        [`--${prefix}-color-text-info`]: token.gray7,
+        [`--${prefix}-color-text-disabled`]: token.gray6,
+        [`--${prefix}-color-text-focus`]: token.colorText,
+        [`--${prefix}-color-text-selected`]: token.blue4,
+        [`--${prefix}-color-text-link`]: token.blue4,
+        [`--${prefix}-color-text-inverse`]: token.white,
+        // 图标色 Icon
+        [`--${prefix}-color-icon-default`]: token.gray8,
+        [`--${prefix}-color-icon-hover`]: token.blue4,
+        [`--${prefix}-color-icon-disabled`]: token.gray6,
+        [`--${prefix}-color-icon-focus`]: token.blue4,
+        [`--${prefix}-color-icon-inverse`]: token.white,
+        [`--${prefix}-color-icon-info`]: token.blue4,
+        [`--${prefix}-color-icon-warning`]: token.orange4,
+        [`--${prefix}-color-icon-success`]: token.green4,
+        [`--${prefix}-color-icon-error`]: token.red4,
+        // 状态色
+        [`--${prefix}-color-default-text`]: token.colorText,
+        [`--${prefix}-color-default-icon`]: token.gray8,
+        [`--${prefix}-color-default-fill`]: token.gray2,
+        [`--${prefix}-color-default-border`]: token.gray2,
+        [`--${prefix}-color-info-text`]: token.blue6,
+        [`--${prefix}-color-info-icon`]: token.blue6,
+        [`--${prefix}-color-info-fill`]: token.blue1,
+        [`--${prefix}-color-info-border`]: token.blue3,
+        [`--${prefix}-color-success-text`]: token.green6,
+        [`--${prefix}-color-success-icon`]: token.green6,
+        [`--${prefix}-color-success-fill`]: token.green1,
+        [`--${prefix}-color-success-border`]: token.green3,
+        [`--${prefix}-color-warning-text`]: token.orange6,
+        [`--${prefix}-color-warning-icon`]: token.orange6,
+        [`--${prefix}-color-warning-fill`]: token.orange1,
+        [`--${prefix}-color-warning-border`]: token.orange3,
+        [`--${prefix}-color-error-text`]: token.red6,
+        [`--${prefix}-color-error-icon`]: token.red6,
+        [`--${prefix}-color-error-fill`]: token.red1,
+        [`--${prefix}-color-error-border`]: token.red3,
+        [`--${prefix}-color-critical-text`]: token.fuchsia6,
+        [`--${prefix}-color-critical-icon`]: token.fuchsia6,
+        [`--${prefix}-color-critical-fill`]: token.fuchsia1,
+        [`--${prefix}-color-critical-border`]: token.fuchsia3,
+        // ==================== 字体 Token ====================
+        [`--${prefix}-font-family-default`]: token.fontFamily,
+        // 字重
+        [`--${prefix}-font-weight-sm`]: token.fontWeightWeak,
+        [`--${prefix}-font-weight-md`]: token.fontWeight,
+        [`--${prefix}-font-weight-lg`]: token.fontWeightStrong,
+        // 字号
+        [`--${prefix}-font-size-300`]: `${token.fontSizeSM}px`,
+        [`--${prefix}-font-size-325`]: `${token.fontSize}px`,
+        [`--${prefix}-font-size-400`]: `${token.fontSizeLG}px`,
+        [`--${prefix}-font-size-450`]: `${token.fontSizeHeading3}px`,
+        [`--${prefix}-font-size-500`]: `${token.fontSizeHeading2}px`,
+        // 行高
+        [`--${prefix}-font-line-height-500`]: "20px",
+        [`--${prefix}-font-line-height-600`]: "24px",
+        [`--${prefix}-font-line-height-650`]: "26px",
+        [`--${prefix}-font-line-height-700`]: "28px",
+        // 语义字体 Token (使用 font 简写: weight size/line-height family)
+        // font-h1: 页容器一级标题
+        [`--${prefix}-font-h1`]: `${token.fontWeightStrong} ${token.fontSizeHeading2}px/var(--${prefix}-font-line-height-700) ${token.fontFamily}`,
+        // font-h2: 页容器二级标题、抽屉弹窗标题
+        [`--${prefix}-font-h2`]: `${token.fontWeightStrong} ${token.fontSizeHeading3}px/var(--${prefix}-font-line-height-650) ${token.fontFamily}`,
+        // font-h3: 卡片标题、表单一级分组标题
+        [`--${prefix}-font-h3`]: `${token.fontWeightStrong} ${token.fontSizeLG}px/var(--${prefix}-font-line-height-600) ${token.fontFamily}`,
+        // font-h4: 表单二级分组标题
+        [`--${prefix}-font-h4`]: `${token.fontWeightStrong} ${token.fontSize}px/var(--${prefix}-font-line-height-500) ${token.fontFamily}`,
+        // font-body1: 常规正文
+        [`--${prefix}-font-body1`]: `${token.fontWeight} ${token.fontSize}px/var(--${prefix}-font-line-height-500) ${token.fontFamily}`,
+        // font-body2: 表格文本
+        [`--${prefix}-font-body2`]: `${token.fontWeightWeak} ${token.fontSizeSM}px/var(--${prefix}-font-line-height-500) ${token.fontFamily}`,
+        // font-caption: 描述
+        [`--${prefix}-font-caption`]: `${token.fontWeightWeak} ${token.fontSizeSM}px/var(--${prefix}-font-line-height-500) ${token.fontFamily}`,
+        // ==================== 阴影 Token ====================
+        [`--${prefix}-shadow-1-top`]: "0px -1px 2px 0px hsla(219, 50%, 15%, 0.1)",
+        [`--${prefix}-shadow-1-bottom`]: "0px 1px 2px 0px hsla(219, 50%, 15%, 0.1)",
+        [`--${prefix}-shadow-1-left`]: "-1px 0px 2px 0px hsla(219, 50%, 15%, 0.1)",
+        [`--${prefix}-shadow-1-right`]: "1px 0px 2px 0px hsla(219, 50%, 15%, 0.1)",
+        [`--${prefix}-shadow-2`]: token.boxShadowSecondary,
+        // ==================== 圆角 Token ====================
+        [`--${prefix}-radius-sm`]: `${token.borderRadius}px`,
+        [`--${prefix}-radius-md`]: `${token.borderRadiusMD}px`,
+        [`--${prefix}-radius-lg`]: `${token.borderRadiusLG}px`,
+        // ==================== 间距 Token ====================
+        [`--${prefix}-space-0`]: "0px",
+        [`--${prefix}-space-50`]: "2px",
+        [`--${prefix}-space-100`]: `${token.paddingXXS}px`,
+        [`--${prefix}-space-150`]: "6px",
+        [`--${prefix}-space-200`]: `${token.paddingXS}px`,
+        [`--${prefix}-space-300`]: `${token.paddingSM}px`,
+        [`--${prefix}-space-400`]: `${token.padding}px`,
+        [`--${prefix}-space-500`]: `${token.paddingMD}px`,
+        [`--${prefix}-space-600`]: `${token.paddingLG}px`,
+        [`--${prefix}-space-800`]: `${token.paddingXL}px`,
+        [`--${prefix}-spacing-negative-25`]: "-1px",
+        // ==================== 组件 Token ====================
+        // 导航 Navigation
+        [`--${prefix}-navi-color-bg`]: token.colorNaviBg,
+        [`--${prefix}-navi-color-bg-hover`]: token.colorNaviBgHover,
+        [`--${prefix}-navi-color-bg-focus`]: token.colorNaviBgHover,
+        // 按钮 Button
+        [`--${prefix}-btn-color-primary-bg`]: token.blue4,
+        [`--${prefix}-btn-color-primary-bg-hover`]: token.blue5,
+        [`--${prefix}-btn-color-primary-bg-disabled`]: token.blue3,
+        [`--${prefix}-btn-color-primary-text`]: token.white,
+        [`--${prefix}-btn-color-primary-icon`]: token.white,
+        [`--${prefix}-btn-color-secondary-border`]: token.blue4,
+        [`--${prefix}-btn-color-secondary-text`]: token.blue4,
+        [`--${prefix}-btn-color-secondary-icon`]: token.blue4,
+        [`--${prefix}-btn-color-danger-border`]: token.red4,
+        [`--${prefix}-btn-color-danger-text`]: token.red4,
+        // 进度条 Progress
+        [`--${prefix}-progress-color-bg-default`]: token.gray4,
+        [`--${prefix}-progress-color-bg-loading`]: token.blue4,
+        [`--${prefix}-progress-color-bg-success`]: token.green4,
+        [`--${prefix}-progress-color-bg-error`]: token.red4,
+        // 开关 Switch
+        [`--${prefix}-switch-color-bg-default`]: token.gray7,
+        [`--${prefix}-switch-color-bg-disabled`]: token.gray4,
+        [`--${prefix}-switch-color-bg-active`]: token.blue4,
+        [`--${prefix}-switch-color-bg-disabled-selected`]: token.gray5
+      }
+    }
+  ];
+};
+var CssVariablesStyle = ({ prefix = "ob" }) => {
+  const { theme, token } = import_theme.default.useToken();
+  const wrapSSR = (0, import_cssinjs.useStyleRegister)(
+    {
+      theme,
+      token,
+      path: ["ob-css-variables"],
+      hashId: "",
+      order: -1001
+      // 在全局样式之前注入
+    },
+    () => genCssVariablesStyle(token, prefix)
+  );
+  return wrapSSR(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}));
+};
+var cssVariables_default = CssVariablesStyle;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CssVariablesStyle,
+  genCssVariablesStyle
+});

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