@amsterdam/design-system-tokens 0.2.0 → 0.3.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 (40) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/_variables.scss +136 -89
  3. package/dist/index.css +136 -89
  4. package/dist/index.d.ts +65 -18
  5. package/dist/index.js +116 -69
  6. package/dist/index.json +115 -68
  7. package/dist/index.tokens.json +177 -86
  8. package/dist/root.css +136 -89
  9. package/dist/tokens.d.ts +135 -44
  10. package/dist/tokens.js +2147 -1124
  11. package/dist/variables.less +136 -89
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/typography.tokens.json +10 -18
  14. package/src/common/amsterdam/border.tokens.json +3 -9
  15. package/src/common/amsterdam/spacing.tokens.json +4 -12
  16. package/src/components/amsterdam/accordion.tokens.json +1 -3
  17. package/src/components/amsterdam/breadcrumb.tokens.json +7 -5
  18. package/src/components/amsterdam/button.tokens.json +9 -19
  19. package/src/components/amsterdam/checkbox.tokens.json +24 -64
  20. package/src/components/amsterdam/form-label.tokens.json +4 -4
  21. package/src/components/amsterdam/grid.tokens.json +3 -9
  22. package/src/components/amsterdam/header.tokens.json +7 -0
  23. package/src/components/amsterdam/heading.tokens.json +24 -24
  24. package/src/components/amsterdam/icon.tokens.json +0 -8
  25. package/src/components/amsterdam/link.tokens.json +13 -23
  26. package/src/components/amsterdam/mark.tokens.json +7 -0
  27. package/src/components/amsterdam/ordered-list.tokens.json +4 -4
  28. package/src/components/amsterdam/page-heading.tokens.json +4 -12
  29. package/src/components/amsterdam/page-menu.tokens.json +4 -4
  30. package/src/components/amsterdam/pagination.tokens.json +4 -4
  31. package/src/components/amsterdam/paragraph.tokens.json +10 -10
  32. package/src/components/amsterdam/search-field.tokens.json +47 -0
  33. package/src/components/amsterdam/skip-link.tokens.json +20 -0
  34. package/src/components/amsterdam/spotlight.tokens.json +30 -0
  35. package/src/components/amsterdam/switch.tokens.json +10 -30
  36. package/src/components/amsterdam/text-input.tokens.json +36 -0
  37. package/src/components/amsterdam/top-task-link.tokens.json +4 -4
  38. package/src/components/amsterdam/unordered-list.tokens.json +4 -4
  39. package/src/components/utrecht/button.tokens.json +24 -72
  40. package/src/components/amsterdam/highlight.tokens.json +0 -46
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 01 Dec 2023 15:48:43 GMT
3
+ * Generated on Fri, 22 Dec 2023 12:50:01 GMT
4
4
  */
5
5
 
6
6
  export const amsterdamColorPrimaryBlack = "#000000";
@@ -29,37 +29,33 @@ export const amsterdamTypographyFontFamily = "'Amsterdam Sans', Arial, sans-seri
29
29
  export const amsterdamTypographyFontWeightNormal = 400;
30
30
  export const amsterdamTypographyFontWeightBold = 800;
31
31
  export const amsterdamTypographySpaciousTextLevel0FontSize = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
32
- export const amsterdamTypographySpaciousTextLevel0LineHeight = "1.1";
32
+ export const amsterdamTypographySpaciousTextLevel0LineHeight = "1.15";
33
33
  export const amsterdamTypographySpaciousTextLevel1FontSize = "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)";
34
34
  export const amsterdamTypographySpaciousTextLevel1LineHeight = "1.2";
35
35
  export const amsterdamTypographySpaciousTextLevel2FontSize = "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)";
36
- export const amsterdamTypographySpaciousTextLevel2LineHeight = "1.3";
36
+ export const amsterdamTypographySpaciousTextLevel2LineHeight = "1.25";
37
37
  export const amsterdamTypographySpaciousTextLevel3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
38
- export const amsterdamTypographySpaciousTextLevel3LineHeight = "1.4";
38
+ export const amsterdamTypographySpaciousTextLevel3LineHeight = "1.3";
39
39
  export const amsterdamTypographySpaciousTextLevel4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
40
- export const amsterdamTypographySpaciousTextLevel4LineHeight = "1.4";
41
- export const amsterdamTypographySpaciousTextLevel5FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
42
- export const amsterdamTypographySpaciousTextLevel5LineHeight = "1.5";
43
- export const amsterdamTypographySpaciousTextLevel6FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
40
+ export const amsterdamTypographySpaciousTextLevel4LineHeight = "1.5";
41
+ export const amsterdamTypographySpaciousTextLevel5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
42
+ export const amsterdamTypographySpaciousTextLevel5LineHeight = "1.6";
43
+ export const amsterdamTypographySpaciousTextLevel6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
44
44
  export const amsterdamTypographySpaciousTextLevel6LineHeight = "1.6";
45
- export const amsterdamTypographySpaciousTextLevel7FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
46
- export const amsterdamTypographySpaciousTextLevel7LineHeight = "1.6";
47
45
  export const amsterdamTypographyCompactTextLevel0FontSize = "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
48
- export const amsterdamTypographyCompactTextLevel0LineHeight = "1.1";
46
+ export const amsterdamTypographyCompactTextLevel0LineHeight = "1.15";
49
47
  export const amsterdamTypographyCompactTextLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
50
48
  export const amsterdamTypographyCompactTextLevel1LineHeight = "1.2";
51
49
  export const amsterdamTypographyCompactTextLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
52
- export const amsterdamTypographyCompactTextLevel2LineHeight = "1.3";
50
+ export const amsterdamTypographyCompactTextLevel2LineHeight = "1.25";
53
51
  export const amsterdamTypographyCompactTextLevel3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
54
- export const amsterdamTypographyCompactTextLevel3LineHeight = "1.4";
52
+ export const amsterdamTypographyCompactTextLevel3LineHeight = "1.3";
55
53
  export const amsterdamTypographyCompactTextLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
56
- export const amsterdamTypographyCompactTextLevel4LineHeight = "1.4";
57
- export const amsterdamTypographyCompactTextLevel5FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
58
- export const amsterdamTypographyCompactTextLevel5LineHeight = "1.5";
59
- export const amsterdamTypographyCompactTextLevel6FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
54
+ export const amsterdamTypographyCompactTextLevel4LineHeight = "1.5";
55
+ export const amsterdamTypographyCompactTextLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
56
+ export const amsterdamTypographyCompactTextLevel5LineHeight = "1.6";
57
+ export const amsterdamTypographyCompactTextLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
60
58
  export const amsterdamTypographyCompactTextLevel6LineHeight = "1.6";
61
- export const amsterdamTypographyCompactTextLevel7FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
62
- export const amsterdamTypographyCompactTextLevel7LineHeight = "1.6";
63
59
  export const amsterdamBorderWidthSm = "1px";
64
60
  export const amsterdamBorderWidthMd = "2px";
65
61
  export const amsterdamBorderWidthLg = "3px";
@@ -84,10 +80,10 @@ export const amsterdamAccordionButtonFocusOutlineOffset = "2px";
84
80
  export const amsterdamAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
85
81
  export const amsterdamAccordionButtonFontWeight = 800;
86
82
  export const amsterdamAccordionButtonHoverBoxShadow = "inset 0 0 0 2px #767676";
87
- export const amsterdamAccordionButtonSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
88
- export const amsterdamAccordionButtonSpaciousLineHeight = "1.5";
89
- export const amsterdamAccordionButtonCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
90
- export const amsterdamAccordionButtonCompactLineHeight = "1.5";
83
+ export const amsterdamAccordionButtonSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
84
+ export const amsterdamAccordionButtonSpaciousLineHeight = "1.6";
85
+ export const amsterdamAccordionButtonCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
86
+ export const amsterdamAccordionButtonCompactLineHeight = "1.6";
91
87
  export const amsterdamAlertBackgroundColor = "#FFE600";
92
88
  export const amsterdamAlertBorder = "4px solid #FFE600";
93
89
  export const amsterdamAlertGap = "1rem";
@@ -98,10 +94,10 @@ export const amsterdamAlertPaddingInlineEnd = "1.5rem";
98
94
  export const amsterdamAlertTitleColor = "#000000";
99
95
  export const amsterdamAlertTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
100
96
  export const amsterdamAlertTitleFontWeight = 800;
101
- export const amsterdamAlertTitleSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
102
- export const amsterdamAlertTitleSpaciousLineHeight = "1.5";
103
- export const amsterdamAlertTitleCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
104
- export const amsterdamAlertTitleCompactLineHeight = "1.5";
97
+ export const amsterdamAlertTitleSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
98
+ export const amsterdamAlertTitleSpaciousLineHeight = "1.6";
99
+ export const amsterdamAlertTitleCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
100
+ export const amsterdamAlertTitleCompactLineHeight = "1.6";
105
101
  export const amsterdamAlertErrorBackgroundColor = "#ffffff";
106
102
  export const amsterdamAlertErrorBorderColor = "#EC0000";
107
103
  export const amsterdamAlertSuccessBackgroundColor = "#ffffff";
@@ -120,12 +116,12 @@ export const amsterdamBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-seri
120
116
  export const amsterdamBlockquoteFontWeight = 800;
121
117
  export const amsterdamBlockquoteInverseColor = "#ffffff";
122
118
  export const amsterdamBlockquoteSpaciousFontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
123
- export const amsterdamBlockquoteSpaciousLineHeight = "1.4";
119
+ export const amsterdamBlockquoteSpaciousLineHeight = "1.3";
124
120
  export const amsterdamBlockquoteCompactFontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
125
- export const amsterdamBlockquoteCompactLineHeight = "1.4";
121
+ export const amsterdamBlockquoteCompactLineHeight = "1.3";
126
122
  export const amsterdamBreadcrumbFontFamily = "'Amsterdam Sans', Arial, sans-serif";
127
123
  export const amsterdamBreadcrumbFontWeight = 400;
128
- export const amsterdamBreadcrumbSeparatorBackgroundColor = "#004699";
124
+ export const amsterdamBreadcrumbSeparatorBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")";
129
125
  export const amsterdamBreadcrumbItemLinkColor = "#004699";
130
126
  export const amsterdamBreadcrumbItemLinkOutlineOffset = "2px";
131
127
  export const amsterdamBreadcrumbItemLinkTextDecorationLine = "none";
@@ -145,7 +141,7 @@ export const amsterdamButtonSecondaryBoxShadow = "inset 0 0 0 2px #004699";
145
141
  export const amsterdamButtonSecondaryHoverBoxShadow = "inset 0 0 0 3px #102E62";
146
142
  export const amsterdamButtonSecondaryDisabledBoxShadow = "inset 0 0 0 2px #B4B4B4";
147
143
  export const amsterdamButtonSecondaryFocusBoxShadow = "inset 0 0 0 2px #004699";
148
- export const amsterdamButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #767676";
144
+ export const amsterdamButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #102E62";
149
145
  export const amsterdamCardLinkColor = "#004699";
150
146
  export const amsterdamCardLinkTextDecorationLine = "none";
151
147
  export const amsterdamCardLinkTextDecorationThickness = "0.125rem";
@@ -186,10 +182,10 @@ export const amsterdamDialogMaxInlineSize = "min(87.69vw, 45rem)";
186
182
  export const amsterdamDialogTitleColor = "#000000";
187
183
  export const amsterdamDialogTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
188
184
  export const amsterdamDialogTitleFontWeight = 800;
189
- export const amsterdamDialogTitleSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
190
- export const amsterdamDialogTitleSpaciousLineHeight = "1.5";
191
- export const amsterdamDialogTitleCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
192
- export const amsterdamDialogTitleCompactLineHeight = "1.5";
185
+ export const amsterdamDialogTitleSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
186
+ export const amsterdamDialogTitleSpaciousLineHeight = "1.6";
187
+ export const amsterdamDialogTitleCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
188
+ export const amsterdamDialogTitleCompactLineHeight = "1.6";
193
189
  export const amsterdamDialogBackdropBackground = "#0006";
194
190
  export const amsterdamDialogCloseBackgroundColor = "transparent";
195
191
  export const amsterdamDialogCloseFill = "#000000";
@@ -205,10 +201,10 @@ export const amsterdamDialogFooterPaddingBlock = "1.5rem 0";
205
201
  export const amsterdamFormLabelColor = "#000000";
206
202
  export const amsterdamFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
207
203
  export const amsterdamFormLabelFontWeight = 800;
208
- export const amsterdamFormLabelSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
209
- export const amsterdamFormLabelSpaciousLineHeight = "1.6";
210
- export const amsterdamFormLabelCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
211
- export const amsterdamFormLabelCompactLineHeight = "1.6";
204
+ export const amsterdamFormLabelSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
205
+ export const amsterdamFormLabelSpaciousLineHeight = "1.5";
206
+ export const amsterdamFormLabelCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
207
+ export const amsterdamFormLabelCompactLineHeight = "1.5";
212
208
  export const amsterdamGridColumnCount = "4";
213
209
  export const amsterdamGridSpaciousGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
214
210
  export const amsterdamGridSpaciousPaddingInline = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"; // Equals 1.5 times the gap.
@@ -216,54 +212,51 @@ export const amsterdamGridCompactGap = "clamp(1rem, calc(1.5625vw - 0.0625rem),
216
212
  export const amsterdamGridCompactPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Equals the gap.
217
213
  export const amsterdamGridMediumColumnCount = "8";
218
214
  export const amsterdamGridWideColumnCount = "12";
215
+ export const amsterdamHeaderColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
219
216
  export const amsterdamHeadingColor = "#000000";
220
217
  export const amsterdamHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
221
218
  export const amsterdamHeadingFontWeight = 800;
222
219
  export const amsterdamHeadingInverseColor = "#ffffff";
223
220
  export const amsterdamHeadingSpaciousLevel1LineHeight = "1.2";
224
221
  export const amsterdamHeadingSpaciousLevel1FontSize = "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)";
225
- export const amsterdamHeadingSpaciousLevel2LineHeight = "1.3";
222
+ export const amsterdamHeadingSpaciousLevel2LineHeight = "1.25";
226
223
  export const amsterdamHeadingSpaciousLevel2FontSize = "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)";
227
- export const amsterdamHeadingSpaciousLevel3LineHeight = "1.4";
224
+ export const amsterdamHeadingSpaciousLevel3LineHeight = "1.3";
228
225
  export const amsterdamHeadingSpaciousLevel3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
229
- export const amsterdamHeadingSpaciousLevel4LineHeight = "1.4";
226
+ export const amsterdamHeadingSpaciousLevel4LineHeight = "1.5";
230
227
  export const amsterdamHeadingSpaciousLevel4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
228
+ export const amsterdamHeadingSpaciousLevel5LineHeight = "1.6";
229
+ export const amsterdamHeadingSpaciousLevel5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
230
+ export const amsterdamHeadingSpaciousLevel6LineHeight = "1.6";
231
+ export const amsterdamHeadingSpaciousLevel6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
231
232
  export const amsterdamHeadingCompactLevel1LineHeight = "1.2";
232
233
  export const amsterdamHeadingCompactLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
233
- export const amsterdamHeadingCompactLevel2LineHeight = "1.3";
234
+ export const amsterdamHeadingCompactLevel2LineHeight = "1.25";
234
235
  export const amsterdamHeadingCompactLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
235
- export const amsterdamHeadingCompactLevel3LineHeight = "1.4";
236
+ export const amsterdamHeadingCompactLevel3LineHeight = "1.3";
236
237
  export const amsterdamHeadingCompactLevel3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
237
- export const amsterdamHeadingCompactLevel4LineHeight = "1.4";
238
+ export const amsterdamHeadingCompactLevel4LineHeight = "1.5";
238
239
  export const amsterdamHeadingCompactLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
239
- export const amsterdamHighlightBlueBackgroundColor = "#004699";
240
- export const amsterdamHighlightDarkGreenBackgroundColor = "#00A03C";
241
- export const amsterdamHighlightGreenBackgroundColor = "#BED200";
242
- export const amsterdamHighlightLightBlueBackgroundColor = "#009DEC";
243
- export const amsterdamHighlightMagentaBackgroundColor = "#E50082";
244
- export const amsterdamHighlightOrangeBackgroundColor = "#FF9100";
245
- export const amsterdamHighlightPurpleBackgroundColor = "#A00078";
246
- export const amsterdamHighlightYellowBackgroundColor = "#FFE600";
240
+ export const amsterdamHeadingCompactLevel5LineHeight = "1.6";
241
+ export const amsterdamHeadingCompactLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
242
+ export const amsterdamHeadingCompactLevel6LineHeight = "1.6";
243
+ export const amsterdamHeadingCompactLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
247
244
  export const amsterdamIconSpaciousSize3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
248
- export const amsterdamIconSpaciousSize3LineHeight = "1.4";
245
+ export const amsterdamIconSpaciousSize3LineHeight = "1.3";
249
246
  export const amsterdamIconSpaciousSize4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
250
- export const amsterdamIconSpaciousSize4LineHeight = "1.4";
251
- export const amsterdamIconSpaciousSize5FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
252
- export const amsterdamIconSpaciousSize5LineHeight = "1.5";
253
- export const amsterdamIconSpaciousSize6FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
247
+ export const amsterdamIconSpaciousSize4LineHeight = "1.5";
248
+ export const amsterdamIconSpaciousSize5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
249
+ export const amsterdamIconSpaciousSize5LineHeight = "1.6";
250
+ export const amsterdamIconSpaciousSize6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
254
251
  export const amsterdamIconSpaciousSize6LineHeight = "1.6";
255
- export const amsterdamIconSpaciousSize7FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
256
- export const amsterdamIconSpaciousSize7LineHeight = "1.6";
257
252
  export const amsterdamIconCompactSize3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
258
- export const amsterdamIconCompactSize3LineHeight = "1.4";
253
+ export const amsterdamIconCompactSize3LineHeight = "1.3";
259
254
  export const amsterdamIconCompactSize4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
260
- export const amsterdamIconCompactSize4LineHeight = "1.4";
261
- export const amsterdamIconCompactSize5FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
262
- export const amsterdamIconCompactSize5LineHeight = "1.5";
263
- export const amsterdamIconCompactSize6FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
255
+ export const amsterdamIconCompactSize4LineHeight = "1.5";
256
+ export const amsterdamIconCompactSize5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
257
+ export const amsterdamIconCompactSize5LineHeight = "1.6";
258
+ export const amsterdamIconCompactSize6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
264
259
  export const amsterdamIconCompactSize6LineHeight = "1.6";
265
- export const amsterdamIconCompactSize7FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
266
- export const amsterdamIconCompactSize7LineHeight = "1.6";
267
260
  export const amsterdamLinkColor = "#004699";
268
261
  export const amsterdamLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
269
262
  export const amsterdamLinkFontWeight = 400;
@@ -306,6 +299,7 @@ export const amsterdamLogoHeight = "2.5rem";
306
299
  export const amsterdamLogoEmblemColor = "#EC0000";
307
300
  export const amsterdamLogoTitleColor = "#EC0000";
308
301
  export const amsterdamLogoSubsiteColor = "#000000";
302
+ export const amsterdamMarkBackgroundColor = "var(--amsterdam-color-yellow)";
309
303
  export const amsterdamOrderedListColor = "#000000";
310
304
  export const amsterdamOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
311
305
  export const amsterdamOrderedListFontWeight = 400;
@@ -376,6 +370,43 @@ export const amsterdamParagraphCompactLargeFontSize = "clamp(1.021rem, calc(0.48
376
370
  export const amsterdamParagraphCompactLargeLineHeight = "1.5";
377
371
  export const amsterdamScreenWideMaxWidth = "100rem";
378
372
  export const amsterdamScreenXWideMaxWidth = "132rem";
373
+ export const amsterdamSearchFieldButtonBackgroundColor = "#004699";
374
+ export const amsterdamSearchFieldButtonColor = "#ffffff";
375
+ export const amsterdamSearchFieldButtonOutlineOffset = "2px";
376
+ export const amsterdamSearchFieldButtonHoverBackgroundColor = "#102E62";
377
+ export const amsterdamSearchFieldInputBoxShadow = "inset 0 0 0 1px #000000";
378
+ export const amsterdamSearchFieldInputColor = "#000000";
379
+ export const amsterdamSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
380
+ export const amsterdamSearchFieldInputFontWeight = 400;
381
+ export const amsterdamSearchFieldInputOutlineOffset = "2px";
382
+ export const amsterdamSearchFieldInputCancelButtonBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")";
383
+ export const amsterdamSearchFieldInputCancelButtonColor = "#004699";
384
+ export const amsterdamSearchFieldInputCancelButtonHeight = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
385
+ export const amsterdamSearchFieldInputCancelButtonWidth = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
386
+ export const amsterdamSearchFieldInputHoverBoxShadow = "inset 0 0 0 2px #000000";
387
+ export const amsterdamSearchFieldInputPlaceholderColor = "#767676";
388
+ export const amsterdamSearchFieldInputCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
389
+ export const amsterdamSearchFieldInputCompactLineHeight = "1.6";
390
+ export const amsterdamSearchFieldInputSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
391
+ export const amsterdamSearchFieldInputSpaciousLineHeight = "1.6";
392
+ export const amsterdamSkipLinkBackgroundColor = "#004699";
393
+ export const amsterdamSkipLinkColor = "#ffffff";
394
+ export const amsterdamSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
395
+ export const amsterdamSkipLinkFontWeight = 400;
396
+ export const amsterdamSkipLinkFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
397
+ export const amsterdamSkipLinkLineHeight = "1.6";
398
+ export const amsterdamSkipLinkOutlineOffset = "2px";
399
+ export const amsterdamSkipLinkCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
400
+ export const amsterdamSkipLinkCompactLineHeight = "1.6";
401
+ export const amsterdamSkipLinkHoverBackgroundColor = "#102E62";
402
+ export const amsterdamSpotlightBlueBackgroundColor = "#004699";
403
+ export const amsterdamSpotlightDarkGreenBackgroundColor = "#00A03C";
404
+ export const amsterdamSpotlightGreenBackgroundColor = "#BED200";
405
+ export const amsterdamSpotlightLightBlueBackgroundColor = "#009DEC";
406
+ export const amsterdamSpotlightMagentaBackgroundColor = "#E50082";
407
+ export const amsterdamSpotlightOrangeBackgroundColor = "#FF9100";
408
+ export const amsterdamSpotlightPurpleBackgroundColor = "#A00078";
409
+ export const amsterdamSpotlightYellowBackgroundColor = "#FFE600";
379
410
  export const amsterdamSwitchFontFamily = "'Amsterdam Sans', Arial, sans-serif";
380
411
  export const amsterdamSwitchBackgroundColor = "#767676";
381
412
  export const amsterdamSwitchWidth = "3.5rem";
@@ -386,6 +417,22 @@ export const amsterdamSwitchThumbHoverColor = "#102E62";
386
417
  export const amsterdamSwitchCheckedBackgroundColor = "#004699";
387
418
  export const amsterdamSwitchOutlineOffset = "2px";
388
419
  export const amsterdamSwitchDisabledBackgroundColor = "#B4B4B4";
420
+ export const amsterdamTextInputBoxShadow = "inset 0 0 0 1px #000000";
421
+ export const amsterdamTextInputColor = "#000000";
422
+ export const amsterdamTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
423
+ export const amsterdamTextInputFontWeight = 400;
424
+ export const amsterdamTextInputOutlineOffset = "2px";
425
+ export const amsterdamTextInputDisabledBackgroundColor = "#ffffff";
426
+ export const amsterdamTextInputDisabledBoxShadow = "inset 0 0 0 1px #B4B4B4";
427
+ export const amsterdamTextInputDisabledColor = "#B4B4B4";
428
+ export const amsterdamTextInputHoverBoxShadow = "inset 0 0 0 2px #000000";
429
+ export const amsterdamTextInputInvalidBoxShadow = "inset 0 0 0 1px #EC0000";
430
+ export const amsterdamTextInputInvalidHoverBoxShadow = "inset 0 0 0 2px #EC0000";
431
+ export const amsterdamTextInputPlaceholderColor = "#767676";
432
+ export const amsterdamTextInputCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
433
+ export const amsterdamTextInputCompactLineHeight = "1.6";
434
+ export const amsterdamTextInputSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
435
+ export const amsterdamTextInputSpaciousLineHeight = "1.6";
389
436
  export const amsterdamTopTaskLinkDescriptionColor = "#000000";
390
437
  export const amsterdamTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
391
438
  export const amsterdamTopTaskLinkDescriptionFontWeight = 400;
@@ -402,9 +449,9 @@ export const amsterdamTopTaskLinkLabelTextUnderlineOffset = "0.375rem";
402
449
  export const amsterdamTopTaskLinkLabelHoverColor = "#102E62";
403
450
  export const amsterdamTopTaskLinkLabelHoverTextDecorationLine = "underline";
404
451
  export const amsterdamTopTaskLinkLabelSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
405
- export const amsterdamTopTaskLinkLabelSpaciousLineHeight = "1.4";
452
+ export const amsterdamTopTaskLinkLabelSpaciousLineHeight = "1.5";
406
453
  export const amsterdamTopTaskLinkLabelCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
407
- export const amsterdamTopTaskLinkLabelCompactLineHeight = "1.4";
454
+ export const amsterdamTopTaskLinkLabelCompactLineHeight = "1.5";
408
455
  export const amsterdamTopTaskLinkOutlineOffset = "2px";
409
456
  export const amsterdamUnorderedListColor = "#000000";
410
457
  export const amsterdamUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";