MetaMask / MetaMask/metamask-design-system

test: extend parity validation to twrnc (React Native) preset

Open
#980 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.