Spectrum CSS 7.0.0 版本发布：构建跨设计系统的组件基础

项目背景

Spectrum CSS 是 Adobe 开源的一套 CSS 框架，它为 Adobe 系列产品提供了一套统一的设计语言和 UI 组件。这个框架遵循 Adobe 的 Spectrum 设计系统，确保跨平台和产品的一致用户体验。

重大更新：Spectrum 2 Foundations

本次 7.0.0 版本的主要更新引入了一个重要的架构变革——"Spectrum 2 Foundations"。这个更新在 Spectrum 1 (S1) 和 Spectrum 2 (S2) 设计系统之间架起了一座桥梁，为开发者提供了更灵活的组件样式切换能力。

核心特性

1. 多设计系统支持：开发者现在可以通过简单的类名切换（如 .spectrum--legacy 和 .spectrum--express）来改变组件的外观，使其适配 S1、Express 或 S2 设计系统。

2. 令牌系统重构：新版本依赖于 @spectrum-css/tokens v16 或更高版本来实现 S2 设计。对于需要保持 S1 或 Express 设计的项目，可以继续使用 v14.x 或 v15.x 版本的令牌系统。

3. 文件结构调整：

   • 移除了 metadata 文件夹及其内容
   • 废弃了 index-vars.css 文件
   • 引入了新的文件组织方式：
     • index.css：包含所有基础样式和 S2 Foundations 的系统映射
     • index-base.css：仅包含基础样式
     • themes/ 目录下的主题文件

技术实现细节

这个版本通过引入"系统层"的概念，将组件级令牌重新映射到适当的数据集。这种架构允许：

• 在不改变组件结构的情况下切换设计系统
• 保持向后兼容性
• 为未来设计系统的演进提供灵活的基础

迁移指南

对于现有项目，升级到 7.0.0 版本需要注意以下几点：

1. 令牌系统依赖：确保 @spectrum-css/tokens 版本与所需的设计系统匹配：

   • S2 Foundations：v16+
   • S1/Express：v14.x 或 v15.x

2. 文件引用调整：

   • 使用 index.css 获取完整的 S2 Foundations 样式
   • 对于仅需要 S1 或 Express 样式的项目，组合使用 index-base.css 和相应的主题文件

3. 上下文类应用：要实现动态设计系统切换，需要：

   • 加载 index-base.css
   • 加载 index-theme.css
   • 在适当的位置应用上下文类（如 .spectrum--legacy）

开发者建议

1. 评估需求：如果项目需要完全迁移到 S2 设计，建议探索 next 标签的版本而非此基础版本。

2. 渐进式迁移：对于大型项目，可以考虑逐步引入新版本，先在小范围组件中测试兼容性。

3. 样式覆盖：注意新版本可能会影响现有的自定义样式，建议在升级后进行全面的视觉回归测试。

这个版本的发布标志着 Spectrum CSS 向更灵活、更可扩展的方向迈出了重要一步，为开发者提供了在不同设计系统间平滑过渡的能力，同时为未来的设计演进奠定了坚实的基础。