chore: Updating Text component "body" font sizes #31494

georgewrmarshall · 2025-04-01T17:04:47Z

Description

This PR updates the Text component's "body" variants to match the large typography sizes as part of the brand evolution. This change improves accessibility and readability across the extension by making text larger and more legible for users.

Key changes:

Implements larger font sizes for Text component "body" variants to match large typography scale

BodyLg: 16px → 18px
BodyMd: 14px → 16px
BodySm: 12px → 14px
BodyXs: 10px → 12px

Any CSS overrides that set a static font size without using the Text component have not been updated. These can be reviewed and updated on a case-by-case basis. Image below shows 542 instances of custom font size overrides
Upgrades @metamask/design-tokens to version 7.0.0 which includes the new typography scale
Updates font-family references design tokens CSS variables. See migration docs.

Related issues

Fixes: #31172

Manual testing steps

Testing inside the extension

Build and run the extension locally
Navigate through various pages and components to verify text sizes
Check that all body text variants (xs, sm, md, lg) are now using the larger font size scale
Verify that the text remains properly aligned and spaced in all UI components
Ensure no layout shifts or overflow issues are introduced by the larger text sizes

Testing the Text component in Storybook:

Run Storybook with yarn storybook or open the build linked in this PR.
Navigate to the Text component’s Variant story.
Resize the window to confirm that the "body" variants maintain their size regardless of window dimensions.

Screenshots/Recordings

Before

Navigating around the extension in popup view using a base 14px font size

before720.mov

Text component in Storybook all "body" variants change sizes in smaller/larger viewports

beforesb720.mov

After

Navigating around the extension resize Text components work as expected

after720.mov

Text component in Storybook all "body" variants stay the same size regardless of window size

aftersb720.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
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.

github-actions · 2025-04-01T17:05:01Z

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.

socket-security · 2025-04-01T17:06:27Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub ↗.

	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@metamask/[email protected] ⏵ 7.0.0	⁺¹			⁺²

View full report ↗

metamaskbot · 2025-04-01T20:38:10Z

✨ Files requiring CODEOWNER review ✨

🎨 @MetaMask/design-system-engineers

ui/components/component-library/text/text.scss

🫰 @MetaMask/snaps-devs

test/e2e/snaps/test-snap-ethprovider.spec.js
test/e2e/snaps/test-snap-revoke-perm.spec.js

🖥️ @MetaMask/wallet-ux

ui/css/design-system/_typography.scss

.storybook/metamask-storybook-theme.js

package.json

ui/components/component-library/text/text.scss

ui/pages/error-page/index.scss

georgewrmarshall · 2025-04-01T21:02:44Z

.storybook/metamask-storybook-theme.js

@@ -2,5 +2,5 @@
 export const metamaskStorybookTheme = {
  brandTitle: 'MetaMask Storybook',
  // Typography
-  fontBase: 'var(--font-family-sans)',
+  fontBase: 'var(--font-family-default)', // from @metamask/design-tokens stylesheet


Replacing removed --font-family-sans with --font-family-default as per the migration guide

Have also done a check to ensure there are no remaining instances of --font-family-sans in the codebase

georgewrmarshall · 2025-04-01T21:03:28Z

package.json

@@ -265,7 +265,7 @@
    "@metamask/browser-passworder": "^4.3.0",
    "@metamask/contract-metadata": "^2.5.0",
    "@metamask/controller-utils": "^11.4.0",
-    "@metamask/design-tokens": "^6.0.1",
+    "@metamask/design-tokens": "^7.0.0",


Upgrading design tokens to v7 https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-tokens/MIGRATION.md#from-version-600-to-700

georgewrmarshall · 2025-04-01T21:03:46Z

ui/css/design-system/_typography.scss

@@ -1,6 +1,6 @@
 @use "sass:map";

-$font-family: var(--font-family-sans); // --font-family-sans from @metamask/design-tokens stylesheet
+$font-family: var(--font-family-default); // from @metamask/design-tokens stylesheet


Replacing removed --font-family-sans with --font-family-default as per the migration guide

… increased font size has moved content

georgewrmarshall · 2025-04-02T18:23:42Z

test/e2e/snaps/test-snap-ethprovider.spec.js

+        // wait and scroll if necessary
+        await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
+


These e2e tests are failing because the increased font size shifts the content downward, triggering the scrollbar and button visibility, which disables the Confirm button. Unlike other snap e2e tests, this test-snap-ethprovider.spec.js and test-snap-revoke-perm.spec.js don't check for the scrollbar. Adding that check here resolves the issue.

test/e2e/snaps/test-snap-revoke-perm.spec.js

metamaskbot · 2025-04-02T18:35:22Z

Builds ready [9e3c5e6]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

UI Startup Metrics (1207 ± 72 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1207	1060	1639	72	1241	1310
			load	1050	942	1486	66	1142	982
			domContentLoaded	1043	938	1482	66	1482	978
			domInteractive	17	13	46	5	16	26
			firstPaint	715	80	1140	407	258	985
			backgroundConnect	10	6	51	6	9	10
			firstReactRender	19	15	52	5	19	23
			getState	10	4	27	6	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	824	707	1273	66	849	900
			setupStore	7	5	15	2	7	9
	Webpack	Home	uiStartup	2065	1674	2565	241	2193	2535
			load	1610	1301	1977	184	1728	1949
			domContentLoaded	1603	1297	1955	181	1724	1933
			domInteractive	18	12	73	14	14	57
			firstPaint	203	64	1709	165	258	94
			backgroundConnect	29	11	338	35	28	74
			firstReactRender	162	53	353	113	88	94
			getState	13	3	275	36	8	9
			initialActions	5	1	263	26	3	4
			loadScripts	1596	1294	1931	178	1721	1906
			setupStore	31	6	288	64	264	9
Firefox	Browserify	Home	uiStartup	1379	1184	1975	155	1407	1775
			load	1240	1071	1803	147	1275	1598
			domContentLoaded	1240	1070	1802	147	1274	1598
			domInteractive	99	40	197	26	88	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	17	105	10	25	33
			firstReactRender	22	19	46	4	23	29
			getState	7	3	20	3	7	8
			initialActions	0	0	28	3	0	1
			loadScripts	1217	1053	1767	145	1249	1576
			setupStore	6	4	17	2	6	7
	Webpack	Home	uiStartup	1568	1371	2191	178	1616	2020
			load	1353	1184	1923	161	1419	1775
			domContentLoaded	1352	1184	1923	161	1419	1775
			domInteractive	98	38	216	27	92	96
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	26	19	51	6	27	43
			firstReactRender	35	29	52	4	37	43
			getState	8	4	38	6	8	9
			initialActions	1	0	2	1	1	2
			loadScripts	1329	1162	1897	161	1393	1753
			setupStore	7	5	19	2	8	9

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0%)
ui: 174 Bytes (0%)
common: -1 Bytes (0%)

vinnyhoward

LGTM! Helpful comments as always

hmalik88

Apart from my comment, this will require a bit more time to review that the change isn't breaking any snap surfaces (I know we were using specific font sizes in at least a couple places and not sure if there was any discussion about the impact of this particular part of the redesign). Will leave another review by tomorrow.

metamaskbot · 2025-04-02T22:19:54Z

Builds ready [3634465]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

UI Startup Metrics (1168 ± 54 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1168	1069	1373	54	1204	1259
			load	1019	930	1181	47	956	995
			domContentLoaded	1013	907	1177	48	951	991
			domInteractive	16	13	42	5	15	28
			firstPaint	703	141	1181	396	261	990
			backgroundConnect	10	6	59	6	8	10
			firstReactRender	19	14	39	4	19	31
			getState	11	4	33	7	6	8
			initialActions	0	0	1	0	0	1
			loadScripts	802	693	950	48	832	881
			setupStore	7	5	18	2	7	8
	Webpack	Home	uiStartup	2095	1678	2598	235	2269	2538
			load	1644	1298	2129	187	1757	1985
			domContentLoaded	1638	1295	2124	185	1748	1965
			domInteractive	17	12	67	12	14	54
			firstPaint	189	73	382	58	230	382
			backgroundConnect	33	11	339	46	27	59
			firstReactRender	182	53	348	114	86	96
			getState	9	3	22	5	7	9
			initialActions	3	1	7	1	3	5
			loadScripts	1627	1292	1956	177	1740	1926
			setupStore	23	6	260	46	260	9
Firefox	Browserify	Home	uiStartup	1361	1154	2032	147	1391	1725
			load	1226	1044	1865	141	1266	1556
			domContentLoaded	1226	1044	1865	141	1266	1556
			domInteractive	100	35	198	29	90	96
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	17	107	11	24	34
			firstReactRender	22	18	30	3	24	27
			getState	6	4	15	2	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	1202	1027	1842	137	1242	1524
			setupStore	6	4	30	3	6	7
	Webpack	Home	uiStartup	1537	1328	2187	169	1579	1949
			load	1326	1160	1982	154	1376	1701
			domContentLoaded	1326	1160	1982	154	1376	1701
			domInteractive	97	44	182	24	91	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	18	52	6	27	43
			firstReactRender	35	28	76	6	37	44
			getState	8	4	42	6	8	9
			initialActions	0	0	2	1	1	1
			loadScripts	1303	1141	1963	153	1350	1673
			setupStore	8	5	31	5	7	9

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0%)
ui: -3 Bytes (0%)
common: -220 Bytes (0%)

metamaskbot · 2025-04-08T01:14:11Z

Builds ready [5a8f65f]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

UI Startup Metrics (1246 ± 57 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1246	1117	1361	57	1290	1343
			load	1088	936	1203	60	1147	984
			domContentLoaded	1082	930	1198	61	1142	983
			domInteractive	17	13	60	8	16	33
			firstPaint	817	150	1204	407	229	953
			backgroundConnect	10	7	29	4	9	10
			firstReactRender	21	15	142	15	20	28
			getState	13	5	33	6	7	9
			initialActions	0	0	1	0	0	1
			loadScripts	828	680	941	60	878	929
			setupStore	8	4	23	3	7	9
	Webpack	Home	uiStartup	2129	1664	2530	183	2251	2392
			load	1658	1306	1994	149	1732	1960
			domContentLoaded	1649	1303	1978	143	1726	1916
			domInteractive	17	12	70	12	14	54
			firstPaint	158	64	396	61	189	73
			backgroundConnect	35	11	391	52	35	58
			firstReactRender	163	53	371	105	61	92
			getState	18	4	309	42	7	9
			initialActions	3	1	6	1	4	5
			loadScripts	1637	1299	1955	137	1717	1893
			setupStore	29	6	321	55	31	8
Firefox	Browserify	Home	uiStartup	1382	1189	1945	159	1442	1754
			load	1234	1065	1765	141	1311	1573
			domContentLoaded	1234	1065	1765	141	1311	1573
			domInteractive	103	38	309	41	88	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	17	52	6	25	38
			firstReactRender	23	19	62	5	24	31
			getState	13	4	221	33	8	9
			initialActions	0	0	2	0	0	1
			loadScripts	1212	1041	1728	139	1292	1545
			setupStore	6	4	30	4	6	7
	Webpack	Home	uiStartup	1532	1337	2294	171	1594	1918
			load	1318	1140	2045	159	1365	1691
			domContentLoaded	1318	1140	2044	159	1365	1691
			domInteractive	100	51	207	26	91	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	18	46	5	27	37
			firstReactRender	37	28	61	6	39	48
			getState	9	4	32	6	8	9
			initialActions	1	0	2	1	1	1
			loadScripts	1294	1119	2019	158	1342	1665
			setupStore	8	5	53	5	8	9

Bundle size diffs

background: 1 Bytes (0%)
ui: 174 Bytes (0%)
common: -1 Bytes (0%)

brianacnguyen · 2025-04-08T15:02:45Z

I have read the CLA Document and I hereby sign the CLA

metamaskbot · 2025-04-09T19:48:54Z

Builds ready [7952774]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

UI Startup Metrics (1230 ± 54 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1230	1112	1365	54	1258	1339
			load	1083	979	1215	51	1132	994
			domContentLoaded	1078	976	1209	50	1125	988
			domInteractive	17	13	33	5	16	29
			firstPaint	696	91	1218	438	221	289
			backgroundConnect	9	6	19	2	9	10
			firstReactRender	19	14	37	4	19	27
			getState	12	5	33	7	7	9
			initialActions	0	0	1	0	0	1
			loadScripts	829	731	961	48	861	917
			setupStore	7	5	18	2	7	8
	Webpack	Home	uiStartup	2269	1893	2580	171	2395	2537
			load	1818	1429	2275	173	1869	2178
			domContentLoaded	1812	1426	2272	172	1866	2175
			domInteractive	17	13	63	9	14	34
			firstPaint	162	65	326	61	271	87
			backgroundConnect	47	14	361	56	43	64
			firstReactRender	152	55	340	105	64	93
			getState	27	3	353	65	6	9
			initialActions	3	1	7	1	3	6
			loadScripts	1801	1422	2268	170	1857	2159
			setupStore	24	7	213	34	7	8
Firefox	Browserify	Home	uiStartup	1390	1214	1978	117	1444	1612
			load	1242	1088	1828	115	1298	1466
			domContentLoaded	1242	1088	1828	115	1297	1465
			domInteractive	103	38	210	28	91	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	17	60	8	25	49
			firstReactRender	23	19	54	5	23	32
			getState	7	4	17	2	8	9
			initialActions	0	0	1	0	0	1
			loadScripts	1219	1059	1806	115	1274	1442
			setupStore	9	4	232	23	6	8
	Webpack	Home	uiStartup	1539	1349	1837	112	1618	1776
			load	1330	1167	1597	106	1421	1555
			domContentLoaded	1330	1167	1597	106	1421	1554
			domInteractive	95	36	215	27	90	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	18	80	8	26	39
			firstReactRender	35	27	55	5	38	43
			getState	9	3	32	6	8	9
			initialActions	0	0	2	1	1	1
			loadScripts	1308	1146	1574	106	1399	1532
			setupStore	8	5	23	3	8	9

metamaskbot · 2025-04-09T19:52:23Z

Builds ready [7952774]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

UI Startup Metrics (1224 ± 62 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1224	1091	1504	62	1260	1323
			load	1070	956	1259	53	1133	993
			domContentLoaded	1065	947	1256	53	1129	989
			domInteractive	16	13	44	5	16	28
			firstPaint	705	71	1143	421	249	977
			backgroundConnect	9	6	26	2	9	10
			firstReactRender	21	15	47	7	20	41
			getState	13	5	35	8	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	818	700	988	51	844	886
			setupStore	8	4	27	3	7	9
	Webpack	Home	uiStartup	2133	1694	2562	184	2266	2380
			load	1672	1306	2040	161	1763	1968
			domContentLoaded	1666	1301	2035	160	1759	1961
			domInteractive	17	12	66	12	14	55
			firstPaint	169	61	394	68	261	87
			backgroundConnect	37	10	352	50	323	61
			firstReactRender	161	53	359	107	60	93
			getState	25	3	323	60	7	9
			initialActions	3	1	8	1	3	5
			loadScripts	1657	1296	2004	156	1752	1930
			setupStore	19	6	200	20	52	8
Firefox	Browserify	Home	uiStartup	1347	1157	1730	121	1410	1594
			load	1210	1024	1613	120	1268	1462
			domContentLoaded	1209	1024	1613	120	1268	1462
			domInteractive	99	37	199	29	90	98
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	16	65	10	24	51
			firstReactRender	21	18	40	3	21	30
			getState	7	3	36	4	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	1187	1007	1594	119	1246	1439
			setupStore	7	4	64	6	6	7
	Webpack	Home	uiStartup	1516	1357	1871	108	1568	1770
			load	1303	1150	1626	103	1351	1555
			domContentLoaded	1302	1150	1625	103	1351	1555
			domInteractive	92	42	175	22	88	96
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	28	18	311	29	26	39
			firstReactRender	36	27	79	7	38	48
			getState	9	4	33	6	8	9
			initialActions	1	0	4	1	1	1
			loadScripts	1277	1128	1553	98	1325	1500
			setupStore	8	5	47	5	7	9

hmalik88

LGTM, checked all snap surfaces that use Text.

georgewrmarshall added the team-design-system All issues relating to design system in Extension label Apr 1, 2025

georgewrmarshall self-assigned this Apr 1, 2025

georgewrmarshall changed the title ~~chore: upgrading design tokens and default font size to 16px~~ chore: changing default font size 14px => 16px Apr 1, 2025

georgewrmarshall force-pushed the fix/font-size-increase branch from 66b28b3 to 2986273 Compare April 1, 2025 20:36

georgewrmarshall force-pushed the fix/font-size-increase branch from 2986273 to dfc7ea2 Compare April 1, 2025 20:41