fix: replace static hex colors with design tokens in test files (#26396)

## **Description**

Resolves #14299

Replaces hardcoded hex color literals with `brandColor` and `lightTheme`
tokens from `@metamask/design-tokens` across 37 test files (~120
replacements).

### Color mappings applied

| Hex Value | Design Token |
|-----------|-------------|
| `#ffffff` / `#FFFFFF` / `#fff` / `#FFF` | `brandColor.white` |
| `#000000` / `#000` | `brandColor.black` |
| `#4459ff` | `brandColor.blue500` |
| `#ca3542` | `lightTheme.colors.error.default` |
| `#457a39` | `lightTheme.colors.success.default` |
| `#b7bbc8` | `lightTheme.colors.border.default` |
| `#686e7d` | `brandColor.grey500` |
| `#9ca1af` | `brandColor.grey300` |
| `#121314` | `brandColor.grey900` |
| `#2c3dc5` | `brandColor.blue600` |
| `#1c7e33` | `brandColor.green500` |
| `#279f41` | `brandColor.green400` |

### What was intentionally skipped

- **Hex colors inside `jest.mock()` factories** — babel-jest hoists mock
factories before imports resolve, so referencing
`brandColor`/`lightTheme` there causes `ReferenceError: The module
factory of jest.mock() is not allowed to reference any out-of-scope
variables`
- **Test expectations that verify production code output** (e.g.
`toHaveBeenCalledWith` matching exact hex strings sent by non-test code)
- **Tests specifically exercising 3-char hex format handling** (e.g.
"renders gradient with 3-character hex colors")
- **Non-color hex values** (addresses, IDs, opacity-suffixed colors like
`#b7bbc866`)
- **Colors with no exact design token match** (`#FF0000`, `#666666`,
`#2244`, `#FB4F14`, etc.)

### Scope

This PR only touches test files — no production code changes.

## **Manual testing steps**

N/A — mechanical replacement of string literals with equivalent design
token references.

## **Screenshots/Recordings**

N/A

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [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
- [x] I've properly set the title of this PR
- [x] If applicable, I've included the "Fixes #XXXX" keyword in the
description

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and round trip)
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket
- [ ] I confirm that this PR has no impact on gas, key management, or
other security-critical areas

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Test-only updates that swap hardcoded color literals for
`@metamask/design-tokens`/`mockTheme` values; low risk aside from
potential Jest mock/expectation mismatches if tokens change.
> 
> **Overview**
> Updates multiple unit tests to **stop asserting/constructing UI colors
via hardcoded hex strings** and instead reference
`@metamask/design-tokens` (`brandColor`) and the shared `mockTheme` from
`util/theme`.
> 
> Also refactors several test `useTheme` mocks to return `mockTheme`
(via `jest.requireActual`) so style/toast expectations align with the
app’s theme tokens.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
060894b. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Co-authored-by: TanayK07 <tanay.kedia07@gmail.com>

Author: TanayK07

app/component-library/providers/ThemeProvider/ThemeProvider.test.tsx

@@ -7,6 +7,7 @@ import renderWithProvider from '../../../util/test/renderWithProvider';
 
 // Internal dependencies
 import ThemeProvider from './ThemeProvider';
+import { brandColor } from '@metamask/design-tokens';
 
 describe('ThemeProvider', () => {
   it('renders children correctly', () => {
@@ -36,6 +37,6 @@ describe('ThemeProvider', () => {
       </ThemeProvider>,
     );
 
-    expect(themeValue.brandColors.black).toStrictEqual('#000000');
+    expect(themeValue.brandColors.black).toStrictEqual(brandColor.black);
   });
 });

app/components/UI/ContextualNetworkPicker/ContextualNetworkPicker.test.tsx

@@ -6,22 +6,15 @@ import renderWithProvider from '../../../util/test/renderWithProvider';
 import createStyles from './ContextualNetworkPicker.styles';
 import ContextualNetworkPicker from './ContextualNetworkPicker';
 import { BASE_DISPLAY_NAME } from '../../../core/Engine/constants';
+import { mockTheme } from '../../../util/theme';
 
-jest.mock('../../../util/theme', () => ({
-  useTheme: () => ({
-    colors: {
-      background: {
-        default: '#ffffff',
-      },
-      border: {
-        muted: '#cccccc',
-      },
-      text: {
-        default: '#000000',
-      },
-    },
-  }),
-}));
+jest.mock('../../../util/theme', () => {
+  const actual = jest.requireActual('../../../util/theme');
+  return {
+    ...actual,
+    useTheme: () => actual.mockTheme,
+  };
+});
 
 describe('ContextualNetworkPicker', () => {
   const defaultProps = {
@@ -302,40 +295,27 @@ describe('ContextualNetworkPicker', () => {
   });
 
   describe('Styles', () => {
-    const mockColors = {
-      background: {
-        default: '#ffffff',
-        alternative: '#f2f3f4',
-      },
-      border: {
-        default: '#d6d9dc',
-        muted: '#bbc0c5',
-      },
-      text: {
-        default: '#24272a',
-        alternative: '#535a61',
-      },
-    } as unknown as ThemeColors;
+    const colors = mockTheme.colors as unknown as ThemeColors;
 
     it('should create styles with enabled state (disabled=false)', () => {
-      const styles = createStyles(mockColors, false);
+      const styles = createStyles(colors, false);
 
-      expect(styles.base.borderColor).toBe(mockColors.border.default);
+      expect(styles.base.borderColor).toBe(colors.border.default);
       expect(styles.avatar.opacity).toBe(1);
       expect(styles.networkName.opacity).toBe(1);
     });
 
     it('should create styles with disabled state (disabled=true)', () => {
-      const styles = createStyles(mockColors, true);
+      const styles = createStyles(colors, true);
 
-      expect(styles.base.borderColor).toBe(mockColors.border.muted);
+      expect(styles.base.borderColor).toBe(colors.border.muted);
       expect(styles.avatar.opacity).toBe(0.5);
       expect(styles.networkName.opacity).toBe(0.5);
     });
 
     it('should create consistent static styles regardless of disabled state', () => {
-      const enabledStyles = createStyles(mockColors, false);
-      const disabledStyles = createStyles(mockColors, true);
+      const enabledStyles = createStyles(colors, false);
+      const disabledStyles = createStyles(colors, true);
 
       // These styles should be identical regardless of disabled state
       expect(enabledStyles.accountSelectorWrapper).toEqual(
@@ -346,7 +326,7 @@ describe('ContextualNetworkPicker', () => {
     });
 
     it('should return valid StyleSheet objects with all expected properties', () => {
-      const styles = createStyles(mockColors, false);
+      const styles = createStyles(colors, false);
 
       expect(styles).toHaveProperty('base');
       expect(styles).toHaveProperty('accountSelectorWrapper');

app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts

@@ -14,6 +14,7 @@ import Logger from '../../../../util/Logger';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { getUnclaimedAmountForMerklClaimTx } from '../utils/musd';
 import { MetaMetricsEvents } from '../../../../core/Analytics/MetaMetrics.events';
+import { mockTheme } from '../../../../util/theme';
 
 // Mock all external dependencies
 jest.mock('../../../../core/Engine');
@@ -95,8 +96,8 @@ describe('useMerklClaimStatus', () => {
     variant: ToastVariants.Icon as const,
     iconName: IconName.Loading,
     hasNoTimeout: true,
-    iconColor: '#000000',
-    backgroundColor: '#FFFFFF',
+    iconColor: mockTheme.colors.icon.default,
+    backgroundColor: mockTheme.colors.background.default,
     hapticsType: NotificationFeedbackType.Warning,
     labelOptions: [{ label: 'Claiming bonus', isBold: true }],
   };
@@ -105,7 +106,7 @@ describe('useMerklClaimStatus', () => {
     iconName: IconName.CheckBold,
     hasNoTimeout: false,
     iconColor: '#00FF00',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: mockTheme.colors.background.default,
     hapticsType: NotificationFeedbackType.Success,
     labelOptions: [{ label: 'Your mUSD is here!', isBold: true }],
   };
@@ -114,7 +115,7 @@ describe('useMerklClaimStatus', () => {
     iconName: IconName.CircleX,
     hasNoTimeout: false,
     iconColor: '#FF0000',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: mockTheme.colors.background.default,
     hapticsType: NotificationFeedbackType.Error,
     labelOptions: [{ label: 'Bonus claim failed', isBold: true }],
   };

app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts

@@ -71,6 +71,7 @@ import {
   TransactionPayStrategy,
   type TransactionPayQuote,
 } from '@metamask/transaction-pay-controller';
+import { mockTheme } from '../../../../util/theme';
 
 const mockTrace = trace as jest.MockedFunction<typeof trace>;
 const mockEndTrace = endTrace as jest.MockedFunction<typeof endTrace>;
@@ -123,8 +124,8 @@ describe('useMusdConversionStatus', () => {
     variant: ToastVariants.Icon as const,
     iconName: IconName.Loading,
     hasNoTimeout: true,
-    iconColor: '#000000',
-    backgroundColor: '#FFFFFF',
+    iconColor: mockTheme.colors.icon.default,
+    backgroundColor: mockTheme.colors.background.default,
     hapticsType: NotificationFeedbackType.Warning,
     labelOptions: [{ label: 'In Progress', isBold: true }],
   };
@@ -136,17 +137,17 @@ describe('useMusdConversionStatus', () => {
         variant: ToastVariants.Icon as const,
         iconName: IconName.CheckBold,
         hasNoTimeout: false,
-        iconColor: '#000000',
-        backgroundColor: '#FFFFFF',
+        iconColor: mockTheme.colors.icon.default,
+        backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Success,
         labelOptions: [{ label: 'Success', isBold: true }],
       },
       failed: {
         variant: ToastVariants.Icon as const,
         iconName: IconName.Danger,
         hasNoTimeout: false,
-        iconColor: '#000000',
-        backgroundColor: '#FFFFFF',
+        iconColor: mockTheme.colors.icon.default,
+        backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Error,
         labelOptions: [{ label: 'Failed', isBold: true }],
       },
@@ -156,26 +157,26 @@ describe('useMusdConversionStatus', () => {
         variant: ToastVariants.Icon as const,
         iconName: IconName.Loading,
         hasNoTimeout: true,
-        iconColor: '#000000',
-        backgroundColor: '#FFFFFF',
+        iconColor: mockTheme.colors.icon.default,
+        backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Warning,
         labelOptions: [{ label: 'Claiming bonus', isBold: true }],
       },
       success: {
         variant: ToastVariants.Icon as const,
         iconName: IconName.CheckBold,
         hasNoTimeout: false,
-        iconColor: '#000000',
-        backgroundColor: '#FFFFFF',
+        iconColor: mockTheme.colors.icon.default,
+        backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Success,
         labelOptions: [{ label: 'Success', isBold: true }],
       },
       failed: {
         variant: ToastVariants.Icon as const,
         iconName: IconName.Danger,
         hasNoTimeout: false,
-        iconColor: '#000000',
-        backgroundColor: '#FFFFFF',
+        iconColor: mockTheme.colors.icon.default,
+        backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Error,
         labelOptions: [{ label: 'Bonus claim failed', isBold: true }],
       },

app/components/Views/ChoosePassword/FoxRiveLoaderAnimation/index.test.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
+import { brandColor } from '@metamask/design-tokens';
+import { mockTheme } from '../../../../util/theme';
 
 // Mock useTheme hook
-const mockUseTheme = jest.fn().mockReturnValue({
-  colors: {
-    background: { default: '#FFFFFF' },
-    text: { default: '#000000' },
-  },
-  themeAppearance: 'light',
+const mockUseTheme = jest.fn().mockReturnValue(mockTheme);
+
+jest.mock('../../../../util/theme', () => {
+  const actual = jest.requireActual('../../../../util/theme');
+  return {
+    ...actual,
+    useTheme: () => mockUseTheme(),
+  };
 });
 
-// Mock dependencies
-jest.mock('../../../../util/theme', () => ({
-  useTheme: () => mockUseTheme(),
-}));
-
 // Mock ActivityIndicator
 jest.mock('react-native', () => ({
   ...jest.requireActual('react-native'),
@@ -125,8 +124,8 @@ describe('FoxRiveLoaderAnimation', () => {
     // Arrange
     mockUseTheme.mockReturnValueOnce({
       colors: {
-        background: { default: '#000000' },
-        text: { default: '#FFFFFF' },
+        background: { default: brandColor.black },
+        text: { default: brandColor.white },
       },
       themeAppearance: 'dark',
     });

app/components/Views/ManualBackupStep2/index.test.tsx

@@ -14,6 +14,7 @@ import {
   ONBOARDING_SUCCESS_FLOW,
 } from '../../../constants/onboarding';
 import { ReactTestInstance } from 'react-test-renderer';
+import { brandColor } from '@metamask/design-tokens';
 
 const mockStore = configureMockStore();
 const initialState = {
@@ -333,9 +334,11 @@ describe('ManualBackupStep2', () => {
         fireEvent.press(click);
       });
 
-      expect(missingWordItemOne.props.style.color).not.toBe('#4459ff');
-      expect(missingWordItemTwo.props.style.color).not.toBe('#4459ff');
-      expect(missingWordItemThree.props.style.color).not.toBe('#4459ff');
+      expect(missingWordItemOne.props.style.color).not.toBe(brandColor.blue500);
+      expect(missingWordItemTwo.props.style.color).not.toBe(brandColor.blue500);
+      expect(missingWordItemThree.props.style.color).not.toBe(
+        brandColor.blue500,
+      );
 
       // Press continue button
       const continueButton = wrapper.getByTestId(
@@ -549,7 +552,7 @@ describe('ManualBackupStep2', () => {
       fireEvent.press(emptySlots[0]);
       fireEvent.press(missingWordOne);
 
-      expect(missingWordOne).toHaveStyle({ borderColor: '#4459ff' });
+      expect(missingWordOne).toHaveStyle({ borderColor: brandColor.blue500 });
     });
 
     it('highlights empty slot with blue border when pressed', async () => {
@@ -579,7 +582,7 @@ describe('ManualBackupStep2', () => {
 
       fireEvent.press(emptySlots[0]);
 
-      expect(emptySlots[0]).toHaveStyle({ borderColor: '#4459ff' });
+      expect(emptySlots[0]).toHaveStyle({ borderColor: brandColor.blue500 });
     });
   });
 

app/components/hooks/useTokenLogo/useTokenLogo.test.ts

@@ -2,32 +2,19 @@ import { renderHook, act } from '@testing-library/react-native';
 import { useTokenLogo } from './useTokenLogo';
 
 // Mock useTheme hook
-const mockColors = {
-  background: { default: '#FFFFFF' },
-  text: { default: '#000000' },
-  icon: { default: '#000000' },
-  border: { muted: '#E5E7EB' },
-};
-
-const mockUseTheme = jest.fn().mockReturnValue({
-  colors: mockColors,
-  themeAppearance: 'light',
+jest.mock('../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../util/theme');
+  return {
+    useTheme: jest.fn().mockReturnValue(mockTheme),
+  };
 });
 
-jest.mock('../../../util/theme', () => ({
-  useTheme: () => mockUseTheme(),
-}));
-
 describe('useTokenLogo', () => {
   const mockAssetsRequiringLightBg = new Set(['ETH', 'XRP']);
   const mockAssetsRequiringDarkBg = new Set(['S', 'SOPH']);
 
   beforeEach(() => {
     jest.clearAllMocks();
-    mockUseTheme.mockReturnValue({
-      colors: mockColors,
-      themeAppearance: 'light',
-    });
   });
 
   describe('Initial state', () => {

app/reducers/rewards/index.test.ts

@@ -50,6 +50,7 @@ import {
   CampaignType,
 } from '../../core/Engine/controllers/rewards-controller/types';
 import { AccountGroupId } from '@metamask/account-api';
+import { brandColor } from '@metamask/design-tokens';
 
 const initialState: RewardsState = rewardsReducer(undefined, {
   type: 'unknown',
@@ -2645,7 +2646,7 @@ describe('setActiveBoosts', () => {
         icon: { lightModeUrl: 'old.png', darkModeUrl: 'old.png' },
         boostBips: 100,
         seasonLong: true,
-        backgroundColor: '#000000',
+        backgroundColor: brandColor.black,
       },
     ];
     const stateWithBoosts = {
@@ -2659,7 +2660,7 @@ describe('setActiveBoosts', () => {
         icon: { lightModeUrl: 'new.png', darkModeUrl: 'new.png' },
         boostBips: 2000,
         seasonLong: false,
-        backgroundColor: '#FFFFFF',
+        backgroundColor: brandColor.white,
       },
     ];
     const action = setActiveBoosts(newBoosts);