Description

This PR upgrades the design-tokens package to v2.0. The major version update was required due to the node version upgrade from 16 to 18, a requirement discovered during the attempted update of the design tokens package to 1.13 (see PR #8402).

In addition to the major version upgrade, this PR includes accessibility enhancements to various color categories from 1.13. It also updates several TypeScript conventions, notably the preference for types over interfaces, and import paths aligning with the module template standards from shared libraries.

For a comprehensive 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 mobile.

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 root index.js
2. Uncomment storybook
3. Run storybook

Screenshots/Recordings

Before

TBC

After

https://github.com/MetaMask/metamask-mobile/assets/14355083/66127055-6194-4632-bcc6-3968c38df5db
https://github.com/MetaMask/metamask-mobile/assets/14355083/e8544dd8-980b-486e-aeba-b7f6286657d1

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.