feat: upgrade to brand evolution colors

[georgewrmarshall]

Description

This PR updates the @metamask/design-tokens package from v5.0.0 to v5.1.0 to align with MetaMask's brand evolution color updates. The most notable change is the transition from our traditional blue to the new "blurple" color scheme, which can be seen in various UI components like toggle switches and interactive elements.

Key changes include:

1. Updating primary/default colors to the new "blurple" palette:
   • Light mode (Blue500): #0376c9 → #4459ff
   • Dark mode(Blue300): #43aefc → #8b99ff

Related issues

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

Manual testing steps

1. Pull the branch and install dependencies
2. Build and run the application locally: yarn start
3. Verify the new "blurple" color scheme appears correctly in:
   • Toggle switches
   • Primary action buttons
   • Interactive elements
   • Light and dark mode
4. Run Storybook to verify component appearances: yarn storybook
   • Specifically check the BannerAlert story for correct color implementation
5. Ensure proper contrast ratios are maintained across all color updates

Screenshots/Recordings

Before

Reviewing current colors across the extension in light and dark theme

before720.mov

BanneAlert stories

sb.before720.mov

After

Reviewing brand evolution colors across the extension in light and dark theme

after720.mov

BanneAlert stories

sb.after720.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• 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 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]

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

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/design-tokens@5.0.0 ➜ 5.1.0	None	0	293 kB	metamaskbot

View full report↗︎

[georgewrmarshall]

Upgrading design tokens from V3 release of design system monrepo

[georgewrmarshall]

Updating snapshots that use the Toggle button which uses the JS design tokens instead of the CSS variables

[metamaskbot]

Builds ready [3b9d9e5]

• 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, 8
  • 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 (2523 ± 377 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1779	3787	2412	690	332
		domContentLoaded	1662	3330	2189	545	262
		load	1793	4216	2523	785	377
		domInteractive	27	124	53	27	13
		backgroundConnect	48	1498	355	394	189
		firstReactRender	22	231	83	50	24
		getState	27	475	142	135	65
		initialActions	0	0	0	0	0
		loadScripts	1235	2673	1556	384	185
		setupStore	10	344	77	97	47
		uiStartup	2168	13043	4705	3257	1564

Bundle size diffs

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