Spectrum CSS 5.0.0版本发布：资产卡片组件重大更新

项目背景介绍

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

主要更新内容

本次发布的5.0.0版本对资产卡片(Asset Card)组件进行了重大更新，主要实现了Spectrum 1(S1)和Spectrum 2(S2)设计之间的桥梁功能，称为"Spectrum 2 Foundations"。

设计系统兼容性

这一更新允许开发者通过"系统"层将组件级令牌重新映射到适当的令牌数据集，从而在S1、Express和S2设计之间切换组件的外观表现。值得注意的是，这并非完全迁移的S2组件，而是为Spectrum Web Components 1.x版本提供的基础支持。

要使用S2样式，开发者需要搭配使用16.0.0或更高版本的@spectrum-css/tokens。而对于S1或Express设计，则需要使用14.x或15.x版本的@spectrum-css/tokens。

文件使用指南

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)。

废弃内容

本次更新中移除了metadata文件夹及其包含的mods.md和metadata.json文件。组件信息现在可以通过每个组件dist目录中的metadata.json文件获取。同时，index-vars.css文件也被移除，建议开发者使用index.css或index-base.css替代。

技术影响分析

这一更新对现有项目可能产生以下影响：

1. 设计系统切换：开发者现在可以更灵活地在不同设计系统间切换，但需要注意正确加载对应版本的tokens。

2. 文件引用变更：项目中引用的index-vars.css需要更新为index.css或index-base.css。

3. 元数据获取方式：组件信息的获取方式从metadata文件夹转移到了dist/metadata.json。

配套更新

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

• @spectrum-css/tokens升级至16.0.0版本
• @spectrum-css/checkbox升级至10.0.0版本

这些配套更新确保了组件间的兼容性和一致性。

升级建议

对于正在使用旧版本的项目，建议：

1. 评估设计系统需求，确定是否需要S2 Foundations支持
2. 检查项目中是否有对废弃文件的引用
3. 更新相关依赖到兼容版本
4. 测试组件在不同设计系统下的表现

这一更新为开发者提供了更大的灵活性，同时也为未来向S2设计的完全迁移奠定了基础。