@amsterdam/design-system-tokens 3.1.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 +10 -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 +59 -47
  10. package/dist/index.d.ts +21 -3
  11. package/dist/index.json +41 -23
  12. package/dist/index.mjs +89 -66
  13. package/dist/index.scss +59 -47
  14. package/dist/index.theme.css +59 -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 +104 -26
  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 -22
  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 +10 -10
  47. package/src/components/ams/date-input.tokens.json +93 -21
  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 +172 -55
  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 +10 -10
  101. package/src/components/ams/time-input.tokens.json +91 -21
  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/src/components/ams/image-slider.tokens.json CHANGED
@@ -1,23 +1,73 @@
1
1
  {
2
2
  "ams": {
3
3
  "image-slider": {
4
- "gap": { "value": "{ams.space.xs}" },
4
+ "gap": {
5
+ "$value": "{ams.space.xs}",
6
+ "$type": "dimension",
7
+ "$extensions": {
8
+ "nl.amsterdam.subtype": "space"
9
+ }
10
+ },
5
11
  "scroller": {
6
- "gap": { "value": "{ams.space.xs}" },
7
- "outline-offset": { "value": "{ams.focus.outline-offset}" }
12
+ "gap": {
13
+ "$value": "{ams.space.xs}",
14
+ "$type": "dimension",
15
+ "$extensions": {
16
+ "nl.amsterdam.subtype": "space"
17
+ }
18
+ },
19
+ "outline-offset": {
20
+ "$value": "{ams.focus.outline-offset}",
21
+ "$type": "dimension",
22
+ "$extensions": {
23
+ "nl.amsterdam.subtype": "space"
24
+ }
25
+ }
8
26
  },
9
27
  "thumbnails": {
10
- "gap": { "value": "{ams.space.xs}" },
28
+ "gap": {
29
+ "$value": "{ams.space.xs}",
30
+ "$type": "dimension",
31
+ "$extensions": {
32
+ "nl.amsterdam.subtype": "space"
33
+ }
34
+ },
11
35
  "thumbnail": {
12
- "background-color": { "value": "transparent" },
13
- "cursor": { "value": "{ams.cursor.interactive}" },
14
- "opacity": { "value": "40%" },
15
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
36
+ "background-color": {
37
+ "$value": "transparent",
38
+ "$type": "color"
39
+ },
40
+ "cursor": {
41
+ "$value": "{ams.cursor.interactive}"
42
+ },
43
+ "opacity": {
44
+ "$value": "40%"
45
+ },
46
+ "outline-offset": {
47
+ "$value": "{ams.focus.outline-offset}",
48
+ "$type": "dimension",
49
+ "$extensions": {
50
+ "nl.amsterdam.subtype": "space"
51
+ }
52
+ },
16
53
  "in-view": {
17
- "opacity": { "value": "100%" }
54
+ "opacity": {
55
+ "$value": "100%"
56
+ }
18
57
  },
19
58
  "hover": {
20
- "opacity": { "value": "100%" }
59
+ "opacity": {
60
+ "$value": "100%"
61
+ }
62
+ }
63
+ }
64
+ },
65
+ "figure": {
66
+ "margin-block-end": {
67
+ "$value": "{ams.space.m}",
68
+ "$type": "dimension",
69
+ "$extensions": {
70
+ "nl.amsterdam.subtype": "space"
21
71
  }
22
72
  }
23
73
  }
package/src/components/ams/image.tokens.json CHANGED
@@ -1,7 +1,9 @@
1
1
  {
2
2
  "ams": {
3
3
  "image": {
4
- "aspect-ratio": { "value": "{ams.aspect-ratio.16-9}" }
4
+ "aspect-ratio": {
5
+ "$value": "{ams.aspect-ratio.16-9}"
6
+ }
5
7
  }
6
8
  }
7
9
  }
package/src/components/ams/invalid-form-alert.tokens.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "ams": {
3
3
  "invalid-form-alert": {
4
- "outline-offset": { "value": "{ams.focus.outline-offset}" }
4
+ "outline-offset": {
5
+ "$value": "{ams.focus.outline-offset}",
6
+ "$type": "dimension",
7
+ "$extensions": {
8
+ "nl.amsterdam.subtype": "space"
9
+ }
10
+ }
5
11
  }
6
12
  }
7
13
  }
package/src/components/ams/label.tokens.json CHANGED
@@ -1,14 +1,38 @@
1
1
  {
2
2
  "ams": {
3
3
  "label": {
4
- "color": { "value": "{ams.color.text.default}" },
5
- "font-family": { "value": "{ams.typography.font-family}" },
6
- "font-size": { "value": "{ams.typography.heading.3.font-size}" },
7
- "font-weight": { "value": "{ams.typography.heading.font-weight}" },
8
- "line-height": { "value": "{ams.typography.heading.3.line-height}" },
9
- "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
4
+ "color": {
5
+ "$value": "{ams.color.text.default}",
6
+ "$type": "color"
7
+ },
8
+ "font-family": {
9
+ "$value": "{ams.typography.font-family}",
10
+ "$type": "fontFamily"
11
+ },
12
+ "font-size": {
13
+ "$value": "{ams.typography.heading.3.font-size}",
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "fontSize"
16
+ }
17
+ },
18
+ "font-weight": {
19
+ "$value": "{ams.typography.heading.font-weight}",
20
+ "$type": "fontWeight"
21
+ },
22
+ "line-height": {
23
+ "$value": "{ams.typography.heading.3.line-height}",
24
+ "$extensions": {
25
+ "nl.amsterdam.type": "lineHeight"
26
+ }
27
+ },
28
+ "text-wrap": {
29
+ "$value": "{ams.typography.heading.text-wrap}"
30
+ },
10
31
  "in-fieldset": {
11
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
32
+ "font-weight": {
33
+ "$value": "{ams.typography.body-text.font-weight}",
34
+ "$type": "fontWeight"
35
+ }
12
36
  }
13
37
  }
14
38
  }
package/src/components/ams/link-list.tokens.json CHANGED
@@ -1,40 +1,125 @@
1
1
  {
2
2
  "ams": {
3
3
  "link-list": {
4
- "gap": { "value": "{ams.space.s}" },
4
+ "gap": {
5
+ "$value": "{ams.space.s}",
6
+ "$type": "dimension",
7
+ "$extensions": {
8
+ "nl.amsterdam.subtype": "space"
9
+ }
10
+ },
5
11
  "link": {
6
- "color": { "value": "{ams.links.color}" },
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
- "gap": { "value": "{ams.space.s}" },
11
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
12
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
13
- "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
14
- "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
15
- "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
12
+ "color": {
13
+ "$value": "{ams.links.color}",
14
+ "$type": "color"
15
+ },
16
+ "font-family": {
17
+ "$value": "{ams.typography.font-family}",
18
+ "$type": "fontFamily"
19
+ },
20
+ "font-size": {
21
+ "$value": "{ams.typography.body-text.font-size}",
22
+ "$extensions": {
23
+ "nl.amsterdam.type": "fontSize"
24
+ }
25
+ },
26
+ "font-weight": {
27
+ "$value": "{ams.typography.body-text.font-weight}",
28
+ "$type": "fontWeight"
29
+ },
30
+ "gap": {
31
+ "$value": "{ams.space.s}",
32
+ "$type": "dimension",
33
+ "$extensions": {
34
+ "nl.amsterdam.subtype": "space"
35
+ }
36
+ },
37
+ "line-height": {
38
+ "$value": "{ams.typography.body-text.line-height}",
39
+ "$extensions": {
40
+ "nl.amsterdam.type": "lineHeight"
41
+ }
42
+ },
43
+ "outline-offset": {
44
+ "$value": "{ams.focus.outline-offset}",
45
+ "$type": "dimension",
46
+ "$extensions": {
47
+ "nl.amsterdam.subtype": "space"
48
+ }
49
+ },
50
+ "text-decoration-line": {
51
+ "$value": "{ams.links.subtle.text-decoration-line}"
52
+ },
53
+ "text-decoration-thickness": {
54
+ "$value": "{ams.links.text-decoration-thickness}",
55
+ "$type": "dimension"
56
+ },
57
+ "text-underline-offset": {
58
+ "$value": "{ams.links.text-underline-offset}",
59
+ "$type": "dimension",
60
+ "$extensions": {
61
+ "nl.amsterdam.subtype": "space"
62
+ }
63
+ },
16
64
  "small": {
17
- "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
18
- "line-height": { "value": "{ams.typography.body-text.small.line-height}" }
65
+ "font-size": {
66
+ "$value": "{ams.typography.body-text.small.font-size}",
67
+ "$extensions": {
68
+ "nl.amsterdam.type": "fontSize"
69
+ }
70
+ },
71
+ "line-height": {
72
+ "$value": "{ams.typography.body-text.small.line-height}",
73
+ "$extensions": {
74
+ "nl.amsterdam.type": "lineHeight"
75
+ }
76
+ }
19
77
  },
20
78
  "large": {
21
- "font-size": { "value": "{ams.typography.body-text.large.font-size}" },
22
- "line-height": { "value": "{ams.typography.body-text.large.line-height}" }
79
+ "font-size": {
80
+ "$value": "{ams.typography.body-text.large.font-size}",
81
+ "$extensions": {
82
+ "nl.amsterdam.type": "fontSize"
83
+ }
84
+ },
85
+ "line-height": {
86
+ "$value": "{ams.typography.body-text.large.line-height}",
87
+ "$extensions": {
88
+ "nl.amsterdam.type": "lineHeight"
89
+ }
90
+ }
23
91
  },
24
92
  "hover": {
25
- "color": { "value": "{ams.links.hover.color}" },
26
- "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
93
+ "color": {
94
+ "$value": "{ams.links.hover.color}",
95
+ "$type": "color"
96
+ },
97
+ "text-decoration-line": {
98
+ "$value": "{ams.links.subtle.hover.text-decoration-line}"
99
+ }
27
100
  },
28
101
  "contrast": {
29
- "color": { "value": "{ams.links.contrast.color}" },
102
+ "color": {
103
+ "$value": "{ams.links.contrast.color}",
104
+ "$type": "color"
105
+ },
30
106
  "hover": {
31
- "color": { "value": "{ams.links.contrast.hover.color}" }
107
+ "color": {
108
+ "$value": "{ams.links.contrast.hover.color}",
109
+ "$type": "color"
110
+ }
32
111
  }
33
112
  },
34
113
  "inverse": {
35
- "color": { "value": "{ams.links.inverse.color}" },
114
+ "color": {
115
+ "$value": "{ams.links.inverse.color}",
116
+ "$type": "color"
117
+ },
36
118
  "hover": {
37
- "color": { "value": "{ams.links.inverse.hover.color}" }
119
+ "color": {
120
+ "$value": "{ams.links.inverse.hover.color}",
121
+ "$type": "color"
122
+ }
38
123
  }
39
124
  }
40
125
  }
package/src/components/ams/link.tokens.json CHANGED
@@ -1,29 +1,87 @@
1
1
  {
2
2
  "ams": {
3
3
  "link": {
4
- "color": { "value": "{ams.links.color}" },
5
- "font-family": { "value": "inherit" },
6
- "font-size": { "value": "inherit" },
7
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
8
- "line-height": { "value": "inherit" },
9
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
10
- "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
11
- "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
4
+ "color": {
5
+ "$value": "{ams.links.color}",
6
+ "$type": "color"
7
+ },
8
+ "font-family": {
9
+ "$value": "inherit",
10
+ "$type": "fontFamily"
11
+ },
12
+ "font-size": {
13
+ "$value": "inherit",
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "fontSize"
16
+ }
17
+ },
18
+ "font-weight": {
19
+ "$value": "{ams.typography.body-text.font-weight}",
20
+ "$type": "fontWeight"
21
+ },
22
+ "line-height": {
23
+ "$value": "inherit",
24
+ "$extensions": {
25
+ "nl.amsterdam.type": "lineHeight"
26
+ }
27
+ },
28
+ "outline-offset": {
29
+ "$value": "{ams.focus.outline-offset}",
30
+ "$type": "dimension",
31
+ "$extensions": {
32
+ "nl.amsterdam.subtype": "space"
33
+ }
34
+ },
35
+ "text-decoration-thickness": {
36
+ "$value": "{ams.links.text-decoration-thickness}",
37
+ "$type": "dimension"
38
+ },
39
+ "text-underline-offset": {
40
+ "$value": "{ams.links.text-underline-offset}",
41
+ "$type": "dimension",
42
+ "$extensions": {
43
+ "nl.amsterdam.subtype": "space"
44
+ }
45
+ },
12
46
  "hover": {
13
- "color": { "value": "{ams.links.hover.color}" },
14
- "text-decoration-thickness": { "value": "{ams.links.hover.text-decoration-thickness}" },
15
- "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
47
+ "color": {
48
+ "$value": "{ams.links.hover.color}",
49
+ "$type": "color"
50
+ },
51
+ "text-decoration-thickness": {
52
+ "$value": "{ams.links.hover.text-decoration-thickness}",
53
+ "$type": "dimension"
54
+ },
55
+ "text-underline-offset": {
56
+ "$value": "{ams.links.hover.text-underline-offset}",
57
+ "$type": "dimension",
58
+ "$extensions": {
59
+ "nl.amsterdam.subtype": "space"
60
+ }
61
+ }
16
62
  },
17
63
  "contrast": {
18
- "color": { "value": "{ams.links.contrast.color}" },
64
+ "color": {
65
+ "$value": "{ams.links.contrast.color}",
66
+ "$type": "color"
67
+ },
19
68
  "hover": {
20
- "color": { "value": "{ams.links.contrast.hover.color}" }
69
+ "color": {
70
+ "$value": "{ams.links.contrast.hover.color}",
71
+ "$type": "color"
72
+ }
21
73
  }
22
74
  },
23
75
  "inverse": {
24
- "color": { "value": "{ams.links.inverse.color}" },
76
+ "color": {
77
+ "$value": "{ams.links.inverse.color}",
78
+ "$type": "color"
79
+ },
25
80
  "hover": {
26
- "color": { "value": "{ams.links.inverse.hover.color}" }
81
+ "color": {
82
+ "$value": "{ams.links.inverse.hover.color}",
83
+ "$type": "color"
84
+ }
27
85
  }
28
86
  }
29
87
  }
package/src/components/ams/logo.tokens.json CHANGED
@@ -1,16 +1,34 @@
1
1
  {
2
2
  "ams": {
3
3
  "logo": {
4
- "block-size": { "value": "{ams.space.xl}" },
5
- "min-block-size": { "value": "2.5rem" },
4
+ "block-size": {
5
+ "$value": "{ams.space.xl}",
6
+ "$type": "dimension"
7
+ },
8
+ "min-block-size": {
9
+ "$value": {
10
+ "value": 2.5,
11
+ "unit": "rem"
12
+ },
13
+ "$type": "dimension"
14
+ },
6
15
  "emblem": {
7
- "color": { "value": "#ec0000" }
16
+ "color": {
17
+ "$value": "#ec0000",
18
+ "$type": "color"
19
+ }
8
20
  },
9
21
  "subsite": {
10
- "color": { "value": "{ams.color.text.default}" }
22
+ "color": {
23
+ "$value": "{ams.color.text.default}",
24
+ "$type": "color"
25
+ }
11
26
  },
12
27
  "title": {
13
- "color": { "value": "#ec0000" }
28
+ "color": {
29
+ "$value": "#ec0000",
30
+ "$type": "color"
31
+ }
14
32
  }
15
33
  }
16
34
  }
package/src/components/ams/mark.tokens.json CHANGED
@@ -1,7 +1,10 @@
1
1
  {
2
2
  "ams": {
3
3
  "mark": {
4
- "background-color": { "value": "{ams.color.highlight.yellow}" }
4
+ "background-color": {
5
+ "$value": "{ams.color.highlight.yellow}",
6
+ "$type": "color"
7
+ }
5
8
  }
6
9
  }
7
10
  }
package/src/components/ams/menu.deprecated.tokens.json CHANGED
@@ -4,25 +4,29 @@
4
4
  "link": {
5
5
  "contrast": {
6
6
  "color": {
7
- "comment": "The menu has a dark background now, so this is no longer needed.",
8
- "value": "{ams.links.contrast.color}"
7
+ "$deprecated": "The menu has a dark background now, so this is no longer needed.",
8
+ "$value": "{ams.links.contrast.color}",
9
+ "$type": "color"
9
10
  },
10
11
  "hover": {
11
12
  "color": {
12
- "comment": "The menu has a dark background now, so this is no longer needed.",
13
- "value": "{ams.links.contrast.hover.color}"
13
+ "$deprecated": "The menu has a dark background now, so this is no longer needed.",
14
+ "$value": "{ams.links.contrast.hover.color}",
15
+ "$type": "color"
14
16
  }
15
17
  }
16
18
  },
17
19
  "inverse": {
18
20
  "color": {
19
- "comment": "The menu has a dark background now, so this is no longer needed.",
20
- "value": "{ams.links.inverse.color}"
21
+ "$deprecated": "The menu has a dark background now, so this is no longer needed.",
22
+ "$value": "{ams.links.inverse.color}",
23
+ "$type": "color"
21
24
  },
22
25
  "hover": {
23
26
  "color": {
24
- "comment": "The menu has a dark background now, so this is no longer needed.",
25
- "value": "{ams.links.inverse.hover.color}"
27
+ "$deprecated": "The menu has a dark background now, so this is no longer needed.",
28
+ "$value": "{ams.links.inverse.hover.color}",
29
+ "$type": "color"
26
30
  }
27
31
  }
28
32
  }
package/src/components/ams/menu.tokens.json CHANGED
@@ -1,36 +1,134 @@
1
1
  {
2
2
  "ams": {
3
3
  "menu": {
4
- "background-color": { "value": "{ams.color.interactive.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
- "padding-block": { "value": "{ams.space.m}" },
4
+ "background-color": {
5
+ "$value": "{ams.color.interactive.default}",
6
+ "$type": "color"
7
+ },
8
+ "font-family": {
9
+ "$value": "{ams.typography.font-family}",
10
+ "$type": "fontFamily"
11
+ },
12
+ "font-size": {
13
+ "$value": "{ams.typography.body-text.font-size}",
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "fontSize"
16
+ }
17
+ },
18
+ "font-weight": {
19
+ "$value": "{ams.typography.body-text.font-weight}",
20
+ "$type": "fontWeight"
21
+ },
22
+ "line-height": {
23
+ "$value": "{ams.typography.body-text.line-height}",
24
+ "$extensions": {
25
+ "nl.amsterdam.type": "lineHeight"
26
+ }
27
+ },
28
+ "padding-block": {
29
+ "$value": "{ams.space.m}",
30
+ "$type": "dimension",
31
+ "$extensions": {
32
+ "nl.amsterdam.subtype": "space"
33
+ }
34
+ },
10
35
  "wide": {
11
- "max-inline-size": { "value": "8rem" },
12
- "padding-block": { "value": "calc({ams.logo.block-size} + 2 * {ams.page-header.padding-block}) {ams.space.m}" },
13
- "padding-inline": { "value": "{ams.space.s}" }
36
+ "max-inline-size": {
37
+ "$value": {
38
+ "value": 8,
39
+ "unit": "rem"
40
+ },
41
+ "$type": "dimension"
42
+ },
43
+ "padding-block": {
44
+ "$value": "calc({ams.logo.block-size} + 2 * {ams.page-header.padding-block}) {ams.space.m}",
45
+ "$type": "dimension",
46
+ "$extensions": {
47
+ "nl.amsterdam.subtype": "space"
48
+ }
49
+ },
50
+ "padding-inline": {
51
+ "$value": "{ams.space.s}",
52
+ "$type": "dimension",
53
+ "$extensions": {
54
+ "nl.amsterdam.subtype": "space"
55
+ }
56
+ }
14
57
  },
15
58
  "link": {
16
- "color": { "value": "{ams.links.inverse.color}" },
17
- "gap": { "value": "{ams.space.s}" },
18
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
19
- "padding-block": { "value": "{ams.space.s}" },
20
- "padding-inline": { "value": "{ams.space.s}" },
21
- "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
22
- "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
23
- "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
59
+ "color": {
60
+ "$value": "{ams.links.inverse.color}",
61
+ "$type": "color"
62
+ },
63
+ "gap": {
64
+ "$value": "{ams.space.s}",
65
+ "$type": "dimension",
66
+ "$extensions": {
67
+ "nl.amsterdam.subtype": "space"
68
+ }
69
+ },
70
+ "outline-offset": {
71
+ "$value": "{ams.focus.outline-offset}",
72
+ "$type": "dimension",
73
+ "$extensions": {
74
+ "nl.amsterdam.subtype": "space"
75
+ }
76
+ },
77
+ "padding-block": {
78
+ "$value": "{ams.space.s}",
79
+ "$type": "dimension",
80
+ "$extensions": {
81
+ "nl.amsterdam.subtype": "space"
82
+ }
83
+ },
84
+ "padding-inline": {
85
+ "$value": "{ams.space.s}",
86
+ "$type": "dimension",
87
+ "$extensions": {
88
+ "nl.amsterdam.subtype": "space"
89
+ }
90
+ },
91
+ "text-decoration-line": {
92
+ "$value": "{ams.links.subtle.text-decoration-line}"
93
+ },
94
+ "text-decoration-thickness": {
95
+ "$value": "{ams.links.text-decoration-thickness}",
96
+ "$type": "dimension"
97
+ },
98
+ "text-underline-offset": {
99
+ "$value": "{ams.links.text-underline-offset}",
100
+ "$type": "dimension",
101
+ "$extensions": {
102
+ "nl.amsterdam.subtype": "space"
103
+ }
104
+ },
24
105
  "hover": {
25
- "color": { "value": "{ams.links.inverse.hover.color}" },
26
- "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
106
+ "color": {
107
+ "$value": "{ams.links.inverse.hover.color}",
108
+ "$type": "color"
109
+ },
110
+ "text-decoration-line": {
111
+ "$value": "{ams.links.subtle.hover.text-decoration-line}"
112
+ }
27
113
  },
28
114
  "wide": {
29
- "gap": { "value": "{ams.space.xs}" }
115
+ "gap": {
116
+ "$value": "{ams.space.xs}",
117
+ "$type": "dimension",
118
+ "$extensions": {
119
+ "nl.amsterdam.subtype": "space"
120
+ }
121
+ }
30
122
  }
31
123
  },
32
124
  "list": {
33
- "gap": { "value": "{ams.space.m}" }
125
+ "gap": {
126
+ "$value": "{ams.space.m}",
127
+ "$type": "dimension",
128
+ "$extensions": {
129
+ "nl.amsterdam.subtype": "space"
130
+ }
131
+ }
34
132
  }
35
133
  }
36
134
  }