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
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.