17370845950

应建立语义化颜色变量体系，如--color-warning、--color-success等，替代--yellow-500等视觉命名；支持深色/高对比度模式响应式切换；统一应用于各组件并保持感知一致；须满足WCAG对比度要求且辅以图标或文字确保无障碍。

警告、成功、提示等状态颜色不能只靠“黄、绿、蓝”直觉分配，关键在于建立语义化颜色变量体系——让color-warning代表“需用户注意但不阻断流程”，color-success代表“操作已完成且结果可信”，而非仅仅对应黄色或绿色。

用语义命名代替视觉命名

避免使用--yellow-500、--green-600这类纯视觉变量名。它们会掩盖设计意图，当品牌色调整时，容易误改“警告”却忘了同步更新所有关联逻辑。

• ✅ 推荐：--color-warning、--color-success、--color-info、--color-error
• ❌ 避免：--color-yellow、--color-green-light、--status-ok

同一语义，多场景适配

语义变量不是固定色值，而是可响应上下文的组合。例如--color-success在深色模式下应自动变亮，在高对比度模式下应增强明度差，而不是写死一个#28a745。

• 用 CSS 自定义属性 + @media (prefers-color-scheme: dark) 切换基础值
• 结合 color-scheme: light dark 和 forced-colors 媒体查询做兜底
• 关键：所有组件（按钮、标签、Toast、表单反馈）统一读取同一语义变量，而非各自定义

区分强度与用途，避免混用

“警告”不等于“强调”，“成功”不等于“启用”。同一语义颜色应在不同组件中保持感知一致，但可通过透明度、边框/背景/文字的组合来表达不同层级。

• Toast 提示中的 --color-success：背景色 + 图标色（100%饱和度）
• 按钮上的 --color-success：仅用于文字或边框，背景用中性色+悬停强化
• 表单验证中的 --color-warning：图标用全色，文字用 80% 透明度，避免视觉过载

配合无障碍与可访问性校验

语义颜色必须满足 WCAG 对比度要求（文本 ≥ 4.5:1，大号字 ≥ 3:1），且不能仅依赖颜色传达信息。

• 成功状态旁加 ✅ 图标或 “已完成” 文字标签
• 警告状态使用 ⚠️ + “请检查” 类文案，不只靠黄色背景
• 用 prefers-reduced-motion 控制颜色过渡动画，避免闪烁干扰