temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g245): 补高对比偏好令牌，对比度门禁扩到四套主题

Browse Source
This commit is contained in:
HIsheR
2026-10-26 21:58:58 +08:00
parent 26c9867576
commit 6e52cc6206
9 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/tools/cli/lib/contrast-audit.mjs
+15 -5
View File
@@ -171,12 +171,16 @@ function ratio(fg, bg) {
return (l1 + 0.05) / (l2 + 0.05);
}
/*** 作用：构建两套主题的变量表：亮色 = :root，暗色 = :root 叠加 [data-theme='dark'] ***/
/*** 作用：构建四套主题的变量表：亮/暗 × 常规/高对比（高对比块在文件末尾的媒体查询里，同名变量覆盖即生效） ***/
export function loadThemes(root) {
const css = readText(path.join(root, TOKENS_REL));
const light = declsOf(blockOf(css, ':root'));
const dark = new Map([...light, ...declsOf(blockOf(css, "[data-theme='dark']"))]);
return { light, dark };
// 系统「提高对比度」偏好：媒体查询里只覆盖部分变量，未覆盖的沿用常规档，因此以对应主题为底再叠加
const media = blockOf(css, '@media (prefers-contrast: more)');
const contrastLight = new Map([...light, ...declsOf(blockOf(media, ':root'))]);
const contrastDark = new Map([...dark, ...declsOf(blockOf(media, "[data-theme='dark']"))]);
return { light, dark, contrastLight, contrastDark };
}
/*** 作用：跑一遍全部配对，返回每个主题的明细（纯数据，供 CLI 与测试共用） ***/
@@ -195,13 +199,19 @@ export function auditContrast(root) {
};
const lightOf = binder(themes.light);
const darkOf = binder(themes.dark);
const contrastLightOf = binder(themes.contrastLight);
const contrastDarkOf = binder(themes.contrastDark);
const rows = PAIRS.map((pair) => {
const lightRatio = ratio(lightOf(pair.fg), lightOf(pair.bg));
const darkRatio = ratio(darkOf(pair.fg), darkOf(pair.bg));
const contrastLightRatio = ratio(contrastLightOf(pair.fg), contrastLightOf(pair.bg));
const contrastDarkRatio = ratio(contrastDarkOf(pair.fg), contrastDarkOf(pair.bg));
const bad = [];
if (lightRatio < pair.min) bad.push('亮色');
if (darkRatio < pair.min) bad.push('暗色');
return { ...pair, light: lightRatio, dark: darkRatio, bad };
if (contrastLightRatio < pair.min) bad.push('高对比亮');
if (contrastDarkRatio < pair.min) bad.push('高对比暗');
return { ...pair, light: lightRatio, dark: darkRatio, contrastLight: contrastLightRatio, contrastDark: contrastDarkRatio, bad };
});
return { rows, failures: rows.filter((r) => r.bad.length > 0) };
}
@@ -209,10 +219,10 @@ export function auditContrast(root) {
/*** 作用：把明细打成对齐的文本表（人读模式，CLI 默认输出） ***/
export function formatReport({ rows, failures }) {
const fixed = (n) => n.toFixed(2).padStart(6);
const lines = ['配对 亮色 暗色 阈值 结论'];
const lines = ['配对 亮色 暗色 高亮 高暗 阈值 结论'];
for (const r of rows) {
const ok = r.bad.length === 0 ? 'OK' : `FAIL(${r.bad.join('+')})`;
lines.push(`${r.label.padEnd(26)}${fixed(r.light)} ${fixed(r.dark)} ${String(r.min).padStart(4)} ${ok}`);
lines.push(`${r.label.padEnd(24)}${fixed(r.light)} ${fixed(r.dark)} ${fixed(r.contrastLight)} ${fixed(r.contrastDark)} ${String(r.min).padStart(4)} ${ok}`);
}
lines.push('');
lines.push(failures.length === 0 ? '全部配对达标' : `不达标 ${failures.length} 条：${failures.map((f) => f.label).join(' / ')}`);