Description

Implement "Colors v2" updates in the codebase to reflect the design changes outlined in [this PR](MetaMask/design-tokens#741).

The updates include modifications to the light and dark themes, introduction of new color tokens, and adjustments for accessibility and consistency with Figma.

Technical Details

Light Theme Updates

1. Border Updates

   • Update border.default: {grey.200} → {grey.400}.

2. Icon Linkage to Text

   • icon.default: {grey.900} → {text.default}.
   • icon.alternative: {grey.500} → {text.alternative}.
   • icon.muted: {grey.300} → {text.muted}.

3. New Colors

   • Add background-muted: {grey.050}.
   • Add background-muted-hover: #E7EBEE.
   • Add background-muted-pressed: #DBE0E6.

4. Description Updates

   • Align descriptions with Figma specifications.

Dark Theme Updates

1. Background Adjustments

   • Update background-default: {grey.800} → {grey.900}.
   • Update background-alternative: {grey.900} → {grey.1000}.

2. Hover and Pressed State Adjustments

   • background-default-hover: #313235 → #1E2124.
   • background-default-pressed: #3F4145 → #272B2F.
   • background-alternative-hover: #1F2123 → #0A0A0A.
   • background-alternative-pressed: #2E3033 → #141414.

3. Border Update

   • border.default: {grey.400} → {grey.500}.

4. Text Contrast Adjustments

   • text.alternative: {grey.200} → {grey.300}.
   • text.muted: {grey.400} → {grey.500}.

5. Icon Linkage to Text

   • icon.default: {grey.000} → {text.default}.
   • icon.alternative: {grey.300} → {text.alternative}.
   • icon.muted: {grey.500} → {text.muted}.

6. New Colors

   • Add background-muted: {grey.800}.
   • Add background-muted-hover: #2D3034.
   • Add background-muted-pressed: #363B3F.

7. Description Updates

   • Align descriptions with Figma specifications.

Acceptance Criteria

• The code reflects the updates described in the technical details.
• All color changes are verified in the light and dark themes.
• Accessibility standards are met, with improved contrast ratios as described.
• Descriptions match Figma standards.

References

• [Design Tokens PR #741](Color v2 updates design-tokens#741).
• Figma design files (if accessible).
• Internal discussions or Slack threads.