MetaMask / MetaMask/metamask-design-system
feat: add Tailwind utility classnames to design token Storybook stories
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
## Summary
Design token stories currently show CSS custom property names, Figma token names, and JS token references. They should also display the corresponding Tailwind utility classnames so developers can quickly look up the correct class to use.
## Context
With the Tailwind v4 migration (#842), all design tokens are now available as Tailwind utility classes via `@metamask/design-tokens/tailwind/theme.css`. The token stories should reflect this by showing the Tailwind classname alongside the existing formats.
## Examples
| Token category | CSS variable | Tailwind class |
|---|---|---|
| Colors | `--color-primary-default` | `bg-primary-default`, `text-primary-default`, `border-primary-default` |
| Color shortcuts | `--color-background-default` | `bg-default` |
| Typography | `--typography-s-body-md-font-size` | `text-s-body-md` |
| Font weight | `--font-weight-medium` | `font-medium` |
| Font family | `--font-family-default` | `font-default` |
| Shadows | `--shadow-size-sm` | `shadow-sm` |
## Acceptance Criteria
- [ ] Each design token story displays the Tailwind utility classname(s) that map to it
- [ ] Color tokens show all applicable prefixes (`bg-*`, `text-*`, `border-*`)
- [ ] Shortcut utilities are highlighted (e.g. `bg-default` as a convenience for `bg-background-default`)
- [ ] Classnames are copyable
Contributor guide
Research direction
Locate the design token Storybook stories and compare their existing CSS custom property, Figma token, and JS reference displays with @metamask/design-tokens/tailwind/theme.css. Add the mapped Tailwind utilities, including color prefixes and shortcuts, and make the displayed classnames copyable; done means every design token story exposes the applicable utilities.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- storybook, tailwindcss, typescript
- Domain
- design
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100