DO NOT MERGE: Brand Evolution Colors

[brianacnguyen]

Description

This PR includes comprehensive updates to the dark theme design tokens as part of our brand evolution initiative. The changes focus on enhancing visual consistency and accessibility across our color system.

Key updates include:

1. Refined background colors and their hover/pressed states
2. Adjusted text and icon color hierarchy
3. Updated border colors for better contrast
4. Modified overlay colors for improved visibility
5. Enhanced semantic colors (primary, error, warning, success) and their states
6. Updated shadow tokens for better depth perception

The reason for these changes is to align our dark theme with our evolving brand guidelines while maintaining accessibility standards and improving overall user experience.

Related issues

Fixes: [Brand Evolution Update Task ID]

Manual testing steps

1. Pull the branch and build the application
2. Navigate through different UI components in dark mode
3. Verify hover and pressed states across interactive elements
4. Check text and icon contrast against various backgrounds
5. Validate semantic color applications (primary actions, errors, warnings)

Screenshots/Recordings

Before

[Screenshots of current dark theme in production]

After

[Screenshots of updated dark theme with new color tokens]

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
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR

Pre-merge reviewer checklist

• I've manually tested the PR
• I confirm that this PR addresses all acceptance criteria and includes necessary testing evidence

[brianacnguyen]

@metamaskbot publish-preview

[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.0.0-preview.bf69b6b",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.bf69b6b",
  "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.bf69b6b",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.bf69b6b",
  "@metamask-previews/design-tokens": "4.2.0-preview.bf69b6b"
}

[georgewrmarshall]

@metamaskbot publish-preview

[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.0.0-preview.3ab3ce4",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.3ab3ce4",
  "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.3ab3ce4",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.3ab3ce4",
  "@metamask-previews/design-tokens": "5.0.0-preview.3ab3ce4"
}