@amsterdam/design-system-tokens 3.3.0 → 4.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 (109) hide show
  1. package/CHANGELOG.md +61 -3
  2. package/README.md +131 -22
  3. package/build.js +11 -1
  4. package/dist/compact.css +9 -2
  5. package/dist/compact.d.ts +21 -6
  6. package/dist/compact.json +33 -18
  7. package/dist/compact.mjs +21 -13
  8. package/dist/compact.scss +9 -2
  9. package/dist/compact.theme.css +9 -2
  10. package/dist/index.css +177 -165
  11. package/dist/index.d.ts +250 -226
  12. package/dist/index.json +345 -321
  13. package/dist/index.mjs +285 -267
  14. package/dist/index.scss +177 -165
  15. package/dist/index.theme.css +177 -165
  16. package/package.json +2 -2
  17. package/src/brand/ams/aspect-ratio.tokens.json +24 -6
  18. package/src/brand/ams/border.compact.tokens.json +20 -0
  19. package/src/brand/ams/border.tokens.json +25 -0
  20. package/src/brand/ams/color.compact.tokens.json +15 -0
  21. package/src/brand/ams/color.tokens.json +37 -49
  22. package/src/brand/ams/cursor.tokens.json +9 -2
  23. package/src/brand/ams/focus.tokens.json +1 -0
  24. package/src/brand/ams/space.compact.tokens.json +16 -4
  25. package/src/brand/ams/space.tokens.json +31 -6
  26. package/src/brand/ams/typography.compact.tokens.json +36 -27
  27. package/src/brand/ams/typography.tokens.json +60 -32
  28. package/src/common/ams/inputs.tokens.json +41 -19
  29. package/src/common/ams/links.tokens.json +35 -10
  30. package/src/components/ams/accordion.tokens.json +18 -11
  31. package/src/components/ams/action-group.tokens.json +2 -2
  32. package/src/components/ams/alert.tokens.json +38 -20
  33. package/src/components/ams/avatar.tokens.json +79 -29
  34. package/src/components/ams/badge.tokens.json +60 -23
  35. package/src/components/ams/blockquote.tokens.json +14 -5
  36. package/src/components/ams/body.compact.tokens.json +12 -0
  37. package/src/components/ams/body.tokens.json +12 -0
  38. package/src/components/ams/breadcrumb.tokens.json +36 -15
  39. package/src/components/ams/button.tokens.json +74 -33
  40. package/src/components/ams/call-to-action-link.tokens.json +29 -16
  41. package/src/components/ams/card.tokens.json +30 -17
  42. package/src/components/ams/character-count.tokens.json +14 -5
  43. package/src/components/ams/checkbox.tokens.json +106 -39
  44. package/src/components/ams/column.tokens.json +10 -10
  45. package/src/components/ams/date-input.tokens.json +56 -23
  46. package/src/components/ams/description-list.tokens.json +101 -23
  47. package/src/components/ams/dialog.tokens.json +104 -28
  48. package/src/components/ams/error-message.tokens.json +13 -6
  49. package/src/components/ams/field-set.tokens.json +40 -17
  50. package/src/components/ams/field.tokens.json +18 -7
  51. package/src/components/ams/figure.tokens.json +16 -7
  52. package/src/components/ams/file-input.tokens.json +69 -30
  53. package/src/components/ams/file-list.tokens.json +20 -11
  54. package/src/components/ams/grid.compact.tokens.json +24 -2
  55. package/src/components/ams/grid.tokens.json +77 -24
  56. package/src/components/ams/heading.tokens.json +38 -36
  57. package/src/components/ams/hint.tokens.json +6 -2
  58. package/src/components/ams/icon-button.tokens.json +46 -16
  59. package/src/components/ams/icon.tokens.json +19 -23
  60. package/src/components/ams/image-slider.tokens.json +28 -16
  61. package/src/components/ams/image.tokens.json +4 -1
  62. package/src/components/ams/invalid-form-alert.tokens.json +2 -2
  63. package/src/components/ams/label.tokens.json +18 -6
  64. package/src/components/ams/link-list.tokens.json +50 -22
  65. package/src/components/ams/link.tokens.json +38 -25
  66. package/src/components/ams/logo.tokens.json +6 -2
  67. package/src/components/ams/mark.tokens.json +3 -1
  68. package/src/components/ams/menu.tokens.json +81 -28
  69. package/src/components/ams/ordered-list.tokens.json +39 -25
  70. package/src/components/ams/page-footer.tokens.json +70 -26
  71. package/src/components/ams/page-header.compact.tokens.json +2 -1
  72. package/src/components/ams/page-header.tokens.json +128 -59
  73. package/src/components/ams/page.compact.tokens.json +12 -0
  74. package/src/components/ams/page.tokens.json +5 -3
  75. package/src/components/ams/pagination.tokens.json +37 -17
  76. package/src/components/ams/paragraph.tokens.json +22 -8
  77. package/src/components/ams/password-input.tokens.json +47 -21
  78. package/src/components/ams/progress-list.tokens.json +194 -52
  79. package/src/components/ams/radio.tokens.json +97 -36
  80. package/src/components/ams/row.tokens.json +10 -10
  81. package/src/components/ams/search-field.tokens.json +57 -24
  82. package/src/components/ams/select.tokens.json +63 -23
  83. package/src/components/ams/skip-link.tokens.json +23 -12
  84. package/src/components/ams/spotlight.tokens.json +21 -7
  85. package/src/components/ams/standalone-link.tokens.json +44 -18
  86. package/src/components/ams/switch.tokens.json +40 -10
  87. package/src/components/ams/tab-navigation.tokens.json +205 -0
  88. package/src/components/ams/table-of-contents.tokens.json +38 -20
  89. package/src/components/ams/table.tokens.json +29 -10
  90. package/src/components/ams/tabs.tokens.json +39 -20
  91. package/src/components/ams/text-area.tokens.json +49 -23
  92. package/src/components/ams/text-input.tokens.json +47 -19
  93. package/src/components/ams/time-input.tokens.json +56 -21
  94. package/src/components/ams/unordered-list.tokens.json +37 -25
  95. package/style-dictionary/transforms/dtcg-font-family.js +32 -0
  96. package/src/brand/ams/color.deprecated.tokens.json +0 -13
  97. package/src/brand/ams/typography.deprecated.compact.tokens.json +0 -26
  98. package/src/brand/ams/typography.deprecated.tokens.json +0 -40
  99. package/src/components/ams/accordion.deprecated.tokens.json +0 -39
  100. package/src/components/ams/checkbox.deprecated.tokens.json +0 -59
  101. package/src/components/ams/date-input.deprecated.tokens.json +0 -38
  102. package/src/components/ams/field-set.deprecated.tokens.json +0 -16
  103. package/src/components/ams/field.deprecated.tokens.json +0 -14
  104. package/src/components/ams/icon.deprecated.tokens.json +0 -22
  105. package/src/components/ams/menu.deprecated.tokens.json +0 -36
  106. package/src/components/ams/page-heading.deprecated.tokens.json +0 -46
  107. package/src/components/ams/standalone-link.deprecated.tokens.json +0 -38
  108. package/src/components/ams/table-of-contents.deprecated.tokens.json +0 -24
  109. package/src/components/ams/time-input.deprecated.tokens.json +0 -38
package/src/components/ams/figure.tokens.json CHANGED
@@ -3,19 +3,23 @@
3
3
  "figure": {
4
4
  "gap": {
5
5
  "$value": "{ams.space.s}",
6
- "$type": "dimension",
7
6
  "$extensions": {
8
- "nl.amsterdam.subtype": "space"
7
+ "nl.amsterdam.subtype": "space",
8
+ "nl.amsterdam.type": "dimension"
9
9
  }
10
10
  },
11
11
  "caption": {
12
12
  "color": {
13
13
  "$value": "{ams.color.text.default}",
14
- "$type": "color"
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "color"
16
+ }
15
17
  },
16
18
  "font-family": {
17
19
  "$value": "{ams.typography.font-family}",
18
- "$type": "fontFamily"
20
+ "$extensions": {
21
+ "nl.amsterdam.type": "fontFamily"
22
+ }
19
23
  },
20
24
  "font-size": {
21
25
  "$value": "{ams.typography.body-text.small.font-size}",
@@ -25,18 +29,23 @@
25
29
  },
26
30
  "font-weight": {
27
31
  "$value": "{ams.typography.body-text.font-weight}",
28
- "$type": "fontWeight"
32
+ "$extensions": {
33
+ "nl.amsterdam.type": "fontWeight"
34
+ }
29
35
  },
30
36
  "line-height": {
31
37
  "$value": "{ams.typography.body-text.small.line-height}",
32
38
  "$extensions": {
33
- "nl.amsterdam.type": "lineHeight"
39
+ "nl.amsterdam.subtype": "lineHeight",
40
+ "nl.amsterdam.type": "number"
34
41
  }
35
42
  },
36
43
  "inverse": {
37
44
  "color": {
38
45
  "$value": "{ams.color.text.inverse}",
39
- "$type": "color"
46
+ "$extensions": {
47
+ "nl.amsterdam.type": "color"
48
+ }
40
49
  }
41
50
  }
42
51
  }
package/src/components/ams/file-input.tokens.json CHANGED
@@ -3,11 +3,15 @@
3
3
  "file-input": {
4
4
  "background-color": {
5
5
  "$value": "{ams.inputs.background-color}",
6
- "$type": "color"
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "color"
8
+ }
7
9
  },
8
10
  "border-color": {
9
11
  "$value": "{ams.inputs.border-color}",
10
- "$type": "color"
12
+ "$extensions": {
13
+ "nl.amsterdam.type": "color"
14
+ }
11
15
  },
12
16
  "border-style": {
13
17
  "$value": "dashed",
@@ -23,14 +27,21 @@
23
27
  },
24
28
  "color": {
25
29
  "$value": "{ams.inputs.color}",
26
- "$type": "color"
30
+ "$extensions": {
31
+ "nl.amsterdam.type": "color"
32
+ }
27
33
  },
28
34
  "cursor": {
29
- "$value": "{ams.cursor.interactive}"
35
+ "$value": "{ams.cursor.interactive}",
36
+ "$extensions": {
37
+ "nl.amsterdam.type": "cursor"
38
+ }
30
39
  },
31
40
  "font-family": {
32
41
  "$value": "{ams.inputs.font-family}",
33
- "$type": "fontFamily"
42
+ "$extensions": {
43
+ "nl.amsterdam.type": "fontFamily"
44
+ }
34
45
  },
35
46
  "font-size": {
36
47
  "$value": "{ams.inputs.font-size}",
@@ -40,52 +51,64 @@
40
51
  },
41
52
  "font-weight": {
42
53
  "$value": "{ams.inputs.font-weight}",
43
- "$type": "fontWeight"
54
+ "$extensions": {
55
+ "nl.amsterdam.type": "fontWeight"
56
+ }
44
57
  },
45
58
  "line-height": {
46
59
  "$value": "{ams.inputs.line-height}",
47
60
  "$extensions": {
48
- "nl.amsterdam.type": "lineHeight"
61
+ "nl.amsterdam.subtype": "lineHeight",
62
+ "nl.amsterdam.type": "number"
49
63
  }
50
64
  },
51
65
  "outline-offset": {
52
66
  "$value": "{ams.inputs.outline-offset}",
53
- "$type": "dimension",
54
67
  "$extensions": {
55
- "nl.amsterdam.subtype": "space"
68
+ "nl.amsterdam.subtype": "space",
69
+ "nl.amsterdam.type": "dimension"
56
70
  }
57
71
  },
58
72
  "padding-block": {
59
73
  "$value": "{ams.space.m}",
60
- "$type": "dimension",
61
74
  "$extensions": {
62
- "nl.amsterdam.subtype": "space"
75
+ "nl.amsterdam.subtype": "space",
76
+ "nl.amsterdam.type": "dimension"
63
77
  }
64
78
  },
65
79
  "padding-inline": {
66
80
  "$value": "{ams.space.m}",
67
- "$type": "dimension",
68
81
  "$extensions": {
69
- "nl.amsterdam.subtype": "space"
82
+ "nl.amsterdam.subtype": "space",
83
+ "nl.amsterdam.type": "dimension"
70
84
  }
71
85
  },
72
86
  "disabled": {
73
87
  "color": {
74
88
  "$value": "{ams.inputs.disabled.color}",
75
- "$type": "color"
89
+ "$extensions": {
90
+ "nl.amsterdam.type": "color"
91
+ }
76
92
  },
77
93
  "cursor": {
78
- "$value": "{ams.cursor.disabled}"
94
+ "$value": "{ams.cursor.disabled}",
95
+ "$extensions": {
96
+ "nl.amsterdam.type": "cursor"
97
+ }
79
98
  }
80
99
  },
81
100
  "file-selector-button": {
82
101
  "background-color": {
83
102
  "$value": "{ams.button.secondary.background-color}",
84
- "$type": "color"
103
+ "$extensions": {
104
+ "nl.amsterdam.type": "color"
105
+ }
85
106
  },
86
107
  "border-color": {
87
108
  "$value": "{ams.button.secondary.border-color}",
88
- "$type": "color"
109
+ "$extensions": {
110
+ "nl.amsterdam.type": "color"
111
+ }
89
112
  },
90
113
  "border-style": {
91
114
  "$value": "{ams.button.border-style}",
@@ -101,54 +124,70 @@
101
124
  },
102
125
  "color": {
103
126
  "$value": "{ams.button.secondary.color}",
104
- "$type": "color"
127
+ "$extensions": {
128
+ "nl.amsterdam.type": "color"
129
+ }
105
130
  },
106
131
  "cursor": {
107
- "$value": "{ams.button.cursor}"
132
+ "$value": "{ams.button.cursor}",
133
+ "$extensions": {
134
+ "nl.amsterdam.type": "cursor"
135
+ }
108
136
  },
109
137
  "line-height": {
110
138
  "$value": "{ams.button.line-height}",
111
139
  "$extensions": {
112
- "nl.amsterdam.type": "lineHeight"
140
+ "nl.amsterdam.subtype": "lineHeight",
141
+ "nl.amsterdam.type": "number"
113
142
  }
114
143
  },
115
144
  "margin-inline-end": {
116
145
  "$value": "{ams.space.m}",
117
- "$type": "dimension",
118
146
  "$extensions": {
119
- "nl.amsterdam.subtype": "space"
147
+ "nl.amsterdam.subtype": "space",
148
+ "nl.amsterdam.type": "dimension"
120
149
  }
121
150
  },
122
151
  "padding-block": {
123
152
  "$value": "{ams.button.padding-block}",
124
- "$type": "dimension",
125
153
  "$extensions": {
126
- "nl.amsterdam.subtype": "space"
154
+ "nl.amsterdam.subtype": "space",
155
+ "nl.amsterdam.type": "dimension"
127
156
  }
128
157
  },
129
158
  "padding-inline": {
130
159
  "$value": "{ams.button.padding-inline}",
131
- "$type": "dimension",
132
160
  "$extensions": {
133
- "nl.amsterdam.subtype": "space"
161
+ "nl.amsterdam.subtype": "space",
162
+ "nl.amsterdam.type": "dimension"
134
163
  }
135
164
  },
136
165
  "disabled": {
137
166
  "color": {
138
167
  "$value": "{ams.button.secondary.disabled.color}",
139
- "$type": "color"
168
+ "$extensions": {
169
+ "nl.amsterdam.type": "color"
170
+ }
140
171
  },
141
172
  "cursor": {
142
- "$value": "{ams.button.disabled.cursor}"
173
+ "$value": "{ams.button.disabled.cursor}",
174
+ "$extensions": {
175
+ "nl.amsterdam.type": "cursor"
176
+ }
143
177
  }
144
178
  },
145
179
  "hover": {
146
180
  "box-shadow": {
147
- "$value": "{ams.button.secondary.hover.box-shadow}"
181
+ "$value": "{ams.button.secondary.hover.box-shadow}",
182
+ "$extensions": {
183
+ "nl.amsterdam.type": "shadow"
184
+ }
148
185
  },
149
186
  "color": {
150
187
  "$value": "{ams.button.secondary.hover.color}",
151
- "$type": "color"
188
+ "$extensions": {
189
+ "nl.amsterdam.type": "color"
190
+ }
152
191
  }
153
192
  }
154
193
  }
package/src/components/ams/file-list.tokens.json CHANGED
@@ -3,22 +3,24 @@
3
3
  "file-list": {
4
4
  "gap": {
5
5
  "$value": "{ams.space.m}",
6
- "$type": "dimension",
7
6
  "$extensions": {
8
- "nl.amsterdam.subtype": "space"
7
+ "nl.amsterdam.subtype": "space",
8
+ "nl.amsterdam.type": "dimension"
9
9
  }
10
10
  },
11
11
  "padding-block": {
12
12
  "$value": "{ams.space.m}",
13
- "$type": "dimension",
14
13
  "$extensions": {
15
- "nl.amsterdam.subtype": "space"
14
+ "nl.amsterdam.subtype": "space",
15
+ "nl.amsterdam.type": "dimension"
16
16
  }
17
17
  },
18
18
  "file": {
19
19
  "font-family": {
20
20
  "$value": "{ams.typography.font-family}",
21
- "$type": "fontFamily"
21
+ "$extensions": {
22
+ "nl.amsterdam.type": "fontFamily"
23
+ }
22
24
  },
23
25
  "font-size": {
24
26
  "$value": "{ams.typography.body-text.small.font-size}",
@@ -28,31 +30,38 @@
28
30
  },
29
31
  "font-weight": {
30
32
  "$value": "{ams.typography.body-text.font-weight}",
31
- "$type": "fontWeight"
33
+ "$extensions": {
34
+ "nl.amsterdam.type": "fontWeight"
35
+ }
32
36
  },
33
37
  "gap": {
34
38
  "$value": "{ams.space.s}",
35
- "$type": "dimension",
36
39
  "$extensions": {
37
- "nl.amsterdam.subtype": "space"
40
+ "nl.amsterdam.subtype": "space",
41
+ "nl.amsterdam.type": "dimension"
38
42
  }
39
43
  },
40
44
  "line-height": {
41
45
  "$value": "{ams.typography.body-text.small.line-height}",
42
46
  "$extensions": {
43
- "nl.amsterdam.type": "lineHeight"
47
+ "nl.amsterdam.subtype": "lineHeight",
48
+ "nl.amsterdam.type": "number"
44
49
  }
45
50
  },
46
51
  "details": {
47
52
  "color": {
48
53
  "$value": "{ams.color.text.secondary}",
49
- "$type": "color"
54
+ "$extensions": {
55
+ "nl.amsterdam.type": "color"
56
+ }
50
57
  }
51
58
  },
52
59
  "preview": {
53
60
  "width": {
54
61
  "$value": "clamp(2.5rem, 10vw, 5rem)",
55
- "$type": "dimension"
62
+ "$extensions": {
63
+ "nl.amsterdam.type": "dimension"
64
+ }
56
65
  }
57
66
  }
58
67
  }
package/src/components/ams/grid.compact.tokens.json CHANGED
@@ -3,9 +3,31 @@
3
3
  "grid": {
4
4
  "padding-inline": {
5
5
  "$value": "{ams.space.xl}",
6
- "$type": "dimension",
7
6
  "$extensions": {
8
- "nl.amsterdam.subtype": "space"
7
+ "nl.amsterdam.subtype": "space",
8
+ "nl.amsterdam.type": "dimension"
9
+ }
10
+ },
11
+ "cell": {
12
+ "background-color": {
13
+ "$value": "{ams.color.background.default}",
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "color"
16
+ }
17
+ },
18
+ "padding-block": {
19
+ "$value": "{ams.space.m}",
20
+ "$extensions": {
21
+ "nl.amsterdam.subtype": "space",
22
+ "nl.amsterdam.type": "dimension"
23
+ }
24
+ },
25
+ "padding-inline": {
26
+ "$value": "{ams.space.m}",
27
+ "$extensions": {
28
+ "nl.amsterdam.subtype": "space",
29
+ "nl.amsterdam.type": "dimension"
30
+ }
9
31
  }
10
32
  }
11
33
  }
package/src/components/ams/grid.tokens.json CHANGED
@@ -2,89 +2,142 @@
2
2
  "ams": {
3
3
  "grid": {
4
4
  "column-count": {
5
- "$value": "4"
5
+ "$value": 4,
6
+ "$type": "number"
6
7
  },
7
8
  "column-gap": {
8
9
  "$value": "{ams.space.xl}",
9
- "$type": "dimension",
10
10
  "$extensions": {
11
- "nl.amsterdam.subtype": "space"
11
+ "nl.amsterdam.subtype": "space",
12
+ "nl.amsterdam.type": "dimension"
12
13
  }
13
14
  },
14
15
  "padding-block": {
15
16
  "l": {
16
17
  "$value": "{ams.space.l}",
17
- "$type": "dimension",
18
18
  "$extensions": {
19
- "nl.amsterdam.subtype": "space"
19
+ "nl.amsterdam.subtype": "space",
20
+ "nl.amsterdam.type": "dimension"
20
21
  }
21
22
  },
22
23
  "xl": {
23
24
  "$value": "{ams.space.xl}",
24
- "$type": "dimension",
25
25
  "$extensions": {
26
- "nl.amsterdam.subtype": "space"
26
+ "nl.amsterdam.subtype": "space",
27
+ "nl.amsterdam.type": "dimension"
27
28
  }
28
29
  },
29
30
  "2xl": {
30
31
  "$value": "{ams.space.2xl}",
31
- "$type": "dimension",
32
32
  "$extensions": {
33
- "nl.amsterdam.subtype": "space"
33
+ "nl.amsterdam.subtype": "space",
34
+ "nl.amsterdam.type": "dimension"
34
35
  }
35
36
  }
36
37
  },
37
38
  "padding-inline": {
38
39
  "$value": "{ams.space.l}",
39
- "$type": "dimension",
40
40
  "$extensions": {
41
- "nl.amsterdam.subtype": "space"
41
+ "nl.amsterdam.subtype": "space",
42
+ "nl.amsterdam.type": "dimension"
42
43
  }
43
44
  },
44
45
  "row-gap": {
45
46
  "l": {
46
47
  "$value": "{ams.space.l}",
47
- "$type": "dimension",
48
48
  "$extensions": {
49
- "nl.amsterdam.subtype": "space"
49
+ "nl.amsterdam.subtype": "space",
50
+ "nl.amsterdam.type": "dimension"
50
51
  }
51
52
  },
52
53
  "xl": {
53
54
  "$value": "{ams.space.xl}",
54
- "$type": "dimension",
55
55
  "$extensions": {
56
- "nl.amsterdam.subtype": "space"
56
+ "nl.amsterdam.subtype": "space",
57
+ "nl.amsterdam.type": "dimension"
57
58
  }
58
59
  },
59
60
  "2xl": {
60
61
  "$value": "{ams.space.2xl}",
61
- "$type": "dimension",
62
62
  "$extensions": {
63
- "nl.amsterdam.subtype": "space"
63
+ "nl.amsterdam.subtype": "space",
64
+ "nl.amsterdam.type": "dimension"
64
65
  }
65
66
  }
66
67
  },
67
68
  "medium": {
68
69
  "column-count": {
69
- "$value": "8"
70
+ "$deprecated": "Use `ams.grid.vi-medium.column-count` instead. Will be removed on or after 2026-10-20.",
71
+ "$value": "initial",
72
+ "$type": "number"
70
73
  },
71
74
  "padding-inline": {
72
- "$value": "{ams.space.xl}",
73
- "$type": "dimension",
75
+ "$deprecated": "Use `ams.grid.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
76
+ "$value": "initial",
74
77
  "$extensions": {
75
- "nl.amsterdam.subtype": "space"
78
+ "nl.amsterdam.subtype": "space",
79
+ "nl.amsterdam.type": "dimension"
76
80
  }
77
81
  }
78
82
  },
79
83
  "wide": {
80
84
  "column-count": {
81
- "$value": "12"
85
+ "$deprecated": "Use `ams.grid.vi-wide.column-count` instead. Will be removed on or after 2026-10-20.",
86
+ "$value": "initial",
87
+ "$type": "number"
88
+ },
89
+ "padding-inline": {
90
+ "$deprecated": "Use `ams.grid.vi-wide.padding-inline` instead. Will be removed on or after 2026-10-20.",
91
+ "$value": "initial",
92
+ "$extensions": {
93
+ "nl.amsterdam.subtype": "space",
94
+ "nl.amsterdam.type": "dimension"
95
+ }
96
+ }
97
+ },
98
+ "vi-medium": {
99
+ "column-count": {
100
+ "$value": 8,
101
+ "$type": "number"
102
+ },
103
+ "padding-inline": {
104
+ "$value": "{ams.space.xl}",
105
+ "$extensions": {
106
+ "nl.amsterdam.subtype": "space",
107
+ "nl.amsterdam.type": "dimension"
108
+ }
109
+ }
110
+ },
111
+ "vi-wide": {
112
+ "column-count": {
113
+ "$value": 12,
114
+ "$type": "number"
82
115
  },
83
116
  "padding-inline": {
84
117
  "$value": "{ams.space.2xl}",
85
- "$type": "dimension",
86
118
  "$extensions": {
87
- "nl.amsterdam.subtype": "space"
119
+ "nl.amsterdam.subtype": "space",
120
+ "nl.amsterdam.type": "dimension"
121
+ }
122
+ }
123
+ },
124
+ "cell": {
125
+ "background-color": {
126
+ "$value": "initial",
127
+ "$extensions": {
128
+ "nl.amsterdam.type": "color"
129
+ }
130
+ },
131
+ "padding-block": {
132
+ "$value": "initial",
133
+ "$extensions": {
134
+ "nl.amsterdam.type": "dimension"
135
+ }
136
+ },
137
+ "padding-inline": {
138
+ "$value": "initial",
139
+ "$extensions": {
140
+ "nl.amsterdam.type": "dimension"
88
141
  }
89
142
  }
90
143
  }
package/src/components/ams/heading.tokens.json CHANGED
@@ -1,27 +1,6 @@
1
1
  {
2
2
  "ams": {
3
3
  "heading": {
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-weight": {
13
- "$value": "{ams.typography.heading.font-weight}",
14
- "$type": "fontWeight"
15
- },
16
- "text-wrap": {
17
- "$value": "{ams.typography.heading.text-wrap}"
18
- },
19
- "inverse": {
20
- "color": {
21
- "$value": "{ams.color.text.inverse}",
22
- "$type": "color"
23
- }
24
- },
25
4
  "1": {
26
5
  "font-size": {
27
6
  "$value": "{ams.typography.heading.1.font-size}",
@@ -32,7 +11,8 @@
32
11
  "line-height": {
33
12
  "$value": "{ams.typography.heading.1.line-height}",
34
13
  "$extensions": {
35
- "nl.amsterdam.type": "lineHeight"
14
+ "nl.amsterdam.subtype": "lineHeight",
15
+ "nl.amsterdam.type": "number"
36
16
  }
37
17
  }
38
18
  },
@@ -46,7 +26,8 @@
46
26
  "line-height": {
47
27
  "$value": "{ams.typography.heading.2.line-height}",
48
28
  "$extensions": {
49
- "nl.amsterdam.type": "lineHeight"
29
+ "nl.amsterdam.subtype": "lineHeight",
30
+ "nl.amsterdam.type": "number"
50
31
  }
51
32
  }
52
33
  },
@@ -60,7 +41,8 @@
60
41
  "line-height": {
61
42
  "$value": "{ams.typography.heading.3.line-height}",
62
43
  "$extensions": {
63
- "nl.amsterdam.type": "lineHeight"
44
+ "nl.amsterdam.subtype": "lineHeight",
45
+ "nl.amsterdam.type": "number"
64
46
  }
65
47
  }
66
48
  },
@@ -74,7 +56,8 @@
74
56
  "line-height": {
75
57
  "$value": "{ams.typography.heading.4.line-height}",
76
58
  "$extensions": {
77
- "nl.amsterdam.type": "lineHeight"
59
+ "nl.amsterdam.subtype": "lineHeight",
60
+ "nl.amsterdam.type": "number"
78
61
  }
79
62
  }
80
63
  },
@@ -88,21 +71,40 @@
88
71
  "line-height": {
89
72
  "$value": "{ams.typography.heading.5.line-height}",
90
73
  "$extensions": {
91
- "nl.amsterdam.type": "lineHeight"
74
+ "nl.amsterdam.subtype": "lineHeight",
75
+ "nl.amsterdam.type": "number"
92
76
  }
93
77
  }
94
78
  },
95
- "6": {
96
- "font-size": {
97
- "$value": "{ams.typography.heading.6.font-size}",
98
- "$extensions": {
99
- "nl.amsterdam.type": "fontSize"
100
- }
101
- },
102
- "line-height": {
103
- "$value": "{ams.typography.heading.6.line-height}",
79
+ "color": {
80
+ "$value": "{ams.color.text.default}",
81
+ "$extensions": {
82
+ "nl.amsterdam.type": "color"
83
+ }
84
+ },
85
+ "font-family": {
86
+ "$value": "{ams.typography.font-family}",
87
+ "$extensions": {
88
+ "nl.amsterdam.type": "fontFamily"
89
+ }
90
+ },
91
+ "font-weight": {
92
+ "$value": "{ams.typography.heading.font-weight}",
93
+ "$extensions": {
94
+ "nl.amsterdam.type": "fontWeight"
95
+ }
96
+ },
97
+ "text-wrap": {
98
+ "$value": "{ams.typography.heading.text-wrap}",
99
+ "$extensions": {
100
+ "nl.amsterdam.type": "textWrap"
101
+ }
102
+ },
103
+ "inverse": {
104
+ "color": {
105
+ "$value": "{ams.color.text.inverse}",
104
106
  "$extensions": {
105
- "nl.amsterdam.type": "lineHeight"
107
+ "nl.amsterdam.type": "color"
106
108
  }
107
109
  }
108
110
  }
package/src/components/ams/hint.tokens.json CHANGED
@@ -3,12 +3,16 @@
3
3
  "hint": {
4
4
  "font-weight": {
5
5
  "$value": "{ams.typography.body-text.font-weight}",
6
- "$type": "fontWeight"
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "fontWeight"
8
+ }
7
9
  },
8
10
  "in-fieldset": {
9
11
  "color": {
10
12
  "$value": "{ams.color.text.secondary}",
11
- "$type": "color"
13
+ "$extensions": {
14
+ "nl.amsterdam.type": "color"
15
+ }
12
16
  }
13
17
  }
14
18
  }