refactor: update brandColors to be imported from design system

[brianacnguyen]

Description

This PR updates the brand color usage to be imported from the design-tokens repo. Additionally, it updates all existing instances of brand color usage (mainly QR codes and switches) to align with the schema defined in the design-tokens. This change ensures that the application consistently uses the brand colors specified by the design system, improving maintainability and visual coherence across the application.

Related issues

Fixes: #9874

Manual testing steps

1. Go to settings
2. Check out the switches
3. See white color still works

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-06-05.at.13.21.41.mp4

Pre-merge author checklist

• I’ve followed MetaMask 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 (see labeling guidelines). 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.

[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.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
7.8% Duplication on New Code

See analysis details on SonarCloud

[georgewrmarshall]

LGTM! 🚀 Will these need to be updated again for v4? For example, brandColor.white000 to brandColor.white, etc.?

• Checked for instances of removed white, black, and yellow colors ✅

Might be good to write a prefer-theme-color-object rule in our eslint plugin to limit the use of the brandColor object. I'll create an issue

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: e502e97
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/66f76a27-7936-49d0-a8b9-879e85df94c2

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[Cal-L]

LGTM from platform side!

[brianacnguyen]

LGTM! 🚀 Will these need to be updated again for v4? For example, brandColor.white000 to brandColor.white, etc.?

• Checked for instances of removed white, black, and yellow colors ✅

Might be good to write a prefer-theme-color-object rule in our eslint plugin to limit the use of the brandColor object. I'll create an issue

yes but that'll be more minor so prepping this first