@amsterdam/design-system-tokens 0.1.2 → 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 +202 -86
  2. package/dist/index.css +202 -86
  3. package/dist/index.d.ts +195 -71
  4. package/dist/index.js +196 -80
  5. package/dist/index.json +195 -79
  6. package/dist/index.tokens.json +450 -176
  7. package/dist/root.css +202 -86
  8. package/dist/tokens.d.ts +439 -116
  9. package/dist/tokens.js +4337 -1690
  10. package/dist/variables.less +202 -86
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +42 -26
  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 +26 -0
  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 +41 -0
  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, 05 Jul 2023 07:52:43 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
  }
@@ -122,59 +138,225 @@ declare const tokens: {
122
138
  "xl": DesignToken
123
139
  }
124
140
  },
141
+ "accordion": {
142
+ "button": {
143
+ "color": DesignToken,
144
+ "focus": {
145
+ "outline-offset": DesignToken
146
+ },
147
+ "font-family": DesignToken,
148
+ "font-weight": DesignToken,
149
+ "line-height": DesignToken,
150
+ "narrow": {
151
+ "font-size": DesignToken
152
+ },
153
+ "wide": {
154
+ "font-size": DesignToken
155
+ },
156
+ "hover": {
157
+ "box-shadow": DesignToken
158
+ }
159
+ }
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
+ },
125
196
  "button": {
126
- "font-size": {
127
- "narrow": DesignToken,
128
- "wide": DesignToken
197
+ "narrow": {
198
+ "font-size": DesignToken
199
+ },
200
+ "wide": {
201
+ "font-size": DesignToken
129
202
  },
130
203
  "secondary": {
204
+ "box-shadow": DesignToken,
205
+ "hover": {
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": {
131
217
  "hover": {
132
218
  "box-shadow": DesignToken
219
+ },
220
+ "focus": {
221
+ "box-shadow": DesignToken
133
222
  }
134
223
  }
135
224
  },
136
- "form-label": {
225
+ "checkbox": {
137
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
+ },
138
288
  "font-family": DesignToken,
139
- "font-size": {
140
- "narrow": DesignToken,
141
- "wide": DesignToken
289
+ "font-weight": DesignToken,
290
+ "hover": {
291
+ "color": DesignToken
292
+ },
293
+ "outline-offset": DesignToken,
294
+ "line-height": DesignToken,
295
+ "narrow": {
296
+ "font-size": DesignToken
142
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,
143
310
  "font-weight": DesignToken,
144
- "line-height": DesignToken
311
+ "line-height": DesignToken,
312
+ "narrow": {
313
+ "font-size": DesignToken
314
+ },
315
+ "wide": {
316
+ "font-size": DesignToken
317
+ }
145
318
  },
146
319
  "heading": {
147
320
  "1": {
148
- "font-size": {
149
- "narrow": DesignToken,
150
- "wide": DesignToken
321
+ "line-height": DesignToken,
322
+ "narrow": {
323
+ "font-size": DesignToken
151
324
  },
152
- "line-height": DesignToken
325
+ "wide": {
326
+ "font-size": DesignToken
327
+ }
153
328
  },
154
329
  "2": {
155
- "font-size": {
156
- "narrow": DesignToken,
157
- "wide": DesignToken
330
+ "line-height": DesignToken,
331
+ "narrow": {
332
+ "font-size": DesignToken
158
333
  },
159
- "line-height": DesignToken
334
+ "wide": {
335
+ "font-size": DesignToken
336
+ }
160
337
  },
161
338
  "3": {
162
- "font-size": {
163
- "narrow": DesignToken,
164
- "wide": DesignToken
339
+ "line-height": DesignToken,
340
+ "narrow": {
341
+ "font-size": DesignToken
165
342
  },
166
- "line-height": DesignToken
343
+ "wide": {
344
+ "font-size": DesignToken
345
+ }
167
346
  },
168
347
  "4": {
169
- "font-size": {
170
- "narrow": DesignToken,
171
- "wide": DesignToken
348
+ "line-height": DesignToken,
349
+ "narrow": {
350
+ "font-size": DesignToken
172
351
  },
173
- "line-height": DesignToken
352
+ "wide": {
353
+ "font-size": DesignToken
354
+ }
174
355
  },
175
356
  "color": DesignToken,
176
357
  "font-family": DesignToken,
177
- "font-weight": DesignToken
358
+ "font-weight": DesignToken,
359
+ "inverse-color": DesignToken
178
360
  },
179
361
  "icon": {
180
362
  "size-3": {
@@ -216,58 +398,59 @@ declare const tokens: {
216
398
  "link": {
217
399
  "color": DesignToken,
218
400
  "outline-offset": DesignToken,
219
- "text-decoration": DesignToken,
220
- "text-underline-offset": DesignToken,
221
- "text-decoration-thickness": DesignToken,
222
401
  "font-family": DesignToken,
223
- "font-size": {
224
- "narrow": DesignToken,
225
- "wide": DesignToken
226
- },
227
402
  "font-weight": DesignToken,
228
403
  "focus": {
229
- "color": DesignToken,
230
- "text-decoration": DesignToken
231
- },
232
- "hover": {
233
- "color": DesignToken,
234
- "text-decoration": DesignToken,
235
- "text-decoration-thickness": DesignToken
236
- },
237
- "line-height": DesignToken,
238
- "visited": {
239
404
  "color": DesignToken
240
405
  },
241
- "standalone-bold": {
242
- "font-weight": DesignToken
243
- },
244
406
  "inline": {
245
- "text-underline-offset": DesignToken,
407
+ "focus": {
408
+ "text-decoration": DesignToken,
409
+ "text-underline-offset": DesignToken
410
+ },
246
411
  "font-family": DesignToken,
247
412
  "font-size": DesignToken,
413
+ "line-height": DesignToken,
414
+ "text-decoration": DesignToken,
248
415
  "visited": {
249
416
  "color": DesignToken
250
417
  }
251
418
  },
252
419
  "in-list": {
253
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": {
254
436
  "text-underline-offset": DesignToken,
255
- "font-size": {
256
- "narrow": DesignToken,
257
- "wide": DesignToken
437
+ "text-decoration-thickness": DesignToken,
438
+ "focus": {
439
+ "text-decoration-thickness": DesignToken,
440
+ "text-underline-offset": DesignToken
441
+ },
442
+ "line-height": DesignToken,
443
+ "narrow": {
444
+ "font-size": DesignToken
258
445
  },
259
- "line-height": DesignToken
446
+ "wide": {
447
+ "font-size": DesignToken
448
+ }
260
449
  },
261
450
  "on-background-dark": {
262
451
  "color": DesignToken,
263
- "text-decoration": DesignToken,
264
- "focus": {
265
- "color": DesignToken,
266
- "text-decoration": DesignToken
267
- },
268
452
  "hover": {
269
- "color": DesignToken,
270
- "text-decoration": DesignToken
453
+ "color": DesignToken
271
454
  },
272
455
  "visited": {
273
456
  "color": DesignToken
@@ -275,52 +458,192 @@ declare const tokens: {
275
458
  },
276
459
  "on-background-light": {
277
460
  "color": DesignToken,
278
- "text-decoration": DesignToken,
279
- "text-decoration-thickness": DesignToken,
280
- "text-underline-offset": DesignToken,
281
- "active": {
282
- "color": DesignToken
283
- },
284
- "font-size": DesignToken,
285
- "focus": {
286
- "color": DesignToken,
287
- "text-decoration": DesignToken
288
- },
289
461
  "hover": {
290
- "color": DesignToken,
291
- "text-decoration": DesignToken
462
+ "color": DesignToken
292
463
  },
293
464
  "visited": {
294
465
  "color": DesignToken
295
466
  }
296
467
  }
297
468
  },
298
- "paragraph": {
469
+ "ordered-list": {
299
470
  "color": DesignToken,
300
471
  "font-family": DesignToken,
301
- "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": {
302
496
  "narrow": DesignToken,
303
497
  "wide": DesignToken
304
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
+ },
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,
305
539
  "font-weight": DesignToken,
540
+ "inverse-color": DesignToken,
306
541
  "line-height": DesignToken,
542
+ "narrow": {
543
+ "font-size": DesignToken
544
+ },
545
+ "wide": {
546
+ "font-size": DesignToken
547
+ },
307
548
  "small": {
308
- "font-size": {
309
- "narrow": DesignToken,
310
- "wide": DesignToken
549
+ "line-height": DesignToken,
550
+ "narrow": {
551
+ "font-size": DesignToken
311
552
  },
312
- "line-height": DesignToken
553
+ "wide": {
554
+ "font-size": DesignToken
555
+ }
313
556
  },
314
557
  "large": {
315
- "font-size": {
316
- "narrow": DesignToken,
317
- "wide": DesignToken
558
+ "line-height": DesignToken,
559
+ "narrow": {
560
+ "font-size": DesignToken
561
+ },
562
+ "wide": {
563
+ "font-size": DesignToken
564
+ }
565
+ }
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
318
575
  },
319
- "line-height": DesignToken
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
+ },
597
+ "unordered-list": {
598
+ "color": DesignToken,
599
+ "font-family": DesignToken,
600
+ "font-weight": DesignToken,
601
+ "gap": DesignToken,
602
+ "line-height": DesignToken,
603
+ "list-style-type": DesignToken,
604
+ "narrow": {
605
+ "font-size": DesignToken
606
+ },
607
+ "wide": {
608
+ "font-size": DesignToken
609
+ },
610
+ "item": {
611
+ "margin-inline-start": DesignToken,
612
+ "padding-inline-start": DesignToken
613
+ },
614
+ "unordered-list": {
615
+ "list-style-type": DesignToken,
616
+ "item": {
617
+ "margin-inline-start": DesignToken,
618
+ "padding-inline-start": DesignToken
619
+ }
320
620
  }
321
621
  }
322
622
  },
323
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
+ },
324
647
  "button": {
325
648
  "background-color": DesignToken,
326
649
  "border-color": {},
@@ -344,10 +667,10 @@ declare const tokens: {
344
667
  "disabled": {
345
668
  "background-color": DesignToken,
346
669
  "color": DesignToken,
347
- "border-color": DesignToken
670
+ "border-color": {}
348
671
  },
349
672
  "hover": {
350
- "background-color": DesignToken
673
+ "background-color": {}
351
674
  },
352
675
  "focus": {
353
676
  "scale": {}
@@ -368,7 +691,7 @@ declare const tokens: {
368
691
  "color": {}
369
692
  },
370
693
  "focus": {
371
- "background-color": {},
694
+ "background-color": DesignToken,
372
695
  "border-color": {},
373
696
  "border-width": {}
374
697
  },
@@ -427,17 +750,17 @@ declare const tokens: {
427
750
  "secondary-action": {
428
751
  "background-color": DesignToken,
429
752
  "color": DesignToken,
430
- "border-color": DesignToken,
431
- "border-width": DesignToken,
753
+ "border-color": {},
754
+ "border-width": {},
432
755
  "hover": {
433
756
  "background-color": {},
434
757
  "color": DesignToken,
435
- "border-color": DesignToken
758
+ "border-color": {}
436
759
  },
437
760
  "disabled": {
438
761
  "background-color": DesignToken,
439
762
  "color": DesignToken,
440
- "border-color": DesignToken
763
+ "border-color": {}
441
764
  },
442
765
  "danger": {
443
766
  "background-color": {},
@@ -494,17 +817,17 @@ declare const tokens: {
494
817
  "subtle": {
495
818
  "background-color": DesignToken,
496
819
  "border-color": {},
497
- "border-width": DesignToken,
820
+ "border-width": {},
498
821
  "color": DesignToken,
499
822
  "font-weight": {},
500
823
  "hover": {
501
824
  "background-color": {},
502
- "color": {},
503
- "border-color": DesignToken
825
+ "color": DesignToken,
826
+ "border-color": {}
504
827
  },
505
828
  "focus": {
506
829
  "background-color": {},
507
- "color": {},
830
+ "color": DesignToken,
508
831
  "border-color": {}
509
832
  },
510
833
  "disabled": {