Skip to content

tokens(pure-black): increase border.muted contrast for better separators#1383

Closed
georgewrmarshall wants to merge 1 commit into
mainfrom
cursor/pure-black-border-muted-contrast-45b7
Closed

tokens(pure-black): increase border.muted contrast for better separators#1383
georgewrmarshall wants to merge 1 commit into
mainfrom
cursor/pure-black-border-muted-contrast-45b7

Conversation

@georgewrmarshall

Copy link
Copy Markdown
Contributor

Description

Increase the border.muted contrast in the pure black dark theme to improve the visibility of dividers and subtle separators on #000000 backgrounds. This directly addresses low-contrast separators observed in settings-like lists (e.g., the “Region” area) when pure black is enabled by default.

Changes:

  • JS tokens: pureBlackDarkTheme.colors.border.muted from #e2e2ff26#e2e2ff33
  • CSS tokens: --color-border-muted from #e2e2ff26#e2e2ff33

This is a safe, global token-level adjustment that benefits both React Native (twrnc) and Web (CSS variables) consumers without altering component APIs.

Related issues

  • Epic: TMCU-622 – Pure Black Hex Background Schema
  • Fixes: TMCU-1081 – Region in settings not styled correctly on pure black (nightly)

Manual testing steps

  1. React Web Storybook (yarn storybook):
    • Switch to dark theme and enable Pure Black in the toolbar.
    • Inspect components that use subtle separators (e.g., lists, banners, dialogs) and verify divider visibility has improved.
  2. React Native Storybook (yarn storybook:ios/android):
    • Toggle dark + pure black (Both mode is fine).
    • Open SectionDivider, ListItem, and settings-like list stories; confirm muted borders are more legible.
  3. App consumers (nightly):
    • Navigate to Settings → Region and observe clearer separation between rows/sections under pure black.

Screenshots/Recordings

Before

After

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I’ve included tests if applicable (token change covered by existing build/tests)
  • I’ve documented my code using JSDoc format if applicable

Slack Thread

Open in Web Open in Cursor 

…ors on pure black

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🌳 Main Branch (Latest)

@georgewrmarshall

Copy link
Copy Markdown
Contributor Author

Not sure what this is

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants