Skip to content

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

Merged
georgewrmarshall merged 1 commit intoMetaMask:mainfrom
TanayK07:fix/replace-hex-colors-with-design-tokens-14299
Mar 20, 2026
Merged

fix: replace static hex colors with design tokens in test files#26396
georgewrmarshall merged 1 commit intoMetaMask:mainfrom
TanayK07:fix/replace-hex-colors-with-design-tokens-14299

Conversation

@TanayK07
Copy link
Copy Markdown
Contributor

@TanayK07 TanayK07 commented Feb 22, 2026 •
edited by cursor bot
Loading

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, #002244, #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

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable
  • I've documented my code using JSDoc format if applicable
  • I've applied the right labels on the PR
  • I've properly set the title of this PR
  • 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

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.

Written by Cursor Bugbot for commit 060894b. This will update automatically on new commits. Configure here.

@TanayK07 TanayK07 requested review from a team as code owners February 22, 2026 09:34
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 22, 2026

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@TanayK07
Copy link
Copy Markdown
Contributor Author

TanayK07 commented Mar 11, 2026

Resolved merge conflicts with main — most of the hex-to-token replacements were already done upstream using mockTheme, so those are accepted. The remaining 15 files have unique changes not yet in main.

@georgewrmarshall could you take a look when you get a chance? You opened the original issue (#14299) so you'd be the best person to review. cc @wachunei

cursor[bot]
cursor bot reviewed Mar 11, 2026
View reviewed changes
wachunei
wachunei reviewed Mar 11, 2026
View reviewed changes
@wachunei
Copy link
Copy Markdown
Member

wachunei commented Mar 11, 2026

Resolved merge conflicts with main — most of the hex-to-token replacements were already done upstream using mockTheme, so those are accepted. The remaining 15 files have unique changes not yet in main.

@georgewrmarshall could you take a look when you get a chance? You opened the original issue (#14299) so you'd be the best person to review. cc @wachunei

I started reviewing but I'm noticing some unrelated changes, are those intended?

@TanayK07
Copy link
Copy Markdown
Contributor Author

TanayK07 commented Mar 11, 2026

Thanks for catching that @wachunei! The unrelated analytics/production changes (ExperienceEnhancerModal, BlockaidSettings, MetaMetricsAndDataCollectionSection, UserProfileAnalyticsMetaData types) were accidentally included from a shared branch base with PR #26792.

I've reverted all of them — this PR now only touches 8 test files with hex color → design token replacements, zero production code changes. Also moved the brandColor import to the top in FoxRiveLoaderAnimation to avoid relying on babel hoisting.

Please take another look!

georgewrmarshall
georgewrmarshall reviewed Mar 12, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks again for taking this on! Replacing hardcoded hex literals with design token references is exactly the right direction, and the mapping table in the PR description is a great touch for reviewers.

A few suggestions below to align with patterns that have landed in recent PRs (#27149, #27031, #27030, #27008). The core idea: for tests that are exercising a component or hook that consumes the theme, prefer mockTheme from util/theme over importing brandColor directly from @metamask/design-tokens. mockTheme is the project's canonical test theme — it wraps lightTheme internally — so it keeps test expectations decoupled from raw token values while still tracking the design system. There is one important exception explained in the inline comment on ThemeProvider.test.tsx.

@TanayK07 TanayK07 requested a review from a team as a code owner March 17, 2026 15:15
@TanayK07
Copy link
Copy Markdown
Contributor Author

TanayK07 commented Mar 17, 2026

@georgewrmarshall Thanks for the detailed review! I've addressed all 5 suggestions:

  1. useTokenLogo.test.ts — Replaced mockColors/brandColor with mockTheme + jest.requireActual pattern
  2. ContextualNetworkPicker.test.tsx — Migrated mock factory to mockTheme pattern, replaced mockColors in Styles block with mockTheme.colors
  3. useMerklClaimStatus.test.ts — Replaced brandColor.black/.white with mockTheme.colors.icon.default/.background.default
  4. useMusdConversionStatus.test.ts — Same as above, all occurrences replaced
  5. FoxRiveLoaderAnimation/index.test.tsx — Using mockTheme for light mode default; kept dark override with brandColor as-is (pending mockDarkTheme export)

Left ThemeProvider.test.tsx unchanged as instructed — brandColor is correct there for the contract test.

cursor[bot]
cursor bot reviewed Mar 17, 2026
View reviewed changes
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

Fix All in Cursor

@georgewrmarshall
fix: replace static hex colors with design tokens in test files
060894b 
Replace hardcoded hex color values with design token references (brandColor, mockTheme)
in test files for consistency and maintainability.

- Use brandColor from @metamask/design-tokens for color assertions
- Use mockTheme from util/theme for theme-dependent test values
- Fix jest.mock factory to properly re-export mockTheme alongside useTheme
@georgewrmarshall georgewrmarshall removed request for a team March 19, 2026 18:30
@georgewrmarshall georgewrmarshall removed request for a team March 19, 2026 18:30
@georgewrmarshall georgewrmarshall force-pushed the fix/replace-hex-colors-with-design-tokens-14299 branch from ff6a952 to 060894b Compare March 19, 2026 18:53
@georgewrmarshall
Copy link
Copy Markdown
Contributor

georgewrmarshall commented Mar 19, 2026

Thanks for making the latest updates! I have made a few follow-up updates to fix the failing tests, including the mocked module export issue for mockTheme, and rebased the branch onto the latest main. I also ran linting, type checks, and the updated test files to verify everything is passing on this branch. We will get this PR reviewed by the team soon. Thanks again for your contribution!

@TanayK07
Copy link
Copy Markdown
Contributor Author

TanayK07 commented Mar 19, 2026

Thanks for making the latest updates! I have made a few follow-up updates to fix the failing tests, including the mocked module export issue for mockTheme, and rebased the branch onto the latest main. I also ran linting, type checks, and the updated test files to verify everything is passing on this branch. We will get this PR reviewed by the team soon. Thanks again for your contribution!

Thank you @georgewrmarshall for helping me out, appreciate it. I hope the team can review it and final changes (if required) can be done and we can merge this.

@georgewrmarshall georgewrmarshall added team-design-system All issues relating to design system in Mobile external-contributor labels Mar 19, 2026
@georgewrmarshall georgewrmarshall self-assigned this Mar 19, 2026
Matt561
Matt561 approved these changes Mar 19, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@Matt561 Matt561 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving for the 2 Earn-owned files 👍

@TanayK07
Copy link
Copy Markdown
Contributor Author

TanayK07 commented Mar 20, 2026

Hi @georgewrmarshall , whom do I tag for a review from MetaMask/design-system-engineers. PTAL when you get the time. Thank you

@georgewrmarshall georgewrmarshall requested a review from a team March 20, 2026 19:37
@georgewrmarshall georgewrmarshall added this pull request to the merge queue Mar 20, 2026
Merged via the queue into MetaMask:main with commit b42b69e Mar 20, 2026
76 of 77 checks passed
@github-actions github-actions bot locked and limited conversation to collaborators Mar 20, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@Montoya Montoya Montoya approved these changes

@wachunei wachunei wachunei approved these changes

@georgewrmarshall georgewrmarshall georgewrmarshall approved these changes

@grvgoel81 grvgoel81 grvgoel81 approved these changes

@Matt561 Matt561 Matt561 approved these changes

Assignees

@georgewrmarshall georgewrmarshall

Labels

external-contributor team-design-system All issues relating to design system in Mobile

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Remove static hex values in favor of design tokens

6 participants

@TanayK07 @wachunei @georgewrmarshall @Montoya @grvgoel81 @Matt561