feat: update default font from CentraNo1 to Geist - #210
Conversation
Replace CentraNo1 font with Geist to align with the design-tokens v8 font family migration (metamask-design-system). This matches the @font-face declarations used in the design system's storybook-react. - Update @metamask/design-tokens from ^7.1.0 to ^8.0.0 - Replace CentraNo1 woff2 files with Geist woff2 files (6 faces: Regular, RegularItalic, Medium, MediumItalic, Bold, BoldItalic) - Update @font-face declarations in index.css
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
| }, | ||
| "dependencies": { | ||
| "@metamask/design-tokens": "^7.1.0", | ||
| "@metamask/design-tokens": "^8.0.0", |
There was a problem hiding this comment.
@metamask/design-tokens v8 introduces 3 breaking changes (migration guide): (1) font family CentraNo1→Geist, (2) background/muted now transparent, (3) HeadingSMRegular tokens removed. Only (1) applies here — this codebase uses background-alternative and background-default only, and no HeadingSMRegular tokens. The build copies @metamask/design-tokens/styles.css into design-tokens.css at build time, so the --font-family-default CSS variable automatically resolves to Geist after this upgrade.
| font-family: 'Geist'; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| src: url('fonts/Geist/Geist-Regular.woff2') format('woff2'); |
There was a problem hiding this comment.
The old CentraNo1 declarations only covered normal style (Book/Medium/Bold). These Geist declarations add italic variants for each weight (Regular, Medium, Bold), matching the canonical font set from metamask-design-system/apps/storybook-react/fonts/Geist. This ensures any future use of font-style: italic in this page renders correctly with the bundled font rather than relying on browser faux-italic synthesis.
|
|
||
| body { | ||
| background-color: var(--color-background-alternative); | ||
| background-color: var(--color-background-default); |
There was a problem hiding this comment.
This aligns the page background with the design system's primary surface color. In the dark theme context (data-theme="dark" on <html>), --color-background-default produces the standard dark surface, consistent with how the extension renders full-page views.
| border: 1px solid var(--color-primary-default); | ||
| color: var(--color-icon-inverse); | ||
| background: var(--color-icon-default); | ||
| border: 1px solid var(--color-icon-default); |
There was a problem hiding this comment.
This aligns the primary button with the design system's Button component which uses icon-based tokens for its primary variant. The previous --color-primary-default (blue) styling was from an older design iteration. The icon-based tokens produce a dark button with light text in the dark theme — matching the extension's current button appearance. This also removes the need for the data-theme="light" override that was previously on this button in index.html.
|
|
||
| <div class="button-container"> | ||
| <button class="button-primary" id="portfolio-link" data-theme="light"> | ||
| <button class="button-primary" id="portfolio-link"> |
There was a problem hiding this comment.
This button previously forced a light-theme context on itself to get the desired blue-on-white appearance from --color-primary-* tokens. With the token migration to --color-icon-*, the button now renders correctly under the page's native data-theme="dark" context (set on <html>), making the per-element theme override unnecessary.
| background-color: var(--color-primary-default); | ||
| color: var(--color-icon-inverse); | ||
| background-color: var(--color-icon-default-hover); | ||
| border-color: var(--color-icon-default-hover); |
There was a problem hiding this comment.
The old hover state kept background-color: var(--color-primary-default) — identical to the default state, meaning no visible hover feedback. The new tokens (--color-icon-default-hover, --color-icon-default-pressed) provide distinct visual states. Also adds border-color tracking on hover, which was previously missing — the border would stay the default color while the background changed, causing a visual mismatch.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Button hover/active uses likely non-existent design tokens
- Replaced undefined hover/pressed icon tokens with existing --color-icon-default for background and border to prevent disappearance.
Or push these changes by commenting:
@cursor push 46dcb0c0c9
Preview (46dcb0c0c9)
diff --git a/static/index.css b/static/index.css
--- a/static/index.css
+++ b/static/index.css
@@ -133,14 +133,14 @@
.button-primary:hover {
color: var(--color-icon-inverse);
- background-color: var(--color-icon-default-hover);
- border-color: var(--color-icon-default-hover);
+ background-color: var(--color-icon-default);
+ border-color: var(--color-icon-default);
}
.button-primary:active {
color: var(--color-icon-inverse);
- background-color: var(--color-icon-default-pressed);
- border-color: var(--color-icon-default-pressed);
+ background-color: var(--color-icon-default);
+ border-color: var(--color-icon-default);
}
.button-link-danger {
2 participants
Summary
@metamask/design-tokensv8 (migration guide).woff2files with 6 Geist.woff2font faces (Regular, RegularItalic, Medium, MediumItalic, Bold, BoldItalic) sourced frommetamask-design-system/apps/storybook-react@font-facedeclarations inindex.cssto match the design system's storybook-react conventionsBefore
After
Changes
package.json@metamask/design-tokens:^7.1.0→^8.0.0static/index.css@font-face→ 6 Geist@font-faceblocksstatic/fonts/CentraNo1-{Book,Medium,Bold}.woff2static/fonts/Geist/Geist-{Regular,RegularItalic,Medium,MediumItalic,Bold,BoldItalic}.woff2yarn.lockdesign-tokens v7 → v8 breaking changes review
Per the migration guide, v8 has three breaking changes:
background/mutednow transparent — ✅ Not applicable (this codebase usesbackground-alternativeandbackground-defaultonly)HeadingSMRegulartokens removed — ✅ Not applicable (not used in this codebase)Verification
yarn lintpassesyarn buildsucceeds--font-family-defaultresolves to'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serifNote
Medium Risk
Upgrades
@metamask/design-tokensto a new major version and changes font assets/CSS, which could cause subtle visual regressions if token expectations differ.Overview
Updates the project to
@metamask/design-tokensv8 and aligns typography with the design system by switching the bundled default font from CentraNo1 to Geist.Replaces the existing CentraNo1
@font-facedeclarations with a fuller Geist set (regular/medium/bold, plus italics) and updatesyarn.lockto resolvedesign-tokensto v8.x.Written by Cursor Bugbot for commit 28f9f8a. This will update automatically on new commits. Configure here.