[CODE] Colors V2

[georgewrmarshall]

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.