Spectrum CSS工具提示组件v7.0.0发布解析

项目背景

Spectrum CSS是Adobe开源的一套设计系统CSS实现，它为Web应用提供了符合Adobe Spectrum设计语言的UI组件库。这套系统广泛应用于Adobe系列产品中，确保用户体验的一致性。

版本7.0.0主要变更

设计系统桥梁构建

本次7.0.0版本是一个重大更新，创建了Spectrum 1(S1)和Spectrum 2(S2)设计之间的桥梁，称为"Spectrum 2 Foundations"。这个版本并不是一个完整的S2组件迁移，而是提供了一种机制，让开发者可以通过"系统"层将组件外观在S1、Express和S2之间切换。

版本兼容性说明

要使用S2外观，必须搭配使用v16或更高版本的@spectrum-css/tokens。如果需要S1或Express外观，则需要搭配使用v14.x或v15.x版本的token包。

文件结构变化

1. 元数据文件移除：移除了包含mods.md和metadata.json的metadata文件夹，相关组件信息现在包含在dist/metadata.json中
2. 废弃文件移除：移除了已废弃的index-vars.css文件，建议使用index.css或index-base.css

文件使用指南

• 仅需S2 Foundations样式：使用index.css，包含所有基础样式和S2 Foundations的系统映射
• 仅需S1或Express组件：使用index-base.css加上相应的主题文件themes/(spectrum|express).css
• 需要动态切换设计系统：加载index-base.css和index-theme.css，并使用相应的上下文类(如.spectrum--legacy对应S1，.spectrum--express对应Express)

技术实现细节

这个版本通过重构CSS变量和token系统，实现了设计系统之间的灵活切换。开发者可以通过简单的类名切换，就能让组件在不同设计语言间无缝转换，这在多产品线开发中特别有价值。

升级建议

对于正在使用Spectrum Web Components 1.x的项目，这个版本是推荐升级的。但如果需要完全实现S2设计，建议考虑使用next标签的版本。

升级时需要注意token包的版本兼容性，确保CSS变量能正确映射到目标设计系统的视觉样式。