Spectrum CSS SwatchGroup组件5.0.0版本发布解析

项目背景

Spectrum CSS是Adobe开源的一套CSS框架，它为Adobe Spectrum设计系统提供了基础样式实现。这套框架包含了丰富的UI组件，帮助开发者快速构建符合Spectrum设计规范的Web应用界面。SwatchGroup是其中一个用于展示颜色样本集合的组件，常用于颜色选择器等场景。

主要变更内容

5.0.0版本是一个重大更新，引入了Spectrum 2 Foundations架构，这是一个连接Spectrum 1(S1)和Spectrum 2(S2)设计的桥梁系统。这个版本的核心目标是实现组件在不同设计系统(S1、Express和S2)之间的外观切换能力。

设计系统兼容性

新版本通过"系统层"实现了设计令牌的重映射，开发者可以通过加载不同版本的@spectrum-css/tokens来控制组件呈现哪种设计风格：

• 要呈现S2风格，需要使用@spectrum-css/tokens v16或更高版本
• 要呈现S1或Express风格，需要使用@spectrum-css/tokens v14.x或v15.x

值得注意的是，这个版本并不是完整的S2组件迁移，而是提供了基础支持。完整的S2设计实现可以在next标签版本中找到。

文件结构调整

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

1. 移除了metadata文件夹及其内容(mods.md和metadata.json)，这些信息现在统一放在dist/metadata.json中
2. 移除了已废弃的index-vars.css文件，推荐使用index.css或index-base.css替代

文件使用指南

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

• 如果只需要S2 Foundations样式，使用index.css
• 如果需要发布S1或Express组件，使用index-base.css加上对应的themes/(spectrum|express).css
• 如果需要实现设计系统切换功能，加载index-base.css和index-theme.css，并通过.spectrum--legacy(S1)或.spectrum--express(Express)类名控制

技术实现细节

这个版本的核心变化在于引入了设计系统切换能力。通过CSS变量和类名控制，同一套组件可以在不同设计系统间无缝切换。这种架构设计使得从旧系统迁移到新系统的过程更加平滑，同时也保持了向后兼容性。

依赖更新

本次发布同步更新了相关依赖：

• @spectrum-css/tokens升级到16.0.0版本
• @spectrum-css/swatch升级到8.0.0版本

这些依赖更新为SwatchGroup组件提供了必要的设计令牌支持和基础样式更新。

总结

Spectrum CSS SwatchGroup 5.0.0版本的发布标志着Spectrum设计系统向更灵活、更现代化的架构演进。通过引入Spectrum 2 Foundations，开发者现在可以更轻松地在不同设计系统间切换，同时为未来的完整迁移做好准备。这个版本既照顾了现有项目的兼容性需求，又为采用新设计系统提供了途径，体现了Adobe对设计系统平滑过渡的深思熟虑。