Elastic EUI 项目引入全新严重性颜色体系的技术解析

背景与需求

Elastic EUI 设计系统近期对其颜色体系进行了重要升级，特别是针对系统状态和严重性指示的颜色方案。这一改进源于对现有颜色体系在表达不同严重程度时的局限性，特别是在可视化警报、系统状态和风险等级等场景下。

颜色体系扩展

基础颜色扩展

项目首先在基础颜色(_primitive_colors.ts)中新增了两组颜色谱系：

1. 橙色系(orange10-orange140)：包含14个色阶，从浅色#ffedd6到深色#361d18，专为风险(risk)相关场景设计
2. 天蓝色系(sky10-sky140)：同样包含14个色阶，从浅色#e5f6fa到深色#002938，用于常规(regular)状态指示

语义化映射

在语义颜色(_semantic_colors.ts)层，项目将新增的基础颜色映射为：

• risk10-risk140：对应橙色系
• regular10-regular140：对应天蓝色系

这种映射使颜色具有明确的语义含义，而不仅仅是视觉表现。

主题适配实现

浅色主题

在浅色主题(_color_light.ts)中，项目为文本、背景和边框定义了：

• 文本颜色：使用regular100(天蓝)和risk100(橙色)
• 背景色：提供基础(base)、浅色(light)和填充(filled)三种变体
• 边框色：定义基础(base)和强调(strong)两种状态

深色主题

深色主题(_color_dark.ts)做了相应调整：

• 文本颜色使用较浅的regular60和risk50
• 背景色采用更深的色阶(regular140/risk140)
• 边框色也相应调整为适合深色背景的对比度

严重性可视化体系

项目重构了严重性可视化颜色(_colors_vis.ts)，用语义化变量取代了原有的数字编号：

• euiColorSeverityUnknown：中性色调
• euiColorSeveritySuccess：成功状态
• euiColorSeverityRegular：常规状态(天蓝)
• euiColorSeverityWarning：警告状态
• euiColorSeverityRisk：风险状态(橙)
• euiColorSeverityDanger：危险状态

迁移策略与兼容性

对于已使用旧版严重性颜色的组件，项目制定了明确的迁移路径：

1. euiColorSeverity5 → euiColorSeverityRegular
2. euiColorSeverity7 → euiColorSeverityWarning
3. euiColorSeverity10 → euiColorSeverityRisk
4. euiColorSeverity14 → euiColorSeverityDanger

这种映射确保了视觉一致性，同时使代码更具语义化。

设计系统思考

这一改进体现了现代设计系统的几个关键原则：

1. 语义化：颜色名称反映用途而非外观
2. 系统性：提供完整的色阶而非孤立颜色
3. 主题适配：同时考虑浅色和深色模式
4. 可扩展性：为未来可能的严重性级别预留空间

总结

Elastic EUI 的这次颜色体系升级，特别是严重性指示颜色的重构，不仅解决了当前的可视化需求，还为未来的设计扩展奠定了坚实基础。通过系统化的颜色定义和明确的迁移策略，既保证了视觉一致性，又提高了代码的可维护性。这一改进将显著提升产品在状态指示、风险预警等方面的用户体验。