MetaMask / MetaMask/metamask-design-system
Design token Figma opacity modifier support
- 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
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