@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/ordered-list.tokens.json CHANGED
@@ -1,43 +1,131 @@
1
1
  {
2
2
  "ams": {
3
3
  "ordered-list": {
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
- "gap": { "value": "{ams.space.s}" },
9
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
10
- "list-style-type": { "value": "decimal" },
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
+ "gap": {
23
+ "$value": "{ams.space.s}",
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
+ },
35
+ "list-style-type": {
36
+ "$value": "decimal"
37
+ },
11
38
  "small": {
12
- "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
13
- "line-height": { "value": "{ams.typography.body-text.small.line-height}" }
39
+ "font-size": {
40
+ "$value": "{ams.typography.body-text.small.font-size}",
41
+ "$extensions": {
42
+ "nl.amsterdam.type": "fontSize"
43
+ }
44
+ },
45
+ "line-height": {
46
+ "$value": "{ams.typography.body-text.small.line-height}",
47
+ "$extensions": {
48
+ "nl.amsterdam.type": "lineHeight"
49
+ }
50
+ }
14
51
  },
15
52
  "inverse": {
16
- "color": { "value": "{ams.color.text.inverse}" }
53
+ "color": {
54
+ "$value": "{ams.color.text.inverse}",
55
+ "$type": "color"
56
+ }
17
57
  },
18
58
  "item": {
19
59
  "margin-inline-start": {
20
- "value": "2.25rem",
21
- "comment": "Divide your total indentation width over margin and padding to position the marker."
60
+ "$value": {
61
+ "value": 2.25,
62
+ "unit": "rem"
63
+ },
64
+ "$type": "dimension",
65
+ "$extensions": {
66
+ "nl.amsterdam.hint": "Divide your total indentation width over margin and padding to position the marker.",
67
+ "nl.amsterdam.subtype": "space"
68
+ }
22
69
  },
23
70
  "padding-inline-start": {
24
- "value": "0.25rem",
25
- "comment": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem."
71
+ "$value": {
72
+ "value": 0.25,
73
+ "unit": "rem"
74
+ },
75
+ "$extensions": {
76
+ "nl.amsterdam.hint": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.",
77
+ "nl.amsterdam.subtype": "space"
78
+ },
79
+ "$type": "dimension"
26
80
  }
27
81
  },
28
82
  "ordered-list": {
29
- "gap": { "value": "{ams.space.s}" },
30
- "list-style-type": { "value": "lower-alpha" },
31
- "padding-block-end": { "value": "{ams.space.s}" },
32
- "padding-block-start": { "value": "{ams.space.s}" },
83
+ "gap": {
84
+ "$value": "{ams.space.s}",
85
+ "$type": "dimension",
86
+ "$extensions": {
87
+ "nl.amsterdam.subtype": "space"
88
+ }
89
+ },
90
+ "list-style-type": {
91
+ "$value": "lower-alpha"
92
+ },
93
+ "padding-block-end": {
94
+ "$value": "{ams.space.s}",
95
+ "$type": "dimension",
96
+ "$extensions": {
97
+ "nl.amsterdam.subtype": "space"
98
+ }
99
+ },
100
+ "padding-block-start": {
101
+ "$value": "{ams.space.s}",
102
+ "$type": "dimension",
103
+ "$extensions": {
104
+ "nl.amsterdam.subtype": "space"
105
+ }
106
+ },
33
107
  "item": {
34
108
  "margin-inline-start": {
35
- "value": "1.5rem",
36
- "comment": "Indent less than the parent to start-align the child’s marker with the parent text."
109
+ "$value": {
110
+ "value": 1.5,
111
+ "unit": "rem"
112
+ },
113
+ "$type": "dimension",
114
+ "$extensions": {
115
+ "nl.amsterdam.hint": "Indent less than the parent to start-align the child\u2019s marker with the parent text.",
116
+ "nl.amsterdam.subtype": "space"
117
+ }
37
118
  },
38
119
  "padding-inline-start": {
39
- "value": "0.25rem",
40
- "comment": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem."
120
+ "$value": {
121
+ "value": 0.25,
122
+ "unit": "rem"
123
+ },
124
+ "$extensions": {
125
+ "nl.amsterdam.hint": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.",
126
+ "nl.amsterdam.subtype": "space"
127
+ },
128
+ "$type": "dimension"
41
129
  }
42
130
  }
43
131
  }
package/src/components/ams/page-footer.tokens.json CHANGED
@@ -2,34 +2,114 @@
2
2
  "ams": {
3
3
  "page-footer": {
4
4
  "menu": {
5
- "column-gap": { "value": "{ams.space.l}" },
6
- "padding-block": { "value": "{ams.space.l}" },
7
- "padding-inline": { "value": "{ams.grid.padding-inline}" },
8
- "row-gap": { "value": "{ams.space.xs}" },
5
+ "column-gap": {
6
+ "$value": "{ams.space.l}",
7
+ "$type": "dimension",
8
+ "$extensions": {
9
+ "nl.amsterdam.subtype": "space"
10
+ }
11
+ },
12
+ "padding-block": {
13
+ "$value": "{ams.space.l}",
14
+ "$type": "dimension",
15
+ "$extensions": {
16
+ "nl.amsterdam.subtype": "space"
17
+ }
18
+ },
19
+ "padding-inline": {
20
+ "$value": "{ams.grid.padding-inline}",
21
+ "$type": "dimension",
22
+ "$extensions": {
23
+ "nl.amsterdam.subtype": "space"
24
+ }
25
+ },
26
+ "row-gap": {
27
+ "$value": "{ams.space.xs}",
28
+ "$type": "dimension",
29
+ "$extensions": {
30
+ "nl.amsterdam.subtype": "space"
31
+ }
32
+ },
9
33
  "medium": {
10
- "padding-inline": { "value": "{ams.grid.medium.padding-inline}" }
34
+ "padding-inline": {
35
+ "$value": "{ams.grid.medium.padding-inline}",
36
+ "$type": "dimension",
37
+ "$extensions": {
38
+ "nl.amsterdam.subtype": "space"
39
+ }
40
+ }
11
41
  },
12
42
  "wide": {
13
- "padding-inline": { "value": "{ams.grid.wide.padding-inline}" }
43
+ "padding-inline": {
44
+ "$value": "{ams.grid.wide.padding-inline}",
45
+ "$type": "dimension",
46
+ "$extensions": {
47
+ "nl.amsterdam.subtype": "space"
48
+ }
49
+ }
14
50
  },
15
51
  "link": {
16
- "color": { "value": "{ams.links.color}" },
17
- "font-family": { "value": "{ams.typography.font-family}" },
18
- "font-size": { "value": "{ams.typography.body-text.font-size}" },
19
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
20
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
21
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
22
- "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
23
- "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
24
- "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
52
+ "color": {
53
+ "$value": "{ams.links.color}",
54
+ "$type": "color"
55
+ },
56
+ "font-family": {
57
+ "$value": "{ams.typography.font-family}",
58
+ "$type": "fontFamily"
59
+ },
60
+ "font-size": {
61
+ "$value": "{ams.typography.body-text.font-size}",
62
+ "$extensions": {
63
+ "nl.amsterdam.type": "fontSize"
64
+ }
65
+ },
66
+ "font-weight": {
67
+ "$value": "{ams.typography.body-text.font-weight}",
68
+ "$type": "fontWeight"
69
+ },
70
+ "line-height": {
71
+ "$value": "{ams.typography.body-text.line-height}",
72
+ "$extensions": {
73
+ "nl.amsterdam.type": "lineHeight"
74
+ }
75
+ },
76
+ "outline-offset": {
77
+ "$value": "{ams.focus.outline-offset}",
78
+ "$type": "dimension",
79
+ "$extensions": {
80
+ "nl.amsterdam.subtype": "space"
81
+ }
82
+ },
83
+ "text-decoration-line": {
84
+ "$value": "{ams.links.subtle.text-decoration-line}"
85
+ },
86
+ "text-decoration-thickness": {
87
+ "$value": "{ams.links.text-decoration-thickness}",
88
+ "$type": "dimension"
89
+ },
90
+ "text-underline-offset": {
91
+ "$value": "{ams.links.text-underline-offset}",
92
+ "$type": "dimension",
93
+ "$extensions": {
94
+ "nl.amsterdam.subtype": "space"
95
+ }
96
+ },
25
97
  "hover": {
26
- "color": { "value": "{ams.links.hover.color}" },
27
- "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
98
+ "color": {
99
+ "$value": "{ams.links.hover.color}",
100
+ "$type": "color"
101
+ },
102
+ "text-decoration-line": {
103
+ "$value": "{ams.links.subtle.hover.text-decoration-line}"
104
+ }
28
105
  }
29
106
  }
30
107
  },
31
108
  "spotlight": {
32
- "background-color": { "value": "#004699" }
109
+ "background-color": {
110
+ "$value": "#004699",
111
+ "$type": "color"
112
+ }
33
113
  }
34
114
  }
35
115
  }
package/src/components/ams/page-header.compact.tokens.json CHANGED
@@ -2,11 +2,27 @@
2
2
  "ams": {
3
3
  "page-header": {
4
4
  "brand-name": {
5
- "font-size": { "value": "{ams.typography.heading.2.font-size}" },
6
- "line-height": { "value": "{ams.typography.heading.2.line-height}" }
5
+ "font-size": {
6
+ "$value": "{ams.typography.heading.2.font-size}",
7
+ "$extensions": {
8
+ "nl.amsterdam.type": "fontSize"
9
+ }
10
+ },
11
+ "line-height": {
12
+ "$value": "{ams.typography.heading.2.line-height}",
13
+ "$extensions": {
14
+ "nl.amsterdam.type": "lineHeight"
15
+ }
16
+ }
7
17
  },
8
18
  "mega-menu": {
9
- "padding-block": { "value": "0" }
19
+ "padding-block": {
20
+ "$value": "0",
21
+ "$type": "dimension",
22
+ "$extensions": {
23
+ "nl.amsterdam.subtype": "space"
24
+ }
25
+ }
10
26
  }
11
27
  }
12
28
  }
package/src/components/ams/page-header.tokens.json CHANGED
@@ -1,69 +1,249 @@
1
1
  {
2
2
  "ams": {
3
3
  "page-header": {
4
- "font-family": { "value": "{ams.typography.font-family}" },
5
- "padding-block": { "value": "{ams.space.l}" },
4
+ "font-family": {
5
+ "$value": "{ams.typography.font-family}",
6
+ "$type": "fontFamily"
7
+ },
8
+ "padding-block": {
9
+ "$value": "{ams.space.l}",
10
+ "$type": "dimension",
11
+ "$extensions": {
12
+ "nl.amsterdam.subtype": "space"
13
+ }
14
+ },
6
15
  "padding-inline": {
7
- "value": "{ams.grid.padding-inline}",
8
- "comment": "Must be the Grid inline padding, to make sure Header and Grid line up"
16
+ "$value": "{ams.grid.padding-inline}",
17
+ "$type": "dimension",
18
+ "$extensions": {
19
+ "nl.amsterdam.hint": "Must be the Grid inline padding, to make sure Header and Grid line up.",
20
+ "nl.amsterdam.subtype": "space"
21
+ }
9
22
  },
10
23
  "medium": {
11
- "padding-inline": { "value": "{ams.grid.medium.padding-inline}" }
24
+ "padding-inline": {
25
+ "$value": "{ams.grid.medium.padding-inline}",
26
+ "$type": "dimension",
27
+ "$extensions": {
28
+ "nl.amsterdam.subtype": "space"
29
+ }
30
+ }
12
31
  },
13
32
  "wide": {
14
- "padding-inline": { "value": "{ams.grid.wide.padding-inline}" }
33
+ "padding-inline": {
34
+ "$value": "{ams.grid.wide.padding-inline}",
35
+ "$type": "dimension",
36
+ "$extensions": {
37
+ "nl.amsterdam.subtype": "space"
38
+ }
39
+ }
15
40
  },
16
41
  "logo-link": {
17
- "column-gap": { "value": "{ams.space.m}" },
18
- "outline-offset": { "value": "{ams.focus.outline-offset}" }
42
+ "column-gap": {
43
+ "$value": "{ams.space.m}",
44
+ "$type": "dimension",
45
+ "$extensions": {
46
+ "nl.amsterdam.subtype": "space"
47
+ }
48
+ },
49
+ "outline-offset": {
50
+ "$value": "{ams.focus.outline-offset}",
51
+ "$type": "dimension",
52
+ "$extensions": {
53
+ "nl.amsterdam.subtype": "space"
54
+ }
55
+ }
19
56
  },
20
57
  "brand-name": {
21
- "color": { "value": "{ams.color.text.default}" },
22
- "font-size": { "value": "{ams.typography.heading.3.font-size}" },
23
- "font-weight": { "value": "{ams.typography.heading.font-weight}" },
24
- "line-height": { "value": "{ams.typography.heading.3.line-height}" },
25
- "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
58
+ "color": {
59
+ "$value": "{ams.color.text.default}",
60
+ "$type": "color"
61
+ },
62
+ "font-size": {
63
+ "$value": "{ams.typography.heading.3.font-size}",
64
+ "$extensions": {
65
+ "nl.amsterdam.type": "fontSize"
66
+ }
67
+ },
68
+ "font-weight": {
69
+ "$value": "{ams.typography.heading.font-weight}",
70
+ "$type": "fontWeight"
71
+ },
72
+ "line-height": {
73
+ "$value": "{ams.typography.heading.3.line-height}",
74
+ "$extensions": {
75
+ "nl.amsterdam.type": "lineHeight"
76
+ }
77
+ },
78
+ "text-wrap": {
79
+ "$value": "{ams.typography.heading.text-wrap}"
80
+ }
26
81
  },
27
82
  "mega-menu": {
28
- "padding-block": { "value": "{ams.space.l}" },
83
+ "padding-block": {
84
+ "$value": "{ams.space.l}",
85
+ "$type": "dimension",
86
+ "$extensions": {
87
+ "nl.amsterdam.subtype": "space"
88
+ }
89
+ },
29
90
  "button": {
30
- "cursor": { "value": "{ams.cursor.interactive}" },
91
+ "background-color": {
92
+ "$value": "{ams.color.interactive.default}",
93
+ "$type": "color"
94
+ },
95
+ "color": {
96
+ "$value": "{ams.color.text.inverse}",
97
+ "$type": "color"
98
+ },
99
+ "cursor": {
100
+ "$value": "{ams.cursor.interactive}"
101
+ },
31
102
  "label": {
32
103
  "open": {
33
- "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
104
+ "font-weight": {
105
+ "$value": "{ams.typography.body-text.bold.font-weight}",
106
+ "$type": "fontWeight",
107
+ "$deprecated": "We no longer make the button label bold when the mega menu is open. Will be removed in release 6.0.0."
108
+ }
109
+ }
110
+ },
111
+ "padding-inline": {
112
+ "$value": "{ams.space.s}",
113
+ "$type": "dimension",
114
+ "$extensions": {
115
+ "nl.amsterdam.subtype": "space"
116
+ }
117
+ },
118
+ "hover": {
119
+ "background-color": {
120
+ "$value": "{ams.color.interactive.hover}",
121
+ "$type": "color"
122
+ },
123
+ "color": {
124
+ "$value": "{ams.color.text.inverse}",
125
+ "$type": "color"
34
126
  }
35
127
  }
36
128
  }
37
129
  },
38
130
  "menu": {
39
- "column-gap": { "value": "{ams.space.l}" },
40
- "row-gap": { "value": "{ams.space.xs}" },
131
+ "column-gap": {
132
+ "$value": "{ams.space.l}",
133
+ "$type": "dimension",
134
+ "$extensions": {
135
+ "nl.amsterdam.subtype": "space"
136
+ }
137
+ },
138
+ "row-gap": {
139
+ "$value": "{ams.space.xs}",
140
+ "$type": "dimension",
141
+ "$extensions": {
142
+ "nl.amsterdam.subtype": "space"
143
+ }
144
+ },
41
145
  "item": {
42
- "color": { "value": "{ams.links.color}" },
43
- "column-gap": { "value": "{ams.space.xs}" },
44
- "font-family": { "value": "{ams.typography.font-family}" },
45
- "font-size": { "value": "{ams.typography.body-text.font-size}" },
46
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
47
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
48
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
49
- "padding-block": { "value": "{ams.space.xs}" },
146
+ "color": {
147
+ "$deprecated": "Use `ams.page-header.menu.link.color` instead.",
148
+ "$value": "{ams.links.color}",
149
+ "$type": "color"
150
+ },
151
+ "column-gap": {
152
+ "$value": "{ams.space.xs}",
153
+ "$type": "dimension",
154
+ "$extensions": {
155
+ "nl.amsterdam.subtype": "space"
156
+ }
157
+ },
158
+ "font-family": {
159
+ "$value": "{ams.typography.font-family}",
160
+ "$type": "fontFamily"
161
+ },
162
+ "font-size": {
163
+ "$value": "{ams.typography.body-text.font-size}",
164
+ "$extensions": {
165
+ "nl.amsterdam.type": "fontSize"
166
+ }
167
+ },
168
+ "font-weight": {
169
+ "$value": "{ams.typography.body-text.font-weight}",
170
+ "$type": "fontWeight"
171
+ },
172
+ "line-height": {
173
+ "$value": "{ams.typography.body-text.line-height}",
174
+ "$extensions": {
175
+ "nl.amsterdam.type": "lineHeight"
176
+ }
177
+ },
178
+ "outline-offset": {
179
+ "$value": "{ams.focus.outline-offset}",
180
+ "$type": "dimension",
181
+ "$extensions": {
182
+ "nl.amsterdam.subtype": "space"
183
+ }
184
+ },
185
+ "padding-block": {
186
+ "$value": "{ams.space.xs}",
187
+ "$type": "dimension",
188
+ "$extensions": {
189
+ "nl.amsterdam.subtype": "space"
190
+ }
191
+ },
50
192
  "hover": {
51
- "color": { "value": "{ams.links.hover.color}" }
193
+ "color": {
194
+ "$value": "{ams.links.hover.color}",
195
+ "$type": "color"
196
+ }
52
197
  }
53
198
  },
54
199
  "link": {
55
- "gap": { "value": "{ams.space.xs}" },
56
- "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
57
- "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
58
- "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
200
+ "color": {
201
+ "$value": "{ams.links.color}",
202
+ "$type": "color"
203
+ },
204
+ "gap": {
205
+ "$value": "{ams.space.xs}",
206
+ "$type": "dimension",
207
+ "$extensions": {
208
+ "nl.amsterdam.subtype": "space"
209
+ }
210
+ },
211
+ "text-decoration-line": {
212
+ "$value": "{ams.links.subtle.text-decoration-line}"
213
+ },
214
+ "text-decoration-thickness": {
215
+ "$value": "{ams.links.text-decoration-thickness}",
216
+ "$type": "dimension"
217
+ },
218
+ "text-underline-offset": {
219
+ "$value": "{ams.links.text-underline-offset}",
220
+ "$type": "dimension",
221
+ "$extensions": {
222
+ "nl.amsterdam.subtype": "space"
223
+ }
224
+ },
59
225
  "hover": {
60
- "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
226
+ "text-decoration-line": {
227
+ "$value": "{ams.links.subtle.hover.text-decoration-line}"
228
+ }
61
229
  }
62
230
  }
63
231
  },
64
232
  "navigation": {
65
- "column-gap": { "value": "{ams.space.l}" },
66
- "row-gap": { "value": "{ams.space.l}" }
233
+ "column-gap": {
234
+ "$value": "{ams.space.l}",
235
+ "$type": "dimension",
236
+ "$extensions": {
237
+ "nl.amsterdam.subtype": "space"
238
+ }
239
+ },
240
+ "row-gap": {
241
+ "$value": "{ams.space.l}",
242
+ "$type": "dimension",
243
+ "$extensions": {
244
+ "nl.amsterdam.subtype": "space"
245
+ }
246
+ }
67
247
  }
68
248
  }
69
249
  }
package/src/components/ams/page-heading.deprecated.tokens.json CHANGED
@@ -1,15 +1,45 @@
1
1
  {
2
2
  "ams": {
3
3
  "page-heading": {
4
- "comment": "We no longer use this size of headings. Use the Heading component with level 1 instead.",
5
- "color": { "value": "{ams.color.text.default}" },
6
- "font-family": { "value": "{ams.typography.font-family}" },
7
- "font-size": { "value": "{ams.typography.heading.0.font-size}" },
8
- "font-weight": { "value": "{ams.typography.heading.font-weight}" },
9
- "line-height": { "value": "{ams.typography.heading.0.line-height}" },
10
- "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
4
+ "color": {
5
+ "$deprecated": "Use the Heading component with level 1 instead.",
6
+ "$value": "{ams.color.text.default}",
7
+ "$type": "color"
8
+ },
9
+ "font-family": {
10
+ "$deprecated": "Use the Heading component with level 1 instead.",
11
+ "$value": "{ams.typography.font-family}",
12
+ "$type": "fontFamily"
13
+ },
14
+ "font-size": {
15
+ "$deprecated": "Use the Heading component with level 1 instead.",
16
+ "$value": "{ams.typography.heading.0.font-size}",
17
+ "$extensions": {
18
+ "nl.amsterdam.type": "fontSize"
19
+ }
20
+ },
21
+ "font-weight": {
22
+ "$deprecated": "Use the Heading component with level 1 instead.",
23
+ "$value": "{ams.typography.heading.font-weight}",
24
+ "$type": "fontWeight"
25
+ },
26
+ "line-height": {
27
+ "$deprecated": "Use the Heading component with level 1 instead.",
28
+ "$value": "{ams.typography.heading.0.line-height}",
29
+ "$extensions": {
30
+ "nl.amsterdam.type": "lineHeight"
31
+ }
32
+ },
33
+ "text-wrap": {
34
+ "$deprecated": "Use the Heading component with level 1 instead.",
35
+ "$value": "{ams.typography.heading.text-wrap}"
36
+ },
11
37
  "inverse": {
12
- "color": { "value": "{ams.color.text.inverse}" }
38
+ "color": {
39
+ "$deprecated": "Use the Heading component with level 1 instead.",
40
+ "$value": "{ams.color.text.inverse}",
41
+ "$type": "color"
42
+ }
13
43
  }
14
44
  }
15
45
  }