Skip to content

chore: upgrade design tokens to v8.2.2#26842

Merged
georgewrmarshall merged 2 commits into
mainfrom
upgrade-design-tokens-v8.2.2
Mar 3, 2026
Merged

chore: upgrade design tokens to v8.2.2#26842
georgewrmarshall merged 2 commits into
mainfrom
upgrade-design-tokens-v8.2.2

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented Mar 3, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Contributor

Description

Upgraded @metamask/design-tokens from ^8.2.1 to ^8.2.2 to pull in the latest typography token updates from the design system.

References:

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: design tokens dependency upgrade

  Scenario: app builds and design tokens resolve successfully
    Given the project dependencies are installed
    When I run the app and navigate through screens that use typography tokens
    Then the app should render without token resolution errors

Screenshots/Recordings

Screens showing HeadingMd or SectionHeading

Before / After

headingmd-home-beforeheadingmd-home-before

headingmd-explore-beforeheadingmd-explore-before

headingmd-rewards-beforeheadingmd-rewards-before

Pre-merge author checklist

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

Low Risk
Low risk: changes are limited to typography token updates reflected in Jest snapshots (font size changes), with no functional logic changes.

Overview
Updates typography styling to align with the latest @metamask/design-tokens release, primarily increasing heading/label fontSize values from 18 to 20.

Regenerates a large set of Jest snapshots across banners and multiple UI flows (e.g., Ramp, Earn, permissions) to match the new rendered text styles.

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

@github-actions

github-actions Bot commented Mar 3, 2026

Copy link
Copy Markdown
Contributor

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.

@metamaskbot metamaskbot added the team-design-system All issues relating to design system in Mobile label Mar 3, 2026
@socket-security

socket-security Bot commented Mar 3, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Diff Package Supply Chain
Security		 Vulnerability Quality Maintenance License
Updatednpm/​@​metamask/​design-tokens@​8.2.1 ⏵ 8.2.210010010096 +1100

View full report

@georgewrmarshall georgewrmarshall requested a review from a team March 3, 2026 00:55
@georgewrmarshall georgewrmarshall self-assigned this Mar 3, 2026
@github-actions

github-actions Bot commented Mar 3, 2026

Copy link
Copy Markdown
Contributor

⚠️ E2E Fixture Validation — Structural changes detected

Category Count
New keys 60
Missing keys 0
Type mismatches 0
Value mismatches 6 (informational)

The committed fixture schema is out of date. To update, comment:

@metamaskbot update-mobile-fixture

View full details | Download diff report

@georgewrmarshall georgewrmarshall force-pushed the upgrade-design-tokens-v8.2.2 branch 2 times, most recently from 2477bd5 to 5ddacfd Compare March 3, 2026 02:29
georgewrmarshall
georgewrmarshall commented Mar 3, 2026
View reviewed changes
Comment thread package.json
"@metamask/design-system-react-native": "^0.8.0",
"@metamask/design-system-twrnc-preset": "^0.3.0",
"@metamask/design-tokens": "^8.2.1",
"@metamask/design-tokens": "^8.2.2",

@georgewrmarshall georgewrmarshall Mar 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The only source code change in this PR is this single version bump. All other file changes in this PR are auto-generated snapshot updates that reflect the downstream effects of this token version change.

georgewrmarshall
georgewrmarshall commented Mar 3, 2026
View reviewed changes
Comment thread app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap
"color": "#131416",
"fontFamily": "Geist-Bold",
"fontSize": 18,
"fontSize": 20,

@georgewrmarshall georgewrmarshall Mar 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

These snapshot updates are auto-generated and reflect a single typography token change introduced in design-tokens v8.2.2: the heading/body text style using Geist-Bold changed from fontSize 18 to fontSize 20. This same change propagates uniformly across all 100+ snapshot files in this PR.

georgewrmarshall
georgewrmarshall commented Mar 3, 2026
View reviewed changes
Comment thread yarn.lock
checksum: 10/2ab9e2c148f55874819c550a2e038c050d906709c33315edd200ddaeb7677b5f121f50fa2f43c06ce94b5fc66b59450c81b8927088721d8ad6ee559cf864f442
languageName: node
linkType: hard

@georgewrmarshall georgewrmarshall Mar 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The yarn.lock checksum update here is expected and verifies the integrity of the new 8.2.2 package. Reviewers can confirm the version resolves correctly by checking the MetaMask design-system releases linked in the PR description.

@georgewrmarshall georgewrmarshall marked this pull request as ready for review March 3, 2026 02:33
brianacnguyen
brianacnguyen previously approved these changes Mar 3, 2026
View reviewed changes
@georgewrmarshall georgewrmarshall force-pushed the upgrade-design-tokens-v8.2.2 branch from 5ddacfd to a68e696 Compare March 3, 2026 02:47
@github-actions

github-actions Bot commented Mar 3, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: None (no tests recommended)
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

E2E Test Selection:
This PR updates the @metamask/design-tokens package from ^8.2.1 to ^8.2.2, which changes the HeadingMD typography variant's font size from 18px to 20px. All 100 changed files are snapshot test files (.snap) that are being regenerated to reflect this design token change.

Key observations:

  1. No functional code changes - only dependency version bump and snapshot updates
  2. All snapshot changes are consistent: fontSize changing from 18 to 20 for HeadingMD variant
  3. This is a visual/styling change only - text will appear slightly larger
  4. E2E tests do not validate exact font sizes or pixel-perfect rendering
  5. The snapshots are correctly updated to match the new design token values

The affected components span many areas (Banners, Modals, Settings, Ramps, Stake, Card, Account Connect, Network Selector, etc.), but since E2E tests focus on functional behavior rather than exact styling, no E2E tests are needed to validate this change. The unit test snapshots have already been updated to reflect the new typography values.

Performance Test Selection:
This PR only updates design tokens (font size from 18px to 20px) with no changes to rendering logic, data loading, state management, or app initialization. Font size changes do not impact performance metrics like render times, load times, or responsiveness. No performance tests are needed.

View GitHub Actions results

@codecov-commenter

codecov-commenter commented Mar 3, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.60%. Comparing base (d9d4b64) to head (a68e696).
⚠️ Report is 278 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #26842      +/-   ##
==========================================
+ Coverage   81.32%   81.60%   +0.28%     
==========================================
  Files        4487     4597     +110     
  Lines      116867   120430    +3563     
  Branches    25295    26337    +1042     
==========================================
+ Hits        95039    98282    +3243     
- Misses      15179    15258      +79     
- Partials     6649     6890     +241

☔ View full report in Codecov by Sentry.
📢 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

sonarqubecloud Bot commented Mar 3, 2026

Copy link
Copy Markdown

Quality Gate Passed 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 georgewrmarshall added this pull request to the merge queue Mar 3, 2026
Merged via the queue into main with commit a52e79c Mar 3, 2026
60 checks passed
@georgewrmarshall georgewrmarshall deleted the upgrade-design-tokens-v8.2.2 branch March 3, 2026 03:33
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 3, 2026
@metamaskbot metamaskbot added the release-7.69.0 Issue or pull request that will be included in release 7.69.0 label Mar 3, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@brianacnguyen brianacnguyen brianacnguyen approved these changes

Assignees

@georgewrmarshall georgewrmarshall

Labels

release-7.69.0 Issue or pull request that will be included in release 7.69.0 size-XS 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.

4 participants

@georgewrmarshall @codecov-commenter @brianacnguyen @metamaskbot