@amsterdam/design-system-tokens 3.0.0 → 3.2.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 (107) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +45 -1
  3. package/build.js +25 -35
  4. package/dist/compact.css +2 -2
  5. package/dist/compact.d.ts +3 -3
  6. package/dist/compact.mjs +2 -2
  7. package/dist/compact.scss +2 -2
  8. package/dist/compact.theme.css +2 -2
  9. package/dist/index.css +118 -47
  10. package/dist/index.d.ts +174 -9
  11. package/dist/index.json +197 -32
  12. package/dist/index.mjs +176 -70
  13. package/dist/index.scss +118 -47
  14. package/dist/index.theme.css +118 -47
  15. package/package.json +2 -2
  16. package/src/brand/ams/aspect-ratio.tokens.json +18 -6
  17. package/src/brand/ams/border.compact.tokens.json +36 -4
  18. package/src/brand/ams/border.tokens.json +36 -4
  19. package/src/brand/ams/color.deprecated.tokens.json +3 -2
  20. package/src/brand/ams/color.tokens.json +106 -23
  21. package/src/brand/ams/cursor.tokens.json +6 -2
  22. package/src/brand/ams/focus.tokens.json +10 -1
  23. package/src/brand/ams/space.compact.tokens.json +30 -6
  24. package/src/brand/ams/space.tokens.json +24 -6
  25. package/src/brand/ams/typography.compact.tokens.json +110 -18
  26. package/src/brand/ams/typography.deprecated.compact.tokens.json +10 -4
  27. package/src/brand/ams/typography.deprecated.tokens.json +20 -8
  28. package/src/brand/ams/typography.tokens.json +131 -24
  29. package/src/common/ams/inputs.tokens.json +121 -18
  30. package/src/common/ams/links.tokens.json +72 -12
  31. package/src/components/ams/accordion.deprecated.tokens.json +29 -7
  32. package/src/components/ams/accordion.tokens.json +46 -8
  33. package/src/components/ams/action-group.tokens.json +7 -1
  34. package/src/components/ams/alert.tokens.json +83 -16
  35. package/src/components/ams/avatar.tokens.json +139 -31
  36. package/src/components/ams/badge.tokens.json +98 -21
  37. package/src/components/ams/blockquote.tokens.json +28 -6
  38. package/src/components/ams/breadcrumb.tokens.json +68 -15
  39. package/src/components/ams/button.tokens.json +176 -34
  40. package/src/components/ams/call-to-action-link.tokens.json +73 -14
  41. package/src/components/ams/card.tokens.json +60 -11
  42. package/src/components/ams/character-count.tokens.json +28 -6
  43. package/src/components/ams/checkbox.deprecated.tokens.json +23 -7
  44. package/src/components/ams/checkbox.tokens.json +154 -36
  45. package/src/components/ams/column.tokens.json +35 -5
  46. package/src/components/ams/date-input.deprecated.tokens.json +14 -8
  47. package/src/components/ams/date-input.tokens.json +92 -25
  48. package/src/components/ams/description-list.tokens.json +86 -13
  49. package/src/components/ams/dialog.tokens.json +144 -23
  50. package/src/components/ams/error-message.tokens.json +31 -6
  51. package/src/components/ams/field-set.deprecated.tokens.json +8 -1
  52. package/src/components/ams/field-set.tokens.json +69 -13
  53. package/src/components/ams/field.deprecated.tokens.json +8 -1
  54. package/src/components/ams/field.tokens.json +24 -4
  55. package/src/components/ams/figure.tokens.json +35 -7
  56. package/src/components/ams/file-input.tokens.json +143 -29
  57. package/src/components/ams/file-list.tokens.json +49 -9
  58. package/src/components/ams/grid.compact.tokens.json +7 -1
  59. package/src/components/ams/grid.tokens.json +79 -13
  60. package/src/components/ams/heading.tokens.json +91 -17
  61. package/src/components/ams/hint.tokens.json +8 -2
  62. package/src/components/ams/icon-button.tokens.json +69 -17
  63. package/src/components/ams/icon.deprecated.tokens.json +10 -4
  64. package/src/components/ams/icon.tokens.json +112 -19
  65. package/src/components/ams/image-slider.tokens.json +60 -10
  66. package/src/components/ams/image.tokens.json +3 -1
  67. package/src/components/ams/invalid-form-alert.tokens.json +7 -1
  68. package/src/components/ams/label.tokens.json +31 -7
  69. package/src/components/ams/link-list.tokens.json +106 -21
  70. package/src/components/ams/link.tokens.json +73 -15
  71. package/src/components/ams/logo.tokens.json +23 -5
  72. package/src/components/ams/mark.tokens.json +4 -1
  73. package/src/components/ams/menu.deprecated.tokens.json +12 -8
  74. package/src/components/ams/menu.tokens.json +119 -21
  75. package/src/components/ams/ordered-list.tokens.json +110 -22
  76. package/src/components/ams/page-footer.tokens.json +98 -18
  77. package/src/components/ams/page-header.compact.tokens.json +19 -3
  78. package/src/components/ams/page-header.tokens.json +214 -34
  79. package/src/components/ams/page-heading.deprecated.tokens.json +38 -8
  80. package/src/components/ams/page.tokens.json +24 -5
  81. package/src/components/ams/pagination.tokens.json +70 -14
  82. package/src/components/ams/paragraph.tokens.json +55 -11
  83. package/src/components/ams/password-input.tokens.json +92 -19
  84. package/src/components/ams/progress-list.tokens.json +372 -0
  85. package/src/components/ams/radio.tokens.json +142 -33
  86. package/src/components/ams/row.tokens.json +35 -5
  87. package/src/components/ams/search-field.tokens.json +101 -22
  88. package/src/components/ams/select.tokens.json +97 -24
  89. package/src/components/ams/skip-link.tokens.json +53 -10
  90. package/src/components/ams/spotlight.tokens.json +28 -7
  91. package/src/components/ams/standalone-link.deprecated.tokens.json +16 -10
  92. package/src/components/ams/standalone-link.tokens.json +75 -16
  93. package/src/components/ams/switch.tokens.json +57 -12
  94. package/src/components/ams/table-of-contents.deprecated.tokens.json +16 -3
  95. package/src/components/ams/table-of-contents.tokens.json +80 -15
  96. package/src/components/ams/table.tokens.json +49 -10
  97. package/src/components/ams/tabs.tokens.json +130 -17
  98. package/src/components/ams/text-area.tokens.json +97 -20
  99. package/src/components/ams/text-input.tokens.json +90 -19
  100. package/src/components/ams/time-input.deprecated.tokens.json +14 -8
  101. package/src/components/ams/time-input.tokens.json +90 -25
  102. package/src/components/ams/unordered-list.tokens.json +112 -22
  103. package/style-dictionary/dimensionToString.js +25 -0
  104. package/style-dictionary/transforms/dtcg-dimension.js +30 -0
  105. package/style-dictionary/transforms/name-custom-camel.js +27 -0
  106. package/style-dictionary/transforms/name-custom-kebab.js +27 -0
  107. package/style-dictionary/transforms/shadow-dtcg-dimension-normalize.js +50 -0
package/dist/index.d.ts CHANGED
@@ -5,9 +5,9 @@
5
5
  export default tokens;
6
6
 
7
7
  declare interface DesignToken {
8
- value?: any;
9
- type?: string;
10
- comment?: string;
8
+ $value?: any;
9
+ $type?: string;
10
+ $description?: string;
11
11
  name?: string;
12
12
  themeable?: boolean;
13
13
  attributes?: Record<string, unknown>;
@@ -61,6 +61,11 @@ declare const tokens: {
61
61
  purple: DesignToken;
62
62
  yellow: DesignToken;
63
63
  };
64
+ progress: {
65
+ current: DesignToken;
66
+ completed: DesignToken;
67
+ upcoming: DesignToken;
68
+ };
64
69
  separator: DesignToken;
65
70
  text: {
66
71
  default: DesignToken;
@@ -310,6 +315,7 @@ declare const tokens: {
310
315
  "font-family": DesignToken;
311
316
  "font-size": DesignToken;
312
317
  "font-weight": DesignToken;
318
+ gap: DesignToken;
313
319
  "line-height": DesignToken;
314
320
  "padding-inline": DesignToken;
315
321
  azure: {
@@ -596,14 +602,14 @@ declare const tokens: {
596
602
  };
597
603
  "date-input": {
598
604
  disabled: {
605
+ "calendar-picker-indicator": {
606
+ "background-image": DesignToken;
607
+ };
599
608
  "calender-picker-indicator": {
600
609
  "background-image": DesignToken;
601
610
  };
602
611
  color: DesignToken;
603
612
  cursor: DesignToken;
604
- "calendar-picker-indicator": {
605
- "background-image": DesignToken;
606
- };
607
613
  };
608
614
  hover: {
609
615
  "calender-picker-indicator": {
@@ -654,11 +660,16 @@ declare const tokens: {
654
660
  };
655
661
  term: {
656
662
  "font-weight": DesignToken;
663
+ "margin-block-end": DesignToken;
657
664
  };
658
665
  description: {
659
666
  "font-weight": DesignToken;
667
+ "margin-block-end": DesignToken;
660
668
  "padding-inline-start": DesignToken;
661
669
  };
670
+ section: {
671
+ "margin-block-end": DesignToken;
672
+ };
662
673
  narrow: {
663
674
  "grid-template-columns": DesignToken;
664
675
  };
@@ -672,8 +683,10 @@ declare const tokens: {
672
683
  dialog: {
673
684
  "background-color": DesignToken;
674
685
  "border-color": DesignToken;
686
+ "border-radius": DesignToken;
675
687
  "border-style": DesignToken;
676
688
  "border-width": DesignToken;
689
+ "box-shadow": DesignToken;
677
690
  gap: DesignToken;
678
691
  "inline-size": DesignToken;
679
692
  "max-block-size": DesignToken;
@@ -991,6 +1004,9 @@ declare const tokens: {
991
1004
  };
992
1005
  };
993
1006
  };
1007
+ figure: {
1008
+ "margin-block-end": DesignToken;
1009
+ };
994
1010
  };
995
1011
  image: {
996
1012
  "aspect-ratio": DesignToken;
@@ -1222,12 +1238,19 @@ declare const tokens: {
1222
1238
  "mega-menu": {
1223
1239
  "padding-block": DesignToken;
1224
1240
  button: {
1241
+ "background-color": DesignToken;
1242
+ color: DesignToken;
1225
1243
  cursor: DesignToken;
1226
1244
  label: {
1227
1245
  open: {
1228
1246
  "font-weight": DesignToken;
1229
1247
  };
1230
1248
  };
1249
+ "padding-inline": DesignToken;
1250
+ hover: {
1251
+ "background-color": DesignToken;
1252
+ color: DesignToken;
1253
+ };
1231
1254
  };
1232
1255
  };
1233
1256
  menu: {
@@ -1247,6 +1270,7 @@ declare const tokens: {
1247
1270
  };
1248
1271
  };
1249
1272
  link: {
1273
+ color: DesignToken;
1250
1274
  gap: DesignToken;
1251
1275
  "text-decoration-line": DesignToken;
1252
1276
  "text-decoration-thickness": DesignToken;
@@ -1354,6 +1378,147 @@ declare const tokens: {
1354
1378
  color: DesignToken;
1355
1379
  };
1356
1380
  };
1381
+ "progress-list": {
1382
+ "heading-2": {
1383
+ step: {
1384
+ marker: {
1385
+ "block-size": DesignToken;
1386
+ "margin-block-start": DesignToken;
1387
+ };
1388
+ };
1389
+ };
1390
+ "heading-3": {
1391
+ step: {
1392
+ marker: {
1393
+ "block-size": DesignToken;
1394
+ "margin-block-start": DesignToken;
1395
+ };
1396
+ };
1397
+ };
1398
+ "heading-4": {
1399
+ step: {
1400
+ marker: {
1401
+ "block-size": DesignToken;
1402
+ "margin-block-start": DesignToken;
1403
+ };
1404
+ };
1405
+ };
1406
+ step: {
1407
+ gap: DesignToken;
1408
+ medium: {
1409
+ gap: DesignToken;
1410
+ };
1411
+ marker: {
1412
+ shape: {
1413
+ "block-size": DesignToken;
1414
+ "background-color": DesignToken;
1415
+ "border-color": DesignToken;
1416
+ "border-style": DesignToken;
1417
+ "border-width": DesignToken;
1418
+ "outline-color": DesignToken;
1419
+ "outline-style": DesignToken;
1420
+ "outline-width": DesignToken;
1421
+ };
1422
+ };
1423
+ connector: {
1424
+ "border-inline-color": DesignToken;
1425
+ "border-inline-style": DesignToken;
1426
+ "border-inline-width": DesignToken;
1427
+ };
1428
+ heading: {
1429
+ "margin-block-end": DesignToken;
1430
+ };
1431
+ content: {
1432
+ "margin-block-end": DesignToken;
1433
+ };
1434
+ completed: {
1435
+ marker: {
1436
+ shape: {
1437
+ "background-color": DesignToken;
1438
+ "border-color": DesignToken;
1439
+ };
1440
+ };
1441
+ connector: {
1442
+ "border-inline-color": DesignToken;
1443
+ "border-inline-style": DesignToken;
1444
+ };
1445
+ };
1446
+ current: {
1447
+ marker: {
1448
+ shape: {
1449
+ "background-color": DesignToken;
1450
+ "border-color": DesignToken;
1451
+ };
1452
+ };
1453
+ connector: {
1454
+ "border-inline-color": DesignToken;
1455
+ };
1456
+ };
1457
+ };
1458
+ substeps: {
1459
+ "padding-block-start": DesignToken;
1460
+ step: {
1461
+ indicator: {
1462
+ "margin-inline-end": DesignToken;
1463
+ medium: {
1464
+ "margin-inline-end": DesignToken;
1465
+ };
1466
+ };
1467
+ marker: {
1468
+ "block-size": DesignToken;
1469
+ "inline-size": DesignToken;
1470
+ shape: {
1471
+ "block-size": DesignToken;
1472
+ "background-color": DesignToken;
1473
+ "border-color": DesignToken;
1474
+ "border-style": DesignToken;
1475
+ "border-width": DesignToken;
1476
+ "outline-color": DesignToken;
1477
+ "outline-style": DesignToken;
1478
+ "outline-width": DesignToken;
1479
+ };
1480
+ };
1481
+ connector: {
1482
+ "background-color": DesignToken;
1483
+ "border-inline-color": DesignToken;
1484
+ "border-inline-style": DesignToken;
1485
+ "border-inline-width": DesignToken;
1486
+ "margin-block-start": DesignToken;
1487
+ "last-child": {
1488
+ "border-inline-color": DesignToken;
1489
+ };
1490
+ };
1491
+ content: {
1492
+ "margin-block-end": DesignToken;
1493
+ };
1494
+ completed: {
1495
+ marker: {
1496
+ shape: {
1497
+ "background-color": DesignToken;
1498
+ "border-color": DesignToken;
1499
+ };
1500
+ };
1501
+ connector: {
1502
+ "border-inline-color": DesignToken;
1503
+ "border-inline-style": DesignToken;
1504
+ };
1505
+ };
1506
+ current: {
1507
+ marker: {
1508
+ shape: {
1509
+ "background-color": DesignToken;
1510
+ "border-color": DesignToken;
1511
+ };
1512
+ };
1513
+ };
1514
+ };
1515
+ "last-child": {
1516
+ content: {
1517
+ "margin-block-end": DesignToken;
1518
+ };
1519
+ };
1520
+ };
1521
+ };
1357
1522
  radio: {
1358
1523
  color: DesignToken;
1359
1524
  cursor: DesignToken;
@@ -1749,14 +1914,14 @@ declare const tokens: {
1749
1914
  };
1750
1915
  "time-input": {
1751
1916
  disabled: {
1917
+ "calendar-picker-indicator": {
1918
+ "background-image": DesignToken;
1919
+ };
1752
1920
  "calender-picker-indicator": {
1753
1921
  "background-image": DesignToken;
1754
1922
  };
1755
1923
  color: DesignToken;
1756
1924
  cursor: DesignToken;
1757
- "calendar-picker-indicator": {
1758
- "background-image": DesignToken;
1759
- };
1760
1925
  };
1761
1926
  hover: {
1762
1927
  "calender-picker-indicator": {