Files
writer-work-flow/apps/web/tailwind.config.ts
Yaojia Wang fd6551b0ba feat(ui): 稳健跨 OS 衬线兜底栈 + 双主题 token 奇偶校验
- 决策:不自托管 CJK webfont(数 MB + 构建期外拉,违反 CSP 友好/首屏)
  改用跨 OS 系统衬线栈,保证中文标题可靠命中衬线,零 webfont 字节
- 新增 themeParity 测试:paper/night 两块 --color-* 必须成对,防漏配破面
2026-07-11 07:18:23 +02:00

94 lines
3.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type { Config } from "tailwindcss";
// 纸感·文学温暖主题UX_SPEC §2。颜色经 CSS 变量落地,便于后续夜读模式切换。
const config: Config = {
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./lib/**/*.{ts,tsx}",
],
theme: {
extend: {
colors: {
bg: "var(--color-bg)",
"surface-soft": "var(--color-surface-soft)",
"surface-card": "var(--color-surface-card)",
"surface-strong": "var(--color-surface-strong)",
panel: "var(--color-panel)",
ink: "var(--color-ink)",
"body-strong": "var(--color-body-strong)",
body: "var(--color-body)",
"ink-soft": "var(--color-ink-soft)",
"muted-soft": "var(--color-muted-soft)",
line: "var(--color-line)",
"line-soft": "var(--color-line-soft)",
cinnabar: "var(--color-cinnabar)",
"cinnabar-active": "var(--color-cinnabar-active)",
"cinnabar-disabled": "var(--color-cinnabar-disabled)",
conflict: "var(--color-conflict)",
overdue: "var(--color-overdue)",
pass: "var(--color-pass)",
info: "var(--color-info)",
},
fontFamily: {
// 衬线 display 与 sans 分工是品牌声音的一部分(对标 DESIGN.md
// 决策:不自托管 CJK webfont —— Noto Serif SC 全量子集达数 MB会拖慢
// 首屏且需构建期外部拉取(违反 CSP 友好)。改用跨 OS 系统衬线兜底栈,
// 保证中文标题在任意设备可靠命中高质量衬线,零 webfont 字节。
// macOS/iOS → Songti/STSongWindows → SimSun/YaHeiLinux/Android → Noto CJK。
serif: [
'"Noto Serif SC"',
'"Source Han Serif SC"',
'"Songti SC"',
"STSong",
"SimSun",
'"Noto Serif CJK SC"',
"serif",
],
sans: [
'"Noto Sans SC"',
'"PingFang SC"',
'"Source Han Sans SC"',
'"Microsoft YaHei"',
"system-ui",
"sans-serif",
],
mono: ['"JetBrains Mono"', "ui-monospace", "monospace"],
},
fontSize: {
// 编辑部字号刻度(衬线 display 用负字距;标签用正字距 eyebrow
"2xs": ["0.6875rem", { lineHeight: "1rem" }],
eyebrow: ["0.75rem", { lineHeight: "1.4", letterSpacing: "0.08em" }],
caption: ["0.8125rem", { lineHeight: "1.4" }],
body: ["1rem", { lineHeight: "1.55" }],
prose: ["1.125rem", { lineHeight: "1.9" }],
"title-md": ["1.125rem", { lineHeight: "1.4" }],
"title-lg": ["1.375rem", { lineHeight: "1.3" }],
"display-sm": ["1.75rem", { lineHeight: "1.2", letterSpacing: "-0.01em" }],
"display-md": ["2.25rem", { lineHeight: "1.15", letterSpacing: "-0.015em" }],
"display-lg": ["3rem", { lineHeight: "1.1", letterSpacing: "-0.02em" }],
},
borderRadius: {
xs: "4px",
sm: "6px",
DEFAULT: "6px",
md: "8px",
lg: "12px",
xl: "16px",
full: "9999px",
},
boxShadow: { paper: "0 1px 3px var(--shadow-paper)" },
transitionDuration: {
fast: "var(--dur-fast)",
base: "var(--dur-base)",
},
transitionTimingFunction: {
standard: "var(--ease-standard)",
},
maxWidth: { prose: "720px" },
},
},
plugins: [],
};
export default config;