@amsterdam/design-system-tokens 0.14.0 → 0.16.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 (98) hide show
  1. package/CHANGELOG.md +100 -0
  2. package/LICENSE.md +2 -2
  3. package/README.md +18 -11
  4. package/build.js +39 -16
  5. package/dist/compact.css +18 -18
  6. package/dist/compact.d.ts +18 -12
  7. package/dist/compact.json +21 -15
  8. package/dist/compact.mjs +21 -22
  9. package/dist/compact.scss +18 -18
  10. package/dist/compact.theme.css +18 -18
  11. package/dist/index.css +788 -780
  12. package/dist/index.d.ts +414 -410
  13. package/dist/index.json +700 -696
  14. package/dist/index.mjs +609 -585
  15. package/dist/index.scss +788 -780
  16. package/dist/index.theme.css +788 -780
  17. package/package.json +5 -4
  18. package/src/brand/ams/aspect-ratio.tokens.json +6 -6
  19. package/src/brand/ams/border.tokens.json +3 -3
  20. package/src/brand/ams/color.tokens.json +34 -15
  21. package/src/brand/ams/cursor.tokens.json +8 -0
  22. package/src/brand/ams/space.compact.tokens.json +6 -15
  23. package/src/brand/ams/space.tokens.json +5 -14
  24. package/src/brand/ams/{text.compact.tokens.json → typography.compact.tokens.json} +14 -2
  25. package/src/brand/ams/typography.tokens.json +60 -0
  26. package/src/common/ams/links.tokens.json +32 -0
  27. package/src/components/ams/accordion.tokens.json +12 -12
  28. package/src/components/ams/action-group.tokens.json +1 -1
  29. package/src/components/ams/alert.tokens.json +27 -15
  30. package/src/components/ams/avatar.tokens.json +23 -53
  31. package/src/components/ams/badge.tokens.json +22 -48
  32. package/src/components/ams/blockquote.tokens.json +8 -6
  33. package/src/components/ams/breadcrumb.tokens.json +10 -10
  34. package/src/components/ams/button.tokens.json +31 -33
  35. package/src/components/ams/card.tokens.json +14 -8
  36. package/src/components/ams/character-count.tokens.json +6 -6
  37. package/src/components/ams/checkbox.tokens.json +31 -29
  38. package/src/components/ams/column.tokens.json +5 -6
  39. package/src/components/ams/date-input.tokens.json +18 -16
  40. package/src/components/ams/description-list.tokens.json +21 -10
  41. package/src/components/ams/dialog.tokens.json +34 -8
  42. package/src/components/ams/error-message.tokens.json +5 -5
  43. package/src/components/ams/field-set.tokens.json +9 -8
  44. package/src/components/ams/field.tokens.json +3 -3
  45. package/src/components/ams/figure.tokens.json +9 -7
  46. package/src/components/ams/file-input.tokens.json +29 -26
  47. package/src/components/ams/file-list.tokens.json +8 -8
  48. package/src/components/ams/grid.compact.tokens.json +1 -1
  49. package/src/components/ams/grid.tokens.json +12 -10
  50. package/src/components/ams/heading.tokens.json +30 -29
  51. package/src/components/ams/hint.tokens.json +1 -1
  52. package/src/components/ams/icon-button.tokens.json +18 -16
  53. package/src/components/ams/icon.tokens.json +24 -14
  54. package/src/components/ams/image-slider.tokens.json +1 -1
  55. package/src/components/ams/image.tokens.json +1 -1
  56. package/src/components/ams/{form-error-list.tokens.json → invalid-form-alert.tokens.json} +1 -1
  57. package/src/components/ams/label.tokens.json +6 -5
  58. package/src/components/ams/link-list.tokens.json +22 -22
  59. package/src/components/ams/link.tokens.json +16 -46
  60. package/src/components/ams/logo.tokens.json +10 -7
  61. package/src/components/ams/mark.tokens.json +1 -1
  62. package/src/components/ams/ordered-list.tokens.json +13 -11
  63. package/src/components/ams/page-footer.tokens.json +36 -0
  64. package/src/components/ams/page-header.tokens.json +67 -0
  65. package/src/components/ams/page-heading.tokens.json +9 -6
  66. package/src/components/ams/page.tokens.json +8 -0
  67. package/src/components/ams/pagination.tokens.json +13 -13
  68. package/src/components/ams/paragraph.tokens.json +12 -10
  69. package/src/components/ams/password-input.tokens.json +17 -16
  70. package/src/components/ams/radio.tokens.json +30 -28
  71. package/src/components/ams/row.tokens.json +5 -6
  72. package/src/components/ams/search-field.tokens.json +17 -18
  73. package/src/components/ams/select.tokens.json +17 -16
  74. package/src/components/ams/skip-link.tokens.json +9 -9
  75. package/src/components/ams/spotlight.tokens.json +10 -10
  76. package/src/components/ams/standalone-link.tokens.json +40 -0
  77. package/src/components/ams/switch.tokens.json +7 -6
  78. package/src/components/ams/table-of-contents.tokens.json +17 -17
  79. package/src/components/ams/table.tokens.json +10 -13
  80. package/src/components/ams/tabs.tokens.json +16 -20
  81. package/src/components/ams/text-area.tokens.json +18 -18
  82. package/src/components/ams/text-input.tokens.json +17 -16
  83. package/src/components/ams/time-input.tokens.json +18 -16
  84. package/src/components/ams/unordered-list.tokens.json +15 -13
  85. package/src/brand/ams/text.tokens.json +0 -41
  86. package/src/common/ams/action.tokens.json +0 -12
  87. package/src/common/ams/hyphenation.tokens.json +0 -9
  88. package/src/common/ams/link-appearance.tokens.json +0 -43
  89. package/src/components/ams/breakout.tokens.json +0 -11
  90. package/src/components/ams/footer.tokens.json +0 -9
  91. package/src/components/ams/gap.tokens.json +0 -11
  92. package/src/components/ams/header.tokens.json +0 -56
  93. package/src/components/ams/margin.tokens.json +0 -11
  94. package/src/components/ams/mega-menu.tokens.json +0 -18
  95. package/src/components/ams/page-menu.tokens.json +0 -24
  96. package/src/components/ams/screen.tokens.json +0 -13
  97. package/src/components/ams/top-task-link.tokens.json +0 -29
  98. /package/src/{common → brand}/ams/focus.tokens.json +0 -0
@@ -1,24 +1,25 @@
1
1
  {
2
2
  "ams": {
3
3
  "switch": {
4
- "background-color": { "value": "{ams.color.neutral-grey3}" },
5
- "font-family": { "value": "{ams.text.font-family}" },
4
+ "background-color": { "value": "#767676" },
5
+ "cursor": { "value": "{ams.cursor.interactive}" },
6
6
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
7
7
  "inline-size": { "value": "3.5rem" },
8
8
  "thumb": {
9
- "background-color": { "value": "{ams.color.primary-white}" },
9
+ "background-color": { "value": "{ams.color.background}" },
10
10
  "inline-size": { "value": "1.75rem" },
11
11
  "block-size": { "value": "1.75rem" },
12
12
  "hover": {
13
13
  "box-shadow": { "value": "0 0 0 0.125rem {ams.switch.thumb.hover.color}" },
14
- "color": { "value": "{ams.color.dark-blue}" }
14
+ "color": { "value": "{ams.color.interactive.hover}" }
15
15
  }
16
16
  },
17
17
  "checked": {
18
- "background-color": { "value": "{ams.color.primary-blue}" }
18
+ "background-color": { "value": "{ams.color.interactive.default}" }
19
19
  },
20
20
  "disabled": {
21
- "background-color": { "value": "{ams.color.neutral-grey3}" }
21
+ "background-color": { "value": "{ams.color.interactive.disabled}" },
22
+ "cursor": { "value": "{ams.cursor.disabled}" }
22
23
  }
23
24
  }
24
25
  }
@@ -1,33 +1,33 @@
1
1
  {
2
2
  "ams": {
3
3
  "table-of-contents": {
4
- "font-family": { "value": "{ams.text.font-family}" },
5
- "font-size": { "value": "{ams.text.level.5.font-size}" },
6
- "font-weight": { "value": "{ams.text.font-weight.normal}" },
7
- "gap": { "value": "{ams.space.md}" },
8
- "line-height": { "value": "{ams.text.level.5.line-height}" },
4
+ "font-family": { "value": "{ams.typography.font-family}" },
5
+ "font-size": { "value": "{ams.typography.body-text.font-size}" },
6
+ "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
7
+ "gap": { "value": "{ams.space.m}" },
8
+ "line-height": { "value": "{ams.typography.body-text.line-height}" },
9
9
  "link": {
10
- "color": { "value": "{ams.link-appearance.color}" },
10
+ "color": { "value": "{ams.links.color}" },
11
11
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
- "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
13
- "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
14
- "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
12
+ "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
13
+ "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
14
+ "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
15
15
  "hover": {
16
- "color": { "value": "{ams.link-appearance.hover.color}" },
17
- "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
16
+ "color": { "value": "{ams.links.hover.color}" },
17
+ "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
18
18
  }
19
19
  },
20
20
  "list": {
21
- "gap": { "value": "{ams.space.sm}" },
21
+ "gap": { "value": "{ams.space.s}" },
22
22
  "list": {
23
- "padding-block-start": { "value": "{ams.space.sm}" },
24
- "padding-inline-start": { "value": "{ams.space.lg}" }
23
+ "padding-block-start": { "value": "{ams.space.s}" },
24
+ "padding-inline-start": { "value": "{ams.space.l}" }
25
25
  }
26
26
  },
27
27
  "heading": {
28
- "font-weight": { "value": "{ams.text.font-weight.bold}" },
29
- "font-size": { "value": "{ams.text.level.4.font-size}" },
30
- "line-height": { "value": "{ams.text.level.4.line-height}" }
28
+ "font-weight": { "value": "{ams.typography.heading.font-weight}" },
29
+ "font-size": { "value": "{ams.typography.heading.4.font-size}" },
30
+ "line-height": { "value": "{ams.typography.heading.4.line-height}" }
31
31
  }
32
32
  }
33
33
  }
@@ -1,24 +1,21 @@
1
1
  {
2
2
  "ams": {
3
3
  "table": {
4
- "color": { "value": "{ams.color.primary-black}" },
5
- "font-family": { "value": "{ams.text.font-family}" },
6
- "font-size": { "value": "{ams.text.level.5.font-size}" },
7
- "font-weight": { "value": "{ams.text.font-weight.normal}" },
8
- "line-height": { "value": "{ams.text.level.5.line-height}" },
4
+ "color": { "value": "{ams.color.text.default}" },
5
+ "font-family": { "value": "{ams.typography.font-family}" },
6
+ "font-size": { "value": "{ams.typography.body-text.font-size}" },
7
+ "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
8
+ "line-height": { "value": "{ams.typography.body-text.line-height}" },
9
9
  "caption": {
10
- "font-weight": { "value": "{ams.text.font-weight.bold}" }
10
+ "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
11
11
  },
12
12
  "cell": {
13
- "border-block-end": {
14
- "value": "{ams.border.width.sm} solid #d1d1d1",
15
- "comment": "TODO: replace with color token"
16
- },
17
- "padding-block": { "value": "{ams.space.sm}" },
18
- "padding-inline": { "value": "{ams.space.md}" }
13
+ "border-block-end": { "value": "{ams.border.width.s} solid {ams.color.separator}" },
14
+ "padding-block": { "value": "{ams.space.s}" },
15
+ "padding-inline": { "value": "{ams.space.m}" }
19
16
  },
20
17
  "header-cell": {
21
- "font-weight": { "value": "{ams.text.font-weight.bold}" }
18
+ "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
22
19
  }
23
20
  }
24
21
  }
@@ -1,35 +1,31 @@
1
1
  {
2
2
  "ams": {
3
3
  "tabs": {
4
- "gap": { "value": "{ams.space.md}" },
4
+ "gap": { "value": "{ams.space.m}" },
5
5
  "list": {
6
- "box-shadow": {
7
- "value": "inset 0 calc({ams.border.width.md} * -1) #d1d1d1",
8
- "comment": "TODO: replace with color token"
9
- }
6
+ "box-shadow": { "value": "inset 0 calc({ams.border.width.m} * -1) {ams.color.separator}" }
10
7
  },
11
8
  "button": {
12
- "color": { "value": "{ams.color.primary-blue}" },
13
- "cursor": { "value": "{ams.action.activate.cursor}" },
14
- "font-family": { "value": "{ams.text.font-family}" },
15
- "font-size": { "value": "{ams.text.level.5.font-size}" },
16
- "font-weight": { "value": "{ams.text.font-weight.normal}" },
17
- "line-height": { "value": "{ams.text.level.5.line-height}" },
9
+ "color": { "value": "{ams.color.interactive.default}" },
10
+ "cursor": { "value": "{ams.cursor.interactive}" },
11
+ "font-family": { "value": "{ams.typography.font-family}" },
12
+ "font-size": { "value": "{ams.typography.body-text.font-size}" },
13
+ "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
14
+ "line-height": { "value": "{ams.typography.body-text.line-height}" },
18
15
  "outline-offset": { "value": "-0.25rem" },
19
- "padding-block": { "value": "{ams.space.sm}" },
20
- "padding-inline": { "value": "{ams.space.md}" },
16
+ "padding-block": { "value": "{ams.space.s}" },
17
+ "padding-inline": { "value": "{ams.space.m}" },
21
18
  "hover": {
22
- "color": { "value": "{ams.color.dark-blue}" },
23
- "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.color.dark-blue}" }
19
+ "color": { "value": "{ams.color.interactive.hover}" },
20
+ "box-shadow": { "value": "inset 0 calc({ams.border.width.m} * -1)" }
24
21
  },
25
22
  "selected": {
26
- "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1) {ams.color.primary-blue}" },
27
- "color": { "value": "{ams.color.primary-blue}" },
28
- "font-weight": { "value": "{ams.text.font-weight.bold}" }
23
+ "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1)" },
24
+ "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
29
25
  },
30
26
  "disabled": {
31
- "color": { "value": "{ams.color.neutral-grey3}" },
32
- "cursor": { "value": "{ams.action.disabled.cursor}" }
27
+ "color": { "value": "{ams.color.interactive.disabled}" },
28
+ "cursor": { "value": "{ams.cursor.disabled}" }
33
29
  }
34
30
  }
35
31
  }
@@ -1,36 +1,36 @@
1
1
  {
2
2
  "ams": {
3
3
  "text-area": {
4
- "background-color": { "value": "{ams.color.primary-white}" },
5
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
6
- "color": { "value": "{ams.color.primary-black}" },
7
- "font-family": { "value": "{ams.text.font-family}" },
8
- "font-size": { "value": "{ams.text.level.5.font-size}" },
9
- "font-weight": { "value": "{ams.text.font-weight.normal}" },
10
- "line-height": { "value": "{ams.text.level.5.line-height}" },
4
+ "background-color": { "value": "{ams.color.background}" },
5
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
6
+ "color": { "value": "{ams.color.text.default}" },
7
+ "font-family": { "value": "{ams.typography.font-family}" },
8
+ "font-size": { "value": "{ams.typography.body-text.font-size}" },
9
+ "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
10
+ "line-height": { "value": "{ams.typography.body-text.line-height}" },
11
11
  "min-block-size": {
12
- "value": "calc({ams.text.level.5.line-height} * 1em + 2 * {ams.text-area.padding-block})"
12
+ "value": "calc({ams.typography.body-text.line-height} * 1em + 2 * {ams.text-area.padding-block})"
13
13
  },
14
14
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
15
- "padding-block": { "value": "{ams.space.sm}" },
16
- "padding-inline": { "value": "{ams.space.md}" },
15
+ "padding-block": { "value": "{ams.space.s}" },
16
+ "padding-inline": { "value": "{ams.space.m}" },
17
17
  "disabled": {
18
- "background-color": { "value": "{ams.color.primary-white}" },
19
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" },
20
- "color": { "value": "{ams.color.neutral-grey3}" },
21
- "cursor": { "value": "{ams.action.disabled.cursor}" }
18
+ "background-color": { "value": "{ams.color.background}" },
19
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
20
+ "color": { "value": "{ams.color.interactive.disabled}" },
21
+ "cursor": { "value": "{ams.cursor.disabled}" }
22
22
  },
23
23
  "hover": {
24
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" }
24
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
25
25
  },
26
26
  "invalid": {
27
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
27
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
28
28
  "hover": {
29
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
29
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
30
30
  }
31
31
  },
32
32
  "placeholder": {
33
- "color": { "value": "{ams.color.neutral-grey3}" }
33
+ "color": { "value": "{ams.color.text.secondary}" }
34
34
  }
35
35
  }
36
36
  }
@@ -1,32 +1,33 @@
1
1
  {
2
2
  "ams": {
3
3
  "text-input": {
4
- "background-color": { "value": "{ams.color.primary-white}" },
5
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
6
- "color": { "value": "{ams.color.primary-black}" },
7
- "font-family": { "value": "{ams.text.font-family}" },
8
- "font-size": { "value": "{ams.text.level.5.font-size}" },
9
- "font-weight": { "value": "{ams.text.font-weight.normal}" },
10
- "line-height": { "value": "{ams.text.level.5.line-height}" },
4
+ "background-color": { "value": "{ams.color.background}" },
5
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
6
+ "color": { "value": "{ams.color.text.default}" },
7
+ "font-family": { "value": "{ams.typography.font-family}" },
8
+ "font-size": { "value": "{ams.typography.body-text.font-size}" },
9
+ "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
10
+ "line-height": { "value": "{ams.typography.body-text.line-height}" },
11
11
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
- "padding-block": { "value": "{ams.space.sm}" },
13
- "padding-inline": { "value": "{ams.space.md}" },
12
+ "padding-block": { "value": "{ams.space.s}" },
13
+ "padding-inline": { "value": "{ams.space.m}" },
14
14
  "disabled": {
15
- "background-color": { "value": "{ams.color.primary-white}" },
16
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" },
17
- "color": { "value": "{ams.color.neutral-grey3}" }
15
+ "background-color": { "value": "{ams.color.background}" },
16
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
17
+ "color": { "value": "{ams.color.interactive.disabled}" },
18
+ "cursor": { "value": "{ams.cursor.disabled}" }
18
19
  },
19
20
  "hover": {
20
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" }
21
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
21
22
  },
22
23
  "invalid": {
23
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
24
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
24
25
  "hover": {
25
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
26
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
26
27
  }
27
28
  },
28
29
  "placeholder": {
29
- "color": { "value": "{ams.color.neutral-grey3}" }
30
+ "color": { "value": "{ams.color.text.secondary}" }
30
31
  }
31
32
  }
32
33
  }
@@ -1,25 +1,27 @@
1
1
  {
2
2
  "ams": {
3
3
  "time-input": {
4
- "background-color": { "value": "{ams.color.primary-white}" },
5
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
6
- "color": { "value": "{ams.color.primary-black}" },
7
- "font-family": { "value": "{ams.text.font-family}" },
8
- "font-size": { "value": "{ams.text.level.5.font-size}" },
9
- "font-weight": { "value": "{ams.text.font-weight.normal}" },
10
- "line-height": { "value": "{ams.text.level.5.line-height}" },
4
+ "background-color": { "value": "{ams.color.background}" },
5
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
6
+ "color": { "value": "{ams.color.text.default}" },
7
+ "font-family": { "value": "{ams.typography.font-family}" },
8
+ "font-size": { "value": "{ams.typography.body-text.font-size}" },
9
+ "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
10
+ "line-height": { "value": "{ams.typography.body-text.line-height}" },
11
11
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
- "padding-block": { "value": "{ams.space.sm}" },
13
- "padding-inline": { "value": "{ams.space.md}" },
12
+ "padding-block": { "value": "{ams.space.s}" },
13
+ "padding-inline": { "value": "{ams.space.m}" },
14
14
  "calender-picker-indicator": {
15
15
  "background-image": {
16
16
  "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
17
- }
17
+ },
18
+ "cursor": { "value": "{ams.cursor.interactive}" }
18
19
  },
19
20
  "disabled": {
20
- "background-color": { "value": "{ams.color.primary-white}" },
21
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" },
22
- "color": { "value": "{ams.color.neutral-grey3}" },
21
+ "background-color": { "value": "{ams.color.background}" },
22
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
23
+ "color": { "value": "{ams.color.interactive.disabled}" },
24
+ "cursor": { "value": "{ams.cursor.disabled}" },
23
25
  "calender-picker-indicator": {
24
26
  "background-image": {
25
27
  "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23BEBEBE'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
@@ -27,7 +29,7 @@
27
29
  }
28
30
  },
29
31
  "hover": {
30
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}" },
32
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" },
31
33
  "calender-picker-indicator": {
32
34
  "background-image": {
33
35
  "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
@@ -35,9 +37,9 @@
35
37
  }
36
38
  },
37
39
  "invalid": {
38
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-red}" },
40
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
39
41
  "hover": {
40
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-red}" }
42
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
41
43
  }
42
44
  }
43
45
  }
@@ -1,14 +1,20 @@
1
1
  {
2
2
  "ams": {
3
3
  "unordered-list": {
4
- "color": { "value": "{ams.color.primary-black}" },
5
- "font-family": { "value": "{ams.text.font-family}" },
6
- "font-size": { "value": "{ams.text.level.5.font-size}" },
7
- "font-weight": { "value": "{ams.text.font-weight.normal}" },
8
- "gap": { "value": "{ams.space.md}" },
9
- "inverse-color": { "value": "{ams.color.primary-white}" },
10
- "line-height": { "value": "{ams.text.level.5.line-height}" },
4
+ "color": { "value": "{ams.color.text.default}" },
5
+ "font-family": { "value": "{ams.typography.font-family}" },
6
+ "font-size": { "value": "{ams.typography.body-text.font-size}" },
7
+ "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
8
+ "gap": { "value": "{ams.space.m}" },
9
+ "line-height": { "value": "{ams.typography.body-text.line-height}" },
11
10
  "list-style-type": { "value": "'\\2022'" },
11
+ "inverse": {
12
+ "color": { "value": "{ams.color.text.inverse}" }
13
+ },
14
+ "small": {
15
+ "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
16
+ "line-height": { "value": "{ams.typography.body-text.small.line-height}" }
17
+ },
12
18
  "item": {
13
19
  "margin-inline-start": {
14
20
  "value": "1.625rem",
@@ -20,10 +26,10 @@
20
26
  }
21
27
  },
22
28
  "unordered-list": {
23
- "gap": { "value": "{ams.space.sm}" },
29
+ "gap": { "value": "{ams.space.s}" },
24
30
  "list-style-type": { "value": "'\\2013'" },
25
31
  "padding-block-end": { "value": "0" },
26
- "padding-block-start": { "value": "{ams.space.sm}" },
32
+ "padding-block-start": { "value": "{ams.space.s}" },
27
33
  "item": {
28
34
  "margin-inline-start": {
29
35
  "value": "0.875rem",
@@ -34,10 +40,6 @@
34
40
  "comment": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem."
35
41
  }
36
42
  }
37
- },
38
- "small": {
39
- "font-size": { "value": "{ams.text.level.6.font-size}" },
40
- "line-height": { "value": "{ams.text.level.6.line-height}" }
41
43
  }
42
44
  }
43
45
  }
@@ -1,41 +0,0 @@
1
- {
2
- "ams": {
3
- "text": {
4
- "font-family": { "value": "'Amsterdam Sans', Arial, sans-serif" },
5
- "font-weight": {
6
- "normal": { "value": 400 },
7
- "bold": { "value": 800 }
8
- },
9
- "level": {
10
- "0": {
11
- "font-size": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" },
12
- "line-height": { "value": "1.15" }
13
- },
14
- "1": {
15
- "font-size": { "value": "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)" },
16
- "line-height": { "value": "1.2" }
17
- },
18
- "2": {
19
- "font-size": { "value": "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)" },
20
- "line-height": { "value": "1.25" }
21
- },
22
- "3": {
23
- "font-size": { "value": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)" },
24
- "line-height": { "value": "1.3" }
25
- },
26
- "4": {
27
- "font-size": { "value": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)" },
28
- "line-height": { "value": "1.5" }
29
- },
30
- "5": {
31
- "font-size": { "value": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)" },
32
- "line-height": { "value": "1.6" }
33
- },
34
- "6": {
35
- "font-size": { "value": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)" },
36
- "line-height": { "value": "1.6" }
37
- }
38
- }
39
- }
40
- }
41
- }
@@ -1,12 +0,0 @@
1
- {
2
- "ams": {
3
- "action": {
4
- "activate": { "cursor": { "value": "pointer" } },
5
- "busy": { "cursor": { "value": "wait" } },
6
- "disabled": { "cursor": { "value": "not-allowed" } },
7
- "inert": { "cursor": { "value": "default" } },
8
- "navigate": { "cursor": { "value": "pointer" } },
9
- "submit": { "cursor": { "value": "pointer" } }
10
- }
11
- }
12
- }
@@ -1,9 +0,0 @@
1
- {
2
- "ams": {
3
- "hyphenation": {
4
- "hyphenate-limit-chars": { "value": "12 8 4" },
5
- "hyphens": { "value": "auto" },
6
- "overflow-wrap": { "value": "break-word" }
7
- }
8
- }
9
- }
@@ -1,43 +0,0 @@
1
- {
2
- "ams": {
3
- "link-appearance": {
4
- "color": { "value": "{ams.color.primary-blue}" },
5
- "text-decoration-thickness": { "value": "{ams.border.width.md}" },
6
- "text-underline-offset": { "value": "0.3333em" },
7
- "hover": {
8
- "color": { "value": "{ams.color.dark-blue}" }
9
- },
10
- "regular": {
11
- "text-decoration-line": { "value": "underline" },
12
- "hover": {
13
- "text-decoration-thickness": { "value": "{ams.border.width.lg}" },
14
- "text-underline-offset": { "value": "0.2778em" }
15
- }
16
- },
17
- "subtle": {
18
- "text-decoration-line": { "value": "none" },
19
- "hover": {
20
- "text-decoration-line": { "value": "underline" }
21
- }
22
- },
23
- "contrast": {
24
- "color": { "value": "{ams.color.primary-black}" },
25
- "hover": {
26
- "color": { "value": "{ams.color.primary-black}" }
27
- },
28
- "visited": {
29
- "color": { "value": "{ams.color.primary-black}" }
30
- }
31
- },
32
- "inverse": {
33
- "color": { "value": "{ams.color.primary-white}" },
34
- "hover": {
35
- "color": { "value": "{ams.color.primary-white}" }
36
- },
37
- "visited": {
38
- "color": { "value": "{ams.color.primary-white}" }
39
- }
40
- }
41
- }
42
- }
43
- }
@@ -1,11 +0,0 @@
1
- {
2
- "ams": {
3
- "breakout": {
4
- "row-gap": {
5
- "sm": { "value": "{ams.space.grid.sm}" },
6
- "md": { "value": "{ams.space.grid.md}" },
7
- "lg": { "value": "{ams.space.grid.lg}" }
8
- }
9
- }
10
- }
11
- }
@@ -1,9 +0,0 @@
1
- {
2
- "ams": {
3
- "footer": {
4
- "top": {
5
- "background-color": { "value": "{ams.color.primary-blue}" }
6
- }
7
- }
8
- }
9
- }
@@ -1,11 +0,0 @@
1
- {
2
- "ams": {
3
- "gap": {
4
- "xs": { "value": "{ams.space.grid.xs}" },
5
- "sm": { "value": "{ams.space.grid.sm}" },
6
- "md": { "value": "{ams.space.grid.md}" },
7
- "lg": { "value": "{ams.space.grid.lg}" },
8
- "xl": { "value": "{ams.space.grid.xl}" }
9
- }
10
- }
11
- }
@@ -1,56 +0,0 @@
1
- {
2
- "ams": {
3
- "header": {
4
- "padding-block": { "value": "{ams.space.grid.sm}" },
5
- "padding-inline": {
6
- "value": "{ams.grid.padding-inline}",
7
- "comment": "Must be the Grid inline padding, to make sure Header and Grid line up"
8
- },
9
- "branding": {
10
- "column-gap": { "value": "{ams.space.md}" },
11
- "row-gap": { "value": "{ams.space.grid.xs}" }
12
- },
13
- "logo-link": {
14
- "outline-offset": { "value": "{ams.focus.outline-offset}" }
15
- },
16
- "mega-menu": {
17
- "button": {
18
- "label": {
19
- "open": {
20
- "font-weight": { "value": "{ams.text.font-weight.bold}" }
21
- }
22
- }
23
- }
24
- },
25
- "menu": {
26
- "column-gap": { "value": "{ams.space.lg}" },
27
- "row-gap": { "value": "{ams.space.xs}" },
28
- "item": {
29
- "color": { "value": "{ams.link-appearance.color}" },
30
- "column-gap": { "value": "{ams.space.xs}" },
31
- "font-family": { "value": "{ams.text.font-family}" },
32
- "font-size": { "value": "{ams.text.level.5.font-size}" },
33
- "font-weight": { "value": "{ams.text.font-weight.normal}" },
34
- "line-height": { "value": "{ams.text.level.5.line-height}" },
35
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
36
- "padding-block": { "value": "{ams.space.xs}" },
37
- "hover": {
38
- "color": { "value": "{ams.link-appearance.hover.color}" }
39
- }
40
- },
41
- "link": {
42
- "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
43
- "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
44
- "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
45
- "hover": {
46
- "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
47
- }
48
- }
49
- },
50
- "navigation": {
51
- "column-gap": { "value": "{ams.space.lg}" },
52
- "row-gap": { "value": "{ams.space.grid.md}" }
53
- }
54
- }
55
- }
56
- }
@@ -1,11 +0,0 @@
1
- {
2
- "ams": {
3
- "margin": {
4
- "xs": { "value": "{ams.space.grid.xs}" },
5
- "sm": { "value": "{ams.space.grid.sm}" },
6
- "md": { "value": "{ams.space.grid.md}" },
7
- "lg": { "value": "{ams.space.grid.lg}" },
8
- "xl": { "value": "{ams.space.grid.xl}" }
9
- }
10
- }
11
- }