Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CODE] Colors V2 #181

Closed
georgewrmarshall opened this issue Nov 27, 2024 · 0 comments · Fixed by #230
Closed

[CODE] Colors V2 #181

georgewrmarshall opened this issue Nov 27, 2024 · 0 comments · Fixed by #230
Assignees

Comments

@georgewrmarshall
Copy link
Contributor

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

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

Successfully merging a pull request may close this issue.

1 participant