b9f9134748
- 面色阶 surface-soft/card/strong + 文字 5 级 body-strong/body/muted-soft - 边框 line-soft、coral 状态 cinnabar-active/disabled（按压变深 + 奶油化禁用） - 圆角刻度 xs..xl/full：按钮 rounded-md、卡片 rounded-lg、徽章 pill - 排版档 display/title/caption/eyebrow/prose（衬线负字距） - 动效 token duration-fast/base + ease-standard，transitionUi 常量统一过渡 - 焦点环统一 cinnabar/35；双主题成对定义
74 lines
2.6 KiB
TypeScript
74 lines
2.6 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)",
|
||
conflict: "var(--color-conflict)",
|
||
overdue: "var(--color-overdue)",
|
||
pass: "var(--color-pass)",
|
||
info: "var(--color-info)",
|
||
},
|
||
fontFamily: {
|
||
serif: ['"Noto Serif SC"', '"Songti SC"', "serif"],
|
||
sans: ['"Noto Sans SC"', '"PingFang SC"', "system-ui", "sans-serif"],
|
||
mono: ['"JetBrains Mono"', "ui-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;
|