Spectrum CSS 7.0.0 版本发布：Sidenav 组件与设计系统桥梁构建

Adobe 开源的设计系统 Spectrum CSS 近日发布了 7.0.0 版本的重大更新，这次更新为 Sidenav 侧边导航组件带来了架构级的改进。作为前端开发领域广受欢迎的设计系统实现，Spectrum CSS 为开发者提供了一套完整的 UI 组件库和设计规范，帮助团队快速构建符合 Adobe 设计语言的 Web 应用界面。

设计系统桥梁：Spectrum 2 Foundations

本次更新的核心在于引入了"Spectrum 2 Foundations"架构，这是一个连接 Spectrum 1(S1)和 Spectrum 2(S2)设计的桥梁系统。这种创新性的架构设计允许开发者通过简单的系统层切换，实现组件在 S1、Express 和 S2 三种设计风格之间的灵活转换。

技术实现上，系统通过重新映射组件级 tokens 到相应的 token 数据集来实现这一功能。开发者需要注意：

1. 要呈现 S2 设计风格，必须使用 v16 或更高版本的 @spectrum-css/tokens
2. 要呈现 S1 或 Express 风格，需要使用 v14.x 或 v15.x 版本的 tokens

这种架构特别适合正在从 S1 向 S2 迁移的项目，或者需要同时支持多种设计风格的应用场景。值得注意的是，这并非完整的 S2 组件迁移，而是为 Spectrum Web Components 1.x 版本提供的基础支持。

文件结构与使用指南

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

• index.css：包含所有基础样式和 S2 Foundations 的系统映射
• index-base.css：仅包含基础样式，可与主题文件配合使用
• 主题文件：themes/(spectrum|express).css 提供特定设计风格的样式

对于需要动态切换设计风格的项目，推荐组合使用 index-base.css 和 index-theme.css，并通过上下文类名控制样式呈现：

• .spectrum--legacy：S1 设计风格
• .spectrum--express：Express 设计风格

废弃与变更说明

本次更新包含了一些重要的废弃和变更：

1. 移除了 metadata 文件夹及其内容，组件信息现在统一存放在 dist/metadata.json 中
2. 正式移除了已弃用的 index-vars.css 文件，开发者应迁移至 index.css 或 index-base.css

技术影响与升级建议

这一架构变更对现有项目可能产生的影响包括：

1. 设计风格一致性：通过系统层统一管理设计风格切换，确保应用内组件风格一致
2. 版本兼容性：需要注意 tokens 版本与设计风格的对应关系
3. 构建优化：新的文件结构提供了更灵活的按需加载方案

对于正在使用 Spectrum CSS 的团队，建议：

1. 评估项目对多设计风格支持的需求
2. 规划 tokens 版本的升级路径
3. 更新构建配置以适配新的文件结构
4. 逐步替换已废弃的 API 和文件引用

这次更新体现了 Spectrum CSS 向更灵活、更模块化方向发展的趋势，为前端开发者提供了更强大的设计系统集成能力，同时也为未来的设计演进预留了充足的空间。