feat: add Backgrounds example story for design token testing #840
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
georgewrmarshall
force-pushed
the
background-section-example
branch
from
06fd588 to
25def11
Compare
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
amandaye0h
approved these changes
Oct 22, 2025
brianacnguyen
pushed a commit
that referenced
this pull request
Dec 9, 2025
## **Description** This PR releases version 17.0.0 of the MetaMask Design System, featuring important fixes for mobile font compatibility, the addition of the ButtonHero component to React, export fixes for React Native, and various dependency updates including ESLint configuration upgrades. ## **Included PRs** #836, #837, #838, #840, #843, #845, #846, #847, #848, #850, #851, #852, #853, #854, #855, #856, #857, #858, #859, #861, #862, #863, #864 ## **Manual testing steps** 1. Check package.json version bumps align with included changes 2. Check changelog accurately reflects the release ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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] > Release 17.0.0 introducing React `ButtonHero`, RN font naming changes and TWRNC preset font family rename (both breaking), plus RN export fix and dependency updates. > > - **Release 17.0.0** > - Bump root `package.json` to `17.0.0`. > - **React (`@metamask/[email protected]`)** > - Add `ButtonHero` component for prominent CTAs. > - Update `@metamask/utils` peer to `^11.8.1`. > - **React Native (`@metamask/[email protected]`)** > - BREAKING: Rename font files to hyphenated PostScript format for iOS Metro compatibility. > - Export missing `TextButtonSize` enum. > - Peer: require `@metamask/design-system-twrnc-preset@^0.3.0`; update `@metamask/utils` peer. > - **TWRNC preset (`@metamask/[email protected]`)** > - BREAKING: Rename font family names to hyphenated PostScript format for iOS/expo-font. > - **Changelogs** > - Update `CHANGELOG.md` links and entries for all packages. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 9a90311. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds a new Storybook example story that demonstrates the layered background token system and text/icon color variations. This story provides a visual showcase for testing and reviewing the brand color token updates implemented in PR #839.
The story includes layered background examples (default → section → subsection), modal-style overlays, and comprehensive text/icon color demonstrations to validate the design token hierarchy and ensure proper color contrast relationships.
Related issues
Related to: #839
Manual testing steps
yarn storybookScreenshots/Recordings
Before
No previous version - this is a new story
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Adds Backgrounds example stories (web and React Native) demonstrating layered background tokens and text/icon color variants, and registers the RN story in Storybook config.
Examples/Backgroundsstories inapps/storybook-react/stories/Backgrounds.stories.tsxandapps/storybook-react-native/stories/Backgrounds.stories.tsxshowcasing layered background tokens (BackgroundDefault → BackgroundSection → BackgroundSubsection) with text/icon color variants and button examples.apps/storybook-react-native/.storybook/storybook.requires.js.Written by Cursor Bugbot for commit 5b50dee. This will update automatically on new commits. Configure here.