46 lines
1.5 KiB
Markdown
46 lines
1.5 KiB
Markdown
# AGENTS.md — @app/design-tokens
|
||
|
||
## 职责
|
||
|
||
Monorepo 共享 **CSS 设计令牌**（Tailwind CSS v4 + shadcn/ui 语义色）。无 JS，构建只是把 `tokens.css` 拷到 `dist/`。
|
||
|
||
## 结构
|
||
|
||
```
|
||
src/tokens.css # 唯一真源
|
||
scripts/build.mjs # copy → dist/tokens.css
|
||
scripts/clean.mjs
|
||
README.md
|
||
```
|
||
|
||
## 消费方式
|
||
|
||
```css
|
||
@import "tailwindcss";
|
||
@import "@app/design-tokens/tokens.css";
|
||
```
|
||
|
||
（`web/src/styles/globals.css` 已如此。）导出：`.` 与 `./tokens.css`。
|
||
|
||
## 设计语义（改令牌前必读）
|
||
|
||
- 近黑中控 + 信号黄；**小圆角**（3–12px，拒绝大圆角 SaaS）；数字等宽。
|
||
- 亮色/暗色两套：`:root, .light` 与 `.dark`。
|
||
- 语义变量：`--paper` `--panel` `--sink` `--line` `--line-strong` `--ink` `--ink-2` `--ink-3` `--edge`（及 `--edge-*` 派生）`--err` `--ok` `--warn`。
|
||
- 同时映射 shadcn 名：`--color-background` `--color-primary` `--color-border` 等，供 `ui/*` 组件使用。
|
||
- 视觉方向的更高层说明见根目录 `DESIGN.md`（注意：DESIGN 色值与 tokens 现值不完全一致时，**以 `tokens.css` 为准**）。
|
||
|
||
## 修改指南
|
||
|
||
- 只改 `src/tokens.css`，然后 `yarn workspace @app/design-tokens build`。
|
||
- 新增语义色：同时补 `.light` / `.dark`，并按需映射 `--color-*`。
|
||
- 不要在组件里 `@import` 单个片段或复制色值；一律用 CSS 变量。
|
||
- 圆角保持小尺度（sm 3px / md 6px / lg 8px / xl 12px），禁止大圆角 SaaS 卡。
|
||
|
||
## 命令
|
||
|
||
```bash
|
||
yarn workspace @app/design-tokens build
|
||
yarn workspace @app/design-tokens clean
|
||
```
|