chore: upgrading design tokens from v4.2.0 to 5.0.0 and removing unneeded css

[georgewrmarshall]

Description

This PR updates the @metamask/design-tokens package from v4.2.0 to v5.0.0 and removes the pending-colors.scss file. The error state colors (error-muted-hover and error-muted-pressed) that were previously defined locally are now available in the design tokens package.

The major version bump (v5.0.0) of design-tokens is due to breaking changes in TypeScript types, which don't affect the MetaMask extension since we don't use those type imports directly.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/4171

Manual testing steps

1. Pull down the branch and build the extension
2. Navigate to the Storybook and open the Copyable component stories
3. Test the "Sensitive" story variant:
   • Verify the hover state shows the correct error-muted-hover color
   • Verify the pressed state shows the correct error-muted-pressed color
4. Verify no visual regressions in other error states across the application

Screenshots/Recordings

No visual changes expected as this is replacing locally defined colors with the same colors from the design system package

Before

before.mov

After

after.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]

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]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/[email protected]	None	0	292 kB	metamaskbot

View full report↗︎

[georgewrmarshall]

Upgrading design tokens to v5

[georgewrmarshall]

Removing deleted file import

[georgewrmarshall]

These colors were included in the design tokens v5

[metamaskbot]

Builds ready [7524732]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1537 ± 61 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1400	1915	1544	126	61
		domContentLoaded	1373	1862	1521	120	57
		load	1382	1915	1537	127	61
		domInteractive	23	96	46	24	12
		backgroundConnect	10	60	19	15	7
		firstReactRender	14	82	44	27	13
		getState	4	42	9	10	5
		initialActions	0	0	0	0	0
		loadScripts	984	1369	1109	96	46
		setupStore	6	13	8	2	1
		uiStartup	1562	2125	1755	150	72

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 354 Bytes (0.00%)
• common: 0 Bytes (0.00%)