MetaMask / MetaMask/metamask-design-system
test: extend parity validation to twrnc (React Native) preset
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
## Summary
The Tailwind v4 migration (#842) added a parity test (`theme.test.ts`, 355 cases) that validates `theme.css` produces the same utility classes and CSS variables as the v3 `design-system-tailwind-preset`. A similar validation should be created for the `design-system-twrnc-preset` to ensure the React Native token coverage matches.
## Context
The twrnc preset (`@metamask/design-system-twrnc-preset`) provides design tokens to React Native via twrnc. While it remains on Tailwind v3, we need confidence that:
1. Every design token available in the web Tailwind preset is also available in the twrnc preset (or explicitly excluded with justification)
2. Token values (CSS variable references) match between web and RN presets
3. Any future token additions to `design-tokens` are reflected in both presets
This was flagged during PR #842 review ([comment](https://github.com/MetaMask/metamask-design-system/pull/842#discussion_r2943708443)) and in the `check-tailwind-theme-parity.ts` script TODO.
## Acceptance Criteria
- [ ] Parity test validates twrnc preset token coverage against design-tokens source
- [ ] Test runs in CI via `yarn test`
- [ ] Missing tokens are surfaced with clear failure messages
- [ ] Intentional exclusions are documented in an ignore list with justification
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the existing parity test in theme.test.ts and the TODO in check-tailwind-theme-parity.ts, then inspect the design-system-twrnc-preset and design-tokens references they identify. Run yarn test while developing. Done means CI validates twrnc token coverage and matching values, reports missing tokens clearly, and documents justified exclusions in an ignore list.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, tailwindcss, typescript
- Domain
- ci-cd, mobile-dev, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100