Spectrum CSS 8.0.0版本发布：构建Spectrum 2设计基础

Spectrum CSS是Adobe开源的一套CSS框架，它为构建符合Adobe Spectrum设计系统的用户界面提供了基础样式和组件。Spectrum设计系统广泛应用于Adobe系列产品中，确保用户体验的一致性和美观性。

重大更新：Spectrum 2 Foundations

8.0.0版本是一个重要的里程碑，它创建了一个连接Spectrum 1(S1)和Spectrum 2(S2)设计的桥梁，被称为"Spectrum 2 Foundations"。这一更新并非完全迁移到S2组件，而是提供了一种系统层级的解决方案，使开发者能够在S1、Express和S2设计之间灵活切换组件外观。

设计系统兼容性

这一版本的核心创新在于通过"系统"层将组件级令牌(token)重新映射到适当的令牌数据集。这意味着：

1. 要显示S2风格的组件，需要使用@spectrum-css/tokens的v16或更高版本
2. 要显示S1或Express风格的组件，需要使用@spectrum-css/tokens的v14.x或v15.x版本

文件使用指南

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

• index.css：包含所有基础样式加上S2 Foundations的系统映射
• index-base.css：仅包含基础样式，可与主题文件配合使用
• 主题文件：themes/(spectrum|express).css用于特定设计风格

对于需要灵活切换设计风格的场景，可以加载index-base.css配合index-theme.css文件，并使用相应的上下文类：

• .spectrum--legacy：Spectrum 1风格
• .spectrum--express：Express风格

废弃内容

8.0.0版本中移除了以下内容：

1. metadata文件夹：包含mods.md和metadata.json文件
2. index-vars.css文件：已废弃不再维护

开发者现在可以通过dist/metadata.json文件获取组件信息，包括选择器、修改器和传递属性等。

技术实现细节

这一版本的技术实现涉及多个方面的更新：

1. 令牌系统重构：建立了新的令牌映射机制，支持多设计系统切换
2. 样式隔离：确保不同设计系统间的样式不会相互干扰
3. 向后兼容：保留对旧版本的支持，确保平滑过渡

开发者建议

对于正在使用Spectrum Web Components 1.x的开发者，这一版本提供了良好的兼容性。如果需要完全实现S2设计，建议探索next标签的发布版本，而非使用这个基础版本。

这一更新为前端开发者提供了更大的灵活性，使他们能够根据产品需求轻松切换设计风格，同时保持代码的一致性和可维护性。