Spectrum CSS ActionButton 组件重大更新解析

Spectrum CSS 是 Adobe 设计系统的重要组成部分，它为开发者提供了一套符合 Adobe Spectrum 设计语言的 CSS 组件库。ActionButton 作为其中的基础交互组件之一，在最新版本中迎来了重大设计更新，全面适配 Spectrum 2 设计规范。

核心变更概述

最新版本的 ActionButton 组件进行了多项重要改进：

1. 默认尺寸调整：移除了中等尺寸的显式声明（.spectrum-ActionButton--sizeM），现在中等尺寸成为默认选项，简化了开发者的使用方式。

2. 交互状态优化：新增了符合 Spectrum 2 规范的按下状态（down state）变换效果，提升了按钮的交互反馈体验。

3. 无障碍设计增强：虽然移除了视觉边框，但通过将边框颜色设置为透明，仍然保持了在 Windows 高对比度模式下的可访问性支持。

4. 选择器简化：利用现代 CSS 的 :has 选择器，大幅简化了图标+文本按钮和纯图标按钮的选择逻辑，不再需要特定的 DOM 结构顺序。

技术细节解析

设计令牌更新

组件现在全面采用 Spectrum 2 的设计令牌系统：

• 尺寸系统：移除了冗余的中等尺寸类名，使 API 更加简洁
• 颜色系统：更新了背景色和内容颜色，符合最新的视觉规范
• 动画系统：引入了按下状态的动画变换

自定义属性调整

对 CSS 自定义属性进行了大规模重构：

1. 重命名的属性：

   • 行高属性从 --mod-line-height-100 改为 --mod-actionbutton-line-height
   • 字体栈属性从 --mod-sans-font-family-stack 改为 --mod-button-font-family
   • 动画时长属性从 --mod-animation-duration-100 改为 --mod-button-animation-duration

2. 移除的属性：

   • 移除了多个边框颜色相关的自定义属性
   • 移除了静态内容颜色属性
   • 移除了边框宽度属性

3. 新增的属性：

   • 增加了字体粗细控制属性 --mod-actionbutton-font-weight
   • 增加了字体样式控制属性 --mod-actionbutton-font-style

选择器优化

通过使用 :has 选择器，组件现在可以：

• 更智能地检测按钮内容结构
• 减少对 DOM 顺序的依赖
• 移除了复杂的 calc() 计算
• 更直接地应用设计令牌

迁移指南

对于现有项目迁移到新版本，开发者需要注意：

1. 检查并更新所有显式使用的中等尺寸类名
2. 审查自定义样式覆盖，特别是边框相关的样式
3. 验证高对比度模式下的显示效果
4. 更新依赖的自定义属性名称
5. 考虑移除不必要的 DOM 结构顺序约束

总结

这次 ActionButton 组件的更新体现了 Spectrum CSS 向现代化、标准化和无障碍化的持续演进。通过简化 API、优化选择器逻辑和全面采用设计令牌，新版本既提升了开发体验，又保证了视觉一致性。特别是对 Windows 高对比度模式的支持，展现了 Adobe 对无障碍设计的重视。