From 5d0922b9d177ee083ad8140d2007ea77abd22725 Mon Sep 17 00:00:00 2001 From: Zyy Date: Tue, 25 Aug 2026 17:06:05 +0800 Subject: [PATCH] fix(theme): align functional colors with Ant Design Keep functional base tokens on Ant Design P6 so light themes preserve the configured seed while dark themes retain palette adaptation. Co-authored-by: Codex --- docs/theme.md | 9 +++++++-- frontend/src/theme/index.ts | 6 ++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/theme.md b/docs/theme.md index e2664adc9..c817bf135 100644 --- a/docs/theme.md +++ b/docs/theme.md @@ -21,7 +21,8 @@ CSS Variables 与 Tailwind CSS 4 utilities 消费主题。 ## 设计原则 -- **所选即所得**：`colorPrimary` 始终保留用户选择的 Seed 原色；只有 Hover、Active、弱背景和文字色使用派生值。 +- **所选即所得**：`colorPrimary` 始终保留用户选择的 Seed 原色；浅色功能基础色沿用 Ant Design P6， + 同样等于 Seed。只有深色适配、Hover、Active、弱背景和文字色使用派生值。 - **主色与表面分离**：品牌色负责交互和强调，页面、容器、浮层与文字由独立的背景和文本 Seed 派生。 - **语义独立**：`success`、`warning`、`error`、`info` 与 `link` 拥有各自 Seed，不随品牌色隐式改变。 - **无边设计**：默认依靠表面色差、间距和轻阴影表达层级；边框只用于焦点、错误和必要分隔。 @@ -110,6 +111,10 @@ interface ThemeCustomization { | 弱背景 | 从当前容器表面与主色混合，避免低亮度 Seed 产生脏灰色块 | | 文字与描边 | 从色板取值后，对相邻 Surface 执行对比度校正 | +功能色的基础 Map 对齐 Ant Design：`info`、`success`、`warning`、`error` 均固定取十阶色板 P6。浅色 P6 +就是用户选择的 Seed，因此 `--cp-color-info / success / warning / error` 不再经过额外对比度改写；深色 P6 +继续使用暗色色板对当前 Surface 做主题适配。功能色的 Hover、Active、弱背景、文字和描边仍按各自角色派生。 + 背景与文本 Seed 进入独立的 Surface Map，生成： - `colorBgLayout / Container / Elevated / Spotlight / Mask` @@ -141,7 +146,7 @@ Alias 层执行以下保护： - 普通文字与背景的目标对比度为 4.5:1。 - 控件边界与相邻 Surface 的目标对比度为 3:1。 - 极亮的实心按钮背景自动切换为深色文字，避免白底白字。 -- 校正只修改最终 Alias，不反写用户保存的 Seed。 +- 校正只修改文字、描边和状态等具体角色 Alias，不反写用户保存的 Seed，也不改写基础功能色 Alias。 ### Component Token diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts index f2c9afc38..bb701270f 100644 --- a/frontend/src/theme/index.ts +++ b/frontend/src/theme/index.ts @@ -744,7 +744,9 @@ function deriveFunctionalColorMap( const palette = generate(seed, theme === 'dark' ? { theme: 'dark', backgroundColor: containerBg } : undefined).map(color => normalizeHexColor(color) ?? seed) - const color = palette[theme === 'dark' ? 6 : 5]! + // 与 Ant Design 的功能色 Map 保持一致：基础功能色固定取 P6。 + // 浅色 P6 即用户选择的 Seed；深色 P6 由暗色色板适配。对比度保护只作用于具体角色 Token。 + const color = palette[5]! const hover = palette[theme === 'dark' ? 7 : 4]! const active = palette[theme === 'dark' ? 5 : 6]! const backgroundMix = theme === 'dark' ? 0.18 : 0.08 @@ -753,7 +755,7 @@ function deriveFunctionalColorMap( const text = baselineText ?? palette[theme === 'dark' ? 8 : 5]! return { - color: ensureContrast(color, containerBg, 3), + color, hover: ensureContrast(hover, containerBg, 3), active: ensureContrast(active, containerBg, 3), background: mix(containerBg, color, backgroundMix),