@amsterdam/design-system-tokens 0.1.3 → 0.1.5

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 (32) hide show
  1. package/dist/_variables.scss +189 -93
  2. package/dist/index.css +189 -93
  3. package/dist/index.d.ts +184 -80
  4. package/dist/index.js +189 -93
  5. package/dist/index.json +188 -92
  6. package/dist/index.tokens.json +426 -192
  7. package/dist/root.css +189 -93
  8. package/dist/tokens.d.ts +412 -129
  9. package/dist/tokens.js +4121 -1910
  10. package/dist/variables.less +189 -93
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +52 -24
  13. package/src/common/utrecht/action.tokens.json +12 -0
  14. package/src/common/utrecht/focus.tokens.json +7 -0
  15. package/src/components/amsterdam/accordion.tokens.json +6 -4
  16. package/src/components/amsterdam/blockquote.tokens.json +17 -0
  17. package/src/components/amsterdam/breadcrumb.tokens.json +42 -0
  18. package/src/components/amsterdam/button.tokens.json +34 -4
  19. package/src/components/amsterdam/checkbox.tokens.json +121 -0
  20. package/src/components/amsterdam/footer.tokens.json +11 -0
  21. package/src/components/amsterdam/form-label.tokens.json +7 -5
  22. package/src/components/amsterdam/heading.tokens.json +25 -16
  23. package/src/components/amsterdam/icon.tokens.json +10 -10
  24. package/src/components/amsterdam/link.tokens.json +38 -51
  25. package/src/components/amsterdam/ordered-list.tokens.json +41 -0
  26. package/src/components/amsterdam/page-grid.tokens.json +20 -0
  27. package/src/components/amsterdam/page-heading.tokens.json +17 -0
  28. package/src/components/amsterdam/page-menu.tokens.json +26 -0
  29. package/src/components/amsterdam/paragraph.tokens.json +19 -12
  30. package/src/components/amsterdam/top-task-link.tokens.json +34 -0
  31. package/src/components/amsterdam/unordered-list.tokens.json +25 -11
  32. package/src/components/utrecht/button.tokens.json +17 -27
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 12 Jul 2023 11:08:54 GMT
3
+ * Generated on Wed, 04 Oct 2023 10:51:08 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -49,58 +49,74 @@ declare const tokens: {
49
49
  },
50
50
  "text-level": {
51
51
  "0": {
52
- "font-size": {
53
- "narrow": DesignToken,
54
- "wide": DesignToken
52
+ "narrow": {
53
+ "font-size": DesignToken
54
+ },
55
+ "wide": {
56
+ "font-size": DesignToken
55
57
  },
56
58
  "line-height": DesignToken
57
59
  },
58
60
  "1": {
59
- "font-size": {
60
- "narrow": DesignToken,
61
- "wide": DesignToken
61
+ "narrow": {
62
+ "font-size": DesignToken
63
+ },
64
+ "wide": {
65
+ "font-size": DesignToken
62
66
  },
63
67
  "line-height": DesignToken
64
68
  },
65
69
  "2": {
66
- "font-size": {
67
- "narrow": DesignToken,
68
- "wide": DesignToken
70
+ "narrow": {
71
+ "font-size": DesignToken
72
+ },
73
+ "wide": {
74
+ "font-size": DesignToken
69
75
  },
70
76
  "line-height": DesignToken
71
77
  },
72
78
  "3": {
73
- "font-size": {
74
- "narrow": DesignToken,
75
- "wide": DesignToken
79
+ "narrow": {
80
+ "font-size": DesignToken
81
+ },
82
+ "wide": {
83
+ "font-size": DesignToken
76
84
  },
77
85
  "line-height": DesignToken
78
86
  },
79
87
  "4": {
80
- "font-size": {
81
- "narrow": DesignToken,
82
- "wide": DesignToken
88
+ "narrow": {
89
+ "font-size": DesignToken
90
+ },
91
+ "wide": {
92
+ "font-size": DesignToken
83
93
  },
84
94
  "line-height": DesignToken
85
95
  },
86
96
  "5": {
87
- "font-size": {
88
- "narrow": DesignToken,
89
- "wide": DesignToken
97
+ "narrow": {
98
+ "font-size": DesignToken
99
+ },
100
+ "wide": {
101
+ "font-size": DesignToken
90
102
  },
91
103
  "line-height": DesignToken
92
104
  },
93
105
  "6": {
94
- "font-size": {
95
- "narrow": DesignToken,
96
- "wide": DesignToken
106
+ "narrow": {
107
+ "font-size": DesignToken
108
+ },
109
+ "wide": {
110
+ "font-size": DesignToken
97
111
  },
98
112
  "line-height": DesignToken
99
113
  },
100
114
  "7": {
101
- "font-size": {
102
- "narrow": DesignToken,
103
- "wide": DesignToken
115
+ "narrow": {
116
+ "font-size": DesignToken
117
+ },
118
+ "wide": {
119
+ "font-size": DesignToken
104
120
  },
105
121
  "line-height": DesignToken
106
122
  }
@@ -129,70 +145,218 @@ declare const tokens: {
129
145
  "outline-offset": DesignToken
130
146
  },
131
147
  "font-family": DesignToken,
132
- "font-size": {
133
- "narrow": DesignToken,
134
- "wide": DesignToken
135
- },
136
148
  "font-weight": DesignToken,
137
149
  "line-height": DesignToken,
150
+ "narrow": {
151
+ "font-size": DesignToken
152
+ },
153
+ "wide": {
154
+ "font-size": DesignToken
155
+ },
138
156
  "hover": {
139
157
  "box-shadow": DesignToken
140
158
  }
141
159
  }
142
160
  },
161
+ "blockquote": {
162
+ "color": DesignToken,
163
+ "font-family": DesignToken,
164
+ "font-weight": DesignToken,
165
+ "inverse-color": DesignToken,
166
+ "line-height": DesignToken,
167
+ "narrow": {
168
+ "font-size": DesignToken
169
+ },
170
+ "wide": {
171
+ "font-size": DesignToken
172
+ }
173
+ },
174
+ "breadcrumb": {
175
+ "color": DesignToken,
176
+ "font-family": DesignToken,
177
+ "line-height": DesignToken,
178
+ "narrow": {
179
+ "font-size": DesignToken
180
+ },
181
+ "wide": {
182
+ "font-size": DesignToken
183
+ },
184
+ "item-link": {
185
+ "outline-offset": DesignToken,
186
+ "hover": {
187
+ "color": DesignToken,
188
+ "box-shadow": DesignToken
189
+ },
190
+ "focus": {
191
+ "color": DesignToken,
192
+ "text-decoration": DesignToken
193
+ }
194
+ }
195
+ },
143
196
  "button": {
144
- "font-size": {
145
- "narrow": DesignToken,
146
- "wide": DesignToken
197
+ "narrow": {
198
+ "font-size": DesignToken
199
+ },
200
+ "wide": {
201
+ "font-size": DesignToken
147
202
  },
148
203
  "secondary": {
204
+ "box-shadow": DesignToken,
149
205
  "hover": {
150
206
  "box-shadow": DesignToken
207
+ },
208
+ "disabled": {
209
+ "box-shadow": DesignToken
210
+ },
211
+ "focus": {
212
+ "box-shadow": DesignToken,
213
+ "color": DesignToken
214
+ }
215
+ },
216
+ "tertiary": {
217
+ "hover": {
218
+ "box-shadow": DesignToken
219
+ },
220
+ "focus": {
221
+ "box-shadow": DesignToken
151
222
  }
152
223
  }
153
224
  },
154
- "form-label": {
225
+ "checkbox": {
155
226
  "color": DesignToken,
227
+ "checkmark": {
228
+ "border-color": DesignToken,
229
+ "checked": {
230
+ "background-color": DesignToken,
231
+ "hover": {
232
+ "background-color": DesignToken
233
+ }
234
+ },
235
+ "disabled": {
236
+ "border-color": DesignToken,
237
+ "checked": {
238
+ "background-color": DesignToken,
239
+ "hover": {
240
+ "background-color": DesignToken
241
+ }
242
+ },
243
+ "indeterminate": {
244
+ "background-color": DesignToken,
245
+ "hover": {
246
+ "background-color": DesignToken
247
+ }
248
+ }
249
+ },
250
+ "hover": {
251
+ "border-color": DesignToken
252
+ },
253
+ "invalid": {
254
+ "border-color": DesignToken,
255
+ "checked": {
256
+ "background-color": DesignToken,
257
+ "hover": {
258
+ "background-color": DesignToken
259
+ }
260
+ },
261
+ "hover": {
262
+ "border-color": DesignToken
263
+ },
264
+ "indeterminate": {
265
+ "background-color": DesignToken,
266
+ "hover": {
267
+ "background-color": DesignToken
268
+ }
269
+ }
270
+ },
271
+ "indeterminate": {
272
+ "background-color": DesignToken,
273
+ "hover": {
274
+ "background-color": DesignToken
275
+ }
276
+ },
277
+ "narrow": {
278
+ "size": DesignToken
279
+ },
280
+ "wide": {
281
+ "size": DesignToken
282
+ },
283
+ "multiplier": DesignToken
284
+ },
285
+ "disabled": {
286
+ "color": DesignToken
287
+ },
156
288
  "font-family": DesignToken,
157
- "font-size": {
158
- "narrow": DesignToken,
159
- "wide": DesignToken
289
+ "font-weight": DesignToken,
290
+ "hover": {
291
+ "color": DesignToken
160
292
  },
293
+ "outline-offset": DesignToken,
294
+ "line-height": DesignToken,
295
+ "narrow": {
296
+ "font-size": DesignToken
297
+ },
298
+ "wide": {
299
+ "font-size": DesignToken
300
+ }
301
+ },
302
+ "footer": {
303
+ "top": {
304
+ "background-color": DesignToken
305
+ }
306
+ },
307
+ "form-label": {
308
+ "color": DesignToken,
309
+ "font-family": DesignToken,
161
310
  "font-weight": DesignToken,
162
- "line-height": DesignToken
311
+ "line-height": DesignToken,
312
+ "narrow": {
313
+ "font-size": DesignToken
314
+ },
315
+ "wide": {
316
+ "font-size": DesignToken
317
+ }
163
318
  },
164
319
  "heading": {
165
320
  "1": {
166
- "font-size": {
167
- "narrow": DesignToken,
168
- "wide": DesignToken
321
+ "line-height": DesignToken,
322
+ "narrow": {
323
+ "font-size": DesignToken
169
324
  },
170
- "line-height": DesignToken
325
+ "wide": {
326
+ "font-size": DesignToken
327
+ }
171
328
  },
172
329
  "2": {
173
- "font-size": {
174
- "narrow": DesignToken,
175
- "wide": DesignToken
330
+ "line-height": DesignToken,
331
+ "narrow": {
332
+ "font-size": DesignToken
176
333
  },
177
- "line-height": DesignToken
334
+ "wide": {
335
+ "font-size": DesignToken
336
+ }
178
337
  },
179
338
  "3": {
180
- "font-size": {
181
- "narrow": DesignToken,
182
- "wide": DesignToken
339
+ "line-height": DesignToken,
340
+ "narrow": {
341
+ "font-size": DesignToken
183
342
  },
184
- "line-height": DesignToken
343
+ "wide": {
344
+ "font-size": DesignToken
345
+ }
185
346
  },
186
347
  "4": {
187
- "font-size": {
188
- "narrow": DesignToken,
189
- "wide": DesignToken
348
+ "line-height": DesignToken,
349
+ "narrow": {
350
+ "font-size": DesignToken
190
351
  },
191
- "line-height": DesignToken
352
+ "wide": {
353
+ "font-size": DesignToken
354
+ }
192
355
  },
193
356
  "color": DesignToken,
194
357
  "font-family": DesignToken,
195
- "font-weight": DesignToken
358
+ "font-weight": DesignToken,
359
+ "inverse-color": DesignToken
196
360
  },
197
361
  "icon": {
198
362
  "size-3": {
@@ -234,58 +398,59 @@ declare const tokens: {
234
398
  "link": {
235
399
  "color": DesignToken,
236
400
  "outline-offset": DesignToken,
237
- "text-decoration": DesignToken,
238
- "text-underline-offset": DesignToken,
239
- "text-decoration-thickness": DesignToken,
240
401
  "font-family": DesignToken,
241
- "font-size": {
242
- "narrow": DesignToken,
243
- "wide": DesignToken
244
- },
245
402
  "font-weight": DesignToken,
246
403
  "focus": {
247
- "color": DesignToken,
248
- "text-decoration": DesignToken
249
- },
250
- "hover": {
251
- "color": DesignToken,
252
- "text-decoration": DesignToken,
253
- "text-decoration-thickness": DesignToken
254
- },
255
- "line-height": DesignToken,
256
- "visited": {
257
404
  "color": DesignToken
258
405
  },
259
- "standalone-bold": {
260
- "font-weight": DesignToken
261
- },
262
406
  "inline": {
263
- "text-underline-offset": DesignToken,
407
+ "focus": {
408
+ "text-decoration": DesignToken,
409
+ "text-underline-offset": DesignToken
410
+ },
264
411
  "font-family": DesignToken,
265
412
  "font-size": DesignToken,
413
+ "line-height": DesignToken,
414
+ "text-decoration": DesignToken,
266
415
  "visited": {
267
416
  "color": DesignToken
268
417
  }
269
418
  },
270
419
  "in-list": {
271
420
  "gap": DesignToken,
421
+ "focus": {
422
+ "text-decoration": DesignToken,
423
+ "text-decoration-thickness": DesignToken,
424
+ "text-underline-offset": DesignToken
425
+ },
426
+ "text-decoration": DesignToken,
427
+ "line-height": DesignToken,
428
+ "narrow": {
429
+ "font-size": DesignToken
430
+ },
431
+ "wide": {
432
+ "font-size": DesignToken
433
+ }
434
+ },
435
+ "standalone": {
272
436
  "text-underline-offset": DesignToken,
273
- "font-size": {
274
- "narrow": DesignToken,
275
- "wide": DesignToken
437
+ "text-decoration-thickness": DesignToken,
438
+ "focus": {
439
+ "text-decoration-thickness": DesignToken,
440
+ "text-underline-offset": DesignToken
276
441
  },
277
- "line-height": DesignToken
442
+ "line-height": DesignToken,
443
+ "narrow": {
444
+ "font-size": DesignToken
445
+ },
446
+ "wide": {
447
+ "font-size": DesignToken
448
+ }
278
449
  },
279
450
  "on-background-dark": {
280
451
  "color": DesignToken,
281
- "text-decoration": DesignToken,
282
- "focus": {
283
- "color": DesignToken,
284
- "text-decoration": DesignToken
285
- },
286
452
  "hover": {
287
- "color": DesignToken,
288
- "text-decoration": DesignToken
453
+ "color": DesignToken
289
454
  },
290
455
  "visited": {
291
456
  "color": DesignToken
@@ -293,75 +458,193 @@ declare const tokens: {
293
458
  },
294
459
  "on-background-light": {
295
460
  "color": DesignToken,
296
- "text-decoration": DesignToken,
297
- "text-decoration-thickness": DesignToken,
298
- "text-underline-offset": DesignToken,
299
- "active": {
300
- "color": DesignToken
301
- },
302
- "font-size": DesignToken,
303
- "focus": {
304
- "color": DesignToken,
305
- "text-decoration": DesignToken
306
- },
307
461
  "hover": {
308
- "color": DesignToken,
309
- "text-decoration": DesignToken
462
+ "color": DesignToken
310
463
  },
311
464
  "visited": {
312
465
  "color": DesignToken
313
466
  }
314
467
  }
315
468
  },
316
- "paragraph": {
469
+ "ordered-list": {
317
470
  "color": DesignToken,
318
471
  "font-family": DesignToken,
319
- "font-size": {
472
+ "font-weight": DesignToken,
473
+ "gap": DesignToken,
474
+ "line-height": DesignToken,
475
+ "list-style-type": DesignToken,
476
+ "narrow": {
477
+ "font-size": DesignToken
478
+ },
479
+ "wide": {
480
+ "font-size": DesignToken
481
+ },
482
+ "item": {
483
+ "margin-inline-start": DesignToken,
484
+ "padding-inline-start": DesignToken
485
+ },
486
+ "ordered-list": {
487
+ "list-style-type": DesignToken,
488
+ "item": {
489
+ "margin-inline-start": DesignToken,
490
+ "padding-inline-start": DesignToken
491
+ }
492
+ }
493
+ },
494
+ "page-grid": {
495
+ "column-count": {
320
496
  "narrow": DesignToken,
321
497
  "wide": DesignToken
322
498
  },
499
+ "column-gap": DesignToken,
500
+ "max-width": DesignToken
501
+ },
502
+ "page-heading": {
503
+ "color": DesignToken,
504
+ "font-family": DesignToken,
505
+ "line-height": DesignToken,
506
+ "narrow": {
507
+ "font-size": DesignToken
508
+ },
509
+ "wide": {
510
+ "font-size": DesignToken
511
+ },
323
512
  "font-weight": DesignToken,
513
+ "inverse-color": DesignToken
514
+ },
515
+ "page-menu": {
516
+ "column-gap": DesignToken,
517
+ "row-gap": DesignToken,
518
+ "item": {
519
+ "color": DesignToken,
520
+ "font-family": DesignToken,
521
+ "font-weight": DesignToken,
522
+ "gap": DesignToken,
523
+ "line-height": DesignToken,
524
+ "text-decoration": DesignToken,
525
+ "narrow": {
526
+ "font-size": DesignToken
527
+ },
528
+ "wide": {
529
+ "font-size": DesignToken
530
+ },
531
+ "hover": {
532
+ "color": DesignToken,
533
+ "text-decoration": DesignToken
534
+ }
535
+ }
536
+ },
537
+ "paragraph": {
538
+ "color": DesignToken,
539
+ "font-family": DesignToken,
540
+ "font-weight": DesignToken,
541
+ "inverse-color": DesignToken,
324
542
  "line-height": DesignToken,
543
+ "narrow": {
544
+ "font-size": DesignToken
545
+ },
546
+ "wide": {
547
+ "font-size": DesignToken
548
+ },
325
549
  "small": {
326
- "font-size": {
327
- "narrow": DesignToken,
328
- "wide": DesignToken
550
+ "line-height": DesignToken,
551
+ "narrow": {
552
+ "font-size": DesignToken
329
553
  },
330
- "line-height": DesignToken
554
+ "wide": {
555
+ "font-size": DesignToken
556
+ }
331
557
  },
332
558
  "large": {
333
- "font-size": {
334
- "narrow": DesignToken,
335
- "wide": DesignToken
559
+ "line-height": DesignToken,
560
+ "narrow": {
561
+ "font-size": DesignToken
336
562
  },
337
- "line-height": DesignToken
563
+ "wide": {
564
+ "font-size": DesignToken
565
+ }
338
566
  }
339
567
  },
568
+ "top-task-link": {
569
+ "description": {
570
+ "color": DesignToken,
571
+ "font-family": DesignToken,
572
+ "font-weight": DesignToken,
573
+ "line-height": DesignToken,
574
+ "narrow": {
575
+ "font-size": DesignToken
576
+ },
577
+ "wide": {
578
+ "font-size": DesignToken
579
+ }
580
+ },
581
+ "label": {
582
+ "color": DesignToken,
583
+ "font-family": DesignToken,
584
+ "font-weight": DesignToken,
585
+ "hover": {
586
+ "color": DesignToken
587
+ },
588
+ "line-height": DesignToken,
589
+ "narrow": {
590
+ "font-size": DesignToken
591
+ },
592
+ "wide": {
593
+ "font-size": DesignToken
594
+ }
595
+ },
596
+ "outline-offset": DesignToken
597
+ },
340
598
  "unordered-list": {
341
599
  "color": DesignToken,
342
600
  "font-family": DesignToken,
343
- "font-size": {
344
- "narrow": DesignToken,
345
- "wide": DesignToken
346
- },
347
601
  "font-weight": DesignToken,
348
602
  "gap": DesignToken,
349
603
  "line-height": DesignToken,
350
- "list-style": DesignToken,
604
+ "list-style-type": DesignToken,
605
+ "narrow": {
606
+ "font-size": DesignToken
607
+ },
608
+ "wide": {
609
+ "font-size": DesignToken
610
+ },
351
611
  "item": {
352
- "padding-inline": DesignToken
612
+ "margin-inline-start": DesignToken,
613
+ "padding-inline-start": DesignToken
353
614
  },
354
615
  "unordered-list": {
355
- "padding-block": DesignToken,
356
- "padding-inline": DesignToken,
357
616
  "list-style-type": DesignToken,
358
617
  "item": {
359
- "padding-inline": DesignToken
618
+ "margin-inline-start": DesignToken,
619
+ "padding-inline-start": DesignToken
360
620
  }
361
621
  }
362
622
  }
363
623
  },
364
624
  "utrecht": {
625
+ "action": {
626
+ "activate": {
627
+ "cursor": DesignToken
628
+ },
629
+ "busy": {
630
+ "cursor": DesignToken
631
+ },
632
+ "disabled": {
633
+ "cursor": DesignToken
634
+ },
635
+ "inert": {
636
+ "cursor": DesignToken
637
+ },
638
+ "navigate": {
639
+ "cursor": DesignToken
640
+ },
641
+ "submit": {
642
+ "cursor": DesignToken
643
+ }
644
+ },
645
+ "focus": {
646
+ "outline-offset": DesignToken
647
+ },
365
648
  "button": {
366
649
  "background-color": DesignToken,
367
650
  "border-color": {},
@@ -385,10 +668,10 @@ declare const tokens: {
385
668
  "disabled": {
386
669
  "background-color": DesignToken,
387
670
  "color": DesignToken,
388
- "border-color": DesignToken
671
+ "border-color": {}
389
672
  },
390
673
  "hover": {
391
- "background-color": DesignToken
674
+ "background-color": {}
392
675
  },
393
676
  "focus": {
394
677
  "scale": {}
@@ -409,7 +692,7 @@ declare const tokens: {
409
692
  "color": {}
410
693
  },
411
694
  "focus": {
412
- "background-color": {},
695
+ "background-color": DesignToken,
413
696
  "border-color": {},
414
697
  "border-width": {}
415
698
  },
@@ -468,17 +751,17 @@ declare const tokens: {
468
751
  "secondary-action": {
469
752
  "background-color": DesignToken,
470
753
  "color": DesignToken,
471
- "border-color": DesignToken,
472
- "border-width": DesignToken,
754
+ "border-color": {},
755
+ "border-width": {},
473
756
  "hover": {
474
757
  "background-color": {},
475
758
  "color": DesignToken,
476
- "border-color": DesignToken
759
+ "border-color": {}
477
760
  },
478
761
  "disabled": {
479
762
  "background-color": DesignToken,
480
763
  "color": DesignToken,
481
- "border-color": DesignToken
764
+ "border-color": {}
482
765
  },
483
766
  "danger": {
484
767
  "background-color": {},
@@ -535,17 +818,17 @@ declare const tokens: {
535
818
  "subtle": {
536
819
  "background-color": DesignToken,
537
820
  "border-color": {},
538
- "border-width": DesignToken,
821
+ "border-width": {},
539
822
  "color": DesignToken,
540
823
  "font-weight": {},
541
824
  "hover": {
542
825
  "background-color": {},
543
- "color": {},
544
- "border-color": DesignToken
826
+ "color": DesignToken,
827
+ "border-color": {}
545
828
  },
546
829
  "focus": {
547
830
  "background-color": {},
548
- "color": {},
831
+ "color": DesignToken,
549
832
  "border-color": {}
550
833
  },
551
834
  "disabled": {