# Changelog All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] ## [0.11.0] ### Added - Added `background.elevated1`, `background.elevated2`, and `border.alternative` Tailwind color utilities mapped to new design tokens ([#1445](https://github.com/MetaMask/metamask-design-system/pull/1445)) ### Changed - Updated peer dependency to `@metamask/design-tokens@^9.0.0` ([#1444](https://github.com/MetaMask/metamask-design-system/pull/1444)) - Required coordination bump; visual impact comes from the design-tokens 9.0.0 dark theme change for apps not already on OLED pure-black - See [design-tokens Migration Guide](../design-tokens/MIGRATION.md#from-version-8x-to-900) ## [0.10.0] ### Changed - **BREAKING:** Dropped Node.js 20 and 22 support for the release line; preset behavior is unchanged, but consumers must run on Node 24 or newer ([#1263](https://github.com/MetaMask/metamask-design-system/pull/1263)) ## [0.9.0] ### Changed - **BREAKING:** Dropped Node.js 18 support for the release line; no Tailwind preset behavior changed, but consumers must run on Node 20 or newer ([#1206](https://github.com/MetaMask/metamask-design-system/pull/1206)) ## [0.8.0] ### Added - Added `animate-skeleton-pulse` (keyframes `skeleton-pulse`) for the design-system `Skeleton` loading bar ([#1146](https://github.com/MetaMask/metamask-design-system/pull/1146)) - Added `animate-slide-up` (keyframes `slide-up`) for `ModalContent` dialog entrance motion ([#1139](https://github.com/MetaMask/metamask-design-system/pull/1139)) ## [0.7.0] ### Added - Added a `fade-in` animation utility so consumers can use `animate-fade-in` for simple opacity entrance transitions, including the new `ModalOverlay` web migration path ([#1120](https://github.com/MetaMask/metamask-design-system/pull/1120)) ### Changed - Clarified the migration path for consumers moving to Tailwind CSS v4. Existing Tailwind v3 projects can keep using this preset, while Tailwind v4 projects should move to `@metamask/design-tokens/tailwind/theme.css` instead ([#1117](https://github.com/MetaMask/metamask-design-system/pull/1117)) ## [0.6.1] ### Fixed - Adding new text classnames to twmerge to avoid conflicts ([#802](https://github.com/MetaMask/metamask-design-system/pull/802)) ## [0.6.0] ### Added - Added classnames for 5 new text styles: page heading, section heading, button labels, and amount display ([#777](https://github.com/MetaMask/metamask-design-system/pull/777)) ## [0.5.0] ### Added - Added support for monochromatic button design tokens ([#709](https://github.com/MetaMask/metamask-design-system/pull/709)) - Added background color tokens: section, subsection, muted ([#682](https://github.com/MetaMask/metamask-design-system/pull/682)) - Added DisplayLG typography token support ([#607](https://github.com/MetaMask/metamask-design-system/pull/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](https://github.com/MetaMask/metamask-design-system/pull/756)). This affects all typography tokens and requires updating font imports and references. See the [migration guide](./MIGRATION.md#from-version-700-to-800) for details. ## [0.4.0] ### Added - Added "accent" colors for light and dark themes ([#534](https://github.com/MetaMask/metamask-design-system/pull/534)) ## [0.3.0] ### Changed - **BREAKING:** Removed variant-specific font family classnames in favor of base font families: ([#533](https://github.com/MetaMask/metamask-design-system/pull/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 (Geist) - `font-accent` for accent text (MMSans) - `font-hero` for hero text (MMPoly) - See the [@metamask/design-tokens migration guide](../design-tokens/MIGRATION.md#from-version-600-to-700) for details. ## [0.2.0] ### Changed - Updated to use new font family configuration from @metamask/design-tokens@6.0.0. Note: This includes breaking changes in the design-tokens package - see the [@metamask/design-tokens migration guide](../design-tokens/MIGRATION.md#from-version-510-to-600) for details. ([#499](https://github.com/MetaMask/metamask-design-system/pull/499)) ## [0.1.0] ### Added - Initial release. [Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.11.0...HEAD [0.11.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.10.0...@metamask/design-system-tailwind-preset@0.11.0 [0.10.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.9.0...@metamask/design-system-tailwind-preset@0.10.0 [0.9.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.8.0...@metamask/design-system-tailwind-preset@0.9.0 [0.8.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.7.0...@metamask/design-system-tailwind-preset@0.8.0 [0.7.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.6.1...@metamask/design-system-tailwind-preset@0.7.0 [0.6.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.6.0...@metamask/design-system-tailwind-preset@0.6.1 [0.6.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.5.0...@metamask/design-system-tailwind-preset@0.6.0 [0.5.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.4.0...@metamask/design-system-tailwind-preset@0.5.0 [0.4.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.3.0...@metamask/design-system-tailwind-preset@0.4.0 [0.3.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.2.0...@metamask/design-system-tailwind-preset@0.3.0 [0.2.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.1.0...@metamask/design-system-tailwind-preset@0.2.0 [0.1.0]: https://github.com/MetaMask/metamask-design-system/releases/tag/@metamask/design-system-tailwind-preset@0.1.0