chore: adds tests to design-system-tailwind-preset for colors and index

[georgewrmarshall]

Description

This PR adds unit tests for the Tailwind preset package to ensure that all CSS color variables used in the preset align with those defined in the @metamask/design-tokens package. Specifically, it verifies:

• CSS variables defined in the preset exist in the design tokens stylesheet
• CSS variables that aren't defined in the preset but exist in the stylesheet
• Filtering using starts with prefix e.g. --color for color object
• Ensuring that no missing or incorrect CSS variables exist, preventing breakage due to mismatched or non-existent variables.
• Tailwind shortened class names work for text, background and border.
• Tailwind preset configuration is correct

This change improves the reliability of the Tailwind preset by ensuring consistency with the design tokens.

Related issues

Fixes: https://github.com/MetaMask/metamask-design-system/issues/48

Manual testing steps

1. Pull this branch.
2. Run yarn in the root of the metamask-design-system.
3. Run yarn workspace @metamask/design-system-tailwind-preset jest to confirm that tests pass.
4. In colors.ts, change a CSS variable to one that doesn't exist in the design-tokens package.
5. Run yarn workspace @metamask/design-system-tailwind-preset jest to confirm the tests fail.
6. In node_modules/@metamask/design-tokens/dist/styles.css, add a color token --color-random: #000000.
7. Save the file.
8. Run yarn workspace @metamask/design-system-tailwind-preset jest to confirm the tests fail.

Screenshots/Recordings

After

The recording demonstrates tests validating the stylesheet CSS against a preset color object and the Tailwind preset configuration.

colors.test.ts

https://github.com/user-attachments/assets/9aa006b0-4a39-4e00-8174-64acdd88bcf9

index.test.ts

https://github.com/user-attachments/assets/321f274d-03e9-47c3-9cc1-85ad7ab189b0

100% test coverage

Pre-merge author checklist

• [x] I've followed MetaMask Contributor Docs
• [x] I've completed the PR template to the best of my ability
• [x] I've included tests to verify the changes
• [x] I’ve documented my code using JSDoc format if applicable
• [x] I’ve applied the correct labels on the PR

Pre-merge reviewer checklist

• [ ] I've manually tested the PR and validated the changes.
• [ ] All acceptance criteria described in the related issue have been met.
• [ ] Appropriate testing evidence (screenshots, recordings) has been provided.