test: color-no-hex mobile-core-ux batch (MetaMask#27152)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Split from MetaMask#26651 to reduce CODEOWNERS fanout.

Batch: mobile-core-ux  
Source branch: `origin/remove-static-hex-from-tests`

This batch removes brittle hardcoded hex theme values from
mobile-core-ux-owned tests and replaces them with `mockTheme` so the
tests follow the same token values as the components under test. It also
expands the `color-no-hex` ESLint rollout in `.eslintrc.js` to the
mobile-core-ux component and view folders from `CODEOWNERS`, so future
violations are caught at the team ownership boundary instead of only in
the few files touched by this PR.

The concrete updates are:
- `TransactionsFooter.test.tsx` and `AccountsMenu.test.tsx` now mock
`useTheme` from `jest.requireActual(...).mockTheme` instead of
hand-rolled hex values.
- `Transactions/index.test.tsx` now uses `mockTheme.colors` and
`mockTheme.typography` for the direct render-context tests, including
the remaining `CancelSpeedupModal` case.
- `.eslintrc.js` now enables `@metamask/design-tokens/color-no-hex` for
the relevant mobile-core-ux component/view CODEOWNERS folders such as
`Transactions`, `AccountsMenu`, and related mobile-core-ux UI surfaces.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: color-no-hex lint compliance for mobile-core-ux tests

  Scenario: developer validates the mobile-core-ux batch
    Given the mobile-core-ux test files use theme-backed values instead of hardcoded hex literals

    When the developer runs the targeted lint and unit test commands
    Then no color-no-hex violations are reported for the updated scope
    And the updated Transactions and AccountsMenu test suites pass
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

N/A

### **After**

N/A

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

<!-- Generated with the help of the pr-description AI skill -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: changes are limited to ESLint override scope and test-only
theme mocking, with no production logic changes. Main risk is unexpected
new lint failures in the newly enforced folders.
> 
> **Overview**
> Expands the `.eslintrc.js` rollout of
`@metamask/design-tokens/color-no-hex` by enabling it (as `error`) for
additional mobile-core-ux-owned UI/view directories, so new static hex
colors are caught at lint time.
> 
> Updates `TransactionsFooter.test.tsx`, `Transactions/index.test.tsx`,
and `AccountsMenu.test.tsx` to stop hardcoding hex theme values and
instead source colors/typography from `mockTheme` (and mock `useTheme`
accordingly), making tests consistent with design token values.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
bb033cb. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: georgewrmarshall

.eslintrc.js

@@ -181,20 +181,22 @@ module.exports = {
     },
     {
       files: [
-        'app/components/hooks/useIsOriginalNativeTokenSymbol/**/*.{js,jsx,ts,tsx}',
-        'app/components/hooks/useTokenBalancesController/**/*.{js,jsx,ts,tsx}',
-        'app/components/hooks/useTokenBalance.tsx',
-        'app/components/hooks/useTokensData/**/*.{js,jsx,ts,tsx}',
-        'app/components/hooks/useSafeChains.ts',
+        // @MetaMask/card
         'app/components/UI/Card/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/core-platform
         'app/components/Snaps/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/predict
         'app/components/UI/Predict/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/ramp
         'app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/rewards
         'app/components/UI/Rewards/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/perps
         'app/components/UI/Perps/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/metamask-earn
         'app/components/UI/Earn/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Stake/**/*.{js,jsx,ts,tsx}',
-        // Assets team has a large number of folder ownership areas,
+        // @MetaMask/metamask-assets
         'app/components/UI/Assets/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Tokens/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/AssetOverview/**/*.{js,jsx,ts,tsx}',
@@ -220,6 +222,26 @@ module.exports = {
         'app/components/Views/DetectedTokens/**/*.{js,jsx,ts,tsx}',
         'app/components/Views/NFTAutoDetectionModal/**/*.{js,jsx,ts,tsx}',
         'app/components/Views/NftDetails/**/*.{js,jsx,ts,tsx}',
+        // @MetaMask/mobile-core-ux
+        'app/components/Views/AccountActions/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AccountSelector/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AccountsMenu/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/AddressQRCode/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/EditAccountName/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/LockScreen/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/Login/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/MultichainTransactionsView/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/NetworkConnect/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/NetworkSelector/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/QRAccountDisplay/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/QRScanner/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/Settings/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/TermsAndConditions/**/*.{js,jsx,ts,tsx}',
+        'app/components/Views/UnifiedTransactionsView/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/MultichainTransactionListItem/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/TransactionActionModal/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/TransactionElement/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Transactions/**/*.{js,jsx,ts,tsx}',
       ],
       rules: {
         '@metamask/design-tokens/color-no-hex': 'error',

app/components/UI/Transactions/TransactionsFooter.test.tsx

@@ -4,21 +4,12 @@ import TransactionsFooter from './TransactionsFooter';
 import { strings } from '../../../../locales/i18n';
 import { NO_RPC_BLOCK_EXPLORER } from '../../../constants/network';
 
-jest.mock('../../../util/theme', () => ({
-  useTheme: () => ({
-    colors: {
-      text: {
-        default: '#24272a',
-      },
-    },
-    typography: {
-      sBodySM: {
-        fontSize: 14,
-        lineHeight: 20,
-      },
-    },
-  }),
-}));
+jest.mock('../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../util/theme');
+  return {
+    useTheme: () => mockTheme,
+  };
+});
 
 jest.mock('../../../util/networks', () => ({
   getBlockExplorerName: jest.fn(),

app/components/UI/Transactions/index.test.tsx

@@ -20,6 +20,7 @@ import { updateIncomingTransactions } from '../../../util/transaction-controller
 import Engine from '../../../core/Engine';
 import Logger from '../../../util/Logger';
 import { CancelSpeedupModal } from '../../../components/Views/confirmations/components/modals/cancel-speedup-modal';
+import { mockTheme } from '../../../util/theme';
 
 // Mock the navigation and other dependencies
 const mockNavigationPush = jest.fn();
@@ -1954,11 +1955,8 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
 
   it('should test renderLoader method directly', () => {
     instance.context = {
-      colors: {
-        background: { default: '#fff' },
-        text: { muted: '#999' },
-      },
-      typography: {},
+      colors: mockTheme.colors,
+      typography: mockTheme.typography,
     };
 
     const result = instance.renderLoader();
@@ -1967,11 +1965,8 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
 
   it('should test renderEmpty method directly', () => {
     instance.context = {
-      colors: {
-        background: { default: '#fff' },
-        text: { muted: '#999' },
-      },
-      typography: {},
+      colors: mockTheme.colors,
+      typography: mockTheme.typography,
     };
     instance.props = {
       ...defaultTestProps,
@@ -2002,13 +1997,8 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
 
   it('should test renderList method directly', () => {
     instance.context = {
-      colors: {
-        background: { default: '#fff' },
-        text: { muted: '#999' },
-        primary: { default: '#037dd6' },
-        icon: { default: '#24272a' },
-      },
-      typography: {},
+      colors: mockTheme.colors,
+      typography: mockTheme.typography,
     };
     instance.flatList = React.createRef();
     instance.state = { refreshing: false };
@@ -2033,13 +2023,8 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
 
   it('renders single CancelSpeedupModal with correct props when speed up or cancel is open', () => {
     instance.context = {
-      colors: {
-        background: { default: '#fff' },
-        text: { muted: '#999' },
-        primary: { default: '#037dd6' },
-        icon: { default: '#24272a' },
-      },
-      typography: {},
+      colors: mockTheme.colors,
+      typography: mockTheme.typography,
     };
     instance.state = {
       refreshing: false,
@@ -2083,11 +2068,8 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
 
   it('should test render method directly', () => {
     instance.context = {
-      colors: {
-        background: { default: '#fff' },
-        text: { muted: '#999' },
-      },
-      typography: {},
+      colors: mockTheme.colors,
+      typography: mockTheme.typography,
     };
     instance.state = {
       ready: true,
@@ -2209,11 +2191,8 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
 
   it('should test renderEmpty with switch network scenarios', () => {
     instance.context = {
-      colors: {
-        background: { default: '#fff' },
-        text: { muted: '#999' },
-      },
-      typography: {},
+      colors: mockTheme.colors,
+      typography: mockTheme.typography,
     };
 
     // Test when tokenChainId is different from chainId

app/components/Views/AccountsMenu/AccountsMenu.test.tsx

@@ -30,20 +30,12 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 
-jest.mock('../../../util/theme', () => ({
-  useTheme: () => ({
-    colors: {
-      background: {
-        default: '#FFFFFF',
-        alternative: '#F2F4F6',
-      },
-      text: {
-        default: '#24272A',
-        alternative: '#6A737D',
-      },
-    },
-  }),
-}));
+jest.mock('../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../util/theme');
+  return {
+    useTheme: () => mockTheme,
+  };
+});
 
 const mockTrackEvent = jest.fn();
 const mockCreateEventBuilder = jest.fn(() => ({