test: use mockTheme instead of hardcoded hex values in test assertions (#26657)

## **Description**

This PR updates test files to use design token references instead of
hardcoded hex values, unblocking the design tokens upgrade to v8.2.1
(#26639).

**What this PR does:**
- Replaces hardcoded color hex values with `mockTheme.colors.*`
references in test assertions
- Uses `brandColor.*` for static, non-theme-dependent colors (camera
overlay)
- Updates snapshots to reflect new design token values
- Fixes template interpolation in inline snapshots

**Why this is an improvement:**
- Makes tests resilient to design token value changes
- Ensures tests validate correct token usage rather than specific hex
values
- Aligns with design system best practices

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Dependency of: #26639
Related: #26651

## **Manual testing steps**

```gherkin
Scenario: Verify all updated tests pass
  Given the repository with design tokens v8.2.1
  When I run the following test files:
    | Test File |
    | app/components/Snaps/SnapUIRenderer/components/input.test.ts |
    | app/components/UI/Bridge/components/TransactionDetails/BridgeStepDescription.test.tsx |
    | app/components/UI/Card/components/Onboarding/VerifyIdentity.test.tsx |
    | app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx |
    | app/components/UI/Rewards/hooks/useRewardsToast.test.tsx |
    | app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx |
  Then all tests should pass
  And snapshots should match expected values
```

## **Screenshots/Recordings**

N/A - Test-only changes

## **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/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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I've properly set the pull request status:
  - [x] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Test-only changes that update assertions to reference theme tokens,
reducing brittleness during design-token updates. Low risk aside from
potential snapshot/assertion adjustments if token mappings differ.
> 
> **Overview**
> Updates several UI/unit tests to assert against theme design tokens
(via `mockTheme.colors.*`) instead of hardcoded hex values, including
Snap UI input borders, Bridge step text colors, Earn navbar background,
and Rewards toast icon colors.
> 
> Adjusts tests that relied on inline snapshots/mocked theme shapes by
switching to token-backed assertions (and using `brandColors` for static
camera overlay colors in Veriff branding) to keep tests resilient to
design-token value changes.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
04dc67e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: georgewrmarshall

app/components/Snaps/SnapUIRenderer/components/input.test.ts

@@ -2,6 +2,7 @@ import { renderInterface } from '../testUtils';
 import { Input, Box, Form } from '@metamask/snaps-sdk/jsx';
 import { fireEvent } from '@testing-library/react-native';
 import { TEXTFIELD_TEST_ID } from '../../../../component-library/components/Form/TextField/TextField.constants';
+import { mockTheme } from '../../../../util/theme';
 
 jest.mock('../../../../core/Engine/Engine', () => ({
   controllerMessenger: {
@@ -15,8 +16,8 @@ jest.mock('../../../../core/Engine/Engine', () => ({
 }));
 
 describe('SnapUIInput', () => {
-  const clearBorderColor = '#b7bbc866';
-  const focusedBorderColor = '#b7bbc8';
+  const clearBorderColor = mockTheme.colors.border.muted;
+  const focusedBorderColor = mockTheme.colors.border.default;
 
   beforeEach(() => {
     jest.resetAllMocks();

app/components/UI/Bridge/components/TransactionDetails/BridgeStepDescription.test.tsx

@@ -13,6 +13,7 @@ import {
   CHAIN_IDS,
 } from '@metamask/transaction-controller';
 import { fontStyles } from '../../../../../styles/common';
+import { mockTheme } from '../../../../../util/theme';
 
 describe('BridgeStepDescription', () => {
   const mockStep = {
@@ -142,7 +143,10 @@ describe('BridgeStepDescription', () => {
     );
 
     const textElement = getByText(/ETH/);
-    expect(textElement.props.style).toHaveProperty('color', '#686e7d');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.alternative,
+    );
   });
 
   it('should render bridge action with COMPLETE status text', () => {
@@ -155,7 +159,10 @@ describe('BridgeStepDescription', () => {
 
     expect(getByText(/ETH/)).toBeTruthy();
     const textElement = getByText(/ETH/);
-    expect(textElement.props.style).toHaveProperty('color', '#121314');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.default,
+    );
     expect(textElement.props.style).toHaveProperty(
       'fontFamily',
       fontStyles.normal.fontFamily,
@@ -173,7 +180,10 @@ describe('BridgeStepDescription', () => {
     expect(getByText(/ETH/)).toBeTruthy();
     expect(getByText(/USDC/)).toBeTruthy();
     const textElement = getByText(/ETH/);
-    expect(textElement.props.style).toHaveProperty('color', '#121314');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.default,
+    );
     expect(textElement.props.style).toHaveProperty(
       'fontFamily',
       fontStyles.normal.fontFamily,
@@ -192,7 +202,10 @@ describe('BridgeStepDescription', () => {
     expect(getByText(/10:00 AM/)).toBeTruthy();
     expect(getByText(/ETH/)).toBeTruthy();
     const textElement = getByText(/ETH/);
-    expect(textElement.props.style).toHaveProperty('color', '#121314');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.default,
+    );
     expect(textElement.props.style).toHaveProperty(
       'fontFamily',
       fontStyles.normal.fontFamily,
@@ -213,7 +226,10 @@ describe('BridgeStepDescription', () => {
     );
 
     const textElement = getByText(/ETH/);
-    expect(textElement.props.style).toHaveProperty('color', '#121314');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.default,
+    );
     expect(textElement.props.style).toHaveProperty(
       'fontFamily',
       fontStyles.medium.fontFamily,
@@ -234,7 +250,10 @@ describe('BridgeStepDescription', () => {
     );
 
     const textElement = getByText(/ETH/);
-    expect(textElement.props.style).toHaveProperty('color', '#121314');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.default,
+    );
     expect(textElement.props.style).toHaveProperty(
       'fontFamily',
       fontStyles.medium.fontFamily,
@@ -283,7 +302,10 @@ describe('BridgeStepDescription', () => {
     expect(getByText(/ETH/)).toBeTruthy();
     expect(getByText(/USDC/)).toBeTruthy();
     const textElement = getByText(/ETH/);
-    expect(textElement.props.style).toHaveProperty('color', '#686e7d');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.alternative,
+    );
     expect(textElement.props.style).toHaveProperty(
       'fontFamily',
       fontStyles.normal.fontFamily,
@@ -297,7 +319,10 @@ describe('BridgeStepDescription', () => {
 
     expect(getByText(/ETH/)).toBeTruthy();
     const textElement = getByText(/ETH/);
-    expect(textElement.props.style).toHaveProperty('color', '#686e7d');
+    expect(textElement.props.style).toHaveProperty(
+      'color',
+      mockTheme.colors.text.alternative,
+    );
     expect(textElement.props.style).toHaveProperty(
       'fontFamily',
       fontStyles.normal.fontFamily,

app/components/UI/Card/components/Onboarding/VerifyIdentity.test.tsx

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import VeriffSdk from '@veriff/react-native-sdk';
+import { mockTheme } from '../../../../../util/theme';
 import VerifyIdentity from './VerifyIdentity';
 import Routes from '../../../../../constants/navigation/Routes';
 import useStartVerification from '../../hooks/useStartVerification';
@@ -463,8 +464,8 @@ describe('VerifyIdentity Component', () => {
             success: expect.any(String),
             buttonRadius: 12,
             // Camera overlay colors are static — always dark + white text
-            cameraOverlay: '#121314',
-            onCameraOverlay: '#ffffff',
+            cameraOverlay: mockTheme.brandColors.grey900,
+            onCameraOverlay: mockTheme.brandColors.grey000,
           }),
         });
       });

app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx

@@ -1,4 +1,5 @@
 import { LendingMarketWithPosition } from '@metamask/earn-controller';
+import { mockTheme } from '../../../../../util/theme';
 import { useRoute } from '@react-navigation/native';
 import { act, fireEvent } from '@testing-library/react-native';
 import React from 'react';
@@ -234,7 +235,7 @@ describe('EarnLendingWithdrawalConfirmationView', () => {
       expect.any(Object), // theme.colors
       {
         hasCancelButton: false,
-        backgroundColor: '#f3f5f9',
+        backgroundColor: mockTheme.colors.background.alternative,
       },
       {
         backButtonEvent: {

app/components/UI/Rewards/hooks/useRewardsToast.test.tsx

@@ -1,6 +1,7 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 import { useContext } from 'react';
 import { notificationAsync, NotificationFeedbackType } from 'expo-haptics';
+import { mockTheme } from '../../../../util/theme';
 import useRewardsToast, { RewardsToastOptions } from './useRewardsToast';
 import {
   ToastVariants,
@@ -32,25 +33,13 @@ jest.mock('../../../../../locales/i18n', () => ({
   }),
 }));
 
-jest.mock('../../../../util/theme', () => ({
-  useAppThemeFromContext: () => ({
-    colors: {
-      primary: {
-        default: '#4459ff',
-        muted: '#4459ff1a',
-      },
-      background: {
-        muted: '#3c4d9d0f',
-      },
-      success: {
-        default: '#457a39',
-      },
-      error: {
-        default: '#ca3542',
-      },
-    },
-  }),
-}));
+jest.mock('../../../../util/theme', () => {
+  const actualTheme = jest.requireActual('../../../../util/theme');
+  return {
+    ...actualTheme,
+    useAppThemeFromContext: () => actualTheme.mockTheme,
+  };
+});
 
 describe('useRewardsToast', () => {
   let mockShowToast: jest.Mock;
@@ -107,7 +96,7 @@ describe('useRewardsToast', () => {
       expect(config).toMatchObject({
         variant: ToastVariants.Icon,
         iconName: IconName.Confirmation,
-        iconColor: '#457a39',
+        iconColor: mockTheme.colors.success.default,
         backgroundColor: 'transparent',
         hapticsType: NotificationFeedbackType.Success,
         hasNoTimeout: false,
@@ -131,7 +120,7 @@ describe('useRewardsToast', () => {
       expect(config).toMatchObject({
         variant: ToastVariants.Icon,
         iconName: IconName.Confirmation,
-        iconColor: '#457a39',
+        iconColor: mockTheme.colors.success.default,
         backgroundColor: 'transparent',
         hapticsType: NotificationFeedbackType.Success,
         hasNoTimeout: false,
@@ -154,7 +143,7 @@ describe('useRewardsToast', () => {
       expect(config).toMatchObject({
         variant: ToastVariants.Icon,
         iconName: IconName.Danger,
-        iconColor: '#ca3542',
+        iconColor: mockTheme.colors.error.default,
         backgroundColor: 'transparent',
         hapticsType: NotificationFeedbackType.Error,
         hasNoTimeout: false,
@@ -178,7 +167,7 @@ describe('useRewardsToast', () => {
       expect(config).toMatchObject({
         variant: ToastVariants.Icon,
         iconName: IconName.Danger,
-        iconColor: '#ca3542',
+        iconColor: mockTheme.colors.error.default,
         backgroundColor: 'transparent',
         hapticsType: NotificationFeedbackType.Error,
         hasNoTimeout: false,

app/components/Views/confirmations/components/UI/info-row-divider/info-row-divider.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { mockTheme } from '../../../../../../util/theme';
 import { stakingDepositConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import InfoRowDivider from './info-row-divider';
@@ -9,18 +10,16 @@ describe('InfoRowDivider', () => {
       state: stakingDepositConfirmationState,
     });
 
-    expect(toJSON()).toMatchInlineSnapshot(`
-      <View
-        style={
-          {
-            "backgroundColor": "#b7bbc866",
-            "height": 1,
-            "marginLeft": -8,
-            "marginRight": -8,
-            "marginVertical": 8,
-          }
-        }
-      />
-    `);
+    const result = toJSON();
+    expect(result).toBeTruthy();
+    if (result && !Array.isArray(result)) {
+      expect(result.props.style).toEqual({
+        backgroundColor: mockTheme.colors.border.muted,
+        height: 1,
+        marginLeft: -8,
+        marginRight: -8,
+        marginVertical: 8,
+      });
+    }
   });
 });