fix(css): globals.css 22 个 rgb 变量格式修复(逗号→空格)
Tailwind v3 颜色配置 rgb(var(--color-X-rgb) / <alpha-value>) 要求 RGB 分量空格分隔。 原逗号分隔 'R, G, B' 与 <alpha-value> 组合生成无效 CSS 'rgb(10, 14, 20 / 1)', 浏览器解析失败回退 rgba(0,0,0,0) 透明,导致 bg-ink / bg-brand/15 / border-brand/30 等所有依赖 alpha 的颜色全站不可见(Hero H1、立即咨询按钮、slogan badge 隐形)。 修复后将 22 个 --color-*-rgb 变量改为空格分隔,恢复颜色正确显示。
This commit is contained in:
+22
-22
@@ -17,7 +17,7 @@ body {
|
||||
--color-ink: #0A0E14;
|
||||
--color-ink-light: #0F1419;
|
||||
--color-ink-lighter: #151B23;
|
||||
--color-ink-rgb: 10, 14, 20;
|
||||
--color-ink-rgb: 10 14 20;
|
||||
|
||||
/* 品牌信号色:朱砂红 — Committed 色彩策略(Bain 式自信表达) */
|
||||
--color-brand: #C41E3A;
|
||||
@@ -25,7 +25,7 @@ body {
|
||||
--color-brand-light: #E04A68;
|
||||
--color-brand-soft: rgba(196, 30, 58, 0.12);
|
||||
--color-brand-bg: #FEF2F4;
|
||||
--color-brand-rgb: 196, 30, 58;
|
||||
--color-brand-rgb: 196 30 58;
|
||||
/* 品牌色深色区块(Bain 式深红背景) */
|
||||
--color-brand-section: #8B1530;
|
||||
--color-brand-section-text: #F8FAFC;
|
||||
@@ -34,40 +34,40 @@ body {
|
||||
/* 辅助色:服务/行业编码 */
|
||||
--color-accent-blue: #3B82F6;
|
||||
--color-accent-blue-soft: rgba(59, 130, 246, 0.12);
|
||||
--color-accent-blue-rgb: 59, 130, 246;
|
||||
--color-accent-blue-rgb: 59 130 246;
|
||||
|
||||
--color-accent-teal: #14B8A6;
|
||||
--color-accent-teal-soft: rgba(20, 184, 166, 0.12);
|
||||
--color-accent-teal-rgb: 20, 184, 166;
|
||||
--color-accent-teal-rgb: 20 184 166;
|
||||
|
||||
--color-accent-amber: #F59E0B;
|
||||
--color-accent-amber-soft: rgba(245, 158, 11, 0.12);
|
||||
--color-accent-amber-rgb: 245, 158, 11;
|
||||
--color-accent-amber-rgb: 245 158 11;
|
||||
|
||||
--color-accent-purple: #8B5CF6;
|
||||
--color-accent-purple-soft: rgba(139, 92, 246, 0.12);
|
||||
--color-accent-purple-rgb: 139, 92, 246;
|
||||
--color-accent-purple-rgb: 139 92 246;
|
||||
--color-accent-cyan: #06B6D4;
|
||||
--color-accent-cyan-soft: rgba(6, 182, 212, 0.12);
|
||||
--color-accent-cyan-rgb: 6, 182, 212;
|
||||
--color-accent-cyan-rgb: 6 182 212;
|
||||
|
||||
/* 背景色层级 */
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #F8FAFC;
|
||||
--color-bg-secondary-rgb: 248, 250, 252;
|
||||
--color-bg-secondary-rgb: 248 250 252;
|
||||
--color-bg-tertiary: #F1F5F9;
|
||||
--color-bg-section: #F8FAFC;
|
||||
--color-bg-hover: #F1F5F9;
|
||||
--color-bg-elevated: #FFFFFF;
|
||||
--color-bg-primary-rgb: 255, 255, 255;
|
||||
--color-bg-primary-rgb: 255 255 255;
|
||||
|
||||
/* 文字色层级 */
|
||||
--color-text-primary: #0A0E14;
|
||||
--color-text-secondary: #334155;
|
||||
--color-text-secondary-rgb: 51, 65, 85;
|
||||
--color-text-secondary-rgb: 51 65 85;
|
||||
--color-text-tertiary: #475569;
|
||||
--color-text-muted: #64748B;
|
||||
--color-text-muted-rgb: 100, 116, 139;
|
||||
--color-text-muted-rgb: 100 116 139;
|
||||
--color-text-subtle: #64748B;
|
||||
--color-text-placeholder: #64748B;
|
||||
/* 仅用于 ≥24px 大号装饰性文本(如章节序号),对白底 3.41:1,满足 AA 大字 3:1。
|
||||
@@ -79,17 +79,17 @@ body {
|
||||
让 20 处 gap-px bg-border-primary 网格线与所有卡片边框都自动弱化(约 50%),
|
||||
与增强的卡片阴影呼应,视觉从"靠硬边分界"转为"靠阴影分层"。 */
|
||||
--color-border-primary: #EEF2F7;
|
||||
--color-border-primary-rgb: 238, 242, 247;
|
||||
--color-border-primary-rgb: 238 242 247;
|
||||
--color-border-secondary: #CBD5E1;
|
||||
--color-border-secondary-rgb: 203, 213, 225;
|
||||
--color-border-secondary-rgb: 203 213 225;
|
||||
--color-border-accent: #0A0E14;
|
||||
--color-border-accent-rgb: 10, 14, 20;
|
||||
--color-border-accent-rgb: 10 14 20;
|
||||
--color-border-light: #F1F5F9;
|
||||
--color-border-light-rgb: 241, 245, 249;
|
||||
--color-border-light-rgb: 241 245 249;
|
||||
--color-border-dark: #334155;
|
||||
--color-border-dark-rgb: 51, 65, 85;
|
||||
--color-border-dark-rgb: 51 65 85;
|
||||
--color-border-brand: #C41E3A;
|
||||
--color-border-brand-rgb: 196, 30, 58;
|
||||
--color-border-brand-rgb: 196 30 58;
|
||||
|
||||
/* 链接色 */
|
||||
--color-link: #0A0E14;
|
||||
@@ -99,24 +99,24 @@ body {
|
||||
--color-success: #16A34A;
|
||||
--color-success-hover: #15803D;
|
||||
--color-success-bg: #F0FDF4;
|
||||
--color-success-rgb: 22, 163, 74;
|
||||
--color-success-rgb: 22 163 74;
|
||||
/* 文字专用:--color-success 仅 3.30:1,作正文色不达 AA;本值 5.02:1(于 success-bg 上 4.79:1) */
|
||||
--color-success-text: #15803D;
|
||||
|
||||
--color-warning: #D97706;
|
||||
--color-warning-hover: #B45309;
|
||||
--color-warning-bg: #FFFBEB;
|
||||
--color-warning-rgb: 217, 119, 6;
|
||||
--color-warning-rgb: 217 119 6;
|
||||
/* 文字专用:--color-warning 仅 3.19:1,作正文色不达 AA;本值 5.02:1(于 warning-bg 上 4.84:1) */
|
||||
--color-warning-text: #B45309;
|
||||
|
||||
--color-error: #C41E3A;
|
||||
--color-error-hover: #A01830;
|
||||
--color-error-bg: #FEF2F4;
|
||||
--color-error-rgb: 196, 30, 58;
|
||||
--color-error-rgb: 196 30 58;
|
||||
|
||||
--color-info: #3B82F6;
|
||||
--color-info-rgb: 59, 130, 246;
|
||||
--color-info-rgb: 59 130 246;
|
||||
--color-info-bg: #EFF6FF;
|
||||
/* 文字专用:--color-info 仅 3.68:1,作正文色不达 AA;本值 6.70:1(于 info-bg 上 6.16:1) */
|
||||
--color-info-text: #1D4ED8;
|
||||
@@ -649,7 +649,7 @@ body {
|
||||
--color-text-secondary: #1a1a1a;
|
||||
--color-border-primary: #000000;
|
||||
/* Tailwind border-* 工具类消费 rgb 通道,需同步覆写,否则高对比度模式下边框静默失效 */
|
||||
--color-border-primary-rgb: 0, 0, 0;
|
||||
--color-border-primary-rgb: 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user