@amsterdam/design-system-tokens 0.16.0 → 1.0.0

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 (35) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/compact.css +3 -0
  3. package/dist/compact.d.ts +7 -0
  4. package/dist/compact.json +8 -1
  5. package/dist/compact.mjs +4 -0
  6. package/dist/compact.scss +3 -0
  7. package/dist/compact.theme.css +3 -0
  8. package/dist/index.css +132 -105
  9. package/dist/index.d.ts +127 -86
  10. package/dist/index.json +180 -139
  11. package/dist/index.mjs +154 -134
  12. package/dist/index.scss +123 -96
  13. package/dist/index.theme.css +132 -105
  14. package/package.json +2 -2
  15. package/src/brand/ams/focus.tokens.json +1 -1
  16. package/src/brand/ams/typography.compact.tokens.json +2 -1
  17. package/src/components/ams/alert.tokens.json +6 -7
  18. package/src/components/ams/avatar.tokens.json +9 -0
  19. package/src/components/ams/button.tokens.json +8 -12
  20. package/src/components/ams/checkbox.tokens.json +57 -36
  21. package/src/components/ams/date-input.tokens.json +9 -8
  22. package/src/components/ams/dialog.tokens.json +3 -1
  23. package/src/components/ams/file-input.tokens.json +8 -11
  24. package/src/components/ams/hint.tokens.json +1 -1
  25. package/src/components/ams/page-header.compact.tokens.json +10 -0
  26. package/src/components/ams/page-header.tokens.json +1 -0
  27. package/src/components/ams/password-input.tokens.json +7 -6
  28. package/src/components/ams/radio.tokens.json +0 -2
  29. package/src/components/ams/search-field.tokens.json +7 -4
  30. package/src/components/ams/select.tokens.json +11 -6
  31. package/src/components/ams/switch.tokens.json +2 -2
  32. package/src/components/ams/tabs.tokens.json +3 -3
  33. package/src/components/ams/text-area.tokens.json +7 -6
  34. package/src/components/ams/text-input.tokens.json +7 -6
  35. 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,45 +359,39 @@ declare const tokens: {
349
359
  disabled: {
350
360
  cursor: DesignToken;
351
361
  };
352
- "forced-color-mode": {
353
- border: DesignToken;
354
- };
355
362
  primary: {
356
363
  "background-color": DesignToken;
357
- "box-shadow": DesignToken;
364
+ "border-color": DesignToken;
358
365
  color: DesignToken;
359
366
  disabled: {
360
367
  "background-color": DesignToken;
361
- "box-shadow": DesignToken;
368
+ "border-color": DesignToken;
362
369
  };
363
370
  hover: {
364
371
  "background-color": DesignToken;
365
- "box-shadow": DesignToken;
372
+ "border-color": DesignToken;
366
373
  };
367
374
  };
368
375
  secondary: {
369
376
  "background-color": DesignToken;
370
377
  color: DesignToken;
371
- "box-shadow": DesignToken;
372
378
  hover: {
373
379
  "box-shadow": DesignToken;
374
380
  color: DesignToken;
375
381
  };
376
382
  disabled: {
377
- "background-color": DesignToken;
378
- "box-shadow": DesignToken;
379
383
  color: DesignToken;
380
384
  };
381
385
  };
382
386
  tertiary: {
383
387
  "background-color": DesignToken;
388
+ "border-color": DesignToken;
384
389
  color: DesignToken;
385
390
  hover: {
386
- "box-shadow": DesignToken;
391
+ "border-color": DesignToken;
387
392
  color: DesignToken;
388
393
  };
389
394
  disabled: {
390
- "background-color": DesignToken;
391
395
  color: DesignToken;
392
396
  };
393
397
  };
@@ -438,62 +442,87 @@ declare const tokens: {
438
442
  gap: DesignToken;
439
443
  "line-height": DesignToken;
440
444
  "outline-offset": DesignToken;
441
- checkmark: {
442
- "border-color": DesignToken;
443
- "border-width": DesignToken;
444
- checked: {
445
- "background-color": DesignToken;
446
- "background-image": DesignToken;
445
+ "checked-indicator": {
446
+ stroke: DesignToken;
447
+ };
448
+ "indeterminate-indicator": {
449
+ stroke: DesignToken;
450
+ };
451
+ "hover-indicator": {
452
+ hover: {
453
+ stroke: DesignToken;
454
+ };
455
+ invalid: {
447
456
  hover: {
448
- "background-color": DesignToken;
457
+ stroke: DesignToken;
449
458
  };
450
459
  };
451
- disabled: {
452
- "border-color": DesignToken;
453
- "border-width": DesignToken;
454
- checked: {
455
- "background-color": DesignToken;
460
+ };
461
+ rectangle: {
462
+ fill: DesignToken;
463
+ stroke: DesignToken;
464
+ checked: {
465
+ fill: DesignToken;
466
+ disabled: {
467
+ fill: DesignToken;
456
468
  hover: {
457
- "background-color": DesignToken;
469
+ fill: DesignToken;
470
+ };
471
+ };
472
+ hover: {
473
+ fill: DesignToken;
474
+ "disabled-invalid": {
475
+ fill: DesignToken;
458
476
  };
459
477
  };
460
- indeterminate: {
461
- "background-color": DesignToken;
478
+ invalid: {
479
+ fill: DesignToken;
462
480
  hover: {
463
- "background-color": DesignToken;
481
+ fill: DesignToken;
464
482
  };
465
483
  };
466
484
  };
485
+ disabled: {
486
+ stroke: DesignToken;
487
+ };
467
488
  hover: {
468
- "border-color": DesignToken;
469
- "border-width": DesignToken;
489
+ stroke: DesignToken;
490
+ "disabled-invalid": {
491
+ stroke: DesignToken;
492
+ };
470
493
  };
471
- invalid: {
472
- "border-color": DesignToken;
473
- checked: {
474
- "background-color": DesignToken;
494
+ indeterminate: {
495
+ fill: DesignToken;
496
+ disabled: {
497
+ fill: DesignToken;
475
498
  hover: {
476
- "background-color": DesignToken;
499
+ fill: DesignToken;
477
500
  };
478
501
  };
479
502
  hover: {
480
- "border-color": DesignToken;
503
+ fill: DesignToken;
504
+ "disabled-invalid": {
505
+ fill: DesignToken;
506
+ };
481
507
  };
482
- indeterminate: {
483
- "background-color": DesignToken;
508
+ invalid: {
509
+ fill: DesignToken;
484
510
  hover: {
485
- "background-color": DesignToken;
511
+ fill: DesignToken;
486
512
  };
487
513
  };
488
514
  };
489
- indeterminate: {
490
- "background-color": DesignToken;
491
- "background-image": DesignToken;
515
+ invalid: {
516
+ stroke: DesignToken;
492
517
  hover: {
493
- "background-color": DesignToken;
518
+ stroke: DesignToken;
494
519
  };
495
520
  };
496
521
  };
522
+ "icon-container": {
523
+ "block-size": DesignToken;
524
+ "inline-size": DesignToken;
525
+ };
497
526
  disabled: {
498
527
  cursor: DesignToken;
499
528
  color: DesignToken;
@@ -514,7 +543,9 @@ declare const tokens: {
514
543
  };
515
544
  "date-input": {
516
545
  "background-color": DesignToken;
517
- "box-shadow": DesignToken;
546
+ "border-color": DesignToken;
547
+ "border-style": DesignToken;
548
+ "border-width": DesignToken;
518
549
  color: DesignToken;
519
550
  "font-family": DesignToken;
520
551
  "font-size": DesignToken;
@@ -528,8 +559,6 @@ declare const tokens: {
528
559
  cursor: DesignToken;
529
560
  };
530
561
  disabled: {
531
- "background-color": DesignToken;
532
- "box-shadow": DesignToken;
533
562
  color: DesignToken;
534
563
  cursor: DesignToken;
535
564
  "calender-picker-indicator": {
@@ -543,8 +572,9 @@ declare const tokens: {
543
572
  };
544
573
  };
545
574
  invalid: {
546
- "box-shadow": DesignToken;
575
+ "border-color": DesignToken;
547
576
  hover: {
577
+ "border-color": DesignToken;
548
578
  "box-shadow": DesignToken;
549
579
  };
550
580
  };
@@ -578,7 +608,9 @@ declare const tokens: {
578
608
  };
579
609
  dialog: {
580
610
  "background-color": DesignToken;
581
- border: DesignToken;
611
+ "border-color": DesignToken;
612
+ "border-style": DesignToken;
613
+ "border-width": DesignToken;
582
614
  gap: DesignToken;
583
615
  "inline-size": DesignToken;
584
616
  "max-block-size": DesignToken;
@@ -660,7 +692,9 @@ declare const tokens: {
660
692
  };
661
693
  "file-input": {
662
694
  "background-color": DesignToken;
663
- border: DesignToken;
695
+ "border-color": DesignToken;
696
+ "border-style": DesignToken;
697
+ "border-width": DesignToken;
664
698
  color: DesignToken;
665
699
  cursor: DesignToken;
666
700
  "font-family": DesignToken;
@@ -676,7 +710,9 @@ declare const tokens: {
676
710
  };
677
711
  "file-selector-button": {
678
712
  "background-color": DesignToken;
679
- "box-shadow": DesignToken;
713
+ "border-color": DesignToken;
714
+ "border-style": DesignToken;
715
+ "border-width": DesignToken;
680
716
  color: DesignToken;
681
717
  cursor: DesignToken;
682
718
  "margin-inline-end": DesignToken;
@@ -687,13 +723,9 @@ declare const tokens: {
687
723
  color: DesignToken;
688
724
  };
689
725
  disabled: {
690
- "box-shadow": DesignToken;
691
726
  color: DesignToken;
692
727
  cursor: DesignToken;
693
728
  };
694
- "forced-color-mode": {
695
- border: DesignToken;
696
- };
697
729
  };
698
730
  };
699
731
  "file-list": {
@@ -770,7 +802,7 @@ declare const tokens: {
770
802
  };
771
803
  };
772
804
  hint: {
773
- color: DesignToken;
805
+ "font-weight": DesignToken;
774
806
  };
775
807
  "icon-button": {
776
808
  color: DesignToken;
@@ -1036,6 +1068,7 @@ declare const tokens: {
1036
1068
  color: DesignToken;
1037
1069
  "font-size": DesignToken;
1038
1070
  "font-weight": DesignToken;
1071
+ "line-height": DesignToken;
1039
1072
  "text-wrap": DesignToken;
1040
1073
  };
1041
1074
  "mega-menu": {
@@ -1135,7 +1168,9 @@ declare const tokens: {
1135
1168
  };
1136
1169
  "password-input": {
1137
1170
  "background-color": DesignToken;
1138
- "box-shadow": DesignToken;
1171
+ "border-color": DesignToken;
1172
+ "border-style": DesignToken;
1173
+ "border-width": DesignToken;
1139
1174
  color: DesignToken;
1140
1175
  "font-family": DesignToken;
1141
1176
  "font-size": DesignToken;
@@ -1145,8 +1180,6 @@ declare const tokens: {
1145
1180
  "padding-block": DesignToken;
1146
1181
  "padding-inline": DesignToken;
1147
1182
  disabled: {
1148
- "background-color": DesignToken;
1149
- "box-shadow": DesignToken;
1150
1183
  color: DesignToken;
1151
1184
  cursor: DesignToken;
1152
1185
  };
@@ -1154,8 +1187,9 @@ declare const tokens: {
1154
1187
  "box-shadow": DesignToken;
1155
1188
  };
1156
1189
  invalid: {
1157
- "box-shadow": DesignToken;
1190
+ "border-color": DesignToken;
1158
1191
  hover: {
1192
+ "border-color": DesignToken;
1159
1193
  "box-shadow": DesignToken;
1160
1194
  };
1161
1195
  };
@@ -1196,7 +1230,6 @@ declare const tokens: {
1196
1230
  };
1197
1231
  };
1198
1232
  "hover-indicator": {
1199
- "stroke-width": DesignToken;
1200
1233
  hover: {
1201
1234
  stroke: DesignToken;
1202
1235
  };
@@ -1209,7 +1242,6 @@ declare const tokens: {
1209
1242
  circle: {
1210
1243
  fill: DesignToken;
1211
1244
  stroke: DesignToken;
1212
- "stroke-width": DesignToken;
1213
1245
  disabled: {
1214
1246
  stroke: DesignToken;
1215
1247
  };
@@ -1254,7 +1286,9 @@ declare const tokens: {
1254
1286
  "search-field": {
1255
1287
  input: {
1256
1288
  "background-color": DesignToken;
1257
- "box-shadow": DesignToken;
1289
+ "border-color": DesignToken;
1290
+ "border-style": DesignToken;
1291
+ "border-width": DesignToken;
1258
1292
  color: DesignToken;
1259
1293
  "font-family": DesignToken;
1260
1294
  "font-size": DesignToken;
@@ -1274,8 +1308,9 @@ declare const tokens: {
1274
1308
  "box-shadow": DesignToken;
1275
1309
  };
1276
1310
  invalid: {
1277
- "box-shadow": DesignToken;
1311
+ "border-color": DesignToken;
1278
1312
  hover: {
1313
+ "border-color": DesignToken;
1279
1314
  "box-shadow": DesignToken;
1280
1315
  };
1281
1316
  };
@@ -1288,7 +1323,9 @@ declare const tokens: {
1288
1323
  "background-color": DesignToken;
1289
1324
  "background-image": DesignToken;
1290
1325
  "background-position": DesignToken;
1291
- "box-shadow": DesignToken;
1326
+ "border-color": DesignToken;
1327
+ "border-style": DesignToken;
1328
+ "border-width": DesignToken;
1292
1329
  color: DesignToken;
1293
1330
  "font-family": DesignToken;
1294
1331
  "font-size": DesignToken;
@@ -1299,16 +1336,17 @@ declare const tokens: {
1299
1336
  "padding-inline": DesignToken;
1300
1337
  disabled: {
1301
1338
  "background-image": DesignToken;
1302
- "box-shadow": DesignToken;
1303
1339
  color: DesignToken;
1304
1340
  cursor: DesignToken;
1305
1341
  };
1306
1342
  hover: {
1307
1343
  "box-shadow": DesignToken;
1344
+ "background-image": DesignToken;
1308
1345
  };
1309
1346
  invalid: {
1310
- "box-shadow": DesignToken;
1347
+ "border-color": DesignToken;
1311
1348
  hover: {
1349
+ "border-color": DesignToken;
1312
1350
  "box-shadow": DesignToken;
1313
1351
  };
1314
1352
  };
@@ -1394,8 +1432,8 @@ declare const tokens: {
1394
1432
  "inline-size": DesignToken;
1395
1433
  thumb: {
1396
1434
  "background-color": DesignToken;
1397
- "inline-size": DesignToken;
1398
1435
  "block-size": DesignToken;
1436
+ "inline-size": DesignToken;
1399
1437
  hover: {
1400
1438
  "box-shadow": DesignToken;
1401
1439
  color: DesignToken;
@@ -1473,8 +1511,8 @@ declare const tokens: {
1473
1511
  "padding-block": DesignToken;
1474
1512
  "padding-inline": DesignToken;
1475
1513
  hover: {
1476
- color: DesignToken;
1477
1514
  "box-shadow": DesignToken;
1515
+ color: DesignToken;
1478
1516
  };
1479
1517
  selected: {
1480
1518
  "box-shadow": DesignToken;
@@ -1488,7 +1526,9 @@ declare const tokens: {
1488
1526
  };
1489
1527
  "text-area": {
1490
1528
  "background-color": DesignToken;
1491
- "box-shadow": DesignToken;
1529
+ "border-color": DesignToken;
1530
+ "border-style": DesignToken;
1531
+ "border-width": DesignToken;
1492
1532
  color: DesignToken;
1493
1533
  "font-family": DesignToken;
1494
1534
  "font-size": DesignToken;
@@ -1499,8 +1539,6 @@ declare const tokens: {
1499
1539
  "padding-block": DesignToken;
1500
1540
  "padding-inline": DesignToken;
1501
1541
  disabled: {
1502
- "background-color": DesignToken;
1503
- "box-shadow": DesignToken;
1504
1542
  color: DesignToken;
1505
1543
  cursor: DesignToken;
1506
1544
  };
@@ -1508,8 +1546,9 @@ declare const tokens: {
1508
1546
  "box-shadow": DesignToken;
1509
1547
  };
1510
1548
  invalid: {
1511
- "box-shadow": DesignToken;
1549
+ "border-color": DesignToken;
1512
1550
  hover: {
1551
+ "border-color": DesignToken;
1513
1552
  "box-shadow": DesignToken;
1514
1553
  };
1515
1554
  };
@@ -1519,7 +1558,9 @@ declare const tokens: {
1519
1558
  };
1520
1559
  "text-input": {
1521
1560
  "background-color": DesignToken;
1522
- "box-shadow": DesignToken;
1561
+ "border-color": DesignToken;
1562
+ "border-style": DesignToken;
1563
+ "border-width": DesignToken;
1523
1564
  color: DesignToken;
1524
1565
  "font-family": DesignToken;
1525
1566
  "font-size": DesignToken;
@@ -1529,8 +1570,6 @@ declare const tokens: {
1529
1570
  "padding-block": DesignToken;
1530
1571
  "padding-inline": DesignToken;
1531
1572
  disabled: {
1532
- "background-color": DesignToken;
1533
- "box-shadow": DesignToken;
1534
1573
  color: DesignToken;
1535
1574
  cursor: DesignToken;
1536
1575
  };
@@ -1538,8 +1577,9 @@ declare const tokens: {
1538
1577
  "box-shadow": DesignToken;
1539
1578
  };
1540
1579
  invalid: {
1541
- "box-shadow": DesignToken;
1580
+ "border-color": DesignToken;
1542
1581
  hover: {
1582
+ "border-color": DesignToken;
1543
1583
  "box-shadow": DesignToken;
1544
1584
  };
1545
1585
  };
@@ -1549,7 +1589,9 @@ declare const tokens: {
1549
1589
  };
1550
1590
  "time-input": {
1551
1591
  "background-color": DesignToken;
1552
- "box-shadow": DesignToken;
1592
+ "border-color": DesignToken;
1593
+ "border-style": DesignToken;
1594
+ "border-width": DesignToken;
1553
1595
  color: DesignToken;
1554
1596
  "font-family": DesignToken;
1555
1597
  "font-size": DesignToken;
@@ -1563,8 +1605,6 @@ declare const tokens: {
1563
1605
  cursor: DesignToken;
1564
1606
  };
1565
1607
  disabled: {
1566
- "background-color": DesignToken;
1567
- "box-shadow": DesignToken;
1568
1608
  color: DesignToken;
1569
1609
  cursor: DesignToken;
1570
1610
  "calender-picker-indicator": {
@@ -1578,8 +1618,9 @@ declare const tokens: {
1578
1618
  };
1579
1619
  };
1580
1620
  invalid: {
1581
- "box-shadow": DesignToken;
1621
+ "border-color": DesignToken;
1582
1622
  hover: {
1623
+ "border-color": DesignToken;
1583
1624
  "box-shadow": DesignToken;
1584
1625
  };
1585
1626
  };