@amsterdam/design-system-tokens 3.4.0 → 4.0.1

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 (97) hide show
  1. package/AGENTS.md +71 -0
  2. package/CHANGELOG.md +57 -3
  3. package/CONTRIBUTING.md +18 -0
  4. package/README.md +131 -22
  5. package/build.js +11 -1
  6. package/dist/compact.css +10 -3
  7. package/dist/compact.d.ts +23 -6
  8. package/dist/compact.json +34 -17
  9. package/dist/compact.mjs +23 -13
  10. package/dist/compact.scss +10 -3
  11. package/dist/compact.theme.css +10 -3
  12. package/dist/index.css +108 -110
  13. package/dist/index.d.ts +112 -110
  14. package/dist/index.json +218 -216
  15. package/dist/index.mjs +218 -208
  16. package/dist/index.scss +108 -110
  17. package/dist/index.theme.css +108 -110
  18. package/package.json +2 -2
  19. package/src/brand/ams/aspect-ratio.tokens.json +24 -6
  20. package/src/brand/ams/border.tokens.json +5 -0
  21. package/src/brand/ams/color.compact.tokens.json +15 -0
  22. package/src/brand/ams/color.tokens.json +37 -54
  23. package/src/brand/ams/cursor.tokens.json +9 -2
  24. package/src/brand/ams/focus.tokens.json +1 -0
  25. package/src/brand/ams/space.compact.tokens.json +16 -4
  26. package/src/brand/ams/space.tokens.json +31 -6
  27. package/src/brand/ams/typography.compact.tokens.json +36 -45
  28. package/src/brand/ams/typography.tokens.json +59 -63
  29. package/src/common/ams/inputs.tokens.json +41 -19
  30. package/src/common/ams/links.tokens.json +35 -10
  31. package/src/components/ams/accordion.tokens.json +17 -48
  32. package/src/components/ams/action-group.tokens.json +2 -2
  33. package/src/components/ams/alert.tokens.json +38 -20
  34. package/src/components/ams/avatar.tokens.json +79 -29
  35. package/src/components/ams/badge.tokens.json +60 -23
  36. package/src/components/ams/blockquote.tokens.json +14 -5
  37. package/src/components/ams/body.compact.tokens.json +12 -0
  38. package/src/components/ams/body.tokens.json +12 -0
  39. package/src/components/ams/breadcrumb.tokens.json +36 -15
  40. package/src/components/ams/button.tokens.json +74 -33
  41. package/src/components/ams/call-to-action-link.tokens.json +29 -16
  42. package/src/components/ams/card.tokens.json +30 -17
  43. package/src/components/ams/character-count.tokens.json +14 -5
  44. package/src/components/ams/checkbox.tokens.json +101 -74
  45. package/src/components/ams/column.tokens.json +10 -10
  46. package/src/components/ams/date-input.tokens.json +55 -50
  47. package/src/components/ams/description-list.tokens.json +85 -24
  48. package/src/components/ams/dialog.tokens.json +104 -28
  49. package/src/components/ams/error-message.tokens.json +13 -6
  50. package/src/components/ams/field-set.tokens.json +35 -20
  51. package/src/components/ams/field.tokens.json +13 -10
  52. package/src/components/ams/figure.tokens.json +16 -7
  53. package/src/components/ams/file-input.tokens.json +69 -31
  54. package/src/components/ams/file-list.tokens.json +20 -11
  55. package/src/components/ams/grid.compact.tokens.json +43 -3
  56. package/src/components/ams/grid.tokens.json +77 -24
  57. package/src/components/ams/heading.tokens.json +38 -36
  58. package/src/components/ams/hint.tokens.json +6 -2
  59. package/src/components/ams/icon-button.tokens.json +46 -16
  60. package/src/components/ams/icon.tokens.json +19 -39
  61. package/src/components/ams/image-slider.tokens.json +28 -16
  62. package/src/components/ams/image.tokens.json +4 -1
  63. package/src/components/ams/invalid-form-alert.tokens.json +2 -2
  64. package/src/components/ams/label.tokens.json +18 -6
  65. package/src/components/ams/link-list.tokens.json +50 -22
  66. package/src/components/ams/link.tokens.json +38 -25
  67. package/src/components/ams/logo.tokens.json +6 -2
  68. package/src/components/ams/mark.tokens.json +3 -1
  69. package/src/components/ams/menu.tokens.json +80 -55
  70. package/src/components/ams/ordered-list.tokens.json +39 -25
  71. package/src/components/ams/page-footer.tokens.json +70 -26
  72. package/src/components/ams/page-header.compact.tokens.json +2 -1
  73. package/src/components/ams/page-header.tokens.json +128 -59
  74. package/src/components/ams/page.compact.tokens.json +12 -0
  75. package/src/components/ams/page.tokens.json +5 -3
  76. package/src/components/ams/pagination.tokens.json +37 -17
  77. package/src/components/ams/paragraph.tokens.json +22 -8
  78. package/src/components/ams/password-input.tokens.json +47 -21
  79. package/src/components/ams/progress-list.tokens.json +152 -61
  80. package/src/components/ams/radio.tokens.json +97 -36
  81. package/src/components/ams/row.tokens.json +10 -10
  82. package/src/components/ams/search-field.tokens.json +57 -24
  83. package/src/components/ams/select.tokens.json +63 -25
  84. package/src/components/ams/skip-link.tokens.json +23 -12
  85. package/src/components/ams/spotlight.tokens.json +21 -7
  86. package/src/components/ams/standalone-link.tokens.json +42 -46
  87. package/src/components/ams/switch.tokens.json +23 -9
  88. package/src/components/ams/tab-navigation.tokens.json +205 -0
  89. package/src/components/ams/table-of-contents.tokens.json +38 -41
  90. package/src/components/ams/table.tokens.json +29 -10
  91. package/src/components/ams/tabs.tokens.json +36 -17
  92. package/src/components/ams/text-area.tokens.json +49 -23
  93. package/src/components/ams/text-input.tokens.json +47 -21
  94. package/src/components/ams/time-input.tokens.json +55 -50
  95. package/src/components/ams/unordered-list.tokens.json +37 -25
  96. package/style-dictionary/transforms/dtcg-font-family.js +32 -0
  97. package/src/components/ams/page-heading.tokens.json +0 -46
package/dist/compact.mjs CHANGED
@@ -8,6 +8,8 @@ export const amsBorderWidthL = "0.125rem";
8
8
  export const amsBorderWidthXl = "0.1875rem";
9
9
  export const amsBorderWidthNegativeM = "-0.0625rem";
10
10
  export const amsBorderWidthNegativeXl = "-0.1875rem";
11
+ export const amsColorBackgroundBody = "#e8e8e8";
12
+ export const amsColorBackground = "#ffffff";
11
13
  export const amsSpaceXs = "0.25rem";
12
14
  export const amsSpaceS = "0.5rem";
13
15
  export const amsSpaceM = "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
@@ -15,34 +17,42 @@ export const amsSpaceL = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
15
17
  export const amsSpaceXl = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
16
18
  export const amsSpace_2xl = "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)";
17
19
  export const amsTypographyBodyTextFontSize = "1rem";
18
- export const amsTypographyBodyTextLineHeight = "1.5";
20
+ export const amsTypographyBodyTextLineHeight = 1.5;
19
21
  export const amsTypographyBodyTextSmallFontSize = "0.875rem";
20
- export const amsTypographyBodyTextSmallLineHeight = "1.4";
22
+ export const amsTypographyBodyTextSmallLineHeight = 1.4;
21
23
  export const amsTypographyBodyTextLargeFontSize =
22
24
  "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)";
23
- export const amsTypographyBodyTextLargeLineHeight = "1.4";
25
+ export const amsTypographyBodyTextLargeLineHeight = 1.4;
24
26
  export const amsTypographyBodyTextXLargeFontSize =
25
27
  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
26
- export const amsTypographyBodyTextXLargeLineHeight = "1.3";
27
- export const amsTypographyHeading_0FontSize =
28
- "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)";
28
+ export const amsTypographyBodyTextXLargeLineHeight = 1.3;
29
29
  export const amsTypographyHeading_1FontSize =
30
30
  "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)";
31
- export const amsTypographyHeading_1LineHeight = "1.2";
31
+ export const amsTypographyHeading_1LineHeight = 1.2;
32
32
  export const amsTypographyHeading_2FontSize =
33
33
  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
34
- export const amsTypographyHeading_2LineHeight = "1.3";
34
+ export const amsTypographyHeading_2LineHeight = 1.3;
35
35
  export const amsTypographyHeading_3FontSize =
36
36
  "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)";
37
- export const amsTypographyHeading_3LineHeight = "1.3";
37
+ export const amsTypographyHeading_3LineHeight = 1.3;
38
38
  export const amsTypographyHeading_4FontSize = "1rem";
39
- export const amsTypographyHeading_4LineHeight = "1.4";
39
+ export const amsTypographyHeading_4LineHeight = 1.4;
40
40
  export const amsTypographyHeading_5FontSize = "0.875rem";
41
- export const amsTypographyHeading_5LineHeight = "1.4";
42
- export const amsTypographyHeading_6FontSize = "0.875rem";
41
+ export const amsTypographyHeading_5LineHeight = 1.4;
42
+ export const amsBodyBackgroundColor = "#e8e8e8";
43
43
  export const amsGridPaddingInline =
44
+ "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
45
+ export const amsGridViMediumPaddingInline =
46
+ "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
47
+ export const amsGridViWidePaddingInline =
44
48
  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
49
+ export const amsGridCellBackgroundColor = "#ffffff";
50
+ export const amsGridCellPaddingBlock =
51
+ "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
52
+ export const amsGridCellPaddingInline =
53
+ "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
45
54
  export const amsPageHeaderBrandNameFontSize =
46
55
  "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
47
- export const amsPageHeaderBrandNameLineHeight = "1.3";
56
+ export const amsPageHeaderBrandNameLineHeight = 1.3;
48
57
  export const amsPageHeaderMegaMenuPaddingBlock = "0";
58
+ export const amsPageBackgroundColor = "#e8e8e8";
package/dist/compact.scss CHANGED
@@ -7,6 +7,8 @@ $ams-border-width-l: 0.125rem;
7
7
  $ams-border-width-xl: 0.1875rem;
8
8
  $ams-border-width-negative-m: -0.0625rem;
9
9
  $ams-border-width-negative-xl: -0.1875rem;
10
+ $ams-color-background-body: #e8e8e8;
11
+ $ams-color-background: #ffffff;
10
12
  $ams-space-xs: 0.25rem;
11
13
  $ams-space-s: 0.5rem;
12
14
  $ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);
@@ -21,7 +23,6 @@ $ams-typography-body-text-large-font-size: clamp(1.125rem, 1.1071rem + 0.0893vw,
21
23
  $ams-typography-body-text-large-line-height: 1.4;
22
24
  $ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
23
25
  $ams-typography-body-text-x-large-line-height: 1.3;
24
- $ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem);
25
26
  $ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
26
27
  $ams-typography-heading-1-line-height: 1.2;
27
28
  $ams-typography-heading-2-line-height: 1.3;
@@ -33,7 +34,13 @@ $ams-typography-heading-2-font-size: $ams-typography-body-text-x-large-font-size
33
34
  $ams-typography-heading-3-font-size: $ams-typography-body-text-large-font-size;
34
35
  $ams-typography-heading-4-font-size: $ams-typography-body-text-font-size;
35
36
  $ams-typography-heading-5-font-size: $ams-typography-body-text-small-font-size;
36
- $ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size;
37
- $ams-grid-padding-inline: $ams-space-xl;
37
+ $ams-body-background-color: $ams-color-background-body;
38
+ $ams-grid-padding-inline: $ams-space-m;
39
+ $ams-grid-vi-medium-padding-inline: $ams-space-l;
40
+ $ams-grid-vi-wide-padding-inline: $ams-space-xl;
41
+ $ams-grid-cell-background-color: $ams-color-background;
42
+ $ams-grid-cell-padding-block: $ams-space-m;
43
+ $ams-grid-cell-padding-inline: $ams-space-m;
38
44
  $ams-page-header-brand-name-line-height: $ams-typography-heading-2-line-height;
45
+ $ams-page-background-color: $ams-color-background-body;
39
46
  $ams-page-header-brand-name-font-size: $ams-typography-heading-2-font-size;
package/dist/compact.theme.css CHANGED
@@ -9,6 +9,8 @@
9
9
  --ams-border-width-xl: 0.1875rem;
10
10
  --ams-border-width-negative-m: -0.0625rem;
11
11
  --ams-border-width-negative-xl: -0.1875rem;
12
+ --ams-color-background-body: #e8e8e8;
13
+ --ams-color-background: #ffffff;
12
14
  --ams-space-xs: 0.25rem;
13
15
  --ams-space-s: 0.5rem;
14
16
  --ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);
@@ -23,7 +25,6 @@
23
25
  --ams-typography-body-text-large-line-height: 1.4;
24
26
  --ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
25
27
  --ams-typography-body-text-x-large-line-height: 1.3;
26
- --ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem);
27
28
  --ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
28
29
  --ams-typography-heading-1-line-height: 1.2;
29
30
  --ams-typography-heading-2-line-height: 1.3;
@@ -35,8 +36,14 @@
35
36
  --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);
36
37
  --ams-typography-heading-4-font-size: var(--ams-typography-body-text-font-size);
37
38
  --ams-typography-heading-5-font-size: var(--ams-typography-body-text-small-font-size);
38
- --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size);
39
- --ams-grid-padding-inline: var(--ams-space-xl);
39
+ --ams-body-background-color: var(--ams-color-background-body);
40
+ --ams-grid-padding-inline: var(--ams-space-m);
41
+ --ams-grid-vi-medium-padding-inline: var(--ams-space-l);
42
+ --ams-grid-vi-wide-padding-inline: var(--ams-space-xl);
43
+ --ams-grid-cell-background-color: var(--ams-color-background);
44
+ --ams-grid-cell-padding-block: var(--ams-space-m);
45
+ --ams-grid-cell-padding-inline: var(--ams-space-m);
40
46
  --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
47
+ --ams-page-background-color: var(--ams-color-background-body);
41
48
  --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
42
49
  }