@amsterdam/design-system-tokens 0.16.0 → 1.0.1

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 (36) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +10 -3
  3. package/dist/compact.css +3 -0
  4. package/dist/compact.d.ts +7 -0
  5. package/dist/compact.json +8 -1
  6. package/dist/compact.mjs +4 -0
  7. package/dist/compact.scss +3 -0
  8. package/dist/compact.theme.css +3 -0
  9. package/dist/index.css +138 -109
  10. package/dist/index.d.ts +136 -93
  11. package/dist/index.json +191 -148
  12. package/dist/index.mjs +162 -140
  13. package/dist/index.scss +129 -100
  14. package/dist/index.theme.css +138 -109
  15. package/package.json +2 -2
  16. package/src/brand/ams/focus.tokens.json +1 -1
  17. package/src/brand/ams/typography.compact.tokens.json +2 -1
  18. package/src/components/ams/alert.tokens.json +6 -7
  19. package/src/components/ams/avatar.tokens.json +9 -0
  20. package/src/components/ams/button.tokens.json +19 -21
  21. package/src/components/ams/checkbox.tokens.json +57 -36
  22. package/src/components/ams/date-input.tokens.json +9 -8
  23. package/src/components/ams/dialog.tokens.json +3 -1
  24. package/src/components/ams/file-input.tokens.json +8 -11
  25. package/src/components/ams/hint.tokens.json +1 -1
  26. package/src/components/ams/page-header.compact.tokens.json +10 -0
  27. package/src/components/ams/page-header.tokens.json +1 -0
  28. package/src/components/ams/password-input.tokens.json +7 -6
  29. package/src/components/ams/radio.tokens.json +0 -2
  30. package/src/components/ams/search-field.tokens.json +7 -4
  31. package/src/components/ams/select.tokens.json +11 -6
  32. package/src/components/ams/switch.tokens.json +2 -2
  33. package/src/components/ams/tabs.tokens.json +3 -3
  34. package/src/components/ams/text-area.tokens.json +7 -6
  35. package/src/components/ams/text-input.tokens.json +7 -6
  36. package/src/components/ams/time-input.tokens.json +9 -8
package/dist/index.d.ts CHANGED
@@ -195,10 +195,9 @@ declare const tokens: {
195
195
  };
196
196
  alert: {
197
197
  "background-color": DesignToken;
198
- "box-shadow": DesignToken;
199
- "forced-colors": {
200
- "border-width": DesignToken;
201
- };
198
+ "border-color": DesignToken;
199
+ "border-style": DesignToken;
200
+ "border-width": DesignToken;
202
201
  "severity-indicator": {
203
202
  "background-color": DesignToken;
204
203
  "padding-block": DesignToken;
@@ -210,19 +209,19 @@ declare const tokens: {
210
209
  "padding-inline": DesignToken;
211
210
  };
212
211
  error: {
213
- "box-shadow": DesignToken;
212
+ "border-color": DesignToken;
214
213
  "severity-indicator": {
215
214
  "background-color": DesignToken;
216
215
  };
217
216
  };
218
217
  success: {
219
- "box-shadow": DesignToken;
218
+ "border-color": DesignToken;
220
219
  "severity-indicator": {
221
220
  "background-color": DesignToken;
222
221
  };
223
222
  };
224
223
  warning: {
225
- "box-shadow": DesignToken;
224
+ "border-color": DesignToken;
226
225
  "severity-indicator": {
227
226
  "background-color": DesignToken;
228
227
  };
@@ -231,6 +230,9 @@ declare const tokens: {
231
230
  avatar: {
232
231
  "aspect-ratio": DesignToken;
233
232
  "background-color": DesignToken;
233
+ "border-color": DesignToken;
234
+ "border-style": DesignToken;
235
+ "border-width": DesignToken;
234
236
  color: DesignToken;
235
237
  "font-family": DesignToken;
236
238
  "font-size": DesignToken;
@@ -243,26 +245,32 @@ declare const tokens: {
243
245
  };
244
246
  azure: {
245
247
  "background-color": DesignToken;
248
+ "border-color": DesignToken;
246
249
  color: DesignToken;
247
250
  };
248
251
  green: {
249
252
  "background-color": DesignToken;
253
+ "border-color": DesignToken;
250
254
  color: DesignToken;
251
255
  };
252
256
  lime: {
253
257
  "background-color": DesignToken;
258
+ "border-color": DesignToken;
254
259
  color: DesignToken;
255
260
  };
256
261
  magenta: {
257
262
  "background-color": DesignToken;
263
+ "border-color": DesignToken;
258
264
  color: DesignToken;
259
265
  };
260
266
  orange: {
261
267
  "background-color": DesignToken;
268
+ "border-color": DesignToken;
262
269
  color: DesignToken;
263
270
  };
264
271
  yellow: {
265
272
  "background-color": DesignToken;
273
+ "border-color": DesignToken;
266
274
  color: DesignToken;
267
275
  };
268
276
  };
@@ -337,6 +345,8 @@ declare const tokens: {
337
345
  };
338
346
  };
339
347
  button: {
348
+ "border-style": DesignToken;
349
+ "border-width": DesignToken;
340
350
  cursor: DesignToken;
341
351
  "font-family": DesignToken;
342
352
  "font-size": DesignToken;
@@ -349,52 +359,48 @@ declare const tokens: {
349
359
  disabled: {
350
360
  cursor: DesignToken;
351
361
  };
352
- "forced-color-mode": {
353
- border: DesignToken;
362
+ "icon-only": {
363
+ "padding-block": DesignToken;
364
+ "padding-inline": DesignToken;
354
365
  };
355
366
  primary: {
356
367
  "background-color": DesignToken;
357
- "box-shadow": DesignToken;
368
+ "border-color": DesignToken;
358
369
  color: DesignToken;
359
370
  disabled: {
360
371
  "background-color": DesignToken;
361
- "box-shadow": DesignToken;
372
+ "border-color": DesignToken;
362
373
  };
363
374
  hover: {
364
375
  "background-color": DesignToken;
365
- "box-shadow": DesignToken;
376
+ "border-color": DesignToken;
366
377
  };
367
378
  };
368
379
  secondary: {
369
380
  "background-color": DesignToken;
381
+ "border-color": DesignToken;
370
382
  color: DesignToken;
371
- "box-shadow": DesignToken;
372
- hover: {
373
- "box-shadow": DesignToken;
383
+ disabled: {
384
+ "border-color": DesignToken;
374
385
  color: DesignToken;
375
386
  };
376
- disabled: {
377
- "background-color": DesignToken;
387
+ hover: {
378
388
  "box-shadow": DesignToken;
379
389
  color: DesignToken;
380
390
  };
381
391
  };
382
392
  tertiary: {
383
393
  "background-color": DesignToken;
394
+ "border-color": DesignToken;
384
395
  color: DesignToken;
385
- hover: {
386
- "box-shadow": DesignToken;
396
+ disabled: {
387
397
  color: DesignToken;
388
398
  };
389
- disabled: {
390
- "background-color": DesignToken;
399
+ hover: {
400
+ "border-color": DesignToken;
391
401
  color: DesignToken;
392
402
  };
393
403
  };
394
- "icon-only": {
395
- "padding-block": DesignToken;
396
- "padding-inline": DesignToken;
397
- };
398
404
  };
399
405
  card: {
400
406
  heading: {
@@ -438,62 +444,87 @@ declare const tokens: {
438
444
  gap: DesignToken;
439
445
  "line-height": DesignToken;
440
446
  "outline-offset": DesignToken;
441
- checkmark: {
442
- "border-color": DesignToken;
443
- "border-width": DesignToken;
444
- checked: {
445
- "background-color": DesignToken;
446
- "background-image": DesignToken;
447
+ "checked-indicator": {
448
+ stroke: DesignToken;
449
+ };
450
+ "indeterminate-indicator": {
451
+ stroke: DesignToken;
452
+ };
453
+ "hover-indicator": {
454
+ hover: {
455
+ stroke: DesignToken;
456
+ };
457
+ invalid: {
447
458
  hover: {
448
- "background-color": DesignToken;
459
+ stroke: DesignToken;
449
460
  };
450
461
  };
451
- disabled: {
452
- "border-color": DesignToken;
453
- "border-width": DesignToken;
454
- checked: {
455
- "background-color": DesignToken;
462
+ };
463
+ rectangle: {
464
+ fill: DesignToken;
465
+ stroke: DesignToken;
466
+ checked: {
467
+ fill: DesignToken;
468
+ disabled: {
469
+ fill: DesignToken;
456
470
  hover: {
457
- "background-color": DesignToken;
471
+ fill: DesignToken;
458
472
  };
459
473
  };
460
- indeterminate: {
461
- "background-color": DesignToken;
474
+ hover: {
475
+ fill: DesignToken;
476
+ "disabled-invalid": {
477
+ fill: DesignToken;
478
+ };
479
+ };
480
+ invalid: {
481
+ fill: DesignToken;
462
482
  hover: {
463
- "background-color": DesignToken;
483
+ fill: DesignToken;
464
484
  };
465
485
  };
466
486
  };
487
+ disabled: {
488
+ stroke: DesignToken;
489
+ };
467
490
  hover: {
468
- "border-color": DesignToken;
469
- "border-width": DesignToken;
491
+ stroke: DesignToken;
492
+ "disabled-invalid": {
493
+ stroke: DesignToken;
494
+ };
470
495
  };
471
- invalid: {
472
- "border-color": DesignToken;
473
- checked: {
474
- "background-color": DesignToken;
496
+ indeterminate: {
497
+ fill: DesignToken;
498
+ disabled: {
499
+ fill: DesignToken;
475
500
  hover: {
476
- "background-color": DesignToken;
501
+ fill: DesignToken;
477
502
  };
478
503
  };
479
504
  hover: {
480
- "border-color": DesignToken;
505
+ fill: DesignToken;
506
+ "disabled-invalid": {
507
+ fill: DesignToken;
508
+ };
481
509
  };
482
- indeterminate: {
483
- "background-color": DesignToken;
510
+ invalid: {
511
+ fill: DesignToken;
484
512
  hover: {
485
- "background-color": DesignToken;
513
+ fill: DesignToken;
486
514
  };
487
515
  };
488
516
  };
489
- indeterminate: {
490
- "background-color": DesignToken;
491
- "background-image": DesignToken;
517
+ invalid: {
518
+ stroke: DesignToken;
492
519
  hover: {
493
- "background-color": DesignToken;
520
+ stroke: DesignToken;
494
521
  };
495
522
  };
496
523
  };
524
+ "icon-container": {
525
+ "block-size": DesignToken;
526
+ "inline-size": DesignToken;
527
+ };
497
528
  disabled: {
498
529
  cursor: DesignToken;
499
530
  color: DesignToken;
@@ -514,7 +545,9 @@ declare const tokens: {
514
545
  };
515
546
  "date-input": {
516
547
  "background-color": DesignToken;
517
- "box-shadow": DesignToken;
548
+ "border-color": DesignToken;
549
+ "border-style": DesignToken;
550
+ "border-width": DesignToken;
518
551
  color: DesignToken;
519
552
  "font-family": DesignToken;
520
553
  "font-size": DesignToken;
@@ -528,8 +561,6 @@ declare const tokens: {
528
561
  cursor: DesignToken;
529
562
  };
530
563
  disabled: {
531
- "background-color": DesignToken;
532
- "box-shadow": DesignToken;
533
564
  color: DesignToken;
534
565
  cursor: DesignToken;
535
566
  "calender-picker-indicator": {
@@ -543,8 +574,9 @@ declare const tokens: {
543
574
  };
544
575
  };
545
576
  invalid: {
546
- "box-shadow": DesignToken;
577
+ "border-color": DesignToken;
547
578
  hover: {
579
+ "border-color": DesignToken;
548
580
  "box-shadow": DesignToken;
549
581
  };
550
582
  };
@@ -578,7 +610,9 @@ declare const tokens: {
578
610
  };
579
611
  dialog: {
580
612
  "background-color": DesignToken;
581
- border: DesignToken;
613
+ "border-color": DesignToken;
614
+ "border-style": DesignToken;
615
+ "border-width": DesignToken;
582
616
  gap: DesignToken;
583
617
  "inline-size": DesignToken;
584
618
  "max-block-size": DesignToken;
@@ -660,7 +694,9 @@ declare const tokens: {
660
694
  };
661
695
  "file-input": {
662
696
  "background-color": DesignToken;
663
- border: DesignToken;
697
+ "border-color": DesignToken;
698
+ "border-style": DesignToken;
699
+ "border-width": DesignToken;
664
700
  color: DesignToken;
665
701
  cursor: DesignToken;
666
702
  "font-family": DesignToken;
@@ -676,7 +712,9 @@ declare const tokens: {
676
712
  };
677
713
  "file-selector-button": {
678
714
  "background-color": DesignToken;
679
- "box-shadow": DesignToken;
715
+ "border-color": DesignToken;
716
+ "border-style": DesignToken;
717
+ "border-width": DesignToken;
680
718
  color: DesignToken;
681
719
  cursor: DesignToken;
682
720
  "margin-inline-end": DesignToken;
@@ -687,13 +725,9 @@ declare const tokens: {
687
725
  color: DesignToken;
688
726
  };
689
727
  disabled: {
690
- "box-shadow": DesignToken;
691
728
  color: DesignToken;
692
729
  cursor: DesignToken;
693
730
  };
694
- "forced-color-mode": {
695
- border: DesignToken;
696
- };
697
731
  };
698
732
  };
699
733
  "file-list": {
@@ -770,7 +804,7 @@ declare const tokens: {
770
804
  };
771
805
  };
772
806
  hint: {
773
- color: DesignToken;
807
+ "font-weight": DesignToken;
774
808
  };
775
809
  "icon-button": {
776
810
  color: DesignToken;
@@ -1036,6 +1070,7 @@ declare const tokens: {
1036
1070
  color: DesignToken;
1037
1071
  "font-size": DesignToken;
1038
1072
  "font-weight": DesignToken;
1073
+ "line-height": DesignToken;
1039
1074
  "text-wrap": DesignToken;
1040
1075
  };
1041
1076
  "mega-menu": {
@@ -1135,7 +1170,9 @@ declare const tokens: {
1135
1170
  };
1136
1171
  "password-input": {
1137
1172
  "background-color": DesignToken;
1138
- "box-shadow": DesignToken;
1173
+ "border-color": DesignToken;
1174
+ "border-style": DesignToken;
1175
+ "border-width": DesignToken;
1139
1176
  color: DesignToken;
1140
1177
  "font-family": DesignToken;
1141
1178
  "font-size": DesignToken;
@@ -1145,8 +1182,6 @@ declare const tokens: {
1145
1182
  "padding-block": DesignToken;
1146
1183
  "padding-inline": DesignToken;
1147
1184
  disabled: {
1148
- "background-color": DesignToken;
1149
- "box-shadow": DesignToken;
1150
1185
  color: DesignToken;
1151
1186
  cursor: DesignToken;
1152
1187
  };
@@ -1154,8 +1189,9 @@ declare const tokens: {
1154
1189
  "box-shadow": DesignToken;
1155
1190
  };
1156
1191
  invalid: {
1157
- "box-shadow": DesignToken;
1192
+ "border-color": DesignToken;
1158
1193
  hover: {
1194
+ "border-color": DesignToken;
1159
1195
  "box-shadow": DesignToken;
1160
1196
  };
1161
1197
  };
@@ -1196,7 +1232,6 @@ declare const tokens: {
1196
1232
  };
1197
1233
  };
1198
1234
  "hover-indicator": {
1199
- "stroke-width": DesignToken;
1200
1235
  hover: {
1201
1236
  stroke: DesignToken;
1202
1237
  };
@@ -1209,7 +1244,6 @@ declare const tokens: {
1209
1244
  circle: {
1210
1245
  fill: DesignToken;
1211
1246
  stroke: DesignToken;
1212
- "stroke-width": DesignToken;
1213
1247
  disabled: {
1214
1248
  stroke: DesignToken;
1215
1249
  };
@@ -1254,7 +1288,9 @@ declare const tokens: {
1254
1288
  "search-field": {
1255
1289
  input: {
1256
1290
  "background-color": DesignToken;
1257
- "box-shadow": DesignToken;
1291
+ "border-color": DesignToken;
1292
+ "border-style": DesignToken;
1293
+ "border-width": DesignToken;
1258
1294
  color: DesignToken;
1259
1295
  "font-family": DesignToken;
1260
1296
  "font-size": DesignToken;
@@ -1274,8 +1310,9 @@ declare const tokens: {
1274
1310
  "box-shadow": DesignToken;
1275
1311
  };
1276
1312
  invalid: {
1277
- "box-shadow": DesignToken;
1313
+ "border-color": DesignToken;
1278
1314
  hover: {
1315
+ "border-color": DesignToken;
1279
1316
  "box-shadow": DesignToken;
1280
1317
  };
1281
1318
  };
@@ -1288,7 +1325,9 @@ declare const tokens: {
1288
1325
  "background-color": DesignToken;
1289
1326
  "background-image": DesignToken;
1290
1327
  "background-position": DesignToken;
1291
- "box-shadow": DesignToken;
1328
+ "border-color": DesignToken;
1329
+ "border-style": DesignToken;
1330
+ "border-width": DesignToken;
1292
1331
  color: DesignToken;
1293
1332
  "font-family": DesignToken;
1294
1333
  "font-size": DesignToken;
@@ -1299,16 +1338,17 @@ declare const tokens: {
1299
1338
  "padding-inline": DesignToken;
1300
1339
  disabled: {
1301
1340
  "background-image": DesignToken;
1302
- "box-shadow": DesignToken;
1303
1341
  color: DesignToken;
1304
1342
  cursor: DesignToken;
1305
1343
  };
1306
1344
  hover: {
1307
1345
  "box-shadow": DesignToken;
1346
+ "background-image": DesignToken;
1308
1347
  };
1309
1348
  invalid: {
1310
- "box-shadow": DesignToken;
1349
+ "border-color": DesignToken;
1311
1350
  hover: {
1351
+ "border-color": DesignToken;
1312
1352
  "box-shadow": DesignToken;
1313
1353
  };
1314
1354
  };
@@ -1394,8 +1434,8 @@ declare const tokens: {
1394
1434
  "inline-size": DesignToken;
1395
1435
  thumb: {
1396
1436
  "background-color": DesignToken;
1397
- "inline-size": DesignToken;
1398
1437
  "block-size": DesignToken;
1438
+ "inline-size": DesignToken;
1399
1439
  hover: {
1400
1440
  "box-shadow": DesignToken;
1401
1441
  color: DesignToken;
@@ -1473,8 +1513,8 @@ declare const tokens: {
1473
1513
  "padding-block": DesignToken;
1474
1514
  "padding-inline": DesignToken;
1475
1515
  hover: {
1476
- color: DesignToken;
1477
1516
  "box-shadow": DesignToken;
1517
+ color: DesignToken;
1478
1518
  };
1479
1519
  selected: {
1480
1520
  "box-shadow": DesignToken;
@@ -1488,7 +1528,9 @@ declare const tokens: {
1488
1528
  };
1489
1529
  "text-area": {
1490
1530
  "background-color": DesignToken;
1491
- "box-shadow": DesignToken;
1531
+ "border-color": DesignToken;
1532
+ "border-style": DesignToken;
1533
+ "border-width": DesignToken;
1492
1534
  color: DesignToken;
1493
1535
  "font-family": DesignToken;
1494
1536
  "font-size": DesignToken;
@@ -1499,8 +1541,6 @@ declare const tokens: {
1499
1541
  "padding-block": DesignToken;
1500
1542
  "padding-inline": DesignToken;
1501
1543
  disabled: {
1502
- "background-color": DesignToken;
1503
- "box-shadow": DesignToken;
1504
1544
  color: DesignToken;
1505
1545
  cursor: DesignToken;
1506
1546
  };
@@ -1508,8 +1548,9 @@ declare const tokens: {
1508
1548
  "box-shadow": DesignToken;
1509
1549
  };
1510
1550
  invalid: {
1511
- "box-shadow": DesignToken;
1551
+ "border-color": DesignToken;
1512
1552
  hover: {
1553
+ "border-color": DesignToken;
1513
1554
  "box-shadow": DesignToken;
1514
1555
  };
1515
1556
  };
@@ -1519,7 +1560,9 @@ declare const tokens: {
1519
1560
  };
1520
1561
  "text-input": {
1521
1562
  "background-color": DesignToken;
1522
- "box-shadow": DesignToken;
1563
+ "border-color": DesignToken;
1564
+ "border-style": DesignToken;
1565
+ "border-width": DesignToken;
1523
1566
  color: DesignToken;
1524
1567
  "font-family": DesignToken;
1525
1568
  "font-size": DesignToken;
@@ -1529,8 +1572,6 @@ declare const tokens: {
1529
1572
  "padding-block": DesignToken;
1530
1573
  "padding-inline": DesignToken;
1531
1574
  disabled: {
1532
- "background-color": DesignToken;
1533
- "box-shadow": DesignToken;
1534
1575
  color: DesignToken;
1535
1576
  cursor: DesignToken;
1536
1577
  };
@@ -1538,8 +1579,9 @@ declare const tokens: {
1538
1579
  "box-shadow": DesignToken;
1539
1580
  };
1540
1581
  invalid: {
1541
- "box-shadow": DesignToken;
1582
+ "border-color": DesignToken;
1542
1583
  hover: {
1584
+ "border-color": DesignToken;
1543
1585
  "box-shadow": DesignToken;
1544
1586
  };
1545
1587
  };
@@ -1549,7 +1591,9 @@ declare const tokens: {
1549
1591
  };
1550
1592
  "time-input": {
1551
1593
  "background-color": DesignToken;
1552
- "box-shadow": DesignToken;
1594
+ "border-color": DesignToken;
1595
+ "border-style": DesignToken;
1596
+ "border-width": DesignToken;
1553
1597
  color: DesignToken;
1554
1598
  "font-family": DesignToken;
1555
1599
  "font-size": DesignToken;
@@ -1563,8 +1607,6 @@ declare const tokens: {
1563
1607
  cursor: DesignToken;
1564
1608
  };
1565
1609
  disabled: {
1566
- "background-color": DesignToken;
1567
- "box-shadow": DesignToken;
1568
1610
  color: DesignToken;
1569
1611
  cursor: DesignToken;
1570
1612
  "calender-picker-indicator": {
@@ -1578,8 +1620,9 @@ declare const tokens: {
1578
1620
  };
1579
1621
  };
1580
1622
  invalid: {
1581
- "box-shadow": DesignToken;
1623
+ "border-color": DesignToken;
1582
1624
  hover: {
1625
+ "border-color": DesignToken;
1583
1626
  "box-shadow": DesignToken;
1584
1627
  };
1585
1628
  };