Refactor/optimize ui #24

Merged
zhangxiang merged 33 commits from refactor/optimize-ui into dev 2026-09-01 11:47:02 +08:00
Showing only changes of commit 011189a38c - Show all commits
+22 -22
View File
@@ -17,7 +17,7 @@ body {
--color-ink: #0A0E14; --color-ink: #0A0E14;
--color-ink-light: #0F1419; --color-ink-light: #0F1419;
--color-ink-lighter: #151B23; --color-ink-lighter: #151B23;
--color-ink-rgb: 10, 14, 20; --color-ink-rgb: 10 14 20;
/* 品牌信号色:朱砂红 — Committed 色彩策略(Bain 式自信表达) */ /* 品牌信号色:朱砂红 — Committed 色彩策略(Bain 式自信表达) */
--color-brand: #C41E3A; --color-brand: #C41E3A;
@@ -25,7 +25,7 @@ body {
--color-brand-light: #E04A68; --color-brand-light: #E04A68;
--color-brand-soft: rgba(196, 30, 58, 0.12); --color-brand-soft: rgba(196, 30, 58, 0.12);
--color-brand-bg: #FEF2F4; --color-brand-bg: #FEF2F4;
--color-brand-rgb: 196, 30, 58; --color-brand-rgb: 196 30 58;
/* 品牌色深色区块(Bain 式深红背景) */ /* 品牌色深色区块(Bain 式深红背景) */
--color-brand-section: #8B1530; --color-brand-section: #8B1530;
--color-brand-section-text: #F8FAFC; --color-brand-section-text: #F8FAFC;
@@ -34,40 +34,40 @@ body {
/* 辅助色:服务/行业编码 */ /* 辅助色:服务/行业编码 */
--color-accent-blue: #3B82F6; --color-accent-blue: #3B82F6;
--color-accent-blue-soft: rgba(59, 130, 246, 0.12); --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: #14B8A6;
--color-accent-teal-soft: rgba(20, 184, 166, 0.12); --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: #F59E0B;
--color-accent-amber-soft: rgba(245, 158, 11, 0.12); --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: #8B5CF6;
--color-accent-purple-soft: rgba(139, 92, 246, 0.12); --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: #06B6D4;
--color-accent-cyan-soft: rgba(6, 182, 212, 0.12); --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-primary: #FFFFFF;
--color-bg-secondary: #F8FAFC; --color-bg-secondary: #F8FAFC;
--color-bg-secondary-rgb: 248, 250, 252; --color-bg-secondary-rgb: 248 250 252;
--color-bg-tertiary: #F1F5F9; --color-bg-tertiary: #F1F5F9;
--color-bg-section: #F8FAFC; --color-bg-section: #F8FAFC;
--color-bg-hover: #F1F5F9; --color-bg-hover: #F1F5F9;
--color-bg-elevated: #FFFFFF; --color-bg-elevated: #FFFFFF;
--color-bg-primary-rgb: 255, 255, 255; --color-bg-primary-rgb: 255 255 255;
/* 文字色层级 */ /* 文字色层级 */
--color-text-primary: #0A0E14; --color-text-primary: #0A0E14;
--color-text-secondary: #334155; --color-text-secondary: #334155;
--color-text-secondary-rgb: 51, 65, 85; --color-text-secondary-rgb: 51 65 85;
--color-text-tertiary: #475569; --color-text-tertiary: #475569;
--color-text-muted: #64748B; --color-text-muted: #64748B;
--color-text-muted-rgb: 100, 116, 139; --color-text-muted-rgb: 100 116 139;
--color-text-subtle: #64748B; --color-text-subtle: #64748B;
--color-text-placeholder: #64748B; --color-text-placeholder: #64748B;
/* 仅用于 ≥24px 大号装饰性文本(如章节序号),对白底 3.41:1,满足 AA 大字 3:1。 /* 仅用于 ≥24px 大号装饰性文本(如章节序号),对白底 3.41:1,满足 AA 大字 3:1。
@@ -79,17 +79,17 @@ body {
让 20 处 gap-px bg-border-primary 网格线与所有卡片边框都自动弱化(约 50%), 让 20 处 gap-px bg-border-primary 网格线与所有卡片边框都自动弱化(约 50%),
与增强的卡片阴影呼应,视觉从"靠硬边分界"转为"靠阴影分层"。 */ 与增强的卡片阴影呼应,视觉从"靠硬边分界"转为"靠阴影分层"。 */
--color-border-primary: #EEF2F7; --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: #CBD5E1;
--color-border-secondary-rgb: 203, 213, 225; --color-border-secondary-rgb: 203 213 225;
--color-border-accent: #0A0E14; --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: #F1F5F9;
--color-border-light-rgb: 241, 245, 249; --color-border-light-rgb: 241 245 249;
--color-border-dark: #334155; --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: #C41E3A;
--color-border-brand-rgb: 196, 30, 58; --color-border-brand-rgb: 196 30 58;
/* 链接色 */ /* 链接色 */
--color-link: #0A0E14; --color-link: #0A0E14;
@@ -99,24 +99,24 @@ body {
--color-success: #16A34A; --color-success: #16A34A;
--color-success-hover: #15803D; --color-success-hover: #15803D;
--color-success-bg: #F0FDF4; --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 仅 3.30:1,作正文色不达 AA;本值 5.02:1(于 success-bg 上 4.79:1 */
--color-success-text: #15803D; --color-success-text: #15803D;
--color-warning: #D97706; --color-warning: #D97706;
--color-warning-hover: #B45309; --color-warning-hover: #B45309;
--color-warning-bg: #FFFBEB; --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 仅 3.19:1,作正文色不达 AA;本值 5.02:1(于 warning-bg 上 4.84:1 */
--color-warning-text: #B45309; --color-warning-text: #B45309;
--color-error: #C41E3A; --color-error: #C41E3A;
--color-error-hover: #A01830; --color-error-hover: #A01830;
--color-error-bg: #FEF2F4; --color-error-bg: #FEF2F4;
--color-error-rgb: 196, 30, 58; --color-error-rgb: 196 30 58;
--color-info: #3B82F6; --color-info: #3B82F6;
--color-info-rgb: 59, 130, 246; --color-info-rgb: 59 130 246;
--color-info-bg: #EFF6FF; --color-info-bg: #EFF6FF;
/* 文字专用:--color-info 仅 3.68:1,作正文色不达 AA;本值 6.70:1(于 info-bg 上 6.16:1 */ /* 文字专用:--color-info 仅 3.68:1,作正文色不达 AA;本值 6.70:1(于 info-bg 上 6.16:1 */
--color-info-text: #1D4ED8; --color-info-text: #1D4ED8;
@@ -649,7 +649,7 @@ body {
--color-text-secondary: #1a1a1a; --color-text-secondary: #1a1a1a;
--color-border-primary: #000000; --color-border-primary: #000000;
/* Tailwind border-* 工具类消费 rgb 通道,需同步覆写,否则高对比度模式下边框静默失效 */ /* Tailwind border-* 工具类消费 rgb 通道,需同步覆写,否则高对比度模式下边框静默失效 */
--color-border-primary-rgb: 0, 0, 0; --color-border-primary-rgb: 0 0 0;
} }
} }