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 全过。
4.4 KiB
4.4 KiB
主题生成器 dev/theme-builder/（长版明细）
主题生成器 dev/theme-builder/
serve.py起静态服务（8777），iframe 加载outputs/preview-*.html。file:// 下父页读不到 iframe DOM，必须走 HTTP。 8777 常由用户自己起着，改完直接刷新。- 单文件
index.html（约 2900 行）。图片处理非破坏：orig存原始字节 +fx存参数，每次从 orig 重算； 参数没变则跳过重编码。画质（S.export.quality/maxSide）同理 —— 改完rebakeAll()从 orig 重来，不叠加压缩。 - 尺寸单位 4 档：
fit（按视口高，人物）/fitw（按视口宽，横幅）/px/vh。layerSize()出 CSS、unitGeom()出预览框，两处必须共用同一函数，否则「框没超、图已裁」。 ⚠️ 下拉的 value 用l.unit，不能用unitOf(l)（后者把 fit 归一成 vh → 选了 fit 却显示 vh）。 - 溢出检测
layerMetrics(l, a, VW, VH)：算 left/top/overL/R/T/B，编辑器里显示「显示 131×420，完整可见」或 「⚠ 左右各 88px 越界」，并给「按当前视口修好」按钮（切 px + 算刚好放下的尺寸）。导出前overflowReport()再扫一遍。 - 视口预设带高度（1512×900 / 1280×800 / 1024×768 / 820×1180 / 390×844）：裁切几乎全由高度决定，
只改宽度模拟不出来。
fitStage()按预设高渲染 iframe。 - 窄屏：全局
hideDeco（急停）> 每层mob（inherit/scale/hide）> 尺寸单位（fit/fitw 自己就缩）。 ⚠️hideDeco会把 @media 里 10 槽全写 none —— 桌面完全正常、手机上素材全没了， 这是「素材在窄屏消失」的头号来源（test01 就是这么中招的）。UI 已在勾选时给橙色警告、 图层行标「窄屏隐藏」、加层/导出再提醒；?narrow=hide可一键复现。 ⚠️@media里每个独立配置的 scope 都要写一条[data-page-scope="x"]：页面覆盖块特异性 (0,2,1)， 只写html[data-theme-style](0,1,1) 的话独立配置页在手机上完全不生效。 ⚠️ 竖版图只替换本来有背景图的页面（cfg.bg非空），否则等于给纯色页塞了张图。 - ⚠️ 派生文字色必须走对比度下限，不能按固定比例混：
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)。 - 还要导出
--tb-on-primary（白字#ffffff/ 深字#0b1016里挑对比度更高的）： 深色模式主色偏亮，白字只有 2.2~3.1:1。主色卡中间调时两种字都不够 → 面板橙色提示 +?dump=palette的warnings，不判失败（是主色要调，不是工具挑错）。
- 半透明卡片（
- 自检钩子：
?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"[^>]*>）。 - ⚠️ canvas
toDataURL('image/webp', 1)不能用：Skia 在 q=1 切无损，输出反常（噪声图 q=1 只 52KB， q=0.95 是 440KB）。canvasAsset夹到 0.95，滑块上限也是 0.95。 - ⚠️ 平涂/线稿降 q 可能变大（有损引入噪点）。压体积先砍长边，再降 q。缩小走
imageSmoothingQuality='high'。 - ⚠️ 面板只有 ~240px：
input[type=range]有固有宽度，必须flex:1 1 0;width:0;min-width:0， 且数值放进 label 里（第三个小 flex 项会被顶出可视区）。 ?dump=css的产物要过 Go 侧校验：临时存成static/css/themes/<非下划线名>.css再go test ./internal/theme， 跑完删掉。