@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/table-of-contents.tokens.json CHANGED
@@ -3,7 +3,9 @@
3
3
  "table-of-contents": {
4
4
  "font-family": {
5
5
  "$value": "{ams.typography.font-family}",
6
- "$type": "fontFamily"
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "fontFamily"
8
+ }
7
9
  },
8
10
  "font-size": {
9
11
  "$value": "{ams.typography.body-text.font-size}",
@@ -13,78 +15,94 @@
13
15
  },
14
16
  "font-weight": {
15
17
  "$value": "{ams.typography.body-text.font-weight}",
16
- "$type": "fontWeight"
18
+ "$extensions": {
19
+ "nl.amsterdam.type": "fontWeight"
20
+ }
17
21
  },
18
22
  "gap": {
19
23
  "$value": "{ams.space.s}",
20
- "$type": "dimension",
21
24
  "$extensions": {
22
- "nl.amsterdam.subtype": "space"
25
+ "nl.amsterdam.subtype": "space",
26
+ "nl.amsterdam.type": "dimension"
23
27
  }
24
28
  },
25
29
  "line-height": {
26
30
  "$value": "{ams.typography.body-text.line-height}",
27
31
  "$extensions": {
28
- "nl.amsterdam.type": "lineHeight"
32
+ "nl.amsterdam.subtype": "lineHeight",
33
+ "nl.amsterdam.type": "number"
29
34
  }
30
35
  },
31
36
  "link": {
32
37
  "color": {
33
38
  "$value": "{ams.links.color}",
34
- "$type": "color"
39
+ "$extensions": {
40
+ "nl.amsterdam.type": "color"
41
+ }
35
42
  },
36
43
  "outline-offset": {
37
44
  "$value": "{ams.focus.outline-offset}",
38
- "$type": "dimension",
39
45
  "$extensions": {
40
- "nl.amsterdam.subtype": "space"
46
+ "nl.amsterdam.subtype": "space",
47
+ "nl.amsterdam.type": "dimension"
41
48
  }
42
49
  },
43
50
  "text-decoration-line": {
44
- "$value": "{ams.links.subtle.text-decoration-line}"
51
+ "$value": "{ams.links.subtle.text-decoration-line}",
52
+ "$extensions": {
53
+ "nl.amsterdam.type": "textDecorationLine"
54
+ }
45
55
  },
46
56
  "text-decoration-thickness": {
47
57
  "$value": "{ams.links.text-decoration-thickness}",
48
- "$type": "dimension"
58
+ "$extensions": {
59
+ "nl.amsterdam.subtype": "space",
60
+ "nl.amsterdam.type": "dimension"
61
+ }
49
62
  },
50
63
  "text-underline-offset": {
51
64
  "$value": "{ams.links.text-underline-offset}",
52
- "$type": "dimension",
53
65
  "$extensions": {
54
- "nl.amsterdam.subtype": "space"
66
+ "nl.amsterdam.subtype": "space",
67
+ "nl.amsterdam.type": "dimension"
55
68
  }
56
69
  },
57
70
  "hover": {
58
71
  "color": {
59
72
  "$value": "{ams.links.hover.color}",
60
- "$type": "color"
73
+ "$extensions": {
74
+ "nl.amsterdam.type": "color"
75
+ }
61
76
  },
62
77
  "text-decoration-line": {
63
- "$value": "{ams.links.subtle.hover.text-decoration-line}"
78
+ "$value": "{ams.links.subtle.hover.text-decoration-line}",
79
+ "$extensions": {
80
+ "nl.amsterdam.type": "textDecorationLine"
81
+ }
64
82
  }
65
83
  }
66
84
  },
67
85
  "list": {
68
86
  "gap": {
69
87
  "$value": "{ams.space.s}",
70
- "$type": "dimension",
71
88
  "$extensions": {
72
- "nl.amsterdam.subtype": "space"
89
+ "nl.amsterdam.subtype": "space",
90
+ "nl.amsterdam.type": "dimension"
73
91
  }
74
92
  },
75
93
  "list": {
76
94
  "padding-block-start": {
77
95
  "$value": "{ams.space.s}",
78
- "$type": "dimension",
79
96
  "$extensions": {
80
- "nl.amsterdam.subtype": "space"
97
+ "nl.amsterdam.subtype": "space",
98
+ "nl.amsterdam.type": "dimension"
81
99
  }
82
100
  },
83
101
  "padding-inline-start": {
84
102
  "$value": "{ams.space.l}",
85
- "$type": "dimension",
86
103
  "$extensions": {
87
- "nl.amsterdam.subtype": "space"
104
+ "nl.amsterdam.subtype": "space",
105
+ "nl.amsterdam.type": "dimension"
88
106
  }
89
107
  }
90
108
  }
package/src/components/ams/table.tokens.json CHANGED
@@ -3,11 +3,15 @@
3
3
  "table": {
4
4
  "color": {
5
5
  "$value": "{ams.color.text.default}",
6
- "$type": "color"
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "color"
8
+ }
7
9
  },
8
10
  "font-family": {
9
11
  "$value": "{ams.typography.font-family}",
10
- "$type": "fontFamily"
12
+ "$extensions": {
13
+ "nl.amsterdam.type": "fontFamily"
14
+ }
11
15
  },
12
16
  "font-size": {
13
17
  "$value": "{ams.typography.body-text.font-size}",
@@ -17,43 +21,58 @@
17
21
  },
18
22
  "font-weight": {
19
23
  "$value": "{ams.typography.body-text.font-weight}",
20
- "$type": "fontWeight"
24
+ "$extensions": {
25
+ "nl.amsterdam.type": "fontWeight"
26
+ }
21
27
  },
22
28
  "line-height": {
23
29
  "$value": "{ams.typography.body-text.line-height}",
24
30
  "$extensions": {
25
- "nl.amsterdam.type": "lineHeight"
31
+ "nl.amsterdam.subtype": "lineHeight",
32
+ "nl.amsterdam.type": "number"
26
33
  }
27
34
  },
28
35
  "caption": {
29
36
  "font-weight": {
30
37
  "$value": "{ams.typography.body-text.bold.font-weight}",
31
38
  "$type": "fontWeight"
39
+ },
40
+ "margin-block-end": {
41
+ "$value": "{ams.space.s}",
42
+ "$type": "dimension",
43
+ "$extensions": {
44
+ "nl.amsterdam.subtype": "space"
45
+ }
32
46
  }
33
47
  },
34
48
  "cell": {
35
49
  "border-block-end": {
36
- "$value": "{ams.border.width.s} solid {ams.color.separator}"
50
+ "$value": "{ams.border.width.s} solid {ams.color.separator}",
51
+ "$extensions": {
52
+ "nl.amsterdam.type": "border"
53
+ }
37
54
  },
38
55
  "padding-block": {
39
56
  "$value": "{ams.space.s}",
40
- "$type": "dimension",
41
57
  "$extensions": {
42
- "nl.amsterdam.subtype": "space"
58
+ "nl.amsterdam.subtype": "space",
59
+ "nl.amsterdam.type": "dimension"
43
60
  }
44
61
  },
45
62
  "padding-inline": {
46
63
  "$value": "{ams.space.m}",
47
- "$type": "dimension",
48
64
  "$extensions": {
49
- "nl.amsterdam.subtype": "space"
65
+ "nl.amsterdam.subtype": "space",
66
+ "nl.amsterdam.type": "dimension"
50
67
  }
51
68
  }
52
69
  },
53
70
  "header-cell": {
54
71
  "font-weight": {
55
72
  "$value": "{ams.typography.body-text.bold.font-weight}",
56
- "$type": "fontWeight"
73
+ "$extensions": {
74
+ "nl.amsterdam.type": "fontWeight"
75
+ }
57
76
  }
58
77
  }
59
78
  }
package/src/components/ams/tabs.tokens.json CHANGED
@@ -3,9 +3,9 @@
3
3
  "tabs": {
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
  "list": {
@@ -17,7 +17,7 @@
17
17
  "value": 0,
18
18
  "unit": "rem"
19
19
  },
20
- "offsetY": "calc({ams.border.width.m} * -1)",
20
+ "offsetY": "{ams.border.width.negative.m}",
21
21
  "blur": {
22
22
  "value": 0,
23
23
  "unit": "rem"
@@ -33,14 +33,21 @@
33
33
  "button": {
34
34
  "color": {
35
35
  "$value": "{ams.color.interactive.default}",
36
- "$type": "color"
36
+ "$extensions": {
37
+ "nl.amsterdam.type": "color"
38
+ }
37
39
  },
38
40
  "cursor": {
39
- "$value": "{ams.cursor.interactive}"
41
+ "$value": "{ams.cursor.interactive}",
42
+ "$extensions": {
43
+ "nl.amsterdam.type": "cursor"
44
+ }
40
45
  },
41
46
  "font-family": {
42
47
  "$value": "{ams.typography.font-family}",
43
- "$type": "fontFamily"
48
+ "$extensions": {
49
+ "nl.amsterdam.type": "fontFamily"
50
+ }
44
51
  },
45
52
  "font-size": {
46
53
  "$value": "{ams.typography.body-text.font-size}",
@@ -50,33 +57,36 @@
50
57
  },
51
58
  "font-weight": {
52
59
  "$value": "{ams.typography.body-text.font-weight}",
53
- "$type": "fontWeight"
60
+ "$extensions": {
61
+ "nl.amsterdam.type": "fontWeight"
62
+ }
54
63
  },
55
64
  "line-height": {
56
65
  "$value": "{ams.typography.body-text.line-height}",
57
66
  "$extensions": {
58
- "nl.amsterdam.type": "lineHeight"
67
+ "nl.amsterdam.subtype": "lineHeight",
68
+ "nl.amsterdam.type": "number"
59
69
  }
60
70
  },
61
71
  "outline-offset": {
62
72
  "$value": "calc({ams.focus.outline-offset} * -1)",
63
- "$type": "dimension",
64
73
  "$extensions": {
65
- "nl.amsterdam.subtype": "space"
74
+ "nl.amsterdam.subtype": "space",
75
+ "nl.amsterdam.type": "dimension"
66
76
  }
67
77
  },
68
78
  "padding-block": {
69
79
  "$value": "{ams.space.s}",
70
- "$type": "dimension",
71
80
  "$extensions": {
72
- "nl.amsterdam.subtype": "space"
81
+ "nl.amsterdam.subtype": "space",
82
+ "nl.amsterdam.type": "dimension"
73
83
  }
74
84
  },
75
85
  "padding-inline": {
76
86
  "$value": "{ams.space.m}",
77
- "$type": "dimension",
78
87
  "$extensions": {
79
- "nl.amsterdam.subtype": "space"
88
+ "nl.amsterdam.subtype": "space",
89
+ "nl.amsterdam.type": "dimension"
80
90
  }
81
91
  },
82
92
  "hover": {
@@ -88,7 +98,7 @@
88
98
  "value": 0,
89
99
  "unit": "rem"
90
100
  },
91
- "offsetY": "calc({ams.border.width.m} * -1)",
101
+ "offsetY": "{ams.border.width.negative.m}",
92
102
  "blur": {
93
103
  "value": 0,
94
104
  "unit": "rem"
@@ -102,7 +112,9 @@
102
112
  },
103
113
  "color": {
104
114
  "$value": "{ams.color.interactive.hover}",
105
- "$type": "color"
115
+ "$extensions": {
116
+ "nl.amsterdam.type": "color"
117
+ }
106
118
  }
107
119
  },
108
120
  "selected": {
@@ -114,7 +126,7 @@
114
126
  "value": 0,
115
127
  "unit": "rem"
116
128
  },
117
- "offsetY": "calc({ams.border.width.xl} * -1)",
129
+ "offsetY": "{ams.border.width.negative.xl}",
118
130
  "blur": {
119
131
  "value": 0,
120
132
  "unit": "rem"
@@ -128,16 +140,23 @@
128
140
  },
129
141
  "font-weight": {
130
142
  "$value": "{ams.typography.body-text.bold.font-weight}",
131
- "$type": "fontWeight"
143
+ "$extensions": {
144
+ "nl.amsterdam.type": "fontWeight"
145
+ }
132
146
  }
133
147
  },
134
148
  "disabled": {
135
149
  "color": {
136
150
  "$value": "{ams.color.interactive.disabled}",
137
- "$type": "color"
151
+ "$extensions": {
152
+ "nl.amsterdam.type": "color"
153
+ }
138
154
  },
139
155
  "cursor": {
140
- "$value": "{ams.cursor.disabled}"
156
+ "$value": "{ams.cursor.disabled}",
157
+ "$extensions": {
158
+ "nl.amsterdam.type": "cursor"
159
+ }
141
160
  }
142
161
  }
143
162
  }
package/src/components/ams/text-area.tokens.json CHANGED
@@ -3,11 +3,15 @@
3
3
  "text-area": {
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": "{ams.inputs.border-style}",
@@ -23,11 +27,15 @@
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
  "font-family": {
29
35
  "$value": "{ams.inputs.font-family}",
30
- "$type": "fontFamily"
36
+ "$extensions": {
37
+ "nl.amsterdam.type": "fontFamily"
38
+ }
31
39
  },
32
40
  "font-size": {
33
41
  "$value": "{ams.inputs.font-size}",
@@ -37,77 +45,95 @@
37
45
  },
38
46
  "font-weight": {
39
47
  "$value": "{ams.inputs.font-weight}",
40
- "$type": "fontWeight"
48
+ "$extensions": {
49
+ "nl.amsterdam.type": "fontWeight"
50
+ }
41
51
  },
42
52
  "line-height": {
43
53
  "$value": "{ams.inputs.line-height}",
44
54
  "$extensions": {
45
- "nl.amsterdam.type": "lineHeight"
55
+ "nl.amsterdam.subtype": "lineHeight",
56
+ "nl.amsterdam.type": "number"
46
57
  }
47
58
  },
48
59
  "min-block-size": {
49
60
  "$value": "calc({ams.typography.body-text.line-height} * 1em + 2 * {ams.text-area.padding-block})",
50
- "$type": "dimension",
51
61
  "$extensions": {
52
- "nl.amsterdam.subtype": "space"
62
+ "nl.amsterdam.subtype": "space",
63
+ "nl.amsterdam.type": "dimension"
53
64
  }
54
65
  },
55
66
  "outline-offset": {
56
67
  "$value": "{ams.inputs.outline-offset}",
57
- "$type": "dimension",
58
68
  "$extensions": {
59
- "nl.amsterdam.subtype": "space"
69
+ "nl.amsterdam.subtype": "space",
70
+ "nl.amsterdam.type": "dimension"
60
71
  }
61
72
  },
62
73
  "padding-block": {
63
74
  "$value": "{ams.inputs.padding-block}",
64
- "$type": "dimension",
65
75
  "$extensions": {
66
- "nl.amsterdam.subtype": "space"
76
+ "nl.amsterdam.subtype": "space",
77
+ "nl.amsterdam.type": "dimension"
67
78
  }
68
79
  },
69
80
  "padding-inline": {
70
81
  "$value": "{ams.inputs.padding-inline}",
71
- "$type": "dimension",
72
82
  "$extensions": {
73
- "nl.amsterdam.subtype": "space"
83
+ "nl.amsterdam.subtype": "space",
84
+ "nl.amsterdam.type": "dimension"
74
85
  }
75
86
  },
76
87
  "disabled": {
77
88
  "color": {
78
89
  "$value": "{ams.inputs.disabled.color}",
79
- "$type": "color"
90
+ "$extensions": {
91
+ "nl.amsterdam.type": "color"
92
+ }
80
93
  },
81
94
  "cursor": {
82
- "$value": "{ams.cursor.disabled}"
95
+ "$value": "{ams.cursor.disabled}",
96
+ "$extensions": {
97
+ "nl.amsterdam.type": "cursor"
98
+ }
83
99
  }
84
100
  },
85
101
  "hover": {
86
102
  "box-shadow": {
87
- "$type": "shadow",
88
- "$value": "{ams.inputs.hover.box-shadow}"
103
+ "$value": "{ams.inputs.hover.box-shadow}",
104
+ "$extensions": {
105
+ "nl.amsterdam.type": "shadow"
106
+ }
89
107
  }
90
108
  },
91
109
  "invalid": {
92
110
  "border-color": {
93
111
  "$value": "{ams.inputs.invalid.border-color}",
94
- "$type": "color"
112
+ "$extensions": {
113
+ "nl.amsterdam.type": "color"
114
+ }
95
115
  },
96
116
  "hover": {
97
117
  "border-color": {
98
118
  "$value": "{ams.inputs.invalid.hover.border-color}",
99
- "$type": "color"
119
+ "$extensions": {
120
+ "nl.amsterdam.type": "color"
121
+ }
100
122
  },
101
123
  "box-shadow": {
102
- "$type": "shadow",
103
- "$value": "{ams.inputs.invalid.hover.box-shadow}"
124
+ "$value": "{ams.inputs.invalid.hover.box-shadow}",
125
+ "$extensions": {
126
+ "nl.amsterdam.type": "shadow"
127
+ }
104
128
  }
105
129
  }
106
130
  },
107
131
  "placeholder": {
108
132
  "color": {
109
133
  "$value": "{ams.inputs.placeholder.color}",
110
- "$type": "color"
134
+ "$extensions": {
135
+ "nl.amsterdam.type": "color"
136
+ }
111
137
  }
112
138
  }
113
139
  }
package/src/components/ams/text-input.tokens.json CHANGED
@@ -3,11 +3,15 @@
3
3
  "text-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": "{ams.inputs.border-style}",
@@ -23,11 +27,15 @@
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
  "font-family": {
29
35
  "$value": "{ams.inputs.font-family}",
30
- "$type": "fontFamily"
36
+ "$extensions": {
37
+ "nl.amsterdam.type": "fontFamily"
38
+ }
31
39
  },
32
40
  "font-size": {
33
41
  "$value": "{ams.inputs.font-size}",
@@ -37,68 +45,88 @@
37
45
  },
38
46
  "font-weight": {
39
47
  "$value": "{ams.inputs.font-weight}",
40
- "$type": "fontWeight"
48
+ "$extensions": {
49
+ "nl.amsterdam.type": "fontWeight"
50
+ }
41
51
  },
42
52
  "line-height": {
43
53
  "$value": "{ams.inputs.line-height}",
44
54
  "$extensions": {
45
- "nl.amsterdam.type": "lineHeight"
55
+ "nl.amsterdam.subtype": "lineHeight",
56
+ "nl.amsterdam.type": "number"
46
57
  }
47
58
  },
48
59
  "outline-offset": {
49
60
  "$value": "{ams.inputs.outline-offset}",
50
- "$type": "dimension",
51
61
  "$extensions": {
52
- "nl.amsterdam.subtype": "space"
62
+ "nl.amsterdam.subtype": "space",
63
+ "nl.amsterdam.type": "dimension"
53
64
  }
54
65
  },
55
66
  "padding-block": {
56
67
  "$value": "{ams.inputs.padding-block}",
57
- "$type": "dimension",
58
68
  "$extensions": {
59
- "nl.amsterdam.subtype": "space"
69
+ "nl.amsterdam.subtype": "space",
70
+ "nl.amsterdam.type": "dimension"
60
71
  }
61
72
  },
62
73
  "padding-inline": {
63
74
  "$value": "{ams.inputs.padding-inline}",
64
- "$type": "dimension",
65
75
  "$extensions": {
66
- "nl.amsterdam.subtype": "space"
76
+ "nl.amsterdam.subtype": "space",
77
+ "nl.amsterdam.type": "dimension"
67
78
  }
68
79
  },
69
80
  "disabled": {
70
81
  "color": {
71
82
  "$value": "{ams.inputs.disabled.color}",
72
- "$type": "color"
83
+ "$extensions": {
84
+ "nl.amsterdam.type": "color"
85
+ }
73
86
  },
74
87
  "cursor": {
75
- "$value": "{ams.cursor.disabled}"
88
+ "$value": "{ams.cursor.disabled}",
89
+ "$extensions": {
90
+ "nl.amsterdam.type": "cursor"
91
+ }
76
92
  }
77
93
  },
78
94
  "hover": {
79
95
  "box-shadow": {
80
- "$value": "{ams.inputs.hover.box-shadow}"
96
+ "$value": "{ams.inputs.hover.box-shadow}",
97
+ "$extensions": {
98
+ "nl.amsterdam.type": "shadow"
99
+ }
81
100
  }
82
101
  },
83
102
  "invalid": {
84
103
  "border-color": {
85
104
  "$value": "{ams.inputs.invalid.border-color}",
86
- "$type": "color"
105
+ "$extensions": {
106
+ "nl.amsterdam.type": "color"
107
+ }
87
108
  },
88
109
  "hover": {
89
110
  "border-color": {
90
111
  "$value": "{ams.inputs.invalid.hover.border-color}",
91
- "$type": "color"
112
+ "$extensions": {
113
+ "nl.amsterdam.type": "color"
114
+ }
92
115
  },
93
116
  "box-shadow": {
94
- "$value": "{ams.inputs.invalid.hover.box-shadow}"
117
+ "$value": "{ams.inputs.invalid.hover.box-shadow}",
118
+ "$extensions": {
119
+ "nl.amsterdam.type": "shadow"
120
+ }
95
121
  }
96
122
  }
97
123
  },
98
124
  "placeholder": {
99
125
  "color": {
100
126
  "$value": "{ams.inputs.placeholder.color}",
101
- "$type": "color"
127
+ "$extensions": {
128
+ "nl.amsterdam.type": "color"
129
+ }
102
130
  }
103
131
  }
104
132
  }