chore: updating font family from euclid to centra #31303
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
georgewrmarshall
added
the
team-design-system
7 tasks
georgewrmarshall
added a commit
to MetaMask/metamask-design-system
that referenced
this pull request
Mar 27, 2025
## **Description** This PR bumps the version to 6.0.1 to release the font family name fix from #522. 1. Reason for change: Release version 6.0.1 with the CentraNo1 font name fix 2. Improvement: - Updates CHANGELOG.md to document the 6.0.1 release - Bumps package versions from 6.0.0 to 6.0.1 - Includes fix from #522 that standardizes CentraNo1 font name without space ## **Related issues** Releases: #522 - Font family name standardization fix ## **Manual testing steps** 1. Use the publish preview release in MetaMask/metamask-extension#31303 2. See font family issue is resolved ## **Screenshots/Recordings** ### **Before** Using `@metamask/design-tokens@v6.0.0` in the extension makes all fonts that use the CSS varibale --font-family-sans fallback to Helvetica Neue <img width="1511" alt="Screenshot 2025-03-27 at 11 38 05 AM" src="https://github.com/user-attachments/assets/cd31f378-7085-4962-87fc-9db953cfdf62" /> ### **After** CentraNo1 displays correctly using the publish preview version <img width="1508" alt="Screenshot 2025-03-27 at 11 41 05 AM" src="https://github.com/user-attachments/assets/5c8f7f1e-dd25-4cd0-ac28-b02bbd983558" /> ## **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 ## **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.
georgewrmarshall
force-pushed
the
fix/centra-font-family
branch
from
7c469cc to
0835111
Compare
✨ Files requiring CODEOWNER review ✨🎨 @MetaMask/design-system-engineers
🖥️ @MetaMask/wallet-ux
|
package.json
Outdated
There was a problem hiding this comment.
Updating design tokens to version that sets the --font-family-sans CSS variable to CentraNo1
--font-family-sans: 'CentraNo1', 'Helvetica Neue', Helvetica, Arial, sans-serif;
Builds ready [0835111]
UI Startup Metrics (1239 ± 64 ms)
Bundle size diffs [🚀 Bundle size reduced!]
|
There was a problem hiding this comment.
We might be able to use the --font-family-sans here
Comment on lines
-10
to
-15
There was a problem hiding this comment.
No longer needed as all Text component variants will use the brand evolution font CentraNo1
Comment on lines
-36
to
-45
There was a problem hiding this comment.
Removing the mapping of different font families to variants as we are using CentraNo1 for all variants
There was a problem hiding this comment.
--font-family-sans has been updated in @metamask/design-tokens@6.0.1 to:
--font-family-sans: 'CentraNo1', 'Helvetica Neue', Helvetica, Arial, sans-serif;
Comment on lines
-64
to
-67
There was a problem hiding this comment.
Not needed
Comment on lines
-290
to
-314
There was a problem hiding this comment.
We can remove this story documenting the isBrandEvolution feature flag prop, as it is removed in this PR.
There was a problem hiding this comment.
Removing the temporary feature flag prop that enabled the earlier brand evolution typography. Everything now uses CentraNo1, so this is no longer required.
Comment on lines
-101
to
-182
There was a problem hiding this comment.
Removing snapshot test and isBrandEvolution feature flag prop test as we are removing the isBrandEvolution prop in this PR
There was a problem hiding this comment.
Removing brand evolution classname
Comment on lines
-137
to
-141
There was a problem hiding this comment.
Removing the temporary brand evolution feature flag prop from types
Comment on lines
+22
to
+24
There was a problem hiding this comment.
Updating Material UI text field component to use Centra instead of Euclid
There was a problem hiding this comment.
Updating default font family variable to use CentraNo1 instead of Euclid
ui/css/utilities/fonts.scss
Outdated
Comment on lines
-24
to
-50
There was a problem hiding this comment.
Removing @font-face definitions for Euclid from SCSS
There was a problem hiding this comment.
Before
After
There was a problem hiding this comment.
Using the CSS variable for font family from the design tokens package
--font-family-sans: 'CentraNo1', 'Helvetica Neue', Helvetica, Arial, sans-serif;
There was a problem hiding this comment.
Removed the snapshot test in text.test.tsx as I think it's not needed
Builds ready [8261916]
UI Startup Metrics (1177 ± 67 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
There was a problem hiding this comment.
Updating sass variable to use the design tokens CSS variable
|
Updated dependencies detected. Learn more about Socket for GitHub ↗︎
|
georgewrmarshall
force-pushed
the
fix/centra-font-family
branch
from
86e005f to
542b9c1
Compare
Builds ready [542b9c1]
UI Startup Metrics (1202 ± 69 ms)
Bundle size diffs [🚀 Bundle size reduced!]
|
brianacnguyen
approved these changes
Mar 28, 2025
darkwing
approved these changes
Mar 28, 2025
metamaskbot
added
the
release-12.17.0
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR updates the default font family across the MetaMask extension from
Euclid Circular BtoCentraNo1to align with brand evolution updates. The changes include:--font-family-sans('CentraNo1')The changes are part of the broader brand evolution initiative to standardize typography across MetaMask products.
Related issues
Fixes: https://github.com/MetaMask/MetaMask-planning/issues/4408
Manual testing steps
CentraNo1font familyScreenshots/Recordings
Before
Navigating around the extension with current Euclid Circular B font family in expanded and popup view
before.expanded720.mov
before.popup.mov
Text component in storybook with curent Euclid Circular B font family
before.storybook.text720.mov
After
Navigating around the extension with updated CentraNo1 font family in expanded and popup view
after.expanded720.mov
after.popup720.mov
Text component in storybook with updated CentraNo1 font family
after.storybook720.mov
No instances of Euclid left in codebase apart from mock e2e test urls for
snap-account-abstraction-keyringPre-merge author checklist
Pre-merge reviewer checklist