字号阶梯收尾 + 主色补到 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:
+23
-14
@@ -20,8 +20,14 @@
|
||||
旧的 #999 只有 2.85:1,都低于 WCAG AA 正文要求的 4.5:1;
|
||||
这个值在 #fff 上 4.83:1、在 --tb-surface-2 上 4.6:1,是能兼顾「淡」和「看得清」的下限。 */
|
||||
--tb-text-muted: #6b7280;
|
||||
--tb-primary: #1e87f0;
|
||||
--tb-primary-weak: rgba(30, 135, 240, 0.10);
|
||||
/* 主色同时也是 14px 链接/按钮文字的颜色,必须满足 AA 4.5:1。
|
||||
#1e87f0 white 底上只有 3.42:1(大号字够 3:1,正文不够),压深到 #0e6fd0 = 4.70:1,
|
||||
白字压在按钮上反而更清楚(5.00:1)。色相不变,只降亮度。 */
|
||||
--tb-primary: #0e6fd0;
|
||||
--tb-primary-weak: rgba(14, 111, 208, 0.10);
|
||||
/* 主色作背景时的文字色。浅色模式主色深 → 白字;深色模式主色浅 → 深字。
|
||||
深色块里主色是「亮强调」(#5c8dff 之流),白字压上去只有 2.2~3.1:1。 */
|
||||
--tb-on-primary: #ffffff;
|
||||
--tb-radius: 12px;
|
||||
--tb-radius-sm: 8px;
|
||||
--tb-radius-xs: 6px;
|
||||
@@ -64,6 +70,7 @@
|
||||
--tb-text-muted: #8b93a1;
|
||||
--tb-primary: #5c8dff;
|
||||
--tb-primary-weak: rgba(92, 141, 255, 0.14);
|
||||
--tb-on-primary: #0b1016;
|
||||
--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);
|
||||
}
|
||||
@@ -117,14 +124,14 @@
|
||||
/* 移动端优化:缩小字体和间距,避免右侧空白 */
|
||||
@media (max-width: 640px) {
|
||||
.uk-logo {
|
||||
font-size: 1rem;
|
||||
font-size: var(--tb-fs-lg);
|
||||
}
|
||||
.uk-navbar-nav a {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--tb-fs-xs);
|
||||
padding: 0 4px;
|
||||
}
|
||||
.emoji-placeholder {
|
||||
font-size: 1rem;
|
||||
font-size: var(--tb-fs-lg);
|
||||
}
|
||||
/* 移动端用户名限宽省略,避免长英文用户名撑爆顶栏 */
|
||||
.tb-nav-username {
|
||||
@@ -429,9 +436,9 @@
|
||||
color: var(--tb-primary);
|
||||
}
|
||||
|
||||
/* UIkit 组件跟随主题色:UIkit 3.3.3 的主色是编译期常量(#1e87f0),
|
||||
CSS 变量注入不进去,只能按组件覆盖。基础主题的 --tb-primary 恰好就是 #1e87f0,
|
||||
所以这段对默认外观零改动,只是让箱主主题能贯穿到按钮/链接/勾选。 */
|
||||
/* UIkit 组件跟随主题色:UIkit 3.3.3 的主色是编译期常量(写死在 uikit.min.css 里),
|
||||
CSS 变量注入不进去,只能按组件逐个覆盖成 var(--tb-primary)。
|
||||
少了这段,换主题后会出现「页面变粉、按钮还蓝」。 */
|
||||
a, .uk-link {
|
||||
color: var(--tb-primary);
|
||||
}
|
||||
@@ -440,6 +447,7 @@ a:hover, .uk-link:hover {
|
||||
}
|
||||
.uk-button-primary {
|
||||
background-color: var(--tb-primary);
|
||||
color: var(--tb-on-primary);
|
||||
}
|
||||
.uk-button-primary:hover,
|
||||
.uk-button-primary:focus {
|
||||
@@ -457,6 +465,7 @@ a:hover, .uk-link:hover {
|
||||
同特异性下 base.css 在 UIkit 之后加载,不排除会把它们一并刷成主色。 */
|
||||
.uk-label:not(.uk-label-danger):not(.uk-label-warning):not(.uk-label-success):not(.uk-label-secondary) {
|
||||
background-color: var(--tb-primary);
|
||||
color: var(--tb-on-primary);
|
||||
}
|
||||
.uk-input:focus,
|
||||
.uk-select:focus,
|
||||
@@ -554,7 +563,7 @@ a.tb-chip:hover {
|
||||
|
||||
/* 顶栏自适应:导航全部直接显示,窄屏时分级缩小字号/间距,保证英文/日文等长文字不溢出 */
|
||||
.uk-navbar-nav a {
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--tb-fs-md);
|
||||
padding: 0 10px;
|
||||
}
|
||||
/* 未登录移动端占位:桌面端隐藏,仅 ≤640px 显示(见下方 media 查询)。
|
||||
@@ -566,17 +575,17 @@ a.tb-chip:hover {
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.uk-navbar-nav a {
|
||||
font-size: 0.88rem;
|
||||
font-size: var(--tb-fs-md);
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.uk-navbar-nav a {
|
||||
font-size: 0.82rem;
|
||||
font-size: var(--tb-fs-xs);
|
||||
padding: 0 6px;
|
||||
}
|
||||
.uk-logo {
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--tb-fs-lg);
|
||||
}
|
||||
/* 登录用户名限宽,过长省略号截断 */
|
||||
.tb-nav-username {
|
||||
@@ -590,11 +599,11 @@ a.tb-chip:hover {
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.uk-navbar-nav a {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--tb-fs-xs);
|
||||
padding: 0 4px;
|
||||
}
|
||||
.uk-logo {
|
||||
font-size: 1rem;
|
||||
font-size: var(--tb-fs-lg);
|
||||
}
|
||||
.tb-nav-username {
|
||||
max-width: 80px;
|
||||
|
||||
Reference in New Issue
Block a user