chore: test design-tokens preview build of pure black [DO NOT MERGE]

[georgewrmarshall]

Description

Updates the `@metamask/design-tokens` dependency to a preview build for testing purposes. This allows us to validate the changes in MetaMask/metamask-design-system#1045 before they are officially released.

Change: `@metamask/design-tokens ^8.3.0` → `npm:@metamask-previews/design-tokens@8.3.0-preview.dbe1fac`

⚠️ This is a temporary testing PR and should not be merged. Revert once testing is complete.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

```gherkin
Feature: design tokens preview testing

Scenario: user validates design token changes from upstream PR
Given the app is built with the preview design-tokens package
When user navigates through affected UI surfaces
Then the design token changes from MetaMask/metamask-design-system#1045 appear as expected
```

Screenshots/Recordings

Before

design-tokens.pure.black.before720.mov

After

after720.mov

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.

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.

---

Note

Medium Risk
Primarily a dependency/resolution bump to preview @metamask design-system packages, which can cause broad UI/theme regressions across the app despite minimal app-code changes.

Overview
Switches the app to consume preview MetaMask design system artifacts (notably @metamask/design-tokens) for upstream “pure black” theme validation.

Adds/updates a Yarn patch for the preview @metamask-previews/design-system-react-native package so its compiled imports resolve against the non-preview @metamask/design-system-shared and @metamask/design-system-twrnc-preset packages, avoiding mixed preview namespace imports at runtime.

^{Reviewed by Cursor Bugbot for commit b16bb23. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

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.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[georgewrmarshall]

Moved to this PR can be merged before this #28609

[georgewrmarshall]

Moved to this PR can be merged before this #28609

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​metamask-previews/​design-system-twrnc-preset@​0.4.2-preview.f515a62
	npm/​@​metamask-previews/​design-system-shared@​0.15.0-preview.f515a62
	npm/​@​metamask-previews/​design-tokens@​8.3.0-preview.f515a62
	npm/​@​metamask-previews/​design-system-react-native@​0.22.0-preview.f515a62
	npm/​@​metamask/​design-system-react-native@​0.22.0 ⏵ 0.22.0-preview.f515a62	+4		+17	+3
	npm/​@​metamask/​design-system-shared@​0.15.0 ⏵ 0.15.0-preview.f515a62	+1		+24	+4
	npm/​@​metamask/​design-system-twrnc-preset@​0.4.2 ⏵ 0.4.2-preview.f515a62	+3		+1	+7
	npm/​@​metamask/​design-tokens@​8.3.0 ⏵ 8.3.0-preview.f515a62	+1			+6

View full report

[socket-security]

Caution

MetaMask internal reviewing guidelines:

• Do not ignore-all
• Each alert has instructions on how to review if you don't know what it means. If lost, ask your Security Liaison or the supply-chain group
• Copy-paste ignore lines for specific packages or a group of one kind with a note on what research you did to deem it safe.
  @SocketSecurity ignore npm/PACKAGE@VERSION

Action	Severity	Alert  (click "▶" to expand/collapse)
Block		Network access: npm @metamask-previews/design-system-react-native in module globalThis["fetch"] Module: globalThis["fetch"] Location: Package overview From: package.json → npm/@metamask-previews/design-system-react-native@0.22.0-preview.f515a62 ℹ Read more on: This package | This alert | What is network access? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@metamask-previews/design-system-react-native@0.22.0-preview.f515a62. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeSwap, SmokeConfirmations, SmokeStake, SmokePerps, SmokePredictions, SmokeWalletPlatform, SmokeMoney, SmokeAccounts, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeMultiChainAPI, SmokeSnaps, SmokeIdentity, SmokeBrowser, SmokeSeedlessOnboarding
• Selected Performance tags: @PerformanceAssetLoading, @PerformanceLaunch
• Risk Level: high
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR introduces several high-impact UI changes that warrant broad test coverage:

1. Design System Preview Packages (package.json): The switch from stable @metamask/design-system-react-native, @metamask/design-system-twrnc-preset, and @metamask/design-tokens to preview versions (@metamask-previews/*) is a wide-ranging change. Design tokens and the design system underpin virtually all UI components across the app. Any regression in colors, spacing, typography, or component behavior could break tests in any feature area.

2. BottomSheetDialog.styles.ts: Changed background color for dark theme from colors.background.default to colors.background.section. BottomSheet is used pervasively across the entire app — confirmations, account selection, network selection, swap/bridge flows, permissions, snaps, etc. This affects ALL bottom sheet-based flows.

3. SheetHeader.styles.ts: Same dark theme background change. SheetHeader is used in many bottom sheets (ScamWarningModal, Perps sort sheet, etc.).

4. TradeWalletActions.tsx: Changed container background (bg-default → bg-alternative) and added hasBackground={false} to all action items (Swap, Perps, Predict, Earn). This is the entry point for SmokeSwap, SmokePerps, SmokePredictions, and SmokeStake flows.

5. ActionListItem.tsx: Added hasBackground prop used in WalletActions, AccountsMenu, FundActionMenu, TokenDetails, MultichainAddWalletActions — touching account management, fund flows, and token detail flows.

6. MarketInsightsView.tsx / Skeleton: Aspect ratio change (786/340 → 786/240) and LinearGradient addition affects the Trending/Market Insights section (SmokeWalletPlatform, SmokePerps, SmokePredictions).

Given the BottomSheet and design system changes affect virtually every user flow, all tags are warranted. The BottomSheet background change alone could cause visual regressions in confirmations, account selection, network selection, snaps dialogs, and more.

Performance Test Selection:
The design system preview package change (design-tokens, design-system-react-native, twrnc-preset) could affect rendering performance across the app. The BottomSheetDialog and SheetHeader style changes affect widely-used UI components. The MarketInsightsView aspect ratio and LinearGradient addition adds a new rendering layer. @PerformanceAssetLoading covers token list and portfolio rendering which uses these design system components. @PerformanceLaunch covers app startup which initializes the design system and theme. These are the most likely areas to show performance regressions from design system changes.

View GitHub Actions results