主题体系跟上设计令牌化：派生文字色按对比度下限、主题 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
+39
-11
@@ -16,7 +16,10 @@
|
||||
--tb-border: #e8eaee;
|
||||
--tb-text: #1f2329;
|
||||
--tb-text-secondary: #5c6370;
|
||||
--tb-text-muted: #8a919c;
|
||||
/* 次要文字：必须是 #6b7280 而不是更浅的灰。实测 #8a919c 在纯白上只有 3.18:1、
|
||||
旧的 #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);
|
||||
--tb-radius: 12px;
|
||||
@@ -25,6 +28,15 @@
|
||||
--tb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -18px rgba(16, 24, 40, 0.20);
|
||||
--tb-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 40px -20px rgba(16, 24, 40, 0.28);
|
||||
--tb-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
|
||||
/* 字号阶梯：只留 5 档。之前页面里散落 0.7/0.72/0.78/0.8/0.82/0.84/0.85/0.86/0.88/0.9/0.95/0.98
|
||||
十几个值，14px 上下挤了五六档，肉眼分不出来、只会显得排版乱。
|
||||
lg 取 1rem 而不是 17px：UIkit 原生的 .uk-card-title / h4 就是 16px，
|
||||
顺着它才能让自定义标题与组件标题落在同一档，而不是差 1px 的两档并存。 */
|
||||
--tb-fs-xs: 0.75rem; /* 12px 标签、脚注、meta */
|
||||
--tb-fs-md: 0.875rem; /* 14px 正文、列表、按钮 */
|
||||
--tb-fs-lg: 1rem; /* 16px 区块小标题、卡片标题 */
|
||||
--tb-fs-xl: 1.5rem; /* 24px 页面标题、大数字 */
|
||||
--tb-fs-hero: 1.75rem; /* 28px 首页主标题 */
|
||||
/* 整页背景：主题可覆盖。图案层叠在背景图之上，两者都不用时保持纯色底。 */
|
||||
--tb-page-image: none;
|
||||
--tb-page-pattern: none;
|
||||
@@ -163,6 +175,11 @@
|
||||
html[data-theme="dark"] .uk-list a {
|
||||
color: var(--tb-text) !important;
|
||||
}
|
||||
/* 顶栏链接在深色下也用次要文字色：亮色块已经改成 secondary，
|
||||
这里若保持 --tb-text（正文色），同一个顶栏在深浅两种模式下权重会跳一档。 */
|
||||
html[data-theme="dark"] .uk-navbar-nav > li > a {
|
||||
color: var(--tb-text-secondary) !important;
|
||||
}
|
||||
html[data-theme="dark"] .uk-navbar-nav > li > a:hover,
|
||||
html[data-theme="dark"] .uk-card a:hover,
|
||||
html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a:hover,
|
||||
@@ -328,35 +345,46 @@
|
||||
border-radius: var(--tb-radius-xs);
|
||||
}
|
||||
.uk-alert {
|
||||
border-radius: 10px;
|
||||
border-radius: var(--tb-radius-sm);
|
||||
}
|
||||
.uk-modal-dialog {
|
||||
border-radius: 14px;
|
||||
border-radius: var(--tb-radius);
|
||||
}
|
||||
.uk-dropdown,
|
||||
.uk-navbar-dropdown {
|
||||
border-radius: 10px;
|
||||
border-radius: var(--tb-radius-sm);
|
||||
box-shadow: var(--tb-shadow);
|
||||
}
|
||||
.uk-navbar-container:not(.uk-navbar-transparent) {
|
||||
background-color: var(--tb-navbar, var(--tb-surface));
|
||||
}
|
||||
/* 顶栏导航：UIkit 默认用 rgba(0,0,0,.5)，在纯白上实测只有 2.68:1（AA 需 4.5）。
|
||||
改用次要文字色（6.05:1），hover / 当前页走主色；暗色由下方 dark 分支统一接管。 */
|
||||
.uk-navbar-nav > li > a {
|
||||
color: var(--tb-text-secondary);
|
||||
}
|
||||
.uk-navbar-nav > li > a:hover,
|
||||
.uk-navbar-nav > li.uk-active > a {
|
||||
color: var(--tb-primary);
|
||||
}
|
||||
/* 键盘可达性：仅在键盘聚焦时出现描边，鼠标点击不出现 */
|
||||
.uk-button:focus-visible,
|
||||
.uk-navbar-nav > li > a:focus-visible {
|
||||
outline: 2px solid var(--tb-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* 次要文字统一走令牌，避免 #999 / #8a919c 混用 */
|
||||
/* 次要文字统一走令牌，避免 #999 / #8a919c 混用。
|
||||
⚠️ 必须 !important：UIkit 3.3.3 自带 .uk-text-muted{color:#999!important}，
|
||||
普通声明一律压不过它（踩过：规则写了但全站仍是 #999，实测 2.85:1）。 */
|
||||
.uk-text-muted,
|
||||
.uk-text-meta {
|
||||
color: var(--tb-text-muted);
|
||||
color: var(--tb-text-muted) !important;
|
||||
}
|
||||
|
||||
/* 主题选择器（设置页）：色块 + 名称。纯展示，不参与主题令牌，所以放在基础层。 */
|
||||
.tb-theme-hint {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--tb-fs-xs);
|
||||
color: var(--tb-text-muted);
|
||||
}
|
||||
.tb-theme-grid {
|
||||
@@ -394,7 +422,7 @@
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.tb-theme-name {
|
||||
font-size: 0.84rem;
|
||||
font-size: var(--tb-fs-xs);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.tb-theme-opt input:checked ~ .tb-theme-name {
|
||||
@@ -450,7 +478,7 @@ a:hover, .uk-link:hover {
|
||||
border-radius: var(--tb-radius-xs);
|
||||
background-color: var(--tb-surface-2);
|
||||
color: var(--tb-text-secondary);
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--tb-fs-xs);
|
||||
line-height: 1.7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -690,14 +718,14 @@ a.tb-chip:hover {
|
||||
.md-body pre {
|
||||
background: #f5f5f5;
|
||||
padding: 0.8em 1em;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--tb-radius-xs);
|
||||
overflow-x: auto;
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
.md-body code {
|
||||
background: #f0f0f0;
|
||||
padding: 0.1em 0.35em;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--tb-radius-xs);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.md-body pre code { background: none; padding: 0; }
|
||||
|
||||
Reference in New Issue
Block a user