Skip to main content

Calendar dark mode selected state text invisible fix (WEB-1041)

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

WEB-1041

Problemโ€‹

In dark mode, the selected date number in the Calendar / DatePicker panel was invisible. The selected-state background used --Labels-Primary (white in dark mode) while the text color used --Foregrounds-White (always white), causing white-on-white rendering.

Changed Filesโ€‹

  • packages/design/src/components/Calendar/styles.ts

Changesโ€‹

CALENDAR_SELECTED_CLASS text color changed from text-(--Foregrounds-White) to text-(--Labels-Reverse):

  • --Labels-Reverse is white in light mode and black in dark mode, always contrasting against --Labels-Primary (the background).
  • --Foregrounds-White is always white, blending into the white background in dark mode.

The hover state is fixed in the same way (hover:text-(--Foregrounds-White) โ†’ hover:text-(--Labels-Reverse)) for consistent behavior.