@chatbi-v/theme

ChatBI 设计系统核心 Token 和运行时引擎。

架构：三层 Token 系统

采用严格的三层架构，将物理值、语义意图和组件配置分离。

1. Primitives（物理层）

无固有含义的原始值。

• 路径: tokens/primitives/*
• 示例: blue.500, spacing.4, opacity.50
• 使用: 禁止直接在 UI 代码中使用

2. Semantics（语义层）

描述如何使用原始值的别名。

• 路径: tokens/semantics/*
• 示例: color.brand.primary, bg.surface.canvas
• 使用: 用于通用布局和自定义组件

3. Components（组件层）

特定 UI 组件的配置。

• 路径: tokens/components/*
• 示例: button.radius, card.bg, input.border
• 使用: 用于构建特定组件或覆盖其样式

安装

pnpm add @chatbi-v/theme

使用

Tailwind CSS

系统自动为所有三层生成 classes：

<!-- 语义层 (布局首选) -->
<div class="bg-surface-canvas text-content-primary">
  <!-- 组件层 (组件首选) -->
  <button class="comp-btn-radius comp-btn-bg-primary"></button>
</div>

TypeScript / JavaScript

import { theme } from '@chatbi-v/theme';

// 访问语义层
const bg = theme.semantics.colors.surface.canvas;

// 访问组件层
const btnRadius = theme.components.button.radius;

核心职能

1. Token 定义: 定义所有基础设计变量（颜色、字体、间距等）
2. 运行时管理: ThemeStore（状态管理）、ThemeRegistry（主题预设注册）、Dark Mode 引擎
3. 样式转换: Tailwind CSS、Ant Design、CSS Variables
4. React 集成: 提供 ThemeProvider 和 useTheme 钩子

快速开始

import { ThemeProvider, themeRegistry } from '@chatbi-v/theme';
import { chatbiPro } from '@chatbi-v/theme/presets';

// 1. 注册预设
themeRegistry.register('default', chatbiPro);

// 2. 包裹应用
function App() {
  return (
    <ThemeProvider initialTokens={chatbiPro}>
      <YourApp />
    </ThemeProvider>
  );
}