app-template/packages/design-tokens/AGENTS.md

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

消费方式

@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 卡。

命令

yarn workspace @app/design-tokens build
yarn workspace @app/design-tokens clean