Description

This PR updates the design-tokens package to v1.13.0, introducing accessibility enhancements to various color categories, including warning/default, success/default, and inverse colors. Additionally, it incorporates hover and pressed tokens.

For a detailed overview of the color updates, please refer to this PR in the design-tokens repository.

The accessibility improvements ensure that:

• Text using the warning/default color now meets WCAG AA color contrast requirements.
• Text using the success/default color now meets WCAG AA color contrast requirements.
• Text using the primary/inverse, error/inverse, success/inverse, and info/inverse colors in dark mode now meets WCAG AA color contrast requirements.

These updates enhance the accessibility and user experience for vision impaired folks in the extension.

Related issues

Related: https://github.com/MetaMask/metamask-extension#workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/zh/329

Manual testing steps

The easiest way to review these accessibility updates is to check storybook

1. Go to the latest build of storybook in this PR
2. Search HelpText in the search bar
3. Go to the Severity story
4. Check the accessibility tab in storybook
5. See all accessibility tests for color contrast are passing
6. Go to the Button story
7. Change the mode to dark mode
8. To make sure it's picking up dark mode colors change something in the controls then use the revert button
9. Check the accessibility tab in storybook
10. See all accessibility tests for color contrast are passing

Screenshots/Recordings

Before

Screencast below shows accessibility color contrast tests fail for warning/default, success/default on the HelpText component and primary/inverse on the Button component in dark mode

Below screencast shows current view of the extension before color updates

After

Screencast below shows accessibility color contrast tests now pass for warning/default, success/default on the HelpText component and primary/inverse on the Button component in dark mode

Below screencast shows updated view of the extension after color updates

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• 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 (see labeling guidelines). Not required for external contributors.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.