Add Tests for CSS Variables in design-system-tailwind-preset to Ensure Alignment with @metamask/design-tokens

[georgewrmarshall]

Description

We need to create tests for the design-system-tailwind-preset package, specifically for colors, shadows, and typography. These tests should ensure that the CSS variables used in the preset are consistent with the corresponding values in the @metamask/design-tokens package. Additionally, the design tokens should be made a peer dependency of the Tailwind preset package to ensure version alignment between the two.

The tests should:

• Verify that the CSS variables being used in the Tailwind preset exist in the @metamask/design-tokens.
• Warn about any CSS variables that are not utilized in the Tailwind preset, flagging potential inconsistencies.
• Support the introduction of an "ignore tokens" file, which will store deprecated tokens or track tokens that no longer need to be included in the Tailwind preset.

Technical Details

• Implement tests that compare the CSS variables in design-system-tailwind-preset against the design tokens.
• Add the @metamask/design-tokens package as a peer dependency for design-system-tailwind-preset.
• Create functionality that identifies unused or inconsistent CSS variables.
• Introduce an "ignore tokens" configuration to handle deprecated tokens that should not be included in the preset.
• Ensure backward compatibility and proper documentation for managing deprecated tokens.

Acceptance Criteria

• All CSS variables in the Tailwind preset are validated against the @metamask/design-tokens.
• Any unused or inconsistent CSS variables are flagged with warnings.
• The design tokens package is added as a peer dependency.
• An "ignore tokens" file exists for deprecated tokens and is respected by the system.
• Tests pass and properly reflect alignment between Tailwind preset and design tokens.

References

• https://github.com/MetaMask/metamask-design-system/pull/41