Integrate @metamask/design-tokens into tailwind-preset Package

brianacnguyen commented 1 month ago

Description:

This ticket aims to integrate the design tokens from the @metamask/design-tokens package into the tailwind-preset package. The goal is to ensure that the Tailwind CSS configurations for both React and React Native packages are based on the MetaMask design tokens, enabling consistent usage of colors, typography, and other design properties across platforms.

Requirements:

Modify the tailwind-preset package to pull in and utilize tokens from the @metamask/design-tokens package.
Ensure that all design tokens related to color, typography, and other applicable properties are correctly mapped into the Tailwind configuration.
Update the Tailwind theme (e.g., extend) with values from the design tokens.
Verify that both React and React Native packages can access these tokens through the updated tailwind-preset.
Test and ensure compatibility across React (web) and React Native (mobile) environments.

Acceptance Criteria:

@metamask/design-tokens are successfully integrated into the tailwind-preset package, with mappings for colors, typography, and other design properties.
Both React and React Native packages consume the tailwind-preset package and apply the design tokens correctly.

georgewrmarshall commented 1 month ago

We can break the PRs up into color, typography and space(don't need to do anything), for easier review

georgewrmarshall commented 2 weeks ago

This was completed by https://github.com/MetaMask/metamask-design-system/pull/41

MetaMask / metamask-design-system