字号阶梯收尾 + 主色补到 WCAG AA(新增 --tb-on-primary)
一号事项(剩余令牌化):
- 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 全过。
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
display / flex / grid、position 一律不动 —— 主题不是换皮模板。
|
||||
3. 本文件不参与构建,仅作参考;真正生效的是同目录下的 <slug>.css。
|
||||
|
||||
── 可用的 29 个令牌 ──────────────────────────────────────────────
|
||||
── 可用的 30 个令牌 ──────────────────────────────────────────────
|
||||
底色层 --tb-bg 页面底色(html/body)
|
||||
--tb-surface 卡片、输入框等前景面板
|
||||
--tb-surface-2 次级面(标签底、进度条轨道、代码块)
|
||||
@@ -31,6 +31,9 @@
|
||||
往浅调很容易掉到 3:1 以下(旧的 #8a919c 是 3.18:1),肉眼"淡一点"其实已经看不清了。
|
||||
强调 --tb-primary 主色:链接、主按钮、进度条
|
||||
--tb-primary-weak 主色 10% 左右的浅底(选中态、标签)
|
||||
--tb-on-primary 主色作背景时的文字色(默认白字;深色块一般是深字)
|
||||
主色同时是 14px 链接色,要 ≥4.5:1;但主色越深,
|
||||
白字压在按钮上越清楚 —— 所以深色模式反而不该用白字。
|
||||
形状 --tb-radius 卡片 12px / --tb-radius-sm 8px / --tb-radius-xs 6px
|
||||
阴影 --tb-shadow 卡片默认 / --tb-shadow-hover 悬停
|
||||
字体 --tb-font 字体栈(一般不改)
|
||||
@@ -83,8 +86,9 @@ html[data-theme-style="SLUG"] {
|
||||
--tb-text-secondary: #5c6370;
|
||||
--tb-text-muted: #6b7280; /* AA 下限:白底 4.83:1。别再往浅调 */
|
||||
|
||||
--tb-primary: #1e87f0;
|
||||
--tb-primary-weak: rgba(30, 135, 240, 0.10);
|
||||
--tb-primary: #0e6fd0; /* AA:白底 4.70:1。再浅就只够大号字了 */
|
||||
--tb-primary-weak: rgba(14, 111, 208, 0.10);
|
||||
--tb-on-primary: #ffffff;
|
||||
|
||||
--tb-radius: 12px;
|
||||
--tb-radius-sm: 8px;
|
||||
@@ -129,6 +133,7 @@ html[data-theme="dark"][data-theme-style="SLUG"] {
|
||||
|
||||
--tb-primary: #5c8dff;
|
||||
--tb-primary-weak: rgba(92, 141, 255, 0.14);
|
||||
--tb-on-primary: #0b1016; /* 深色主色偏亮,白字只有 3.13:1 */
|
||||
|
||||
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
|
||||
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
|
||||
|
||||
Reference in New Issue
Block a user