19.0.0

@metamask/design-system-react 0.7.0

Added

• Added AfterHours, Popup, and Sidepanel icons (#898, #879)

@metamask/design-system-react-native 0.6.0

Added

• Added AfterHours icon (#879)

18.0.0

@metamask/design-system-react 0.6.1

Changed

• Updated @metamask/utils peer dependency from 11.8.1 to 11.9.0 (#867)

Fixed

• Updated ButtonIcon component icon sizes and border radius to match Figma design specifications (#873)
  • ButtonIcon.Sm now uses 20px icon (previously 16px)
  • ButtonIcon.Md now uses 24px icon (previously 20px)
  • ButtonIcon.Lg now uses 32px icon (previously 24px)
  • Non-floating border radius now uses 8px for improved visual consistency

@metamask/design-system-react-native 0.5.1

Changed

• Updated @metamask/utils peer dependency from 11.8.1 to 11.9.0 (#867)

Fixed

• Updated ButtonIcon component icon sizes and border radius to match Figma design specifications (#873)
  • ButtonIcon.Sm now uses 20px icon (previously 16px)
  • ButtonIcon.Md now uses 24px icon (previously 20px)
  • ButtonIcon.Lg now uses 32px icon (previously 24px)
  • Non-floating border radius corrected to 4px (previously 2px)

@metamask/design-system-shared 0.1.2

Changed

• Updated @metamask/utils dependency from 11.8.1 to 11.9.0 (#867)

17.0.0

@metamask/design-system-react 0.6.0

Added

• Add ButtonHero component for prominent call-to-action buttons in hero sections and landing pages (#843)
  • Extends base Button component with all standard ButtonBase props (variant, size, disabled, etc.) plus additional styling optimized for large, attention-grabbing CTAs
  • Import and use like standard Button: import { ButtonHero } from '@metamask/design-system-react'
  • Provides consistent, accessible hero button pattern across MetaMask applications
  • Fully typed with ButtonHeroProps interface

Changed

• Updated @metamask/utils peer dependency from 11.8.0 to 11.8.1 (#838)

@metamask/design-system-react-native 0.5.0

Changed

• BREAKING: Update font file names from space-separated to hyphenated PostScript format for iOS Metro bundler compatibility (#862)
  • Font file names changed: "Geist Regular.otf" → "Geist-Regular.otf", "Geist Medium.otf" → "Geist-Medium.otf", "Geist Bold.otf" → "Geist-Bold.otf"
  • Fixes Metro bundler asset resolution issues on iOS that prevented fonts from loading correctly
  • If using @metamask/design-system-react-native components as intended, fonts automatically load correctly with no migration needed
  • If manually referencing font file paths in custom code, update all references to use hyphenated file names instead of space-separated names
  • Android is unaffected by this change
• Updated @metamask/utils peer dependency from 11.8.0 to 11.8.1 (#838)

Fixed

• Export missing TextButtonSize enum from package entry point for TypeScript type safety (#848)
  • The TextButtonSize enum is now properly exported and accessible for imports
  • Developers can now use typed enums instead of string literals: import { TextButton, TextButtonSize } from '@metamask/design-system-react-native' and <TextButton size={TextButtonSize.Medium} />
  • This is a non-breaking, additive change that improves type safety

@metamask/design-system-twrnc-preset 0.3.0

Changed

• BREAKING: Update font family names from space-separated to hyphenated PostScript format for iOS Metro bundler and expo-font compatibility (#862)
  • Font family names changed: "Geist Regular" → "Geist-Regular", "Geist Medium" → "Geist-Medium", "Geist Bold" → "Geist-Bold"
  • Fixes critical font loading issues on iOS when using Metro bundler with expo-font
  • If using TWRNC preset via @metamask/design-system-react-native components, fonts automatically use correct names with no migration needed
  • If directly referencing font families in custom TWRNC styles, update to hyphenated names (e.g., twfont-['Geist-Regular'] instead of twfont-['Geist_Regular'])
  • Android is unaffected by this change
  • Aligns with MetaMask Mobile's font configuration and expo-font requirements

16.0.0

@metamask/design-system-react 0.5.0

Added

• Added asChild functionality to Box component (#834)

15.0.0

@metamask/design-system-react 0.4.1

Fixed

• Fixed Avatar components shrinking in flex layouts (#825)
• Removed unnecessary peer dependencies (#828)
• Bump @metamask/utils from 11.7.0 to 11.8.0 (#827)

@metamask/design-system-react-native 0.4.1

Fixed

• Removed unnecessary peer dependencies (#828)
• Bump @metamask/utils from 11.7.0 to 11.8.0 (#827)

@metamask/design-system-shared 0.1.1

Fixed

• Bump @metamask/utils from 11.7.0 to 11.8.0 (#827)

14.0.0

@metamask/design-system-react 0.4.0

Added

• Added attach money icon (#823)

Fixed

• Jazzicon, Blockies and Maskicon icon generation for CAIP-10 addresses (#816)

@metamask/design-system-react-native 0.4.0

Added

• Added attach money icon (#823)

Fixed

• Jazzicon, Blockies and Maskicon icon generation for CAIP-10 addresses (#816)

@metamask/design-system-shared 0.1.0

Added

• Initial release - MetaMask Design System Shared
• Adding CAIP-10 address utilities (#817)

13.0.0

@metamask/design-system-react 0.3.1

Fixed

• Removed DOMPurify dependency from Maskicon component (#812)
• Aligned React peer dependencies with MetaMask extension React 17 (#809)

12.0.0

@metamask/design-system-react-native 0.3.1

Fixed

• fix: export missing Box component color enums: BoxBackgroundColor and BoxBorderColor for React Native (#807)
• fix: make Button variant prop optional(ButtonVariant.Primary as default) (#806)

11.0.0

@metamask/design-system-react 0.3.0

Added

• New icons (AppleLogo, Backspace, Candlestick, Clear, MetamaskFoxOutline) (#798)

• Figma code connect files for all components (#766), (#791), (#795), (#796), (#794), (#792)

Changed

• Update AvatarAccount shape from circle to square (#800)
• Update README.mdx files for template alignment (#771)

Fixed

• Adding new text classnames to twmerge to avoid conflicts (#802)
• Optimize icon SVGs and remove hardcoded colors (#799)
• Add ref support to Box component using forwardRef (#790)

@metamask/design-system-react-native 0.3.0

Added

• New icons (AppleLogo, Backspace, Candlestick, Clear, MetamaskFoxOutline) (#798)

• Figma code connect files for all components (#766), (#791), (#795), (#796), (#794), (#792)

Changed

• Update AvatarAccount shape from circle to square (#800)

Fixed

• Updated font file across apps and packages to match mobile (#801)
• Optimize icon SVGs and remove hardcoded colors (#799)

@metamask/design-system-tailwind-preset 0.6.1

Fixed

• Adding new text classnames to twmerge to avoid conflicts (#802)

@metamask/design-system-twrnc-preset 0.2.1

Fixed

• Updated font file across apps and packages to match mobile codebase (#801)

@metamask/design-tokens 8.1.1

Fixed

• Updated background/muted, background/muted-hover and background/muted-pressed colors to align with trade (#788)

10.0.0

@metamask/design-system-react 0.2.0

Added

• Added 5 new Text component variants with responsive typography support (#777):
  • TextVariant.PageHeading - For main page titles (renders as <h1> by default)
  • TextVariant.SectionHeading - For section titles (renders as <h2> by default)
  • TextVariant.ButtonLabelMd - For medium-sized button labels (renders as <span> by default)
  • TextVariant.ButtonLabelLg - For large-sized button labels (renders as <span> by default)
  • TextVariant.AmountDisplayLg - For large amount/value displays (renders as <span> by default)
• Added comprehensive utility props to Box component for enhanced layout control (#779) and fixes (#781):
  • Margin props: margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical
  • Padding props: padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical
  • Border props: borderWidth, borderColor
  • Background props: backgroundColor
  • All spacing props use the BoxSpacing scale (0-12) where each unit equals 4px
  • Border width uses BoxBorderWidth type (0, 1, 2, 4, 8) for valid Tailwind CSS values
  • Color props use design system color tokens for consistent theming

@metamask/design-system-react-native 0.2.0

Added

• Added 5 new Text component variants with responsive typography support (#777):
  • TextVariant.PageHeading - For main page titles with large, bold styling
  • TextVariant.SectionHeading - For section titles with medium, bold styling
  • TextVariant.ButtonLabelMd - For medium-sized button labels with optimized button text styling
  • TextVariant.ButtonLabelLg - For large-sized button labels with optimized button text styling
  • TextVariant.AmountDisplayLg - For large amount/value displays with prominent numeric styling
• Added comprehensive utility props to Box component for enhanced layout control (#779) and fixes (#781):
  • Margin props: margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal, marginVertical
  • Padding props: padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal, paddingVertical
  • Border props: borderWidth, borderColor
  • Background props: backgroundColor
  • All spacing props use the BoxSpacing scale (0-12) where each unit equals 4px
  • Border width uses BoxBorderWidth type (0, 1, 2, 4, 8) for valid Tailwind/TWRNC values
  • Color props use design system color tokens for consistent theming across light/dark modes

@metamask/design-system-tailwind-preset 0.6.0

Added

• Added classnames for 5 new text styles: page heading, section heading, button labels, and amount display (#777)

@metamask/design-system-twrnc-preset 0.2.0

Added

• Added classnames for 5 new text styles: page heading, section heading, button labels, and amount display (#777)
• Added functionality to improve developer experience with tailwind intellisense and linting for react native (#783)

@metamask/design-tokens 8.1.0

Added

• Added design tokens for 5 new text styles: page heading, section heading, button labels, and amount display (#777)

Changed

• Updating semantic design token color values (#775)
• Updating neutral design token color values (#774)