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)

9.0.0

@metamask/design-system-react 0.1.0

Added

• Initial release - MetaMask Design System React component library
• Avatar Components: AvatarAccount, AvatarBase, AvatarFavicon, AvatarGroup, AvatarIcon, AvatarNetwork, AvatarToken
• Badge Components: BadgeCount, BadgeIcon, BadgeNetwork, BadgeStatus, BadgeWrapper
• Button Components: Button, ButtonBase, ButtonIcon, TextButton
• Form Components: Checkbox
• Layout Components: Box
• Typography Components: Text
• Icon Component: Icon with comprehensive icon set
• Utility Components: Blockies, Jazzicon, Maskicon
• Utilities: twMerge utility for proper Tailwind class conflict resolution
• Full TypeScript support with type definitions and enums
• Tailwind CSS integration with design token support

@metamask/design-system-react-native 0.1.0

Added

• Initial release - MetaMask Design System React Native component library
• Avatar Components: AvatarAccount, AvatarBase, AvatarFavicon, AvatarGroup, AvatarIcon, AvatarNetwork, AvatarToken
• Badge Components: BadgeCount, BadgeIcon, BadgeNetwork, BadgeStatus, BadgeWrapper
• Button Components: Button, ButtonBase, ButtonIcon, TextButton
• Form Components: Checkbox
• Layout Components: Box
• Typography Components: Text
• Icon Component: Icon with comprehensive icon set
• Utility Components: Blockies, ButtonAnimated, Jazzicon, Maskicon, TextOrChildren
• Full TypeScript support with type definitions and enums
• React Native integration with TWRNC preset support

@metamask/design-system-tailwind-preset 0.5.0

Added

• Added support for monochromatic button design tokens (#709)
• Added background color tokens: section, subsection, muted (#682)
• Added DisplayLG typography token support (#607)

Changed

• BREAKING: Updated peer dependency to @metamask/design-tokens@^8.0.0 which includes several breaking changes:
  • Changed default font from CentraNo1 to Geist (#756). This affects all typography tokens and requires updating font imports and references. See the migration guide for details.

@metamask/design-system-twrnc-preset 0.1.0

Added

• Initial release - MetaMask Design System TWRNC preset
• ThemeProvider: Context provider for theme management
• Hooks: useTailwind, useTheme
• Theme Types: TypeScript definitions for theme configuration
• MetaMask design token integration for React Native
• TWRNC preset configuration with MetaMask styling utilities

@metamask/design-tokens 8.0.0

Added

• Added DisplayLG typography token for larger display text (#607)

Changed

• BREAKING: Updated background.muted from opaque colors to transparent colors and added new background.section and background.subsection tokens (#682). This is a breaking change that affects components requiring opaque backgrounds like BadgeNetwork, avatar fallbacks, and non-action elements. Applications must swap background.muted with background.section for opaque backgrounds.
• BREAKING: Removed deprecated typography tokens sHeadingSMRegular and lHeadingSMRegular (#699). Choose an appropriate replacement typography token based on your design needs. See the migration guide for details.
• BREAKING: Changed default font from CentraNo1 to Geist (#756). This affects all typography tokens and requires updating font imports and references. See the migration guide for details.

8.0.0

@metamask/design-system-tailwind-preset 0.4.0

Added

• Added "accent" colors for light and dark themes (#534)

@metamask/design-tokens 7.1.0

Added

• Added "accent" colors for light and dark themes (#534)

7.0.0

@metamask/design-system-tailwind-preset 0.3.0

Changed

• BREAKING: Removed variant-specific font family classnames in favor of base font families (#533):
  • Removed all s-* and l-* typography font family classnames (e.g., s-display-md, s-heading-lg, etc.)
  • Now using three base font family classnames:
    • font-default for default text (CentraNo1)
    • font-accent for accent text (MMSans)
    • font-hero for hero text (MMPoly)
  • See the @metamask/design-tokens migration guide for details.

@metamask/design-tokens 7.0.0

Added

• BREAKING: Removed individual typography font family tokens in favor of base font family tokens. See the migration guide for details.
• BREAKING: Updated Body variants(BodyXs, BodySm, BodyMd, BodyLg) font size for small screens (#533). See the migration guide for details.