Spectrum CSS资产列表组件8.0.0版本发布解析

项目背景介绍

Spectrum CSS是Adobe公司开源的一套设计系统CSS框架，它为Web应用提供了一套完整的UI组件库和设计规范。这套框架遵循Adobe Spectrum设计语言，能够帮助开发者快速构建符合Adobe设计标准的用户界面。

重大更新内容

8.0.0版本是一个重要的里程碑式更新，它构建了Spectrum 1(S1)和Spectrum 2(S2)设计之间的桥梁，被称为"Spectrum 2基础架构"。这次更新带来了架构层面的重大改变：

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

2. 版本依赖要求：

   • 要显示S2风格，必须使用16或更高版本的@spectrum-css/tokens
   • 要显示S1或Express风格，需要使用14.x或15.x版本的@spectrum-css/tokens

3. 文件结构调整：

   • 移除了包含mods.md和metadata.json的metadata文件夹
   • 移除了已弃用的index-vars.css文件

技术实现细节

文件使用指南

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

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

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

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

   • .spectrum--legacy对应S1风格
   • .spectrum--express对应Express风格

依赖项更新

本次发布同步更新了多个依赖组件：

• @spectrum-css/tokens升级至16.0.0
• @spectrum-css/checkbox升级至10.0.0
• @spectrum-css/icon升级至9.0.0

开发者注意事项

1. 迁移建议：如果开发者需要完全实现S2设计，建议探索next标签版本而非使用此基础架构版本。

2. 元数据获取：组件信息(包括选择器、修饰符和透传属性)现在可以通过每个组件附带的dist/metadata.json文件获取。

3. 兼容性说明：此版本主要用于Spectrum Web Components 1.x版本。

总结

Spectrum CSS资产列表组件8.0.0版本的发布标志着Adobe设计系统向现代化迈出了重要一步。通过引入设计系统间的桥梁架构，开发者现在可以更灵活地在不同设计风格间切换，同时保持代码的一致性和可维护性。这一更新为未来的设计系统演进奠定了坚实基础，同时也为现有项目提供了平稳过渡的路径。