Spectrum CSS IllustratedMessage组件9.0.0版本发布解析

Spectrum CSS是Adobe开源的一套设计系统CSS框架，它为开发者提供了符合Adobe Spectrum设计语言的UI组件。IllustratedMessage作为其中的重要组件之一，主要用于展示带有插图的提示信息，常见于空状态、错误提示等场景。

版本9.0.0的主要变化

本次发布的9.0.0版本是一个重大更新，标志着Spectrum CSS开始构建Spectrum 1(S1)和Spectrum 2(S2)设计之间的桥梁，称为"Spectrum 2 Foundations"。这一更新并非完全迁移到S2组件，而是通过"系统"层将必要的组件级令牌重新映射到适当的令牌数据集，使开发者能够在S1、Express和S2设计之间切换组件外观。

设计系统兼容性

要使用S2设计风格，需要搭配16.0.0或更高版本的@spectrum-css/tokens。如果希望保持S1或Express设计风格，则需要使用14.x或15.x版本的@spectrum-css/tokens。这一设计为开发者提供了更大的灵活性，可以根据项目需求选择不同的设计风格。

文件结构优化

新版本对文件结构进行了优化：

• 移除了包含mods.md和metadata.json的metadata文件夹，相关组件信息现在可以在每个组件附带的dist/metadata.json中找到
• 移除了已弃用的index-vars.css文件，建议使用index.css或index-base.css替代

文件使用建议

开发者可以根据不同场景选择不同的CSS文件：

• 如果只需要S2 Foundations样式，可以使用index.css文件，它包含所有基础样式和S2 Foundations的系统映射
• 如果只需要S1或Express组件样式，可以使用index-base.css配合相应的themes/(spectrum|express).css文件
• 如果需要构建可在S2 Foundations、S1和Express上下文之间轻松切换的组件，可以加载index-base.css和index-theme.css文件，并使用适当的上下文类(.spectrum--legacy用于S1，.spectrum--express用于Express)

技术实现细节

新版本通过系统层的抽象，实现了设计风格的灵活切换。这种架构设计使得组件可以在不改变核心逻辑的情况下，通过简单的类名切换来改变视觉表现。对于IllustratedMessage组件来说，这意味着开发者可以更容易地在不同设计风格之间切换，而无需重写大量CSS代码。

升级建议

对于正在使用旧版本Spectrum CSS的开发者，升级到9.0.0版本需要注意以下几点：

1. 检查项目中是否有直接引用metadata文件夹或index-vars.css文件的情况，需要进行相应调整
2. 根据项目需求选择合适的@spectrum-css/tokens版本
3. 评估是否需要使用新的设计风格切换功能

这一版本的发布为Spectrum CSS的演进奠定了重要基础，为未来的设计系统升级提供了平滑过渡的可能性。