MetaMask / MetaMask/metamask-design-system

feat: add Tailwind utility classnames to design token Storybook stories

Open
#979 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.