Skip to content

Conversation

@georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Jul 17, 2025

Description

This PR upgrades the @metamask/design-tokens package from version 8.0.0 to 8.1.0 to incorporate the latest design system updates and improvements.

The upgrade includes:

  • Updated design token values, primarily affecting color specifications
  • Package dependency updates in yarn.lock
  • Snapshot test updates reflecting the new color values

This change ensures the extension stays current with the latest MetaMask design system standards.

Changelog

CHANGELOG entry: Updated design tokens to version 8.1.0 with improved color specifications

Related issues

Fixes: N/A (routine dependency upgrade)

Manual testing steps

  1. Build the extension locally
  2. Test various UI components to ensure colors appear correctly
  3. Verify no visual regressions in key user flows
  4. Test in both light and dark themes
  5. Confirm all existing functionality works as expected

Screenshots/Recordings

Before

Colors using design tokens v8.0.0

before720.mov

After

Colors using design tokens v8.1.0 (subtle color refinements)

Screen.Recording.2025-07-18.at.9.08.56.AM.mov

Pre-merge author checklist

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
Copy link
Contributor

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.

@metamaskbot metamaskbot added the team-design-system All issues relating to design system in Extension label Jul 17, 2025
@georgewrmarshall georgewrmarshall added type-enhancement area-UI Relating to the user interface. dependencies Pull requests that update a dependency file labels Jul 17, 2025
@socket-security
Copy link

socket-security bot commented Jul 17, 2025

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

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Updated@​metamask/​design-tokens@​8.0.0 ⏵ 8.1.099 +210010096 +1100

View full report

@metamaskbot
Copy link
Collaborator

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (2 files, +3 -3)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain-accounts/
        • 📁 smart-contract-account-toggle/
          • 📁 __snapshots__/
            • 📄 smart-contract-account-toggle.test.tsx.snap +1 -1
        • 📁 smart-contract-account-toggle-section/
          • 📁 __snapshots__/
            • 📄 smart-contract-account-toggle-section.test.tsx.snap +2 -2

🖥️ @MetaMask/wallet-ux (1 files, +2 -2)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain/
        • 📁 network-list-menu/
          • 📁 __snapshots__/
            • 📄 network-list-menu.test.js.snap +2 -2

@metamaskbot
Copy link
Collaborator

Builds ready [b4d9e9e]
UI Startup Metrics (1258 ± 69 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1258113315706912941351
load108298613496211241180
domContentLoaded107598113376311171172
domInteractive18144981643
firstPaint61471118543510751145
backgroundConnect2111972417213230
firstReactRender20143742230
getState1043471322
initialActions40377420
loadScripts871774112862910962
setupStore74183713
WebpackHomeuiStartup23641803261615524652537
load18641321216915919632132
domContentLoaded18581314216515919522128
domInteractive2212228301566
firstPaint1646040576197331
backgroundConnect2612283272739
firstReactRender1898939576219342
getState134230231222
initialActions11219530733
loadScripts18541310216315919472117
setupStore166229221629
FirefoxBrowserifyHomeuiStartup15511342220914416391843
load1322117815829013551513
domContentLoaded1321117715829013541513
domInteractive1143642875110318
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect281576123055
firstReactRender30226493161
getState172246381264
initialActions5021321410
loadScripts1297115715568813311491
setupStore14421033866
WebpackHomeuiStartup17021498280720017622035
load14351286185813415181755
domContentLoaded14351285185813415171755
domInteractive98323596193294
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect271775113046
firstReactRender50396665462
getState10377121225
initialActions6024124320
loadScripts14121259183213114961714
setupStore184259431044
Benchmark value 1258 exceeds gate value 1234 for chrome browserify home mean uiStartup
Benchmark value 1083 exceeds gate value 1070 for chrome browserify home mean load
Benchmark value 1076 exceeds gate value 1061 for chrome browserify home mean domContentLoaded
Benchmark value 211 exceeds gate value 10 for chrome browserify home mean backgroundConnect
Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions
Benchmark value 872 exceeds gate value 830 for chrome browserify home mean loadScripts
Benchmark value 43 exceeds gate value 41 for chrome browserify home p95 domInteractive
Benchmark value 230 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 20 exceeds gate value 1.2 for chrome browserify home p95 initialActions
Benchmark value 963 exceeds gate value 940 for chrome browserify home p95 loadScripts
Benchmark value 2364 exceeds gate value 2192 for chrome webpack home mean uiStartup
Benchmark value 1865 exceeds gate value 1711 for chrome webpack home mean load
Benchmark value 1859 exceeds gate value 1704 for chrome webpack home mean domContentLoaded
Benchmark value 22 exceeds gate value 21 for chrome webpack home mean domInteractive
Benchmark value 12 exceeds gate value 7 for chrome webpack home mean initialActions
Benchmark value 1854 exceeds gate value 1699 for chrome webpack home mean loadScripts
Benchmark value 2538 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 2133 exceeds gate value 2030 for chrome webpack home p95 load
Benchmark value 2128 exceeds gate value 2005 for chrome webpack home p95 domContentLoaded
Benchmark value 66 exceeds gate value 57 for chrome webpack home p95 domInteractive
Benchmark value 33 exceeds gate value 7 for chrome webpack home p95 initialActions
Benchmark value 2118 exceeds gate value 1970 for chrome webpack home p95 loadScripts
Benchmark value 1551 exceeds gate value 1405 for firefox browserify home mean uiStartup
Benchmark value 1322 exceeds gate value 1245 for firefox browserify home mean load
Benchmark value 1322 exceeds gate value 1239 for firefox browserify home mean domContentLoaded
Benchmark value 114 exceeds gate value 110 for firefox browserify home mean domInteractive
Benchmark value 28 exceeds gate value 25 for firefox browserify home mean backgroundConnect
Benchmark value 30 exceeds gate value 25 for firefox browserify home mean firstReactRender
Benchmark value 17 exceeds gate value 11 for firefox browserify home mean getState
Benchmark value 6 exceeds gate value 1 for firefox browserify home mean initialActions
Benchmark value 1297 exceeds gate value 1230 for firefox browserify home mean loadScripts
Benchmark value 15 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 1843 exceeds gate value 1660 for firefox browserify home p95 uiStartup
Benchmark value 1513 exceeds gate value 1495 for firefox browserify home p95 load
Benchmark value 1513 exceeds gate value 1495 for firefox browserify home p95 domContentLoaded
Benchmark value 318 exceeds gate value 195 for firefox browserify home p95 domInteractive
Benchmark value 61 exceeds gate value 55 for firefox browserify home p95 firstReactRender
Benchmark value 64 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 10 exceeds gate value 2 for firefox browserify home p95 initialActions
Benchmark value 1491 exceeds gate value 1475 for firefox browserify home p95 loadScripts
Benchmark value 66 exceeds gate value 27 for firefox browserify home p95 setupStore
Benchmark value 1702 exceeds gate value 1615 for firefox webpack home mean uiStartup
Benchmark value 1435 exceeds gate value 1380 for firefox webpack home mean load
Benchmark value 1435 exceeds gate value 1380 for firefox webpack home mean domContentLoaded
Benchmark value 28 exceeds gate value 26 for firefox webpack home mean backgroundConnect
Benchmark value 51 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 7 exceeds gate value 1 for firefox webpack home mean initialActions
Benchmark value 1413 exceeds gate value 1360 for firefox webpack home mean loadScripts
Benchmark value 18 exceeds gate value 13 for firefox webpack home mean setupStore
Benchmark value 2035 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1755 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1755 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 294 exceeds gate value 156 for firefox webpack home p95 domInteractive
Benchmark value 62 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 20 exceeds gate value 2 for firefox webpack home p95 initialActions
Benchmark value 1714 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Benchmark value 44 exceeds gate value 28 for firefox webpack home p95 setupStore
Sum of mean exceeds: 1619ms | Sum of p95 exceeds: 1757.8ms
Sum of all benchmark exceeds: 3376.8ms

Bundle size diffs [🚀 Bundle size reduced!]
  • background: -25.26 KiB (-0.46%)
  • ui: 28.45 KiB (0.38%)
  • common: 22.13 KiB (0.26%)

@georgewrmarshall georgewrmarshall changed the title Upgrade @metamask/design-tokens to v8.1.0 chore: upgrade @metamask/design-tokens to v8.1.0 Jul 17, 2025
@georgewrmarshall georgewrmarshall self-assigned this Jul 18, 2025
"@metamask/design-system-react": "^0.1.0",
"@metamask/design-system-tailwind-preset": "^0.5.0",
"@metamask/design-tokens": "^8.0.0",
"@metamask/design-tokens": "^8.1.0",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Upgrading design tokens to latest

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CTA buttons on the home screen seems to have changed. Is this intended? They look kind of weird being inconsistent in size

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm let me check. None of the changes in this PR should effect the size of a button. The changes in this upgrade of the design tokens mostly effect color and add some new typography CSS variables.

@metamaskbot
Copy link
Collaborator

Builds ready [01efb57]
UI Startup Metrics (1267 ± 77 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1267113717107713061370
load109298415407511281166
domContentLoaded108497315377611211162
domInteractive18134271639
firstPaint744166135943011101162
backgroundConnect2111992468213227
firstReactRender21144152334
getState946391027
initialActions30225314
loadScripts880775133175917958
setupStore74193814
WebpackHomeuiStartup25512103283913526472746
load20461539242317421342345
domContentLoaded20381532241917421262341
domInteractive211383161769
firstPaint1746734669230320
backgroundConnect42112675336223
firstReactRender1799442066224306
getState174209281543
initialActions11222030745
loadScripts20281528241717121192305
setupStore176222221829
FirefoxBrowserifyHomeuiStartup14821317245317115131820
load1274114116129113091455
domContentLoaded1273114116119113081454
domInteractive107375067996298
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect2615130142650
firstReactRender27206182954
getState11218923926
initialActions40819314
loadScripts1252111715898812871441
setupStore11320222745
WebpackHomeuiStartup17661540249519418352140
load14841304186513315791746
domContentLoaded14841304186513315791746
domInteractive101373866596294
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect301790133765
firstReactRender52406965564
getState183287441439
initialActions8124834321
loadScripts14591281182513015581725
setupStore15424936842
Benchmark value 1267 exceeds gate value 1234 for chrome browserify home mean uiStartup
Benchmark value 1092 exceeds gate value 1070 for chrome browserify home mean load
Benchmark value 1085 exceeds gate value 1061 for chrome browserify home mean domContentLoaded
Benchmark value 212 exceeds gate value 10 for chrome browserify home mean backgroundConnect
Benchmark value 3 exceeds gate value 1 for chrome browserify home mean initialActions
Benchmark value 881 exceeds gate value 830 for chrome browserify home mean loadScripts
Benchmark value 1370 exceeds gate value 1365 for chrome browserify home p95 uiStartup
Benchmark value 228 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 14 exceeds gate value 1.2 for chrome browserify home p95 initialActions
Benchmark value 959 exceeds gate value 940 for chrome browserify home p95 loadScripts
Benchmark value 2552 exceeds gate value 2192 for chrome webpack home mean uiStartup
Benchmark value 2046 exceeds gate value 1711 for chrome webpack home mean load
Benchmark value 2039 exceeds gate value 1704 for chrome webpack home mean domContentLoaded
Benchmark value 43 exceeds gate value 40 for chrome webpack home mean backgroundConnect
Benchmark value 12 exceeds gate value 7 for chrome webpack home mean initialActions
Benchmark value 2029 exceeds gate value 1699 for chrome webpack home mean loadScripts
Benchmark value 2747 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 2345 exceeds gate value 2030 for chrome webpack home p95 load
Benchmark value 2341 exceeds gate value 2005 for chrome webpack home p95 domContentLoaded
Benchmark value 70 exceeds gate value 57 for chrome webpack home p95 domInteractive
Benchmark value 223 exceeds gate value 90 for chrome webpack home p95 backgroundConnect
Benchmark value 45 exceeds gate value 7 for chrome webpack home p95 initialActions
Benchmark value 2305 exceeds gate value 1970 for chrome webpack home p95 loadScripts
Benchmark value 1483 exceeds gate value 1405 for firefox browserify home mean uiStartup
Benchmark value 1274 exceeds gate value 1245 for firefox browserify home mean load
Benchmark value 1274 exceeds gate value 1239 for firefox browserify home mean domContentLoaded
Benchmark value 27 exceeds gate value 25 for firefox browserify home mean backgroundConnect
Benchmark value 28 exceeds gate value 25 for firefox browserify home mean firstReactRender
Benchmark value 12 exceeds gate value 11 for firefox browserify home mean getState
Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions
Benchmark value 1252 exceeds gate value 1230 for firefox browserify home mean loadScripts
Benchmark value 11 exceeds gate value 9 for firefox browserify home mean setupStore
Benchmark value 1820 exceeds gate value 1660 for firefox browserify home p95 uiStartup
Benchmark value 298 exceeds gate value 195 for firefox browserify home p95 domInteractive
Benchmark value 26 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 14 exceeds gate value 2 for firefox browserify home p95 initialActions
Benchmark value 45 exceeds gate value 27 for firefox browserify home p95 setupStore
Benchmark value 1766 exceeds gate value 1615 for firefox webpack home mean uiStartup
Benchmark value 1484 exceeds gate value 1380 for firefox webpack home mean load
Benchmark value 1484 exceeds gate value 1380 for firefox webpack home mean domContentLoaded
Benchmark value 102 exceeds gate value 100 for firefox webpack home mean domInteractive
Benchmark value 30 exceeds gate value 26 for firefox webpack home mean backgroundConnect
Benchmark value 52 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 18 exceeds gate value 15 for firefox webpack home mean getState
Benchmark value 9 exceeds gate value 1 for firefox webpack home mean initialActions
Benchmark value 1460 exceeds gate value 1360 for firefox webpack home mean loadScripts
Benchmark value 16 exceeds gate value 13 for firefox webpack home mean setupStore
Benchmark value 2140 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1746 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1746 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 294 exceeds gate value 156 for firefox webpack home p95 domInteractive
Benchmark value 65 exceeds gate value 49 for firefox webpack home p95 backgroundConnect
Benchmark value 64 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 39 exceeds gate value 32 for firefox webpack home p95 getState
Benchmark value 21 exceeds gate value 2 for firefox webpack home p95 initialActions
Benchmark value 1725 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Benchmark value 42 exceeds gate value 28 for firefox webpack home p95 setupStore
Sum of mean exceeds: 2370ms | Sum of p95 exceeds: 2684.8ms
Sum of all benchmark exceeds: 5054.8ms

Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 38 Bytes (0%)
  • ui: 1.57 KiB (0.02%)
  • common: 15 Bytes (0%)

@georgewrmarshall georgewrmarshall requested a review from a team July 18, 2025 16:30
@georgewrmarshall georgewrmarshall marked this pull request as ready for review July 18, 2025 16:30
@georgewrmarshall georgewrmarshall requested review from a team as code owners July 18, 2025 16:30
@georgewrmarshall georgewrmarshall removed the request for review from a team July 18, 2025 16:30
@georgewrmarshall georgewrmarshall requested a review from a team July 18, 2025 20:39
@georgewrmarshall georgewrmarshall added this pull request to the merge queue Jul 19, 2025
Merged via the queue into main with commit 1e0c250 Jul 19, 2025
152 checks passed
@georgewrmarshall georgewrmarshall deleted the fix/design-tokens-8.1 branch July 19, 2025 00:40
@github-actions github-actions bot locked and limited conversation to collaborators Jul 19, 2025
@metamaskbot metamaskbot added the release-13.1.0 Issue or pull request that will be included in release 13.1.0 label Jul 19, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area-UI Relating to the user interface. dependencies Pull requests that update a dependency file release-13.1.0 Issue or pull request that will be included in release 13.1.0 team-design-system All issues relating to design system in Extension type-enhancement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants