f4bea7f26d
- useMountTransition hook（延迟卸载播放退场，尊重 reduced-motion）+ vitest - Drawer 淡入+滑入进出场；focus/scroll-lock 仍由 open 驱动、focus 键 shouldRender 防丢首焦 - Toast 入场 toast-in 动画（motion-safe） - P4-6 首屏零作品用 callout 暖深色编辑部英雄（对标 cta-band-dark，不干扰工作库） 新增 callout/on-callout/on-callout-soft 双主题成对 token
97 lines
3.5 KiB
TypeScript
97 lines
3.5 KiB
TypeScript
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)",
|
||
callout: "var(--color-callout)",
|
||
"on-callout": "var(--color-on-callout)",
|
||
"on-callout-soft": "var(--color-on-callout-soft)",
|
||
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/STSong；Windows → SimSun/YaHei；Linux/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;
|