Skip to content

Commit 12596ca

Browse files
georgewrmarshallgeorgewrmarshall
authored
Release/7.0.0 (#536)
## **Description** This PR introduces version 7.0.0 of the design tokens and corresponding updates to the Tailwind preset. The main changes include: 1. Breaking changes to the typography system: - Removed variant-specific font family classnames (e.g., `s-display-md`, `l-heading-lg`) - Introduced three base font family classnames: - `font-default` for default text (CentraNo1) - `font-accent` for accent text (MMSans) - `font-hero` for hero text (MMPoly) - Updated Body variants (BodyXs, BodySm, BodyMd, BodyLg) font sizes for small screens 2. Package version updates: - `@metamask/design-tokens` updated to 7.0.0 - `@metamask/design-system-tailwind-preset` updated to 0.3.0 (includes breaking changes but because it's in beta we are just bumping the minor version here) - Updated peer dependencies to reflect new versions These changes aim to simplify the typography system while maintaining consistency across MetaMask products. A detailed migration guide has been provided in the design-tokens package. ## **Related issues** Fixes: NA release PR ## **Manual testing steps** 1. Review the migration guide in `packages/design-tokens/MIGRATION.md` 2. Test typography components using the new font family classnames: - Verify `font-default` renders with CentraNo1 - Verify `font-accent` renders with MMSans - Verify `font-hero` renders with MMPoly 3. Test responsive typography: - Check Body variants (BodyXs, BodySm, BodyMd, BodyLg) on small screens - Verify font sizes adjust correctly 4. Verify no regressions in existing typography usage ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)) ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed) - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots
1 parent 7094ee1 commit 12596ca

File tree

8 files changed

+138
-9
lines changed

8 files changed

+138
-9
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@metamask/metamask-design-system",
3-
"version": "6.0.0",
3+
"version": "7.0.0",
44
"private": true,
55
"description": "The MetaMask Design System monorepo",
66
"repository": {

‎packages/design-system-react/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
"typescript": "~5.2.2"
8282
},
8383
"peerDependencies": {
84-
"@metamask/design-tokens": "^6.0.0",
84+
"@metamask/design-tokens": "^7.0.0",
8585
"react": "^16.0.0",
8686
"react-dom": "^16.0.0",
8787
"tailwindcss": "^3.0.0"

‎packages/design-system-tailwind-preset/CHANGELOG.md

+14-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [0.3.0]
11+
12+
### Changed
13+
14+
- **BREAKING:** Removed variant-specific font family classnames in favor of base font families ([#533](https://github.com/MetaMask/metamask-design-system/pull/533)):
15+
- Removed all `s-*` and `l-*` typography font family classnames (e.g., `s-display-md`, `s-heading-lg`, etc.)
16+
- Now using three base font family classnames:
17+
- `font-default` for default text (CentraNo1)
18+
- `font-accent` for accent text (MMSans)
19+
- `font-hero` for hero text (MMPoly)
20+
- See the [@metamask/design-tokens migration guide](../design-tokens/MIGRATION.md#from-version-600-to-700) for details.
21+
1022
## [0.2.0]
1123

1224
### Changed
@@ -19,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1931

2032
- Initial release.
2133

22-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]
34+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]
35+
[0.3.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
2336
[0.2.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
2437
[0.1.0]: https://github.com/MetaMask/metamask-design-system/releases/tag/@metamask/[email protected]

‎packages/design-system-tailwind-preset/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@metamask/design-system-tailwind-preset",
3-
"version": "0.2.0",
3+
"version": "0.3.0",
44
"description": "Design System Tailwind CSS preset for MetaMask projects",
55
"keywords": [
66
"MetaMask",
@@ -57,7 +57,7 @@
5757
"typescript": "~5.2.2"
5858
},
5959
"peerDependencies": {
60-
"@metamask/design-tokens": "^6.0.0",
60+
"@metamask/design-tokens": "^7.0.0",
6161
"tailwindcss": "^3.0.0"
6262
},
6363
"engines": {

‎packages/design-tokens/CHANGELOG.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [7.0.0]
11+
12+
### Added
13+
14+
- **BREAKING:** Removed individual typography font family tokens in favor of base font family tokens. See the [migration guide](./MIGRATION.md#from-version-600-to-700) for details.
15+
- **BREAKING:** Updated Body variants(BodyXs, BodySm, BodyMd, BodyLg) font size for small screens ([#533](https://github.com/MetaMask/metamask-design-system/pull/533)). See the [migration guide](./MIGRATION.md#from-version-700-to-800) for details.
16+
1017
## [6.1.0]
1118

1219
### Added
@@ -354,7 +361,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
354361

355362
- Initial release.
356363

357-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]
364+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]
365+
[7.0.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
358366
[6.1.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
359367
[6.0.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
360368
[6.0.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]

‎packages/design-tokens/MIGRATION.md

+108
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,119 @@
22

33
This guide provides detailed instructions for migrating your project from one version of the `@metamask/design-tokens` to another.
44

5+
- [From version 6.0.0 to 7.0.0](#from-version-600-to-700)
56
- [From version 5.1.0 to 6.0.0](#from-version-510-to-600)
67
- [From version 4.1.0 to 5.0.0](#from-version-410-to-500)
78
- [From version 3.0.0 to 4.0.0](#from-version-300-to-400)
89
- [From version 2.1.1 to 3.0.0](#from-version-211-to-300)
910

11+
## From version 6.0.0 to 7.0.0
12+
13+
### Typography Changes (Breaking Changes)
14+
15+
In version 7.0.0, we've simplified the typography system by removing individual font family tokens for each typography variant. This is a breaking change that affects both CSS and JS tokens.
16+
17+
#### Removed Tokens
18+
19+
##### CSS Variables
20+
21+
```css
22+
/* Typography font family tokens */
23+
--typography-s-display-md-font-family
24+
--typography-s-heading-lg-font-family
25+
--typography-s-heading-md-font-family
26+
--typography-s-heading-sm-font-family
27+
--typography-s-heading-sm-regular-font-family
28+
--typography-s-body-lg-medium-font-family
29+
--typography-s-body-md-font-family
30+
--typography-s-body-md-medium-font-family
31+
--typography-s-body-md-bold-font-family
32+
--typography-s-body-sm-font-family
33+
--typography-s-body-sm-medium-font-family
34+
--typography-s-body-sm-bold-font-family
35+
--typography-s-body-xs-font-family
36+
--typography-s-body-xs-medium-font-family
37+
--typography-l-display-md-font-family
38+
--typography-l-heading-lg-font-family
39+
--typography-l-heading-md-font-family
40+
--typography-l-heading-sm-font-family
41+
--typography-l-heading-sm-regular-font-family
42+
--typography-l-body-lg-medium-font-family
43+
--typography-l-body-md-font-family
44+
--typography-l-body-md-medium-font-family
45+
--typography-l-body-md-bold-font-family
46+
--typography-l-body-sm-font-family
47+
--typography-l-body-sm-medium-font-family
48+
--typography-l-body-sm-bold-font-family
49+
--typography-l-body-xs-font-family
50+
--typography-l-body-xs-medium-font-family
51+
```
52+
53+
##### JS Tokens
54+
55+
```javascript
56+
typography.sDisplayMD.fontFamily;
57+
typography.sHeadingLG.fontFamily;
58+
typography.sHeadingMD.fontFamily;
59+
typography.sHeadingSM.fontFamily;
60+
typography.sHeadingSMRegular.fontFamily;
61+
typography.sBodyLGMedium.fontFamily;
62+
typography.sBodyMD.fontFamily;
63+
typography.sBodyMDMedium.fontFamily;
64+
typography.sBodyMDBold.fontFamily;
65+
typography.sBodySM.fontFamily;
66+
typography.sBodySMMedium.fontFamily;
67+
typography.sBodySMBold.fontFamily;
68+
typography.sBodyXS.fontFamily;
69+
typography.sBodyXSMedium.fontFamily;
70+
typography.lDisplayMD.fontFamily;
71+
typography.lHeadingLG.fontFamily;
72+
typography.lHeadingMD.fontFamily;
73+
typography.lHeadingSM.fontFamily;
74+
typography.lHeadingSMRegular.fontFamily;
75+
typography.lBodyLGMedium.fontFamily;
76+
typography.lBodyMD.fontFamily;
77+
typography.lBodyMDMedium.fontFamily;
78+
typography.lBodyMDBold.fontFamily;
79+
typography.lBodySM.fontFamily;
80+
typography.lBodySMMedium.fontFamily;
81+
typography.lBodySMBold.fontFamily;
82+
typography.lBodyXS.fontFamily;
83+
typography.lBodyXSMedium.fontFamily;
84+
```
85+
86+
#### Added Tokens
87+
88+
##### CSS Variables
89+
90+
```css
91+
/* Font family tokens */
92+
--font-family-accent: 'MMSans', sans-serif;
93+
--font-family-hero: 'MMPoly', sans-serif;
94+
```
95+
96+
##### JS Tokens
97+
98+
```javascript
99+
const FontFamilies = {
100+
default: 'CentraNo1',
101+
accent: 'MMSans',
102+
hero: 'MMPoly',
103+
};
104+
```
105+
106+
### Migration Steps
107+
108+
1. Remove all references to individual typography font family tokens
109+
2. Use the base font family tokens instead:
110+
- For web: Use `--font-family-default` for all typography variants
111+
- For React Native: Use the appropriate font family from the base font tokens
112+
3. Update any CSS or style definitions that were using the removed tokens
113+
4. Test all typography variants to ensure they're using the correct font family
114+
5. For special typography needs:
115+
- Use `--font-family-accent` for accent text (CSS) or `FontFamilies.accent` (JS)
116+
- Use `--font-family-hero` for hero text (CSS) or `FontFamilies.hero` (JS)
117+
10118
## From version 5.1.0 to 6.0.0
11119

12120
### Font Family Changes (Breaking Changes)

‎packages/design-tokens/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@metamask/design-tokens",
3-
"version": "6.1.0",
3+
"version": "7.0.0",
44
"description": "Design tokens to be used throughout MetaMask products",
55
"keywords": [
66
"MetaMask",

‎yarn.lock

+2-2
Original file line numberDiff line numberDiff line change
@@ -3250,7 +3250,7 @@ __metadata:
32503250
ts-node: "npm:^10.9.1"
32513251
typescript: "npm:~5.2.2"
32523252
peerDependencies:
3253-
"@metamask/design-tokens": ^6.0.0
3253+
"@metamask/design-tokens": ^7.0.0
32543254
react: ^16.0.0
32553255
react-dom: ^16.0.0
32563256
tailwindcss: ^3.0.0
@@ -3271,7 +3271,7 @@ __metadata:
32713271
ts-jest: "npm:^29.2.5"
32723272
typescript: "npm:~5.2.2"
32733273
peerDependencies:
3274-
"@metamask/design-tokens": ^6.0.0
3274+
"@metamask/design-tokens": ^7.0.0
32753275
tailwindcss: ^3.0.0
32763276
languageName: unknown
32773277
linkType: soft

0 commit comments

Comments
 (0)