@amsterdam/design-system-tokens 0.15.0 → 0.16.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 (31) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/LICENSE.md +2 -2
  3. package/README.md +4 -4
  4. package/dist/index.css +108 -113
  5. package/dist/index.d.ts +165 -164
  6. package/dist/index.json +185 -184
  7. package/dist/index.mjs +143 -143
  8. package/dist/index.scss +108 -113
  9. package/dist/index.theme.css +108 -113
  10. package/package.json +2 -2
  11. package/src/brand/ams/typography.tokens.json +1 -0
  12. package/src/components/ams/accordion.tokens.json +1 -0
  13. package/src/components/ams/alert.tokens.json +1 -1
  14. package/src/components/ams/avatar.tokens.json +1 -1
  15. package/src/components/ams/badge.tokens.json +1 -1
  16. package/src/components/ams/card.tokens.json +8 -2
  17. package/src/components/ams/dialog.tokens.json +22 -7
  18. package/src/components/ams/field-set.tokens.json +2 -1
  19. package/src/components/ams/grid.tokens.json +6 -6
  20. package/src/components/ams/heading.tokens.json +1 -0
  21. package/src/components/ams/label.tokens.json +2 -1
  22. package/src/components/ams/link.tokens.json +8 -27
  23. package/src/components/ams/{footer.tokens.json → page-footer.tokens.json} +7 -1
  24. package/src/components/ams/{header.tokens.json → page-header.tokens.json} +9 -2
  25. package/src/components/ams/page-heading.tokens.json +1 -0
  26. package/src/components/ams/page.tokens.json +8 -0
  27. package/src/components/ams/standalone-link.tokens.json +40 -0
  28. package/src/components/ams/mega-menu.tokens.json +0 -18
  29. package/src/components/ams/page-menu.tokens.json +0 -24
  30. package/src/components/ams/screen.tokens.json +0 -13
  31. package/src/components/ams/top-task-link.tokens.json +0 -29
package/CHANGELOG.md CHANGED
@@ -3,6 +3,41 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.16.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.15.0...design-system-tokens-v0.16.0) (2025-04-25)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * **Screen:** Delete component (use Page instead) ([#2018](https://github.com/Amsterdam/design-system/issues/2018))
12
+ * **Grid:** Match values for padding and gap with Space sizes ([#1993](https://github.com/Amsterdam/design-system/issues/1993))
13
+ * **Link:** Remove ‘variant’ prop, make inline the default ([#1994](https://github.com/Amsterdam/design-system/issues/1994))
14
+ * **Card:** Replace gap with margins and introduce subcomponents ([#1972](https://github.com/Amsterdam/design-system/issues/1972))
15
+ * **Top Task Link:** Remove component ([#1988](https://github.com/Amsterdam/design-system/issues/1988))
16
+ * **Footer:** Rename component to Page Footer ([#1971](https://github.com/Amsterdam/design-system/issues/1971))
17
+ * **Header:** Rename component to Page Header ([#1970](https://github.com/Amsterdam/design-system/issues/1970))
18
+
19
+ ### Features
20
+
21
+ * Add Standalone Link ([#1979](https://github.com/Amsterdam/design-system/issues/1979)) ([b5d57bb](https://github.com/Amsterdam/design-system/commit/b5d57bbd34c7817e436f7b28d5dc675213394bfb))
22
+ * **Alert:** Increase horizontal spacing around icon ([#1974](https://github.com/Amsterdam/design-system/issues/1974)) ([a71e1ba](https://github.com/Amsterdam/design-system/commit/a71e1ba779590fb7d7c8bd6c60e69309f268824c))
23
+ * **Avatar, Badge, Spotlight:** Use inverse text on azure background, add guidelines to pair colours ([#1965](https://github.com/Amsterdam/design-system/issues/1965)) ([772b0dd](https://github.com/Amsterdam/design-system/commit/772b0dd0828fc492108bd19ab9726da1d42b67d9))
24
+ * Balance text wrapping in all kinds of Headings ([#1968](https://github.com/Amsterdam/design-system/issues/1968)) ([ecc87a0](https://github.com/Amsterdam/design-system/commit/ecc87a091b356aaffaa8d0a11f1e7014c4f48f41))
25
+ * **Card:** Replace gap with margins and introduce subcomponents ([#1972](https://github.com/Amsterdam/design-system/issues/1972)) ([85e34d4](https://github.com/Amsterdam/design-system/commit/85e34d4ec3da1589c95925a677e5800fb071dc32))
26
+ * **Dialog:** Decrease amounts of inner and outer whitespace ([#1975](https://github.com/Amsterdam/design-system/issues/1975)) ([b47526f](https://github.com/Amsterdam/design-system/commit/b47526f24e5c6c9ce94f8280f93e6273d16a8640))
27
+ * **Footer:** Rename component to Page Footer ([#1971](https://github.com/Amsterdam/design-system/issues/1971)) ([d0f7edc](https://github.com/Amsterdam/design-system/commit/d0f7edc1bd3dcbba0973d4494fd6c9e90a158cd2))
28
+ * **Grid:** Match values for padding and gap with Space sizes ([#1993](https://github.com/Amsterdam/design-system/issues/1993)) ([f161152](https://github.com/Amsterdam/design-system/commit/f161152292f86770ffda0d60c3448f8d20b7b775))
29
+ * **Header:** Rename component to Page Header ([#1970](https://github.com/Amsterdam/design-system/issues/1970)) ([17172e4](https://github.com/Amsterdam/design-system/commit/17172e4fd89c630be6eb604d12058214a075a82b))
30
+ * **Link:** Remove ‘variant’ prop, make inline the default ([#1994](https://github.com/Amsterdam/design-system/issues/1994)) ([75b07b8](https://github.com/Amsterdam/design-system/commit/75b07b8bbdc758da26ce0319e2b989d079744065))
31
+ * **Page:** Add Page component ([#1982](https://github.com/Amsterdam/design-system/issues/1982)) ([813033c](https://github.com/Amsterdam/design-system/commit/813033c93be66dabccae3ff5f32484487dffc1aa))
32
+ * **Screen:** Delete component (use Page instead) ([#2018](https://github.com/Amsterdam/design-system/issues/2018)) ([0c59f6d](https://github.com/Amsterdam/design-system/commit/0c59f6dccffa7eda745a3b34554c86b646d514ba))
33
+ * **Top Task Link:** Remove component ([#1988](https://github.com/Amsterdam/design-system/issues/1988)) ([6da8a9b](https://github.com/Amsterdam/design-system/commit/6da8a9bdf47648a3ff0e18f89ed722092d0dad18))
34
+
35
+
36
+ ### Bug Fixes
37
+
38
+ * **Page Footer:** Set correct inline padding ([#2004](https://github.com/Amsterdam/design-system/issues/2004)) ([cb2e70c](https://github.com/Amsterdam/design-system/commit/cb2e70ce04e05aed64299e1df8c40b9d8873ca83))
39
+ * **Page Header:** Restore alignment with edges of Grid ([#1976](https://github.com/Amsterdam/design-system/issues/1976)) ([723a757](https://github.com/Amsterdam/design-system/commit/723a757511c921e8e5a4181c348ebd2077527a44))
40
+
6
41
  ## [0.15.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.14.0...design-system-tokens-v0.15.0) (2025-03-28)
7
42
 
8
43
 
package/LICENSE.md CHANGED
@@ -2,6 +2,6 @@
2
2
 
3
3
  # License
4
4
 
5
- The open source license does NOT apply to files in this directory.
5
+ The open-source licence does NOT apply to files in this directory.
6
6
 
7
- These are properietary assets to the City of Amsterdam.
7
+ These are proprietary assets to the City of Amsterdam.
package/README.md CHANGED
@@ -87,7 +87,7 @@ Examples:
87
87
  }
88
88
  ```
89
89
 
90
- Find the [list of brand tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/brand/ams) on GitHub.
90
+ Find the [list of brand tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/brand/ams) on GitHub.
91
91
 
92
92
  ##### Removing ‘default’ keys
93
93
 
@@ -116,7 +116,7 @@ The same goes for custom components that you may create in your application.
116
116
  }
117
117
  ```
118
118
 
119
- Find the [list of common tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/common/ams) on GitHub.
119
+ Find the [list of common tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/common/ams) on GitHub.
120
120
 
121
121
  #### Component tokens
122
122
 
@@ -136,7 +136,7 @@ Do not apply these tokens to other components – components must be independent
136
136
  }
137
137
  ```
138
138
 
139
- Find the [list of component tokens](https://github.com/Amsterdam/design-system/tree/main/proprietary/tokens/src/component/ams) on GitHub.
139
+ Find the [list of component tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/component/ams) on GitHub.
140
140
 
141
141
  ### Overriding tokens
142
142
 
@@ -202,7 +202,7 @@ The tokens are used in our [Figma Library](https://www.figma.com/file/9IGm6IdPUY
202
202
 
203
203
  ## Updating
204
204
 
205
- We follow semantic versioning and publish a [change log](https://github.com/Amsterdam/design-system/blob/main/proprietary/tokens/CHANGELOG.md) to guide you through updates.
205
+ We follow semantic versioning and publish a [change log](https://github.com/Amsterdam/design-system/blob/main/packages-proprietary/tokens/CHANGELOG.md) to guide you through updates.
206
206
  The tokens are a public API of the design system.
207
207
  Note that detecting changed or deleted tokens is still a manual process.
208
208
 
package/dist/index.css CHANGED
@@ -69,6 +69,7 @@
69
69
  --ams-typography-heading-5-line-height: 1.3345;
70
70
  --ams-typography-heading-6-line-height: 1.3776;
71
71
  --ams-typography-heading-font-weight: 800;
72
+ --ams-typography-heading-text-wrap: balance;
72
73
  --ams-links-text-underline-offset: 0.3333em;
73
74
  --ams-links-hover-text-underline-offset: 0.2778em;
74
75
  --ams-links-subtle-text-decoration-line: none;
@@ -93,7 +94,6 @@
93
94
  --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
94
95
  --ams-dialog-body-padding-block: 0;
95
96
  --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
96
- --ams-footer-spotlight-background-color: #004699;
97
97
  --ams-grid-column-count: 4;
98
98
  --ams-grid-medium-column-count: 8;
99
99
  --ams-grid-wide-column-count: 12;
@@ -103,13 +103,12 @@
103
103
  --ams-image-slider-thumbnails-thumbnail-opacity: 40%;
104
104
  --ams-image-slider-thumbnails-thumbnail-in-view-opacity: 100%;
105
105
  --ams-image-slider-thumbnails-thumbnail-hover-opacity: 100%;
106
- --ams-link-inline-font-family: inherit;
107
- --ams-link-inline-font-size: inherit;
108
- --ams-link-inline-line-height: inherit;
106
+ --ams-link-font-family: inherit;
107
+ --ams-link-font-size: inherit;
108
+ --ams-link-line-height: inherit;
109
109
  --ams-logo-min-block-size: 2.5rem;
110
110
  --ams-logo-emblem-color: #ec0000;
111
111
  --ams-logo-title-color: #ec0000;
112
- --ams-mega-menu-list-category-column-width: 20rem;
113
112
  --ams-ordered-list-list-style-type: decimal;
114
113
  --ams-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
115
114
  --ams-ordered-list-item-padding-inline-start: 0.25rem; /* The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
@@ -117,11 +116,11 @@
117
116
  --ams-ordered-list-ordered-list-padding-block-end: 0;
118
117
  --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; /* Indent less than the parent to start-align the child’s marker with the parent text. */
119
118
  --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
119
+ --ams-page-footer-spotlight-background-color: #004699;
120
+ --ams-page-max-inline-size: 100rem;
120
121
  --ams-radio-hover-indicator-stroke-width: 3px;
121
122
  --ams-radio-circle-stroke-width: 2px;
122
123
  --ams-radio-icon-container-inline-size: 1.5rem;
123
- --ams-screen-wide-max-inline-size: 100rem;
124
- --ams-screen-x-wide-max-inline-size: 132rem;
125
124
  --ams-search-field-input-cancel-button-background-image: 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>");
126
125
  --ams-select-background-image: 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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
127
126
  --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -161,6 +160,7 @@
161
160
  --ams-accordion-button-line-height: var(--ams-typography-heading-4-line-height);
162
161
  --ams-accordion-button-outline-offset: var(--ams-focus-outline-offset);
163
162
  --ams-accordion-button-padding-block: var(--ams-space-s);
163
+ --ams-accordion-button-text-wrap: var(--ams-typography-heading-text-wrap);
164
164
  --ams-accordion-button-hover-color: var(--ams-color-interactive-hover);
165
165
  --ams-action-group-gap: var(--ams-space-m);
166
166
  --ams-alert-background-color: var(--ams-color-background);
@@ -168,7 +168,7 @@
168
168
  --ams-alert-forced-colors-border-width: var(--ams-border-width-xl);
169
169
  --ams-alert-severity-indicator-background-color: var(--ams-color-feedback-info);
170
170
  --ams-alert-severity-indicator-padding-block: var(--ams-space-m);
171
- --ams-alert-severity-indicator-padding-inline: var(--ams-space-xs);
171
+ --ams-alert-severity-indicator-padding-inline: var(--ams-space-s);
172
172
  --ams-alert-content-gap: var(--ams-space-s);
173
173
  --ams-alert-content-padding-block: var(--ams-space-m);
174
174
  --ams-alert-content-padding-inline: var(--ams-space-m);
@@ -189,7 +189,7 @@
189
189
  --ams-avatar-padding-inline: var(--ams-space-xs);
190
190
  --ams-avatar-forced-colors-border-width: var(--ams-border-width-m);
191
191
  --ams-avatar-azure-background-color: var(--ams-color-highlight-azure);
192
- --ams-avatar-azure-color: var(--ams-color-text);
192
+ --ams-avatar-azure-color: var(--ams-color-text-inverse);
193
193
  --ams-avatar-green-background-color: var(--ams-color-highlight-green);
194
194
  --ams-avatar-green-color: var(--ams-color-text-inverse);
195
195
  --ams-avatar-lime-background-color: var(--ams-color-highlight-lime);
@@ -208,7 +208,7 @@
208
208
  --ams-badge-line-height: var(--ams-typography-body-text-line-height);
209
209
  --ams-badge-padding-inline: var(--ams-space-xs);
210
210
  --ams-badge-azure-background-color: var(--ams-color-feedback-info);
211
- --ams-badge-azure-color: var(--ams-color-text);
211
+ --ams-badge-azure-color: var(--ams-color-text-inverse);
212
212
  --ams-badge-lime-background-color: var(--ams-color-highlight-lime);
213
213
  --ams-badge-lime-color: var(--ams-color-text);
214
214
  --ams-badge-magenta-background-color: var(--ams-color-highlight-magenta);
@@ -268,8 +268,10 @@
268
268
  --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
269
269
  --ams-button-icon-only-padding-block: var(--ams-space-s);
270
270
  --ams-button-icon-only-padding-inline: var(--ams-space-s);
271
- --ams-card-gap: var(--ams-space-s);
272
- --ams-card-heading-group-gap: var(--ams-space-s);
271
+ --ams-card-heading-margin-block-end: var(--ams-space-xs);
272
+ --ams-card-heading-group-gap: var(--ams-space-xs);
273
+ --ams-card-heading-group-margin-block-end: var(--ams-space-xs);
274
+ --ams-card-image-margin-block-end: var(--ams-space-s);
273
275
  --ams-card-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
274
276
  --ams-card-link-text-underline-offset: var(--ams-links-text-underline-offset);
275
277
  --ams-card-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
@@ -348,14 +350,21 @@
348
350
  --ams-dialog-background-color: var(--ams-color-background);
349
351
  --ams-dialog-border: var(--ams-border-width-m) solid var(--ams-dialog-background-color);
350
352
  --ams-dialog-gap: var(--ams-space-m);
351
- --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-xl));
352
- --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
353
+ --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-l));
354
+ --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-l));
355
+ --ams-dialog-medium-inline-size: calc(100% - 2 * var(--ams-space-xl));
356
+ --ams-dialog-medium-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
353
357
  --ams-dialog-header-gap: var(--ams-space-m);
354
- --ams-dialog-header-padding-block: var(--ams-space-xl) 0;
355
- --ams-dialog-header-padding-inline: var(--ams-space-2xl);
356
- --ams-dialog-body-padding-inline: var(--ams-space-2xl);
357
- --ams-dialog-footer-padding-block: 0 var(--ams-space-xl);
358
- --ams-dialog-footer-padding-inline: var(--ams-space-2xl);
358
+ --ams-dialog-header-padding-block: var(--ams-space-l) 0;
359
+ --ams-dialog-header-padding-inline: var(--ams-space-l);
360
+ --ams-dialog-header-medium-padding-block: var(--ams-space-xl) 0;
361
+ --ams-dialog-header-medium-padding-inline: var(--ams-space-xl);
362
+ --ams-dialog-body-padding-inline: var(--ams-space-l);
363
+ --ams-dialog-body-medium-padding-inline: var(--ams-space-xl);
364
+ --ams-dialog-footer-padding-block: 0 var(--ams-space-l);
365
+ --ams-dialog-footer-padding-inline: var(--ams-space-l);
366
+ --ams-dialog-footer-medium-padding-block: 0 var(--ams-space-xl);
367
+ --ams-dialog-footer-medium-padding-inline: var(--ams-space-xl);
359
368
  --ams-error-message-color: var(--ams-color-feedback-error);
360
369
  --ams-error-message-font-family: var(--ams-typography-font-family);
361
370
  --ams-error-message-font-size: var(--ams-typography-body-text-small-font-size);
@@ -369,6 +378,7 @@
369
378
  --ams-field-set-legend-font-weight: var(--ams-typography-heading-font-weight);
370
379
  --ams-field-set-legend-line-height: var(--ams-typography-heading-4-line-height);
371
380
  --ams-field-set-legend-margin-block-end: var(--ams-space-m);
381
+ --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
372
382
  --ams-field-gap: var(--ams-space-s);
373
383
  --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
374
384
  --ams-field-invalid-padding-inline-start: var(--ams-space-m);
@@ -413,49 +423,16 @@
413
423
  --ams-file-list-file-gap: var(--ams-space-s);
414
424
  --ams-file-list-file-line-height: var(--ams-typography-body-text-small-line-height);
415
425
  --ams-file-list-file-details-color: var(--ams-color-text-secondary);
416
- --ams-footer-menu-column-gap: var(--ams-space-l);
417
- --ams-footer-menu-padding-block: var(--ams-space-l);
418
- --ams-footer-menu-row-gap: var(--ams-space-xs);
419
- --ams-footer-menu-link-font-family: var(--ams-typography-font-family);
420
- --ams-footer-menu-link-font-size: var(--ams-typography-body-text-small-font-size);
421
- --ams-footer-menu-link-font-weight: var(--ams-typography-body-text-font-weight);
422
- --ams-footer-menu-link-line-height: var(--ams-typography-body-text-small-line-height);
423
- --ams-footer-menu-link-outline-offset: var(--ams-focus-outline-offset);
424
- --ams-footer-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
425
- --ams-footer-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
426
- --ams-footer-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
427
426
  --ams-grid-column-gap: var(--ams-space-xl);
428
- --ams-grid-padding-block-s: var(--ams-space-l);
429
- --ams-grid-padding-block-m: var(--ams-space-xl);
430
- --ams-grid-padding-block-l: var(--ams-space-2xl);
427
+ --ams-grid-padding-block-l: var(--ams-space-l);
428
+ --ams-grid-padding-block-xl: var(--ams-space-xl);
429
+ --ams-grid-padding-block-2xl: var(--ams-space-2xl);
431
430
  --ams-grid-padding-inline: var(--ams-space-l);
432
- --ams-grid-row-gap-s: var(--ams-space-l);
433
- --ams-grid-row-gap-m: var(--ams-space-xl);
434
- --ams-grid-row-gap-l: var(--ams-space-2xl);
431
+ --ams-grid-row-gap-l: var(--ams-space-l);
432
+ --ams-grid-row-gap-xl: var(--ams-space-xl);
433
+ --ams-grid-row-gap-2xl: var(--ams-space-2xl);
435
434
  --ams-grid-medium-padding-inline: var(--ams-space-xl);
436
435
  --ams-grid-wide-padding-inline: var(--ams-space-2xl);
437
- --ams-header-font-family: var(--ams-typography-font-family);
438
- --ams-header-padding-block: var(--ams-space-l);
439
- --ams-header-logo-link-column-gap: var(--ams-space-m);
440
- --ams-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
441
- --ams-header-brand-name-color: var(--ams-color-text);
442
- --ams-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
443
- --ams-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
444
- --ams-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
445
- --ams-header-menu-column-gap: var(--ams-space-l);
446
- --ams-header-menu-row-gap: var(--ams-space-xs);
447
- --ams-header-menu-item-column-gap: var(--ams-space-xs);
448
- --ams-header-menu-item-font-family: var(--ams-typography-font-family);
449
- --ams-header-menu-item-font-size: var(--ams-typography-body-text-font-size);
450
- --ams-header-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
451
- --ams-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
452
- --ams-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
453
- --ams-header-menu-item-padding-block: var(--ams-space-xs);
454
- --ams-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
455
- --ams-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
456
- --ams-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
457
- --ams-header-navigation-column-gap: var(--ams-space-l);
458
- --ams-header-navigation-row-gap: var(--ams-space-s);
459
436
  --ams-heading-1-font-size: var(--ams-typography-heading-1-font-size);
460
437
  --ams-heading-1-line-height: var(--ams-typography-heading-1-line-height);
461
438
  --ams-heading-2-font-size: var(--ams-typography-heading-2-font-size);
@@ -467,6 +444,7 @@
467
444
  --ams-heading-color: var(--ams-color-text);
468
445
  --ams-heading-font-family: var(--ams-typography-font-family);
469
446
  --ams-heading-font-weight: var(--ams-typography-heading-font-weight);
447
+ --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
470
448
  --ams-heading-inverse-color: var(--ams-color-text-inverse);
471
449
  --ams-hint-color: var(--ams-color-text-secondary);
472
450
  --ams-icon-button-color: var(--ams-color-interactive);
@@ -507,6 +485,7 @@
507
485
  --ams-label-font-family: var(--ams-typography-font-family);
508
486
  --ams-label-font-weight: var(--ams-typography-heading-font-weight);
509
487
  --ams-label-line-height: var(--ams-typography-heading-4-line-height);
488
+ --ams-label-text-wrap: var(--ams-typography-heading-text-wrap);
510
489
  --ams-link-list-gap: var(--ams-space-s);
511
490
  --ams-link-list-link-font-family: var(--ams-typography-font-family);
512
491
  --ams-link-list-link-font-size: var(--ams-typography-body-text-font-size);
@@ -521,21 +500,13 @@
521
500
  --ams-link-list-link-large-font-size: var(--ams-typography-body-text-large-font-size);
522
501
  --ams-link-list-link-large-line-height: var(--ams-typography-body-text-large-line-height);
523
502
  --ams-link-list-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
524
- --ams-link-font-family: var(--ams-typography-font-family);
525
503
  --ams-link-font-weight: var(--ams-typography-body-text-font-weight);
526
504
  --ams-link-outline-offset: var(--ams-focus-outline-offset);
527
- --ams-link-inline-text-underline-offset: var(--ams-links-text-underline-offset);
528
- --ams-link-inline-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
529
- --ams-link-standalone-font-size: var(--ams-typography-body-text-font-size);
530
- --ams-link-standalone-line-height: var(--ams-typography-body-text-line-height);
531
- --ams-link-standalone-text-underline-offset: var(--ams-links-text-underline-offset);
532
- --ams-link-standalone-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
505
+ --ams-link-text-underline-offset: var(--ams-links-text-underline-offset);
506
+ --ams-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
533
507
  --ams-logo-block-size: var(--ams-space-xl);
534
508
  --ams-logo-subsite-color: var(--ams-color-text);
535
509
  --ams-mark-background-color: var(--ams-color-highlight-yellow);
536
- --ams-mega-menu-list-category-column-gap: var(--ams-space-xl); /* Must have the same value as `ams.grid.column-gap`. */
537
- --ams-mega-menu-list-category-padding-block-start: var(--ams-space-m);
538
- --ams-mega-menu-list-category-padding-block-end: var(--ams-space-xl); /* Must have the same value as `ams.grid.row-gap.md`. */
539
510
  --ams-ordered-list-color: var(--ams-color-text);
540
511
  --ams-ordered-list-font-family: var(--ams-typography-font-family);
541
512
  --ams-ordered-list-font-size: var(--ams-typography-body-text-font-size);
@@ -547,23 +518,48 @@
547
518
  --ams-ordered-list-inverse-color: var(--ams-color-text-inverse);
548
519
  --ams-ordered-list-ordered-list-gap: var(--ams-space-s);
549
520
  --ams-ordered-list-ordered-list-padding-block-start: var(--ams-space-s);
521
+ --ams-page-footer-menu-column-gap: var(--ams-space-l);
522
+ --ams-page-footer-menu-padding-block: var(--ams-space-l);
523
+ --ams-page-footer-menu-row-gap: var(--ams-space-xs);
524
+ --ams-page-footer-menu-link-font-family: var(--ams-typography-font-family);
525
+ --ams-page-footer-menu-link-font-size: var(--ams-typography-body-text-small-font-size);
526
+ --ams-page-footer-menu-link-font-weight: var(--ams-typography-body-text-font-weight);
527
+ --ams-page-footer-menu-link-line-height: var(--ams-typography-body-text-small-line-height);
528
+ --ams-page-footer-menu-link-outline-offset: var(--ams-focus-outline-offset);
529
+ --ams-page-footer-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
530
+ --ams-page-footer-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
531
+ --ams-page-footer-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
532
+ --ams-page-header-font-family: var(--ams-typography-font-family);
533
+ --ams-page-header-padding-block: var(--ams-space-l);
534
+ --ams-page-header-logo-link-column-gap: var(--ams-space-m);
535
+ --ams-page-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
536
+ --ams-page-header-brand-name-color: var(--ams-color-text);
537
+ --ams-page-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
538
+ --ams-page-header-brand-name-text-wrap: var(--ams-typography-heading-text-wrap);
539
+ --ams-page-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
540
+ --ams-page-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
541
+ --ams-page-header-menu-column-gap: var(--ams-space-l);
542
+ --ams-page-header-menu-row-gap: var(--ams-space-xs);
543
+ --ams-page-header-menu-item-column-gap: var(--ams-space-xs);
544
+ --ams-page-header-menu-item-font-family: var(--ams-typography-font-family);
545
+ --ams-page-header-menu-item-font-size: var(--ams-typography-body-text-font-size);
546
+ --ams-page-header-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
547
+ --ams-page-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
548
+ --ams-page-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
549
+ --ams-page-header-menu-item-padding-block: var(--ams-space-xs);
550
+ --ams-page-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
551
+ --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
552
+ --ams-page-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
553
+ --ams-page-header-navigation-column-gap: var(--ams-space-l);
554
+ --ams-page-header-navigation-row-gap: var(--ams-space-s);
550
555
  --ams-page-heading-color: var(--ams-color-text);
551
556
  --ams-page-heading-font-family: var(--ams-typography-font-family);
552
557
  --ams-page-heading-font-size: var(--ams-typography-heading-0-font-size);
553
558
  --ams-page-heading-font-weight: var(--ams-typography-heading-font-weight);
554
559
  --ams-page-heading-line-height: var(--ams-typography-heading-0-line-height);
560
+ --ams-page-heading-text-wrap: var(--ams-typography-heading-text-wrap);
555
561
  --ams-page-heading-inverse-color: var(--ams-color-text-inverse);
556
- --ams-page-menu-column-gap: var(--ams-space-xl);
557
- --ams-page-menu-row-gap: var(--ams-space-m);
558
- --ams-page-menu-item-font-family: var(--ams-typography-font-family);
559
- --ams-page-menu-item-font-size: var(--ams-typography-body-text-small-font-size);
560
- --ams-page-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
561
- --ams-page-menu-item-gap: var(--ams-space-s);
562
- --ams-page-menu-item-line-height: var(--ams-typography-body-text-small-line-height);
563
- --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
564
- --ams-page-menu-item-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
565
- --ams-page-menu-item-text-underline-offset: var(--ams-links-text-underline-offset);
566
- --ams-page-menu-item-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
562
+ --ams-page-background-color: var(--ams-color-background);
567
563
  --ams-pagination-font-family: var(--ams-typography-font-family);
568
564
  --ams-pagination-font-size: var(--ams-typography-body-text-font-size);
569
565
  --ams-pagination-font-weight: var(--ams-typography-body-text-font-weight);
@@ -638,7 +634,6 @@
638
634
  --ams-row-gap-medium: var(--ams-space-m);
639
635
  --ams-row-gap-large: var(--ams-space-l);
640
636
  --ams-row-gap-x-large: var(--ams-space-xl);
641
- --ams-screen-background-color: var(--ams-color-background);
642
637
  --ams-search-field-input-background-color: var(--ams-color-background);
643
638
  --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
644
639
  --ams-search-field-input-color: var(--ams-color-text);
@@ -692,6 +687,16 @@
692
687
  --ams-spotlight-magenta-background-color: var(--ams-color-highlight-magenta);
693
688
  --ams-spotlight-orange-background-color: var(--ams-color-highlight-orange);
694
689
  --ams-spotlight-yellow-background-color: var(--ams-color-highlight-yellow);
690
+ --ams-standalone-link-column-gap: var(--ams-space-s);
691
+ --ams-standalone-link-font-family: var(--ams-typography-font-family);
692
+ --ams-standalone-link-font-size: var(--ams-typography-body-text-font-size);
693
+ --ams-standalone-link-font-weight: var(--ams-typography-body-text-font-weight);
694
+ --ams-standalone-link-line-height: var(--ams-typography-body-text-line-height);
695
+ --ams-standalone-link-outline-offset: var(--ams-focus-outline-offset);
696
+ --ams-standalone-link-text-underline-offset: var(--ams-links-text-underline-offset);
697
+ --ams-standalone-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
698
+ --ams-standalone-link-with-icon-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
699
+ --ams-standalone-link-with-icon-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
695
700
  --ams-switch-cursor: var(--ams-cursor-interactive);
696
701
  --ams-switch-outline-offset: var(--ams-focus-outline-offset);
697
702
  --ams-switch-thumb-background-color: var(--ams-color-background);
@@ -794,19 +799,6 @@
794
799
  --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
795
800
  --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
796
801
  --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
797
- --ams-top-task-link-gap: var(--ams-space-s);
798
- --ams-top-task-link-description-color: var(--ams-color-text);
799
- --ams-top-task-link-description-font-family: var(--ams-typography-font-family);
800
- --ams-top-task-link-description-font-size: var(--ams-typography-body-text-small-font-size);
801
- --ams-top-task-link-description-font-weight: var(--ams-typography-body-text-font-weight);
802
- --ams-top-task-link-description-line-height: var(--ams-typography-body-text-small-line-height);
803
- --ams-top-task-link-label-font-family: var(--ams-typography-font-family);
804
- --ams-top-task-link-label-font-weight: var(--ams-typography-heading-font-weight);
805
- --ams-top-task-link-label-line-height: var(--ams-typography-heading-4-line-height);
806
- --ams-top-task-link-label-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
807
- --ams-top-task-link-label-text-underline-offset: var(--ams-links-text-underline-offset);
808
- --ams-top-task-link-label-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
809
- --ams-top-task-link-outline-offset: var(--ams-focus-outline-offset);
810
802
  --ams-unordered-list-color: var(--ams-color-text);
811
803
  --ams-unordered-list-font-family: var(--ams-typography-font-family);
812
804
  --ams-unordered-list-font-size: var(--ams-typography-body-text-font-size);
@@ -826,15 +818,6 @@
826
818
  --ams-card-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
827
819
  --ams-card-link-hover-color: var(--ams-links-hover-color);
828
820
  --ams-field-set-legend-font-size: var(--ams-typography-heading-4-font-size);
829
- --ams-footer-menu-padding-inline: var(--ams-grid-padding-inline);
830
- --ams-footer-menu-link-color: var(--ams-links-color);
831
- --ams-footer-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
832
- --ams-footer-menu-link-hover-color: var(--ams-links-hover-color);
833
- --ams-header-padding-inline: var(--ams-grid-padding-inline); /* Must be the Grid inline padding, to make sure Header and Grid line up */
834
- --ams-header-brand-name-font-size: var(--ams-typography-heading-4-font-size);
835
- --ams-header-menu-item-color: var(--ams-links-color);
836
- --ams-header-menu-item-hover-color: var(--ams-links-hover-color);
837
- --ams-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
838
821
  --ams-heading-3-font-size: var(--ams-typography-heading-3-font-size);
839
822
  --ams-heading-4-font-size: var(--ams-typography-heading-4-font-size);
840
823
  --ams-heading-5-font-size: var(--ams-typography-heading-5-font-size);
@@ -852,30 +835,42 @@
852
835
  --ams-link-list-link-inverse-color: var(--ams-links-inverse-color);
853
836
  --ams-link-list-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
854
837
  --ams-link-color: var(--ams-links-color);
838
+ --ams-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
855
839
  --ams-link-hover-color: var(--ams-links-hover-color);
856
- --ams-link-inline-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
857
- --ams-link-inline-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
858
- --ams-link-standalone-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
859
- --ams-link-standalone-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
840
+ --ams-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
860
841
  --ams-link-contrast-color: var(--ams-links-contrast-color);
861
842
  --ams-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
862
843
  --ams-link-inverse-color: var(--ams-links-inverse-color);
863
844
  --ams-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
864
- --ams-page-menu-item-color: var(--ams-links-color);
865
- --ams-page-menu-item-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
866
- --ams-page-menu-item-hover-color: var(--ams-links-hover-color);
845
+ --ams-page-footer-menu-padding-inline: var(--ams-grid-padding-inline);
846
+ --ams-page-footer-menu-medium-padding-inline: var(--ams-grid-medium-padding-inline);
847
+ --ams-page-footer-menu-wide-padding-inline: var(--ams-grid-wide-padding-inline);
848
+ --ams-page-footer-menu-link-color: var(--ams-links-color);
849
+ --ams-page-footer-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
850
+ --ams-page-footer-menu-link-hover-color: var(--ams-links-hover-color);
851
+ --ams-page-header-padding-inline: var(--ams-grid-padding-inline); /* Must be the Grid inline padding, to make sure Header and Grid line up */
852
+ --ams-page-header-medium-padding-inline: var(--ams-grid-medium-padding-inline);
853
+ --ams-page-header-wide-padding-inline: var(--ams-grid-wide-padding-inline);
854
+ --ams-page-header-brand-name-font-size: var(--ams-typography-heading-4-font-size);
855
+ --ams-page-header-menu-item-color: var(--ams-links-color);
856
+ --ams-page-header-menu-item-hover-color: var(--ams-links-hover-color);
857
+ --ams-page-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
867
858
  --ams-pagination-link-color: var(--ams-links-color);
868
859
  --ams-pagination-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
869
860
  --ams-pagination-link-hover-color: var(--ams-links-hover-color);
870
861
  --ams-radio-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
871
862
  --ams-radio-icon-container-block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
863
+ --ams-standalone-link-color: var(--ams-links-color);
864
+ --ams-standalone-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
865
+ --ams-standalone-link-contrast-color: var(--ams-links-contrast-color);
866
+ --ams-standalone-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
867
+ --ams-standalone-link-hover-color: var(--ams-links-hover-color);
868
+ --ams-standalone-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
869
+ --ams-standalone-link-inverse-color: var(--ams-links-inverse-color);
870
+ --ams-standalone-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
872
871
  --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
873
872
  --ams-table-of-contents-link-color: var(--ams-links-color);
874
873
  --ams-table-of-contents-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
875
874
  --ams-table-of-contents-link-hover-color: var(--ams-links-hover-color);
876
875
  --ams-table-of-contents-heading-font-size: var(--ams-typography-heading-4-font-size);
877
- --ams-top-task-link-label-color: var(--ams-links-color);
878
- --ams-top-task-link-label-font-size: var(--ams-typography-heading-4-font-size);
879
- --ams-top-task-link-label-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
880
- --ams-top-task-link-label-hover-color: var(--ams-links-hover-color);
881
876
  }