@pantheon-systems/pds-design-tokens 2.0.0-alpha.1 → 2.0.0-alpha.11

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.
Files changed (14) hide show
  1. package/README.md +102 -30
  2. package/build/css/breakpoints.css +13 -0
  3. package/build/css/variables.global.css +47 -45
  4. package/build/css/variables.typography.css +34 -0
  5. package/build/figma/tokens.json +865 -1731
  6. package/build/js/variables.global.d.ts +113 -0
  7. package/build/js/variables.global.js +113 -0
  8. package/build/js/variables.typography.d.ts +65 -0
  9. package/build/js/variables.typography.js +52 -0
  10. package/build/json/tokens.json +933 -246
  11. package/package.json +22 -2
  12. package/build/css/variables.compact.css +0 -17
  13. package/build/css/variables.expanded.css +0 -17
  14. package/build/js/variables.js +0 -109
package/build/figma/tokens.json CHANGED
@@ -1,52 +1,83 @@
1
1
  {
2
2
  "global-primitive": {
3
3
  "primitive": {
4
- "spacing": {
5
- "8XL": {
6
- "value": 82.56,
4
+ "bp": {
5
+ "sm": {
6
+ "value": 0,
7
7
  "type": "dimension",
8
8
  "$extensions": {
9
9
  "public": true,
10
- "defaultUnit": "rem",
11
- "mathExpression": true,
10
+ "defaultUnit": "px",
12
11
  "com.figma": {
13
12
  "scopes": [
14
- "WIDTH_HEIGHT",
15
- "GAP"
13
+ "WIDTH_HEIGHT"
16
14
  ],
17
15
  "exportAs": "variable",
18
16
  "codeSyntax": {
19
- "WEB": "--pds-spacing-8xl"
17
+ "WEB": "--pds-bp-sm"
20
18
  }
21
19
  }
22
20
  }
23
21
  },
24
- "7XL": {
25
- "value": 68.8,
22
+ "md": {
23
+ "value": 768,
26
24
  "type": "dimension",
27
25
  "$extensions": {
28
26
  "public": true,
29
- "defaultUnit": "rem",
30
- "mathExpression": true,
27
+ "defaultUnit": "px",
31
28
  "com.figma": {
32
29
  "scopes": [
33
- "WIDTH_HEIGHT",
34
- "GAP"
30
+ "WIDTH_HEIGHT"
35
31
  ],
36
32
  "exportAs": "variable",
37
33
  "codeSyntax": {
38
- "WEB": "--pds-spacing-7xl"
34
+ "WEB": "--pds-bp-md"
39
35
  }
40
36
  }
41
37
  }
42
38
  },
43
- "6XL": {
44
- "value": 57.328,
39
+ "lg": {
40
+ "value": 1280,
41
+ "type": "dimension",
42
+ "$extensions": {
43
+ "public": true,
44
+ "defaultUnit": "px",
45
+ "com.figma": {
46
+ "scopes": [
47
+ "WIDTH_HEIGHT"
48
+ ],
49
+ "exportAs": "variable",
50
+ "codeSyntax": {
51
+ "WEB": "--pds-bp-lg"
52
+ }
53
+ }
54
+ }
55
+ },
56
+ "xl": {
57
+ "value": 1440,
58
+ "type": "dimension",
59
+ "$extensions": {
60
+ "public": true,
61
+ "defaultUnit": "px",
62
+ "com.figma": {
63
+ "scopes": [
64
+ "WIDTH_HEIGHT"
65
+ ],
66
+ "exportAs": "variable",
67
+ "codeSyntax": {
68
+ "WEB": "--pds-bp-xl"
69
+ }
70
+ }
71
+ }
72
+ }
73
+ },
74
+ "spacing": {
75
+ "9XL": {
76
+ "value": 160,
45
77
  "type": "dimension",
46
78
  "$extensions": {
47
79
  "public": true,
48
80
  "defaultUnit": "rem",
49
- "mathExpression": true,
50
81
  "com.figma": {
51
82
  "scopes": [
52
83
  "WIDTH_HEIGHT",
@@ -54,18 +85,17 @@
54
85
  ],
55
86
  "exportAs": "variable",
56
87
  "codeSyntax": {
57
- "WEB": "--pds-spacing-6xl"
88
+ "WEB": "--pds-spacing-9xl"
58
89
  }
59
90
  }
60
91
  }
61
92
  },
62
- "5XL": {
63
- "value": 47.776,
93
+ "8XL": {
94
+ "value": 128,
64
95
  "type": "dimension",
65
96
  "$extensions": {
66
97
  "public": true,
67
98
  "defaultUnit": "rem",
68
- "mathExpression": true,
69
99
  "com.figma": {
70
100
  "scopes": [
71
101
  "WIDTH_HEIGHT",
@@ -73,18 +103,17 @@
73
103
  ],
74
104
  "exportAs": "variable",
75
105
  "codeSyntax": {
76
- "WEB": "--pds-spacing-5xl"
106
+ "WEB": "--pds-spacing-8xl"
77
107
  }
78
108
  }
79
109
  }
80
110
  },
81
- "4XL": {
82
- "value": 39.808,
111
+ "7XL": {
112
+ "value": 96,
83
113
  "type": "dimension",
84
114
  "$extensions": {
85
115
  "public": true,
86
116
  "defaultUnit": "rem",
87
- "mathExpression": true,
88
117
  "com.figma": {
89
118
  "scopes": [
90
119
  "WIDTH_HEIGHT",
@@ -92,18 +121,17 @@
92
121
  ],
93
122
  "exportAs": "variable",
94
123
  "codeSyntax": {
95
- "WEB": "--pds-spacing-4xl"
124
+ "WEB": "--pds-spacing-7xl"
96
125
  }
97
126
  }
98
127
  }
99
128
  },
100
- "3XL": {
101
- "value": 33.184,
129
+ "6XL": {
130
+ "value": 80,
102
131
  "type": "dimension",
103
132
  "$extensions": {
104
133
  "public": true,
105
134
  "defaultUnit": "rem",
106
- "mathExpression": true,
107
135
  "com.figma": {
108
136
  "scopes": [
109
137
  "WIDTH_HEIGHT",
@@ -111,18 +139,17 @@
111
139
  ],
112
140
  "exportAs": "variable",
113
141
  "codeSyntax": {
114
- "WEB": "--pds-spacing-3xl"
142
+ "WEB": "--pds-spacing-6xl"
115
143
  }
116
144
  }
117
145
  }
118
146
  },
119
- "2XL": {
120
- "value": 27.648,
147
+ "5XL": {
148
+ "value": 64,
121
149
  "type": "dimension",
122
150
  "$extensions": {
123
151
  "public": true,
124
152
  "defaultUnit": "rem",
125
- "mathExpression": true,
126
153
  "com.figma": {
127
154
  "scopes": [
128
155
  "WIDTH_HEIGHT",
@@ -130,18 +157,17 @@
130
157
  ],
131
158
  "exportAs": "variable",
132
159
  "codeSyntax": {
133
- "WEB": "--pds-spacing-2xl"
160
+ "WEB": "--pds-spacing-5xl"
134
161
  }
135
162
  }
136
163
  }
137
164
  },
138
- "XL": {
139
- "value": 23.04,
165
+ "4XL": {
166
+ "value": 48,
140
167
  "type": "dimension",
141
168
  "$extensions": {
142
169
  "public": true,
143
170
  "defaultUnit": "rem",
144
- "mathExpression": true,
145
171
  "com.figma": {
146
172
  "scopes": [
147
173
  "WIDTH_HEIGHT",
@@ -149,18 +175,17 @@
149
175
  ],
150
176
  "exportAs": "variable",
151
177
  "codeSyntax": {
152
- "WEB": "--pds-spacing-xl"
178
+ "WEB": "--pds-spacing-4xl"
153
179
  }
154
180
  }
155
181
  }
156
182
  },
157
- "L": {
158
- "value": 19.2,
183
+ "3XL": {
184
+ "value": 40,
159
185
  "type": "dimension",
160
186
  "$extensions": {
161
187
  "public": true,
162
188
  "defaultUnit": "rem",
163
- "mathExpression": true,
164
189
  "com.figma": {
165
190
  "scopes": [
166
191
  "WIDTH_HEIGHT",
@@ -168,18 +193,17 @@
168
193
  ],
169
194
  "exportAs": "variable",
170
195
  "codeSyntax": {
171
- "WEB": "--pds-spacing-l"
196
+ "WEB": "--pds-spacing-3xl"
172
197
  }
173
198
  }
174
199
  }
175
200
  },
176
- "M": {
177
- "value": 16,
201
+ "2XL": {
202
+ "value": 32,
178
203
  "type": "dimension",
179
204
  "$extensions": {
180
205
  "public": true,
181
206
  "defaultUnit": "rem",
182
- "mathExpression": true,
183
207
  "com.figma": {
184
208
  "scopes": [
185
209
  "WIDTH_HEIGHT",
@@ -187,18 +211,17 @@
187
211
  ],
188
212
  "exportAs": "variable",
189
213
  "codeSyntax": {
190
- "WEB": "--pds-spacing-m"
214
+ "WEB": "--pds-spacing-2xl"
191
215
  }
192
216
  }
193
217
  }
194
218
  },
195
- "S": {
196
- "value": 13.328,
219
+ "XL": {
220
+ "value": 24,
197
221
  "type": "dimension",
198
222
  "$extensions": {
199
223
  "public": true,
200
224
  "defaultUnit": "rem",
201
- "mathExpression": true,
202
225
  "com.figma": {
203
226
  "scopes": [
204
227
  "WIDTH_HEIGHT",
@@ -206,18 +229,17 @@
206
229
  ],
207
230
  "exportAs": "variable",
208
231
  "codeSyntax": {
209
- "WEB": "--pds-spacing-s"
232
+ "WEB": "--pds-spacing-xl"
210
233
  }
211
234
  }
212
235
  }
213
236
  },
214
- "XS": {
215
- "value": 11.104,
237
+ "L": {
238
+ "value": 20,
216
239
  "type": "dimension",
217
240
  "$extensions": {
218
241
  "public": true,
219
242
  "defaultUnit": "rem",
220
- "mathExpression": true,
221
243
  "com.figma": {
222
244
  "scopes": [
223
245
  "WIDTH_HEIGHT",
@@ -225,18 +247,17 @@
225
247
  ],
226
248
  "exportAs": "variable",
227
249
  "codeSyntax": {
228
- "WEB": "--pds-spacing-xs"
250
+ "WEB": "--pds-spacing-l"
229
251
  }
230
252
  }
231
253
  }
232
254
  },
233
- "2XS": {
234
- "value": 9.248,
255
+ "M": {
256
+ "value": 16,
235
257
  "type": "dimension",
236
258
  "$extensions": {
237
259
  "public": true,
238
260
  "defaultUnit": "rem",
239
- "mathExpression": true,
240
261
  "com.figma": {
241
262
  "scopes": [
242
263
  "WIDTH_HEIGHT",
@@ -244,18 +265,17 @@
244
265
  ],
245
266
  "exportAs": "variable",
246
267
  "codeSyntax": {
247
- "WEB": "--pds-spacing-2xs"
268
+ "WEB": "--pds-spacing-m"
248
269
  }
249
270
  }
250
271
  }
251
272
  },
252
- "3XS": {
253
- "value": 7.696,
273
+ "S": {
274
+ "value": 12,
254
275
  "type": "dimension",
255
276
  "$extensions": {
256
277
  "public": true,
257
278
  "defaultUnit": "rem",
258
- "mathExpression": true,
259
279
  "com.figma": {
260
280
  "scopes": [
261
281
  "WIDTH_HEIGHT",
@@ -263,18 +283,17 @@
263
283
  ],
264
284
  "exportAs": "variable",
265
285
  "codeSyntax": {
266
- "WEB": "--pds-spacing-3xs"
286
+ "WEB": "--pds-spacing-s"
267
287
  }
268
288
  }
269
289
  }
270
290
  },
271
- "4XS": {
272
- "value": 6.416,
291
+ "XS": {
292
+ "value": 10,
273
293
  "type": "dimension",
274
294
  "$extensions": {
275
295
  "public": true,
276
296
  "defaultUnit": "rem",
277
- "mathExpression": true,
278
297
  "com.figma": {
279
298
  "scopes": [
280
299
  "WIDTH_HEIGHT",
@@ -282,18 +301,17 @@
282
301
  ],
283
302
  "exportAs": "variable",
284
303
  "codeSyntax": {
285
- "WEB": "--pds-spacing-4xs"
304
+ "WEB": "--pds-spacing-xs"
286
305
  }
287
306
  }
288
307
  }
289
308
  },
290
- "5XS": {
291
- "value": 5.344,
309
+ "2XS": {
310
+ "value": 8,
292
311
  "type": "dimension",
293
312
  "$extensions": {
294
313
  "public": true,
295
314
  "defaultUnit": "rem",
296
- "mathExpression": true,
297
315
  "com.figma": {
298
316
  "scopes": [
299
317
  "WIDTH_HEIGHT",
@@ -301,18 +319,17 @@
301
319
  ],
302
320
  "exportAs": "variable",
303
321
  "codeSyntax": {
304
- "WEB": "--pds-spacing-5xs"
322
+ "WEB": "--pds-spacing-2xs"
305
323
  }
306
324
  }
307
325
  }
308
326
  },
309
- "6XS": {
310
- "value": 4.448,
327
+ "3XS": {
328
+ "value": 6,
311
329
  "type": "dimension",
312
330
  "$extensions": {
313
331
  "public": true,
314
332
  "defaultUnit": "rem",
315
- "mathExpression": true,
316
333
  "com.figma": {
317
334
  "scopes": [
318
335
  "WIDTH_HEIGHT",
@@ -320,18 +337,17 @@
320
337
  ],
321
338
  "exportAs": "variable",
322
339
  "codeSyntax": {
323
- "WEB": "--pds-spacing-6xs"
340
+ "WEB": "--pds-spacing-3xs"
324
341
  }
325
342
  }
326
343
  }
327
344
  },
328
- "7XS": {
329
- "value": 3.712,
345
+ "4XS": {
346
+ "value": 4,
330
347
  "type": "dimension",
331
348
  "$extensions": {
332
349
  "public": true,
333
350
  "defaultUnit": "rem",
334
- "mathExpression": true,
335
351
  "com.figma": {
336
352
  "scopes": [
337
353
  "WIDTH_HEIGHT",
@@ -339,18 +355,17 @@
339
355
  ],
340
356
  "exportAs": "variable",
341
357
  "codeSyntax": {
342
- "WEB": "--pds-spacing-7xs"
358
+ "WEB": "--pds-spacing-4xs"
343
359
  }
344
360
  }
345
361
  }
346
362
  },
347
- "8XS": {
348
- "value": 3.088,
363
+ "5XS": {
364
+ "value": 2,
349
365
  "type": "dimension",
350
366
  "$extensions": {
351
367
  "public": true,
352
368
  "defaultUnit": "rem",
353
- "mathExpression": true,
354
369
  "com.figma": {
355
370
  "scopes": [
356
371
  "WIDTH_HEIGHT",
@@ -358,257 +373,406 @@
358
373
  ],
359
374
  "exportAs": "variable",
360
375
  "codeSyntax": {
361
- "WEB": "--pds-spacing-8xs"
376
+ "WEB": "--pds-spacing-5xs"
362
377
  }
363
378
  }
364
379
  }
365
380
  }
366
- },
367
- "typography": {
368
- "font-family (ff)": {
369
- "sans": {
370
- "value": "Mona Sans",
371
- "type": "fontFamily",
381
+ }
382
+ }
383
+ },
384
+ "global-semantic": {
385
+ "semantic": {
386
+ "border": {
387
+ "width": {
388
+ "default": {
389
+ "value": 1,
390
+ "type": "dimension",
372
391
  "$extensions": {
373
392
  "public": true,
393
+ "defaultUnit": "px",
374
394
  "com.figma": {
375
395
  "scopes": [
376
- "FONT_FAMILY"
396
+ "STROKE_FLOAT"
377
397
  ],
378
398
  "exportAs": "variable",
379
399
  "codeSyntax": {
380
- "WEB": "--pds-typography-ff-sans"
400
+ "WEB": "--pds-border-width-default"
381
401
  }
382
402
  }
383
403
  }
384
404
  },
385
- "serif": {
386
- "value": "Instrument Serif",
387
- "type": "fontFamily",
405
+ "thicker": {
406
+ "value": 2,
407
+ "type": "dimension",
388
408
  "$extensions": {
389
409
  "public": true,
410
+ "defaultUnit": "px",
390
411
  "com.figma": {
391
412
  "scopes": [
392
- "FONT_FAMILY"
413
+ "STROKE_FLOAT"
393
414
  ],
394
415
  "exportAs": "variable",
395
416
  "codeSyntax": {
396
- "WEB": "--pds-typography-ff-serif"
417
+ "WEB": "--pds-border-width-thicker"
397
418
  }
398
419
  }
399
420
  }
400
421
  },
401
- "mono": {
402
- "value": "Source Code Pro",
403
- "type": "fontFamily",
422
+ "outline": {
423
+ "value": 1,
424
+ "type": "dimension",
404
425
  "$extensions": {
405
426
  "public": true,
427
+ "defaultUnit": "px",
406
428
  "com.figma": {
407
429
  "scopes": [
408
- "FONT_FAMILY"
430
+ "STROKE_FLOAT"
409
431
  ],
410
432
  "exportAs": "variable",
411
433
  "codeSyntax": {
412
- "WEB": "--pds-typography-ff-mono"
434
+ "WEB": "--pds-border-width-outline"
413
435
  }
414
436
  }
415
437
  }
416
438
  }
417
439
  },
418
- "font-weight (fw)": {
419
- "light": {
420
- "value": 300,
421
- "type": "fontWeight",
440
+ "radius": {
441
+ "default": {
442
+ "value": 3,
443
+ "type": "dimension",
422
444
  "$extensions": {
423
445
  "public": true,
446
+ "defaultUnit": "rem",
424
447
  "com.figma": {
448
+ "scopes": [
449
+ "CORNER_RADIUS"
450
+ ],
425
451
  "exportAs": "variable",
426
452
  "codeSyntax": {
427
- "WEB": "--pds-typography-fw-light"
453
+ "WEB": "--pds-border-radius-default"
428
454
  }
429
455
  }
430
456
  }
431
457
  },
432
- "regular": {
433
- "value": 400,
434
- "type": "fontWeight",
458
+ "bar": {
459
+ "value": 56,
460
+ "type": "dimension",
435
461
  "$extensions": {
436
462
  "public": true,
463
+ "defaultUnit": "rem",
437
464
  "com.figma": {
465
+ "scopes": [
466
+ "CORNER_RADIUS"
467
+ ],
438
468
  "exportAs": "variable",
439
469
  "codeSyntax": {
440
- "WEB": "--pds-typography-fw-regular"
470
+ "WEB": "--pds-border-radius-bar"
441
471
  }
442
472
  }
443
473
  }
444
474
  },
445
- "medium": {
446
- "value": 500,
447
- "type": "fontWeight",
475
+ "button": {
476
+ "value": 56,
477
+ "type": "dimension",
448
478
  "$extensions": {
449
479
  "public": true,
480
+ "defaultUnit": "rem",
450
481
  "com.figma": {
482
+ "scopes": [
483
+ "CORNER_RADIUS"
484
+ ],
451
485
  "exportAs": "variable",
452
486
  "codeSyntax": {
453
- "WEB": "--pds-typography-fw-medium"
487
+ "WEB": "--pds-border-radius-button"
454
488
  }
455
489
  }
456
490
  }
457
491
  },
458
- "semibold": {
459
- "value": 600,
460
- "type": "fontWeight",
492
+ "container": {
493
+ "value": 6,
494
+ "type": "dimension",
461
495
  "$extensions": {
462
496
  "public": true,
497
+ "defaultUnit": "rem",
463
498
  "com.figma": {
499
+ "scopes": [
500
+ "CORNER_RADIUS"
501
+ ],
464
502
  "exportAs": "variable",
465
503
  "codeSyntax": {
466
- "WEB": "--pds-typography-fw-semibold"
504
+ "WEB": "--pds-border-radius-container"
467
505
  }
468
506
  }
469
507
  }
470
508
  },
471
- "bold": {
472
- "value": 700,
473
- "type": "fontWeight",
509
+ "input": {
510
+ "value": 4,
511
+ "type": "dimension",
474
512
  "$extensions": {
475
513
  "public": true,
514
+ "defaultUnit": "rem",
476
515
  "com.figma": {
516
+ "scopes": [
517
+ "CORNER_RADIUS"
518
+ ],
477
519
  "exportAs": "variable",
478
520
  "codeSyntax": {
479
- "WEB": "--pds-typography-fw-bold"
521
+ "WEB": "--pds-border-radius-input"
480
522
  }
481
523
  }
482
524
  }
483
525
  }
484
- },
485
- "letter-spacing (ls)": {
486
- "XL": {
487
- "value": "6%",
488
- "type": "letterSpacing",
526
+ }
527
+ },
528
+ "container": {
529
+ "max-width": {
530
+ "narrow": {
531
+ "value": 1024,
532
+ "type": "dimension",
489
533
  "$extensions": {
490
534
  "public": true,
535
+ "defaultUnit": "px",
491
536
  "com.figma": {
492
537
  "scopes": [
493
- "LETTER_SPACING"
538
+ "WIDTH_HEIGHT"
494
539
  ],
495
- "exportAs": "skip",
540
+ "exportAs": "variable",
496
541
  "codeSyntax": {
497
- "WEB": "--pds-typography-ls-xl"
542
+ "WEB": "--pds-container-max-width-narrow"
498
543
  }
499
544
  }
500
545
  }
501
546
  },
502
- "L": {
503
- "value": "4%",
504
- "type": "letterSpacing",
547
+ "standard": {
548
+ "value": 1200,
549
+ "type": "dimension",
505
550
  "$extensions": {
506
551
  "public": true,
552
+ "defaultUnit": "px",
507
553
  "com.figma": {
508
554
  "scopes": [
509
- "LETTER_SPACING"
555
+ "WIDTH_HEIGHT"
510
556
  ],
511
- "exportAs": "skip",
557
+ "exportAs": "variable",
512
558
  "codeSyntax": {
513
- "WEB": "--pds-typography-ls-l"
559
+ "WEB": "--pds-container-max-width-standard"
514
560
  }
515
561
  }
516
562
  }
517
563
  },
518
- "M": {
519
- "value": "2%",
520
- "type": "letterSpacing",
564
+ "wide": {
565
+ "value": 1440,
566
+ "type": "dimension",
521
567
  "$extensions": {
522
568
  "public": true,
569
+ "defaultUnit": "px",
523
570
  "com.figma": {
524
571
  "scopes": [
525
- "LETTER_SPACING"
572
+ "WIDTH_HEIGHT"
526
573
  ],
527
- "exportAs": "skip",
574
+ "exportAs": "variable",
528
575
  "codeSyntax": {
529
- "WEB": "--pds-typography-ls-m"
576
+ "WEB": "--pds-container-max-width-wide"
530
577
  }
531
578
  }
532
579
  }
533
580
  },
534
- "S": {
535
- "value": "1%",
536
- "type": "letterSpacing",
581
+ "x-wide": {
582
+ "value": 1600,
583
+ "type": "dimension",
537
584
  "$extensions": {
538
585
  "public": true,
586
+ "defaultUnit": "px",
539
587
  "com.figma": {
540
588
  "scopes": [
541
- "LETTER_SPACING"
589
+ "WIDTH_HEIGHT"
542
590
  ],
543
- "exportAs": "skip",
591
+ "exportAs": "variable",
544
592
  "codeSyntax": {
545
- "WEB": "--pds-typography-ls-s"
593
+ "WEB": "--pds-container-max-width-x-wide"
546
594
  }
547
595
  }
548
596
  }
549
597
  }
550
- },
551
- "line-height (lh)": {
552
- "XL": {
553
- "value": "195%",
554
- "type": "lineHeight",
555
- "$extensions": {
556
- "public": true,
557
- "com.figma": {
558
- "scopes": [
559
- "LINE_HEIGHT"
560
- ],
561
- "exportAs": "skip",
562
- "codeSyntax": {
563
- "WEB": "--pds-typography-lh-xl"
598
+ }
599
+ },
600
+ "spacing": {
601
+ "button": {
602
+ "height": {
603
+ "xs": {
604
+ "value": "{spacing.XL}",
605
+ "type": "dimension",
606
+ "$extensions": {
607
+ "public": true,
608
+ "defaultUnit": "rem",
609
+ "com.figma": {
610
+ "scopes": [
611
+ "WIDTH_HEIGHT"
612
+ ],
613
+ "exportAs": "variable",
614
+ "codeSyntax": {
615
+ "WEB": "--pds-spacing-button-height-xs"
616
+ }
564
617
  }
565
618
  }
566
- }
567
- },
568
- "L": {
569
- "value": "165%",
570
- "type": "lineHeight",
571
- "$extensions": {
572
- "public": true,
573
- "com.figma": {
574
- "scopes": [
575
- "LINE_HEIGHT"
576
- ],
577
- "exportAs": "skip",
578
- "codeSyntax": {
579
- "WEB": "--pds-typography-lh-l"
619
+ },
620
+ "sm": {
621
+ "value": "{spacing.2XL}",
622
+ "type": "dimension",
623
+ "$extensions": {
624
+ "public": true,
625
+ "defaultUnit": "rem",
626
+ "com.figma": {
627
+ "scopes": [
628
+ "WIDTH_HEIGHT"
629
+ ],
630
+ "exportAs": "variable",
631
+ "codeSyntax": {
632
+ "WEB": "--pds-spacing-button-height-sm"
633
+ }
634
+ }
635
+ }
636
+ },
637
+ "md": {
638
+ "value": "{spacing.3XL}",
639
+ "type": "dimension",
640
+ "$extensions": {
641
+ "public": true,
642
+ "defaultUnit": "rem",
643
+ "com.figma": {
644
+ "scopes": [
645
+ "WIDTH_HEIGHT"
646
+ ],
647
+ "exportAs": "variable",
648
+ "codeSyntax": {
649
+ "WEB": "--pds-spacing-button-height-md"
650
+ }
651
+ }
652
+ }
653
+ },
654
+ "lg": {
655
+ "value": "{spacing.4XL}",
656
+ "type": "dimension",
657
+ "$extensions": {
658
+ "public": true,
659
+ "defaultUnit": "rem",
660
+ "com.figma": {
661
+ "scopes": [
662
+ "WIDTH_HEIGHT"
663
+ ],
664
+ "exportAs": "variable",
665
+ "codeSyntax": {
666
+ "WEB": "--pds-spacing-button-height-lg"
667
+ }
580
668
  }
581
669
  }
582
670
  }
583
671
  },
584
- "M": {
585
- "value": "140%",
586
- "type": "lineHeight",
587
- "$extensions": {
588
- "public": true,
589
- "com.figma": {
590
- "scopes": [
591
- "LINE_HEIGHT"
592
- ],
593
- "exportAs": "skip",
594
- "codeSyntax": {
595
- "WEB": "--pds-typography-lh-m"
672
+ "padding-inline": {
673
+ "xs": {
674
+ "value": "{spacing.2XS}",
675
+ "type": "dimension",
676
+ "$extensions": {
677
+ "public": true,
678
+ "defaultUnit": "rem",
679
+ "com.figma": {
680
+ "scopes": [
681
+ "GAP"
682
+ ],
683
+ "exportAs": "variable",
684
+ "codeSyntax": {
685
+ "WEB": "--pds-spacing-button-padding-inline-xs"
686
+ }
687
+ }
688
+ }
689
+ },
690
+ "sm": {
691
+ "value": "{spacing.S}",
692
+ "type": "dimension",
693
+ "$extensions": {
694
+ "public": true,
695
+ "defaultUnit": "rem",
696
+ "com.figma": {
697
+ "scopes": [
698
+ "GAP"
699
+ ],
700
+ "exportAs": "variable",
701
+ "codeSyntax": {
702
+ "WEB": "--pds-spacing-button-padding-inline-sm"
703
+ }
704
+ }
705
+ }
706
+ },
707
+ "md": {
708
+ "value": "{spacing.M}",
709
+ "type": "dimension",
710
+ "$extensions": {
711
+ "public": true,
712
+ "defaultUnit": "rem",
713
+ "com.figma": {
714
+ "scopes": [
715
+ "GAP"
716
+ ],
717
+ "exportAs": "variable",
718
+ "codeSyntax": {
719
+ "WEB": "--pds-spacing-button-padding-inline-md"
720
+ }
721
+ }
722
+ }
723
+ },
724
+ "lg": {
725
+ "value": "{spacing.XL}",
726
+ "type": "dimension",
727
+ "$extensions": {
728
+ "public": true,
729
+ "defaultUnit": "rem",
730
+ "com.figma": {
731
+ "scopes": [
732
+ "GAP"
733
+ ],
734
+ "exportAs": "variable",
735
+ "codeSyntax": {
736
+ "WEB": "--pds-spacing-button-padding-inline-lg"
737
+ }
596
738
  }
597
739
  }
598
740
  }
599
- },
600
- "S": {
601
- "value": "120%",
602
- "type": "lineHeight",
603
- "$extensions": {
604
- "public": true,
605
- "com.figma": {
606
- "scopes": [
607
- "LINE_HEIGHT"
608
- ],
609
- "exportAs": "skip",
610
- "codeSyntax": {
611
- "WEB": "--pds-typography-lh-s"
741
+ }
742
+ },
743
+ "input": {
744
+ "height": {
745
+ "sm": {
746
+ "value": "{spacing.2XL}",
747
+ "type": "dimension",
748
+ "$extensions": {
749
+ "public": true,
750
+ "defaultUnit": "rem",
751
+ "com.figma": {
752
+ "scopes": [
753
+ "WIDTH_HEIGHT"
754
+ ],
755
+ "exportAs": "variable",
756
+ "codeSyntax": {
757
+ "WEB": "--pds-spacing-input-height-sm"
758
+ }
759
+ }
760
+ }
761
+ },
762
+ "md": {
763
+ "value": "{spacing.3XL}",
764
+ "type": "dimension",
765
+ "$extensions": {
766
+ "public": true,
767
+ "defaultUnit": "rem",
768
+ "com.figma": {
769
+ "scopes": [
770
+ "WIDTH_HEIGHT"
771
+ ],
772
+ "exportAs": "variable",
773
+ "codeSyntax": {
774
+ "WEB": "--pds-spacing-input-height-md"
775
+ }
612
776
  }
613
777
  }
614
778
  }
@@ -617,12 +781,12 @@
617
781
  }
618
782
  }
619
783
  },
620
- "global-semantic": {
621
- "semantic": {
784
+ "global-component": {
785
+ "component": {
622
786
  "border": {
623
787
  "width": {
624
- "default": {
625
- "value": 1,
788
+ "stepper": {
789
+ "value": 3,
626
790
  "type": "dimension",
627
791
  "$extensions": {
628
792
  "public": true,
@@ -633,252 +797,51 @@
633
797
  ],
634
798
  "exportAs": "variable",
635
799
  "codeSyntax": {
636
- "WEB": "--pds-border-width-default"
800
+ "WEB": "--pds-border-width-stepper"
637
801
  }
638
802
  }
639
803
  }
640
- },
641
- "outline": {
642
- "value": 1,
643
- "type": "dimension",
644
- "$extensions": {
645
- "public": true,
646
- "defaultUnit": "px",
647
- "com.figma": {
648
- "scopes": [
649
- "STROKE_FLOAT"
650
- ],
651
- "exportAs": "variable",
652
- "codeSyntax": {
653
- "WEB": "--pds-border-width-outline"
804
+ }
805
+ }
806
+ },
807
+ "container": {
808
+ "modal": {
809
+ "width": {
810
+ "sm": {
811
+ "value": 400,
812
+ "type": "dimension",
813
+ "$extensions": {
814
+ "public": true,
815
+ "defaultUnit": "rem",
816
+ "com.figma": {
817
+ "scopes": [
818
+ "WIDTH_HEIGHT"
819
+ ],
820
+ "exportAs": "variable",
821
+ "codeSyntax": {
822
+ "WEB": "--pds-container-modal-width-sm"
823
+ }
654
824
  }
655
825
  }
656
- }
657
- }
658
- },
659
- "radius": {
660
- "default": {
661
- "value": 3,
662
- "type": "dimension",
663
- "$extensions": {
664
- "public": true,
665
- "defaultUnit": "rem",
666
- "com.figma": {
667
- "scopes": [
668
- "CORNER_RADIUS"
669
- ],
670
- "exportAs": "variable",
671
- "codeSyntax": {
672
- "WEB": "--pds-border-radius-default"
673
- }
674
- }
675
- }
676
- },
677
- "bar": {
678
- "value": 56,
679
- "type": "dimension",
680
- "$extensions": {
681
- "public": true,
682
- "defaultUnit": "rem",
683
- "com.figma": {
684
- "scopes": [
685
- "CORNER_RADIUS"
686
- ],
687
- "exportAs": "variable",
688
- "codeSyntax": {
689
- "WEB": "--pds-border-radius-bar"
690
- }
691
- }
692
- }
693
- },
694
- "button": {
695
- "value": 56,
696
- "type": "dimension",
697
- "$extensions": {
698
- "public": true,
699
- "defaultUnit": "rem",
700
- "com.figma": {
701
- "scopes": [
702
- "CORNER_RADIUS"
703
- ],
704
- "exportAs": "variable",
705
- "codeSyntax": {
706
- "WEB": "--pds-border-radius-button"
707
- }
708
- }
709
- }
710
- },
711
- "container": {
712
- "value": 6,
713
- "type": "dimension",
714
- "$extensions": {
715
- "public": true,
716
- "defaultUnit": "rem",
717
- "com.figma": {
718
- "scopes": [
719
- "CORNER_RADIUS"
720
- ],
721
- "exportAs": "variable",
722
- "codeSyntax": {
723
- "WEB": "--pds-border-radius-container"
724
- }
725
- }
726
- }
727
- },
728
- "input": {
729
- "value": 4,
730
- "type": "dimension",
731
- "$extensions": {
732
- "public": true,
733
- "defaultUnit": "rem",
734
- "com.figma": {
735
- "scopes": [
736
- "CORNER_RADIUS"
737
- ],
738
- "exportAs": "variable",
739
- "codeSyntax": {
740
- "WEB": "--pds-border-radius-input"
741
- }
742
- }
743
- }
744
- }
745
- }
746
- },
747
- "container": {
748
- "max-width": {
749
- "narrow": {
750
- "value": 1024,
751
- "type": "dimension",
752
- "$extensions": {
753
- "public": true,
754
- "defaultUnit": "px",
755
- "com.figma": {
756
- "scopes": [
757
- "WIDTH_HEIGHT"
758
- ],
759
- "exportAs": "variable",
760
- "codeSyntax": {
761
- "WEB": "--pds-container-max-width-narrow"
762
- }
763
- }
764
- }
765
- },
766
- "standard": {
767
- "value": 1200,
768
- "type": "dimension",
769
- "$extensions": {
770
- "public": true,
771
- "defaultUnit": "px",
772
- "com.figma": {
773
- "scopes": [
774
- "WIDTH_HEIGHT"
775
- ],
776
- "exportAs": "variable",
777
- "codeSyntax": {
778
- "WEB": "--pds-container-max-width-standard"
779
- }
780
- }
781
- }
782
- },
783
- "wide": {
784
- "value": 1440,
785
- "type": "dimension",
786
- "$extensions": {
787
- "public": true,
788
- "defaultUnit": "px",
789
- "com.figma": {
790
- "scopes": [
791
- "WIDTH_HEIGHT"
792
- ],
793
- "exportAs": "variable",
794
- "codeSyntax": {
795
- "WEB": "--pds-container-max-width-wide"
796
- }
797
- }
798
- }
799
- },
800
- "x-wide": {
801
- "value": 1600,
802
- "type": "dimension",
803
- "$extensions": {
804
- "public": true,
805
- "defaultUnit": "px",
806
- "com.figma": {
807
- "scopes": [
808
- "WIDTH_HEIGHT"
809
- ],
810
- "exportAs": "variable",
811
- "codeSyntax": {
812
- "WEB": "--pds-container-max-width-x-wide"
813
- }
814
- }
815
- }
816
- }
817
- }
818
- }
819
- }
820
- },
821
- "global-component": {
822
- "component": {
823
- "border": {
824
- "width": {
825
- "stepper": {
826
- "value": 3,
827
- "type": "dimension",
828
- "$extensions": {
829
- "public": true,
830
- "defaultUnit": "px",
831
- "com.figma": {
832
- "scopes": [
833
- "STROKE_FLOAT"
834
- ],
835
- "exportAs": "variable",
836
- "codeSyntax": {
837
- "WEB": "--pds-border-width-stepper"
838
- }
839
- }
840
- }
841
- }
842
- }
843
- },
844
- "container": {
845
- "modal": {
846
- "width": {
847
- "small": {
848
- "value": 400,
849
- "type": "dimension",
850
- "$extensions": {
851
- "public": true,
852
- "defaultUnit": "rem",
853
- "com.figma": {
854
- "scopes": [
855
- "WIDTH_HEIGHT"
856
- ],
857
- "exportAs": "variable",
858
- "codeSyntax": {
859
- "WEB": "--pds-container-modal-width-small"
860
- }
861
- }
862
- }
863
- },
864
- "medium": {
865
- "value": 600,
866
- "type": "dimension",
867
- "$extensions": {
868
- "public": true,
869
- "defaultUnit": "rem",
870
- "com.figma": {
871
- "scopes": [
872
- "WIDTH_HEIGHT"
873
- ],
874
- "exportAs": "variable",
875
- "codeSyntax": {
876
- "WEB": "--pds-container-modal-width-medium"
877
- }
826
+ },
827
+ "md": {
828
+ "value": 600,
829
+ "type": "dimension",
830
+ "$extensions": {
831
+ "public": true,
832
+ "defaultUnit": "rem",
833
+ "com.figma": {
834
+ "scopes": [
835
+ "WIDTH_HEIGHT"
836
+ ],
837
+ "exportAs": "variable",
838
+ "codeSyntax": {
839
+ "WEB": "--pds-container-modal-width-md"
840
+ }
878
841
  }
879
842
  }
880
843
  },
881
- "large": {
844
+ "lg": {
882
845
  "value": 760,
883
846
  "type": "dimension",
884
847
  "$extensions": {
@@ -890,7 +853,7 @@
890
853
  ],
891
854
  "exportAs": "variable",
892
855
  "codeSyntax": {
893
- "WEB": "--pds-container-modal-width-large"
856
+ "WEB": "--pds-container-modal-width-lg"
894
857
  }
895
858
  }
896
859
  }
@@ -932,6 +895,27 @@
932
895
  }
933
896
  }
934
897
  }
898
+ },
899
+ "dashboard": {
900
+ "navbar": {
901
+ "max-width": {
902
+ "value": 1440,
903
+ "type": "dimension",
904
+ "$extensions": {
905
+ "public": true,
906
+ "defaultUnit": "px",
907
+ "com.figma": {
908
+ "scopes": [
909
+ "WIDTH_HEIGHT"
910
+ ],
911
+ "exportAs": "variable",
912
+ "codeSyntax": {
913
+ "WEB": "--pds-container-dashboard-navbar-max-width"
914
+ }
915
+ }
916
+ }
917
+ }
918
+ }
935
919
  }
936
920
  },
937
921
  "spacing": {
@@ -971,6 +955,42 @@
971
955
  }
972
956
  }
973
957
  }
958
+ },
959
+ "stepper": {
960
+ "indicator-size": {
961
+ "value": "{spacing.L}",
962
+ "type": "dimension",
963
+ "$extensions": {
964
+ "public": true,
965
+ "defaultUnit": "rem",
966
+ "com.figma": {
967
+ "scopes": [
968
+ "WIDTH_HEIGHT"
969
+ ],
970
+ "exportAs": "variable",
971
+ "codeSyntax": {
972
+ "WEB": "--pds-spacing-stepper-indicator-size"
973
+ }
974
+ }
975
+ }
976
+ },
977
+ "step-content-width": {
978
+ "value": 112,
979
+ "type": "dimension",
980
+ "$extensions": {
981
+ "public": true,
982
+ "defaultUnit": "rem",
983
+ "com.figma": {
984
+ "scopes": [
985
+ "WIDTH_HEIGHT"
986
+ ],
987
+ "exportAs": "variable",
988
+ "codeSyntax": {
989
+ "WEB": "--pds-spacing-stepper-step-content-width"
990
+ }
991
+ }
992
+ }
993
+ }
974
994
  }
975
995
  }
976
996
  }
@@ -1139,986 +1159,127 @@
1139
1159
  "fontWeight": "Italic",
1140
1160
  "fontSize": "{typography.size.3XL}",
1141
1161
  "lineHeight": "{typography.lh.M}",
1142
- "letterSpacing": "{typography.ls.S}"
1143
- },
1144
- "type": "typography",
1145
- "$extensions": {
1146
- "com.figma": {
1147
- "exportAs": "textStyle"
1148
- }
1149
- }
1150
- }
1151
- },
1152
- "heading": {
1153
- "h1": {
1154
- "value": {
1155
- "fontFamily": "{typography.ff.sans}",
1156
- "fontWeight": "{typography.fw.bold}",
1157
- "fontSize": "{typography.size.3XL}",
1158
- "lineHeight": "{typography.lh.S}",
1159
- "letterSpacing": "0%"
1160
- },
1161
- "type": "typography",
1162
- "$extensions": {
1163
- "public": true,
1164
- "com.figma": {
1165
- "exportAs": "textStyle",
1166
- "codeSyntax": {
1167
- "WEB": "--pds-typography-composite-heading-h1"
1168
- }
1169
- }
1170
- }
1171
- },
1172
- "h2": {
1173
- "value": {
1174
- "fontFamily": "{typography.ff.sans}",
1175
- "fontWeight": "{typography.fw.bold}",
1176
- "fontSize": "{typography.size.2XL}",
1177
- "lineHeight": "{typography.lh.S}",
1178
- "letterSpacing": "0%"
1179
- },
1180
- "type": "typography",
1181
- "$extensions": {
1182
- "public": true,
1183
- "com.figma": {
1184
- "exportAs": "textStyle",
1185
- "codeSyntax": {
1186
- "WEB": "--pds-typography-composite-heading-h2"
1187
- }
1188
- }
1189
- }
1190
- },
1191
- "h3": {
1192
- "value": {
1193
- "fontFamily": "{typography.ff.sans}",
1194
- "fontWeight": "{typography.fw.semibold}",
1195
- "fontSize": "{typography.size.XL}",
1196
- "lineHeight": "{typography.lh.S}",
1197
- "letterSpacing": "0%"
1198
- },
1199
- "type": "typography",
1200
- "$extensions": {
1201
- "public": true,
1202
- "com.figma": {
1203
- "exportAs": "textStyle",
1204
- "codeSyntax": {
1205
- "WEB": "--pds-typography-composite-heading-h3"
1206
- }
1207
- }
1208
- }
1209
- },
1210
- "h4": {
1211
- "value": {
1212
- "fontFamily": "{typography.ff.sans}",
1213
- "fontWeight": "{typography.fw.semibold}",
1214
- "fontSize": "{typography.size.L}",
1215
- "lineHeight": "{typography.lh.S}",
1216
- "letterSpacing": "0%"
1217
- },
1218
- "type": "typography",
1219
- "$extensions": {
1220
- "public": true,
1221
- "com.figma": {
1222
- "exportAs": "textStyle",
1223
- "codeSyntax": {
1224
- "WEB": "--pds-typography-composite-heading-h4"
1225
- }
1226
- }
1227
- }
1228
- },
1229
- "h5": {
1230
- "value": {
1231
- "fontFamily": "{typography.ff.sans}",
1232
- "fontWeight": "{typography.fw.semibold}",
1233
- "fontSize": "{typography.size.M}",
1234
- "lineHeight": "{typography.lh.S}",
1235
- "letterSpacing": "0%"
1236
- },
1237
- "type": "typography",
1238
- "$extensions": {
1239
- "public": true,
1240
- "com.figma": {
1241
- "exportAs": "textStyle",
1242
- "codeSyntax": {
1243
- "WEB": "--pds-typography-composite-heading-h5"
1244
- }
1245
- }
1246
- }
1247
- },
1248
- "h6": {
1249
- "value": {
1250
- "fontFamily": "{typography.ff.sans}",
1251
- "fontWeight": "{typography.fw.semibold}",
1252
- "fontSize": "{typography.size.M}",
1253
- "lineHeight": "{typography.lh.S}",
1254
- "letterSpacing": "0%"
1255
- },
1256
- "type": "typography",
1257
- "$extensions": {
1258
- "public": true,
1259
- "com.figma": {
1260
- "exportAs": "textStyle",
1261
- "codeSyntax": {
1262
- "WEB": "--pds-typography-composite-heading-h6"
1263
- }
1264
- }
1265
- }
1266
- }
1267
- },
1268
- "menu": {
1269
- "item-heading": {
1270
- "value": {
1271
- "fontFamily": "{typography.ff.sans}",
1272
- "fontWeight": "{typography.fw.bold}",
1273
- "fontSize": "{typography.size.S}",
1274
- "lineHeight": "{typography.lh.S}",
1275
- "letterSpacing": "{typography.ls.L}",
1276
- "textCase": "upper"
1277
- },
1278
- "type": "typography",
1279
- "$extensions": {
1280
- "public": true,
1281
- "com.figma": {
1282
- "exportAs": "textStyle",
1283
- "codeSyntax": {
1284
- "WEB": "--pds-typography-composite-menu-item-heading"
1285
- }
1286
- }
1287
- }
1288
- }
1289
- },
1290
- "type-scale": {
1291
- "light": {
1292
- "7XL": {
1293
- "value": {
1294
- "fontFamily": "{typography.ff.sans}",
1295
- "fontWeight": "{typography.fw.light}",
1296
- "fontSize": "{typography.size.7XL}",
1297
- "lineHeight": "{typography.lh.M}",
1298
- "letterSpacing": "0%"
1299
- },
1300
- "type": "typography",
1301
- "$extensions": {
1302
- "com.figma": {
1303
- "exportAs": "textStyle"
1304
- }
1305
- }
1306
- },
1307
- "6XL": {
1308
- "value": {
1309
- "fontFamily": "{typography.ff.sans}",
1310
- "fontWeight": "{typography.fw.light}",
1311
- "fontSize": "{typography.size.6XL}",
1312
- "lineHeight": "{typography.lh.M}",
1313
- "letterSpacing": "0%"
1314
- },
1315
- "type": "typography",
1316
- "$extensions": {
1317
- "com.figma": {
1318
- "exportAs": "textStyle"
1319
- }
1320
- }
1321
- },
1322
- "5XL": {
1323
- "value": {
1324
- "fontFamily": "{typography.ff.sans}",
1325
- "fontWeight": "{typography.fw.light}",
1326
- "fontSize": "{typography.size.5XL}",
1327
- "lineHeight": "{typography.lh.M}",
1328
- "letterSpacing": "0%"
1329
- },
1330
- "type": "typography",
1331
- "$extensions": {
1332
- "com.figma": {
1333
- "exportAs": "textStyle"
1334
- }
1335
- }
1336
- },
1337
- "4XL": {
1338
- "value": {
1339
- "fontFamily": "{typography.ff.sans}",
1340
- "fontWeight": "{typography.fw.light}",
1341
- "fontSize": "{typography.size.4XL}",
1342
- "lineHeight": "{typography.lh.M}",
1343
- "letterSpacing": "0%"
1344
- },
1345
- "type": "typography",
1346
- "$extensions": {
1347
- "com.figma": {
1348
- "exportAs": "textStyle"
1349
- }
1350
- }
1351
- },
1352
- "3XL": {
1353
- "value": {
1354
- "fontFamily": "{typography.ff.sans}",
1355
- "fontWeight": "{typography.fw.light}",
1356
- "fontSize": "{typography.size.3XL}",
1357
- "lineHeight": "{typography.lh.M}",
1358
- "letterSpacing": "0%"
1359
- },
1360
- "type": "typography",
1361
- "$extensions": {
1362
- "com.figma": {
1363
- "exportAs": "textStyle"
1364
- }
1365
- }
1366
- },
1367
- "2XL": {
1368
- "value": {
1369
- "fontFamily": "{typography.ff.sans}",
1370
- "fontWeight": "{typography.fw.light}",
1371
- "fontSize": "{typography.size.2XL}",
1372
- "lineHeight": "{typography.lh.M}",
1373
- "letterSpacing": "0%"
1374
- },
1375
- "type": "typography",
1376
- "$extensions": {
1377
- "com.figma": {
1378
- "exportAs": "textStyle"
1379
- }
1380
- }
1381
- },
1382
- "XL": {
1383
- "value": {
1384
- "fontFamily": "{typography.ff.sans}",
1385
- "fontWeight": "{typography.fw.light}",
1386
- "fontSize": "{typography.size.XL}",
1387
- "lineHeight": "{typography.lh.M}",
1388
- "letterSpacing": "0%"
1389
- },
1390
- "type": "typography",
1391
- "$extensions": {
1392
- "com.figma": {
1393
- "exportAs": "textStyle"
1394
- }
1395
- }
1396
- },
1397
- "L": {
1398
- "value": {
1399
- "fontFamily": "{typography.ff.sans}",
1400
- "fontWeight": "{typography.fw.light}",
1401
- "fontSize": "{typography.size.L}",
1402
- "lineHeight": "{typography.lh.M}",
1403
- "letterSpacing": "0%"
1404
- },
1405
- "type": "typography",
1406
- "$extensions": {
1407
- "com.figma": {
1408
- "exportAs": "textStyle"
1409
- }
1410
- }
1411
- },
1412
- "M": {
1413
- "value": {
1414
- "fontFamily": "{typography.ff.sans}",
1415
- "fontWeight": "{typography.fw.light}",
1416
- "fontSize": "{typography.size.M}",
1417
- "lineHeight": "{typography.lh.M}",
1418
- "letterSpacing": "0%"
1419
- },
1420
- "type": "typography",
1421
- "$extensions": {
1422
- "com.figma": {
1423
- "exportAs": "textStyle"
1424
- }
1425
- }
1426
- },
1427
- "S": {
1428
- "value": {
1429
- "fontFamily": "{typography.ff.sans}",
1430
- "fontWeight": "{typography.fw.light}",
1431
- "fontSize": "{typography.size.S}",
1432
- "lineHeight": "{typography.lh.M}",
1433
- "letterSpacing": "0%"
1434
- },
1435
- "type": "typography",
1436
- "$extensions": {
1437
- "com.figma": {
1438
- "exportAs": "textStyle"
1439
- }
1440
- }
1441
- },
1442
- "XS": {
1443
- "value": {
1444
- "fontFamily": "{typography.ff.sans}",
1445
- "fontWeight": "{typography.fw.light}",
1446
- "fontSize": "{typography.size.XS}",
1447
- "lineHeight": "{typography.lh.M}",
1448
- "letterSpacing": "0%"
1449
- },
1450
- "type": "typography",
1451
- "$extensions": {
1452
- "com.figma": {
1453
- "exportAs": "textStyle"
1454
- }
1455
- }
1456
- }
1457
- },
1458
- "regular": {
1459
- "7XL": {
1460
- "value": {
1461
- "fontFamily": "{typography.ff.sans}",
1462
- "fontWeight": "{typography.fw.regular}",
1463
- "fontSize": "{typography.size.7XL}",
1464
- "lineHeight": "{typography.lh.M}",
1465
- "letterSpacing": "0%"
1466
- },
1467
- "type": "typography",
1468
- "$extensions": {
1469
- "com.figma": {
1470
- "exportAs": "textStyle"
1471
- }
1472
- }
1473
- },
1474
- "6XL": {
1475
- "value": {
1476
- "fontFamily": "{typography.ff.sans}",
1477
- "fontWeight": "{typography.fw.regular}",
1478
- "fontSize": "{typography.size.6XL}",
1479
- "lineHeight": "{typography.lh.M}",
1480
- "letterSpacing": "0%"
1481
- },
1482
- "type": "typography",
1483
- "$extensions": {
1484
- "com.figma": {
1485
- "exportAs": "textStyle"
1486
- }
1487
- }
1488
- },
1489
- "5XL": {
1490
- "value": {
1491
- "fontFamily": "{typography.ff.sans}",
1492
- "fontWeight": "{typography.fw.regular}",
1493
- "fontSize": "{typography.size.5XL}",
1494
- "lineHeight": "{typography.lh.M}",
1495
- "letterSpacing": "0%"
1496
- },
1497
- "type": "typography",
1498
- "$extensions": {
1499
- "com.figma": {
1500
- "exportAs": "textStyle"
1501
- }
1502
- }
1503
- },
1504
- "4XL": {
1505
- "value": {
1506
- "fontFamily": "{typography.ff.sans}",
1507
- "fontWeight": "{typography.fw.regular}",
1508
- "fontSize": "{typography.size.4XL}",
1509
- "lineHeight": "{typography.lh.M}",
1510
- "letterSpacing": "0%"
1511
- },
1512
- "type": "typography",
1513
- "$extensions": {
1514
- "com.figma": {
1515
- "exportAs": "textStyle"
1516
- }
1517
- }
1518
- },
1519
- "3XL": {
1520
- "value": {
1521
- "fontFamily": "{typography.ff.sans}",
1522
- "fontWeight": "{typography.fw.regular}",
1523
- "fontSize": "{typography.size.3XL}",
1524
- "lineHeight": "{typography.lh.M}",
1525
- "letterSpacing": "0%"
1526
- },
1527
- "type": "typography",
1528
- "$extensions": {
1529
- "com.figma": {
1530
- "exportAs": "textStyle"
1531
- }
1532
- }
1533
- },
1534
- "2XL": {
1535
- "value": {
1536
- "fontFamily": "{typography.ff.sans}",
1537
- "fontWeight": "{typography.fw.regular}",
1538
- "fontSize": "{typography.size.2XL}",
1539
- "lineHeight": "{typography.lh.M}",
1540
- "letterSpacing": "0%"
1541
- },
1542
- "type": "typography",
1543
- "$extensions": {
1544
- "com.figma": {
1545
- "exportAs": "textStyle"
1546
- }
1547
- }
1548
- },
1549
- "XL": {
1550
- "value": {
1551
- "fontFamily": "{typography.ff.sans}",
1552
- "fontWeight": "{typography.fw.regular}",
1553
- "fontSize": "{typography.size.XL}",
1554
- "lineHeight": "{typography.lh.M}",
1555
- "letterSpacing": "0%"
1556
- },
1557
- "type": "typography",
1558
- "$extensions": {
1559
- "com.figma": {
1560
- "exportAs": "textStyle"
1561
- }
1562
- }
1563
- },
1564
- "L": {
1565
- "value": {
1566
- "fontFamily": "{typography.ff.sans}",
1567
- "fontWeight": "{typography.fw.regular}",
1568
- "fontSize": "{typography.size.L}",
1569
- "lineHeight": "{typography.lh.M}",
1570
- "letterSpacing": "0%"
1571
- },
1572
- "type": "typography",
1573
- "$extensions": {
1574
- "com.figma": {
1575
- "exportAs": "textStyle"
1576
- }
1577
- }
1578
- },
1579
- "M": {
1580
- "value": {
1581
- "fontFamily": "{typography.ff.sans}",
1582
- "fontWeight": "{typography.fw.regular}",
1583
- "fontSize": "{typography.size.M}",
1584
- "lineHeight": "{typography.lh.M}",
1585
- "letterSpacing": "0%"
1586
- },
1587
- "type": "typography",
1588
- "$extensions": {
1589
- "com.figma": {
1590
- "exportAs": "textStyle"
1591
- }
1592
- }
1593
- },
1594
- "S": {
1595
- "value": {
1596
- "fontFamily": "{typography.ff.sans}",
1597
- "fontWeight": "{typography.fw.regular}",
1598
- "fontSize": "{typography.size.S}",
1599
- "lineHeight": "{typography.lh.M}",
1600
- "letterSpacing": "0%"
1601
- },
1602
- "type": "typography",
1603
- "$extensions": {
1604
- "com.figma": {
1605
- "exportAs": "textStyle"
1606
- }
1607
- }
1608
- },
1609
- "XS": {
1610
- "value": {
1611
- "fontFamily": "{typography.ff.sans}",
1612
- "fontWeight": "{typography.fw.regular}",
1613
- "fontSize": "{typography.size.XS}",
1614
- "lineHeight": "{typography.lh.M}",
1615
- "letterSpacing": "0%"
1616
- },
1617
- "type": "typography",
1618
- "$extensions": {
1619
- "com.figma": {
1620
- "exportAs": "textStyle"
1621
- }
1622
- }
1623
- }
1624
- },
1625
- "medium": {
1626
- "7XL": {
1627
- "value": {
1628
- "fontFamily": "{typography.ff.sans}",
1629
- "fontWeight": "{typography.fw.medium}",
1630
- "fontSize": "{typography.size.7XL}",
1631
- "lineHeight": "{typography.lh.M}",
1632
- "letterSpacing": "0%"
1633
- },
1634
- "type": "typography",
1635
- "$extensions": {
1636
- "com.figma": {
1637
- "exportAs": "textStyle"
1638
- }
1639
- }
1640
- },
1641
- "6XL": {
1642
- "value": {
1643
- "fontFamily": "{typography.ff.sans}",
1644
- "fontWeight": "{typography.fw.medium}",
1645
- "fontSize": "{typography.size.6XL}",
1646
- "lineHeight": "{typography.lh.M}",
1647
- "letterSpacing": "0%"
1648
- },
1649
- "type": "typography",
1650
- "$extensions": {
1651
- "com.figma": {
1652
- "exportAs": "textStyle"
1653
- }
1654
- }
1655
- },
1656
- "5XL": {
1657
- "value": {
1658
- "fontFamily": "{typography.ff.sans}",
1659
- "fontWeight": "{typography.fw.medium}",
1660
- "fontSize": "{typography.size.5XL}",
1661
- "lineHeight": "{typography.lh.M}",
1662
- "letterSpacing": "0%"
1663
- },
1664
- "type": "typography",
1665
- "$extensions": {
1666
- "com.figma": {
1667
- "exportAs": "textStyle"
1668
- }
1669
- }
1670
- },
1671
- "4XL": {
1672
- "value": {
1673
- "fontFamily": "{typography.ff.sans}",
1674
- "fontWeight": "{typography.fw.medium}",
1675
- "fontSize": "{typography.size.4XL}",
1676
- "lineHeight": "{typography.lh.M}",
1677
- "letterSpacing": "0%"
1678
- },
1679
- "type": "typography",
1680
- "$extensions": {
1681
- "com.figma": {
1682
- "exportAs": "textStyle"
1683
- }
1684
- }
1685
- },
1686
- "3XL": {
1687
- "value": {
1688
- "fontFamily": "{typography.ff.sans}",
1689
- "fontWeight": "{typography.fw.medium}",
1690
- "fontSize": "{typography.size.3XL}",
1691
- "lineHeight": "{typography.lh.M}",
1692
- "letterSpacing": "0%"
1693
- },
1694
- "type": "typography",
1695
- "$extensions": {
1696
- "com.figma": {
1697
- "exportAs": "textStyle"
1698
- }
1699
- }
1700
- },
1701
- "2XL": {
1702
- "value": {
1703
- "fontFamily": "{typography.ff.sans}",
1704
- "fontWeight": "{typography.fw.medium}",
1705
- "fontSize": "{typography.size.2XL}",
1706
- "lineHeight": "{typography.lh.M}",
1707
- "letterSpacing": "0%"
1708
- },
1709
- "type": "typography",
1710
- "$extensions": {
1711
- "com.figma": {
1712
- "exportAs": "textStyle"
1713
- }
1714
- }
1715
- },
1716
- "XL": {
1717
- "value": {
1718
- "fontFamily": "{typography.ff.sans}",
1719
- "fontWeight": "{typography.fw.medium}",
1720
- "fontSize": "{typography.size.XL}",
1721
- "lineHeight": "{typography.lh.M}",
1722
- "letterSpacing": "0%"
1723
- },
1724
- "type": "typography",
1725
- "$extensions": {
1726
- "com.figma": {
1727
- "exportAs": "textStyle"
1728
- }
1729
- }
1730
- },
1731
- "L": {
1732
- "value": {
1733
- "fontFamily": "{typography.ff.sans}",
1734
- "fontWeight": "{typography.fw.medium}",
1735
- "fontSize": "{typography.size.L}",
1736
- "lineHeight": "{typography.lh.M}",
1737
- "letterSpacing": "0%"
1738
- },
1739
- "type": "typography",
1740
- "$extensions": {
1741
- "com.figma": {
1742
- "exportAs": "textStyle"
1743
- }
1744
- }
1745
- },
1746
- "M": {
1747
- "value": {
1748
- "fontFamily": "{typography.ff.sans}",
1749
- "fontWeight": "{typography.fw.medium}",
1750
- "fontSize": "{typography.size.M}",
1751
- "lineHeight": "{typography.lh.M}",
1752
- "letterSpacing": "0%"
1753
- },
1754
- "type": "typography",
1755
- "$extensions": {
1756
- "com.figma": {
1757
- "exportAs": "textStyle"
1758
- }
1759
- }
1760
- },
1761
- "S": {
1762
- "value": {
1763
- "fontFamily": "{typography.ff.sans}",
1764
- "fontWeight": "{typography.fw.medium}",
1765
- "fontSize": "{typography.size.S}",
1766
- "lineHeight": "{typography.lh.M}",
1767
- "letterSpacing": "0%"
1768
- },
1769
- "type": "typography",
1770
- "$extensions": {
1771
- "com.figma": {
1772
- "exportAs": "textStyle"
1773
- }
1774
- }
1775
- },
1776
- "XS": {
1777
- "value": {
1778
- "fontFamily": "{typography.ff.sans}",
1779
- "fontWeight": "{typography.fw.medium}",
1780
- "fontSize": "{typography.size.XS}",
1781
- "lineHeight": "{typography.lh.M}",
1782
- "letterSpacing": "0%"
1783
- },
1784
- "type": "typography",
1785
- "$extensions": {
1786
- "com.figma": {
1787
- "exportAs": "textStyle"
1788
- }
1789
- }
1790
- }
1791
- },
1792
- "semibold": {
1793
- "7XL": {
1794
- "value": {
1795
- "fontFamily": "{typography.ff.sans}",
1796
- "fontWeight": "{typography.fw.semibold}",
1797
- "fontSize": "{typography.size.7XL}",
1798
- "lineHeight": "{typography.lh.M}",
1799
- "letterSpacing": "0%"
1800
- },
1801
- "type": "typography",
1802
- "$extensions": {
1803
- "com.figma": {
1804
- "exportAs": "textStyle"
1805
- }
1806
- }
1807
- },
1808
- "6XL": {
1809
- "value": {
1810
- "fontFamily": "{typography.ff.sans}",
1811
- "fontWeight": "{typography.fw.semibold}",
1812
- "fontSize": "{typography.size.6XL}",
1813
- "lineHeight": "{typography.lh.M}",
1814
- "letterSpacing": "0%"
1815
- },
1816
- "type": "typography",
1817
- "$extensions": {
1818
- "com.figma": {
1819
- "exportAs": "textStyle"
1820
- }
1821
- }
1822
- },
1823
- "5XL": {
1824
- "value": {
1825
- "fontFamily": "{typography.ff.sans}",
1826
- "fontWeight": "{typography.fw.semibold}",
1827
- "fontSize": "{typography.size.5XL}",
1828
- "lineHeight": "{typography.lh.M}",
1829
- "letterSpacing": "0%"
1830
- },
1831
- "type": "typography",
1832
- "$extensions": {
1833
- "com.figma": {
1834
- "exportAs": "textStyle"
1835
- }
1836
- }
1837
- },
1838
- "4XL": {
1839
- "value": {
1840
- "fontFamily": "{typography.ff.sans}",
1841
- "fontWeight": "{typography.fw.semibold}",
1842
- "fontSize": "{typography.size.4XL}",
1843
- "lineHeight": "{typography.lh.M}",
1844
- "letterSpacing": "0%"
1845
- },
1846
- "type": "typography",
1847
- "$extensions": {
1848
- "com.figma": {
1849
- "exportAs": "textStyle"
1850
- }
1851
- }
1852
- },
1853
- "3XL": {
1854
- "value": {
1855
- "fontFamily": "{typography.ff.sans}",
1856
- "fontWeight": "{typography.fw.semibold}",
1857
- "fontSize": "{typography.size.3XL}",
1858
- "lineHeight": "{typography.lh.M}",
1859
- "letterSpacing": "0%"
1860
- },
1861
- "type": "typography",
1862
- "$extensions": {
1863
- "com.figma": {
1864
- "exportAs": "textStyle"
1865
- }
1866
- }
1867
- },
1868
- "2XL": {
1869
- "value": {
1870
- "fontFamily": "{typography.ff.sans}",
1871
- "fontWeight": "{typography.fw.semibold}",
1872
- "fontSize": "{typography.size.2XL}",
1873
- "lineHeight": "{typography.lh.M}",
1874
- "letterSpacing": "0%"
1875
- },
1876
- "type": "typography",
1877
- "$extensions": {
1878
- "com.figma": {
1879
- "exportAs": "textStyle"
1880
- }
1881
- }
1882
- },
1883
- "XL": {
1884
- "value": {
1885
- "fontFamily": "{typography.ff.sans}",
1886
- "fontWeight": "{typography.fw.semibold}",
1887
- "fontSize": "{typography.size.XL}",
1888
- "lineHeight": "{typography.lh.M}",
1889
- "letterSpacing": "0%"
1890
- },
1891
- "type": "typography",
1892
- "$extensions": {
1893
- "com.figma": {
1894
- "exportAs": "textStyle"
1895
- }
1896
- }
1897
- },
1898
- "L": {
1899
- "value": {
1900
- "fontFamily": "{typography.ff.sans}",
1901
- "fontWeight": "{typography.fw.semibold}",
1902
- "fontSize": "{typography.size.L}",
1903
- "lineHeight": "{typography.lh.M}",
1904
- "letterSpacing": "0%"
1905
- },
1906
- "type": "typography",
1907
- "$extensions": {
1908
- "com.figma": {
1909
- "exportAs": "textStyle"
1910
- }
1911
- }
1912
- },
1913
- "M": {
1914
- "value": {
1915
- "fontFamily": "{typography.ff.sans}",
1916
- "fontWeight": "{typography.fw.semibold}",
1917
- "fontSize": "{typography.size.M}",
1918
- "lineHeight": "{typography.lh.M}",
1919
- "letterSpacing": "0%"
1920
- },
1921
- "type": "typography",
1922
- "$extensions": {
1923
- "com.figma": {
1924
- "exportAs": "textStyle"
1925
- }
1926
- }
1927
- },
1928
- "S": {
1929
- "value": {
1930
- "fontFamily": "{typography.ff.sans}",
1931
- "fontWeight": "{typography.fw.semibold}",
1932
- "fontSize": "{typography.size.S}",
1933
- "lineHeight": "{typography.lh.M}",
1934
- "letterSpacing": "0%"
1935
- },
1936
- "type": "typography",
1937
- "$extensions": {
1938
- "com.figma": {
1939
- "exportAs": "textStyle"
1940
- }
1941
- }
1942
- },
1943
- "XS": {
1944
- "value": {
1945
- "fontFamily": "{typography.ff.sans}",
1946
- "fontWeight": "{typography.fw.semibold}",
1947
- "fontSize": "{typography.size.XS}",
1948
- "lineHeight": "{typography.lh.M}",
1949
- "letterSpacing": "0%"
1950
- },
1951
- "type": "typography",
1952
- "$extensions": {
1953
- "com.figma": {
1954
- "exportAs": "textStyle"
1955
- }
1956
- }
1957
- }
1958
- },
1959
- "bold": {
1960
- "7XL": {
1961
- "value": {
1962
- "fontFamily": "{typography.ff.sans}",
1963
- "fontWeight": "{typography.fw.bold}",
1964
- "fontSize": "{typography.size.7XL}",
1965
- "lineHeight": "{typography.lh.M}",
1966
- "letterSpacing": "0%"
1967
- },
1968
- "type": "typography",
1969
- "$extensions": {
1970
- "com.figma": {
1971
- "exportAs": "textStyle"
1972
- }
1973
- }
1974
- },
1975
- "6XL": {
1976
- "value": {
1977
- "fontFamily": "{typography.ff.sans}",
1978
- "fontWeight": "{typography.fw.bold}",
1979
- "fontSize": "{typography.size.6XL}",
1980
- "lineHeight": "{typography.lh.M}",
1981
- "letterSpacing": "0%"
1982
- },
1983
- "type": "typography",
1984
- "$extensions": {
1985
- "com.figma": {
1986
- "exportAs": "textStyle"
1987
- }
1988
- }
1989
- },
1990
- "5XL": {
1991
- "value": {
1992
- "fontFamily": "{typography.ff.sans}",
1993
- "fontWeight": "{typography.fw.bold}",
1994
- "fontSize": "{typography.size.5XL}",
1995
- "lineHeight": "{typography.lh.M}",
1996
- "letterSpacing": "0%"
1997
- },
1998
- "type": "typography",
1999
- "$extensions": {
2000
- "com.figma": {
2001
- "exportAs": "textStyle"
2002
- }
2003
- }
2004
- },
2005
- "4XL": {
2006
- "value": {
2007
- "fontFamily": "{typography.ff.sans}",
2008
- "fontWeight": "{typography.fw.bold}",
2009
- "fontSize": "{typography.size.4XL}",
2010
- "lineHeight": "{typography.lh.M}",
2011
- "letterSpacing": "0%"
2012
- },
2013
- "type": "typography",
2014
- "$extensions": {
2015
- "com.figma": {
2016
- "exportAs": "textStyle"
2017
- }
2018
- }
1162
+ "letterSpacing": "{typography.ls.S}"
2019
1163
  },
2020
- "3XL": {
2021
- "value": {
2022
- "fontFamily": "{typography.ff.sans}",
2023
- "fontWeight": "{typography.fw.bold}",
2024
- "fontSize": "{typography.size.3XL}",
2025
- "lineHeight": "{typography.lh.M}",
2026
- "letterSpacing": "0%"
2027
- },
2028
- "type": "typography",
2029
- "$extensions": {
2030
- "com.figma": {
2031
- "exportAs": "textStyle"
2032
- }
1164
+ "type": "typography",
1165
+ "$extensions": {
1166
+ "com.figma": {
1167
+ "exportAs": "textStyle"
2033
1168
  }
1169
+ }
1170
+ }
1171
+ },
1172
+ "heading": {
1173
+ "h1": {
1174
+ "value": {
1175
+ "fontFamily": "{typography.ff.sans}",
1176
+ "fontWeight": "{typography.fw.bold}",
1177
+ "fontSize": "{typography.size.3XL}",
1178
+ "lineHeight": "{typography.lh.XS}",
1179
+ "letterSpacing": "0%"
2034
1180
  },
2035
- "2XL": {
2036
- "value": {
2037
- "fontFamily": "{typography.ff.sans}",
2038
- "fontWeight": "{typography.fw.bold}",
2039
- "fontSize": "{typography.size.2XL}",
2040
- "lineHeight": "{typography.lh.M}",
2041
- "letterSpacing": "0%"
2042
- },
2043
- "type": "typography",
2044
- "$extensions": {
2045
- "com.figma": {
2046
- "exportAs": "textStyle"
1181
+ "type": "typography",
1182
+ "$extensions": {
1183
+ "public": true,
1184
+ "com.figma": {
1185
+ "exportAs": "textStyle",
1186
+ "codeSyntax": {
1187
+ "WEB": "--pds-typography-composite-heading-h1"
2047
1188
  }
2048
1189
  }
1190
+ }
1191
+ },
1192
+ "h2": {
1193
+ "value": {
1194
+ "fontFamily": "{typography.ff.sans}",
1195
+ "fontWeight": "{typography.fw.bold}",
1196
+ "fontSize": "{typography.size.2XL}",
1197
+ "lineHeight": "{typography.lh.XS}",
1198
+ "letterSpacing": "0%"
2049
1199
  },
2050
- "XL": {
2051
- "value": {
2052
- "fontFamily": "{typography.ff.sans}",
2053
- "fontWeight": "{typography.fw.bold}",
2054
- "fontSize": "{typography.size.XL}",
2055
- "lineHeight": "{typography.lh.M}",
2056
- "letterSpacing": "0%"
2057
- },
2058
- "type": "typography",
2059
- "$extensions": {
2060
- "com.figma": {
2061
- "exportAs": "textStyle"
1200
+ "type": "typography",
1201
+ "$extensions": {
1202
+ "public": true,
1203
+ "com.figma": {
1204
+ "exportAs": "textStyle",
1205
+ "codeSyntax": {
1206
+ "WEB": "--pds-typography-composite-heading-h2"
2062
1207
  }
2063
1208
  }
1209
+ }
1210
+ },
1211
+ "h3": {
1212
+ "value": {
1213
+ "fontFamily": "{typography.ff.sans}",
1214
+ "fontWeight": "{typography.fw.semibold}",
1215
+ "fontSize": "{typography.size.XL}",
1216
+ "lineHeight": "{typography.lh.S}",
1217
+ "letterSpacing": "0%"
2064
1218
  },
2065
- "L": {
2066
- "value": {
2067
- "fontFamily": "{typography.ff.sans}",
2068
- "fontWeight": "{typography.fw.bold}",
2069
- "fontSize": "{typography.size.L}",
2070
- "lineHeight": "{typography.lh.M}",
2071
- "letterSpacing": "0%"
2072
- },
2073
- "type": "typography",
2074
- "$extensions": {
2075
- "com.figma": {
2076
- "exportAs": "textStyle"
1219
+ "type": "typography",
1220
+ "$extensions": {
1221
+ "public": true,
1222
+ "com.figma": {
1223
+ "exportAs": "textStyle",
1224
+ "codeSyntax": {
1225
+ "WEB": "--pds-typography-composite-heading-h3"
2077
1226
  }
2078
1227
  }
1228
+ }
1229
+ },
1230
+ "h4": {
1231
+ "value": {
1232
+ "fontFamily": "{typography.ff.sans}",
1233
+ "fontWeight": "{typography.fw.semibold}",
1234
+ "fontSize": "{typography.size.L}",
1235
+ "lineHeight": "{typography.lh.S}",
1236
+ "letterSpacing": "0%"
2079
1237
  },
2080
- "M": {
2081
- "value": {
2082
- "fontFamily": "{typography.ff.sans}",
2083
- "fontWeight": "{typography.fw.bold}",
2084
- "fontSize": "{typography.size.M}",
2085
- "lineHeight": "{typography.lh.M}",
2086
- "letterSpacing": "0%"
2087
- },
2088
- "type": "typography",
2089
- "$extensions": {
2090
- "com.figma": {
2091
- "exportAs": "textStyle"
1238
+ "type": "typography",
1239
+ "$extensions": {
1240
+ "public": true,
1241
+ "com.figma": {
1242
+ "exportAs": "textStyle",
1243
+ "codeSyntax": {
1244
+ "WEB": "--pds-typography-composite-heading-h4"
2092
1245
  }
2093
1246
  }
1247
+ }
1248
+ },
1249
+ "h5": {
1250
+ "value": {
1251
+ "fontFamily": "{typography.ff.sans}",
1252
+ "fontWeight": "{typography.fw.semibold}",
1253
+ "fontSize": "{typography.size.M}",
1254
+ "lineHeight": "{typography.lh.S}",
1255
+ "letterSpacing": "0%"
2094
1256
  },
2095
- "S": {
2096
- "value": {
2097
- "fontFamily": "{typography.ff.sans}",
2098
- "fontWeight": "{typography.fw.bold}",
2099
- "fontSize": "{typography.size.S}",
2100
- "lineHeight": "{typography.lh.M}",
2101
- "letterSpacing": "0%"
2102
- },
2103
- "type": "typography",
2104
- "$extensions": {
2105
- "com.figma": {
2106
- "exportAs": "textStyle"
1257
+ "type": "typography",
1258
+ "$extensions": {
1259
+ "public": true,
1260
+ "com.figma": {
1261
+ "exportAs": "textStyle",
1262
+ "codeSyntax": {
1263
+ "WEB": "--pds-typography-composite-heading-h5"
2107
1264
  }
2108
1265
  }
1266
+ }
1267
+ },
1268
+ "h6": {
1269
+ "value": {
1270
+ "fontFamily": "{typography.ff.sans}",
1271
+ "fontWeight": "{typography.fw.semibold}",
1272
+ "fontSize": "{typography.size.M}",
1273
+ "lineHeight": "{typography.lh.S}",
1274
+ "letterSpacing": "0%"
2109
1275
  },
2110
- "XS": {
2111
- "value": {
2112
- "fontFamily": "{typography.ff.sans}",
2113
- "fontWeight": "{typography.fw.bold}",
2114
- "fontSize": "{typography.size.XS}",
2115
- "lineHeight": "{typography.lh.M}",
2116
- "letterSpacing": "0%"
2117
- },
2118
- "type": "typography",
2119
- "$extensions": {
2120
- "com.figma": {
2121
- "exportAs": "textStyle"
1276
+ "type": "typography",
1277
+ "$extensions": {
1278
+ "public": true,
1279
+ "com.figma": {
1280
+ "exportAs": "textStyle",
1281
+ "codeSyntax": {
1282
+ "WEB": "--pds-typography-composite-heading-h6"
2122
1283
  }
2123
1284
  }
2124
1285
  }
@@ -10759,416 +9920,459 @@
10759
9920
  }
10760
9921
  }
10761
9922
  },
10762
- "compact-primitive": {
9923
+ "typography": {
10763
9924
  "primitive": {
10764
9925
  "typography": {
10765
- "size": {
10766
- "7XL": {
10767
- "value": 68.8,
10768
- "type": "fontSize",
9926
+ "font-family (ff)": {
9927
+ "sans": {
9928
+ "value": {
9929
+ "default": "Mona Sans",
9930
+ "mobile": "Mona Sans"
9931
+ },
9932
+ "type": "fontFamily",
10769
9933
  "$extensions": {
10770
9934
  "public": true,
10771
- "defaultUnit": "rem",
10772
- "mathExpression": true,
10773
9935
  "com.figma": {
10774
9936
  "scopes": [
10775
- "FONT_SIZE"
9937
+ "FONT_FAMILY"
10776
9938
  ],
10777
9939
  "exportAs": "variable",
10778
9940
  "codeSyntax": {
10779
- "WEB": "--pds-typography-size-7xl"
9941
+ "WEB": "--pds-typography-ff-sans"
10780
9942
  }
10781
9943
  }
10782
9944
  }
10783
9945
  },
10784
- "6XL": {
10785
- "value": 57.328,
10786
- "type": "fontSize",
9946
+ "serif": {
9947
+ "value": {
9948
+ "default": "Instrument Serif",
9949
+ "mobile": "Instrument Serif"
9950
+ },
9951
+ "type": "fontFamily",
10787
9952
  "$extensions": {
10788
9953
  "public": true,
10789
- "defaultUnit": "rem",
10790
- "mathExpression": true,
10791
9954
  "com.figma": {
10792
9955
  "scopes": [
10793
- "FONT_SIZE"
9956
+ "FONT_FAMILY"
10794
9957
  ],
10795
9958
  "exportAs": "variable",
10796
9959
  "codeSyntax": {
10797
- "WEB": "--pds-typography-size-6xl"
9960
+ "WEB": "--pds-typography-ff-serif"
10798
9961
  }
10799
9962
  }
10800
9963
  }
10801
9964
  },
10802
- "5XL": {
10803
- "value": 47.776,
10804
- "type": "fontSize",
9965
+ "mono": {
9966
+ "value": {
9967
+ "default": "Source Code Pro",
9968
+ "mobile": "Source Code Pro"
9969
+ },
9970
+ "type": "fontFamily",
10805
9971
  "$extensions": {
10806
9972
  "public": true,
10807
- "defaultUnit": "rem",
10808
- "mathExpression": true,
10809
9973
  "com.figma": {
10810
9974
  "scopes": [
10811
- "FONT_SIZE"
9975
+ "FONT_FAMILY"
10812
9976
  ],
10813
9977
  "exportAs": "variable",
10814
9978
  "codeSyntax": {
10815
- "WEB": "--pds-typography-size-5xl"
9979
+ "WEB": "--pds-typography-ff-mono"
10816
9980
  }
10817
9981
  }
10818
9982
  }
10819
- },
10820
- "4XL": {
10821
- "value": 39.808,
10822
- "type": "fontSize",
9983
+ }
9984
+ },
9985
+ "font-weight (fw)": {
9986
+ "light": {
9987
+ "value": {
9988
+ "default": 300,
9989
+ "mobile": 300
9990
+ },
9991
+ "type": "fontWeight",
10823
9992
  "$extensions": {
10824
9993
  "public": true,
10825
- "defaultUnit": "rem",
10826
- "mathExpression": true,
10827
9994
  "com.figma": {
10828
- "scopes": [
10829
- "FONT_SIZE"
10830
- ],
10831
9995
  "exportAs": "variable",
10832
9996
  "codeSyntax": {
10833
- "WEB": "--pds-typography-size-4xl"
9997
+ "WEB": "--pds-typography-fw-light"
10834
9998
  }
10835
9999
  }
10836
10000
  }
10837
10001
  },
10838
- "3XL": {
10839
- "value": 33.184,
10840
- "type": "fontSize",
10002
+ "regular": {
10003
+ "value": {
10004
+ "default": 400,
10005
+ "mobile": 400
10006
+ },
10007
+ "type": "fontWeight",
10841
10008
  "$extensions": {
10842
10009
  "public": true,
10843
- "defaultUnit": "rem",
10844
- "mathExpression": true,
10845
10010
  "com.figma": {
10846
- "scopes": [
10847
- "FONT_SIZE"
10848
- ],
10849
10011
  "exportAs": "variable",
10850
10012
  "codeSyntax": {
10851
- "WEB": "--pds-typography-size-3xl"
10013
+ "WEB": "--pds-typography-fw-regular"
10852
10014
  }
10853
10015
  }
10854
10016
  }
10855
10017
  },
10856
- "2XL": {
10857
- "value": 27.648,
10858
- "type": "fontSize",
10018
+ "medium": {
10019
+ "value": {
10020
+ "default": 500,
10021
+ "mobile": 500
10022
+ },
10023
+ "type": "fontWeight",
10859
10024
  "$extensions": {
10860
10025
  "public": true,
10861
- "defaultUnit": "rem",
10862
- "mathExpression": true,
10863
10026
  "com.figma": {
10864
- "scopes": [
10865
- "FONT_SIZE"
10866
- ],
10867
10027
  "exportAs": "variable",
10868
10028
  "codeSyntax": {
10869
- "WEB": "--pds-typography-size-2xl"
10029
+ "WEB": "--pds-typography-fw-medium"
10870
10030
  }
10871
10031
  }
10872
10032
  }
10873
10033
  },
10874
- "XL": {
10875
- "value": 23.04,
10876
- "type": "fontSize",
10034
+ "semibold": {
10035
+ "value": {
10036
+ "default": 600,
10037
+ "mobile": 600
10038
+ },
10039
+ "type": "fontWeight",
10877
10040
  "$extensions": {
10878
10041
  "public": true,
10879
- "defaultUnit": "rem",
10880
- "mathExpression": true,
10881
10042
  "com.figma": {
10882
- "scopes": [
10883
- "FONT_SIZE"
10884
- ],
10885
10043
  "exportAs": "variable",
10886
10044
  "codeSyntax": {
10887
- "WEB": "--pds-typography-size-xl"
10045
+ "WEB": "--pds-typography-fw-semibold"
10888
10046
  }
10889
10047
  }
10890
10048
  }
10891
10049
  },
10892
- "L": {
10893
- "value": 19.2,
10894
- "type": "fontSize",
10050
+ "bold": {
10051
+ "value": {
10052
+ "default": 700,
10053
+ "mobile": 700
10054
+ },
10055
+ "type": "fontWeight",
10056
+ "$extensions": {
10057
+ "public": true,
10058
+ "com.figma": {
10059
+ "exportAs": "variable",
10060
+ "codeSyntax": {
10061
+ "WEB": "--pds-typography-fw-bold"
10062
+ }
10063
+ }
10064
+ }
10065
+ }
10066
+ },
10067
+ "font": {
10068
+ "css-import": {
10069
+ "value": {
10070
+ "default": "'https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'",
10071
+ "mobile": "'https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'"
10072
+ },
10073
+ "type": "other",
10074
+ "$extensions": {
10075
+ "public": true,
10076
+ "com.figma": {
10077
+ "exportAs": "variable",
10078
+ "codeSyntax": {
10079
+ "WEB": "--pds-typography-font-css-import"
10080
+ }
10081
+ }
10082
+ }
10083
+ }
10084
+ },
10085
+ "letter-spacing (ls)": {
10086
+ "XL": {
10087
+ "value": {
10088
+ "default": "6%",
10089
+ "mobile": "6%"
10090
+ },
10091
+ "type": "letterSpacing",
10895
10092
  "$extensions": {
10896
10093
  "public": true,
10897
- "defaultUnit": "rem",
10898
- "mathExpression": true,
10899
10094
  "com.figma": {
10900
10095
  "scopes": [
10901
- "FONT_SIZE"
10096
+ "LETTER_SPACING"
10902
10097
  ],
10903
- "exportAs": "variable",
10098
+ "exportAs": "skip",
10904
10099
  "codeSyntax": {
10905
- "WEB": "--pds-typography-size-l"
10100
+ "WEB": "--pds-typography-ls-xl"
10906
10101
  }
10907
10102
  }
10908
10103
  }
10909
10104
  },
10910
- "M": {
10911
- "value": 16,
10912
- "type": "fontSize",
10105
+ "L": {
10106
+ "value": {
10107
+ "default": "4%",
10108
+ "mobile": "4%"
10109
+ },
10110
+ "type": "letterSpacing",
10913
10111
  "$extensions": {
10914
10112
  "public": true,
10915
- "defaultUnit": "rem",
10916
- "mathExpression": true,
10917
10113
  "com.figma": {
10918
10114
  "scopes": [
10919
- "FONT_SIZE"
10115
+ "LETTER_SPACING"
10920
10116
  ],
10921
- "exportAs": "variable",
10117
+ "exportAs": "skip",
10922
10118
  "codeSyntax": {
10923
- "WEB": "--pds-typography-size-m"
10119
+ "WEB": "--pds-typography-ls-l"
10924
10120
  }
10925
10121
  }
10926
10122
  }
10927
10123
  },
10928
- "S": {
10929
- "value": 13.328,
10930
- "type": "fontSize",
10124
+ "M": {
10125
+ "value": {
10126
+ "default": "2%",
10127
+ "mobile": "2%"
10128
+ },
10129
+ "type": "letterSpacing",
10931
10130
  "$extensions": {
10932
10131
  "public": true,
10933
- "defaultUnit": "rem",
10934
- "mathExpression": true,
10935
10132
  "com.figma": {
10936
10133
  "scopes": [
10937
- "FONT_SIZE"
10134
+ "LETTER_SPACING"
10938
10135
  ],
10939
- "exportAs": "variable",
10136
+ "exportAs": "skip",
10940
10137
  "codeSyntax": {
10941
- "WEB": "--pds-typography-size-s"
10138
+ "WEB": "--pds-typography-ls-m"
10942
10139
  }
10943
10140
  }
10944
10141
  }
10945
10142
  },
10946
- "XS": {
10947
- "value": 11.104,
10948
- "type": "fontSize",
10143
+ "S": {
10144
+ "value": {
10145
+ "default": "1%",
10146
+ "mobile": "1%"
10147
+ },
10148
+ "type": "letterSpacing",
10949
10149
  "$extensions": {
10950
10150
  "public": true,
10951
- "defaultUnit": "rem",
10952
- "mathExpression": true,
10953
10151
  "com.figma": {
10954
10152
  "scopes": [
10955
- "FONT_SIZE"
10153
+ "LETTER_SPACING"
10956
10154
  ],
10957
- "exportAs": "variable",
10155
+ "exportAs": "skip",
10958
10156
  "codeSyntax": {
10959
- "WEB": "--pds-typography-size-xs"
10157
+ "WEB": "--pds-typography-ls-s"
10960
10158
  }
10961
10159
  }
10962
10160
  }
10963
- },
10964
- "2XS": {
10965
- "value": 9.248,
10966
- "type": "fontSize",
10161
+ }
10162
+ },
10163
+ "line-height (lh)": {
10164
+ "XL": {
10165
+ "value": {
10166
+ "default": "195%",
10167
+ "mobile": "195%"
10168
+ },
10169
+ "type": "lineHeight",
10967
10170
  "$extensions": {
10968
10171
  "public": true,
10969
- "defaultUnit": "rem",
10970
- "mathExpression": true,
10971
10172
  "com.figma": {
10972
10173
  "scopes": [
10973
- "FONT_SIZE"
10174
+ "LINE_HEIGHT"
10974
10175
  ],
10975
- "exportAs": "variable",
10176
+ "exportAs": "skip",
10976
10177
  "codeSyntax": {
10977
- "WEB": "--pds-typography-size-2xs"
10178
+ "WEB": "--pds-typography-lh-xl"
10978
10179
  }
10979
10180
  }
10980
10181
  }
10981
- }
10982
- }
10983
- }
10984
- }
10985
- },
10986
- "compact-semantic": {
10987
- "semantic": {
10988
- "typography": {
10989
- "size": {
10990
- "default": {
10991
- "value": "{typography.size.compact-mode.M}",
10992
- "type": "fontSize",
10182
+ },
10183
+ "L": {
10184
+ "value": {
10185
+ "default": "165%",
10186
+ "mobile": "165%"
10187
+ },
10188
+ "type": "lineHeight",
10993
10189
  "$extensions": {
10994
10190
  "public": true,
10995
- "resolveValue": true,
10996
10191
  "com.figma": {
10997
10192
  "scopes": [
10998
- "FONT_SIZE"
10193
+ "LINE_HEIGHT"
10999
10194
  ],
11000
- "exportAs": "variable",
10195
+ "exportAs": "skip",
11001
10196
  "codeSyntax": {
11002
- "WEB": "--pds-typography-size-default"
10197
+ "WEB": "--pds-typography-lh-l"
11003
10198
  }
11004
10199
  }
11005
10200
  }
11006
10201
  },
11007
- "input-label": {
11008
- "value": "{typography.size.compact-mode.M}",
11009
- "type": "fontSize",
10202
+ "M": {
10203
+ "value": {
10204
+ "default": "150%",
10205
+ "mobile": "150%"
10206
+ },
10207
+ "type": "lineHeight",
11010
10208
  "$extensions": {
11011
10209
  "public": true,
11012
- "resolveValue": true,
11013
10210
  "com.figma": {
11014
10211
  "scopes": [
11015
- "FONT_SIZE"
10212
+ "LINE_HEIGHT"
11016
10213
  ],
11017
- "exportAs": "variable",
10214
+ "exportAs": "skip",
11018
10215
  "codeSyntax": {
11019
- "WEB": "--pds-typography-size-input-label"
10216
+ "WEB": "--pds-typography-lh-m"
11020
10217
  }
11021
10218
  }
11022
10219
  }
11023
- }
11024
- }
11025
- }
11026
- }
11027
- },
11028
- "compact-component": {
11029
- "component": {
11030
- "typography": {
11031
- "size": {
11032
- "code-block": {
11033
- "value": 14.4,
11034
- "type": "fontSize",
10220
+ },
10221
+ "S": {
10222
+ "value": {
10223
+ "default": "130%",
10224
+ "mobile": "130%"
10225
+ },
10226
+ "type": "lineHeight",
11035
10227
  "$extensions": {
11036
10228
  "public": true,
11037
- "defaultUnit": "rem",
11038
10229
  "com.figma": {
11039
10230
  "scopes": [
11040
- "FONT_SIZE"
10231
+ "LINE_HEIGHT"
11041
10232
  ],
11042
- "exportAs": "variable",
10233
+ "exportAs": "skip",
11043
10234
  "codeSyntax": {
11044
- "WEB": "--pds-typography-size-code-block"
10235
+ "WEB": "--pds-typography-lh-s"
11045
10236
  }
11046
10237
  }
11047
10238
  }
11048
- }
11049
- }
11050
- }
11051
- }
11052
- },
11053
- "expanded-primitive": {
11054
- "primitive": {
11055
- "typography": {
11056
- "size": {
11057
- "7XL": {
11058
- "value": 159.504,
11059
- "type": "fontSize",
10239
+ },
10240
+ "XS": {
10241
+ "value": {
10242
+ "default": "120%",
10243
+ "mobile": "120%"
10244
+ },
10245
+ "type": "lineHeight",
11060
10246
  "$extensions": {
11061
10247
  "public": true,
11062
- "defaultUnit": "rem",
11063
- "mathExpression": true,
11064
10248
  "com.figma": {
11065
10249
  "scopes": [
11066
- "FONT_SIZE"
10250
+ "LINE_HEIGHT"
11067
10251
  ],
11068
- "exportAs": "variable",
10252
+ "exportAs": "skip",
11069
10253
  "codeSyntax": {
11070
- "WEB": "--pds-typography-size-7xl"
10254
+ "WEB": "--pds-typography-lh-xs"
11071
10255
  }
11072
10256
  }
11073
10257
  }
11074
- },
11075
- "6XL": {
11076
- "value": 119.648,
10258
+ }
10259
+ },
10260
+ "size": {
10261
+ "2XS": {
10262
+ "value": {
10263
+ "default": 10,
10264
+ "mobile": 10
10265
+ },
11077
10266
  "type": "fontSize",
10267
+ "description": "10px - Metadata, tiny labels",
11078
10268
  "$extensions": {
11079
10269
  "public": true,
11080
10270
  "defaultUnit": "rem",
11081
- "mathExpression": true,
11082
10271
  "com.figma": {
11083
10272
  "scopes": [
11084
10273
  "FONT_SIZE"
11085
10274
  ],
11086
10275
  "exportAs": "variable",
11087
10276
  "codeSyntax": {
11088
- "WEB": "--pds-typography-size-6xl"
10277
+ "WEB": "--pds-typography-size-2xs"
11089
10278
  }
11090
10279
  }
11091
10280
  }
11092
10281
  },
11093
- "5XL": {
11094
- "value": 89.76,
10282
+ "XS": {
10283
+ "value": {
10284
+ "default": 12,
10285
+ "mobile": 12
10286
+ },
11095
10287
  "type": "fontSize",
10288
+ "description": "12px - Small UI text, captions",
11096
10289
  "$extensions": {
11097
10290
  "public": true,
11098
10291
  "defaultUnit": "rem",
11099
- "mathExpression": true,
11100
10292
  "com.figma": {
11101
10293
  "scopes": [
11102
10294
  "FONT_SIZE"
11103
10295
  ],
11104
10296
  "exportAs": "variable",
11105
10297
  "codeSyntax": {
11106
- "WEB": "--pds-typography-size-5xl"
10298
+ "WEB": "--pds-typography-size-xs"
11107
10299
  }
11108
10300
  }
11109
10301
  }
11110
10302
  },
11111
- "4XL": {
11112
- "value": 67.344,
10303
+ "S": {
10304
+ "value": {
10305
+ "default": 14,
10306
+ "mobile": 14
10307
+ },
11113
10308
  "type": "fontSize",
10309
+ "description": "14px - Product default body text, forms, navigation, labels",
11114
10310
  "$extensions": {
11115
10311
  "public": true,
11116
10312
  "defaultUnit": "rem",
11117
- "mathExpression": true,
11118
10313
  "com.figma": {
11119
10314
  "scopes": [
11120
10315
  "FONT_SIZE"
11121
10316
  ],
11122
10317
  "exportAs": "variable",
11123
10318
  "codeSyntax": {
11124
- "WEB": "--pds-typography-size-4xl"
10319
+ "WEB": "--pds-typography-size-s"
11125
10320
  }
11126
10321
  }
11127
10322
  }
11128
10323
  },
11129
- "3XL": {
11130
- "value": 50.512,
10324
+ "M": {
10325
+ "value": {
10326
+ "default": 16,
10327
+ "mobile": 16
10328
+ },
11131
10329
  "type": "fontSize",
10330
+ "description": "16px - h5/h6 in product, default body in marketing, prose body",
11132
10331
  "$extensions": {
11133
10332
  "public": true,
11134
10333
  "defaultUnit": "rem",
11135
- "mathExpression": true,
11136
10334
  "com.figma": {
11137
10335
  "scopes": [
11138
10336
  "FONT_SIZE"
11139
10337
  ],
11140
10338
  "exportAs": "variable",
11141
10339
  "codeSyntax": {
11142
- "WEB": "--pds-typography-size-3xl"
10340
+ "WEB": "--pds-typography-size-m"
11143
10341
  }
11144
10342
  }
11145
10343
  }
11146
10344
  },
11147
- "2XL": {
11148
- "value": 37.904,
10345
+ "L": {
10346
+ "value": {
10347
+ "default": 18,
10348
+ "mobile": 18
10349
+ },
11149
10350
  "type": "fontSize",
10351
+ "description": "18px - h4 in product, hero body/h6 in marketing, h5/blockquote in prose",
11150
10352
  "$extensions": {
11151
10353
  "public": true,
11152
10354
  "defaultUnit": "rem",
11153
- "mathExpression": true,
11154
10355
  "com.figma": {
11155
10356
  "scopes": [
11156
10357
  "FONT_SIZE"
11157
10358
  ],
11158
10359
  "exportAs": "variable",
11159
10360
  "codeSyntax": {
11160
- "WEB": "--pds-typography-size-2xl"
10361
+ "WEB": "--pds-typography-size-l"
11161
10362
  }
11162
10363
  }
11163
10364
  }
11164
10365
  },
11165
10366
  "XL": {
11166
- "value": 28.432,
10367
+ "value": {
10368
+ "default": 20,
10369
+ "mobile": 16
10370
+ },
11167
10371
  "type": "fontSize",
10372
+ "description": "20px - h3 in product, h5/blog body in marketing, h4 in prose",
11168
10373
  "$extensions": {
11169
10374
  "public": true,
11170
10375
  "defaultUnit": "rem",
11171
- "mathExpression": true,
11172
10376
  "com.figma": {
11173
10377
  "scopes": [
11174
10378
  "FONT_SIZE"
@@ -11180,159 +10384,174 @@
11180
10384
  }
11181
10385
  }
11182
10386
  },
11183
- "L": {
11184
- "value": 21.328,
10387
+ "2XL": {
10388
+ "value": {
10389
+ "default": 24,
10390
+ "mobile": 19.2
10391
+ },
11185
10392
  "type": "fontSize",
10393
+ "description": "24px - h2 in product, h4 in marketing, h3 in prose",
11186
10394
  "$extensions": {
11187
10395
  "public": true,
11188
10396
  "defaultUnit": "rem",
11189
- "mathExpression": true,
11190
10397
  "com.figma": {
11191
10398
  "scopes": [
11192
10399
  "FONT_SIZE"
11193
10400
  ],
11194
10401
  "exportAs": "variable",
11195
10402
  "codeSyntax": {
11196
- "WEB": "--pds-typography-size-l"
10403
+ "WEB": "--pds-typography-size-2xl"
11197
10404
  }
11198
10405
  }
11199
10406
  }
11200
10407
  },
11201
- "M": {
11202
- "value": 16,
10408
+ "3XL": {
10409
+ "value": {
10410
+ "default": 28,
10411
+ "mobile": 22.4
10412
+ },
11203
10413
  "type": "fontSize",
10414
+ "description": "28px - h1 in product, h2 in prose",
11204
10415
  "$extensions": {
11205
10416
  "public": true,
11206
10417
  "defaultUnit": "rem",
11207
- "mathExpression": true,
11208
10418
  "com.figma": {
11209
10419
  "scopes": [
11210
10420
  "FONT_SIZE"
11211
10421
  ],
11212
10422
  "exportAs": "variable",
11213
10423
  "codeSyntax": {
11214
- "WEB": "--pds-typography-size-m"
10424
+ "WEB": "--pds-typography-size-3xl"
11215
10425
  }
11216
10426
  }
11217
10427
  }
11218
10428
  },
11219
- "S": {
11220
- "value": 12,
10429
+ "4XL": {
10430
+ "value": {
10431
+ "default": 32,
10432
+ "mobile": 25.6
10433
+ },
11221
10434
  "type": "fontSize",
10435
+ "description": "32px - h3 in marketing, h1 in prose",
11222
10436
  "$extensions": {
11223
10437
  "public": true,
11224
10438
  "defaultUnit": "rem",
11225
- "mathExpression": true,
11226
10439
  "com.figma": {
11227
10440
  "scopes": [
11228
10441
  "FONT_SIZE"
11229
10442
  ],
11230
10443
  "exportAs": "variable",
11231
10444
  "codeSyntax": {
11232
- "WEB": "--pds-typography-size-s"
10445
+ "WEB": "--pds-typography-size-4xl"
11233
10446
  }
11234
10447
  }
11235
10448
  }
11236
10449
  },
11237
- "XS": {
11238
- "value": 9.008,
10450
+ "5XL": {
10451
+ "value": {
10452
+ "default": 36,
10453
+ "mobile": 28.8
10454
+ },
11239
10455
  "type": "fontSize",
10456
+ "description": "36px - h1 hero/empty states in product, h2 in marketing",
11240
10457
  "$extensions": {
11241
10458
  "public": true,
11242
10459
  "defaultUnit": "rem",
11243
- "mathExpression": true,
11244
10460
  "com.figma": {
11245
10461
  "scopes": [
11246
10462
  "FONT_SIZE"
11247
10463
  ],
11248
10464
  "exportAs": "variable",
11249
10465
  "codeSyntax": {
11250
- "WEB": "--pds-typography-size-xs"
10466
+ "WEB": "--pds-typography-size-5xl"
11251
10467
  }
11252
10468
  }
11253
10469
  }
11254
10470
  },
11255
- "2XS": {
11256
- "value": 6.752,
10471
+ "6XL": {
10472
+ "value": {
10473
+ "default": 48,
10474
+ "mobile": 38.4
10475
+ },
11257
10476
  "type": "fontSize",
10477
+ "description": "48px - Blog h1, large h2 in marketing",
11258
10478
  "$extensions": {
11259
10479
  "public": true,
11260
10480
  "defaultUnit": "rem",
11261
- "mathExpression": true,
11262
10481
  "com.figma": {
11263
10482
  "scopes": [
11264
10483
  "FONT_SIZE"
11265
10484
  ],
11266
10485
  "exportAs": "variable",
11267
10486
  "codeSyntax": {
11268
- "WEB": "--pds-typography-size-2xs"
10487
+ "WEB": "--pds-typography-size-6xl"
11269
10488
  }
11270
10489
  }
11271
10490
  }
11272
- }
11273
- }
11274
- }
11275
- }
11276
- },
11277
- "expanded-semantic": {
11278
- "semantic": {
11279
- "typography": {
11280
- "size": {
11281
- "default": {
11282
- "value": "{typography.size.expanded-mode.M}",
10491
+ },
10492
+ "7XL": {
10493
+ "value": {
10494
+ "default": 60,
10495
+ "mobile": 48
10496
+ },
11283
10497
  "type": "fontSize",
10498
+ "description": "60px - Hero h1 in marketing",
11284
10499
  "$extensions": {
11285
10500
  "public": true,
11286
- "resolveValue": true,
10501
+ "defaultUnit": "rem",
11287
10502
  "com.figma": {
11288
10503
  "scopes": [
11289
10504
  "FONT_SIZE"
11290
10505
  ],
11291
10506
  "exportAs": "variable",
11292
10507
  "codeSyntax": {
11293
- "WEB": "--pds-typography-size-default"
10508
+ "WEB": "--pds-typography-size-7xl"
11294
10509
  }
11295
10510
  }
11296
10511
  }
11297
10512
  },
11298
- "input-label": {
11299
- "value": "{typography.size.expanded-mode.M}",
10513
+ "8XL": {
10514
+ "value": {
10515
+ "default": 72,
10516
+ "mobile": 57.6
10517
+ },
11300
10518
  "type": "fontSize",
10519
+ "description": "72px - Jumbo h1 in marketing",
11301
10520
  "$extensions": {
11302
10521
  "public": true,
11303
- "resolveValue": true,
10522
+ "defaultUnit": "rem",
11304
10523
  "com.figma": {
11305
10524
  "scopes": [
11306
10525
  "FONT_SIZE"
11307
10526
  ],
11308
10527
  "exportAs": "variable",
11309
10528
  "codeSyntax": {
11310
- "WEB": "--pds-typography-size-input-label"
10529
+ "WEB": "--pds-typography-size-8xl"
11311
10530
  }
11312
10531
  }
11313
10532
  }
11314
10533
  }
11315
10534
  }
11316
10535
  }
11317
- }
11318
- },
11319
- "expanded-component": {
11320
- "component": {
10536
+ },
10537
+ "semantic": {
11321
10538
  "typography": {
11322
- "size": {
11323
- "code-block": {
11324
- "value": 14.4,
11325
- "type": "fontSize",
10539
+ "line-height (lh)": {
10540
+ "code": {
10541
+ "value": {
10542
+ "default": "180%",
10543
+ "mobile": "180%"
10544
+ },
10545
+ "type": "lineHeight",
11326
10546
  "$extensions": {
11327
10547
  "public": true,
11328
- "defaultUnit": "rem",
11329
10548
  "com.figma": {
11330
10549
  "scopes": [
11331
- "FONT_SIZE"
10550
+ "LINE_HEIGHT"
11332
10551
  ],
11333
- "exportAs": "variable",
10552
+ "exportAs": "skip",
11334
10553
  "codeSyntax": {
11335
- "WEB": "--pds-typography-size-code-block"
10554
+ "WEB": "--pds-typography-lh-code"
11336
10555
  }
11337
10556
  }
11338
10557
  }
@@ -11343,123 +10562,43 @@
11343
10562
  },
11344
10563
  "$themes": [
11345
10564
  {
11346
- "id": "light-compact",
11347
- "name": "Light / Compact",
11348
- "selectedTokenSets": {
11349
- "global-primitive": "enabled",
11350
- "global-semantic": "enabled",
11351
- "global-component": "enabled",
11352
- "composite-typography": "enabled",
11353
- "light": "enabled",
11354
- "dark": "disabled",
11355
- "compact-primitive": "enabled",
11356
- "compact-semantic": "enabled",
11357
- "compact-component": "enabled",
11358
- "expanded-primitive": "disabled",
11359
- "expanded-semantic": "disabled",
11360
- "expanded-component": "disabled"
11361
- },
11362
- "$figmaStyleReferences": {},
11363
- "$figmaVariableReferences": {},
11364
- "$figmaCollectionNames": {
11365
- "light": "pds-color-mode",
11366
- "dark": "pds-color-mode",
11367
- "compact-primitive": "pds-scale",
11368
- "compact-semantic": "pds-scale",
11369
- "compact-component": "pds-scale",
11370
- "expanded-primitive": "pds-scale",
11371
- "expanded-semantic": "pds-scale",
11372
- "expanded-component": "pds-scale"
11373
- }
11374
- },
11375
- {
11376
- "id": "light-expanded",
11377
- "name": "Light / Expanded",
10565
+ "id": "light",
10566
+ "name": "Light",
11378
10567
  "selectedTokenSets": {
11379
10568
  "global-primitive": "enabled",
11380
10569
  "global-semantic": "enabled",
11381
10570
  "global-component": "enabled",
11382
10571
  "composite-typography": "enabled",
10572
+ "typography": "enabled",
11383
10573
  "light": "enabled",
11384
- "dark": "disabled",
11385
- "compact-primitive": "disabled",
11386
- "compact-semantic": "disabled",
11387
- "compact-component": "disabled",
11388
- "expanded-primitive": "enabled",
11389
- "expanded-semantic": "enabled",
11390
- "expanded-component": "enabled"
11391
- },
11392
- "$figmaStyleReferences": {},
11393
- "$figmaVariableReferences": {},
11394
- "$figmaCollectionNames": {
11395
- "light": "pds-color-mode",
11396
- "dark": "pds-color-mode",
11397
- "compact-primitive": "pds-scale",
11398
- "compact-semantic": "pds-scale",
11399
- "compact-component": "pds-scale",
11400
- "expanded-primitive": "pds-scale",
11401
- "expanded-semantic": "pds-scale",
11402
- "expanded-component": "pds-scale"
11403
- }
11404
- },
11405
- {
11406
- "id": "dark-compact",
11407
- "name": "Dark / Compact",
11408
- "selectedTokenSets": {
11409
- "global-primitive": "enabled",
11410
- "global-semantic": "enabled",
11411
- "global-component": "enabled",
11412
- "composite-typography": "enabled",
11413
- "light": "disabled",
11414
- "dark": "enabled",
11415
- "compact-primitive": "enabled",
11416
- "compact-semantic": "enabled",
11417
- "compact-component": "enabled",
11418
- "expanded-primitive": "disabled",
11419
- "expanded-semantic": "disabled",
11420
- "expanded-component": "disabled"
10574
+ "dark": "disabled"
11421
10575
  },
11422
10576
  "$figmaStyleReferences": {},
11423
10577
  "$figmaVariableReferences": {},
11424
10578
  "$figmaCollectionNames": {
11425
10579
  "light": "pds-color-mode",
11426
10580
  "dark": "pds-color-mode",
11427
- "compact-primitive": "pds-scale",
11428
- "compact-semantic": "pds-scale",
11429
- "compact-component": "pds-scale",
11430
- "expanded-primitive": "pds-scale",
11431
- "expanded-semantic": "pds-scale",
11432
- "expanded-component": "pds-scale"
10581
+ "typography": "pds-typography"
11433
10582
  }
11434
10583
  },
11435
10584
  {
11436
- "id": "dark-expanded",
11437
- "name": "Dark / Expanded",
10585
+ "id": "dark",
10586
+ "name": "Dark",
11438
10587
  "selectedTokenSets": {
11439
10588
  "global-primitive": "enabled",
11440
10589
  "global-semantic": "enabled",
11441
10590
  "global-component": "enabled",
11442
10591
  "composite-typography": "enabled",
10592
+ "typography": "enabled",
11443
10593
  "light": "disabled",
11444
- "dark": "enabled",
11445
- "compact-primitive": "disabled",
11446
- "compact-semantic": "disabled",
11447
- "compact-component": "disabled",
11448
- "expanded-primitive": "enabled",
11449
- "expanded-semantic": "enabled",
11450
- "expanded-component": "enabled"
10594
+ "dark": "enabled"
11451
10595
  },
11452
10596
  "$figmaStyleReferences": {},
11453
10597
  "$figmaVariableReferences": {},
11454
10598
  "$figmaCollectionNames": {
11455
10599
  "light": "pds-color-mode",
11456
10600
  "dark": "pds-color-mode",
11457
- "compact-primitive": "pds-scale",
11458
- "compact-semantic": "pds-scale",
11459
- "compact-component": "pds-scale",
11460
- "expanded-primitive": "pds-scale",
11461
- "expanded-semantic": "pds-scale",
11462
- "expanded-component": "pds-scale"
10601
+ "typography": "pds-typography"
11463
10602
  }
11464
10603
  }
11465
10604
  ],
@@ -11471,12 +10610,7 @@
11471
10610
  "composite-typography",
11472
10611
  "light",
11473
10612
  "dark",
11474
- "compact-primitive",
11475
- "compact-semantic",
11476
- "compact-component",
11477
- "expanded-primitive",
11478
- "expanded-semantic",
11479
- "expanded-component"
10613
+ "typography"
11480
10614
  ]
11481
10615
  }
11482
10616
  }