Skip to content

Commit 0711cca

Browse files
georgewrmarshallgeorgewrmarshall
authored
chore: upgrade design system packages and migrate bold to semibold (#28363)
## **Description** Upgraded MetaMask Mobile to the latest published MetaMask design system packages and applied the typography migration where semantic bold moved from weight 700 to 600. https://github.com/MetaMask/metamask-design-system/releases/tag/v27.0.0 This PR: - Upgrades: - `@metamask/design-system-react-native` from `^0.12.0` to `^0.13.0` - `@metamask/design-system-twrnc-preset` from `^0.3.0` to `^0.4.0` - `@metamask/design-tokens` from `^8.2.2` to `^8.3.0` - Adds Geist semibold assets from design-system Storybook React Native: - `Geist-SemiBold.otf` - `Geist-SemiBoldItalic.otf` - Updates `Text` mapping so semantic bold (`bold`, `600+`) resolves to semibold family (`Geist-SemiBold` / italic equivalent) - Updates legacy component-library `Text` usage to align with semibold mapping - Updates font/config wiring for Expo font plugin and native build paths (iOS/Android) - Updates snapshots impacted by the typography migration Scope decision for this PR: - This change intentionally targets Design System team-owned or unowned files to keep review scope manageable given the high snapshot volume. - `Geist-Bold` is intentionally not removed in this PR because there are still static mentions in other teams' areas that would trigger additional codeowner reviews. - A fast-follow PR will remove remaining `Geist-Bold` references and update cross-team files issue here #28387 ## **Changelog** CHANGELOG entry: Updated app typography and font assets to align with the latest MetaMask design system semibold bold-weight migration. ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-664 ## **Manual testing steps** ```gherkin Feature: Design system semibold typography migration Scenario: user sees text rendered with updated semibold mapping Given the app is built from this branch on iOS and Android When user opens screens with headings and emphasized text (for example swaps, onboarding/create password, review flows, and perps transaction details) Then text that previously used semantic bold renders correctly with semibold assets And no missing-font fallback is visible ``` ## **Screenshots/Recordings** ### **Before** Geist-Bold in the inspector for all bold fonts <img width="398" height="211" alt="Screenshot 2026-04-03 at 9 54 38 AM" src="https://github.com/user-attachments/assets/7b8d49cf-b1c2-49db-a2ea-eee162bbdbd7" /> iOS simulator https://github.com/user-attachments/assets/ac523b32-f898-4ec7-b089-8e2e9b0fc30c Android simulator https://github.com/user-attachments/assets/392b6baf-2046-480f-a5b0-8a042251396b ### **After** Geist-SemiBold appears where Geist-Bold once was in the inspector for all bold fonts <img width="434" height="133" alt="Screenshot 2026-04-03 at 9 21 28 AM" src="https://github.com/user-attachments/assets/9417dec9-3923-41ac-8310-68983604a617" /> iOS simulator https://github.com/user-attachments/assets/54eb8ede-06f8-4077-b168-a58e6255ac73 Android simulator https://github.com/user-attachments/assets/7c479a78-07a8-4841-9ef9-1028862d7190 Android real device https://github.com/user-attachments/assets/10de6253-eb35-4da8-bf19-1a46a12262de ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Medium risk because it changes global font-family/weight resolution and adds new font assets; misconfiguration could lead to missing fonts or subtle layout regressions across many screens. > > **Overview** > Migrates semantic **bold** typography from `700`/`Geist-Bold` to `600`/`Geist-SemiBold` by updating `getFontFamily` to resolve `bold` and `600+` weights to the new SemiBold font family (including italic). > > Wires in new `Geist-SemiBold` and `Geist-SemiBoldItalic` assets for Android and Expo (`android/link-assets-manifest.json`, `app.config.js`) and updates affected Jest snapshots/tests to reflect the new fontFamily and `fontWeight` values. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit a719b5a. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 8da8416 commit 0711cca

217 files changed

Lines changed: 1276 additions & 1242 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎android/app/src/main/assets/fonts/Geist-SemiBold.otf‎

130 KB
Binary file not shown.

‎android/app/src/main/assets/fonts/Geist-SemiBoldItalic.otf‎

131 KB
Binary file not shown.

‎android/link-assets-manifest.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@
99
"path": "app/fonts/Geist-Bold.otf",
1010
"sha1": "53d4deff787adeb561e69bfa4b28375710f4686f"
1111
},
12+
{
13+
"path": "app/fonts/Geist-SemiBoldItalic.otf",
14+
"sha1": "bbbda4921114ab99f8af88f06fd0cbe54c3c2d04"
15+
},
16+
{
17+
"path": "app/fonts/Geist-SemiBold.otf",
18+
"sha1": "5aa18555f9d712446d2e8f786adbe3582e3cb199"
19+
},
1220
{
1321
"path": "app/fonts/Geist-MediumItalic.otf",
1422
"sha1": "5f1ba7a59a89db9a70a046aa7b6d38345e79eb5c"

‎app.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,11 @@ module.exports = {
7070
fonts: [
7171
'./app/fonts/Geist-Regular.otf',
7272
'./app/fonts/Geist-Medium.otf',
73+
'./app/fonts/Geist-SemiBold.otf',
7374
'./app/fonts/Geist-Bold.otf',
7475
'./app/fonts/Geist-RegularItalic.otf',
7576
'./app/fonts/Geist-MediumItalic.otf',
77+
'./app/fonts/Geist-SemiBoldItalic.otf',
7678
'./app/fonts/Geist-BoldItalic.otf',
7779
'./app/fonts/MMSans-Regular.otf',
7880
'./app/fonts/MMSans-Medium.otf',

‎app/component-library/components-temp/CustomSpendCap/__snapshots__/CustomSpendCap.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ exports[`CustomSpendCap should match snapshot 1`] = `
3232
style={
3333
{
3434
"color": "#131416",
35-
"fontFamily": "Geist-Bold",
35+
"fontFamily": "Geist-SemiBold",
3636
"fontSize": 16,
3737
"letterSpacing": 0,
3838
"lineHeight": 24,

‎app/component-library/components-temp/Tabs/Tab/__snapshots__/Tab.test.tsx.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ exports[`Tab Active State applies active styling when isActive is true 1`] = `
5959
[
6060
{
6161
"color": "#131416",
62-
"fontFamily": "Geist-Bold",
62+
"fontFamily": "Geist-SemiBold",
6363
"fontSize": 16,
6464
"fontWeight": 400,
6565
"letterSpacing": 0,
@@ -80,7 +80,7 @@ exports[`Tab Active State applies active styling when isActive is true 1`] = `
8080
[
8181
{
8282
"color": "#131416",
83-
"fontFamily": "Geist-Bold",
83+
"fontFamily": "Geist-SemiBold",
8484
"fontSize": 16,
8585
"fontWeight": 400,
8686
"letterSpacing": 0,
@@ -164,7 +164,7 @@ exports[`Tab Active State applies inactive styling when isActive is false 1`] =
164164
[
165165
{
166166
"color": "#131416",
167-
"fontFamily": "Geist-Bold",
167+
"fontFamily": "Geist-SemiBold",
168168
"fontSize": 16,
169169
"fontWeight": 400,
170170
"letterSpacing": 0,
@@ -270,7 +270,7 @@ exports[`Tab Disabled State applies disabled styling when isDisabled is true 1`]
270270
[
271271
{
272272
"color": "#131416",
273-
"fontFamily": "Geist-Bold",
273+
"fontFamily": "Geist-SemiBold",
274274
"fontSize": 16,
275275
"fontWeight": 400,
276276
"letterSpacing": 0,
@@ -376,7 +376,7 @@ exports[`Tab Disabled State shows disabled styling even when marked as active 1`
376376
[
377377
{
378378
"color": "#131416",
379-
"fontFamily": "Geist-Bold",
379+
"fontFamily": "Geist-SemiBold",
380380
"fontSize": 16,
381381
"fontWeight": 400,
382382
"letterSpacing": 0,
@@ -482,7 +482,7 @@ exports[`Tab Disabled State shows muted text color when disabled and inactive 1`
482482
[
483483
{
484484
"color": "#131416",
485-
"fontFamily": "Geist-Bold",
485+
"fontFamily": "Geist-SemiBold",
486486
"fontSize": 16,
487487
"fontWeight": 400,
488488
"letterSpacing": 0,
@@ -587,7 +587,7 @@ exports[`Tab Rendering renders correctly 1`] = `
587587
[
588588
{
589589
"color": "#131416",
590-
"fontFamily": "Geist-Bold",
590+
"fontFamily": "Geist-SemiBold",
591591
"fontSize": 16,
592592
"fontWeight": 400,
593593
"letterSpacing": 0,

‎app/component-library/components-temp/Tabs/TabsBar/__snapshots__/TabsBar.test.tsx.snap‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ exports[`TabsBar Automatic Scroll Detection renders without scroll view initiall
8989
[
9090
{
9191
"color": "#131416",
92-
"fontFamily": "Geist-Bold",
92+
"fontFamily": "Geist-SemiBold",
9393
"fontSize": 16,
9494
"fontWeight": 400,
9595
"letterSpacing": 0,
@@ -110,7 +110,7 @@ exports[`TabsBar Automatic Scroll Detection renders without scroll view initiall
110110
[
111111
{
112112
"color": "#131416",
113-
"fontFamily": "Geist-Bold",
113+
"fontFamily": "Geist-SemiBold",
114114
"fontSize": 16,
115115
"fontWeight": 400,
116116
"letterSpacing": 0,
@@ -192,7 +192,7 @@ exports[`TabsBar Automatic Scroll Detection renders without scroll view initiall
192192
[
193193
{
194194
"color": "#131416",
195-
"fontFamily": "Geist-Bold",
195+
"fontFamily": "Geist-SemiBold",
196196
"fontSize": 16,
197197
"fontWeight": 400,
198198
"letterSpacing": 0,
@@ -295,7 +295,7 @@ exports[`TabsBar Automatic Scroll Detection renders without scroll view initiall
295295
[
296296
{
297297
"color": "#131416",
298-
"fontFamily": "Geist-Bold",
298+
"fontFamily": "Geist-SemiBold",
299299
"fontSize": 16,
300300
"fontWeight": 400,
301301
"letterSpacing": 0,
@@ -432,7 +432,7 @@ exports[`TabsBar Edge Cases handles invalid activeIndex gracefully 1`] = `
432432
[
433433
{
434434
"color": "#131416",
435-
"fontFamily": "Geist-Bold",
435+
"fontFamily": "Geist-SemiBold",
436436
"fontSize": 16,
437437
"fontWeight": 400,
438438
"letterSpacing": 0,
@@ -535,7 +535,7 @@ exports[`TabsBar Edge Cases handles invalid activeIndex gracefully 1`] = `
535535
[
536536
{
537537
"color": "#131416",
538-
"fontFamily": "Geist-Bold",
538+
"fontFamily": "Geist-SemiBold",
539539
"fontSize": 16,
540540
"fontWeight": 400,
541541
"letterSpacing": 0,
@@ -638,7 +638,7 @@ exports[`TabsBar Edge Cases handles invalid activeIndex gracefully 1`] = `
638638
[
639639
{
640640
"color": "#131416",
641-
"fontFamily": "Geist-Bold",
641+
"fontFamily": "Geist-SemiBold",
642642
"fontSize": 16,
643643
"fontWeight": 400,
644644
"letterSpacing": 0,
@@ -775,7 +775,7 @@ exports[`TabsBar Edge Cases handles negative activeIndex gracefully 1`] = `
775775
[
776776
{
777777
"color": "#131416",
778-
"fontFamily": "Geist-Bold",
778+
"fontFamily": "Geist-SemiBold",
779779
"fontSize": 16,
780780
"fontWeight": 400,
781781
"letterSpacing": 0,
@@ -878,7 +878,7 @@ exports[`TabsBar Edge Cases handles negative activeIndex gracefully 1`] = `
878878
[
879879
{
880880
"color": "#131416",
881-
"fontFamily": "Geist-Bold",
881+
"fontFamily": "Geist-SemiBold",
882882
"fontSize": 16,
883883
"fontWeight": 400,
884884
"letterSpacing": 0,
@@ -981,7 +981,7 @@ exports[`TabsBar Edge Cases handles negative activeIndex gracefully 1`] = `
981981
[
982982
{
983983
"color": "#131416",
984-
"fontFamily": "Geist-Bold",
984+
"fontFamily": "Geist-SemiBold",
985985
"fontSize": 16,
986986
"fontWeight": 400,
987987
"letterSpacing": 0,
@@ -1119,7 +1119,7 @@ exports[`TabsBar Individual Tab Disabling hides underline when no tab is active
11191119
[
11201120
{
11211121
"color": "#131416",
1122-
"fontFamily": "Geist-Bold",
1122+
"fontFamily": "Geist-SemiBold",
11231123
"fontSize": 16,
11241124
"fontWeight": 400,
11251125
"letterSpacing": 0,
@@ -1223,7 +1223,7 @@ exports[`TabsBar Individual Tab Disabling hides underline when no tab is active
12231223
[
12241224
{
12251225
"color": "#131416",
1226-
"fontFamily": "Geist-Bold",
1226+
"fontFamily": "Geist-SemiBold",
12271227
"fontSize": 16,
12281228
"fontWeight": 400,
12291229
"letterSpacing": 0,
@@ -1327,7 +1327,7 @@ exports[`TabsBar Individual Tab Disabling hides underline when no tab is active
13271327
[
13281328
{
13291329
"color": "#131416",
1330-
"fontFamily": "Geist-Bold",
1330+
"fontFamily": "Geist-SemiBold",
13311331
"fontSize": 16,
13321332
"fontWeight": 400,
13331333
"letterSpacing": 0,
@@ -1464,7 +1464,7 @@ exports[`TabsBar Individual Tab Disabling renders disabled tabs with correct sty
14641464
[
14651465
{
14661466
"color": "#131416",
1467-
"fontFamily": "Geist-Bold",
1467+
"fontFamily": "Geist-SemiBold",
14681468
"fontSize": 16,
14691469
"fontWeight": 400,
14701470
"letterSpacing": 0,
@@ -1485,7 +1485,7 @@ exports[`TabsBar Individual Tab Disabling renders disabled tabs with correct sty
14851485
[
14861486
{
14871487
"color": "#131416",
1488-
"fontFamily": "Geist-Bold",
1488+
"fontFamily": "Geist-SemiBold",
14891489
"fontSize": 16,
14901490
"fontWeight": 400,
14911491
"letterSpacing": 0,
@@ -1568,7 +1568,7 @@ exports[`TabsBar Individual Tab Disabling renders disabled tabs with correct sty
15681568
[
15691569
{
15701570
"color": "#131416",
1571-
"fontFamily": "Geist-Bold",
1571+
"fontFamily": "Geist-SemiBold",
15721572
"fontSize": 16,
15731573
"fontWeight": 400,
15741574
"letterSpacing": 0,
@@ -1671,7 +1671,7 @@ exports[`TabsBar Individual Tab Disabling renders disabled tabs with correct sty
16711671
[
16721672
{
16731673
"color": "#131416",
1674-
"fontFamily": "Geist-Bold",
1674+
"fontFamily": "Geist-SemiBold",
16751675
"fontSize": 16,
16761676
"fontWeight": 400,
16771677
"letterSpacing": 0,
@@ -1841,7 +1841,7 @@ exports[`TabsBar Rendering renders correctly with tabs 1`] = `
18411841
[
18421842
{
18431843
"color": "#131416",
1844-
"fontFamily": "Geist-Bold",
1844+
"fontFamily": "Geist-SemiBold",
18451845
"fontSize": 16,
18461846
"fontWeight": 400,
18471847
"letterSpacing": 0,
@@ -1862,7 +1862,7 @@ exports[`TabsBar Rendering renders correctly with tabs 1`] = `
18621862
[
18631863
{
18641864
"color": "#131416",
1865-
"fontFamily": "Geist-Bold",
1865+
"fontFamily": "Geist-SemiBold",
18661866
"fontSize": 16,
18671867
"fontWeight": 400,
18681868
"letterSpacing": 0,
@@ -1944,7 +1944,7 @@ exports[`TabsBar Rendering renders correctly with tabs 1`] = `
19441944
[
19451945
{
19461946
"color": "#131416",
1947-
"fontFamily": "Geist-Bold",
1947+
"fontFamily": "Geist-SemiBold",
19481948
"fontSize": 16,
19491949
"fontWeight": 400,
19501950
"letterSpacing": 0,
@@ -2047,7 +2047,7 @@ exports[`TabsBar Rendering renders correctly with tabs 1`] = `
20472047
[
20482048
{
20492049
"color": "#131416",
2050-
"fontFamily": "Geist-Bold",
2050+
"fontFamily": "Geist-SemiBold",
20512051
"fontSize": 16,
20522052
"fontWeight": 400,
20532053
"letterSpacing": 0,
@@ -2184,7 +2184,7 @@ exports[`TabsBar Underline Animation renders animated underline 1`] = `
21842184
[
21852185
{
21862186
"color": "#131416",
2187-
"fontFamily": "Geist-Bold",
2187+
"fontFamily": "Geist-SemiBold",
21882188
"fontSize": 16,
21892189
"fontWeight": 400,
21902190
"letterSpacing": 0,
@@ -2205,7 +2205,7 @@ exports[`TabsBar Underline Animation renders animated underline 1`] = `
22052205
[
22062206
{
22072207
"color": "#131416",
2208-
"fontFamily": "Geist-Bold",
2208+
"fontFamily": "Geist-SemiBold",
22092209
"fontSize": 16,
22102210
"fontWeight": 400,
22112211
"letterSpacing": 0,
@@ -2287,7 +2287,7 @@ exports[`TabsBar Underline Animation renders animated underline 1`] = `
22872287
[
22882288
{
22892289
"color": "#131416",
2290-
"fontFamily": "Geist-Bold",
2290+
"fontFamily": "Geist-SemiBold",
22912291
"fontSize": 16,
22922292
"fontWeight": 400,
22932293
"letterSpacing": 0,
@@ -2390,7 +2390,7 @@ exports[`TabsBar Underline Animation renders animated underline 1`] = `
23902390
[
23912391
{
23922392
"color": "#131416",
2393-
"fontFamily": "Geist-Bold",
2393+
"fontFamily": "Geist-SemiBold",
23942394
"fontSize": 16,
23952395
"fontWeight": 400,
23962396
"letterSpacing": 0,

0 commit comments

Comments
 (0)