111 lines
5.2 KiB
JavaScript
111 lines
5.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
||
// Linear-style dark theme. All values hand-picked to mirror Linear's actual UI.
|
||
// All foreground colors validated >= AA (4.5:1) against their surface.
|
||
//
|
||
// 主题机制：所有 color token 走 CSS variables（`rgb(var(--xxx-rgb) / <alpha-value>)`），
|
||
// `:root` 默认深色，`:root.light` 切换到浅色 —— 这样不动 109 处 `bg-bg` / `text-fg`
|
||
// 工具类就能换肤。
|
||
module.exports = {
|
||
darkMode: 'class',
|
||
content: ['./src/renderer/**/*.{html,ts,tsx}'],
|
||
theme: {
|
||
extend: {
|
||
// 系统字体栈（不依赖网络字体；CSP 默认 'self'，连 Google Fonts 也会被阻挡）。
|
||
// 桌面 Electron 应用一律 fallback 到本地已装字体，体验一致且离线可用。
|
||
fontFamily: {
|
||
sans: [
|
||
'-apple-system',
|
||
'BlinkMacSystemFont',
|
||
'Segoe UI Variable',
|
||
'Segoe UI',
|
||
'Microsoft YaHei',
|
||
'PingFang SC',
|
||
'sans-serif'
|
||
],
|
||
mono: ['Cascadia Code', 'SF Mono', 'Menlo', 'Consolas', 'Courier New', 'monospace']
|
||
},
|
||
// 字号标度 —— 七档，按「实际渲染出来的样子」定，不是按理想值定。
|
||
//
|
||
// 改动前这份标度声明了 12/13/15/17/20/28 六档并注了「用户偏好：桌面端 >= 15px」，
|
||
// 但全代码库对它的引用数是 0：131 处全在写 text-[Npx] 硬编码，散落 14 个字号，
|
||
// 其中 12px/12.5px 各 51/25 处、13px/13.5px 各 24/3 处 —— 那 0.5px 的差不是
|
||
// 设计决策，是漂移。所以这次按现状收敛：把邻近的 0.5px 差合并成一档，
|
||
// 声明的档位就是正文 12–13px 的真实现状，不再声明一个没人用的 15px 正文。
|
||
//
|
||
// 故意不带 lineHeight：正文行高由 globals.css 的 body { line-height: 1.55 } 继承，
|
||
// 需要收紧的地方（大号数字）本来就显式写了 leading-tight / leading-none。
|
||
// 若在这里配上 lineHeight，那 89 处原本继承 1.55 的元素会被改成别的值 ——
|
||
// 这次 sweep 只想动字号，不想顺手改全局行高。
|
||
fontSize: {
|
||
'2xs': '11px', // 微型：kbd、uppercase 小标签、图例、表头
|
||
xs: '12px', // 密集 UI 与次要文字（最主力档，76 处）
|
||
sm: '13px', // 正文、数据（27 处）
|
||
base: '15px', // 强调正文：h1、卡片/分区标题、主按钮
|
||
lg: '18px', // 大号指标数字
|
||
xl: '20px', // h2
|
||
'2xl': '26px' // hero 数字
|
||
},
|
||
// Letter spacing tighter for display; matches Linear's headline treatment
|
||
letterSpacing: {
|
||
tight: '-0.01em',
|
||
tighter: '-0.015em'
|
||
},
|
||
// 所有 color 引用 `--xxx-rgb` 三元组，由 globals.css 定义（深 / 浅两套），
|
||
// `<alpha-value>` 让 Tailwind 自带的 `bg-bg/50`、`text-fg/70` 透明修饰继续可用。
|
||
colors: {
|
||
// Linear surfaces — near-black, hairline borders
|
||
bg: 'rgb(var(--bg-rgb) / <alpha-value>)',
|
||
surface: {
|
||
1: 'rgb(var(--surface-1-rgb) / <alpha-value>)',
|
||
2: 'rgb(var(--surface-2-rgb) / <alpha-value>)',
|
||
3: 'rgb(var(--surface-3-rgb) / <alpha-value>)'
|
||
},
|
||
border: {
|
||
DEFAULT: 'rgb(var(--border-rgb) / <alpha-value>)',
|
||
strong: 'rgb(var(--border-strong-rgb) / <alpha-value>)'
|
||
},
|
||
// Foreground — 三档都对 bg 通过 WCAG AA，且阶梯均匀
|
||
// secondary/muted 提亮之前用户反馈"过灰"——保持原档位以保住"次重要"语义。
|
||
fg: {
|
||
DEFAULT: 'rgb(var(--fg-rgb) / <alpha-value>)',
|
||
secondary: 'rgb(var(--fg-secondary-rgb) / <alpha-value>)',
|
||
muted: 'rgb(var(--fg-muted-rgb) / <alpha-value>)',
|
||
inverse: 'rgb(var(--fg-inverse-rgb) / <alpha-value>)',
|
||
// 在 accent 实心块上显示的文字（按钮文字等），固定白（亮色主题下也用白，因为 accent 是 Linear 紫）
|
||
'on-accent': 'rgb(var(--fg-on-accent-rgb) / <alpha-value>)'
|
||
},
|
||
// Linear purple — the single accent（亮色主题下保持同色，仅 hover 加深）
|
||
accent: {
|
||
DEFAULT: 'rgb(var(--accent-rgb) / <alpha-value>)',
|
||
hover: 'rgb(var(--accent-hover-rgb) / <alpha-value>)',
|
||
soft: 'var(--accent-soft)',
|
||
ring: 'var(--accent-ring)'
|
||
},
|
||
// Severity — reserved, never decorative
|
||
sev: {
|
||
high: 'rgb(var(--sev-high-rgb) / <alpha-value>)',
|
||
med: 'rgb(var(--sev-med-rgb) / <alpha-value>)',
|
||
low: 'rgb(var(--sev-low-rgb) / <alpha-value>)'
|
||
},
|
||
// 警告色（原本 MinimalRunConfig 用 Tailwind 默认 amber）。亮色主题下需要更深
|
||
// 才能在白底上 AA —— 收口到 token 层。
|
||
warning: 'rgb(var(--warning-rgb) / <alpha-value>)'
|
||
},
|
||
// Subtle, restrained radius — Linear uses 6-8px max
|
||
borderRadius: {
|
||
sm: '4px',
|
||
DEFAULT: '6px',
|
||
md: '8px',
|
||
lg: '10px'
|
||
},
|
||
// Hairline borders, no shadows on cards
|
||
boxShadow: {
|
||
// Used sparingly: only for the floating detail panel & dropdown
|
||
pop: '0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.32)',
|
||
ring: '0 0 0 1px #5E6AD2'
|
||
}
|
||
}
|
||
},
|
||
plugins: []
|
||
}
|