@amsterdam/design-system-tokens 3.0.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +45 -1
  3. package/build.js +25 -35
  4. package/dist/compact.css +2 -2
  5. package/dist/compact.d.ts +3 -3
  6. package/dist/compact.mjs +2 -2
  7. package/dist/compact.scss +2 -2
  8. package/dist/compact.theme.css +2 -2
  9. package/dist/index.css +118 -47
  10. package/dist/index.d.ts +174 -9
  11. package/dist/index.json +197 -32
  12. package/dist/index.mjs +176 -70
  13. package/dist/index.scss +118 -47
  14. package/dist/index.theme.css +118 -47
  15. package/package.json +2 -2
  16. package/src/brand/ams/aspect-ratio.tokens.json +18 -6
  17. package/src/brand/ams/border.compact.tokens.json +36 -4
  18. package/src/brand/ams/border.tokens.json +36 -4
  19. package/src/brand/ams/color.deprecated.tokens.json +3 -2
  20. package/src/brand/ams/color.tokens.json +106 -23
  21. package/src/brand/ams/cursor.tokens.json +6 -2
  22. package/src/brand/ams/focus.tokens.json +10 -1
  23. package/src/brand/ams/space.compact.tokens.json +30 -6
  24. package/src/brand/ams/space.tokens.json +24 -6
  25. package/src/brand/ams/typography.compact.tokens.json +110 -18
  26. package/src/brand/ams/typography.deprecated.compact.tokens.json +10 -4
  27. package/src/brand/ams/typography.deprecated.tokens.json +20 -8
  28. package/src/brand/ams/typography.tokens.json +131 -24
  29. package/src/common/ams/inputs.tokens.json +121 -18
  30. package/src/common/ams/links.tokens.json +72 -12
  31. package/src/components/ams/accordion.deprecated.tokens.json +29 -7
  32. package/src/components/ams/accordion.tokens.json +46 -8
  33. package/src/components/ams/action-group.tokens.json +7 -1
  34. package/src/components/ams/alert.tokens.json +83 -16
  35. package/src/components/ams/avatar.tokens.json +139 -31
  36. package/src/components/ams/badge.tokens.json +98 -21
  37. package/src/components/ams/blockquote.tokens.json +28 -6
  38. package/src/components/ams/breadcrumb.tokens.json +68 -15
  39. package/src/components/ams/button.tokens.json +176 -34
  40. package/src/components/ams/call-to-action-link.tokens.json +73 -14
  41. package/src/components/ams/card.tokens.json +60 -11
  42. package/src/components/ams/character-count.tokens.json +28 -6
  43. package/src/components/ams/checkbox.deprecated.tokens.json +23 -7
  44. package/src/components/ams/checkbox.tokens.json +154 -36
  45. package/src/components/ams/column.tokens.json +35 -5
  46. package/src/components/ams/date-input.deprecated.tokens.json +14 -8
  47. package/src/components/ams/date-input.tokens.json +92 -25
  48. package/src/components/ams/description-list.tokens.json +86 -13
  49. package/src/components/ams/dialog.tokens.json +144 -23
  50. package/src/components/ams/error-message.tokens.json +31 -6
  51. package/src/components/ams/field-set.deprecated.tokens.json +8 -1
  52. package/src/components/ams/field-set.tokens.json +69 -13
  53. package/src/components/ams/field.deprecated.tokens.json +8 -1
  54. package/src/components/ams/field.tokens.json +24 -4
  55. package/src/components/ams/figure.tokens.json +35 -7
  56. package/src/components/ams/file-input.tokens.json +143 -29
  57. package/src/components/ams/file-list.tokens.json +49 -9
  58. package/src/components/ams/grid.compact.tokens.json +7 -1
  59. package/src/components/ams/grid.tokens.json +79 -13
  60. package/src/components/ams/heading.tokens.json +91 -17
  61. package/src/components/ams/hint.tokens.json +8 -2
  62. package/src/components/ams/icon-button.tokens.json +69 -17
  63. package/src/components/ams/icon.deprecated.tokens.json +10 -4
  64. package/src/components/ams/icon.tokens.json +112 -19
  65. package/src/components/ams/image-slider.tokens.json +60 -10
  66. package/src/components/ams/image.tokens.json +3 -1
  67. package/src/components/ams/invalid-form-alert.tokens.json +7 -1
  68. package/src/components/ams/label.tokens.json +31 -7
  69. package/src/components/ams/link-list.tokens.json +106 -21
  70. package/src/components/ams/link.tokens.json +73 -15
  71. package/src/components/ams/logo.tokens.json +23 -5
  72. package/src/components/ams/mark.tokens.json +4 -1
  73. package/src/components/ams/menu.deprecated.tokens.json +12 -8
  74. package/src/components/ams/menu.tokens.json +119 -21
  75. package/src/components/ams/ordered-list.tokens.json +110 -22
  76. package/src/components/ams/page-footer.tokens.json +98 -18
  77. package/src/components/ams/page-header.compact.tokens.json +19 -3
  78. package/src/components/ams/page-header.tokens.json +214 -34
  79. package/src/components/ams/page-heading.deprecated.tokens.json +38 -8
  80. package/src/components/ams/page.tokens.json +24 -5
  81. package/src/components/ams/pagination.tokens.json +70 -14
  82. package/src/components/ams/paragraph.tokens.json +55 -11
  83. package/src/components/ams/password-input.tokens.json +92 -19
  84. package/src/components/ams/progress-list.tokens.json +372 -0
  85. package/src/components/ams/radio.tokens.json +142 -33
  86. package/src/components/ams/row.tokens.json +35 -5
  87. package/src/components/ams/search-field.tokens.json +101 -22
  88. package/src/components/ams/select.tokens.json +97 -24
  89. package/src/components/ams/skip-link.tokens.json +53 -10
  90. package/src/components/ams/spotlight.tokens.json +28 -7
  91. package/src/components/ams/standalone-link.deprecated.tokens.json +16 -10
  92. package/src/components/ams/standalone-link.tokens.json +75 -16
  93. package/src/components/ams/switch.tokens.json +57 -12
  94. package/src/components/ams/table-of-contents.deprecated.tokens.json +16 -3
  95. package/src/components/ams/table-of-contents.tokens.json +80 -15
  96. package/src/components/ams/table.tokens.json +49 -10
  97. package/src/components/ams/tabs.tokens.json +130 -17
  98. package/src/components/ams/text-area.tokens.json +97 -20
  99. package/src/components/ams/text-input.tokens.json +90 -19
  100. package/src/components/ams/time-input.deprecated.tokens.json +14 -8
  101. package/src/components/ams/time-input.tokens.json +90 -25
  102. package/src/components/ams/unordered-list.tokens.json +112 -22
  103. package/style-dictionary/dimensionToString.js +25 -0
  104. package/style-dictionary/transforms/dtcg-dimension.js +30 -0
  105. package/style-dictionary/transforms/name-custom-camel.js +27 -0
  106. package/style-dictionary/transforms/name-custom-kebab.js +27 -0
  107. package/style-dictionary/transforms/shadow-dtcg-dimension-normalize.js +50 -0
package/src/components/ams/table-of-contents.deprecated.tokens.json CHANGED
@@ -2,9 +2,22 @@
2
2
  "ams": {
3
3
  "table-of-contents": {
4
4
  "heading": {
5
- "font-weight": { "value": "{ams.typography.heading.font-weight}" },
6
- "font-size": { "value": "{ams.typography.heading.4.font-size}" },
7
- "line-height": { "value": "{ams.typography.heading.4.line-height}" }
5
+ "font-weight": {
6
+ "$value": "{ams.typography.heading.font-weight}",
7
+ "$type": "fontWeight"
8
+ },
9
+ "font-size": {
10
+ "$value": "{ams.typography.heading.4.font-size}",
11
+ "$extensions": {
12
+ "nl.amsterdam.type": "fontSize"
13
+ }
14
+ },
15
+ "line-height": {
16
+ "$value": "{ams.typography.heading.4.line-height}",
17
+ "$extensions": {
18
+ "nl.amsterdam.type": "lineHeight"
19
+ }
20
+ }
8
21
  }
9
22
  }
10
23
  }
package/src/components/ams/table-of-contents.tokens.json CHANGED
@@ -1,27 +1,92 @@
1
1
  {
2
2
  "ams": {
3
3
  "table-of-contents": {
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.s}" },
8
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
4
+ "font-family": {
5
+ "$value": "{ams.typography.font-family}",
6
+ "$type": "fontFamily"
7
+ },
8
+ "font-size": {
9
+ "$value": "{ams.typography.body-text.font-size}",
10
+ "$extensions": {
11
+ "nl.amsterdam.type": "fontSize"
12
+ }
13
+ },
14
+ "font-weight": {
15
+ "$value": "{ams.typography.body-text.font-weight}",
16
+ "$type": "fontWeight"
17
+ },
18
+ "gap": {
19
+ "$value": "{ams.space.s}",
20
+ "$type": "dimension",
21
+ "$extensions": {
22
+ "nl.amsterdam.subtype": "space"
23
+ }
24
+ },
25
+ "line-height": {
26
+ "$value": "{ams.typography.body-text.line-height}",
27
+ "$extensions": {
28
+ "nl.amsterdam.type": "lineHeight"
29
+ }
30
+ },
9
31
  "link": {
10
- "color": { "value": "{ams.links.color}" },
11
- "outline-offset": { "value": "{ams.focus.outline-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}" },
32
+ "color": {
33
+ "$value": "{ams.links.color}",
34
+ "$type": "color"
35
+ },
36
+ "outline-offset": {
37
+ "$value": "{ams.focus.outline-offset}",
38
+ "$type": "dimension",
39
+ "$extensions": {
40
+ "nl.amsterdam.subtype": "space"
41
+ }
42
+ },
43
+ "text-decoration-line": {
44
+ "$value": "{ams.links.subtle.text-decoration-line}"
45
+ },
46
+ "text-decoration-thickness": {
47
+ "$value": "{ams.links.text-decoration-thickness}",
48
+ "$type": "dimension"
49
+ },
50
+ "text-underline-offset": {
51
+ "$value": "{ams.links.text-underline-offset}",
52
+ "$type": "dimension",
53
+ "$extensions": {
54
+ "nl.amsterdam.subtype": "space"
55
+ }
56
+ },
15
57
  "hover": {
16
- "color": { "value": "{ams.links.hover.color}" },
17
- "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
58
+ "color": {
59
+ "$value": "{ams.links.hover.color}",
60
+ "$type": "color"
61
+ },
62
+ "text-decoration-line": {
63
+ "$value": "{ams.links.subtle.hover.text-decoration-line}"
64
+ }
18
65
  }
19
66
  },
20
67
  "list": {
21
- "gap": { "value": "{ams.space.s}" },
68
+ "gap": {
69
+ "$value": "{ams.space.s}",
70
+ "$type": "dimension",
71
+ "$extensions": {
72
+ "nl.amsterdam.subtype": "space"
73
+ }
74
+ },
22
75
  "list": {
23
- "padding-block-start": { "value": "{ams.space.s}" },
24
- "padding-inline-start": { "value": "{ams.space.l}" }
76
+ "padding-block-start": {
77
+ "$value": "{ams.space.s}",
78
+ "$type": "dimension",
79
+ "$extensions": {
80
+ "nl.amsterdam.subtype": "space"
81
+ }
82
+ },
83
+ "padding-inline-start": {
84
+ "$value": "{ams.space.l}",
85
+ "$type": "dimension",
86
+ "$extensions": {
87
+ "nl.amsterdam.subtype": "space"
88
+ }
89
+ }
25
90
  }
26
91
  }
27
92
  }
package/src/components/ams/table.tokens.json CHANGED
@@ -1,21 +1,60 @@
1
1
  {
2
2
  "ams": {
3
3
  "table": {
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}" },
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.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
+ },
9
28
  "caption": {
10
- "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
29
+ "font-weight": {
30
+ "$value": "{ams.typography.body-text.bold.font-weight}",
31
+ "$type": "fontWeight"
32
+ }
11
33
  },
12
34
  "cell": {
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}" }
35
+ "border-block-end": {
36
+ "$value": "{ams.border.width.s} solid {ams.color.separator}"
37
+ },
38
+ "padding-block": {
39
+ "$value": "{ams.space.s}",
40
+ "$type": "dimension",
41
+ "$extensions": {
42
+ "nl.amsterdam.subtype": "space"
43
+ }
44
+ },
45
+ "padding-inline": {
46
+ "$value": "{ams.space.m}",
47
+ "$type": "dimension",
48
+ "$extensions": {
49
+ "nl.amsterdam.subtype": "space"
50
+ }
51
+ }
16
52
  },
17
53
  "header-cell": {
18
- "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
54
+ "font-weight": {
55
+ "$value": "{ams.typography.body-text.bold.font-weight}",
56
+ "$type": "fontWeight"
57
+ }
19
58
  }
20
59
  }
21
60
  }
package/src/components/ams/tabs.tokens.json CHANGED
@@ -1,31 +1,144 @@
1
1
  {
2
2
  "ams": {
3
3
  "tabs": {
4
- "gap": { "value": "{ams.space.m}" },
4
+ "gap": {
5
+ "$value": "{ams.space.m}",
6
+ "$type": "dimension",
7
+ "$extensions": {
8
+ "nl.amsterdam.subtype": "space"
9
+ }
10
+ },
5
11
  "list": {
6
- "box-shadow": { "value": "inset 0 calc({ams.border.width.m} * -1) {ams.color.separator}" }
12
+ "box-shadow": {
13
+ "$type": "shadow",
14
+ "$value": {
15
+ "inset": true,
16
+ "offsetX": {
17
+ "value": 0,
18
+ "unit": "rem"
19
+ },
20
+ "offsetY": "calc({ams.border.width.m} * -1)",
21
+ "blur": {
22
+ "value": 0,
23
+ "unit": "rem"
24
+ },
25
+ "spread": {
26
+ "value": 0,
27
+ "unit": "rem"
28
+ },
29
+ "color": "{ams.color.separator}"
30
+ }
31
+ }
7
32
  },
8
33
  "button": {
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}" },
15
- "outline-offset": { "value": "calc({ams.focus.outline-offset} * -1)" },
16
- "padding-block": { "value": "{ams.space.s}" },
17
- "padding-inline": { "value": "{ams.space.m}" },
34
+ "color": {
35
+ "$value": "{ams.color.interactive.default}",
36
+ "$type": "color"
37
+ },
38
+ "cursor": {
39
+ "$value": "{ams.cursor.interactive}"
40
+ },
41
+ "font-family": {
42
+ "$value": "{ams.typography.font-family}",
43
+ "$type": "fontFamily"
44
+ },
45
+ "font-size": {
46
+ "$value": "{ams.typography.body-text.font-size}",
47
+ "$extensions": {
48
+ "nl.amsterdam.type": "fontSize"
49
+ }
50
+ },
51
+ "font-weight": {
52
+ "$value": "{ams.typography.body-text.font-weight}",
53
+ "$type": "fontWeight"
54
+ },
55
+ "line-height": {
56
+ "$value": "{ams.typography.body-text.line-height}",
57
+ "$extensions": {
58
+ "nl.amsterdam.type": "lineHeight"
59
+ }
60
+ },
61
+ "outline-offset": {
62
+ "$value": "calc({ams.focus.outline-offset} * -1)",
63
+ "$type": "dimension",
64
+ "$extensions": {
65
+ "nl.amsterdam.subtype": "space"
66
+ }
67
+ },
68
+ "padding-block": {
69
+ "$value": "{ams.space.s}",
70
+ "$type": "dimension",
71
+ "$extensions": {
72
+ "nl.amsterdam.subtype": "space"
73
+ }
74
+ },
75
+ "padding-inline": {
76
+ "$value": "{ams.space.m}",
77
+ "$type": "dimension",
78
+ "$extensions": {
79
+ "nl.amsterdam.subtype": "space"
80
+ }
81
+ },
18
82
  "hover": {
19
- "box-shadow": { "value": "inset 0 calc({ams.border.width.m} * -1)" },
20
- "color": { "value": "{ams.color.interactive.hover}" }
83
+ "box-shadow": {
84
+ "$type": "shadow",
85
+ "$value": {
86
+ "inset": true,
87
+ "offsetX": {
88
+ "value": 0,
89
+ "unit": "rem"
90
+ },
91
+ "offsetY": "calc({ams.border.width.m} * -1)",
92
+ "blur": {
93
+ "value": 0,
94
+ "unit": "rem"
95
+ },
96
+ "spread": {
97
+ "value": 0,
98
+ "unit": "rem"
99
+ },
100
+ "color": "currentColor"
101
+ }
102
+ },
103
+ "color": {
104
+ "$value": "{ams.color.interactive.hover}",
105
+ "$type": "color"
106
+ }
21
107
  },
22
108
  "selected": {
23
- "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1)" },
24
- "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
109
+ "box-shadow": {
110
+ "$type": "shadow",
111
+ "$value": {
112
+ "inset": true,
113
+ "offsetX": {
114
+ "value": 0,
115
+ "unit": "rem"
116
+ },
117
+ "offsetY": "calc({ams.border.width.xl} * -1)",
118
+ "blur": {
119
+ "value": 0,
120
+ "unit": "rem"
121
+ },
122
+ "spread": {
123
+ "value": 0,
124
+ "unit": "rem"
125
+ },
126
+ "color": "currentColor"
127
+ }
128
+ },
129
+ "font-weight": {
130
+ "$value": "{ams.typography.body-text.bold.font-weight}",
131
+ "$type": "fontWeight"
132
+ }
25
133
  },
26
134
  "disabled": {
27
- "color": { "value": "{ams.color.interactive.disabled}" },
28
- "cursor": { "value": "{ams.cursor.disabled}" }
135
+ "color": {
136
+ "$value": "{ams.color.interactive.disabled}",
137
+ "$type": "color"
138
+ },
139
+ "cursor": {
140
+ "$value": "{ams.cursor.disabled}"
141
+ }
29
142
  }
30
143
  }
31
144
  }
package/src/components/ams/text-area.tokens.json CHANGED
@@ -1,37 +1,114 @@
1
1
  {
2
2
  "ams": {
3
3
  "text-area": {
4
- "background-color": { "value": "{ams.inputs.background-color}" },
5
- "border-color": { "value": "{ams.inputs.border-color}" },
6
- "border-style": { "value": "{ams.inputs.border-style}" },
7
- "border-width": { "value": "{ams.inputs.border-width}" },
8
- "color": { "value": "{ams.inputs.color}" },
9
- "font-family": { "value": "{ams.inputs.font-family}" },
10
- "font-size": { "value": "{ams.inputs.font-size}" },
11
- "font-weight": { "value": "{ams.inputs.font-weight}" },
12
- "line-height": { "value": "{ams.inputs.line-height}" },
4
+ "background-color": {
5
+ "$value": "{ams.inputs.background-color}",
6
+ "$type": "color"
7
+ },
8
+ "border-color": {
9
+ "$value": "{ams.inputs.border-color}",
10
+ "$type": "color"
11
+ },
12
+ "border-style": {
13
+ "$value": "{ams.inputs.border-style}",
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "borderStyle"
16
+ }
17
+ },
18
+ "border-width": {
19
+ "$value": "{ams.inputs.border-width}",
20
+ "$extensions": {
21
+ "nl.amsterdam.type": "borderWidth"
22
+ }
23
+ },
24
+ "color": {
25
+ "$value": "{ams.inputs.color}",
26
+ "$type": "color"
27
+ },
28
+ "font-family": {
29
+ "$value": "{ams.inputs.font-family}",
30
+ "$type": "fontFamily"
31
+ },
32
+ "font-size": {
33
+ "$value": "{ams.inputs.font-size}",
34
+ "$extensions": {
35
+ "nl.amsterdam.type": "fontSize"
36
+ }
37
+ },
38
+ "font-weight": {
39
+ "$value": "{ams.inputs.font-weight}",
40
+ "$type": "fontWeight"
41
+ },
42
+ "line-height": {
43
+ "$value": "{ams.inputs.line-height}",
44
+ "$extensions": {
45
+ "nl.amsterdam.type": "lineHeight"
46
+ }
47
+ },
13
48
  "min-block-size": {
14
- "value": "calc({ams.typography.body-text.line-height} * 1em + 2 * {ams.text-area.padding-block})"
49
+ "$value": "calc({ams.typography.body-text.line-height} * 1em + 2 * {ams.text-area.padding-block})",
50
+ "$type": "dimension",
51
+ "$extensions": {
52
+ "nl.amsterdam.subtype": "space"
53
+ }
54
+ },
55
+ "outline-offset": {
56
+ "$value": "{ams.inputs.outline-offset}",
57
+ "$type": "dimension",
58
+ "$extensions": {
59
+ "nl.amsterdam.subtype": "space"
60
+ }
61
+ },
62
+ "padding-block": {
63
+ "$value": "{ams.inputs.padding-block}",
64
+ "$type": "dimension",
65
+ "$extensions": {
66
+ "nl.amsterdam.subtype": "space"
67
+ }
68
+ },
69
+ "padding-inline": {
70
+ "$value": "{ams.inputs.padding-inline}",
71
+ "$type": "dimension",
72
+ "$extensions": {
73
+ "nl.amsterdam.subtype": "space"
74
+ }
15
75
  },
16
- "outline-offset": { "value": "{ams.inputs.outline-offset}" },
17
- "padding-block": { "value": "{ams.inputs.padding-block}" },
18
- "padding-inline": { "value": "{ams.inputs.padding-inline}" },
19
76
  "disabled": {
20
- "color": { "value": "{ams.inputs.disabled.color}" },
21
- "cursor": { "value": "{ams.cursor.disabled}" }
77
+ "color": {
78
+ "$value": "{ams.inputs.disabled.color}",
79
+ "$type": "color"
80
+ },
81
+ "cursor": {
82
+ "$value": "{ams.cursor.disabled}"
83
+ }
22
84
  },
23
85
  "hover": {
24
- "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" }
86
+ "box-shadow": {
87
+ "$type": "shadow",
88
+ "$value": "{ams.inputs.hover.box-shadow}"
89
+ }
25
90
  },
26
91
  "invalid": {
27
- "border-color": { "value": "{ams.inputs.invalid.border-color}" },
92
+ "border-color": {
93
+ "$value": "{ams.inputs.invalid.border-color}",
94
+ "$type": "color"
95
+ },
28
96
  "hover": {
29
- "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
30
- "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
97
+ "border-color": {
98
+ "$value": "{ams.inputs.invalid.hover.border-color}",
99
+ "$type": "color"
100
+ },
101
+ "box-shadow": {
102
+ "$type": "shadow",
103
+ "$value": "{ams.inputs.invalid.hover.box-shadow}"
104
+ }
31
105
  }
32
106
  },
33
107
  "placeholder": {
34
- "color": { "value": "{ams.inputs.placeholder.color}" }
108
+ "color": {
109
+ "$value": "{ams.inputs.placeholder.color}",
110
+ "$type": "color"
111
+ }
35
112
  }
36
113
  }
37
114
  }
package/src/components/ams/text-input.tokens.json CHANGED
@@ -1,34 +1,105 @@
1
1
  {
2
2
  "ams": {
3
3
  "text-input": {
4
- "background-color": { "value": "{ams.inputs.background-color}" },
5
- "border-color": { "value": "{ams.inputs.border-color}" },
6
- "border-style": { "value": "{ams.inputs.border-style}" },
7
- "border-width": { "value": "{ams.inputs.border-width}" },
8
- "color": { "value": "{ams.inputs.color}" },
9
- "font-family": { "value": "{ams.inputs.font-family}" },
10
- "font-size": { "value": "{ams.inputs.font-size}" },
11
- "font-weight": { "value": "{ams.inputs.font-weight}" },
12
- "line-height": { "value": "{ams.inputs.line-height}" },
13
- "outline-offset": { "value": "{ams.inputs.outline-offset}" },
14
- "padding-block": { "value": "{ams.inputs.padding-block}" },
15
- "padding-inline": { "value": "{ams.inputs.padding-inline}" },
4
+ "background-color": {
5
+ "$value": "{ams.inputs.background-color}",
6
+ "$type": "color"
7
+ },
8
+ "border-color": {
9
+ "$value": "{ams.inputs.border-color}",
10
+ "$type": "color"
11
+ },
12
+ "border-style": {
13
+ "$value": "{ams.inputs.border-style}",
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "borderStyle"
16
+ }
17
+ },
18
+ "border-width": {
19
+ "$value": "{ams.inputs.border-width}",
20
+ "$extensions": {
21
+ "nl.amsterdam.type": "borderWidth"
22
+ }
23
+ },
24
+ "color": {
25
+ "$value": "{ams.inputs.color}",
26
+ "$type": "color"
27
+ },
28
+ "font-family": {
29
+ "$value": "{ams.inputs.font-family}",
30
+ "$type": "fontFamily"
31
+ },
32
+ "font-size": {
33
+ "$value": "{ams.inputs.font-size}",
34
+ "$extensions": {
35
+ "nl.amsterdam.type": "fontSize"
36
+ }
37
+ },
38
+ "font-weight": {
39
+ "$value": "{ams.inputs.font-weight}",
40
+ "$type": "fontWeight"
41
+ },
42
+ "line-height": {
43
+ "$value": "{ams.inputs.line-height}",
44
+ "$extensions": {
45
+ "nl.amsterdam.type": "lineHeight"
46
+ }
47
+ },
48
+ "outline-offset": {
49
+ "$value": "{ams.inputs.outline-offset}",
50
+ "$type": "dimension",
51
+ "$extensions": {
52
+ "nl.amsterdam.subtype": "space"
53
+ }
54
+ },
55
+ "padding-block": {
56
+ "$value": "{ams.inputs.padding-block}",
57
+ "$type": "dimension",
58
+ "$extensions": {
59
+ "nl.amsterdam.subtype": "space"
60
+ }
61
+ },
62
+ "padding-inline": {
63
+ "$value": "{ams.inputs.padding-inline}",
64
+ "$type": "dimension",
65
+ "$extensions": {
66
+ "nl.amsterdam.subtype": "space"
67
+ }
68
+ },
16
69
  "disabled": {
17
- "color": { "value": "{ams.inputs.disabled.color}" },
18
- "cursor": { "value": "{ams.cursor.disabled}" }
70
+ "color": {
71
+ "$value": "{ams.inputs.disabled.color}",
72
+ "$type": "color"
73
+ },
74
+ "cursor": {
75
+ "$value": "{ams.cursor.disabled}"
76
+ }
19
77
  },
20
78
  "hover": {
21
- "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" }
79
+ "box-shadow": {
80
+ "$value": "{ams.inputs.hover.box-shadow}"
81
+ }
22
82
  },
23
83
  "invalid": {
24
- "border-color": { "value": "{ams.inputs.invalid.border-color}" },
84
+ "border-color": {
85
+ "$value": "{ams.inputs.invalid.border-color}",
86
+ "$type": "color"
87
+ },
25
88
  "hover": {
26
- "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
27
- "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
89
+ "border-color": {
90
+ "$value": "{ams.inputs.invalid.hover.border-color}",
91
+ "$type": "color"
92
+ },
93
+ "box-shadow": {
94
+ "$value": "{ams.inputs.invalid.hover.box-shadow}"
95
+ }
28
96
  }
29
97
  },
30
98
  "placeholder": {
31
- "color": { "value": "{ams.inputs.placeholder.color}" }
99
+ "color": {
100
+ "$value": "{ams.inputs.placeholder.color}",
101
+ "$type": "color"
102
+ }
32
103
  }
33
104
  }
34
105
  }