Skip to main content

DialogTitle font-weight aligned to Figma Modal (WEB-1193)

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

WEB-1193

Problemโ€‹

DialogTitle in ui/dialog (packages/design/src/components/ui/dialog.tsx) used text-[18px] font-normal leading-(--Line-Height-H3) ..., i.e. weight 400 (font-normal). The Figma DS Modal component (Plaud Web 4.0 Design System, node 21231:6298, Size=Default) specifies the title as H3/Emphasized: 18px / 24px / weight 600 (Semibold, token --Font-Weight-Emphasized).

Every dialog going through the structured Dialog title prop rendered its title one weight lighter than the design. The designer flagged this in AGT-551; the business side follows the convention of not overriding component-library styles, so the fix lands in the library.

Changed Filesโ€‹

  • packages/design/src/components/ui/dialog.tsx
  • packages/design/src/components/Dialog/DialogDesignSpec.md

Changesโ€‹

  1. DialogTitle's font-normal changed to font-semibold (600), aligning with the Figma Modal H3/Emphasized style (--Font-Weight-Emphasized = "Semibold"). Font-size (18px) and line-height (--Line-Height-H3, 24px) are unchanged.
  2. DialogDesignSpec.md title typography note updated to include the font weight (600, aligned to Figma Modal H3/Emphasized).
  3. Impact: all dialogs using the structured title prop (web4 /ask rename / delete / edit / new, 7+ sites, plus other modules) now render the title at weight 600 โ€” an intended convergence to the design. DialogFixture.visual.tsx already drew at 600, so this fix brings ui/dialog in line with it.