design-tokens: Update dark theme background.default to pure black (#000000) by georgewrmarshall · Pull Request #1045 · MetaMask/metamask-design-system

georgewrmarshall · 2026-04-06T18:36:47Z

Description

This updates the dark theme to align with the latest pure-black exploration and elevation mapping. Brand greys are refined and dark-mode background tokens are remapped to preserve contrast on pure black. All three token surfaces (JS, CSS, Figma JSON) are synchronized.

Brand greys updated:

grey700 → #292929
grey800 → #1f1f1f
grey900 → #141414
grey1000 → #000000

Dark-mode background tokens updated:

background.default → grey1000 (#000000)
background.section → grey900 (#141414)
background.subsection → grey800 (#1f1f1f)
background.alternative → grey1000 (#000000)
background.muted → #ffffff14
background.muted-hover → #ffffff1f
background.muted-pressed → #ffffff29
background.defaultHover → grey900 (#141414)
background.defaultPressed → grey800 (#1f1f1f)
background.hover → #ffffff14
background.pressed → #ffffff1f
border.muted → #ffffff1f

Notes:

These changes are dark mode only (brand greys are global by design).
Storybook previews should now better match the “After” mocks; secondary buttons, muted text, and surface elevations are improved.
No CHANGELOG entry (not a release PR).

Manual testing steps

yarn build
yarn test (includes CSS/JSON/JS token parity tests)
Open Storybook dark mode, compare “Examples / Wallet Home” and “Examples / Backgrounds”.

Preview builds

Comment @metamaskbot publish-preview to publish @metamask-previews packages for mobile/extension testing.

Slack Thread

…nd sync CSS + Figma JSON; update CHANGELOG Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions · 2026-04-06T18:38:04Z

📖 Storybook Preview

View PR Storybook

cursor

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

cursor · 2026-04-06T18:41:28Z

packages/design-tokens/src/css/dark-theme-colors.css

  Section is +1 elevation, subsection is +2 elevation.
  Alternative should be deprecated. */
-  --color-background-default: var(--brand-colors-grey-grey900);
+  --color-background-default: #000000;


Hardcoded hex breaks token reference pattern in CSS/Figma

Low Severity

The CSS --color-background-default is now hardcoded to #000000 instead of using var(--brand-colors-black), and the Figma JSON uses "#000000" instead of "{black}". Every other background token in both files references its brand color via the token system (var(--brand-colors-grey-grey800), {grey.800}, etc.), and the previous value itself was var(--brand-colors-grey-grey900). The JS file correctly uses brandColor.black. This inconsistency means a future change to --brand-colors-black would update JS tokens but leave CSS and Figma stale.

Additional Locations (1)

packages/design-tokens/src/figma/darkTheme.json#L3-L4

^{Reviewed by Cursor Bugbot for commit bbc33d1. Configure here.}

georgewrmarshall · 2026-04-06T19:58:00Z

@cursor push 55e000d

…t in CSS and Figma Applied via @cursor push command

github-actions · 2026-04-06T19:59:12Z

📖 Storybook Preview

View PR Storybook

packages/design-tokens/CHANGELOG.md

…release PR) Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions · 2026-04-06T20:02:23Z

📖 Storybook Preview

View PR Storybook

…tisfy tests; JS uses brandColor.black Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions · 2026-04-06T20:08:23Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-04-06T20:11:24Z

@metamaskbot publish-preview

github-actions · 2026-04-06T20:11:25Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-04-06T20:13:12Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.13.0-preview.beee588",
  "@metamask-previews/design-system-react-native": "0.13.0-preview.beee588",
  "@metamask-previews/design-system-shared": "0.6.0-preview.beee588",
  "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.beee588",
  "@metamask-previews/design-system-twrnc-preset": "0.4.1-preview.beee588",
  "@metamask-previews/design-tokens": "8.3.0-preview.beee588"
}

…0/800/900/1000; sync JS, CSS, Figma JSON Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

github-actions · 2026-04-08T19:27:44Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-04-08T19:34:40Z

@metamaskbot publish-preview

github-actions · 2026-04-08T19:36:51Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.13.0-preview.dbe1fac",
  "@metamask-previews/design-system-react-native": "0.13.0-preview.dbe1fac",
  "@metamask-previews/design-system-shared": "0.6.0-preview.dbe1fac",
  "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.dbe1fac",
  "@metamask-previews/design-system-twrnc-preset": "0.4.1-preview.dbe1fac",
  "@metamask-previews/design-tokens": "8.3.0-preview.dbe1fac"
}

Testing MetaMask/metamask-design-system#1045 via preview package @metamask-previews/design-tokens@8.3.0-preview.dbe1fac

design-tokens(dark): set background.default to pure black (#000000) a…

bbc33d1

…nd sync CSS + Figma JSON; update CHANGELOG Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

cursor bot reviewed Apr 6, 2026

View reviewed changes

design-tokens: reference brand black token for dark background defaul…

d011282

…t in CSS and Figma Applied via @cursor push command

georgewrmarshall commented Apr 6, 2026

View reviewed changes

packages/design-tokens/CHANGELOG.md Outdated Show resolved Hide resolved

docs(design-tokens): revert CHANGELOG modification per review (not a …

52ee036

…release PR) Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

design-tokens(dark): keep black via direct values for CSS/Figma to sa…

8439c9e

…tisfy tests; JS uses brandColor.black Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Handle {black} token in theme CSS tests and apply lint fix

beee588

design-tokens: dark mode elevation + muted adjustments; update grey70…

dbe1fac

…0/800/900/1000; sync JS, CSS, Figma JSON Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

georgewrmarshall added a commit to MetaMask/metamask-mobile that referenced this pull request Apr 8, 2026

chore: update design-tokens to preview build dbe1fac

4eab25e

Testing MetaMask/metamask-design-system#1045 via preview package @metamask-previews/design-tokens@8.3.0-preview.dbe1fac

georgewrmarshall mentioned this pull request Apr 8, 2026

chore: test design-tokens preview build of pure black [DO NOT MERGE] MetaMask/metamask-mobile#28576

Draft

7 tasks

Uh oh!

Conversation

georgewrmarshall commented Apr 6, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Manual testing steps

Preview builds

Uh oh!

github-actions bot commented Apr 6, 2026

📖 Storybook Preview

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cursor bot Apr 6, 2026

Choose a reason for hiding this comment

Hardcoded hex breaks token reference pattern in CSS/Figma

Uh oh!

georgewrmarshall commented Apr 6, 2026

Uh oh!

github-actions bot commented Apr 6, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

github-actions bot commented Apr 6, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Apr 6, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall commented Apr 6, 2026

Uh oh!

github-actions bot commented Apr 6, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Apr 6, 2026

Uh oh!

github-actions bot commented Apr 8, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall commented Apr 8, 2026

Uh oh!

github-actions bot commented Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Apr 6, 2026 •

edited by cursor bot

Loading

cursor bot left a comment •

edited

Loading