MetaMask / MetaMask/metamask-design-system

[TMCU-623] Identify components broken by Pure Black color scheme (Audit)

Open
#1,317 0 comments 0 reactions 1 assignee Claimed by @georgewrmarshall View on GitHub
enhancement pure-black
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### Description\n\nMirrors Jira [TMCU-623](https://consensyssoftware.atlassian.net/browse/TMCU-623).\n\nPart of epic #1271 / [TMCU-622](https://consensyssoftware.atlassian.net/browse/TMCU-622).\n\n**Jira status:** To Do\n\n### Jira details\n\n**Goal:** Audit the app's UI components against the new pure black background to identify contrast and visibility regressions.\n\n**Checklist:**\n\n* **Keyboards**: Test system keyboards (iOS/Android) for visibility and contrast issues.\n* **Inputs**: Ensure text input borders, carets, and placeholders are visible against .\n* **Dividers/Borders**: Check if existing dividers vanish or need higher contrast tokens.\n* **Status Bar**: Verify the status bar icons (clock, battery) are clearly visible and appropriately themed (light-content).\n* **Modals/Bottom Sheets**: Inspect any overlays or sheets that might blend into the background.\n* **Navigation Bar**: Ensure the bottom navigation bar and active states are distinct.\n\n**Outcome:**\nA documented list of components and specific CSS/token fixes required to ensure a high-quality experience in pure black mode.\n

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.