chore: upgrade design tokens to v8.1 (#17392)

## **Description**

This PR updates the MetaMask design tokens from version 8.0.0 to 8.1.0,
bringing updated color values and improved visual consistency across the
entire mobile application. The update includes systematic changes to
color tokens used throughout the component library and UI elements.

### What is the improvement/solution?
- Updated `@metamask/design-tokens` dependency from `^8.0.0` to `^8.1.0`
in package.json
- Systematically updated all affected test snapshots to reflect the new
color values:
- Primary gray color updated from `#9ca1af` to `#b7bbc8` (lighter, more
accessible gray)
- Success green color updated from `#1c7e33` to `#457a39` (refined green
tone)
  - Additional color refinements for improved contrast and accessibility
- Updated snapshots across 100+ component test files to maintain test
integrity
- Maintained backward compatibility for all existing component
implementations

## **Changelog**

CHANGELOG entry: Updated design system colors for improved visual
consistency and accessibility

## **Related issues**

Fixes: N/A

## **Manual testing steps**

1. Build and run the app in both light and dark themes
2. Navigate through all major screens (Wallet, Browser, Settings, etc.)
3. Verify that all UI elements display with consistent colors

## **Screenshots/Recordings**

### **After**
<!-- Updated color values with improved accessibility and visual
consistency -->


https://github.com/user-attachments/assets/c5971d23-3010-406b-b4ce-27ff16cbb761

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.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 (all snapshots updated)
- [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-mobile/blob/main/.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.

Author: georgewrmarshall

app/component-library/components-temp/KeyValueRow/__snapshots__/KeyValueRow.test.tsx.snap

@@ -221,7 +221,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
           }
         >
           <SvgMock
-            color="#9ca1af"
+            color="#b7bbc8"
             fill="currentColor"
             height={20}
             name="Question"
@@ -311,7 +311,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with icon
           }
         >
           <SvgMock
-            color="#9ca1af"
+            color="#b7bbc8"
             fill="currentColor"
             height={20}
             name="Question"
@@ -407,7 +407,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with tool
           }
         >
           <SvgMock
-            color="#9ca1af"
+            color="#b7bbc8"
             fill="currentColor"
             height={20}
             name="Question"
@@ -484,7 +484,7 @@ exports[`KeyValueRow Prebuilt Component KeyValueRow should render text with tool
           }
         >
           <SvgMock
-            color="#9ca1af"
+            color="#b7bbc8"
             fill="currentColor"
             height={20}
             name="Question"

app/component-library/components-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentage.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`AggregatedPercentage should render correctly 1`] = `
     accessibilityRole="text"
     style={
       {
-        "color": "#1c7e33",
+        "color": "#457a39",
         "fontFamily": "Geist Medium",
         "fontSize": 16,
         "letterSpacing": 0,
@@ -28,7 +28,7 @@ exports[`AggregatedPercentage should render correctly 1`] = `
     accessibilityRole="text"
     style={
       {
-        "color": "#1c7e33",
+        "color": "#457a39",
         "fontFamily": "Geist Medium",
         "fontSize": 16,
         "letterSpacing": 0,

app/component-library/components-temp/Price/PercentageChange/__snapshots__/PercentageChange.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`PercentageChange should render correctly 1`] = `
     accessibilityRole="text"
     style={
       {
-        "color": "#1c7e33",
+        "color": "#457a39",
         "fontFamily": "Geist Medium",
         "fontSize": 14,
         "letterSpacing": 0,

app/component-library/components/Navigation/TabBar/__snapshots__/TabBar.test.tsx.snap

@@ -91,7 +91,7 @@ exports[`TabBar renders correctly 1`] = `
         }
       >
         <SvgMock
-          color="#9ca1af"
+          color="#b7bbc8"
           fill="currentColor"
           height={24}
           name="Activity"
@@ -167,7 +167,7 @@ exports[`TabBar renders correctly 1`] = `
         }
       >
         <SvgMock
-          color="#9ca1af"
+          color="#b7bbc8"
           fill="currentColor"
           height={24}
           name="Explore"
@@ -205,7 +205,7 @@ exports[`TabBar renders correctly 1`] = `
         }
       >
         <SvgMock
-          color="#9ca1af"
+          color="#b7bbc8"
           fill="currentColor"
           height={24}
           name="Setting"

app/components/Snaps/SnapUIRenderer/__snapshots__/SnapUIRenderer.test.ts.snap

@@ -910,7 +910,7 @@ exports[`SnapUIRenderer renders complex nested components 1`] = `
                       accessibilityRole="text"
                       style={
                         {
-                          "color": "#9ca1af",
+                          "color": "#b7bbc8",
                           "fontFamily": "Geist Regular",
                           "fontSize": 16,
                           "letterSpacing": 0,

app/components/UI/AccountFromToInfoCard/__snapshots__/AccountFromToInfoCard.test.tsx.snap

@@ -585,7 +585,7 @@ exports[`AccountFromToInfoCard should match snapshot 1`] = `
                   style={
                     [
                       {
-                        "color": "#1c7e33",
+                        "color": "#457a39",
                         "fontSize": 15,
                       },
                       undefined,

app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap

@@ -233,7 +233,7 @@ exports[`AddCustomToken render correctly 1`] = `
           onFocus={[Function]}
           onSubmitEditing={[Function]}
           placeholder="0x..."
-          placeholderTextColor="#9ca1af"
+          placeholderTextColor="#b7bbc8"
           returnKeyType="next"
           style={
             {

app/components/UI/AddressInputs/__snapshots__/index.test.jsx.snap

@@ -607,7 +607,7 @@ exports[`AddressInputs AddressTo should match default snapshot 1`] = `
                   style={
                     [
                       {
-                        "color": "#1c7e33",
+                        "color": "#457a39",
                         "fontSize": 15,
                       },
                       undefined,
@@ -880,7 +880,7 @@ exports[`AddressInputs AddressTo should match snapshot when layout is vertical 1
                   style={
                     [
                       {
-                        "color": "#1c7e33",
+                        "color": "#457a39",
                         "fontSize": 15,
                       },
                       undefined,

app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap

@@ -2409,7 +2409,7 @@ exports[`AssetOverview should render native balances when non evm network is sel
           accessibilityRole="text"
           style={
             {
-              "color": "#1c7e33",
+              "color": "#457a39",
               "fontFamily": "Geist Medium",
               "fontSize": 16,
               "letterSpacing": 0,

app/components/UI/AssetSearch/__snapshots__/index.test.tsx.snap

@@ -58,7 +58,7 @@ exports[`AssetSearch should render correctly 1`] = `
       onChangeText={[Function]}
       onFocus={[Function]}
       placeholder="Search Tokens"
-      placeholderTextColor="#9ca1af"
+      placeholderTextColor="#b7bbc8"
       style={
         [
           {