@primer/primitives 7.17.0-rc.34cd1021 → 7.17.0-rc.37869577
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/README.md +1 -1
- package/dist/css/functional/typography/typography.css +1 -1
- package/dist/docs/base/typography/typography.json +4 -52
- package/dist/docs/functional/themes/dark-colorblind.json +78 -78
- package/dist/docs/functional/themes/dark-dimmed.json +73 -73
- package/dist/docs/functional/themes/dark-high-contrast.json +75 -75
- package/dist/docs/functional/themes/dark-tritanopia.json +78 -78
- package/dist/docs/functional/themes/dark.json +73 -73
- package/dist/docs/functional/themes/light-colorblind.json +76 -76
- package/dist/docs/functional/themes/light-high-contrast.json +70 -70
- package/dist/docs/functional/themes/light-tritanopia.json +76 -76
- package/dist/docs/functional/themes/light.json +71 -71
- package/dist/docs/functional/typography/typography.json +35 -439
- package/dist/fallbacks/functional/typography/typography.json +1 -1
- package/dist/figma/figma.json +0 -8
- package/dist/figma/scales/dark-dimmed.json +20 -20
- package/dist/figma/scales/dark-high-constrast.json +20 -20
- package/dist/figma/scales/dark.json +20 -20
- package/dist/figma/scales/light-high-constrast.json +20 -20
- package/dist/figma/scales/light.json +20 -20
- package/dist/figma/themes/dark-colorblind.json +70 -70
- package/dist/figma/themes/dark-dimmed.json +65 -65
- package/dist/figma/themes/dark-high-contrast.json +69 -69
- package/dist/figma/themes/dark-tritanopia.json +70 -70
- package/dist/figma/themes/dark.json +65 -65
- package/dist/figma/themes/light-colorblind.json +59 -59
- package/dist/figma/themes/light-high-contrast.json +55 -55
- package/dist/figma/themes/light-tritanopia.json +59 -59
- package/dist/figma/themes/light.json +54 -54
- package/dist/figma/typography/typography.json +1 -329
- package/dist/internalCss/dark-colorblind.css +20 -20
- package/dist/internalCss/dark-dimmed.css +20 -20
- package/dist/internalCss/dark-high-contrast.css +20 -20
- package/dist/internalCss/dark-tritanopia.css +20 -20
- package/dist/internalCss/dark.css +20 -20
- package/dist/internalCss/light-colorblind.css +20 -20
- package/dist/internalCss/light-high-contrast.css +20 -20
- package/dist/internalCss/light-tritanopia.css +20 -20
- package/dist/internalCss/light.css +20 -20
- package/dist/styleLint/base/typography/typography.json +4 -52
- package/dist/styleLint/functional/themes/dark-colorblind.json +78 -78
- package/dist/styleLint/functional/themes/dark-dimmed.json +73 -73
- package/dist/styleLint/functional/themes/dark-high-contrast.json +75 -75
- package/dist/styleLint/functional/themes/dark-tritanopia.json +78 -78
- package/dist/styleLint/functional/themes/dark.json +73 -73
- package/dist/styleLint/functional/themes/light-colorblind.json +76 -76
- package/dist/styleLint/functional/themes/light-high-contrast.json +70 -70
- package/dist/styleLint/functional/themes/light-tritanopia.json +76 -76
- package/dist/styleLint/functional/themes/light.json +71 -71
- package/dist/styleLint/functional/typography/typography.json +35 -439
- package/package.json +2 -2
- package/src/platforms/figma.ts +0 -1
- package/src/tokens/base/color/dark/dark.dimmed.json5 +1 -1
- package/src/tokens/base/color/dark/dark.high-contrast.json5 +1 -1
- package/src/tokens/base/color/dark/dark.json5 +1 -1
- package/src/tokens/base/color/light/light.high-contrast.json5 +1 -1
- package/src/tokens/base/color/light/light.json5 +1 -1
- package/src/tokens/base/typography/typography.json +4 -28
- package/src/tokens/functional/color/dark/app-dark.json5 +5 -5
- package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +17 -17
- package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -5
- package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +5 -5
- package/src/tokens/functional/color/dark/patterns-dark.json5 +42 -42
- package/src/tokens/functional/color/dark/primitives-dark.json5 +16 -16
- package/src/tokens/functional/color/dark/syntax-dark.json5 +13 -13
- package/src/tokens/functional/color/light/app-light.json5 +5 -5
- package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +25 -25
- package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -5
- package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +5 -5
- package/src/tokens/functional/color/light/patterns-light.json5 +30 -30
- package/src/tokens/functional/color/light/primitives-light.json5 +15 -15
- package/src/tokens/functional/color/light/syntax-light.json5 +14 -14
- package/src/tokens/functional/shadow/dark.json5 +1 -1
- package/src/tokens/functional/shadow/light.json5 +11 -11
- package/src/tokens/functional/typography/typography.json +32 -234
- package/src/transformers/floatToPixel.ts +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
color: {
|
|
3
3
|
ansi: {
|
|
4
4
|
black: {
|
|
5
|
-
$value: '{base.color.
|
|
5
|
+
$value: '{base.color.gray.9}',
|
|
6
6
|
$type: 'color',
|
|
7
7
|
$extensions: {
|
|
8
8
|
'org.primer.figma': {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
'black-bright': {
|
|
16
|
-
$value: '{base.color.
|
|
16
|
+
$value: '{base.color.gray.6}',
|
|
17
17
|
$type: 'color',
|
|
18
18
|
$extensions: {
|
|
19
19
|
'org.primer.figma': {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
},
|
|
26
26
|
white: {
|
|
27
|
-
$value: '{base.color.
|
|
27
|
+
$value: '{base.color.gray.5}',
|
|
28
28
|
$type: 'color',
|
|
29
29
|
$extensions: {
|
|
30
30
|
'org.primer.figma': {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
},
|
|
37
37
|
'white-bright': {
|
|
38
|
-
$value: '{base.color.
|
|
38
|
+
$value: '{base.color.gray.4}',
|
|
39
39
|
$type: 'color',
|
|
40
40
|
$extensions: {
|
|
41
41
|
'org.primer.figma': {
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
},
|
|
47
47
|
},
|
|
48
48
|
gray: {
|
|
49
|
-
$value: '{base.color.
|
|
49
|
+
$value: '{base.color.gray.5}',
|
|
50
50
|
$type: 'color',
|
|
51
51
|
$extensions: {
|
|
52
52
|
'org.primer.figma': {
|
|
@@ -192,7 +192,7 @@
|
|
|
192
192
|
prettylights: {
|
|
193
193
|
syntax: {
|
|
194
194
|
comment: {
|
|
195
|
-
$value: '{base.color.
|
|
195
|
+
$value: '{base.color.gray.6}',
|
|
196
196
|
$type: 'color',
|
|
197
197
|
$extensions: {
|
|
198
198
|
'org.primer.figma': {
|
|
@@ -238,7 +238,7 @@
|
|
|
238
238
|
storage: {
|
|
239
239
|
modifier: {
|
|
240
240
|
import: {
|
|
241
|
-
$value: '{base.color.
|
|
241
|
+
$value: '{base.color.gray.9}',
|
|
242
242
|
$type: 'color',
|
|
243
243
|
$extensions: {
|
|
244
244
|
'org.primer.figma': {
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
},
|
|
308
308
|
},
|
|
309
309
|
angle: {
|
|
310
|
-
$value: '{base.color.
|
|
310
|
+
$value: '{base.color.gray.6}',
|
|
311
311
|
$type: 'color',
|
|
312
312
|
$extensions: {
|
|
313
313
|
'org.primer.figma': {
|
|
@@ -321,7 +321,7 @@
|
|
|
321
321
|
invalid: {
|
|
322
322
|
illegal: {
|
|
323
323
|
text: {
|
|
324
|
-
$value: '{base.color.
|
|
324
|
+
$value: '{base.color.gray.0}',
|
|
325
325
|
$type: 'color',
|
|
326
326
|
$extensions: {
|
|
327
327
|
'org.primer.figma': {
|
|
@@ -347,7 +347,7 @@
|
|
|
347
347
|
carriage: {
|
|
348
348
|
return: {
|
|
349
349
|
text: {
|
|
350
|
-
$value: '{base.color.
|
|
350
|
+
$value: '{base.color.gray.0}',
|
|
351
351
|
$type: 'color',
|
|
352
352
|
$extensions: {
|
|
353
353
|
'org.primer.figma': {
|
|
@@ -405,7 +405,7 @@
|
|
|
405
405
|
},
|
|
406
406
|
},
|
|
407
407
|
italic: {
|
|
408
|
-
$value: '{base.color.
|
|
408
|
+
$value: '{base.color.gray.9}',
|
|
409
409
|
$type: 'color',
|
|
410
410
|
$extensions: {
|
|
411
411
|
'org.primer.figma': {
|
|
@@ -416,7 +416,7 @@
|
|
|
416
416
|
},
|
|
417
417
|
},
|
|
418
418
|
bold: {
|
|
419
|
-
$value: '{base.color.
|
|
419
|
+
$value: '{base.color.gray.9}',
|
|
420
420
|
$type: 'color',
|
|
421
421
|
$extensions: {
|
|
422
422
|
'org.primer.figma': {
|
|
@@ -500,7 +500,7 @@
|
|
|
500
500
|
},
|
|
501
501
|
ignored: {
|
|
502
502
|
text: {
|
|
503
|
-
$value: '{base.color.
|
|
503
|
+
$value: '{base.color.gray.1}',
|
|
504
504
|
$type: 'color',
|
|
505
505
|
$extensions: {
|
|
506
506
|
'org.primer.figma': {
|
|
@@ -541,7 +541,7 @@
|
|
|
541
541
|
sublimelinter: {
|
|
542
542
|
gutter: {
|
|
543
543
|
mark: {
|
|
544
|
-
$value: '{base.color.
|
|
544
|
+
$value: '{base.color.gray.4}',
|
|
545
545
|
$type: 'color',
|
|
546
546
|
$extensions: {
|
|
547
547
|
'org.primer.figma': {
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
medium: {
|
|
188
188
|
$value: [
|
|
189
189
|
{
|
|
190
|
-
color: '{base.color.
|
|
190
|
+
color: '{base.color.gray.7}',
|
|
191
191
|
alpha: 0.12,
|
|
192
192
|
offsetX: '0px',
|
|
193
193
|
offsetY: '3px',
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
spread: '1px',
|
|
218
218
|
},
|
|
219
219
|
{
|
|
220
|
-
color: '{base.color.
|
|
220
|
+
color: '{base.color.gray.7}',
|
|
221
221
|
alpha: 0.04,
|
|
222
222
|
offsetX: '0px',
|
|
223
223
|
offsetY: '6px',
|
|
@@ -225,7 +225,7 @@
|
|
|
225
225
|
spread: '-3px',
|
|
226
226
|
},
|
|
227
227
|
{
|
|
228
|
-
color: '{base.color.
|
|
228
|
+
color: '{base.color.gray.7}',
|
|
229
229
|
alpha: 0.12,
|
|
230
230
|
offsetX: '0px',
|
|
231
231
|
offsetY: '6px',
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
spread: '1px',
|
|
254
254
|
},
|
|
255
255
|
{
|
|
256
|
-
color: '{base.color.
|
|
256
|
+
color: '{base.color.gray.7}',
|
|
257
257
|
alpha: 0.08,
|
|
258
258
|
offsetX: '0px',
|
|
259
259
|
offsetY: '8px',
|
|
@@ -261,7 +261,7 @@
|
|
|
261
261
|
spread: '-4px',
|
|
262
262
|
},
|
|
263
263
|
{
|
|
264
|
-
color: '{base.color.
|
|
264
|
+
color: '{base.color.gray.7}',
|
|
265
265
|
alpha: 0.08,
|
|
266
266
|
offsetX: '0px',
|
|
267
267
|
offsetY: '4px',
|
|
@@ -269,7 +269,7 @@
|
|
|
269
269
|
spread: '-4px',
|
|
270
270
|
},
|
|
271
271
|
{
|
|
272
|
-
color: '{base.color.
|
|
272
|
+
color: '{base.color.gray.7}',
|
|
273
273
|
alpha: 0.08,
|
|
274
274
|
offsetX: '0px',
|
|
275
275
|
offsetY: '24px',
|
|
@@ -277,7 +277,7 @@
|
|
|
277
277
|
spread: '-12px',
|
|
278
278
|
},
|
|
279
279
|
{
|
|
280
|
-
color: '{base.color.
|
|
280
|
+
color: '{base.color.gray.7}',
|
|
281
281
|
alpha: 0.08,
|
|
282
282
|
offsetX: '0px',
|
|
283
283
|
offsetY: '48px',
|
|
@@ -305,7 +305,7 @@
|
|
|
305
305
|
spread: '1px',
|
|
306
306
|
},
|
|
307
307
|
{
|
|
308
|
-
color: '{base.color.
|
|
308
|
+
color: '{base.color.gray.7}',
|
|
309
309
|
alpha: 0.24,
|
|
310
310
|
offsetX: '0px',
|
|
311
311
|
offsetY: '40px',
|
|
@@ -333,7 +333,7 @@
|
|
|
333
333
|
spread: '1px',
|
|
334
334
|
},
|
|
335
335
|
{
|
|
336
|
-
color: '{base.color.
|
|
336
|
+
color: '{base.color.gray.7}',
|
|
337
337
|
alpha: 0.32,
|
|
338
338
|
offsetX: '0px',
|
|
339
339
|
offsetY: '56px',
|
|
@@ -353,7 +353,7 @@
|
|
|
353
353
|
legacy: {
|
|
354
354
|
$value: [
|
|
355
355
|
{
|
|
356
|
-
color: '{base.color.
|
|
356
|
+
color: '{base.color.gray.7}',
|
|
357
357
|
alpha: 0.04,
|
|
358
358
|
offsetX: '0px',
|
|
359
359
|
offsetY: '6px',
|
|
@@ -361,7 +361,7 @@
|
|
|
361
361
|
spread: '-3px',
|
|
362
362
|
},
|
|
363
363
|
{
|
|
364
|
-
color: '{base.color.
|
|
364
|
+
color: '{base.color.gray.7}',
|
|
365
365
|
alpha: 0.12,
|
|
366
366
|
offsetX: '0px',
|
|
367
367
|
offsetY: '6px',
|
|
@@ -34,51 +34,29 @@
|
|
|
34
34
|
"text": {
|
|
35
35
|
"display": {
|
|
36
36
|
"lineBoxHeight": {
|
|
37
|
-
"$value":
|
|
38
|
-
"$type": "
|
|
37
|
+
"$value": "56px",
|
|
38
|
+
"$type": "dimension",
|
|
39
39
|
"$extensions": {
|
|
40
40
|
"org.primer.data": {
|
|
41
41
|
"fontSize": 40
|
|
42
42
|
},
|
|
43
43
|
"org.primer.figma": {
|
|
44
44
|
"collection": "typography",
|
|
45
|
-
"scopes": ["all"]
|
|
46
|
-
"fontSizeInPx": 40
|
|
45
|
+
"scopes": ["all"]
|
|
47
46
|
}
|
|
48
47
|
}
|
|
49
48
|
},
|
|
50
49
|
"size": {
|
|
51
50
|
"$value": "40px",
|
|
52
|
-
"$type": "dimension"
|
|
53
|
-
"$extensions": {
|
|
54
|
-
"org.primer.figma": {
|
|
55
|
-
"collection": "typography",
|
|
56
|
-
"scopes": ["all"]
|
|
57
|
-
}
|
|
58
|
-
}
|
|
51
|
+
"$type": "dimension"
|
|
59
52
|
},
|
|
60
53
|
"lineHeight": {
|
|
61
54
|
"$value": 1.4,
|
|
62
|
-
"$type": "number"
|
|
63
|
-
"$extensions": {
|
|
64
|
-
"org.primer.data": {
|
|
65
|
-
"fontSize": 40
|
|
66
|
-
},
|
|
67
|
-
"org.primer.figma": {
|
|
68
|
-
"collection": "typography",
|
|
69
|
-
"scopes": ["all"]
|
|
70
|
-
}
|
|
71
|
-
}
|
|
55
|
+
"$type": "number"
|
|
72
56
|
},
|
|
73
57
|
"weight": {
|
|
74
58
|
"$value": "{base.text.weight.medium}",
|
|
75
|
-
"$type": "fontWeight"
|
|
76
|
-
"$extensions": {
|
|
77
|
-
"org.primer.figma": {
|
|
78
|
-
"collection": "typography",
|
|
79
|
-
"scopes": ["all"]
|
|
80
|
-
}
|
|
81
|
-
}
|
|
59
|
+
"$type": "fontWeight"
|
|
82
60
|
},
|
|
83
61
|
"shorthand": {
|
|
84
62
|
"$value": {
|
|
@@ -95,106 +73,43 @@
|
|
|
95
73
|
"size": {
|
|
96
74
|
"large": {
|
|
97
75
|
"$value": "32px",
|
|
98
|
-
"$type": "dimension"
|
|
99
|
-
"$extensions": {
|
|
100
|
-
"org.primer.figma": {
|
|
101
|
-
"collection": "typography",
|
|
102
|
-
"scopes": ["all"]
|
|
103
|
-
}
|
|
104
|
-
}
|
|
76
|
+
"$type": "dimension"
|
|
105
77
|
},
|
|
106
78
|
"medium": {
|
|
107
79
|
"$value": "20px",
|
|
108
|
-
"$type": "dimension"
|
|
109
|
-
"$extensions": {
|
|
110
|
-
"org.primer.figma": {
|
|
111
|
-
"collection": "typography",
|
|
112
|
-
"scopes": ["all"]
|
|
113
|
-
}
|
|
114
|
-
}
|
|
80
|
+
"$type": "dimension"
|
|
115
81
|
},
|
|
116
82
|
"small": {
|
|
117
83
|
"$value": "16px",
|
|
118
|
-
"$type": "dimension"
|
|
119
|
-
"$extensions": {
|
|
120
|
-
"org.primer.figma": {
|
|
121
|
-
"collection": "typography",
|
|
122
|
-
"scopes": ["all"]
|
|
123
|
-
}
|
|
124
|
-
}
|
|
84
|
+
"$type": "dimension"
|
|
125
85
|
}
|
|
126
86
|
},
|
|
127
87
|
"lineHeight": {
|
|
128
88
|
"large": {
|
|
129
89
|
"$value": 1.5,
|
|
130
|
-
"$type": "number"
|
|
131
|
-
"$extensions": {
|
|
132
|
-
"org.primer.data": {
|
|
133
|
-
"fontSize": 32
|
|
134
|
-
},
|
|
135
|
-
"org.primer.figma": {
|
|
136
|
-
"collection": "typography",
|
|
137
|
-
"scopes": ["all"]
|
|
138
|
-
}
|
|
139
|
-
}
|
|
90
|
+
"$type": "number"
|
|
140
91
|
},
|
|
141
92
|
"medium": {
|
|
142
93
|
"$value": 1.6,
|
|
143
|
-
"$type": "number"
|
|
144
|
-
"$extensions": {
|
|
145
|
-
"org.primer.data": {
|
|
146
|
-
"fontSize": 20
|
|
147
|
-
},
|
|
148
|
-
"org.primer.figma": {
|
|
149
|
-
"collection": "typography",
|
|
150
|
-
"scopes": ["all"]
|
|
151
|
-
}
|
|
152
|
-
}
|
|
94
|
+
"$type": "number"
|
|
153
95
|
},
|
|
154
96
|
"small": {
|
|
155
97
|
"$value": 1.5,
|
|
156
|
-
"$type": "number"
|
|
157
|
-
"$extensions": {
|
|
158
|
-
"org.primer.data": {
|
|
159
|
-
"fontSize": 16
|
|
160
|
-
},
|
|
161
|
-
"org.primer.figma": {
|
|
162
|
-
"collection": "typography",
|
|
163
|
-
"scopes": ["all"]
|
|
164
|
-
}
|
|
165
|
-
}
|
|
98
|
+
"$type": "number"
|
|
166
99
|
}
|
|
167
100
|
},
|
|
168
101
|
"weight": {
|
|
169
102
|
"large": {
|
|
170
103
|
"$value": "{base.text.weight.semibold}",
|
|
171
|
-
"$type": "fontWeight"
|
|
172
|
-
"$extensions": {
|
|
173
|
-
"org.primer.figma": {
|
|
174
|
-
"collection": "typography",
|
|
175
|
-
"scopes": ["all"]
|
|
176
|
-
}
|
|
177
|
-
}
|
|
104
|
+
"$type": "fontWeight"
|
|
178
105
|
},
|
|
179
106
|
"medium": {
|
|
180
107
|
"$value": "{base.text.weight.semibold}",
|
|
181
|
-
"$type": "fontWeight"
|
|
182
|
-
"$extensions": {
|
|
183
|
-
"org.primer.figma": {
|
|
184
|
-
"collection": "typography",
|
|
185
|
-
"scopes": ["all"]
|
|
186
|
-
}
|
|
187
|
-
}
|
|
108
|
+
"$type": "fontWeight"
|
|
188
109
|
},
|
|
189
110
|
"small": {
|
|
190
111
|
"$value": "{base.text.weight.semibold}",
|
|
191
|
-
"$type": "fontWeight"
|
|
192
|
-
"$extensions": {
|
|
193
|
-
"org.primer.figma": {
|
|
194
|
-
"collection": "typography",
|
|
195
|
-
"scopes": ["all"]
|
|
196
|
-
}
|
|
197
|
-
}
|
|
112
|
+
"$type": "fontWeight"
|
|
198
113
|
}
|
|
199
114
|
},
|
|
200
115
|
"shorthand": {
|
|
@@ -233,33 +148,15 @@
|
|
|
233
148
|
"subtitle": {
|
|
234
149
|
"size": {
|
|
235
150
|
"$value": "20px",
|
|
236
|
-
"$type": "dimension"
|
|
237
|
-
"$extensions": {
|
|
238
|
-
"org.primer.figma": {
|
|
239
|
-
"collection": "typography",
|
|
240
|
-
"scopes": ["all"]
|
|
241
|
-
}
|
|
242
|
-
}
|
|
151
|
+
"$type": "dimension"
|
|
243
152
|
},
|
|
244
153
|
"lineHeight": {
|
|
245
154
|
"$value": 1.6,
|
|
246
|
-
"$type": "number"
|
|
247
|
-
"$extensions": {
|
|
248
|
-
"org.primer.figma": {
|
|
249
|
-
"collection": "typography",
|
|
250
|
-
"scopes": ["all"]
|
|
251
|
-
}
|
|
252
|
-
}
|
|
155
|
+
"$type": "number"
|
|
253
156
|
},
|
|
254
157
|
"weight": {
|
|
255
158
|
"$value": "{base.text.weight.normal}",
|
|
256
|
-
"$type": "fontWeight"
|
|
257
|
-
"$extensions": {
|
|
258
|
-
"org.primer.figma": {
|
|
259
|
-
"collection": "typography",
|
|
260
|
-
"scopes": ["all"]
|
|
261
|
-
}
|
|
262
|
-
}
|
|
159
|
+
"$type": "fontWeight"
|
|
263
160
|
},
|
|
264
161
|
"shorthand": {
|
|
265
162
|
"$value": {
|
|
@@ -276,74 +173,29 @@
|
|
|
276
173
|
"size": {
|
|
277
174
|
"large": {
|
|
278
175
|
"$value": "16px",
|
|
279
|
-
"$type": "dimension"
|
|
280
|
-
"$extensions": {
|
|
281
|
-
"org.primer.figma": {
|
|
282
|
-
"collection": "typography",
|
|
283
|
-
"scopes": ["all"]
|
|
284
|
-
}
|
|
285
|
-
}
|
|
176
|
+
"$type": "dimension"
|
|
286
177
|
},
|
|
287
178
|
"medium": {
|
|
288
179
|
"$value": "14px",
|
|
289
|
-
"$type": "dimension"
|
|
290
|
-
"$extensions": {
|
|
291
|
-
"org.primer.figma": {
|
|
292
|
-
"collection": "typography",
|
|
293
|
-
"scopes": ["all"]
|
|
294
|
-
}
|
|
295
|
-
}
|
|
180
|
+
"$type": "dimension"
|
|
296
181
|
},
|
|
297
182
|
"small": {
|
|
298
183
|
"$value": "12px",
|
|
299
|
-
"$type": "dimension"
|
|
300
|
-
"$extensions": {
|
|
301
|
-
"org.primer.figma": {
|
|
302
|
-
"collection": "typography",
|
|
303
|
-
"scopes": ["all"]
|
|
304
|
-
}
|
|
305
|
-
}
|
|
184
|
+
"$type": "dimension"
|
|
306
185
|
}
|
|
307
186
|
},
|
|
308
187
|
"lineHeight": {
|
|
309
188
|
"large": {
|
|
310
189
|
"$value": 1.5,
|
|
311
|
-
"$type": "number"
|
|
312
|
-
"$extensions": {
|
|
313
|
-
"org.primer.data": {
|
|
314
|
-
"fontSize": 16
|
|
315
|
-
},
|
|
316
|
-
"org.primer.figma": {
|
|
317
|
-
"collection": "typography",
|
|
318
|
-
"scopes": ["all"]
|
|
319
|
-
}
|
|
320
|
-
}
|
|
190
|
+
"$type": "number"
|
|
321
191
|
},
|
|
322
192
|
"medium": {
|
|
323
193
|
"$value": 1.4285,
|
|
324
|
-
"$type": "number"
|
|
325
|
-
"$extensions": {
|
|
326
|
-
"org.primer.data": {
|
|
327
|
-
"fontSize": 14
|
|
328
|
-
},
|
|
329
|
-
"org.primer.figma": {
|
|
330
|
-
"collection": "typography",
|
|
331
|
-
"scopes": ["all"]
|
|
332
|
-
}
|
|
333
|
-
}
|
|
194
|
+
"$type": "number"
|
|
334
195
|
},
|
|
335
196
|
"small": {
|
|
336
197
|
"$value": 1.6666,
|
|
337
|
-
"$type": "number"
|
|
338
|
-
"$extensions": {
|
|
339
|
-
"org.primer.data": {
|
|
340
|
-
"fontSize": 12
|
|
341
|
-
},
|
|
342
|
-
"org.primer.figma": {
|
|
343
|
-
"collection": "typography",
|
|
344
|
-
"scopes": ["all"]
|
|
345
|
-
}
|
|
346
|
-
}
|
|
198
|
+
"$type": "number"
|
|
347
199
|
}
|
|
348
200
|
},
|
|
349
201
|
"weight": {
|
|
@@ -386,36 +238,15 @@
|
|
|
386
238
|
"caption": {
|
|
387
239
|
"size": {
|
|
388
240
|
"$value": "12px",
|
|
389
|
-
"$type": "dimension"
|
|
390
|
-
"$extensions": {
|
|
391
|
-
"org.primer.figma": {
|
|
392
|
-
"collection": "typography",
|
|
393
|
-
"scopes": ["all"]
|
|
394
|
-
}
|
|
395
|
-
}
|
|
241
|
+
"$type": "dimension"
|
|
396
242
|
},
|
|
397
243
|
"lineHeight": {
|
|
398
244
|
"$value": 1.3333,
|
|
399
|
-
"$type": "number"
|
|
400
|
-
"$extensions": {
|
|
401
|
-
"org.primer.data": {
|
|
402
|
-
"fontSize": 12
|
|
403
|
-
},
|
|
404
|
-
"org.primer.figma": {
|
|
405
|
-
"collection": "typography",
|
|
406
|
-
"scopes": ["all"]
|
|
407
|
-
}
|
|
408
|
-
}
|
|
245
|
+
"$type": "number"
|
|
409
246
|
},
|
|
410
247
|
"weight": {
|
|
411
248
|
"$value": "{base.text.weight.normal}",
|
|
412
|
-
"$type": "fontWeight"
|
|
413
|
-
"$extensions": {
|
|
414
|
-
"org.primer.figma": {
|
|
415
|
-
"collection": "typography",
|
|
416
|
-
"scopes": ["all"]
|
|
417
|
-
}
|
|
418
|
-
}
|
|
249
|
+
"$type": "fontWeight"
|
|
419
250
|
},
|
|
420
251
|
"shorthand": {
|
|
421
252
|
"$value": {
|
|
@@ -431,36 +262,15 @@
|
|
|
431
262
|
"codeBlock": {
|
|
432
263
|
"size": {
|
|
433
264
|
"$value": "13px",
|
|
434
|
-
"$type": "dimension"
|
|
435
|
-
"$extensions": {
|
|
436
|
-
"org.primer.figma": {
|
|
437
|
-
"collection": "typography",
|
|
438
|
-
"scopes": ["all"]
|
|
439
|
-
}
|
|
440
|
-
}
|
|
265
|
+
"$type": "dimension"
|
|
441
266
|
},
|
|
442
267
|
"lineHeight": {
|
|
443
268
|
"$value": 1.5385,
|
|
444
|
-
"$type": "number"
|
|
445
|
-
"$extensions": {
|
|
446
|
-
"org.primer.data": {
|
|
447
|
-
"fontSize": 13
|
|
448
|
-
},
|
|
449
|
-
"org.primer.figma": {
|
|
450
|
-
"collection": "typography",
|
|
451
|
-
"scopes": ["all"]
|
|
452
|
-
}
|
|
453
|
-
}
|
|
269
|
+
"$type": "number"
|
|
454
270
|
},
|
|
455
271
|
"weight": {
|
|
456
272
|
"$value": "{base.text.weight.normal}",
|
|
457
|
-
"$type": "fontWeight"
|
|
458
|
-
"$extensions": {
|
|
459
|
-
"org.primer.figma": {
|
|
460
|
-
"collection": "typography",
|
|
461
|
-
"scopes": ["all"]
|
|
462
|
-
}
|
|
463
|
-
}
|
|
273
|
+
"$type": "fontWeight"
|
|
464
274
|
},
|
|
465
275
|
"shorthand": {
|
|
466
276
|
"$value": {
|
|
@@ -476,23 +286,11 @@
|
|
|
476
286
|
"codeInline": {
|
|
477
287
|
"size": {
|
|
478
288
|
"$value": "0.9285em",
|
|
479
|
-
"$type": "dimension"
|
|
480
|
-
"$extensions": {
|
|
481
|
-
"org.primer.figma": {
|
|
482
|
-
"collection": "typography",
|
|
483
|
-
"scopes": ["all"]
|
|
484
|
-
}
|
|
485
|
-
}
|
|
289
|
+
"$type": "dimension"
|
|
486
290
|
},
|
|
487
291
|
"weight": {
|
|
488
292
|
"$value": "{base.text.weight.normal}",
|
|
489
|
-
"$type": "fontWeight"
|
|
490
|
-
"$extensions": {
|
|
491
|
-
"org.primer.figma": {
|
|
492
|
-
"collection": "typography",
|
|
493
|
-
"scopes": ["all"]
|
|
494
|
-
}
|
|
495
|
-
}
|
|
293
|
+
"$type": "fontWeight"
|
|
496
294
|
},
|
|
497
295
|
"shorthand": {
|
|
498
296
|
"$value": {
|
|
@@ -17,7 +17,7 @@ export const convertFloatToPixel = (token: StyleDictionary.TransformedToken) =>
|
|
|
17
17
|
// convert value
|
|
18
18
|
const convertedValue = token.$extensions?.['org.primer.data']?.fontSize * token.value
|
|
19
19
|
// return converted value
|
|
20
|
-
return convertedValue === 0 ? 0 : `${
|
|
20
|
+
return convertedValue === 0 ? 0 : `${convertedValue}px`
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
23
|
* @description converts a float value to a pixel value based on the provided fontSize on the tokersn extension
|