UNPKG

@metamask/design-system-tailwind-preset

Version:

Design System Tailwind CSS preset for MetaMask projects

github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-tailwind-preset

MetaMask/metamask-design-system

119 lines (72 loc) • 6.67 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
# 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