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 <noreply@openai.com>
This commit is contained in:
Zyy
2026-08-25 17:06:05 +08:00
co-authored by Codex
parent ed3d622554
commit 5d0922b9d1
2 changed files with 11 additions and 4 deletions
+7 -2
View File
@@ -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
+4 -2
View File
@@ -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),