@dt-company/design-system

公司设计系统核心包：React 19、TypeScript strict、Tailwind CSS v4（@theme + HEX/alpha）、shadcn/ui 风格（CVA + Radix）、双主题（data-theme：light / dark）。

安装

自 npm（任意项目）

pnpm add @dt-company/design-system
# 或 npm / yarn

应用需已配置 Tailwind CSS v4 与 @tailwindcss/vite（或等价管道），并在入口引入 globals.css（见下）。peerDependencies：react、react-dom ^19。

样式入口

在应用全局 CSS 首行引入：

@import "@dt-company/design-system/globals.css";

或在 TS 入口：

import "@dt-company/design-system/globals.css";

主题

用 ThemeProvider 包裹根组件；主题会同步到 document.documentElement 的 data-theme（light | dark），并可选 storageKey 持久化。

import { ThemeProvider } from "@dt-company/design-system";

<ThemeProvider defaultTheme="light" storageKey="ui-theme">
  <App />
</ThemeProvider>

组件

import { Button, Input, ThemeProvider } from "@dt-company/design-system";

样式请只使用语义类名（如 bg-bg-base、text-text-primary），勿在业务中硬编码色值。可导入清单见 COMPONENTS.md。

Storybook

cd packages/design-system
pnpm run storybook

打开后使用顶部工具栏 Theme 切换 light / dark，实时查看组件与语义 token。

AI / 后端协作

• 仓库总索引：../../AGENTS.md
• 短提示词：AI-PROMPT-SNIPPET.md
• 完整规范：AI-PROMPT-GUIDE.md
• 导出清单：COMPONENTS.md