refactor(admin): tokenize 语义色并补暗黑模式变量覆盖

将 admin 8 文件 ~50 处 raw red/green/yellow/amber/blue 类替换为语义 token
(error/success/warning/info),使其错误/成功/警告框在暗黑模式正确反色。

- tailwind.config.js: error 补 text 子键(原缺,text-error 暗黑底仅 3.3:1 不达 AA)
- globals.css: 新增 --color-error-text;html[data-theme='dark'] 补四语义色的
  *-bg(深色底)与 *-text(浅色,暗底达 AA)覆盖,原暗黑块完全漏掉这些变量
- 映射纪律:语义框 bg-<c>-bg border border-border-secondary text-<c>-text;
  危险按钮 bg-error/bg-success hover:bg-*-hover text-white;字段校验 border-error

验证:type-check 0 errors;lint 0 errors;单测 1624 passed;视觉回归 22 passed;
Playwright 实测 8 变量 light/dark 翻转 + 真实登录错误框背景反色确认。

Co-Authored-By: 阿睿 <workbuddy@tencent.com>
This commit is contained in:
2026-09-01 07:26:53 +08:00
co-authored by 阿睿
parent e0828db0cc
commit 4af238bdd9
10 changed files with 85 additions and 68 deletions
+14
View File
@@ -114,6 +114,9 @@ body {
--color-error-hover: #A01830;
--color-error-bg: #FEF2F4;
--color-error-rgb: 196 30 58;
/* 文字专用:--color-error(品牌红)在暗黑底仅 3.3:1,不达 AA;本值浅红,
暗黑模式经 html[data-theme='dark'] 覆盖(#F87171)后于暗底达 AA。 */
--color-error-text: #C41E3A;
--color-info: #3B82F6;
--color-info-rgb: 59 130 246;
@@ -419,6 +422,17 @@ html[data-theme='dark'] {
/* 链接反色 */
--color-link: #F8FAFC;
--color-link-hover: #E04A68;
/* 功能色反色:浅色调背景 → 深色同色调底;文字/图标 → 同色调浅色,于暗底达 AA。
按钮底色(DEFAULT)与边框(border-*)保持品牌饱和色,暗黑底仍可读/可见,故不覆盖。 */
--color-success-bg: #0E2A1A;
--color-success-text: #4ADE80;
--color-warning-bg: #2A2008;
--color-warning-text: #FBBF24;
--color-error-bg: #2A1418;
--color-error-text: #F87171;
--color-info-bg: #0E1A2A;
--color-info-text: #60A5FA;
}
/* html/body 背景跟随主题 token(覆盖顶部 !important 硬编码) */