75.0.0

@metamask/design-system-react 0.47.0

Added

• Added TextVariant.DisplayXl (#1587)
  • Renders an h1
  • Small screens: 60px / 75px, bold; screens 768px and wider: 60px / 75px, medium

Changed

• BREAKING: FontFamily.Hero now renders Grotzec Cond Bold instead of MM Poly (#1586)
  • The font-hero class name is unchanged and still maps to --font-family-hero
  • Only the Bold cut exists, so regular, medium, and bold weights all render that cut
  • See Migration Guide
• BREAKING: Updated peer dependencies to @metamask/design-tokens@^12.0.0 and @metamask/design-system-tailwind-preset@^0.15.0 (#1586)
  • Required coordination bump with the hero typeface change in @metamask/design-tokens@12.0.0
• Updated small-screen TextVariant.AmountDisplayLg from 40px / 50px to 48px / 56px (#1587)
  • The large-screen size stays 60px / 75px
• Updated the Share icon artwork to a box-and-arrow glyph (#1588)
• Deprecated ButtonHero in favor of Button (#1570)
  • Primary is the default Button variant; pass variant={ButtonVariant.Primary} to set it explicitly
  • ButtonHero remains available until a future major version

@metamask/design-system-react-native 0.52.0

Added

• Added TextVariant.DisplayXl (#1587)
  • Uses the 60px / 75px bold display style

Changed

• BREAKING: FontFamily.Hero now renders Grotzec Cond Bold instead of MM Poly (#1586)
  • Text applies font-hero-bold for FontFamily.Hero, including when fontWeight is regular or medium
  • The twrnc class font-hero-regular is removed; use font-hero-bold, which resolves to the PostScript name GrotzecCond-Bold
  • See Migration Guide
• BREAKING: Updated peer dependencies to @metamask/design-tokens@^12.0.0 and @metamask/design-system-twrnc-preset@^0.13.0 (#1586)
  • Required coordination bump with the hero typeface change in @metamask/design-tokens@12.0.0
• Updated small-screen TextVariant.AmountDisplayLg from 40px / 50px to 48px / 56px (#1587)
  • The large-screen size stays 60px / 75px
• Updated the Share icon artwork to a box-and-arrow glyph (#1588)
• Deprecated ButtonHero in favor of Button (#1570)
  • Primary is the default Button variant; pass variant={ButtonVariant.Primary} to set it explicitly
  • ButtonHero remains available until a future major version

Fixed

• Fixed BottomSheetDialog so a non-interactable sheet keeps the drag handle's space (#1589)
  • When isInteractable is false, the handle stays in the layout and is only hidden visually (opacity-0)
  • Sheet height no longer shifts when the sheet is not swippable

@metamask/design-system-shared 0.41.0

Added

• Added TextVariant.DisplayXl ('display-xl') (#1587)

Changed

• Updated FontFamily.Hero to represent Grotzec Cond Bold (#1586)
  • The value remains 'hero'
• Updated the Share icon artwork to a box-and-arrow glyph (#1588)

@metamask/design-system-tailwind-preset 0.15.0

Added

• Added s-display-xl and l-display-xl font size, line height, and letter spacing utilities (#1587)

Changed

• BREAKING: Updated the peer dependency to @metamask/design-tokens@^12.0.0 (#1586)
  • Required coordination bump with the hero typeface change in @metamask/design-tokens@12.0.0
  • font-hero still maps to --font-family-hero; the font files consumers load change with design-tokens
  • See the design-tokens Migration Guide

@metamask/design-system-twrnc-preset 0.13.0

Added

• Added the display-xl typography variant (#1587)

Changed

• BREAKING: Replaced the hero-regular font family (MMPoly-Regular) with hero-bold (GrotzecCond-Bold) (#1586)
  • The class font-hero-regular is removed; use font-hero-bold
  • See the React Native Migration Guide
• BREAKING: Updated the peer dependency to @metamask/design-tokens@^12.0.0 (#1586)
  • Required coordination bump with the hero typeface change in @metamask/design-tokens@12.0.0
  • See the design-tokens Migration Guide
• Updated the small-screen amount-display-lg size from 40px / 50px to 48px / 56px (#1587)
  • The large-screen amount display large size stays 60px / 75px

@metamask/design-tokens 12.0.0

Added

• Added the display XL typography style for small and large screens (#1587)
  • JS: typography.sDisplayXL and typography.lDisplayXL
  • CSS: --typography-s-display-xl-* and --typography-l-display-xl-*
  • Tailwind v4: text-s-display-xl, text-l-display-xl, and the matching leading-* and tracking-* utilities
  • Small screens use 60px / 75px at weight bold; large screens use 60px / 75px at weight medium (16px root)

Changed

• BREAKING: Replaced MM Poly with Grotzec Cond Bold as the hero typeface (#1586)
  • --font-family-hero is now 'Grotzec Cond', 'Helvetica Neue', Helvetica, Arial, sans-serif
  • fontFamilies.hero and the Figma token global.fontFamilies.hero are now Grotzec Cond
  • Only the Bold cut is licensed; register it at weight 600
  • fontFamilies.accent and --font-family-accent are unchanged
  • See Migration Guide
• Updated the small-screen amount display large style from 40px / 50px to 48px / 56px (#1587)
  • typography.sAmountDisplayLg and --typography-s-amount-display-lg-* now use fontSize9 (48px) and lineHeight8 (56px)
  • The large-screen amount display large style stays 60px / 75px