design-tokens: Update dark theme background.default to pure black (#000000)

[georgewrmarshall]

Description

Dark theme background/default has been updated from grey900 to pure black #000000 across the design tokens package:

• JS tokens: src/js/themes/darkTheme/colors.ts now sets background.default to brandColor.black.
• CSS variables: src/css/dark-theme-colors.css maps --color-background-default to #000000.
• Figma JSON: src/figma/darkTheme.json background.default.value updated to #000000 so tests and docs stay in sync.
• No CHANGELOG entry (not a release PR).

This change is intended to support A/B testing and preview builds for MetaMask with a pure black background and to facilitate producing an @metamask-previews package for mobile and extension test builds.

Manual testing steps

1. Go to the latest storybook build of this PR
2. Navigate to Examples/Backgrounds and Examples/WalletHome
3. Compare against hosted storybook

Screenshots

Before

After

Notes

Comment @metamaskbot publish-preview to trigger the preview build workflow and publish the @metamask-previews package for review.

Slack Thread

  

[github-actions]

📖 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]

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]

@cursor push 55e000d

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

@metamaskbot publish-preview

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

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