fix(TMCU-801): migrate GlobalAlert and SimpleNotification off scrim tokens

[georgewrmarshall]

Description

This PR fixes pure-black dark mode rendering for GlobalAlert and SimpleNotification (TMCU-801).

GlobalAlert previously used overlay.alternative and overlay.inverse scrim tokens for its clipboard banner background and foreground. Under pure-black dark mode, those scrim tokens collapse visually and make the alert hard to read. The banner now uses getElevatedSurfaceColor(theme) for the background and semantic text.default / icon.default tokens for foreground content.

SimpleNotification previously imported legacy importedColors only to reference transparent. That dependency is removed in favor of the literal 'transparent' value, which is theme-neutral.

Storybook stories were added for both components so they can be verified in isolation. Unit tests cover the token migration.

Changelog

CHANGELOG entry: null

Related issues

Fixes: TMCU-801

Manual testing steps

Feature: Pure-black GlobalAlert and SimpleNotification rendering

  Scenario: GlobalAlert clipboard banner is visible in pure-black dark mode
    Given MM_PURE_BLACK_PREVIEW="true" in .js.env
    And the app is rebuilt with yarn watch:clean
    And the app theme is set to Dark
    When a clipboard alert is triggered (e.g. copy an address)
    Then the alert banner background is visibly elevated above the screen
    And the icon and message text are legible

  Scenario: SimpleNotification renders correctly in Storybook
    Given Storybook is enabled in index.js
    When navigating to Components / SimpleNotification
    Then success and rejected notification variants render with visible content

  Scenario: Light mode appearance is unchanged
    Given MM_PURE_BLACK_PREVIEW is off or the app is in light mode
    When GlobalAlert and SimpleNotification are triggered
    Then their appearance matches pre-change behavior

Screenshots/Recordings

N/A — Storybook stories added for isolated visual QA. Enable MM_PURE_BLACK_PREVIEW="true" and dark mode for pure-black verification.

Before

N/A

After

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

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.

  

[mm-token-exchange-service]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• Pre-merge author checklist has unchecked items (e.g. "I've documented my code using JSDoc format if applicable"). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 95%

click to see 🤖 AI reasoning details

E2E Test Selection:
All changed files are limited to:

1. A theming refactor in GlobalAlert/index.js (using full theme object and semantic color tokens instead of overlay tokens for the clipboard alert UI) - purely visual, no logic change.
2. A cosmetic import alias rename in SimpleNotification/index.js (importedColors → colors) - zero functional change.
3. New unit test files (GlobalAlert.test.js, SimpleNotification.test.js) - no runtime impact.
4. New Storybook story files and storybook.requires.js registration - no runtime impact.

None of these changes affect E2E-testable user flows, navigation, transaction confirmations, account management, network management, or any other feature area covered by the available E2E tags. The GlobalAlert theming change only affects the visual appearance of the clipboard copy alert, which is not covered by any specific E2E smoke test scenario. No E2E tags are warranted.

Performance Test Selection:
No performance-sensitive code paths are touched. The changes are limited to UI theming (color token usage in GlobalAlert), a cosmetic import rename in SimpleNotification, and test/storybook additions. None of these affect app launch, login, onboarding, asset loading, swaps, or any other performance-measured flow.

View GitHub Actions results

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.46%. Comparing base (c0523e6) to head (0571289).
⚠️ Report is 21 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #32914      +/-   ##
==========================================
+ Coverage   84.41%   84.46%   +0.04%     
==========================================
  Files        5976     5991      +15     
  Lines      156931   157402     +471     
  Branches    38183    38283     +100     
==========================================
+ Hits       132481   132951     +470     
+ Misses      15303    15285      -18     
- Partials     9147     9166      +19     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
80.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud