MetaMask / MetaMask/metamask-design-system
Create spacing tokens
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
This PR introduces new spacing tokens to the design tokens repository for **CSSinJS**, **Figma JSON**, and **CSS variables**. Additionally, it adds Storybook documentation and a `SpacingSwatch` documentation component to visually represent these spacing tokens. The changes ensure consistency in spacing values across the design system and provide contributors with clear references for applying these tokens.
### **Technical Details**
- Create spacing tokens and add them to the design tokens repository.
- Ensure that the spacing tokens are available in the following formats:
- **CSSinJS**
- **Figma JSON**
- **CSS variables**
- Add a `SpacingSwatch` component to Storybook to display the new spacing tokens visually.
- Update the documentation to include details on how and where to use these spacing tokens across the design system.
- Reference Tailwind's spacing scale as a guide for defining the tokens.
### **Acceptance Criteria**
- New spacing tokens are created and correctly implemented in **CSSinJS**, **Figma JSON**, and **CSS variables** formats.
- The `SpacingSwatch` component is added to Storybook and accurately displays the spacing tokens.
- The updated documentation is clear and comprehensive, helping contributors understand how to apply the spacing tokens in various formats.
- Validate that the tokens are consistent across platforms and correctly reflected in the design system.
### **References**
- Tailwind Spacing Scale: [Tailwind Spacing Documentation](https://v3.tailwindcss.com/docs/customizing-spacing#default-spacing-scale)
- Spacing Audit: [Figma Spacing Audit Report](https://www.figma.com/board/g1bEe9YqGL8j32mFCjUuwH/Spacing-Audit-and-Insight-Report?node-id=0-1&t=CpMYzd3CNNPIPLEw-1)
Contributor guide
Assessment
This issue has not been assessed yet.