shangfangjian
2cfc9ccc0f
- 新建 components/ui/(Button/Input/Select/Modal/Tabs/Spinner/Skeleton 等),变体用联合类型约束,根治幻影变体 - admin/components.tsx 与 matches/ui.tsx 改为再导出壳,消除 Spinner 三份重复 - 日期工具收口到 lib/date.ts,滚动监听收口到 lib/useScroll.ts - index.css 引入 :root RGB 三元组令牌,tailwind.config 接 <alpha-value>(修复透明度修饰符静默失效) - 刘建毛草 5MB 全字库(jsDelivr 未锁版) → 1KB 自托管子集(仅「先知」二字,unicode-range 限定)
130 lines
4.4 KiB
JavaScript
130 lines
4.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
/*
|
|
颜色来源说明:
|
|
纸白/墨色/印报红三组令牌的**权威定义在 src/index.css 的 :root**
|
|
(CSS 自定义属性,值为 RGB 三元组)。这里引用同一份变量,使
|
|
工具类(bg-press)与手写 CSS(outline: var(--press))不可能漂移。
|
|
|
|
此前两处各自硬编码十六进制,改色时必须记得改两边 ——
|
|
index.css 里就有 3 处漏网(焦点环/报头粗线/毛笔字),保留了旧色。
|
|
|
|
<alpha-value> 占位符不可省略:它让 Tailwind 的透明度修饰符
|
|
(bg-press-wash/60)能正确注入 alpha。缺了它,带 /60 的类名会
|
|
静默不生成任何 CSS。
|
|
*/
|
|
// 纸白:微暖底色,像新闻纸而不是纯白画布
|
|
paper: {
|
|
50: 'rgb(var(--paper-50) / <alpha-value>)',
|
|
100: 'rgb(var(--paper-100) / <alpha-value>)',
|
|
200: 'rgb(var(--paper-200) / <alpha-value>)',
|
|
300: 'rgb(var(--paper-300) / <alpha-value>)',
|
|
},
|
|
// 墨色:暖黑灰阶,替代冷调 slate
|
|
// 注:50/100/600/800 尚未提升为 CSS 变量(仅 CSS 侧未用到),
|
|
// 保持字面量直至有第二个消费方,避免过早抽象。
|
|
ink: {
|
|
50: '#FAF9F7',
|
|
100: '#F0EEE9',
|
|
200: 'rgb(var(--ink-200) / <alpha-value>)',
|
|
300: 'rgb(var(--ink-300) / <alpha-value>)',
|
|
400: 'rgb(var(--ink-400) / <alpha-value>)',
|
|
500: 'rgb(var(--ink-500) / <alpha-value>)',
|
|
600: '#524C42',
|
|
700: 'rgb(var(--ink-700) / <alpha-value>)',
|
|
800: '#282420',
|
|
900: 'rgb(var(--ink-900) / <alpha-value>)',
|
|
},
|
|
// 印报红:全站唯一强调色,克制使用
|
|
press: {
|
|
DEFAULT: 'rgb(var(--press) / <alpha-value>)',
|
|
dark: 'rgb(var(--press-dark) / <alpha-value>)',
|
|
wash: 'rgb(var(--press-wash) / <alpha-value>)',
|
|
},
|
|
// ── 语义状态色:成功/警告/负面 ──
|
|
// 设计约束:纸底 #FDFCF8 上文字级(600/700)对比度 ≥ 4.5:1(WCAG AA),
|
|
// 点/条级(500) ≥ 3:1;色相降饱和以贴近墨色印刷感,不使用 tailwind 原色。
|
|
ok: {
|
|
50: '#EAF3ED',
|
|
100: '#D5E8DC',
|
|
300: '#A3C9B1',
|
|
500: '#43925F',
|
|
600: '#2E7A4C',
|
|
700: '#1F6B45',
|
|
},
|
|
warn: {
|
|
50: '#FBF3E4',
|
|
100: '#F5E5C8',
|
|
300: '#E2C48E',
|
|
500: '#D97706',
|
|
600: '#A15C0B',
|
|
700: '#8F5109',
|
|
},
|
|
bad: {
|
|
50: '#FAEDED',
|
|
100: '#F6E3E3',
|
|
300: '#E4AFAF',
|
|
500: '#C24A4A',
|
|
600: '#A83B3B',
|
|
700: '#8F3030',
|
|
},
|
|
// ── 赛制分区色:欧战 / 附加赛 ──
|
|
// 与 ok/warn/bad 同一套降饱和逻辑,替代此前的 sky/orange 原生色
|
|
// (原生色冷调高饱和,与纸色暖灰底冲突)。
|
|
// 对比度:#FDFCF8 纸底上 700 级 ≥ 4.5:1,100 级仅作底色不与文字对比。
|
|
euro: {
|
|
50: '#EAF0F2',
|
|
100: '#DCE6EA',
|
|
300: '#A9C0C9',
|
|
500: '#5B7C8A',
|
|
600: '#476571',
|
|
700: '#3A5460',
|
|
},
|
|
playoff: {
|
|
50: '#F8EEDF',
|
|
100: '#F2E0C6',
|
|
300: '#DDBE8A',
|
|
500: '#B87A2E',
|
|
600: '#966124',
|
|
700: '#7C511E',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
// 毛体草书(国内 CDN)+ 粗楷体回退
|
|
brush: ['"Liu Jian Mao Cao"', '"KaiTi"', '"STKaiti"', '"Kaiti SC"', '"楷体"', '"Songti SC"', 'serif'],
|
|
// 标题与比分:宋体血统,报纸版面的骨架
|
|
serif: [
|
|
'Georgia',
|
|
'"Times New Roman"',
|
|
'"Songti SC"',
|
|
'STSong',
|
|
'SimSun',
|
|
'"Noto Serif CJK SC"',
|
|
'serif',
|
|
],
|
|
// 正文:中文黑体栈
|
|
sans: [
|
|
'"PingFang SC"',
|
|
'"Hiragino Sans GB"',
|
|
'"Microsoft YaHei"',
|
|
'"Noto Sans CJK SC"',
|
|
'sans-serif',
|
|
],
|
|
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Consolas', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
'2xs': ['11px', { lineHeight: '16px' }],
|
|
},
|
|
// 报纸硬阴影:实心偏移、无模糊,替代此前内联的一次性写法
|
|
boxShadow: {
|
|
print: '4px 4px 0 0 rgb(0 0 0 / 0.06)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|