Spectrum CSS 7.0.0版本发布：构建Spectrum 2设计系统基础

项目简介

Spectrum CSS是Adobe开源的一套CSS框架，它为Adobe产品提供了一套完整的设计系统实现。这个框架包含了各种UI组件和设计模式的样式实现，帮助开发者快速构建符合Adobe设计规范的用户界面。

重大更新：Spectrum 2 Foundations

本次7.0.0版本的主要更新是引入了"Spectrum 2 Foundations"，这是一个连接Spectrum 1(S1)和Spectrum 2(S2)设计的桥梁系统。这个更新具有以下重要特点：

1. 设计系统兼容性：新版本允许开发者通过"系统"层，将组件级令牌重新映射到适当的令牌数据集，从而在S1、Express和S2设计之间切换组件外观。

2. 版本依赖要求：

   • 要显示S2样式，需要搭配使用@spectrum-css/tokens的v16或更高版本
   • 要显示S1或Express样式，则需要搭配使用@spectrum-css/tokens的v14.x或v15.x版本

3. 与Spectrum Web Components的关系：这个版本被用于Spectrum Web Components 1.x中，为Web组件提供样式支持。

文件使用指南

新版本提供了多种CSS文件选择，开发者可以根据项目需求选择适合的文件：

1. 仅需S2 Foundations样式：使用index.css文件，它包含所有基础样式和S2 Foundations的系统映射。

2. 仅需S1或Express组件：使用index-base.css加上相应的主题文件themes/(spectrum|express).css。

3. 需要动态切换设计系统：加载index-base.css和index-theme.css文件，并使用适当的上下文类：

   • .spectrum--legacy对应S1设计
   • .spectrum--express对应Express设计

废弃内容说明

本次更新中移除了以下内容：

1. metadata文件夹：不再包含mods.md和metadata.json文件。组件信息现在包含在每个组件分发的dist/metadata.json文件中。

2. index-vars.css文件：这个文件已被废弃，建议使用index.css或index-base.css替代。

技术实现细节

从技术角度看，这次更新实现了：

1. 设计系统抽象层：通过引入"系统"层，将设计规范的具体实现与组件逻辑分离，提高了代码的可维护性和扩展性。

2. 令牌系统升级：依赖的令牌系统升级到v16，支持更灵活的设计规范切换。

3. 模块化架构：通过不同的CSS文件组合，支持多种使用场景，满足不同项目的需求。

开发者建议

对于开发者来说，升级到7.0.0版本时需要注意：

1. 评估设计需求：明确项目需要支持的设计系统(S1、Express还是S2)，选择合适的文件组合。

2. 版本兼容性检查：确保配套的@spectrum-css/tokens版本符合要求。

3. 迁移计划：如果项目中使用到了废弃的metadata或index-vars.css，需要制定相应的迁移计划。

4. 测试验证：特别是在动态切换设计系统的场景下，需要充分测试各组件在不同设计系统下的表现。

这次更新为Spectrum CSS带来了更强大的设计系统支持能力，为未来的设计演进奠定了坚实的基础，同时也保持了与现有项目的兼容性。