Skip to content

Commit 68d7424

Browse files
lukasoppermannlukasoppermann
authored
Add Figma typography extensions (#891)
* working on adding typo tokens for figma * working on adding typo tokens for figma
1 parent 998fc24 commit 68d7424

File tree

3 files changed

+175
-25
lines changed

3 files changed

+175
-25
lines changed

‎.changeset/angry-carrots-rule.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/primitives': minor
3+
---
4+
5+
adding typo tokens for figma

‎src/tokens/base/typography/typography.json

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,43 @@
44
"weight": {
55
"light": {
66
"$type": "fontWeight",
7-
"$value": 300
7+
"$value": 300,
8+
"$extensions": {
9+
"org.primer.figma": {
10+
"collection": "base/typography",
11+
"scopes": ["all"]
12+
}
13+
}
814
},
915
"normal": {
1016
"$value": 400,
11-
"$type": "fontWeight"
17+
"$type": "fontWeight",
18+
"$extensions": {
19+
"org.primer.figma": {
20+
"collection": "base/typography",
21+
"scopes": ["all"]
22+
}
23+
}
1224
},
1325
"medium": {
1426
"$value": 500,
15-
"$type": "fontWeight"
27+
"$type": "fontWeight",
28+
"$extensions": {
29+
"org.primer.figma": {
30+
"collection": "base/typography",
31+
"scopes": ["all"]
32+
}
33+
}
1634
},
1735
"semibold": {
1836
"$value": 600,
19-
"$type": "fontWeight"
37+
"$type": "fontWeight",
38+
"$extensions": {
39+
"org.primer.figma": {
40+
"collection": "base/typography",
41+
"scopes": ["all"]
42+
}
43+
}
2044
}
2145
}
2246
}

‎src/tokens/functional/typography/typography.json

Lines changed: 142 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,20 @@
4242
},
4343
"org.primer.figma": {
4444
"collection": "typography",
45-
"scopes": ["all"]
45+
"scopes": ["all"],
46+
"fontSizeInPx": 40
4647
}
4748
}
4849
},
4950
"size": {
5051
"$value": "40px",
51-
"$type": "dimension"
52+
"$type": "dimension",
53+
"$extensions": {
54+
"org.primer.figma": {
55+
"collection": "typography",
56+
"scopes": ["all"]
57+
}
58+
}
5259
},
5360
"lineHeight": {
5461
"$value": 1.4,
@@ -65,7 +72,13 @@
6572
},
6673
"weight": {
6774
"$value": "{base.text.weight.medium}",
68-
"$type": "fontWeight"
75+
"$type": "fontWeight",
76+
"$extensions": {
77+
"org.primer.figma": {
78+
"collection": "typography",
79+
"scopes": ["all"]
80+
}
81+
}
6982
},
7083
"shorthand": {
7184
"$value": {
@@ -82,15 +95,33 @@
8295
"size": {
8396
"large": {
8497
"$value": "32px",
85-
"$type": "dimension"
98+
"$type": "dimension",
99+
"$extensions": {
100+
"org.primer.figma": {
101+
"collection": "typography",
102+
"scopes": ["all"]
103+
}
104+
}
86105
},
87106
"medium": {
88107
"$value": "20px",
89-
"$type": "dimension"
108+
"$type": "dimension",
109+
"$extensions": {
110+
"org.primer.figma": {
111+
"collection": "typography",
112+
"scopes": ["all"]
113+
}
114+
}
90115
},
91116
"small": {
92117
"$value": "16px",
93-
"$type": "dimension"
118+
"$type": "dimension",
119+
"$extensions": {
120+
"org.primer.figma": {
121+
"collection": "typography",
122+
"scopes": ["all"]
123+
}
124+
}
94125
}
95126
},
96127
"lineHeight": {
@@ -137,15 +168,33 @@
137168
"weight": {
138169
"large": {
139170
"$value": "{base.text.weight.semibold}",
140-
"$type": "fontWeight"
171+
"$type": "fontWeight",
172+
"$extensions": {
173+
"org.primer.figma": {
174+
"collection": "typography",
175+
"scopes": ["all"]
176+
}
177+
}
141178
},
142179
"medium": {
143180
"$value": "{base.text.weight.semibold}",
144-
"$type": "fontWeight"
181+
"$type": "fontWeight",
182+
"$extensions": {
183+
"org.primer.figma": {
184+
"collection": "typography",
185+
"scopes": ["all"]
186+
}
187+
}
145188
},
146189
"small": {
147190
"$value": "{base.text.weight.semibold}",
148-
"$type": "fontWeight"
191+
"$type": "fontWeight",
192+
"$extensions": {
193+
"org.primer.figma": {
194+
"collection": "typography",
195+
"scopes": ["all"]
196+
}
197+
}
149198
}
150199
},
151200
"shorthand": {
@@ -184,15 +233,33 @@
184233
"subtitle": {
185234
"size": {
186235
"$value": "20px",
187-
"$type": "dimension"
236+
"$type": "dimension",
237+
"$extensions": {
238+
"org.primer.figma": {
239+
"collection": "typography",
240+
"scopes": ["all"]
241+
}
242+
}
188243
},
189244
"lineHeight": {
190245
"$value": 1.6,
191-
"$type": "number"
246+
"$type": "number",
247+
"$extensions": {
248+
"org.primer.figma": {
249+
"collection": "typography",
250+
"scopes": ["all"]
251+
}
252+
}
192253
},
193254
"weight": {
194255
"$value": "{base.text.weight.normal}",
195-
"$type": "fontWeight"
256+
"$type": "fontWeight",
257+
"$extensions": {
258+
"org.primer.figma": {
259+
"collection": "typography",
260+
"scopes": ["all"]
261+
}
262+
}
196263
},
197264
"shorthand": {
198265
"$value": {
@@ -209,15 +276,33 @@
209276
"size": {
210277
"large": {
211278
"$value": "16px",
212-
"$type": "dimension"
279+
"$type": "dimension",
280+
"$extensions": {
281+
"org.primer.figma": {
282+
"collection": "typography",
283+
"scopes": ["all"]
284+
}
285+
}
213286
},
214287
"medium": {
215288
"$value": "14px",
216-
"$type": "dimension"
289+
"$type": "dimension",
290+
"$extensions": {
291+
"org.primer.figma": {
292+
"collection": "typography",
293+
"scopes": ["all"]
294+
}
295+
}
217296
},
218297
"small": {
219298
"$value": "12px",
220-
"$type": "dimension"
299+
"$type": "dimension",
300+
"$extensions": {
301+
"org.primer.figma": {
302+
"collection": "typography",
303+
"scopes": ["all"]
304+
}
305+
}
221306
}
222307
},
223308
"lineHeight": {
@@ -301,7 +386,13 @@
301386
"caption": {
302387
"size": {
303388
"$value": "12px",
304-
"$type": "dimension"
389+
"$type": "dimension",
390+
"$extensions": {
391+
"org.primer.figma": {
392+
"collection": "typography",
393+
"scopes": ["all"]
394+
}
395+
}
305396
},
306397
"lineHeight": {
307398
"$value": 1.3333,
@@ -318,7 +409,13 @@
318409
},
319410
"weight": {
320411
"$value": "{base.text.weight.normal}",
321-
"$type": "fontWeight"
412+
"$type": "fontWeight",
413+
"$extensions": {
414+
"org.primer.figma": {
415+
"collection": "typography",
416+
"scopes": ["all"]
417+
}
418+
}
322419
},
323420
"shorthand": {
324421
"$value": {
@@ -334,7 +431,13 @@
334431
"codeBlock": {
335432
"size": {
336433
"$value": "13px",
337-
"$type": "dimension"
434+
"$type": "dimension",
435+
"$extensions": {
436+
"org.primer.figma": {
437+
"collection": "typography",
438+
"scopes": ["all"]
439+
}
440+
}
338441
},
339442
"lineHeight": {
340443
"$value": 1.5385,
@@ -351,7 +454,13 @@
351454
},
352455
"weight": {
353456
"$value": "{base.text.weight.normal}",
354-
"$type": "fontWeight"
457+
"$type": "fontWeight",
458+
"$extensions": {
459+
"org.primer.figma": {
460+
"collection": "typography",
461+
"scopes": ["all"]
462+
}
463+
}
355464
},
356465
"shorthand": {
357466
"$value": {
@@ -367,11 +476,23 @@
367476
"codeInline": {
368477
"size": {
369478
"$value": "0.9285em",
370-
"$type": "dimension"
479+
"$type": "dimension",
480+
"$extensions": {
481+
"org.primer.figma": {
482+
"collection": "typography",
483+
"scopes": ["all"]
484+
}
485+
}
371486
},
372487
"weight": {
373488
"$value": "{base.text.weight.normal}",
374-
"$type": "fontWeight"
489+
"$type": "fontWeight",
490+
"$extensions": {
491+
"org.primer.figma": {
492+
"collection": "typography",
493+
"scopes": ["all"]
494+
}
495+
}
375496
},
376497
"shorthand": {
377498
"$value": {

0 commit comments

Comments
 (0)