fix(theme): 品牌色令牌语义拆分与暗黑模式全站治理
- 拆分品牌色「文字/底色」双通道:新增 --color-brand-ink(-rgb)(深色 #F87171) 与 tailwind brand.ink;text-brand → text-brand-ink 迁移 247 处; bg-brand/border-brand 保持 --color-brand-rgb 不翻转(红底白字 5.58:1 不能动) - dark 块补齐 --color-brand-bg: #2A1418(修复深色白字压浅粉底 1.04:1) - hero 徽章新增 --badge-accent-text 桥接:accentColor 直用作深底文字不可读 (#1e3a5f 深底 1.65:1),浅色取原色 / 深色 color-mix 提亮 - 硬编码颜色 token 化:bg-white/text-gray-*/border-gray-* → bg-bg-*/text-text-*/border-border-* - 可访问性:触控目标 <24px 归零(footer 链接列 [&_a]:min-h-6 收口 377 处等)、 news 搜索框补 aria-label、标题跳级 h2→h4 修正为 h3、装饰 blur 光斑容器补 overflow-hidden 消除伪文本裁剪 - 验证:tsc 0 / eslint 0 error / jest 0 失败用例 / dogfood 33 路由 × 双主题 P1-P3 全零
This commit is contained in:
+28
-2
@@ -26,6 +26,17 @@ body {
|
||||
--color-brand-soft: rgba(196, 30, 58, 0.12);
|
||||
--color-brand-bg: #FEF2F4;
|
||||
--color-brand-rgb: 196 30 58;
|
||||
/* 品牌「文字墨色」专用通道(text-brand-ink)。
|
||||
与 --color-brand-rgb 分离的原因:--color-brand-rgb 同时服务 bg-brand / border-brand,
|
||||
而红底白字按钮在深底上仍需 #C41E3A(实测 5.58:1);
|
||||
一旦随主题提亮,按钮会掉到 3.75:1。故文字与底色必须走两条通道。
|
||||
深色下取 #F87171(248 113 113):于 #0A0E14/#0F1419/#151B23 分别 6.99/6.69/6.26,全达 AA。 */
|
||||
--color-brand-ink: #C41E3A;
|
||||
--color-brand-ink-rgb: 196 30 58;
|
||||
/* 详情页 Hero badge 的 accent 文字色(accentColor 由各页 hero-themes 传入,
|
||||
经 --badge-accent 自定义属性注入)。浅色 = 原色;深色 = 45% accent + 55% 白的提亮变体
|
||||
—— accentColor 多为深色系(#1e3a5f 等),直接用作深底文字仅 1.65:1 */
|
||||
--badge-accent-text: var(--badge-accent, var(--color-ink));
|
||||
/* 品牌色深色区块(Bain 式深红背景) */
|
||||
--color-brand-section: #8B1530;
|
||||
--color-brand-section-text: #F8FAFC;
|
||||
@@ -452,6 +463,21 @@ html[data-theme='dark'] {
|
||||
--color-error-text: #F87171;
|
||||
--color-info-bg: #0E1A2A;
|
||||
--color-info-text: #60A5FA;
|
||||
|
||||
/* 品牌色分两条通道,只有「文字」通道翻转:
|
||||
- --color-brand / --color-brand-rgb(bg-brand、border-brand)**刻意不翻**:红底白字实测 5.58:1,
|
||||
若随主题提亮到 #E04A68 反而掉到 3.75:1。
|
||||
- --color-brand-ink-rgb(text-brand-ink)→ #F87171,与上方 --color-error-text 同值,不引入新色;
|
||||
于三种深底 6.99 / 6.69 / 6.26,全达 AA。
|
||||
- --color-brand-bg 补齐:它与 --color-error-bg 在浅色下同为 #FEF2F4,
|
||||
此前只翻了 error-bg,导致深色下白字压浅粉底仅 1.04:1(首页「首批客户共创计划」卡)。 */
|
||||
--color-brand-ink: #F87171;
|
||||
--color-brand-ink-rgb: 248 113 113;
|
||||
--color-brand-bg: #2A1418;
|
||||
|
||||
/* hero 徽章文字:accentColor 直用作深底文字不可读(如 #1e3a5f 于 #0B1119 仅 1.65:1),
|
||||
深色下按 accent 45% + 白 55% 提亮;--badge-accent 未注入时回退到反色墨字。 */
|
||||
--badge-accent-text: color-mix(in srgb, var(--badge-accent, var(--color-ink)) 45%, white);
|
||||
}
|
||||
|
||||
/* html/body 背景跟随主题 token(覆盖顶部 !important 硬编码) */
|
||||
@@ -631,7 +657,7 @@ html[data-theme='dark'] body {
|
||||
background: var(--color-bg-tertiary);
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-brand);
|
||||
color: var(--color-brand-ink);
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -684,7 +710,7 @@ html[data-theme='dark'] body {
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--letter-spacing-eyebrow);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-brand);
|
||||
color: var(--color-brand-ink);
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
Reference in New Issue
Block a user