test: color-no-hex ramp (MetaMask#27030)

## **Description**

This PR is the Ramp-only split of the `color-no-hex` batch work,
extracted from the original umbrella PR MetaMask#26651.

Scope:
- Ramp files only (`app/components/UI/Ramp/**`)
- temporary eslint rollout override for
`app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}`
- includes replacing straightforward mock color suppressions in
`DepositProgressBar` test with `mockTheme`

Reference PR: MetaMask#26651

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: color-no-hex ramp batch

  Scenario: validate ramp lint and tests
    Given this branch is checked out
    When running eslint for Ramp scope
    Then there are no lint errors

    When running jest for Ramp scope with snapshot updates
    Then tests pass
```

## **Screenshots/Recordings**

### **Before**
N/A (test/lint/config updates only)

### **After**
N/A (test/lint/config updates only)

## **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
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: changes are limited to ESLint override scope and test-only
theme mocks/assertions, with no production logic changes aside from a
local lint-disable comment on an SVG component.
> 
> **Overview**
> **Enables `@metamask/design-tokens/color-no-hex` enforcement for
`app/components/UI/Ramp/**`** via an ESLint override, as part of the
incremental rollout.
> 
> Updates multiple Ramp tests to stop using hardcoded hex colors by
reusing `util/theme`'s `mockTheme` (including `DepositProgressBar`,
`DepositTextField`, `generateThemeParameters`, `PaymentMethodSelector`,
`BankDetails`, and `useTransakRouting`), and adds a targeted file-level
lint disable in `ShapesBackgroundAnimation` where the SVG uses fixed
brand colors without token equivalents.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ff93cb5. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: georgewrmarshall

.eslintrc.js

@@ -121,6 +121,7 @@ module.exports = {
         'app/components/UI/Card/**/*.{js,jsx,ts,tsx}',
         'app/components/Snaps/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Predict/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Rewards/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Perps/**/*.{js,jsx,ts,tsx}',
       ],

app/components/UI/Ramp/Aggregator/components/PaymentMethodSelector.test.tsx

@@ -11,14 +11,12 @@ const defaultState = {
   },
 };
 
-jest.mock('../../../../../util/theme', () => ({
-  useTheme: jest.fn().mockReturnValue({
-    colors: {
-      icon: { default: '#000' },
-      border: { muted: '#ccc' },
-    },
-  }),
-}));
+jest.mock('../../../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../../../util/theme');
+  return {
+    useTheme: jest.fn().mockReturnValue(mockTheme),
+  };
+});
 
 const mockProps = {
   name: 'Debit or Credit',

app/components/UI/Ramp/Aggregator/components/ShapesBackgroundAnimation/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @metamask/design-tokens/color-no-hex -- SVG illustration uses hardcoded brand colors without design token equivalents */
 import React, { useEffect } from 'react';
 import { Animated, Easing, StyleSheet } from 'react-native';
 import Svg, { Path, LinearGradient, Stop, Defs } from 'react-native-svg';

app/components/UI/Ramp/Deposit/components/DepositProgressBar/DepositProgessBar.test.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import DepositProgressBar from './DepositProgressBar';
+import { mockTheme } from '../../../../../../util/theme';
 
-const COMPLETED_COLOR = '#007BFF';
-const CURRENT_COLOR = '#28A745';
-const TODO_COLOR = '#E5E5E5';
+const mockCompletedColor = mockTheme.colors.primary.default;
+const mockCurrentColor = mockTheme.colors.success.default;
+const mockTodoColor = mockTheme.colors.border.muted;
 
 jest.mock('../../../../../../component-library/hooks', () => ({
   useStyles: jest.fn(() => ({
     styles: {
       container: { flexDirection: 'row', paddingVertical: 12 },
       step: { height: 5, flex: 1, borderRadius: 10 },
-      completedStep: { backgroundColor: COMPLETED_COLOR },
-      currentStep: { backgroundColor: CURRENT_COLOR },
-      todoStep: { backgroundColor: TODO_COLOR },
+      completedStep: { backgroundColor: mockCompletedColor },
+      currentStep: { backgroundColor: mockCurrentColor },
+      todoStep: { backgroundColor: mockTodoColor },
       stepGap: { marginRight: 10 },
     },
   })),
@@ -41,19 +42,19 @@ describe('DepositProgressBar', () => {
     const step4 = getByTestId('deposit-progress-step-4');
 
     expect(JSON.stringify(step0.props.style)).toContain(
-      `"backgroundColor":"${COMPLETED_COLOR}"`,
+      `"backgroundColor":"${mockCompletedColor}"`,
     );
     expect(JSON.stringify(step1.props.style)).toContain(
-      `"backgroundColor":"${COMPLETED_COLOR}"`,
+      `"backgroundColor":"${mockCompletedColor}"`,
     );
     expect(JSON.stringify(step2.props.style)).toContain(
-      `"backgroundColor":"${CURRENT_COLOR}"`,
+      `"backgroundColor":"${mockCurrentColor}"`,
     );
     expect(JSON.stringify(step3.props.style)).toContain(
-      `"backgroundColor":"${TODO_COLOR}"`,
+      `"backgroundColor":"${mockTodoColor}"`,
     );
     expect(JSON.stringify(step4.props.style)).toContain(
-      `"backgroundColor":"${TODO_COLOR}"`,
+      `"backgroundColor":"${mockTodoColor}"`,
     );
   });
 

app/components/UI/Ramp/Deposit/components/DepositTextField/DepositTextField.test.tsx

@@ -7,16 +7,12 @@ import Text, {
   TextVariant,
 } from '../../../../../../component-library/components/Texts/Text';
 import TextField from '../../../../../../component-library/components/Form/TextField';
+import { mockTheme } from '../../../../../../util/theme';
+import { AppThemeKey, Theme } from '../../../../../../util/theme/models';
 
 const DEPOSIT_FIELD_TEST_ID = 'deposit-field-test-id';
 
-const mockTheme = {
-  colors: {
-    text: { muted: '#888888' },
-    error: { default: '#FF0000' },
-  },
-  themeAppearance: 'light',
-};
+let mockCurrentTheme: Theme = mockTheme;
 
 const defaultProps = {
   label: 'Test Label',
@@ -30,11 +26,15 @@ jest.mock('../../../../../hooks/useStyles', () => ({
       label: {},
       error: {},
     },
-    theme: mockTheme,
+    theme: mockCurrentTheme,
   }),
 }));
 
 describe('DepositTextField', () => {
+  beforeEach(() => {
+    mockCurrentTheme = mockTheme;
+  });
+
   it('should render default settings correctly', () => {
     const wrapper = shallow(<DepositTextField {...defaultProps} />);
     expect(wrapper).toMatchSnapshot();
@@ -57,6 +57,20 @@ describe('DepositTextField', () => {
     );
   });
 
+  it('should use dark keyboard appearance in dark theme', () => {
+    mockCurrentTheme = {
+      ...mockTheme,
+      themeAppearance: AppThemeKey.dark,
+    };
+
+    const wrapper = shallow(<DepositTextField {...defaultProps} />);
+    const textFieldComponent = wrapper.find(TextField);
+
+    expect(textFieldComponent.prop('keyboardAppearance')).toBe(
+      AppThemeKey.dark,
+    );
+  });
+
   it('should render error text when error prop is provided', () => {
     const errorMessage = 'This is an error message';
     const wrapper = shallow(

app/components/UI/Ramp/Deposit/utils/utils.test.ts

@@ -11,7 +11,8 @@ import {
 } from '../../../../../constants/on-ramp';
 import { DepositOrder, DepositOrderType } from '@consensys/native-ramps-sdk';
 import { strings } from '../../../../../../locales/i18n';
-import { darkTheme, lightTheme } from '@metamask/design-tokens';
+import { darkTheme } from '@metamask/design-tokens';
+import { mockTheme } from '../../../../../util/theme';
 import { AppThemeKey } from '../../../../../util/theme/models';
 import { MOCK_ETH_TOKEN } from '../testUtils/constants';
 
@@ -212,9 +213,15 @@ describe('hasDepositOrderField', () => {
 });
 
 describe('generateThemeParameters', () => {
+  const mockDarkTheme = {
+    ...mockTheme,
+    colors: darkTheme.colors,
+    themeAppearance: AppThemeKey.dark,
+  };
+
   it('should generate correct theme parameters for light mode', () => {
     const themeAppearance = AppThemeKey.light;
-    const colors = lightTheme.colors;
+    const colors = mockTheme.colors;
     const result = generateThemeParameters(themeAppearance, colors);
     expect(result).toEqual({
       themeColor: colors.primary.default,
@@ -242,7 +249,7 @@ describe('generateThemeParameters', () => {
 
   it('should generate correct theme parameters for dark mode', () => {
     const themeAppearance = AppThemeKey.dark;
-    const colors = darkTheme.colors;
+    const colors = mockDarkTheme.colors;
     const result = generateThemeParameters(themeAppearance, colors);
     expect(result).toEqual({
       themeColor: colors.primary.default,

app/components/UI/Ramp/Views/NativeFlow/BankDetails.test.tsx

@@ -49,15 +49,13 @@ jest.mock('../../../../../util/navigation/navUtils', () => ({
   }),
 }));
 
-jest.mock('../../../../../util/theme', () => ({
-  ...jest.requireActual('../../../../../util/theme'),
-  useTheme: () => ({
-    colors: {
-      primary: { default: '#0376C9' },
-      icon: { default: '#6A737D' },
-    },
-  }),
-}));
+jest.mock('../../../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../../../util/theme');
+  return {
+    ...jest.requireActual('../../../../../util/theme'),
+    useTheme: () => mockTheme,
+  };
+});
 
 const mockGetOrder = jest.fn();
 const mockConfirmPayment = jest.fn();

app/components/UI/Ramp/hooks/useTransakRouting.test.ts

@@ -25,15 +25,12 @@ jest.mock('./useRampAccountAddress', () => ({
   default: () => MOCK_WALLET_ADDRESS,
 }));
 
-jest.mock('../../../../util/theme', () => ({
-  useTheme: () => ({
-    themeAppearance: 'light',
-    colors: {
-      primary: { default: '#0376C9' },
-      background: { default: '#FFFFFF' },
-    },
-  }),
-}));
+jest.mock('../../../../util/theme', () => {
+  const { mockTheme } = jest.requireActual('../../../../util/theme');
+  return {
+    useTheme: () => mockTheme,
+  };
+});
 
 jest.mock('../../../../../locales/i18n', () => ({
   strings: (key: string, params?: Record<string, unknown>) => {