@amsterdam/design-system-tokens 0.2.0 → 0.4.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 (48) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/_variables.scss +225 -106
  3. package/dist/index.css +225 -106
  4. package/dist/index.d.ts +146 -27
  5. package/dist/index.js +218 -99
  6. package/dist/index.json +217 -98
  7. package/dist/index.tokens.json +361 -116
  8. package/dist/root.css +225 -106
  9. package/dist/tokens.d.ts +297 -52
  10. package/dist/tokens.js +7327 -4668
  11. package/dist/variables.less +225 -106
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/color.tokens.json +5 -6
  14. package/src/brand/amsterdam/typography.tokens.json +10 -18
  15. package/src/common/amsterdam/border.tokens.json +3 -9
  16. package/src/common/amsterdam/spacing.tokens.json +4 -12
  17. package/src/components/amsterdam/accordion.tokens.json +1 -3
  18. package/src/components/amsterdam/alert.tokens.json +12 -9
  19. package/src/components/amsterdam/badge.tokens.json +49 -0
  20. package/src/components/amsterdam/breadcrumb.tokens.json +7 -5
  21. package/src/components/amsterdam/button.tokens.json +9 -19
  22. package/src/components/amsterdam/checkbox.tokens.json +24 -64
  23. package/src/components/amsterdam/dialog.tokens.json +0 -7
  24. package/src/components/amsterdam/form-label.tokens.json +4 -4
  25. package/src/components/amsterdam/grid.tokens.json +3 -9
  26. package/src/components/amsterdam/header.tokens.json +7 -0
  27. package/src/components/amsterdam/heading.tokens.json +24 -24
  28. package/src/components/amsterdam/icon-button.tokens.json +37 -0
  29. package/src/components/amsterdam/icon.tokens.json +0 -8
  30. package/src/components/amsterdam/link-list.tokens.json +61 -0
  31. package/src/components/amsterdam/link.tokens.json +13 -23
  32. package/src/components/amsterdam/mark.tokens.json +7 -0
  33. package/src/components/amsterdam/mega-menu.tokens.json +12 -0
  34. package/src/components/amsterdam/ordered-list.tokens.json +4 -4
  35. package/src/components/amsterdam/page-heading.tokens.json +4 -12
  36. package/src/components/amsterdam/page-menu.tokens.json +4 -4
  37. package/src/components/amsterdam/pagination.tokens.json +4 -4
  38. package/src/components/amsterdam/paragraph.tokens.json +10 -10
  39. package/src/components/amsterdam/search-field.tokens.json +47 -0
  40. package/src/components/amsterdam/skip-link.tokens.json +20 -0
  41. package/src/components/amsterdam/spotlight.tokens.json +30 -0
  42. package/src/components/amsterdam/switch.tokens.json +10 -30
  43. package/src/components/amsterdam/table.tokens.json +20 -0
  44. package/src/components/amsterdam/text-input.tokens.json +36 -0
  45. package/src/components/amsterdam/top-task-link.tokens.json +4 -4
  46. package/src/components/amsterdam/unordered-list.tokens.json +4 -4
  47. package/src/components/utrecht/button.tokens.json +24 -72
  48. package/src/components/amsterdam/highlight.tokens.json +0 -46
package/dist/index.d.ts 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 Wed, 31 Jan 2024 12:56:24 GMT
4
4
  */
5
5
 
6
6
  export const amsterdamColorPrimaryBlack : string;
@@ -18,7 +18,6 @@ export const amsterdamColorMagenta : string;
18
18
  export const amsterdamColorNeutralGrey1 : string;
19
19
  export const amsterdamColorNeutralGrey2 : string;
20
20
  export const amsterdamColorNeutralGrey3 : string;
21
- export const amsterdamColorNeutralGrey4 : string;
22
21
  export const amsterdamProportionXTall : string;
23
22
  export const amsterdamProportionTall : string;
24
23
  export const amsterdamProportionSquare : string;
@@ -42,8 +41,6 @@ export const amsterdamTypographySpaciousTextLevel5FontSize : string;
42
41
  export const amsterdamTypographySpaciousTextLevel5LineHeight : string;
43
42
  export const amsterdamTypographySpaciousTextLevel6FontSize : string;
44
43
  export const amsterdamTypographySpaciousTextLevel6LineHeight : string;
45
- export const amsterdamTypographySpaciousTextLevel7FontSize : string;
46
- export const amsterdamTypographySpaciousTextLevel7LineHeight : string;
47
44
  export const amsterdamTypographyCompactTextLevel0FontSize : string;
48
45
  export const amsterdamTypographyCompactTextLevel0LineHeight : string;
49
46
  export const amsterdamTypographyCompactTextLevel1FontSize : string;
@@ -58,8 +55,6 @@ export const amsterdamTypographyCompactTextLevel5FontSize : string;
58
55
  export const amsterdamTypographyCompactTextLevel5LineHeight : string;
59
56
  export const amsterdamTypographyCompactTextLevel6FontSize : string;
60
57
  export const amsterdamTypographyCompactTextLevel6LineHeight : string;
61
- export const amsterdamTypographyCompactTextLevel7FontSize : string;
62
- export const amsterdamTypographyCompactTextLevel7LineHeight : string;
63
58
  export const amsterdamBorderWidthSm : string;
64
59
  export const amsterdamBorderWidthMd : string;
65
60
  export const amsterdamBorderWidthLg : string;
@@ -88,8 +83,8 @@ export const amsterdamAccordionButtonSpaciousFontSize : string;
88
83
  export const amsterdamAccordionButtonSpaciousLineHeight : string;
89
84
  export const amsterdamAccordionButtonCompactFontSize : string;
90
85
  export const amsterdamAccordionButtonCompactLineHeight : string;
91
- export const amsterdamAlertBackgroundColor : string;
92
- export const amsterdamAlertBorder : string;
86
+ export const amsterdamAlertBorderWidth : string;
87
+ export const amsterdamAlertBorderStyle : string;
93
88
  export const amsterdamAlertGap : string;
94
89
  export const amsterdamAlertPaddingBlockStart : string;
95
90
  export const amsterdamAlertPaddingBlockEnd : string;
@@ -102,11 +97,10 @@ export const amsterdamAlertTitleSpaciousFontSize : string;
102
97
  export const amsterdamAlertTitleSpaciousLineHeight : string;
103
98
  export const amsterdamAlertTitleCompactFontSize : string;
104
99
  export const amsterdamAlertTitleCompactLineHeight : string;
105
- export const amsterdamAlertErrorBackgroundColor : string;
106
100
  export const amsterdamAlertErrorBorderColor : string;
107
- export const amsterdamAlertSuccessBackgroundColor : string;
101
+ export const amsterdamAlertInfoBorderColor : string;
108
102
  export const amsterdamAlertSuccessBorderColor : string;
109
- export const amsterdamAlertCloseBackgroundColor : string;
103
+ export const amsterdamAlertWarningBorderColor : string;
110
104
  export const amsterdamAlertCloseFill : string;
111
105
  export const amsterdamAlertCloseHoverFill : string;
112
106
  export const amsterdamAspectRatioXTall : string;
@@ -115,6 +109,29 @@ export const amsterdamAspectRatioSquare : string;
115
109
  export const amsterdamAspectRatioWide : string;
116
110
  export const amsterdamAspectRatioXWide : string;
117
111
  export const amsterdamAspectRatio2xWide : string;
112
+ export const amsterdamBadgeFontFamily : string;
113
+ export const amsterdamBadgeFontWeight : number;
114
+ export const amsterdamBadgePaddingInline : string;
115
+ export const amsterdamBadgeSpaciousFontSize : string;
116
+ export const amsterdamBadgeSpaciousLineHeight : string;
117
+ export const amsterdamBadgeCompactFontSize : string;
118
+ export const amsterdamBadgeCompactLineHeight : string;
119
+ export const amsterdamBadgeBlueBackgroundColor : string;
120
+ export const amsterdamBadgeBlueColor : string;
121
+ export const amsterdamBadgeDarkBlueBackgroundColor : string;
122
+ export const amsterdamBadgeDarkBlueColor : string;
123
+ export const amsterdamBadgeDarkGreenBackgroundColor : string;
124
+ export const amsterdamBadgeDarkGreenColor : string;
125
+ export const amsterdamBadgeGreenBackgroundColor : string;
126
+ export const amsterdamBadgeGreenColor : string;
127
+ export const amsterdamBadgeMagentaBackgroundColor : string;
128
+ export const amsterdamBadgeMagentaColor : string;
129
+ export const amsterdamBadgeOrangeBackgroundColor : string;
130
+ export const amsterdamBadgeOrangeColor : string;
131
+ export const amsterdamBadgePurpleBackgroundColor : string;
132
+ export const amsterdamBadgePurpleColor : string;
133
+ export const amsterdamBadgeYellowBackgroundColor : string;
134
+ export const amsterdamBadgeYellowColor : string;
118
135
  export const amsterdamBlockquoteColor : string;
119
136
  export const amsterdamBlockquoteFontFamily : string;
120
137
  export const amsterdamBlockquoteFontWeight : number;
@@ -125,7 +142,7 @@ export const amsterdamBlockquoteCompactFontSize : string;
125
142
  export const amsterdamBlockquoteCompactLineHeight : string;
126
143
  export const amsterdamBreadcrumbFontFamily : string;
127
144
  export const amsterdamBreadcrumbFontWeight : number;
128
- export const amsterdamBreadcrumbSeparatorBackgroundColor : string;
145
+ export const amsterdamBreadcrumbSeparatorBackgroundImage : string;
129
146
  export const amsterdamBreadcrumbItemLinkColor : string;
130
147
  export const amsterdamBreadcrumbItemLinkOutlineOffset : string;
131
148
  export const amsterdamBreadcrumbItemLinkTextDecorationLine : string;
@@ -191,9 +208,6 @@ export const amsterdamDialogTitleSpaciousLineHeight : string;
191
208
  export const amsterdamDialogTitleCompactFontSize : string;
192
209
  export const amsterdamDialogTitleCompactLineHeight : string;
193
210
  export const amsterdamDialogBackdropBackground : string;
194
- export const amsterdamDialogCloseBackgroundColor : string;
195
- export const amsterdamDialogCloseFill : string;
196
- export const amsterdamDialogCloseHoverFill : string;
197
211
  export const amsterdamDialogFormGap : string;
198
212
  export const amsterdamDialogFormPaddingBlock : string;
199
213
  export const amsterdamDialogFormPaddingInline : string;
@@ -220,6 +234,7 @@ export const amsterdamGridCompactGap : string;
220
234
  export const amsterdamGridCompactPaddingInline : string;
221
235
  export const amsterdamGridMediumColumnCount : string;
222
236
  export const amsterdamGridWideColumnCount : string;
237
+ export const amsterdamHeaderColumnGap : string;
223
238
  export const amsterdamHeadingColor : string;
224
239
  export const amsterdamHeadingFontFamily : string;
225
240
  export const amsterdamHeadingFontWeight : number;
@@ -232,6 +247,10 @@ export const amsterdamHeadingSpaciousLevel3LineHeight : string;
232
247
  export const amsterdamHeadingSpaciousLevel3FontSize : string;
233
248
  export const amsterdamHeadingSpaciousLevel4LineHeight : string;
234
249
  export const amsterdamHeadingSpaciousLevel4FontSize : string;
250
+ export const amsterdamHeadingSpaciousLevel5LineHeight : string;
251
+ export const amsterdamHeadingSpaciousLevel5FontSize : string;
252
+ export const amsterdamHeadingSpaciousLevel6LineHeight : string;
253
+ export const amsterdamHeadingSpaciousLevel6FontSize : string;
235
254
  export const amsterdamHeadingCompactLevel1LineHeight : string;
236
255
  export const amsterdamHeadingCompactLevel1FontSize : string;
237
256
  export const amsterdamHeadingCompactLevel2LineHeight : string;
@@ -240,14 +259,25 @@ export const amsterdamHeadingCompactLevel3LineHeight : string;
240
259
  export const amsterdamHeadingCompactLevel3FontSize : string;
241
260
  export const amsterdamHeadingCompactLevel4LineHeight : string;
242
261
  export const amsterdamHeadingCompactLevel4FontSize : string;
243
- export const amsterdamHighlightBlueBackgroundColor : string;
244
- export const amsterdamHighlightDarkGreenBackgroundColor : string;
245
- export const amsterdamHighlightGreenBackgroundColor : string;
246
- export const amsterdamHighlightLightBlueBackgroundColor : string;
247
- export const amsterdamHighlightMagentaBackgroundColor : string;
248
- export const amsterdamHighlightOrangeBackgroundColor : string;
249
- export const amsterdamHighlightPurpleBackgroundColor : string;
250
- export const amsterdamHighlightYellowBackgroundColor : string;
262
+ export const amsterdamHeadingCompactLevel5LineHeight : string;
263
+ export const amsterdamHeadingCompactLevel5FontSize : string;
264
+ export const amsterdamHeadingCompactLevel6LineHeight : string;
265
+ export const amsterdamHeadingCompactLevel6FontSize : string;
266
+ export const amsterdamIconButtonColor : string;
267
+ export const amsterdamIconButtonOutlineOffset : string;
268
+ export const amsterdamIconButtonHoverBackgroundColor : string;
269
+ export const amsterdamIconButtonHoverColor : string;
270
+ export const amsterdamIconButtonDisabledColor : string;
271
+ export const amsterdamIconButtonOnBackgroundLightColor : string;
272
+ export const amsterdamIconButtonOnBackgroundLightHoverBackgroundColor : string;
273
+ export const amsterdamIconButtonOnBackgroundLightHoverColor : string;
274
+ export const amsterdamIconButtonOnBackgroundLightDisabledColor : string;
275
+ export const amsterdamIconButtonOnBackgroundDarkBackgroundColor : string;
276
+ export const amsterdamIconButtonOnBackgroundDarkColor : string;
277
+ export const amsterdamIconButtonOnBackgroundDarkHoverBackgroundColor : string;
278
+ export const amsterdamIconButtonOnBackgroundDarkHoverColor : string;
279
+ export const amsterdamIconButtonOnBackgroundDarkDisabledColor : string;
280
+ export const amsterdamIconButtonOnBackgroundDarkDisabledBackgroundColor : string;
251
281
  export const amsterdamIconSpaciousSize3FontSize : string;
252
282
  export const amsterdamIconSpaciousSize3LineHeight : string;
253
283
  export const amsterdamIconSpaciousSize4FontSize : string;
@@ -256,8 +286,6 @@ export const amsterdamIconSpaciousSize5FontSize : string;
256
286
  export const amsterdamIconSpaciousSize5LineHeight : string;
257
287
  export const amsterdamIconSpaciousSize6FontSize : string;
258
288
  export const amsterdamIconSpaciousSize6LineHeight : string;
259
- export const amsterdamIconSpaciousSize7FontSize : string;
260
- export const amsterdamIconSpaciousSize7LineHeight : string;
261
289
  export const amsterdamIconCompactSize3FontSize : string;
262
290
  export const amsterdamIconCompactSize3LineHeight : string;
263
291
  export const amsterdamIconCompactSize4FontSize : string;
@@ -266,8 +294,33 @@ export const amsterdamIconCompactSize5FontSize : string;
266
294
  export const amsterdamIconCompactSize5LineHeight : string;
267
295
  export const amsterdamIconCompactSize6FontSize : string;
268
296
  export const amsterdamIconCompactSize6LineHeight : string;
269
- export const amsterdamIconCompactSize7FontSize : string;
270
- export const amsterdamIconCompactSize7LineHeight : string;
297
+ export const amsterdamLinkListGap : string;
298
+ export const amsterdamLinkListLinkColor : string;
299
+ export const amsterdamLinkListLinkFontFamily : string;
300
+ export const amsterdamLinkListLinkFontWeight : number;
301
+ export const amsterdamLinkListLinkGap : string;
302
+ export const amsterdamLinkListLinkOutlineOffset : string;
303
+ export const amsterdamLinkListLinkTextDecorationLine : string;
304
+ export const amsterdamLinkListLinkTextDecorationThickness : string;
305
+ export const amsterdamLinkListLinkTextUnderlineOffset : string;
306
+ export const amsterdamLinkListLinkSpaciousSmallFontSize : string;
307
+ export const amsterdamLinkListLinkSpaciousSmallLineHeight : string;
308
+ export const amsterdamLinkListLinkSpaciousMediumFontSize : string;
309
+ export const amsterdamLinkListLinkSpaciousMediumLineHeight : string;
310
+ export const amsterdamLinkListLinkSpaciousLargeFontSize : string;
311
+ export const amsterdamLinkListLinkSpaciousLargeLineHeight : string;
312
+ export const amsterdamLinkListLinkCompactSmallFontSize : string;
313
+ export const amsterdamLinkListLinkCompactSmallLineHeight : string;
314
+ export const amsterdamLinkListLinkCompactMediumFontSize : string;
315
+ export const amsterdamLinkListLinkCompactMediumLineHeight : string;
316
+ export const amsterdamLinkListLinkCompactLargeFontSize : string;
317
+ export const amsterdamLinkListLinkCompactLargeLineHeight : string;
318
+ export const amsterdamLinkListLinkHoverColor : string;
319
+ export const amsterdamLinkListLinkHoverTextDecorationLine : string;
320
+ export const amsterdamLinkListLinkOnBackgroundDarkColor : string;
321
+ export const amsterdamLinkListLinkOnBackgroundDarkHoverColor : string;
322
+ export const amsterdamLinkListLinkOnBackgroundLightColor : string;
323
+ export const amsterdamLinkListLinkOnBackgroundLightHoverColor : string;
271
324
  export const amsterdamLinkColor : string;
272
325
  export const amsterdamLinkFontFamily : string;
273
326
  export const amsterdamLinkFontWeight : number;
@@ -310,6 +363,11 @@ export const amsterdamLogoHeight : string;
310
363
  export const amsterdamLogoEmblemColor : string;
311
364
  export const amsterdamLogoTitleColor : string;
312
365
  export const amsterdamLogoSubsiteColor : string;
366
+ export const amsterdamMarkBackgroundColor : string;
367
+ export const amsterdamMegaMenuListCategoryColumnGap : string;
368
+ export const amsterdamMegaMenuListCategoryColumnWidth : string;
369
+ export const amsterdamMegaMenuListCategoryPaddingBlockStart : string;
370
+ export const amsterdamMegaMenuListCategoryPaddingBlockEnd : string;
313
371
  export const amsterdamOrderedListColor : string;
314
372
  export const amsterdamOrderedListFontFamily : string;
315
373
  export const amsterdamOrderedListFontWeight : number;
@@ -384,6 +442,43 @@ export const amsterdamParagraphCompactLargeFontSize : string;
384
442
  export const amsterdamParagraphCompactLargeLineHeight : string;
385
443
  export const amsterdamScreenWideMaxWidth : string;
386
444
  export const amsterdamScreenXWideMaxWidth : string;
445
+ export const amsterdamSearchFieldButtonBackgroundColor : string;
446
+ export const amsterdamSearchFieldButtonColor : string;
447
+ export const amsterdamSearchFieldButtonOutlineOffset : string;
448
+ export const amsterdamSearchFieldButtonHoverBackgroundColor : string;
449
+ export const amsterdamSearchFieldInputBoxShadow : string;
450
+ export const amsterdamSearchFieldInputColor : string;
451
+ export const amsterdamSearchFieldInputFontFamily : string;
452
+ export const amsterdamSearchFieldInputFontWeight : number;
453
+ export const amsterdamSearchFieldInputOutlineOffset : string;
454
+ export const amsterdamSearchFieldInputCancelButtonBackgroundImage : string;
455
+ export const amsterdamSearchFieldInputCancelButtonColor : string;
456
+ export const amsterdamSearchFieldInputCancelButtonHeight : string;
457
+ export const amsterdamSearchFieldInputCancelButtonWidth : string;
458
+ export const amsterdamSearchFieldInputHoverBoxShadow : string;
459
+ export const amsterdamSearchFieldInputPlaceholderColor : string;
460
+ export const amsterdamSearchFieldInputCompactFontSize : string;
461
+ export const amsterdamSearchFieldInputCompactLineHeight : string;
462
+ export const amsterdamSearchFieldInputSpaciousFontSize : string;
463
+ export const amsterdamSearchFieldInputSpaciousLineHeight : string;
464
+ export const amsterdamSkipLinkBackgroundColor : string;
465
+ export const amsterdamSkipLinkColor : string;
466
+ export const amsterdamSkipLinkFontFamily : string;
467
+ export const amsterdamSkipLinkFontWeight : number;
468
+ export const amsterdamSkipLinkFontSize : string;
469
+ export const amsterdamSkipLinkLineHeight : string;
470
+ export const amsterdamSkipLinkOutlineOffset : string;
471
+ export const amsterdamSkipLinkCompactFontSize : string;
472
+ export const amsterdamSkipLinkCompactLineHeight : string;
473
+ export const amsterdamSkipLinkHoverBackgroundColor : string;
474
+ export const amsterdamSpotlightBlueBackgroundColor : string;
475
+ export const amsterdamSpotlightDarkBlueBackgroundColor : string;
476
+ export const amsterdamSpotlightDarkGreenBackgroundColor : string;
477
+ export const amsterdamSpotlightGreenBackgroundColor : string;
478
+ export const amsterdamSpotlightMagentaBackgroundColor : string;
479
+ export const amsterdamSpotlightOrangeBackgroundColor : string;
480
+ export const amsterdamSpotlightPurpleBackgroundColor : string;
481
+ export const amsterdamSpotlightYellowBackgroundColor : string;
387
482
  export const amsterdamSwitchFontFamily : string;
388
483
  export const amsterdamSwitchBackgroundColor : string;
389
484
  export const amsterdamSwitchWidth : string;
@@ -394,6 +489,30 @@ export const amsterdamSwitchThumbHoverColor : string;
394
489
  export const amsterdamSwitchCheckedBackgroundColor : string;
395
490
  export const amsterdamSwitchOutlineOffset : string;
396
491
  export const amsterdamSwitchDisabledBackgroundColor : string;
492
+ export const amsterdamTableColor : string;
493
+ export const amsterdamTableFontFamily : string;
494
+ export const amsterdamTableFontWeight : number;
495
+ export const amsterdamTableFontSize : string;
496
+ export const amsterdamTableLineHeight : string;
497
+ export const amsterdamTableCaptionFontWeight : number;
498
+ export const amsterdamTableCellBorderBottom : string;
499
+ export const amsterdamTableHeaderCellFontWeight : number;
500
+ export const amsterdamTextInputBoxShadow : string;
501
+ export const amsterdamTextInputColor : string;
502
+ export const amsterdamTextInputFontFamily : string;
503
+ export const amsterdamTextInputFontWeight : number;
504
+ export const amsterdamTextInputOutlineOffset : string;
505
+ export const amsterdamTextInputDisabledBackgroundColor : string;
506
+ export const amsterdamTextInputDisabledBoxShadow : string;
507
+ export const amsterdamTextInputDisabledColor : string;
508
+ export const amsterdamTextInputHoverBoxShadow : string;
509
+ export const amsterdamTextInputInvalidBoxShadow : string;
510
+ export const amsterdamTextInputInvalidHoverBoxShadow : string;
511
+ export const amsterdamTextInputPlaceholderColor : string;
512
+ export const amsterdamTextInputCompactFontSize : string;
513
+ export const amsterdamTextInputCompactLineHeight : string;
514
+ export const amsterdamTextInputSpaciousFontSize : string;
515
+ export const amsterdamTextInputSpaciousLineHeight : string;
397
516
  export const amsterdamTopTaskLinkDescriptionColor : string;
398
517
  export const amsterdamTopTaskLinkDescriptionFontFamily : string;
399
518
  export const amsterdamTopTaskLinkDescriptionFontWeight : number;