@primer/primitives 11.3.2 → 11.4.0-rc.7bb41c84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/build/schemas/dimensionToken.js +1 -1
- package/dist/build/schemas/dimensionValue.js +1 -1
- package/dist/css/base/typography/typography.css +11 -0
- package/dist/css/functional/typography/typography.css +20 -20
- package/dist/docs/base/typography/typography.json +319 -0
- package/dist/docs/functional/typography/typography.json +35 -35
- package/dist/fallbacks/base/typography/typography.json +12 -1
- package/dist/fallbacks/functional/typography/typography.json +15 -15
- package/dist/figma/typography/typography.json +140 -19
- package/dist/styleLint/base/typography/typography.json +319 -0
- package/dist/styleLint/functional/typography/typography.json +47 -47
- package/package.json +1 -1
- package/src/tokens/base/typography/typography.json5 +125 -0
- package/src/tokens/functional/typography/typography.json5 +20 -20
|
@@ -1,4 +1,70 @@
|
|
|
1
1
|
[
|
|
2
|
+
{
|
|
3
|
+
"name": "base/text/size/xs",
|
|
4
|
+
"value": 12,
|
|
5
|
+
"type": "FLOAT",
|
|
6
|
+
"description": "12px - Smallest text size for captions and compact UI elements.",
|
|
7
|
+
"refId": "base/typography/base/text/size/xs",
|
|
8
|
+
"collection": "base/typography",
|
|
9
|
+
"mode": "default",
|
|
10
|
+
"group": "base/typography",
|
|
11
|
+
"scopes": ["FONT_SIZE"]
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "base/text/size/sm",
|
|
15
|
+
"value": 14,
|
|
16
|
+
"type": "FLOAT",
|
|
17
|
+
"description": "14px - Default body text size for UI.",
|
|
18
|
+
"refId": "base/typography/base/text/size/sm",
|
|
19
|
+
"collection": "base/typography",
|
|
20
|
+
"mode": "default",
|
|
21
|
+
"group": "base/typography",
|
|
22
|
+
"scopes": ["FONT_SIZE"]
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "base/text/size/md",
|
|
26
|
+
"value": 16,
|
|
27
|
+
"type": "FLOAT",
|
|
28
|
+
"description": "16px - Large body text and small titles.",
|
|
29
|
+
"refId": "base/typography/base/text/size/md",
|
|
30
|
+
"collection": "base/typography",
|
|
31
|
+
"mode": "default",
|
|
32
|
+
"group": "base/typography",
|
|
33
|
+
"scopes": ["FONT_SIZE"]
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "base/text/size/lg",
|
|
37
|
+
"value": 20,
|
|
38
|
+
"type": "FLOAT",
|
|
39
|
+
"description": "20px - Medium titles and subtitles.",
|
|
40
|
+
"refId": "base/typography/base/text/size/lg",
|
|
41
|
+
"collection": "base/typography",
|
|
42
|
+
"mode": "default",
|
|
43
|
+
"group": "base/typography",
|
|
44
|
+
"scopes": ["FONT_SIZE"]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "base/text/size/xl",
|
|
48
|
+
"value": 32,
|
|
49
|
+
"type": "FLOAT",
|
|
50
|
+
"description": "32px - Large titles and page headings.",
|
|
51
|
+
"refId": "base/typography/base/text/size/xl",
|
|
52
|
+
"collection": "base/typography",
|
|
53
|
+
"mode": "default",
|
|
54
|
+
"group": "base/typography",
|
|
55
|
+
"scopes": ["FONT_SIZE"]
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "base/text/size/2xl",
|
|
59
|
+
"value": 40,
|
|
60
|
+
"type": "FLOAT",
|
|
61
|
+
"description": "40px - Display text for hero sections.",
|
|
62
|
+
"refId": "base/typography/base/text/size/2xl",
|
|
63
|
+
"collection": "base/typography",
|
|
64
|
+
"mode": "default",
|
|
65
|
+
"group": "base/typography",
|
|
66
|
+
"scopes": ["FONT_SIZE"]
|
|
67
|
+
},
|
|
2
68
|
{
|
|
3
69
|
"name": "base/text/weight/light",
|
|
4
70
|
"value": 300,
|
|
@@ -39,6 +105,41 @@
|
|
|
39
105
|
"group": "base/typography",
|
|
40
106
|
"scopes": ["FONT_WEIGHT"]
|
|
41
107
|
},
|
|
108
|
+
{
|
|
109
|
+
"name": "tight",
|
|
110
|
+
"value": 1.25,
|
|
111
|
+
"type": "FLOAT",
|
|
112
|
+
"description": "Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability.",
|
|
113
|
+
"refId": "tight"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"name": "snug",
|
|
117
|
+
"value": 1.375,
|
|
118
|
+
"type": "FLOAT",
|
|
119
|
+
"description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.",
|
|
120
|
+
"refId": "snug"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "normal",
|
|
124
|
+
"value": 1.5,
|
|
125
|
+
"type": "FLOAT",
|
|
126
|
+
"description": "Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick.",
|
|
127
|
+
"refId": "normal"
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"name": "relaxed",
|
|
131
|
+
"value": 1.625,
|
|
132
|
+
"type": "FLOAT",
|
|
133
|
+
"description": "Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room.",
|
|
134
|
+
"refId": "relaxed"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"name": "loose",
|
|
138
|
+
"value": 1.75,
|
|
139
|
+
"type": "FLOAT",
|
|
140
|
+
"description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
|
|
141
|
+
"refId": "loose"
|
|
142
|
+
},
|
|
42
143
|
{
|
|
43
144
|
"name": "fontStack/system",
|
|
44
145
|
"value": "SF Pro Text",
|
|
@@ -81,15 +182,17 @@
|
|
|
81
182
|
},
|
|
82
183
|
{
|
|
83
184
|
"name": "lineBoxHeight",
|
|
84
|
-
"value": 1.
|
|
185
|
+
"value": 1.375,
|
|
85
186
|
"type": "FLOAT",
|
|
86
|
-
"refId": "lineBoxHeight"
|
|
187
|
+
"refId": "lineBoxHeight",
|
|
188
|
+
"reference": "base/text/lineHeight/snug"
|
|
87
189
|
},
|
|
88
190
|
{
|
|
89
191
|
"name": "text/display/size",
|
|
90
192
|
"value": 40,
|
|
91
193
|
"type": "FLOAT",
|
|
92
194
|
"refId": "typography/text/display/size",
|
|
195
|
+
"reference": "base/typography/base/text/size/2xl",
|
|
93
196
|
"collection": "typography",
|
|
94
197
|
"mode": "default",
|
|
95
198
|
"group": "typography",
|
|
@@ -97,9 +200,10 @@
|
|
|
97
200
|
},
|
|
98
201
|
{
|
|
99
202
|
"name": "lineHeight",
|
|
100
|
-
"value": 1.
|
|
203
|
+
"value": 1.375,
|
|
101
204
|
"type": "FLOAT",
|
|
102
|
-
"refId": "lineHeight"
|
|
205
|
+
"refId": "lineHeight",
|
|
206
|
+
"reference": "base/text/lineHeight/snug"
|
|
103
207
|
},
|
|
104
208
|
{
|
|
105
209
|
"name": "text/display/weight",
|
|
@@ -117,6 +221,7 @@
|
|
|
117
221
|
"value": 32,
|
|
118
222
|
"type": "FLOAT",
|
|
119
223
|
"refId": "typography/text/title/size/large",
|
|
224
|
+
"reference": "base/typography/base/text/size/xl",
|
|
120
225
|
"collection": "typography",
|
|
121
226
|
"mode": "default",
|
|
122
227
|
"group": "typography",
|
|
@@ -127,6 +232,7 @@
|
|
|
127
232
|
"value": 20,
|
|
128
233
|
"type": "FLOAT",
|
|
129
234
|
"refId": "typography/text/title/size/medium",
|
|
235
|
+
"reference": "base/typography/base/text/size/lg",
|
|
130
236
|
"collection": "typography",
|
|
131
237
|
"mode": "default",
|
|
132
238
|
"group": "typography",
|
|
@@ -137,6 +243,7 @@
|
|
|
137
243
|
"value": 16,
|
|
138
244
|
"type": "FLOAT",
|
|
139
245
|
"refId": "typography/text/title/size/small",
|
|
246
|
+
"reference": "base/typography/base/text/size/md",
|
|
140
247
|
"collection": "typography",
|
|
141
248
|
"mode": "default",
|
|
142
249
|
"group": "typography",
|
|
@@ -146,19 +253,22 @@
|
|
|
146
253
|
"name": "large",
|
|
147
254
|
"value": 1.5,
|
|
148
255
|
"type": "FLOAT",
|
|
149
|
-
"refId": "large"
|
|
256
|
+
"refId": "large",
|
|
257
|
+
"reference": "base/text/lineHeight/normal"
|
|
150
258
|
},
|
|
151
259
|
{
|
|
152
260
|
"name": "medium",
|
|
153
|
-
"value": 1.
|
|
261
|
+
"value": 1.625,
|
|
154
262
|
"type": "FLOAT",
|
|
155
|
-
"refId": "medium"
|
|
263
|
+
"refId": "medium",
|
|
264
|
+
"reference": "base/text/lineHeight/relaxed"
|
|
156
265
|
},
|
|
157
266
|
{
|
|
158
267
|
"name": "small",
|
|
159
268
|
"value": 1.5,
|
|
160
269
|
"type": "FLOAT",
|
|
161
|
-
"refId": "small"
|
|
270
|
+
"refId": "small",
|
|
271
|
+
"reference": "base/text/lineHeight/normal"
|
|
162
272
|
},
|
|
163
273
|
{
|
|
164
274
|
"name": "text/title/weight/large",
|
|
@@ -198,6 +308,7 @@
|
|
|
198
308
|
"value": 20,
|
|
199
309
|
"type": "FLOAT",
|
|
200
310
|
"refId": "typography/text/subtitle/size",
|
|
311
|
+
"reference": "base/typography/base/text/size/lg",
|
|
201
312
|
"collection": "typography",
|
|
202
313
|
"mode": "default",
|
|
203
314
|
"group": "typography",
|
|
@@ -205,9 +316,10 @@
|
|
|
205
316
|
},
|
|
206
317
|
{
|
|
207
318
|
"name": "lineHeight",
|
|
208
|
-
"value": 1.
|
|
319
|
+
"value": 1.625,
|
|
209
320
|
"type": "FLOAT",
|
|
210
|
-
"refId": "lineHeight"
|
|
321
|
+
"refId": "lineHeight",
|
|
322
|
+
"reference": "base/text/lineHeight/relaxed"
|
|
211
323
|
},
|
|
212
324
|
{
|
|
213
325
|
"name": "text/subtitle/weight",
|
|
@@ -225,6 +337,7 @@
|
|
|
225
337
|
"value": 16,
|
|
226
338
|
"type": "FLOAT",
|
|
227
339
|
"refId": "typography/text/body/size/large",
|
|
340
|
+
"reference": "base/typography/base/text/size/md",
|
|
228
341
|
"collection": "typography",
|
|
229
342
|
"mode": "default",
|
|
230
343
|
"group": "typography",
|
|
@@ -235,6 +348,7 @@
|
|
|
235
348
|
"value": 14,
|
|
236
349
|
"type": "FLOAT",
|
|
237
350
|
"refId": "typography/text/body/size/medium",
|
|
351
|
+
"reference": "base/typography/base/text/size/sm",
|
|
238
352
|
"collection": "typography",
|
|
239
353
|
"mode": "default",
|
|
240
354
|
"group": "typography",
|
|
@@ -245,6 +359,7 @@
|
|
|
245
359
|
"value": 12,
|
|
246
360
|
"type": "FLOAT",
|
|
247
361
|
"refId": "typography/text/body/size/small",
|
|
362
|
+
"reference": "base/typography/base/text/size/xs",
|
|
248
363
|
"collection": "typography",
|
|
249
364
|
"mode": "default",
|
|
250
365
|
"group": "typography",
|
|
@@ -254,19 +369,22 @@
|
|
|
254
369
|
"name": "large",
|
|
255
370
|
"value": 1.5,
|
|
256
371
|
"type": "FLOAT",
|
|
257
|
-
"refId": "large"
|
|
372
|
+
"refId": "large",
|
|
373
|
+
"reference": "base/text/lineHeight/normal"
|
|
258
374
|
},
|
|
259
375
|
{
|
|
260
376
|
"name": "medium",
|
|
261
|
-
"value": 1.
|
|
377
|
+
"value": 1.5,
|
|
262
378
|
"type": "FLOAT",
|
|
263
|
-
"refId": "medium"
|
|
379
|
+
"refId": "medium",
|
|
380
|
+
"reference": "base/text/lineHeight/normal"
|
|
264
381
|
},
|
|
265
382
|
{
|
|
266
383
|
"name": "small",
|
|
267
|
-
"value": 1.
|
|
384
|
+
"value": 1.625,
|
|
268
385
|
"type": "FLOAT",
|
|
269
|
-
"refId": "small"
|
|
386
|
+
"refId": "small",
|
|
387
|
+
"reference": "base/text/lineHeight/relaxed"
|
|
270
388
|
},
|
|
271
389
|
{
|
|
272
390
|
"name": "text/body/weight",
|
|
@@ -284,6 +402,7 @@
|
|
|
284
402
|
"value": 12,
|
|
285
403
|
"type": "FLOAT",
|
|
286
404
|
"refId": "typography/text/caption/size",
|
|
405
|
+
"reference": "base/typography/base/text/size/xs",
|
|
287
406
|
"collection": "typography",
|
|
288
407
|
"mode": "default",
|
|
289
408
|
"group": "typography",
|
|
@@ -291,9 +410,10 @@
|
|
|
291
410
|
},
|
|
292
411
|
{
|
|
293
412
|
"name": "lineHeight",
|
|
294
|
-
"value": 1.
|
|
413
|
+
"value": 1.25,
|
|
295
414
|
"type": "FLOAT",
|
|
296
|
-
"refId": "lineHeight"
|
|
415
|
+
"refId": "lineHeight",
|
|
416
|
+
"reference": "base/text/lineHeight/tight"
|
|
297
417
|
},
|
|
298
418
|
{
|
|
299
419
|
"name": "text/caption/weight",
|
|
@@ -318,9 +438,10 @@
|
|
|
318
438
|
},
|
|
319
439
|
{
|
|
320
440
|
"name": "lineHeight",
|
|
321
|
-
"value": 1.
|
|
441
|
+
"value": 1.5,
|
|
322
442
|
"type": "FLOAT",
|
|
323
|
-
"refId": "lineHeight"
|
|
443
|
+
"refId": "lineHeight",
|
|
444
|
+
"reference": "base/text/lineHeight/normal"
|
|
324
445
|
},
|
|
325
446
|
{
|
|
326
447
|
"name": "text/codeBlock/weight",
|
|
@@ -1,4 +1,323 @@
|
|
|
1
1
|
{
|
|
2
|
+
"base-text-lineHeight-loose": {
|
|
3
|
+
"key": "{base.text.lineHeight.loose}",
|
|
4
|
+
"$value": 1.75,
|
|
5
|
+
"$type": "number",
|
|
6
|
+
"$description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
|
|
7
|
+
"$extensions": {
|
|
8
|
+
"org.primer.figma": {
|
|
9
|
+
"collection": "typography",
|
|
10
|
+
"scopes": ["lineHeight"]
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
14
|
+
"isSource": true,
|
|
15
|
+
"original": {
|
|
16
|
+
"$value": 1.75,
|
|
17
|
+
"$type": "number",
|
|
18
|
+
"$description": "Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.",
|
|
19
|
+
"$extensions": {
|
|
20
|
+
"org.primer.figma": {
|
|
21
|
+
"collection": "typography",
|
|
22
|
+
"scopes": ["lineHeight"]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"key": "{base.text.lineHeight.loose}"
|
|
26
|
+
},
|
|
27
|
+
"name": "base-text-lineHeight-loose",
|
|
28
|
+
"attributes": {},
|
|
29
|
+
"path": ["base", "text", "lineHeight", "loose"]
|
|
30
|
+
},
|
|
31
|
+
"base-text-lineHeight-normal": {
|
|
32
|
+
"key": "{base.text.lineHeight.normal}",
|
|
33
|
+
"$value": 1.5,
|
|
34
|
+
"$type": "number",
|
|
35
|
+
"$description": "Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick.",
|
|
36
|
+
"$extensions": {
|
|
37
|
+
"org.primer.figma": {
|
|
38
|
+
"collection": "typography",
|
|
39
|
+
"scopes": ["lineHeight"]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
43
|
+
"isSource": true,
|
|
44
|
+
"original": {
|
|
45
|
+
"$value": 1.5,
|
|
46
|
+
"$type": "number",
|
|
47
|
+
"$description": "Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick.",
|
|
48
|
+
"$extensions": {
|
|
49
|
+
"org.primer.figma": {
|
|
50
|
+
"collection": "typography",
|
|
51
|
+
"scopes": ["lineHeight"]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"key": "{base.text.lineHeight.normal}"
|
|
55
|
+
},
|
|
56
|
+
"name": "base-text-lineHeight-normal",
|
|
57
|
+
"attributes": {},
|
|
58
|
+
"path": ["base", "text", "lineHeight", "normal"]
|
|
59
|
+
},
|
|
60
|
+
"base-text-lineHeight-relaxed": {
|
|
61
|
+
"key": "{base.text.lineHeight.relaxed}",
|
|
62
|
+
"$value": 1.625,
|
|
63
|
+
"$type": "number",
|
|
64
|
+
"$description": "Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room.",
|
|
65
|
+
"$extensions": {
|
|
66
|
+
"org.primer.figma": {
|
|
67
|
+
"collection": "typography",
|
|
68
|
+
"scopes": ["lineHeight"]
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
72
|
+
"isSource": true,
|
|
73
|
+
"original": {
|
|
74
|
+
"$value": 1.625,
|
|
75
|
+
"$type": "number",
|
|
76
|
+
"$description": "Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room.",
|
|
77
|
+
"$extensions": {
|
|
78
|
+
"org.primer.figma": {
|
|
79
|
+
"collection": "typography",
|
|
80
|
+
"scopes": ["lineHeight"]
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"key": "{base.text.lineHeight.relaxed}"
|
|
84
|
+
},
|
|
85
|
+
"name": "base-text-lineHeight-relaxed",
|
|
86
|
+
"attributes": {},
|
|
87
|
+
"path": ["base", "text", "lineHeight", "relaxed"]
|
|
88
|
+
},
|
|
89
|
+
"base-text-lineHeight-snug": {
|
|
90
|
+
"key": "{base.text.lineHeight.snug}",
|
|
91
|
+
"$value": 1.375,
|
|
92
|
+
"$type": "number",
|
|
93
|
+
"$description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.",
|
|
94
|
+
"$extensions": {
|
|
95
|
+
"org.primer.figma": {
|
|
96
|
+
"collection": "typography",
|
|
97
|
+
"scopes": ["lineHeight"]
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
101
|
+
"isSource": true,
|
|
102
|
+
"original": {
|
|
103
|
+
"$value": 1.375,
|
|
104
|
+
"$type": "number",
|
|
105
|
+
"$description": "Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.",
|
|
106
|
+
"$extensions": {
|
|
107
|
+
"org.primer.figma": {
|
|
108
|
+
"collection": "typography",
|
|
109
|
+
"scopes": ["lineHeight"]
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
"key": "{base.text.lineHeight.snug}"
|
|
113
|
+
},
|
|
114
|
+
"name": "base-text-lineHeight-snug",
|
|
115
|
+
"attributes": {},
|
|
116
|
+
"path": ["base", "text", "lineHeight", "snug"]
|
|
117
|
+
},
|
|
118
|
+
"base-text-lineHeight-tight": {
|
|
119
|
+
"key": "{base.text.lineHeight.tight}",
|
|
120
|
+
"$value": 1.25,
|
|
121
|
+
"$type": "number",
|
|
122
|
+
"$description": "Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability.",
|
|
123
|
+
"$extensions": {
|
|
124
|
+
"org.primer.figma": {
|
|
125
|
+
"collection": "typography",
|
|
126
|
+
"scopes": ["lineHeight"]
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
130
|
+
"isSource": true,
|
|
131
|
+
"original": {
|
|
132
|
+
"$value": 1.25,
|
|
133
|
+
"$type": "number",
|
|
134
|
+
"$description": "Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability.",
|
|
135
|
+
"$extensions": {
|
|
136
|
+
"org.primer.figma": {
|
|
137
|
+
"collection": "typography",
|
|
138
|
+
"scopes": ["lineHeight"]
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
"key": "{base.text.lineHeight.tight}"
|
|
142
|
+
},
|
|
143
|
+
"name": "base-text-lineHeight-tight",
|
|
144
|
+
"attributes": {},
|
|
145
|
+
"path": ["base", "text", "lineHeight", "tight"]
|
|
146
|
+
},
|
|
147
|
+
"base-text-size-2xl": {
|
|
148
|
+
"key": "{base.text.size.2xl}",
|
|
149
|
+
"$value": [null, "40px"],
|
|
150
|
+
"$type": "dimension",
|
|
151
|
+
"$description": "40px - Display text for hero sections.",
|
|
152
|
+
"$extensions": {
|
|
153
|
+
"org.primer.figma": {
|
|
154
|
+
"collection": "base/typography",
|
|
155
|
+
"scopes": ["fontSize"]
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
159
|
+
"isSource": true,
|
|
160
|
+
"original": {
|
|
161
|
+
"$value": "2.5rem",
|
|
162
|
+
"$type": "dimension",
|
|
163
|
+
"$description": "40px - Display text for hero sections.",
|
|
164
|
+
"$extensions": {
|
|
165
|
+
"org.primer.figma": {
|
|
166
|
+
"collection": "base/typography",
|
|
167
|
+
"scopes": ["fontSize"]
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
"key": "{base.text.size.2xl}"
|
|
171
|
+
},
|
|
172
|
+
"name": "base-text-size-2xl",
|
|
173
|
+
"attributes": {},
|
|
174
|
+
"path": ["base", "text", "size", "2xl"]
|
|
175
|
+
},
|
|
176
|
+
"base-text-size-lg": {
|
|
177
|
+
"key": "{base.text.size.lg}",
|
|
178
|
+
"$value": [null, "20px"],
|
|
179
|
+
"$type": "dimension",
|
|
180
|
+
"$description": "20px - Medium titles and subtitles.",
|
|
181
|
+
"$extensions": {
|
|
182
|
+
"org.primer.figma": {
|
|
183
|
+
"collection": "base/typography",
|
|
184
|
+
"scopes": ["fontSize"]
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
188
|
+
"isSource": true,
|
|
189
|
+
"original": {
|
|
190
|
+
"$value": "1.25rem",
|
|
191
|
+
"$type": "dimension",
|
|
192
|
+
"$description": "20px - Medium titles and subtitles.",
|
|
193
|
+
"$extensions": {
|
|
194
|
+
"org.primer.figma": {
|
|
195
|
+
"collection": "base/typography",
|
|
196
|
+
"scopes": ["fontSize"]
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
"key": "{base.text.size.lg}"
|
|
200
|
+
},
|
|
201
|
+
"name": "base-text-size-lg",
|
|
202
|
+
"attributes": {},
|
|
203
|
+
"path": ["base", "text", "size", "lg"]
|
|
204
|
+
},
|
|
205
|
+
"base-text-size-md": {
|
|
206
|
+
"key": "{base.text.size.md}",
|
|
207
|
+
"$value": [null, "16px"],
|
|
208
|
+
"$type": "dimension",
|
|
209
|
+
"$description": "16px - Large body text and small titles.",
|
|
210
|
+
"$extensions": {
|
|
211
|
+
"org.primer.figma": {
|
|
212
|
+
"collection": "base/typography",
|
|
213
|
+
"scopes": ["fontSize"]
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
217
|
+
"isSource": true,
|
|
218
|
+
"original": {
|
|
219
|
+
"$value": "1rem",
|
|
220
|
+
"$type": "dimension",
|
|
221
|
+
"$description": "16px - Large body text and small titles.",
|
|
222
|
+
"$extensions": {
|
|
223
|
+
"org.primer.figma": {
|
|
224
|
+
"collection": "base/typography",
|
|
225
|
+
"scopes": ["fontSize"]
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
"key": "{base.text.size.md}"
|
|
229
|
+
},
|
|
230
|
+
"name": "base-text-size-md",
|
|
231
|
+
"attributes": {},
|
|
232
|
+
"path": ["base", "text", "size", "md"]
|
|
233
|
+
},
|
|
234
|
+
"base-text-size-sm": {
|
|
235
|
+
"key": "{base.text.size.sm}",
|
|
236
|
+
"$value": [null, "14px"],
|
|
237
|
+
"$type": "dimension",
|
|
238
|
+
"$description": "14px - Default body text size for UI.",
|
|
239
|
+
"$extensions": {
|
|
240
|
+
"org.primer.figma": {
|
|
241
|
+
"collection": "base/typography",
|
|
242
|
+
"scopes": ["fontSize"]
|
|
243
|
+
}
|
|
244
|
+
},
|
|
245
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
246
|
+
"isSource": true,
|
|
247
|
+
"original": {
|
|
248
|
+
"$value": "0.875rem",
|
|
249
|
+
"$type": "dimension",
|
|
250
|
+
"$description": "14px - Default body text size for UI.",
|
|
251
|
+
"$extensions": {
|
|
252
|
+
"org.primer.figma": {
|
|
253
|
+
"collection": "base/typography",
|
|
254
|
+
"scopes": ["fontSize"]
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
"key": "{base.text.size.sm}"
|
|
258
|
+
},
|
|
259
|
+
"name": "base-text-size-sm",
|
|
260
|
+
"attributes": {},
|
|
261
|
+
"path": ["base", "text", "size", "sm"]
|
|
262
|
+
},
|
|
263
|
+
"base-text-size-xl": {
|
|
264
|
+
"key": "{base.text.size.xl}",
|
|
265
|
+
"$value": [null, "32px"],
|
|
266
|
+
"$type": "dimension",
|
|
267
|
+
"$description": "32px - Large titles and page headings.",
|
|
268
|
+
"$extensions": {
|
|
269
|
+
"org.primer.figma": {
|
|
270
|
+
"collection": "base/typography",
|
|
271
|
+
"scopes": ["fontSize"]
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
275
|
+
"isSource": true,
|
|
276
|
+
"original": {
|
|
277
|
+
"$value": "2rem",
|
|
278
|
+
"$type": "dimension",
|
|
279
|
+
"$description": "32px - Large titles and page headings.",
|
|
280
|
+
"$extensions": {
|
|
281
|
+
"org.primer.figma": {
|
|
282
|
+
"collection": "base/typography",
|
|
283
|
+
"scopes": ["fontSize"]
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
"key": "{base.text.size.xl}"
|
|
287
|
+
},
|
|
288
|
+
"name": "base-text-size-xl",
|
|
289
|
+
"attributes": {},
|
|
290
|
+
"path": ["base", "text", "size", "xl"]
|
|
291
|
+
},
|
|
292
|
+
"base-text-size-xs": {
|
|
293
|
+
"key": "{base.text.size.xs}",
|
|
294
|
+
"$value": [null, "12px"],
|
|
295
|
+
"$type": "dimension",
|
|
296
|
+
"$description": "12px - Smallest text size for captions and compact UI elements.",
|
|
297
|
+
"$extensions": {
|
|
298
|
+
"org.primer.figma": {
|
|
299
|
+
"collection": "base/typography",
|
|
300
|
+
"scopes": ["fontSize"]
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
"filePath": "src/tokens/base/typography/typography.json5",
|
|
304
|
+
"isSource": true,
|
|
305
|
+
"original": {
|
|
306
|
+
"$value": "0.75rem",
|
|
307
|
+
"$type": "dimension",
|
|
308
|
+
"$description": "12px - Smallest text size for captions and compact UI elements.",
|
|
309
|
+
"$extensions": {
|
|
310
|
+
"org.primer.figma": {
|
|
311
|
+
"collection": "base/typography",
|
|
312
|
+
"scopes": ["fontSize"]
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
"key": "{base.text.size.xs}"
|
|
316
|
+
},
|
|
317
|
+
"name": "base-text-size-xs",
|
|
318
|
+
"attributes": {},
|
|
319
|
+
"path": ["base", "text", "size", "xs"]
|
|
320
|
+
},
|
|
2
321
|
"base-text-weight-light": {
|
|
3
322
|
"key": "{base.text.weight.light}",
|
|
4
323
|
"$type": "fontWeight",
|