32 lines
1.2 KiB
CSS
32 lines
1.2 KiB
CSS
/**
|
||
* Layer 3: Tailwind Theme Mapping（Tailwind 主题映射）
|
||
*
|
||
* 将 Layer 2 Semantic 令牌映射为 Tailwind 类名（bg-* / text-* / font-* 等）。
|
||
* 维护者：ai13（teacher-portal）
|
||
* 关联：project_rules §3.10、03-long-term-architecture.md §1.5
|
||
*
|
||
* Tailwind 3.4 通过 tailwind.config.js 的 theme.extend 映射；
|
||
* Tailwind 4 将改用 @theme inline 指令（未来升级时本文件可转为 @theme 块）。
|
||
*
|
||
* 使用方式（业务组件）：
|
||
* <div className="bg-paper text-ink font-serif">...</div>
|
||
* <p className="text-sm text-ink-muted">...</p>
|
||
*
|
||
* 对应 tailwind.config.js 中：
|
||
* colors: { paper: 'var(--bg-paper)', ink: 'var(--color-ink)', ... }
|
||
* fontFamily: { sans: 'var(--font-family-sans)', serif: 'var(--font-family-serif)', ... }
|
||
*/
|
||
|
||
/* 显式引用语义令牌，确保 CSS 变量在构建产物中可用 */
|
||
@layer base {
|
||
:root {
|
||
/* Tailwind 颜色类映射（与 tailwind.config.js theme.extend.colors 对齐） */
|
||
--tw-color-paper: var(--bg-paper);
|
||
--tw-color-surface: var(--bg-surface);
|
||
--tw-color-ink: var(--color-ink);
|
||
--tw-color-ink-muted: var(--color-ink-muted);
|
||
--tw-color-accent: var(--color-accent);
|
||
--tw-color-rule: var(--color-rule);
|
||
}
|
||
}
|