跳到主要内容

Button destructive 文字色改绑 Foregrounds/White (WEB-1326)

版本： 0.9.1 · 类型： 🐛 Bug 修复

WEB-1326 · 来源 INTR-162

问题​

destructive 按钮（variant="destructive"）在暗色模式下文字显示为黑色，叠在红色底色上几乎无法辨认。

改动文件​

  • packages/design/src/components/Button/styles.ts
  • packages/design/src/components/Button/ButtonDesignSpec.md
  • packages/design/src/components/Button/__tests__/Button.test.tsx

改动内容​

  1. BUTTON_VARIANT_CLASS.destructive 的文字色写的是 text-(--Labels-Reverse)，该 token 浅色模式为 #FFFFFF，深色模式翻转为 #000000；而底色 --Labels-Error 在两种模式下都是红色不会变，于是暗色模式下呈现红底黑字。
  2. 已与 Figma 设计系统文件（5ssRkvUdqpsRwwW59ooQCp）核对：Destructive 文字填充在 Default（节点 147:15406 / 147:15409 / 147:15412 / 20935:1635）与 Hover / Clicked（147:15424 / 147:15433）上绑定的都是 Foregrounds/White（VariableID:17:7，明暗模式恒为 #FFFFFF）。据此将 text-(--Labels-Reverse) 改为 text-(--Foregrounds-White)，并加注释说明文字恒为白、不随明暗模式翻转。
  3. primary 保留 text-(--Labels-Reverse)：Figma 里 Primary 文字（节点 147:15379）绑定的正是 Labels/Reverse（VariableID:14:5），其底色本身会随模式反转，文字需要跟着一起反转。
  4. 在 ButtonDesignSpec.md 中补记 Foregrounds/White token，并新增按变体的文字色 token 表（Primary、Destructive Default/Hover/Clicked、Destructive Outline、Loading/Disabled）。
  5. 新增单测，断言 destructive 按钮带 text-(--Foregrounds-White) 且不再带 text-(--Labels-Reverse)。

影响​

  • 暗色模式下 variant="destructive" 按钮的文字由黑变白，红底文字恢复正常可读性。
  • 浅色模式视觉不变（Foregrounds/White 与 Labels/Reverse 在浅色模式下均为 #FFFFFF）。
  • primary 变体不受影响，仍使用 Labels/Reverse。