## **Description**

This pull request aims to upgrade the extension to [design tokens
v4](https://github.com/MetaMask/design-tokens/blob/main/MIGRATION.md#from-version-300-to-400).
This upgrade ensures the most up-to-date colors are being used that
align with design and primes the extension for the upcoming brand
evolution. Included in this PR are third-party network color CSS
variables that have been removed from the design tokens package and
renamed CSS variables for shadow. This PR is the final update from a
series of PRs that replace deprecated CSS colors that have been removed
in v4.

**Dependency PRs that should be merged before this one:**
- #24970
- #24970
- #25125
- #25124
- #25122
- #25011
- #25010
- #25083
- #24971
- #25158

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/24953?quickstart=1)


![image](https://github.com/MetaMask/metamask-extension/assets/8112138/3c5cb96b-e473-4f3a-9b9c-5aa8020c2610)

![image
(1)](https://github.com/MetaMask/metamask-extension/assets/8112138/c16d28f7-f05c-4132-8268-b3c48fe9bd4a)


## **Related issues**

Fixes: #24916

## **Manual testing steps**

Check all [removed and
changed](https://github.com/MetaMask/design-tokens/blob/main/MIGRATION.md#from-version-300-to-400)
CSS variables are no longer in the codebase:

1. Pull this branch.
2. Copy [this
script](https://gist.github.com/georgewrmarshall/1ca0d7044bfa3c91343cadbf2bd5c828)
that checks for all deprecated colors to the root of the extension.
3. Run `node searchDeprecatedTokens.js`.
4. Ensure there are no results.

Check shadows and network colors work as expected:

1. Navigate to stories that use primary and error shadows
(`ButtonPrimary`, `ButtonSecondary`, `Button` (deprecated)) as well as
network colors (`Box` BackgroundColors story).
2. Verify that shadows and network colors work as expected.
Run the extension and navigate around to ensure colors work as expected:

1. Pull this branch.
2. Run `yarn start`.
3. Navigate around the extension in light and dark mode to ensure colors
work as expected.

## **Screenshots/Recordings**

### **Before**

Checking the codebase for any existing deprecated colors returns many
results in the `develop` branch.


https://github.com/MetaMask/metamask-extension/assets/8112138/8ad23392-a0cc-4be5-8a50-12a126f5b71c


### **After**

Checking the codebase for any deprecated removed colors that could break
the UI using the provided script, after removing network colors, returns
no results.


https://github.com/MetaMask/metamask-extension/assets/8112138/3b82862d-5302-466f-bc55-bbb05a924ac0

Checking components that use updated CSS variables and newly added still
work as expected


https://github.com/MetaMask/metamask-extension/assets/8112138/b70279b9-07f3-4315-abcd-83090ca03eef

Checking extension colors are working as expected in light and dark
mode. In dark mode primary and error are a shade lighter in v4


https://github.com/MetaMask/metamask-extension/assets/8112138/d748f8cb-f2f2-4bd5-b9f4-f3bb376f22cd


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
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.