MetaMask / MetaMask/metamask-design-system

Design token Figma opacity modifier support

Open
#489 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**
Enhance the **design token transpilation process** to support **opacity modifiers** from the Figma JSON. If a token includes an opacity modifier, it should be correctly transpiled into:

- **Hex alpha format** for CSS tokens (e.g., `#RRGGBBAA`)
- **Hex alpha format** for JS tokens (e.g., `#RRGGBBAA`)

### **Technical Details**
- Modify the transpiler to detect opacity values in the Figma JSON.
- Convert opacity values to:
- **Hex alpha** (`#RRGGBBAA`) for CSS tokens.
- **Hex alpha format** for JS tokens (e.g., `#RRGGBBAA`)
- Ensure the transformed values are correctly outputted in the design token files.
- Validate that the transpiled values are accurate and match the expected opacity levels.

### **Acceptance Criteria**
- Opacity modifiers in Figma JSON are successfully detected and processed.
- CSS tokens use **hex alpha** format.
- JS tokens use **RGBA** format.
- No regressions or inconsistencies in existing design tokens.

Contributor guide

Open the contributing guide

Research direction

Start by locating the design token transpilation entry point and the Figma JSON handling, then inspect the existing CSS and JS token generation and tests. Confirm the intended JS output first, since the description requests hex alpha while the acceptance criteria request RGBA; done means opacity modifiers are converted consistently without regressions.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, typescript
Domain
design, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.