@amsterdam/design-system-tokens 0.1.3 → 0.1.4

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 +188 -93
  2. package/dist/index.css +188 -93
  3. package/dist/index.d.ts +183 -80
  4. package/dist/index.js +178 -83
  5. package/dist/index.json +177 -82
  6. package/dist/index.tokens.json +416 -183
  7. package/dist/root.css +188 -93
  8. package/dist/tokens.d.ts +411 -129
  9. package/dist/tokens.js +4089 -1901
  10. package/dist/variables.less +188 -93
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +40 -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 +25 -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 Fri, 08 Sep 2023 12:12:55 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,192 @@ 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
+ }
534
+ }
535
+ },
536
+ "paragraph": {
537
+ "color": DesignToken,
538
+ "font-family": DesignToken,
539
+ "font-weight": DesignToken,
540
+ "inverse-color": DesignToken,
324
541
  "line-height": DesignToken,
542
+ "narrow": {
543
+ "font-size": DesignToken
544
+ },
545
+ "wide": {
546
+ "font-size": DesignToken
547
+ },
325
548
  "small": {
326
- "font-size": {
327
- "narrow": DesignToken,
328
- "wide": DesignToken
549
+ "line-height": DesignToken,
550
+ "narrow": {
551
+ "font-size": DesignToken
329
552
  },
330
- "line-height": DesignToken
553
+ "wide": {
554
+ "font-size": DesignToken
555
+ }
331
556
  },
332
557
  "large": {
333
- "font-size": {
334
- "narrow": DesignToken,
335
- "wide": DesignToken
558
+ "line-height": DesignToken,
559
+ "narrow": {
560
+ "font-size": DesignToken
336
561
  },
337
- "line-height": DesignToken
562
+ "wide": {
563
+ "font-size": DesignToken
564
+ }
338
565
  }
339
566
  },
567
+ "top-task-link": {
568
+ "description": {
569
+ "color": DesignToken,
570
+ "font-family": DesignToken,
571
+ "font-weight": DesignToken,
572
+ "line-height": DesignToken,
573
+ "narrow": {
574
+ "font-size": DesignToken
575
+ },
576
+ "wide": {
577
+ "font-size": DesignToken
578
+ }
579
+ },
580
+ "label": {
581
+ "color": DesignToken,
582
+ "font-family": DesignToken,
583
+ "font-weight": DesignToken,
584
+ "hover": {
585
+ "color": DesignToken
586
+ },
587
+ "line-height": DesignToken,
588
+ "narrow": {
589
+ "font-size": DesignToken
590
+ },
591
+ "wide": {
592
+ "font-size": DesignToken
593
+ }
594
+ },
595
+ "outline-offset": DesignToken
596
+ },
340
597
  "unordered-list": {
341
598
  "color": DesignToken,
342
599
  "font-family": DesignToken,
343
- "font-size": {
344
- "narrow": DesignToken,
345
- "wide": DesignToken
346
- },
347
600
  "font-weight": DesignToken,
348
601
  "gap": DesignToken,
349
602
  "line-height": DesignToken,
350
- "list-style": DesignToken,
603
+ "list-style-type": DesignToken,
604
+ "narrow": {
605
+ "font-size": DesignToken
606
+ },
607
+ "wide": {
608
+ "font-size": DesignToken
609
+ },
351
610
  "item": {
352
- "padding-inline": DesignToken
611
+ "margin-inline-start": DesignToken,
612
+ "padding-inline-start": DesignToken
353
613
  },
354
614
  "unordered-list": {
355
- "padding-block": DesignToken,
356
- "padding-inline": DesignToken,
357
615
  "list-style-type": DesignToken,
358
616
  "item": {
359
- "padding-inline": DesignToken
617
+ "margin-inline-start": DesignToken,
618
+ "padding-inline-start": DesignToken
360
619
  }
361
620
  }
362
621
  }
363
622
  },
364
623
  "utrecht": {
624
+ "action": {
625
+ "activate": {
626
+ "cursor": DesignToken
627
+ },
628
+ "busy": {
629
+ "cursor": DesignToken
630
+ },
631
+ "disabled": {
632
+ "cursor": DesignToken
633
+ },
634
+ "inert": {
635
+ "cursor": DesignToken
636
+ },
637
+ "navigate": {
638
+ "cursor": DesignToken
639
+ },
640
+ "submit": {
641
+ "cursor": DesignToken
642
+ }
643
+ },
644
+ "focus": {
645
+ "outline-offset": DesignToken
646
+ },
365
647
  "button": {
366
648
  "background-color": DesignToken,
367
649
  "border-color": {},
@@ -385,10 +667,10 @@ declare const tokens: {
385
667
  "disabled": {
386
668
  "background-color": DesignToken,
387
669
  "color": DesignToken,
388
- "border-color": DesignToken
670
+ "border-color": {}
389
671
  },
390
672
  "hover": {
391
- "background-color": DesignToken
673
+ "background-color": {}
392
674
  },
393
675
  "focus": {
394
676
  "scale": {}
@@ -409,7 +691,7 @@ declare const tokens: {
409
691
  "color": {}
410
692
  },
411
693
  "focus": {
412
- "background-color": {},
694
+ "background-color": DesignToken,
413
695
  "border-color": {},
414
696
  "border-width": {}
415
697
  },
@@ -468,17 +750,17 @@ declare const tokens: {
468
750
  "secondary-action": {
469
751
  "background-color": DesignToken,
470
752
  "color": DesignToken,
471
- "border-color": DesignToken,
472
- "border-width": DesignToken,
753
+ "border-color": {},
754
+ "border-width": {},
473
755
  "hover": {
474
756
  "background-color": {},
475
757
  "color": DesignToken,
476
- "border-color": DesignToken
758
+ "border-color": {}
477
759
  },
478
760
  "disabled": {
479
761
  "background-color": DesignToken,
480
762
  "color": DesignToken,
481
- "border-color": DesignToken
763
+ "border-color": {}
482
764
  },
483
765
  "danger": {
484
766
  "background-color": {},
@@ -535,17 +817,17 @@ declare const tokens: {
535
817
  "subtle": {
536
818
  "background-color": DesignToken,
537
819
  "border-color": {},
538
- "border-width": DesignToken,
820
+ "border-width": {},
539
821
  "color": DesignToken,
540
822
  "font-weight": {},
541
823
  "hover": {
542
824
  "background-color": {},
543
- "color": {},
544
- "border-color": DesignToken
825
+ "color": DesignToken,
826
+ "border-color": {}
545
827
  },
546
828
  "focus": {
547
829
  "background-color": {},
548
- "color": {},
830
+ "color": DesignToken,
549
831
  "border-color": {}
550
832
  },
551
833
  "disabled": {