tamakyi/tamabox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

字号阶梯收尾 + 主色补到 WCAG AA（新增 --tb-on-primary）

Browse Source 
一号事项（剩余令牌化）：
- 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:
tamakyi
2026-10-21 18:39:08 +08:00
parent 252b22a342
commit 27856dd4a2
20 changed files with 168 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/themes/_scaffold.css
+8 -3
View File
@@ -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);
static/css/themes/default.css
+1 -1
View File
@@ -4,7 +4,7 @@
省掉一次静态请求；下方令牌仅用于设置页色块预览。 */
html[data-theme-style="default"] {
--tb-bg: #f7f8fa;
--tb-primary: #1e87f0;
--tb-primary: #0e6fd0;
}
html[data-theme="dark"][data-theme-style="default"] {
static/css/themes/sakura.css
+4 -3
View File
@@ -17,8 +17,9 @@ html[data-theme-style="sakura"] {
/* 弱化文字：旧值 #a08c94 只有 2.8:1（看不清），#78696e 是 4.6:1，踩住 AA 下限 */
--tb-text-muted: #78696e;
--tb-primary: #e5678f;
--tb-primary-weak: rgba(229, 103, 143, 0.12);
/* 原来的 #e5678f 在粉底上只有 2.80:1（链接几乎看不清）；同色相压深到 #ba3e66 = 4.70:1 */
--tb-primary: #ba3e66;
--tb-primary-weak: rgba(186, 62, 102, 0.12);
--tb-shadow: 0 1px 2px rgba(120, 60, 80, 0.05), 0 12px 28px -18px rgba(120, 60, 80, 0.22);
--tb-shadow-hover: 0 1px 2px rgba(120, 60, 80, 0.07), 0 18px 40px -20px rgba(120, 60, 80, 0.30);
@@ -38,7 +39,7 @@ html[data-theme="dark"][data-theme-style="sakura"] {
--tb-text: #f2e4e9;
--tb-text-secondary: #c6aab4;
--tb-text-muted: #9d818b;
--tb-text-muted: #a18790;
--tb-primary: #ff8ab0;
--tb-primary-weak: rgba(255, 138, 176, 0.16);
static/css/themes/shiroko.css
+6 -5
View File
@@ -24,8 +24,9 @@ html[data-theme-style="shiroko"] {
/* 弱化文字：旧值 #8794a7 只有 2.76:1（看不清），#656e7a 是 4.63:1，踩住 AA 下限 */
--tb-text-muted: #656e7a;
--tb-primary: #4a7fc1;
--tb-primary-weak: rgba(74, 127, 193, 0.11);
/* 原来的 #4a7fc1 在 #eef3f9 上只有 3.69:1；同色相压深到 #3b6dac = 4.74:1 */
--tb-primary: #3b6dac;
--tb-primary-weak: rgba(59, 109, 172, 0.11);
--tb-shadow: 0 1px 2px rgba(38, 56, 82, 0.05), 0 18px 44px -22px rgba(38, 56, 82, 0.30);
--tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 24px 56px -24px rgba(38, 56, 82, 0.38);
@@ -69,7 +70,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] {
--tb-text: #e3eaf4;
--tb-text-secondary: #a6b4c8;
--tb-text-muted: #77869b;
--tb-text-muted: #7f8ea1;
--tb-primary: #6fa3e0;
--tb-primary-weak: rgba(111, 163, 224, 0.16);
@@ -105,10 +106,10 @@ html[data-theme="dark"][data-theme-style="shiroko"] {
html[data-theme-style="shiroko"] .uk-card-default {
backdrop-filter: blur(16px) saturate(1.05);
-webkit-backdrop-filter: blur(16px) saturate(1.05);
box-shadow: 0 0 0 1px rgba(74, 127, 193, 0.12), var(--tb-shadow);
box-shadow: 0 0 0 1px rgba(59, 109, 172, 0.12), var(--tb-shadow);
}
html[data-theme-style="shiroko"] .uk-card-default.uk-card-hover:hover {
box-shadow: 0 0 0 1px rgba(74, 127, 193, 0.18), var(--tb-shadow-hover);
box-shadow: 0 0 0 1px rgba(59, 109, 172, 0.18), var(--tb-shadow-hover);
}
html[data-theme-style="shiroko"] .uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-navbar);