Component update for design system 2.0: Callout

Update includes new emphasis levels, visual refinements, component tokens, and deprecation of the size property and event type.
Design in Figma

Summary of Required Changes

Props

• Add new prop: emphasis: "high" | "medium" | "low"
  • Emphasis level controls visual styling and layout spacing
• Deprecate (but keep in code): size: "medium" | "large"
  • Undocumented going forward
• Keep existing type prop:
  • success, important, information, emergency
• Deprecate (but keep in code): type="event"
  • Remove from documentation but allow continued use
• Keep all other existing props:
  • heading, maxWidth, ariaLive, margin props, testId

Visual & Layout Changes

• Visual style is determined by type and emphasis
• If heading is omitted, layout adjusts automatically
  • This mostly affects the low emphasis variant, where spacing and alignment are adjusted
  • High and medium emphasis variants are largely unaffected by heading presence
• No new variants are introduced — heading presence or absence simply affects layout within the existing emphasis levels
• Design examples will demonstrate how to use emphasis levels with or without headings

Token Updates

• Use component tokens for all visual styles:
  • Background, icon, heading text, body text
  • Padding, margin, border-radius
• Tokens vary by:
  • type and emphasis
  • Presence/absence of heading if needed

Accessibility

• No changes to current behavior
• ariaLive remains optional
• No additional ARIA attributes or roles added

Component Structure

• No major markup changes expected
• Layout adjustments for heading presence may require minor structural refinements (to be confirmed in development)
• All styling handled via CSS classes and tokens where possible