tamakyi
27856dd4a2
一号事项（剩余令牌化）：
- templates/user/profile.html 20 处、base.css 9 处 font-size 全部落到 --tb-fs-*
- base.css 导航四档（0.95/0.88/0.82/0.78）合并成「桌面 md → ≤1000 xs」；logo 三档统一 lg
- 有理由保留的：.tb-pin-flag / .md-body code 的 0.9em（相对父级）、验证码 1.4/1.2rem（等宽字形）、
chat 关闭按钮 40px、password 页 3em、mail/*（邮件客户端不保证 var()）；行内 12px/0.75rem 等值顺手换掉
二号事项（主色对比度）：
- base/default #1e87f0(3.42) → #0e6fd0(4.70)；shiroko #4a7fc1(3.69) → #3b6dac(4.74)；
sakura #e5678f(2.80) → #ba3e66(4.70，饱和度压到 .5 保持柔和)。同色相只压亮度，目标 4.7 留余量
- 深色块 muted 之前只对 --tb-bg 算（4.7 以为过了），对压平后的卡片其实 4.31/4.17 → 提到 #a18790 / #7f8ea1
- 新增 --tb-on-primary（亮 #ffffff / 暗 #0b1016）：深色模式主色偏亮，白字只有 2.2~3.1:1，
用同一个令牌兼顾「链接色要深」和「按钮底要深」是矛盾的。.uk-button-primary 与
.uk-label:not(语义色) 改吃它 → 深色按钮变成浅底深字（6.10 / 8.65 / 7.27）
- 顺手封掉几处主色泄漏：header 验证码 focus、profile .feat-day.is-on、explore 随机投票的 JS outline、
vote-results 行内色，全部改成令牌（否则换主题时不跟着变）
生成器同步：paletteVars 导出 --tb-on-primary（白字/深字择优）；?dump=palette 增加
onPrimaryCr / onPrimaryPickedBest / warnings —— 主色卡中间调时只警告不判失败；
配色面板给橙色提示。_scaffold 令牌 29 → 30。StaticVersion → 20261021c。
验证：TestSwatch 断言同步为 #ba3e66；8 种组合（base 亮暗 + 三主题亮暗）对比度全部 ≥4.5；
go test internal/{theme,templates,conf,i18n} 全绿；生成器 validate/fit/quality/palette/layers/fx/fxpipe 全过。
39 lines
3.8 KiB
Markdown
39 lines
3.8 KiB
Markdown
# 前端样式（长版明细）
|
||
|
||
## 前端样式
|
||
|
||
- `static/css/base.css`（`?v=` 取 `conf.StaticVersion`，**改完必须 +1**）。令牌在 `:root`（亮）+
|
||
`html[data-theme="dark"]`（暗）。新样式一律 `var(--tb-*)`，别写死色值，也别为深色另写分支。
|
||
- 页面级样式内联在各自模板 `<style>`；尽量用类不用 `style=`（深色下内联写死色值会露白）。
|
||
- 主题属性在 head 内联脚本里打（cookie `theme`），**不能挪回 body**，否则深色用户白闪。
|
||
- **移动端（≤640px）语言切换与主题按钮在固定底栏** `#tb-mobile-utils`（`.tb-nav-utils` 被隐藏，
|
||
body 留 `padding-bottom:56px`）。用户曾误以为"按钮不见了"，先解释位置。
|
||
⚠️ `/_/{domain}` 箱主页 `IsUserPage = true`（`route/question/page.go:133`），语言切换包在
|
||
`{{ if not .IsUserPage }}` 里 → **箱主页没有语言切换入口，有意设计**（用户 2026-10-19 确认），别当 bug 修。
|
||
- ⚠️ **UIkit 3.3.3 的 `.uk-flex::before/::after{display:none}`**：给带 `uk-flex` 的元素加伪元素必须写
|
||
复合选择器（`.tb-cover.uk-flex::after`），否则静默失效。
|
||
- 分类/题型标签一律 `.tb-chip`；彩色 `uk-label` 只留给语义状态（置顶/私密/被举报/已读、投票四态）。
|
||
- **字号阶梯 5 档**：`--tb-fs-xs/md/lg/xl/hero`（12/14/16/24/28）。散落的 `.9/.95/.98rem` 一律映射到档位，
|
||
别新增第 6 个值。⚠️ 已令牌化的是模板层；`base.css` 自身仍留 11 处硬编码（0.78/0.82/0.88/0.95/1.1），
|
||
`templates/user/profile.html` 还留 16 处 —— 想彻底统一得先扫这两处。
|
||
- 圆角只用 `--tb-radius(-sm/-xs)`；`50%` 与 `999px` 是语义（头像、胶囊），**不要**换成令牌。
|
||
- ⚠️ `.uk-text-muted/.uk-text-meta` 必须带 `!important`：UIkit 3.3.3 自带 `color:#999!important`，
|
||
普通声明压不过（现象：规则写了但全站还是 #999）。
|
||
- **文字色下限 WCAG AA 4.5:1**（正文级）。`--tb-text-muted` = `#6b7280`（白底 4.83）。
|
||
旧值 `#8a919c` 3.18、`#999` 2.85 —— 肉眼"淡一点"其实已经不合格。
|
||
主色还没达标（`#1e87f0` 3.26 / `#4a7fc1` 3.69 / sakura `#e5678f` 2.80），要动得连主题一起改。
|
||
- ⚠️ **改 base.css 的配色令牌必须同步检查 `static/css/themes/*.css`**：主题覆盖同名令牌，
|
||
基座修了但主题页纹丝不动（sakura/shiroko 的 muted 就曾是 2.8:1，是这次才补到 4.6）。
|
||
- 顶栏链接：亮色用 `--tb-text-secondary`、hover/当前页 `--tb-primary`；深色块原本 `!important` 定成
|
||
`--tb-text`，会让同一顶栏在深浅两模式权重跳一档 → 已加 dark secondary 覆盖。
|
||
- **主色要达到 AA 4.5:1**（它同时是 14px 链接/按钮文字色）。现值：base `#0e6fd0`、shiroko `#3b6dac`、
|
||
sakura `#ba3e66`（都是同色相压亮度）。**改主色必须三处一起**：`base.css :root` + `themes/default.css` + 该主题。
|
||
- ⚠️ **`--tb-on-primary`**（亮 `#ffffff` / 暗 `#0b1016`）是「主色作背景时的文字色」。
|
||
深色模式的强调色偏亮（`#5c8dff`），白字只有 2.2~3.1:1 —— 用一个令牌同时伺候「链接色要深」和
|
||
「按钮底要深」是矛盾的，所以拆成两个。`.uk-button-primary`、`.uk-label:not(语义色)` 都吃它。
|
||
- 字号阶梯已全部落地（模板 + base.css）；`0.9em`（相对父级）、验证码等宽字形、`mail/*` 是**有意例外**。
|
||
- 视觉自检：`TEST_PREVIEW=1 go test ./templates -run TestGenPreview` → `outputs/preview-*.html`；
|
||
截图必须 `chrome --headless=old --force-device-scale-factor=1`（新版 headless 本机挂住）。
|
||
⚠️ `--window-size` ≠ CSS 视口；要精确视口就用 iframe 指定 width/height。验证 CSS 靠**像素比对**
|
||
（PIL 在 venv）而非目测；扫描循环上界不能与物体边界重合。
|