Skip to main content

Button destructive label binds Foregrounds/White (WEB-1326)

Version: 0.9.1 ยท Type: ๐Ÿ› Bug Fix

WEB-1326 ยท reported from INTR-162

Problemโ€‹

The destructive button (variant="destructive") rendered black text on its red fill in dark mode, making the label nearly unreadable.

Changed Filesโ€‹

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

Changesโ€‹

  1. BUTTON_VARIANT_CLASS.destructive declared the label as text-(--Labels-Reverse), which resolves to #FFFFFF in light mode but inverts to #000000 in dark mode, while the --Labels-Error fill underneath stays red in both modes โ€” hence black-on-red in dark mode.
  2. Verified against the Figma design system file (5ssRkvUdqpsRwwW59ooQCp): the Destructive label fill binds Foregrounds/White (VariableID:17:7, #FFFFFF in both modes) on Default (147:15406 / 147:15409 / 147:15412 / 20935:1635) and on Hover / Clicked (147:15424 / 147:15433). Changed text-(--Labels-Reverse) to text-(--Foregrounds-White) accordingly, with a comment noting the label stays white regardless of mode.
  3. primary keeps text-(--Labels-Reverse): Figma binds the Primary label to Labels/Reverse (VariableID:14:5, node 147:15379), and its fill inverts with the mode, so the label has to invert with it.
  4. Recorded Foregrounds/White and a per-variant text color token table (Primary, Destructive Default/Hover/Clicked, Destructive Outline, Loading/Disabled) in ButtonDesignSpec.md.
  5. Added a unit test asserting the destructive button carries text-(--Foregrounds-White) and no longer text-(--Labels-Reverse).

Impactโ€‹

  • In dark mode, variant="destructive" buttons now render white text on the red fill instead of black.
  • Light mode is visually unchanged (Foregrounds/White and Labels/Reverse are both #FFFFFF there).
  • primary is unaffected and still uses Labels/Reverse.