MetaMask / MetaMask/metamask-design-system

Create spacing tokens

Open
#157 0 comments 0 reactions 1 assignee Claimed by @georgewrmarshall View on GitHub
team-design-system
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.