Skip to main content

Toast variant background transparency fix (WEB-1208)

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

WEB-1208

Problemโ€‹

When multiple toasts were triggered in quick succession, their content overlapped with a semi-transparent ghost of the previous toast โ€” titles, descriptions and button labels stacked on top of each other and became unreadable.

The root cause: the info / success / warning / error variant backgrounds referenced deprecated token names --Template-Community-Icon-*. These were renamed to --Accent-* in an earlier design:sync, so the old names no longer exist in the generated CSS (empty value). A color-mix() containing any undefined, fallback-less variable fails entirely and the background falls back to transparent โ€” making every toast transparent and letting stacked content bleed through.

Changed Filesโ€‹

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

Changesโ€‹

  • info: --Template-Community-Icon-Sky โ†’ --Accent-Sky
  • success: --Template-Community-Icon-Moss โ†’ --Accent-Lime
  • warning: --Template-Community-Icon-Mustard โ†’ --Accent-Mustard
  • error: --Template-Community-Icon-Coral โ†’ --Accent-Coral

info / warning / error match the values bound in the Figma component exactly (#008BD1 / #987600 / #C74C41); the legacy success Moss is deprecated in Figma and no longer exported, so it now uses Lime from the new Accent palette.

Impactโ€‹

  • Visual-only fix; no API changes. Toast variant backgrounds are opaque again.