主题体系跟上设计令牌化：派生文字色按对比度下限、主题 muted 补到 AA
生成器（dev/theme-builder）： - paletteVars 的 text-secondary/text-muted 从「往底色混 36%/55%」改成 mixToContrast(5.5/4.5)：二分找最淡且达标的位置，文字本身不达标就原样返回 - 半透明卡片先 flatten 压平到底色再算对比度；参考背景取「页面底色 + 压平后的卡片」中更不利的 - 配色面板加读数（正文/次要/淡文字/主色），低于 4.5 变橙；默认 primary #4a7fc1(3.69) → #3d6fac(4.63) - 新增 ?dump=palette 四种配色回归；README 补配色一节 主题/base（含用户本轮 base.css 改动）： - sakura muted #a08c94(2.8:1) → #78696e(4.61)、shiroko #8794a7(2.76:1) → #656e7a(4.63)：主题覆盖令牌，基座的 AA 修复到不了主题页 - 深色顶栏链接补 secondary 覆盖：亮色块已是次要文字色，深色块原来 !important 定成正文色，同一顶栏权重跳一档 - _scaffold.css 令牌清单 23 → 29（补 fs 阶梯与 page-position），muted 说明 AA 下限 - StaticVersion 20261021a → 20261021b
This commit is contained in:
tamakyi
@@ -346,3 +346,102 @@ CLI 端到端手动验证：`honeypot hits` / `--ip` / `--show-password` 输出
|
||||
- `docs/cli.md`：§0 补「替换二进制必须重启」「strings 用 grep -ac」；
|
||||
命令总览加 honeypot；新增 §7 honeypot 命令（原 7/8/9 顺延为 8/9/10）；
|
||||
排错表加 5 条。
|
||||
# 2026-10-21
|
||||
|
||||
## 新旧前端对比（正式 vs 测试环境），只测量未改码
|
||||
|
||||
**方法**：curl 抓两环境 4 个页面 → 本地注入脚本取计算样式 / 资源体积 / 对比度 / 点按区；
|
||||
无头 Chrome 截图（`--headless=old`）后用 Pillow 算像素指标。
|
||||
⚠️ 本模型读不了图片，所以结论全部来自数值与结构，不靠"看截图"。
|
||||
|
||||
**踩坑**：file:// 打开抓下来的页面时，`href="/static/css/base.css"` 会解析成 `file:///static/...` → CSS 不加载，
|
||||
于是 dev 页量出来全是 UIkit 旧样式（圆角 0、旧阴影）。改法：抓下来后把 `/static/` 重写成 dev 域名绝对地址，
|
||||
再重新采集。**以后本地复现线上页面必须先重写站内绝对路径，否则测的是"无 CSS 的裸 HTML"。**
|
||||
另：`body.scrollWidth` 会被隐藏面板撑大（dev explore 1499），判断横向溢出要看 `documentElement.scrollWidth`（实测 1249 = 无溢出）。
|
||||
|
||||
**实测差异（1280 宽）**
|
||||
| 指标 | 正式（旧） | 测试（新） |
|
||||
|---|---|---|
|
||||
| 首页 HTML | 42.9KB | 34.2KB |
|
||||
| 探索页 HTML | 77.4KB | 53.4KB |
|
||||
| `<style>` 块 | 9–10 | 2 |
|
||||
| 行内 style 属性 | 8–16 | 3–5 |
|
||||
| 卡片圆角 / 阴影 | 0px / 单层硬阴影 | 12px / 双层柔阴影 |
|
||||
| 圆角取值种类 | 2px×73、50%、8、6、4、9 | 6、8、12、14、5、50% |
|
||||
| 正文色 | #333/#666/#999 混用 | 令牌 #1f2329/#5c6370/#8a919c |
|
||||
| 字体栈 | UIkit 默认 | system-ui + 苹方/雅黑 |
|
||||
| 图标 | emoji（🌙☀️） | 内联 SVG |
|
||||
| 首页截图像素：色彩数 / 边缘密度 | 2206 / 10.3% | 1174 / 5.0% |
|
||||
|
||||
**共同短板（新旧都没解决）**
|
||||
- `--tb-text-muted #8a919c` 在 #fff 上只有 **3.18:1**（AA 需 4.5）；旧版 #999 更低（2.85）。
|
||||
建议改 #6b7280（4.83:1）；暗色 muted #8b93a1 在 #242830 上 4.77 已达标。
|
||||
- 顶栏导航链接（UIkit rgba(0,0,0,.5)）2.68–2.85:1，同样是低对比。
|
||||
- 移动端点按区：两版都有大量 19px 高的纯文字链接（不满足 44px 建议值）。
|
||||
|
||||
**新版自身的毛病（我写的，待修）**
|
||||
- `templates/home.html` 字号用了 0.75/0.78/0.86/0.9/0.95/0.98 rem → 7 个肉眼难辨的档位；
|
||||
`static/css/base.css` 里还有 0.78/0.8/0.82/0.84/0.88/0.95。**排版层级比旧版更碎**，应收敛到 4 档。
|
||||
- 残留圆角 5px（header 验证码框、sponsor）、9px（profile-tabs，list.html/explore.html 各一处）。
|
||||
|
||||
## 按上轮结论改代码（字号收敛 / 对比度 / 圆角收敛）
|
||||
|
||||
先确认过：本地 `static/css/base.css` 与 dev 部署版 **diff 0 行**，本地就是新版基线。
|
||||
|
||||
1. **新增字号阶梯令牌**（base.css `:root`）：`--tb-fs-xs/md/lg/xl/hero` = 12/14/16/24/28px。
|
||||
`lg` 取 **1rem 而非 17px** —— UIkit 的 `.uk-card-title`/h4 就是 16px，顺着它才能让自定义标题
|
||||
与组件标题同档，否则会留下 16 与 17 差 1px 的两档并存（第一版就是这么写的，实测发现后改回）。
|
||||
2. **替换范围**：home.html 全部 7 档 → 5 档；explore / question-list / question-list(list.html) 三页
|
||||
的 0.7/0.72/0.82/0.84/0.85/0.9/0.98/1/1.15/1.2 全换令牌。实测 explore 由 **9 档 → 5 档**。
|
||||
3. **`--tb-text-muted` #8a919c → #6b7280**（#fff 上 4.83:1）。**关键坑**：
|
||||
UIkit 自带 `.uk-text-muted{color:#999!important}`，我原先的普通声明**从未生效**，全站仍是 #999（2.85:1）。
|
||||
必须 `!important` 才能压过。改完 box 页 fails 15→11、explore 14→9。
|
||||
4. **顶栏导航**：UIkit 默认 rgba(0,0,0,.5) = 2.68:1 → 改 `var(--tb-text-secondary)` = **6.05:1**，
|
||||
hover/active 走主色；暗色分支原有 `!important` 规则自然接管（实测 10.75:1）。
|
||||
5. **圆角全量收敛**：9px/5px/4px/2px/7px/3px 以及等值的 6/8/10/12/14px 全部换成
|
||||
`var(--tb-radius[-sm|-xs])`。全站（排除邮件模板）现在只剩 3 处 `999px`（胶囊，语义正确）。
|
||||
6. `conf.StaticVersion` 20261020g → **20261021a**（base.css 改了必须 +1）。
|
||||
|
||||
**验证**：go vet / go test（templates+i18n+conf）/ go build 全绿；预览页内联本地 base.css 后用无头 Chrome
|
||||
量计算样式，首页 12/14/16/24/28、explore 12/14/16/24/32，nav 6.05:1。
|
||||
|
||||
**遗留（未改，属设计取舍）**：主色链接 `#1e87f0` 在纯白上 3.37–3.42:1（<4.5）。改深会影响品牌观感，
|
||||
需用户决定；Waline 第三方赞数绿色 2.87 不在本站控制内。
|
||||
|
||||
**注意**：工作区有 4 个**非本次改动**的删除（`static/css/themes/test01.css`、`static/images/shiroko-cutout.png`、
|
||||
`static/images/themes/test01/*.webp`），是之前就存在的未提交删除，提交时勿一并 add。
|
||||
|
||||
## 17:4x 用户前端设计令牌化 → 主题/生成器的连带影响
|
||||
|
||||
用户改了 12 个模板 + base.css（未提交）：`--tb-text-muted` #8a919c→#6b7280（AA 4.83:1）、
|
||||
新增 `--tb-fs-xs/md/lg/xl/hero` 阶梯、圆角改走 `--tb-radius(-sm/-xs)`、顶栏链接改 `--tb-text-secondary`、
|
||||
`.uk-text-muted` 加 `!important`（压 UIkit 的 `#999!important`）。
|
||||
|
||||
**关键结论：主题会把这套修复盖回原样。** 主题 css 覆盖同名令牌 → 页面用主题的值，不是 base.css 的。
|
||||
实测（worse of bg / 压平后的 surface）：
|
||||
- default.css 不定义文字色 → 跟随 base ✓；sakura muted `#a08c94` **2.80:1**、shiroko `#8794a7` **2.76:1**（都看不见）。
|
||||
- 已调到 AA 下限：sakura `#78696e`(4.61)、shiroko `#656e7a`(4.63)，同色相只压深；深色块两个主题本来就 ≥4.7，不动。
|
||||
- 主色仍不达标（未改，等用户定）：base/shiroko `#4a7fc1` 3.69、base `#1e87f0` 3.26、sakura `#e5678f` 2.80。
|
||||
候选：`#3d6fac`(4.63)、`#0f6ac6`(4.83)、`#b53d61`(4.91)。
|
||||
|
||||
**生成器的必修项**：`paletteVars` 原来 `text-muted = mix(text,bg,0.55)` 硬算 → 浅底掉到 2.9:1，
|
||||
等于每导一次主题就把 base.css 的修复覆盖掉。改成 `mixToContrast(text, [bg, flatten(surface,bg)], 4.5)`：
|
||||
二分找「最淡但达标」的比例；文字本身不达标时原样返回（宁可不够淡，不能看不见）。
|
||||
- 半透明卡片（`rgba(255,255,255,0.86)`）必须**压平到底色**再算，否则按纯白算会偏低。
|
||||
- 次要 5.5 / 弱化 4.5 两档，保证层级不倒挂。
|
||||
- 配色面板加读数 `正文 12.5:1 · 次要 5.5:1 · 淡文字 4.6:1 · 主色 4.6:1`，<4.5 变橙（手填主色只提醒不拦）。
|
||||
- 默认 primary 由 `#4a7fc1`(3.69) 压到 `#3d6fac`(4.63) —— 默认值不该一上手就踩线。
|
||||
- 新增 `?dump=palette`（四种配色：默认亮/默认深/低对比手填/白卡彩底），`ok:true`。
|
||||
|
||||
**顺手补的一致性**：深色块顶栏原来 `!important` 定成 `--tb-text`（正文色），亮色块新的 secondary 规则
|
||||
让同一顶栏在深浅两模式权重跳一档 → 加 `html[data-theme="dark"] .uk-navbar-nav > li > a { secondary !important }`。
|
||||
实测计算值：无主题 nav #5c6370 / muted #6b7280；shiroko #51607a / #656e7a；sakura #6b545c / #78696e。
|
||||
|
||||
**⚠️ 用户删了 test01（css + 2 张图）与 `shiroko-cutout.png`，未提交，我没动。** 若测试站 `[theme] available`
|
||||
还登记着 test01，启动日志会打「主题文件不存在，已从可用列表忽略」，设置页不再出现，箱主已选 test01 的会静默回退站点默认。
|
||||
`shiroko-cutout.png` 只在 `docs/theme-shiroko.md` 里作参考图引用，不参与 embed。
|
||||
|
||||
**令牌化的残留**（只提醒，没改）：`templates/user/profile.html` 还有 16 处 `font-size: 0.XXrem`；
|
||||
`base.css` 自身 11 处（0.78/0.82/0.88/0.95/1.1 —— 正是被点名要消掉的那档）；圆角只剩 50%/999px（语义正确）。
|
||||
`--tb-fs-*` 在 base.css 里只用了 3 处（主题格、chip），阶梯主要落在模板层。
|
||||
`StaticVersion` 20261021a → **20261021b**（主题 css 内容变了，必须换键）。
|
||||
|
||||
@@ -20,7 +20,14 @@
|
||||
⚠️ `@media` 里**每个独立配置的 scope 都要写一条** `[data-page-scope="x"]`：页面覆盖块特异性 (0,2,1)，
|
||||
只写 `html[data-theme-style]`(0,1,1) 的话独立配置页在手机上完全不生效。
|
||||
⚠️ 竖版图只替换**本来有背景图**的页面（`cfg.bg` 非空），否则等于给纯色页塞了张图。
|
||||
- 自检钩子：`?dump=css|zip|validate|install|fx|fxpipe|fxkey|layers|fit|quality`，`?demo=1&fresh=1&rows=N&scope=&loadurl=`
|
||||
- ⚠️ **派生文字色必须走对比度下限，不能按固定比例混**：`paletteVars` 里
|
||||
`text-secondary = mixToContrast(text, backdrops, 5.5)`、`text-muted = 4.5`（WCAG AA）。
|
||||
旧的 `mix(text,bg,0.55)` 在浅底只有 2.9:1 —— 每导一次主题就把 base.css 的 AA 修复覆盖回去。
|
||||
- 半透明卡片（`--tb-surface: rgba(255,255,255,0.86)`）必须 `flatten()` 压到底色再算，否则按纯白算偏低；
|
||||
- 参考背景取「页面底色 + 压平后的卡片」两者更不利的那个；
|
||||
- 手填正文本身不达标时**原样返回**（宁可不够淡，不能产出看不见的字）。
|
||||
- 配色面板有读数（正文/次要/淡文字/主色），<4.5 变橙；默认 primary 已压到 `#3d6fac`(4.63)。
|
||||
- 自检钩子：`?dump=css|zip|validate|install|fx|fxpipe|fxkey|layers|fit|quality|palette`，`?demo=1&fresh=1&rows=N&scope=&loadurl=`
|
||||
（`?demo=1` 已含 fit 层 + 竖版背景，`@media` 才会生成）。用法：
|
||||
`chrome --headless=old --virtual-time-budget=12000 --dump-dom "http://127.0.0.1:8777/dev/theme-builder/index.html?demo=1&fresh=1&dump=fit"`
|
||||
抓 `<pre id="dump">`（正则要带属性：`<pre id="dump"[^>]*>`）。
|
||||
|
||||
@@ -13,6 +13,19 @@
|
||||
- ⚠️ **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 覆盖。
|
||||
- 视觉自检：`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 靠**像素比对**
|
||||
|
||||
@@ -42,3 +42,11 @@
|
||||
- ⚠️ **抠白底容差 16**：背景 253、白袜子 237 只差 16，容差 22 以上会把袜子吃穿。手内侧/两腿之间是
|
||||
**闭合**白区，四边 floodfill 进不去，得按连通域单独掏（面积 ≥24），再 1px 收边。
|
||||
- ⚠️ `ruleBody` 取令牌前要剥 `/* */`：注释会和后面的令牌粘成一个键，色块预览静默失效。
|
||||
- ⚠️ **主题会覆盖 base.css 的同名令牌 —— 基座改配色必须同步改主题**。改 `--tb-text-muted` 时
|
||||
sakura `#a08c94`(2.8:1)、shiroko `#8794a7`(2.76:1) 都还没跟上，"修了但主题页没变"就是这么来的。
|
||||
现已调到 `#78696e`(4.61) / `#656e7a`(4.63)，同色相只压深。主色仍不达标（见 topics/style.md）。
|
||||
量对比度时半透明 `--tb-surface` 要**压平到 --tb-bg** 再算，别当纯白。
|
||||
- 主题选择页的色块由浅色块的 `--tb-bg` + `--tb-primary` 生成（`swatchOf`），注释里别写令牌名。
|
||||
- `test01` 是用户 2026-10-21 自建又删掉的验证主题（css + 2 张 webp 已移除，未提交）。
|
||||
删主题只需删文件：`build()` 读不到 css 会打 warning 并忽略，已选该主题的用户静默回退站点默认。
|
||||
`static/images/shiroko-cutout.png` 只是 `docs/theme-shiroko.md` 的生成参考图，不进 embed。
|
||||
|
||||
Reference in New Issue
Block a user