@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/dialog.tokens.json CHANGED
@@ -1,43 +1,164 @@
1
1
  {
2
2
  "ams": {
3
3
  "dialog": {
4
- "background-color": { "value": "{ams.color.background}" },
5
- "border-color": { "value": "{ams.dialog.background-color}" },
6
- "border-style": { "value": "solid" },
7
- "border-width": { "value": "{ams.border.width.m}" },
8
- "gap": { "value": "{ams.space.m}" },
9
- "inline-size": { "value": "calc(100% - 2 * {ams.space.l})" },
10
- "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.l})" },
11
- "max-inline-size": { "value": "48rem" },
4
+ "background-color": {
5
+ "$value": "{ams.color.background}",
6
+ "$type": "color"
7
+ },
8
+ "border-color": {
9
+ "$value": "{ams.dialog.background-color}",
10
+ "$type": "color"
11
+ },
12
+ "border-radius": {
13
+ "$value": "initial"
14
+ },
15
+ "border-style": {
16
+ "$value": "solid",
17
+ "$extensions": {
18
+ "nl.amsterdam.type": "borderStyle"
19
+ }
20
+ },
21
+ "border-width": {
22
+ "$value": "{ams.border.width.m}",
23
+ "$extensions": {
24
+ "nl.amsterdam.type": "borderWidth"
25
+ }
26
+ },
27
+ "box-shadow": {
28
+ "$value": "initial"
29
+ },
30
+ "gap": {
31
+ "$value": "{ams.space.m}",
32
+ "$type": "dimension",
33
+ "$extensions": {
34
+ "nl.amsterdam.subtype": "space"
35
+ }
36
+ },
37
+ "inline-size": {
38
+ "$value": "calc(100% - 2 * {ams.space.l})",
39
+ "$type": "dimension"
40
+ },
41
+ "max-block-size": {
42
+ "$value": "calc(100dvh - 2 * {ams.space.l})",
43
+ "$type": "dimension"
44
+ },
45
+ "max-inline-size": {
46
+ "$value": {
47
+ "value": 48,
48
+ "unit": "rem"
49
+ },
50
+ "$type": "dimension"
51
+ },
12
52
  "medium": {
13
- "inline-size": { "value": "calc(100% - 2 * {ams.space.xl})" },
14
- "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.xl})" }
53
+ "inline-size": {
54
+ "$value": "calc(100% - 2 * {ams.space.xl})",
55
+ "$type": "dimension"
56
+ },
57
+ "max-block-size": {
58
+ "$value": "calc(100dvh - 2 * {ams.space.xl})",
59
+ "$type": "dimension"
60
+ }
15
61
  },
16
62
  "backdrop": {
17
- "background-color": { "value": "rgb(24 24 24 / 62.5%)" }
63
+ "background-color": {
64
+ "$value": "rgb(24 24 24 / 62.5%)",
65
+ "$type": "color"
66
+ }
18
67
  },
19
68
  "header": {
20
- "gap": { "value": "{ams.space.m}" },
21
- "padding-block": { "value": "{ams.space.l} 0" },
22
- "padding-inline": { "value": "{ams.space.l}" },
69
+ "gap": {
70
+ "$value": "{ams.space.m}",
71
+ "$type": "dimension",
72
+ "$extensions": {
73
+ "nl.amsterdam.subtype": "space"
74
+ }
75
+ },
76
+ "padding-block": {
77
+ "$value": "{ams.space.l} 0",
78
+ "$type": "dimension",
79
+ "$extensions": {
80
+ "nl.amsterdam.subtype": "space"
81
+ }
82
+ },
83
+ "padding-inline": {
84
+ "$value": "{ams.space.l}",
85
+ "$type": "dimension",
86
+ "$extensions": {
87
+ "nl.amsterdam.subtype": "space"
88
+ }
89
+ },
23
90
  "medium": {
24
- "padding-block": { "value": "{ams.space.xl} 0" },
25
- "padding-inline": { "value": "{ams.space.xl}" }
91
+ "padding-block": {
92
+ "$value": "{ams.space.xl} 0",
93
+ "$type": "dimension",
94
+ "$extensions": {
95
+ "nl.amsterdam.subtype": "space"
96
+ }
97
+ },
98
+ "padding-inline": {
99
+ "$value": "{ams.space.xl}",
100
+ "$type": "dimension",
101
+ "$extensions": {
102
+ "nl.amsterdam.subtype": "space"
103
+ }
104
+ }
26
105
  }
27
106
  },
28
107
  "body": {
29
- "padding-block": { "value": "0" },
30
- "padding-inline": { "value": "{ams.space.l}" },
108
+ "padding-block": {
109
+ "$value": "0",
110
+ "$type": "dimension",
111
+ "$extensions": {
112
+ "nl.amsterdam.subtype": "space"
113
+ }
114
+ },
115
+ "padding-inline": {
116
+ "$value": "{ams.space.l}",
117
+ "$type": "dimension",
118
+ "$extensions": {
119
+ "nl.amsterdam.subtype": "space"
120
+ }
121
+ },
31
122
  "medium": {
32
- "padding-inline": { "value": "{ams.space.xl}" }
123
+ "padding-inline": {
124
+ "$value": "{ams.space.xl}",
125
+ "$type": "dimension",
126
+ "$extensions": {
127
+ "nl.amsterdam.subtype": "space"
128
+ }
129
+ }
33
130
  }
34
131
  },
35
132
  "footer": {
36
- "padding-block": { "value": "0 {ams.space.l}" },
37
- "padding-inline": { "value": "{ams.space.l}" },
133
+ "padding-block": {
134
+ "$value": "0 {ams.space.l}",
135
+ "$type": "dimension",
136
+ "$extensions": {
137
+ "nl.amsterdam.subtype": "space"
138
+ }
139
+ },
140
+ "padding-inline": {
141
+ "$value": "{ams.space.l}",
142
+ "$type": "dimension",
143
+ "$extensions": {
144
+ "nl.amsterdam.subtype": "space"
145
+ }
146
+ },
38
147
  "medium": {
39
- "padding-block": { "value": "0 {ams.space.xl}" },
40
- "padding-inline": { "value": "{ams.space.xl}" }
148
+ "padding-block": {
149
+ "$value": "0 {ams.space.xl}",
150
+ "$type": "dimension",
151
+ "$extensions": {
152
+ "nl.amsterdam.subtype": "space"
153
+ }
154
+ },
155
+ "padding-inline": {
156
+ "$value": "{ams.space.xl}",
157
+ "$type": "dimension",
158
+ "$extensions": {
159
+ "nl.amsterdam.subtype": "space"
160
+ }
161
+ }
41
162
  }
42
163
  }
43
164
  }
package/src/components/ams/error-message.tokens.json CHANGED
@@ -1,12 +1,37 @@
1
1
  {
2
2
  "ams": {
3
3
  "error-message": {
4
- "color": { "value": "{ams.color.feedback.error}" },
5
- "font-family": { "value": "{ams.typography.font-family}" },
6
- "font-size": { "value": "{ams.typography.body-text.font-size}" },
7
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
8
- "gap": { "value": "{ams.space.xs}" },
9
- "line-height": { "value": "{ams.typography.body-text.line-height}" }
4
+ "color": {
5
+ "$value": "{ams.color.feedback.error}",
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
+ "gap": {
23
+ "$value": "{ams.space.xs}",
24
+ "$type": "dimension",
25
+ "$extensions": {
26
+ "nl.amsterdam.subtype": "space"
27
+ }
28
+ },
29
+ "line-height": {
30
+ "$value": "{ams.typography.body-text.line-height}",
31
+ "$extensions": {
32
+ "nl.amsterdam.type": "lineHeight"
33
+ }
34
+ }
10
35
  }
11
36
  }
12
37
  }
package/src/components/ams/field-set.deprecated.tokens.json CHANGED
@@ -2,7 +2,14 @@
2
2
  "ams": {
3
3
  "field-set": {
4
4
  "legend": {
5
- "margin-block-end": { "value": "{ams.space.s}" }
5
+ "margin-block-end": {
6
+ "$deprecated": "This token will be removed in release 5.0.0",
7
+ "$value": "{ams.space.s}",
8
+ "$type": "dimension",
9
+ "$extensions": {
10
+ "nl.amsterdam.subtype": "space"
11
+ }
12
+ }
6
13
  }
7
14
  }
8
15
  }
package/src/components/ams/field-set.tokens.json CHANGED
@@ -2,30 +2,86 @@
2
2
  "ams": {
3
3
  "field-set": {
4
4
  "child": {
5
- "margin-block-end": { "value": "{ams.space.xs}" },
5
+ "margin-block-end": {
6
+ "$value": "{ams.space.xs}",
7
+ "$type": "dimension",
8
+ "$extensions": {
9
+ "nl.amsterdam.subtype": "space"
10
+ }
11
+ },
6
12
  "before-error-message": {
7
- "margin-block-end": { "value": "{ams.space.s}" }
13
+ "margin-block-end": {
14
+ "$value": "{ams.space.s}",
15
+ "$type": "dimension",
16
+ "$extensions": {
17
+ "nl.amsterdam.subtype": "space"
18
+ }
19
+ }
8
20
  },
9
21
  "before-field-or-field-set": {
10
- "margin-block-end": { "value": "{ams.space.m}" }
22
+ "margin-block-end": {
23
+ "$value": "{ams.space.m}",
24
+ "$type": "dimension",
25
+ "$extensions": {
26
+ "nl.amsterdam.subtype": "space"
27
+ }
28
+ }
11
29
  },
12
30
  "between-fields-and-field-sets": {
13
- "margin-block-end": { "value": "{ams.space.l}" }
31
+ "margin-block-end": {
32
+ "$value": "{ams.space.l}",
33
+ "$type": "dimension",
34
+ "$extensions": {
35
+ "nl.amsterdam.subtype": "space"
36
+ }
37
+ }
14
38
  }
15
39
  },
16
40
  "invalid": {
17
- "border-inline-start": { "value": "{ams.border.width.l} solid {ams.color.feedback.error}" },
18
- "padding-inline-start": { "value": "{ams.space.m}" }
41
+ "border-inline-start": {
42
+ "$value": "{ams.border.width.l} solid {ams.color.feedback.error}"
43
+ },
44
+ "padding-inline-start": {
45
+ "$value": "{ams.space.m}",
46
+ "$type": "dimension",
47
+ "$extensions": {
48
+ "nl.amsterdam.subtype": "space"
49
+ }
50
+ }
19
51
  },
20
52
  "legend": {
21
- "color": { "value": "{ams.color.text.default}" },
22
- "font-family": { "value": "{ams.typography.font-family}" },
23
- "font-size": { "value": "{ams.typography.heading.3.font-size}" },
24
- "font-weight": { "value": "{ams.typography.heading.font-weight}" },
25
- "line-height": { "value": "{ams.typography.heading.3.line-height}" },
26
- "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
53
+ "color": {
54
+ "$value": "{ams.color.text.default}",
55
+ "$type": "color"
56
+ },
57
+ "font-family": {
58
+ "$value": "{ams.typography.font-family}",
59
+ "$type": "fontFamily"
60
+ },
61
+ "font-size": {
62
+ "$value": "{ams.typography.heading.3.font-size}",
63
+ "$extensions": {
64
+ "nl.amsterdam.type": "fontSize"
65
+ }
66
+ },
67
+ "font-weight": {
68
+ "$value": "{ams.typography.heading.font-weight}",
69
+ "$type": "fontWeight"
70
+ },
71
+ "line-height": {
72
+ "$value": "{ams.typography.heading.3.line-height}",
73
+ "$extensions": {
74
+ "nl.amsterdam.type": "lineHeight"
75
+ }
76
+ },
77
+ "text-wrap": {
78
+ "$value": "{ams.typography.heading.text-wrap}"
79
+ },
27
80
  "in-fieldset": {
28
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
81
+ "font-weight": {
82
+ "$value": "{ams.typography.body-text.font-weight}",
83
+ "$type": "fontWeight"
84
+ }
29
85
  }
30
86
  }
31
87
  }
package/src/components/ams/field.deprecated.tokens.json CHANGED
@@ -1,7 +1,14 @@
1
1
  {
2
2
  "ams": {
3
3
  "field": {
4
- "gap": { "value": "{ams.space.s}" }
4
+ "gap": {
5
+ "$deprecated": "This token will be removed in release 5.0.0",
6
+ "$value": "{ams.space.s}",
7
+ "$type": "dimension",
8
+ "$extensions": {
9
+ "nl.amsterdam.subtype": "space"
10
+ }
11
+ }
5
12
  }
6
13
  }
7
14
  }
package/src/components/ams/field.tokens.json CHANGED
@@ -2,14 +2,34 @@
2
2
  "ams": {
3
3
  "field": {
4
4
  "child": {
5
- "margin-block-end": { "value": "{ams.space.xs}" },
5
+ "margin-block-end": {
6
+ "$value": "{ams.space.xs}",
7
+ "$type": "dimension",
8
+ "$extensions": {
9
+ "nl.amsterdam.subtype": "space"
10
+ }
11
+ },
6
12
  "before-error-message": {
7
- "margin-block-end": { "value": "{ams.space.s}" }
13
+ "margin-block-end": {
14
+ "$value": "{ams.space.s}",
15
+ "$type": "dimension",
16
+ "$extensions": {
17
+ "nl.amsterdam.subtype": "space"
18
+ }
19
+ }
8
20
  }
9
21
  },
10
22
  "invalid": {
11
- "border-inline-start": { "value": "{ams.border.width.l} solid {ams.color.feedback.error}" },
12
- "padding-inline-start": { "value": "{ams.space.m}" }
23
+ "border-inline-start": {
24
+ "$value": "{ams.border.width.l} solid {ams.color.feedback.error}"
25
+ },
26
+ "padding-inline-start": {
27
+ "$value": "{ams.space.m}",
28
+ "$type": "dimension",
29
+ "$extensions": {
30
+ "nl.amsterdam.subtype": "space"
31
+ }
32
+ }
13
33
  }
14
34
  }
15
35
  }
package/src/components/ams/figure.tokens.json CHANGED
@@ -1,15 +1,43 @@
1
1
  {
2
2
  "ams": {
3
3
  "figure": {
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
  "caption": {
6
- "color": { "value": "{ams.color.text.default}" },
7
- "font-family": { "value": "{ams.typography.font-family}" },
8
- "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
9
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
10
- "line-height": { "value": "{ams.typography.body-text.small.line-height}" },
12
+ "color": {
13
+ "$value": "{ams.color.text.default}",
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.small.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
+ "line-height": {
31
+ "$value": "{ams.typography.body-text.small.line-height}",
32
+ "$extensions": {
33
+ "nl.amsterdam.type": "lineHeight"
34
+ }
35
+ },
11
36
  "inverse": {
12
- "color": { "value": "{ams.color.text.inverse}" }
37
+ "color": {
38
+ "$value": "{ams.color.text.inverse}",
39
+ "$type": "color"
40
+ }
13
41
  }
14
42
  }
15
43
  }
package/src/components/ams/file-input.tokens.json CHANGED
@@ -1,41 +1,155 @@
1
1
  {
2
2
  "ams": {
3
3
  "file-input": {
4
- "background-color": { "value": "{ams.inputs.background-color}" },
5
- "border-color": { "value": "{ams.inputs.border-color}" },
6
- "border-style": { "value": "dashed" },
7
- "border-width": { "value": "{ams.inputs.border-width}" },
8
- "color": { "value": "{ams.inputs.color}" },
9
- "cursor": { "value": "{ams.cursor.interactive}" },
10
- "font-family": { "value": "{ams.inputs.font-family}" },
11
- "font-size": { "value": "{ams.inputs.font-size}" },
12
- "font-weight": { "value": "{ams.inputs.font-weight}" },
13
- "line-height": { "value": "{ams.inputs.line-height}" },
14
- "outline-offset": { "value": "{ams.inputs.outline-offset}" },
15
- "padding-block": { "value": "{ams.space.m}" },
16
- "padding-inline": { "value": "{ams.space.m}" },
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": "dashed",
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
+ "cursor": {
29
+ "$value": "{ams.cursor.interactive}"
30
+ },
31
+ "font-family": {
32
+ "$value": "{ams.inputs.font-family}",
33
+ "$type": "fontFamily"
34
+ },
35
+ "font-size": {
36
+ "$value": "{ams.inputs.font-size}",
37
+ "$extensions": {
38
+ "nl.amsterdam.type": "fontSize"
39
+ }
40
+ },
41
+ "font-weight": {
42
+ "$value": "{ams.inputs.font-weight}",
43
+ "$type": "fontWeight"
44
+ },
45
+ "line-height": {
46
+ "$value": "{ams.inputs.line-height}",
47
+ "$extensions": {
48
+ "nl.amsterdam.type": "lineHeight"
49
+ }
50
+ },
51
+ "outline-offset": {
52
+ "$value": "{ams.inputs.outline-offset}",
53
+ "$type": "dimension",
54
+ "$extensions": {
55
+ "nl.amsterdam.subtype": "space"
56
+ }
57
+ },
58
+ "padding-block": {
59
+ "$value": "{ams.space.m}",
60
+ "$type": "dimension",
61
+ "$extensions": {
62
+ "nl.amsterdam.subtype": "space"
63
+ }
64
+ },
65
+ "padding-inline": {
66
+ "$value": "{ams.space.m}",
67
+ "$type": "dimension",
68
+ "$extensions": {
69
+ "nl.amsterdam.subtype": "space"
70
+ }
71
+ },
17
72
  "disabled": {
18
- "color": { "value": "{ams.inputs.disabled.color}" },
19
- "cursor": { "value": "{ams.cursor.disabled}" }
73
+ "color": {
74
+ "$value": "{ams.inputs.disabled.color}",
75
+ "$type": "color"
76
+ },
77
+ "cursor": {
78
+ "$value": "{ams.cursor.disabled}"
79
+ }
20
80
  },
21
81
  "file-selector-button": {
22
- "background-color": { "value": "{ams.button.secondary.background-color}" },
23
- "border-color": { "value": "{ams.button.secondary.border-color}" },
24
- "border-style": { "value": "{ams.button.border-style}" },
25
- "border-width": { "value": "{ams.button.border-width}" },
26
- "color": { "value": "{ams.button.secondary.color}" },
27
- "cursor": { "value": "{ams.button.cursor}" },
28
- "line-height": { "value": "{ams.button.line-height}" },
29
- "margin-inline-end": { "value": "{ams.space.m}" },
30
- "padding-block": { "value": "{ams.button.padding-block}" },
31
- "padding-inline": { "value": "{ams.button.padding-inline}" },
82
+ "background-color": {
83
+ "$value": "{ams.button.secondary.background-color}",
84
+ "$type": "color"
85
+ },
86
+ "border-color": {
87
+ "$value": "{ams.button.secondary.border-color}",
88
+ "$type": "color"
89
+ },
90
+ "border-style": {
91
+ "$value": "{ams.button.border-style}",
92
+ "$extensions": {
93
+ "nl.amsterdam.type": "borderStyle"
94
+ }
95
+ },
96
+ "border-width": {
97
+ "$value": "{ams.button.border-width}",
98
+ "$extensions": {
99
+ "nl.amsterdam.type": "borderWidth"
100
+ }
101
+ },
102
+ "color": {
103
+ "$value": "{ams.button.secondary.color}",
104
+ "$type": "color"
105
+ },
106
+ "cursor": {
107
+ "$value": "{ams.button.cursor}"
108
+ },
109
+ "line-height": {
110
+ "$value": "{ams.button.line-height}",
111
+ "$extensions": {
112
+ "nl.amsterdam.type": "lineHeight"
113
+ }
114
+ },
115
+ "margin-inline-end": {
116
+ "$value": "{ams.space.m}",
117
+ "$type": "dimension",
118
+ "$extensions": {
119
+ "nl.amsterdam.subtype": "space"
120
+ }
121
+ },
122
+ "padding-block": {
123
+ "$value": "{ams.button.padding-block}",
124
+ "$type": "dimension",
125
+ "$extensions": {
126
+ "nl.amsterdam.subtype": "space"
127
+ }
128
+ },
129
+ "padding-inline": {
130
+ "$value": "{ams.button.padding-inline}",
131
+ "$type": "dimension",
132
+ "$extensions": {
133
+ "nl.amsterdam.subtype": "space"
134
+ }
135
+ },
32
136
  "disabled": {
33
- "color": { "value": "{ams.button.secondary.disabled.color}" },
34
- "cursor": { "value": "{ams.button.disabled.cursor}" }
137
+ "color": {
138
+ "$value": "{ams.button.secondary.disabled.color}",
139
+ "$type": "color"
140
+ },
141
+ "cursor": {
142
+ "$value": "{ams.button.disabled.cursor}"
143
+ }
35
144
  },
36
145
  "hover": {
37
- "box-shadow": { "value": "{ams.button.secondary.hover.box-shadow}" },
38
- "color": { "value": "{ams.button.secondary.hover.color}" }
146
+ "box-shadow": {
147
+ "$value": "{ams.button.secondary.hover.box-shadow}"
148
+ },
149
+ "color": {
150
+ "$value": "{ams.button.secondary.hover.color}",
151
+ "$type": "color"
152
+ }
39
153
  }
40
154
  }
41
155
  }