Spectrum CSS Tokens 16.1.0-next.2 版本更新解析

项目简介

Spectrum CSS 是 Adobe 开源的一套设计系统实现，提供了一套完整的 CSS 框架，用于构建符合 Adobe Spectrum 设计语言的用户界面。其中的 Tokens 包是该系统的设计令牌(Design Tokens)实现，包含了颜色、间距、字体等各种设计系统的基础变量。

版本更新亮点

最新发布的 16.1.0-next.2 版本主要带来了 Card 组件相关的设计令牌更新，这些变更源自底层设计系统 @adobe/spectrum-tokens 从 13.0.0-beta.58 升级到 13.3.0 版本。

新增设计令牌详解

Card 组件尺寸相关令牌

本次更新引入了大量与 Card 组件尺寸相关的设计令牌，覆盖了从 extra-small 到 extra-large 的各种尺寸规格：

• 默认宽度：--spectrum-card-default-width-*
• 最小宽度：--spectrum-card-minimum-width-*
• 最大宽度：--spectrum-card-maximum-width-*
• 最小高度：--spectrum-card-minimum-height-*

这些令牌为开发者提供了更精细的控制能力，可以针对不同尺寸的设备或使用场景灵活调整 Card 组件的显示效果。

Card 边距与间距令牌

新增了三种不同密度（默认、紧凑、宽松）下的内容边距控制：

• --spectrum-card-edge-to-content-default-*
• --spectrum-card-edge-to-content-compact-*
• --spectrum-card-edge-to-content-spacious-*

同时增加了组件内部元素间距的控制变量：

• --spectrum-card-header-to-description
• --spectrum-card-description-to-footer

特殊 Card 类型令牌

针对集合卡片(Collection Card)和用户卡片(User Card)新增了专门的最小高度控制变量：

• 集合卡片：--spectrum-collection-card-minimum-height-*
• 英雄式集合卡片：--spectrum-collection-card-minimum-height-hero-*
• 用户卡片：--spectrum-user-card-minimum-height-*
• 标题在下方布局的用户卡片：--spectrum-user-card-minimum-height-title-below-*

视觉样式相关令牌

新增了加载状态和背景样式控制：

• --spectrum-card-background-loading-color：卡片加载状态背景色
• --spectrum-card-background-well-color：凹陷样式卡片背景色
• 选择状态背景尺寸：--spectrum-card-selection-background-size-*

重要变更说明

--spectrum-card-selection-background-color 选择背景色变量进行了重大更新：

• 原值统一使用 var(--spectrum-gray-100)
• 新值根据主题变化：
  • 浅色主题：var(--spectrum-transparent-white-600)
  • 深色主题：var(--spectrum-transparent-black-600)

这一变更使得选择状态在不同主题下都能获得更好的视觉对比度和一致性。

技术影响分析

这些新增和更新的设计令牌为开发者带来了以下优势：

1. 更精细的布局控制：通过新增的尺寸和间距变量，开发者可以更精确地控制卡片在不同场景下的显示效果。

2. 更好的主题适应性：选择背景色的更新确保了组件在不同主题下的视觉一致性。

3. 更丰富的卡片变体支持：新增的集合卡片和用户卡片专用变量为这些特殊卡片类型提供了官方支持。

4. 响应式设计增强：多种尺寸规格的变量使得构建响应式布局更加容易。

升级建议

对于正在使用 Spectrum CSS 的开发者，建议：

1. 检查项目中是否有自定义的卡片样式，考虑迁移到新的设计令牌。

2. 特别注意选择背景色的变更，确保在主题切换时视觉效果符合预期。

3. 利用新的尺寸变量优化响应式布局，特别是针对不同设备尺寸的场景。

4. 对于集合卡片和用户卡片等特殊类型，考虑使用新增的专用变量以获得更好的设计一致性。

这次更新显著增强了 Card 组件的定制能力和视觉一致性，是构建现代化、响应式用户界面的重要一步。