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:
@@ -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 硬编码) */
|
||||
|
||||
Reference in New Issue
Block a user