Skip to main content

Dialog dark mode background token fix (WEB-1244)

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

WEB-1244

Problemโ€‹

In dark mode the Modal (Dialog) background rendered near-black, diverging from the design system. The Figma DS fills the Modal with Grays/White (Light #FFFFFF / Dark #292929), but the web4 Modal showed near-black (#0A0A0A) in dark mode.

The root cause: DialogContent used the wrong background token โ€” --Backgrounds-Primary instead of --Grays-White.

TokenLightDark
--Backgrounds-Primary (was used)#FFFFFF#0A0A0A (near-black)
--Grays-White (spec)#FFFFFF#292929

Both tokens are white in light mode, so the bug was only visible in dark mode.

Changed Filesโ€‹

  • packages/design/src/components/ui/dialog.tsx
  • packages/design/src/components/Dialog/__tests__/Dialog.test.tsx

Changesโ€‹

  1. DialogContent background changed from bg-(--Backgrounds-Primary) to bg-(--Grays-White), restoring the dark-mode fill from #0A0A0A to the spec #292929 (light mode unchanged at #FFFFFF).
  2. Added a unit assertion that the dialog panel carries the bg-(--Grays-White) token, guarding against regressions.

Impactโ€‹

  • Visual-only fix; no API changes. Dark-mode Modal background is now the spec dark gray #292929.