MetaMask / MetaMask/metamask-extension
[EXT] Add DisplayLG text variant from design-tokens
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 5.6k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 451
Description
### **Description**
We need to add a `DisplayLG` typography token to the extension repository. This token will be used across the design system for large display typography, ensuring consistency in the typographic styles for larger screens.
### **Technical Details**
- Create a new `DisplayLG` typography token in the extension repository.
- Reference the following resources for the specific typography styles:
- Figma File: [DS Typography / Large Screen](https://www.figma.com/design/likmuA72JatXDKDChibHBG/DS-Typography-%2F-Large-Screen?node-id=0-1&t=QhahIunb9CH4PfFL-1)
- Figma File: [DS Typography / Small Screen](https://www.figma.com/design/Na8UKll7g12UywIPGEVLvX/DS-Typography-%2F-Small-Screen?m=auto&node-id=0-1&t=2EAwp5DP5nWGUTbK-1)
- Insight Report: [Typography Audit](https://www.figma.com/design/MObd9JM3xkqwD4wHu7I5DX/Typography-Audit?node-id=0-1&t=09x3QsgwDSrtwOTj-1)
### **Acceptance Criteria**
- Add the `DisplayLG` typography token with the correct styling for large screens based on the Figma design files.
- Validate the new token across different platforms to ensure consistency in typography rendering.
- Update documentation
### **References**
- Design Ticket: [MetaMask Planning Issue #3244](https://app.zenhub.com/workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/gh/metamask/metamask-planning/3244)
- Figma File: [DS Typography / Large Screen](https://www.figma.com/design/likmuA72JatXDKDChibHBG/DS-Typography-%2F-Large-Screen?node-id=0-1&t=QhahIunb9CH4PfFL-1)
- Figma File: [DS Typography / Small Screen](https://www.figma.com/design/Na8UKll7g12UywIPGEVLvX/DS-Typography-%2F-Small-Screen?m=auto&node-id=0-1&t=2EAwp5DP5nWGUTbK-1)
- Insight Report: [Typography Audit](https://www.figma.com/design/MObd9JM3xkqwD4wHu7I5DX/Typography-Audit?node-id=0-1&t=09x3QsgwDSrtwOTj-1)
Contributor guide
Research direction
Start by locating the existing typography tokens in the MetaMask extension repository, then compare their structure with the DS Typography / Large Screen and Small Screen Figma files and the Typography Audit. The work is done when DisplayLG has the specified large-screen styling, is validated across platforms, and the relevant documentation is updated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- figma, typescript
- Domain
- design
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100