design-tokens: Update dark theme background.default to pure black (#000000)#1045
Draft
georgewrmarshall wants to merge 10 commits intomainfrom
Draft
design-tokens: Update dark theme background.default to pure black (#000000)#1045georgewrmarshall wants to merge 10 commits intomainfrom
georgewrmarshall wants to merge 10 commits intomainfrom
Conversation
Contributor
📖 Storybook Preview |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Hardcoded hex breaks token reference pattern in CSS/Figma
- Replaced the hardcoded #000000 with token references: CSS now uses var(--brand-colors-black) and Figma JSON uses {black}.
Or push these changes by commenting:
@cursor push 55e000d072
Preview (55e000d072)
diff --git a/packages/design-tokens/src/css/dark-theme-colors.css b/packages/design-tokens/src/css/dark-theme-colors.css
--- a/packages/design-tokens/src/css/dark-theme-colors.css
+++ b/packages/design-tokens/src/css/dark-theme-colors.css
@@ -6,7 +6,7 @@
/* Background default should be the darkest shade, 0 elevation.
Section is +1 elevation, subsection is +2 elevation.
Alternative should be deprecated. */
- --color-background-default: #000000;
+ --color-background-default: var(--brand-colors-black);
--color-background-section: var(--brand-colors-grey-grey800);
--color-background-subsection: var(--brand-colors-grey-grey700);
--color-background-alternative: var(--brand-colors-grey-grey1000);
diff --git a/packages/design-tokens/src/figma/darkTheme.json b/packages/design-tokens/src/figma/darkTheme.json
--- a/packages/design-tokens/src/figma/darkTheme.json
+++ b/packages/design-tokens/src/figma/darkTheme.json
@@ -1,7 +1,7 @@
{
"background": {
"default": {
- "value": "#000000",
+ "value": "{black}",
"type": "color",
"parent": "Theme Colors/Dark mode",
"description": "For default neutral surface."You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit bbc33d1. Configure here.
Contributor
Author
Contributor
📖 Storybook Preview |
georgewrmarshall
commented
Apr 6, 2026
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
Author
|
@metamaskbot publish-preview |
Contributor
📖 Storybook Preview |
Contributor
|
Preview builds have been published. See these instructions for more information about preview builds. Expand for full list of packages and versions. |
Contributor
📖 Storybook Preview |
Contributor
Author
|
@metamaskbot publish-preview |
Contributor
|
Preview builds have been published. See these instructions for more information about preview builds. Expand for full list of packages and versions. |
georgewrmarshall
added a commit
to MetaMask/metamask-mobile
that referenced
this pull request
Apr 8, 2026
Testing MetaMask/metamask-design-system#1045 via preview package @metamask-previews/design-tokens@8.3.0-preview.dbe1fac
Draft
7 tasks
Contributor
📖 Storybook Preview |
Contributor
Author
|
@metamaskbot publish-preview |
Contributor
|
Preview builds have been published. See these instructions for more information about preview builds. Expand for full list of packages and versions. |
Contributor
📖 Storybook Preview |
Contributor
Author
|
@metamaskbot publish-preview |
Contributor
|
Preview builds have been published. See these instructions for more information about preview builds. Expand for full list of packages and versions. |
…nd sync CSS + Figma JSON; update CHANGELOG Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
…t in CSS and Figma Applied via @cursor push command
…release PR) Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
…tisfy tests; JS uses brandColor.black Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
…0/800/900/1000; sync JS, CSS, Figma JSON Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
…ssible pure black; adjust figma JSON and JS tokens to match Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
…essed + border-muted; react-native: use bg-section for BottomSheet surface Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
georgewrmarshall
force-pushed
the
cursor/background-default-pure-black-2ad1
branch
from
e480b50 to
1679aa9
Compare
Contributor
📖 Storybook Preview |
Contributor
Author
|
@metamaskbot publish-preview |
Contributor
|
Preview builds have been published. See these instructions for more information about preview builds. Expand for full list of packages and versions. |
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** ### Goal of this iteration: The purpose of these updates is to ensure that - our elevations don't look brown - there is sufficient contrast for our bottom sheets The design constraint here is maintaining a pure black background, `000000`, as the base. All tints now have a slight hue, but they are not overly blue. ### Summary of changes: <img width="615" height="732" alt="Screenshot 2026-04-30 at 7 50 17 PM" src="https://github.com/user-attachments/assets/b6a16db5-7f9f-4900-afd5-d363281e8cfc" /> ### Note: All elevations are now, from darkest to lightest: - bg-default > bg-alternative > bg-section > bg-subsection - The intention is to ensure there is sufficient contrast for bottom sheets. For the purpose of this project, I am re-using tokens we have — there is room to refine the token names in the future. ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** https://github.com/user-attachments/assets/ef2c1705-31c5-4b38-bba6-b98b521e42e5 https://github.com/user-attachments/assets/ff3685b8-dee4-4d9d-a5d9-a961795dba13 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [ ] 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](https://jsdoc.app/) format if applicable - [ ] 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] > **Medium Risk** > Medium risk due to public API/type surface changes (e.g., `isReadonly`→`isReadOnly`, shared const-object unions) plus visual styling tweaks to `BottomSheetDialog`/`ButtonTertiary` and updated SVG assets that could affect rendering. > > **Overview** > Updates the React Native package to rely on `@metamask/design-system-shared` for many exported enums/types (const-object + string-union pattern), updating component props/types plus corresponding stories/tests (e.g., `Box`, `Button*`, `ButtonBase`, `ButtonIcon`, `AvatarIcon`, `BadgeIcon`). > > Refines UI behavior/styling: `Box` now forwards refs, `ButtonTertiary` uses neutral text color across states, `BottomSheetDialog` background shifts to `bg-alternative`, `TabEmptyState` centers its action button, and `Input`/`TextField` standardize on `isReadOnly` with expanded consumer-focused docs. > > Icon and Figma tooling are adjusted: icon generation is centralized via a new root `generate:icons` script (removing RN’s `scripts/generate-icons.ts` and build step), adds the `Telegram` icon, updates various network/token SVG assets, and refreshes Figma file URLs in rules/config/docs. Version bumps and changelog/migration docs are updated for `@metamask/design-system-react-native@0.21.0` and repo `36.0.0`. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 9855007. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: cursor[bot] <206951365+cursor[bot]@users.noreply.github.com> Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com> Co-authored-by: georgewrmarshall <george.marshall@consensys.net> Co-authored-by: George Marshall <georgewrmarshall@gmail.com> Co-authored-by: Kirill Zyusko <zyusko.kirik@gmail.com> Co-authored-by: Brian August Nguyen <brianacnguyen@gmail.com>
Contributor
📖 Storybook Preview |
Contributor
Author
|
@metamaskbot publish-preview |
Contributor
|
Preview builds have been published. See these instructions for more information about preview builds. Expand for full list of packages and versions. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Update dark theme color tokens and BottomSheet surface:
brand-colors.css), Figma JSON (brandColors.json), and JS mapping (brandColor.ts).--color-background-muted,--color-background-muted-hover,--color-background-muted-pressed, and--color-border-mutednow use light-indigo-tinted values (#c8e4ff1c/26/30) for better harmony. Mirrored in JS theme (src/js/themes/darkTheme/colors.ts) and Figma JSON (figma/darkTheme.json).bg-sectionsurface instead ofbg-defaultper guidance.No other component surfaces changed.
Slack Thread