@amsterdam/design-system-tokens 0.8.0 → 0.10.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 (35) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/compact.css +1 -1
  3. package/dist/compact.d.ts +1 -1
  4. package/dist/compact.mjs +1 -1
  5. package/dist/compact.scss +1 -1
  6. package/dist/compact.theme.css +1 -1
  7. package/dist/index.css +129 -45
  8. package/dist/index.d.ts +174 -32
  9. package/dist/index.json +217 -75
  10. package/dist/index.mjs +161 -77
  11. package/dist/index.scss +129 -45
  12. package/dist/index.theme.css +129 -45
  13. package/package.json +1 -1
  14. package/src/brand/ams/proportion.tokens.json +3 -3
  15. package/src/common/ams/focus.tokens.json +1 -1
  16. package/src/common/ams/link-appearance.tokens.json +2 -2
  17. package/src/components/ams/avatar.tokens.json +24 -4
  18. package/src/components/ams/badge.tokens.json +28 -4
  19. package/src/components/ams/breadcrumb.tokens.json +1 -1
  20. package/src/components/ams/error-message.tokens.json +11 -0
  21. package/src/components/ams/{fieldset.tokens.json → field-set.tokens.json} +11 -2
  22. package/src/components/ams/field.tokens.json +17 -0
  23. package/src/components/ams/file-input.tokens.json +42 -0
  24. package/src/components/ams/link-list.tokens.json +2 -4
  25. package/src/components/ams/logo.tokens.json +1 -1
  26. package/src/components/ams/ordered-list.tokens.json +4 -0
  27. package/src/components/ams/paragraph.tokens.json +2 -4
  28. package/src/components/ams/screen.tokens.json +2 -2
  29. package/src/components/ams/search-field.tokens.json +11 -5
  30. package/src/components/ams/switch.tokens.json +6 -5
  31. package/src/components/ams/table-of-contents.tokens.json +34 -0
  32. package/src/components/ams/table.tokens.json +1 -1
  33. package/src/components/ams/tabs.tokens.json +1 -1
  34. package/src/components/ams/text-area.tokens.json +1 -1
  35. package/src/components/ams/unordered-list.tokens.json +4 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,51 @@
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.10.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.9.0...design-system-tokens-v0.10.0) (2024-06-28)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257))
12
+
13
+ ### Features
14
+
15
+ * Add Table of Contents component ([#1248](https://github.com/Amsterdam/design-system/issues/1248)) ([1f4c09a](https://github.com/Amsterdam/design-system/commit/1f4c09a08d2aa96d1c584eceb498d33c31aa52ad))
16
+ * Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257)) ([a1a3c8f](https://github.com/Amsterdam/design-system/commit/a1a3c8fc58f249f0cd9c7d8bd09cc46f3f48cb5c))
17
+ * Change values for tall, wide, and extra wide aspect ratios ([#1254](https://github.com/Amsterdam/design-system/issues/1254)) ([478508a](https://github.com/Amsterdam/design-system/commit/478508a758f311b89dfb8214813b25e50d875ff0))
18
+
19
+ ## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.8.0...design-system-tokens-v0.9.0) (2024-06-05)
20
+
21
+
22
+ ### ⚠ BREAKING CHANGES
23
+
24
+ * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245))
25
+ * Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240))
26
+ * Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237))
27
+ * Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236))
28
+ * Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232))
29
+ * Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226))
30
+ * Flatten token names for default text size and line height ([#1221](https://github.com/Amsterdam/design-system/issues/1221))
31
+
32
+ ### Features
33
+
34
+ * Add Error Message ([#1247](https://github.com/Amsterdam/design-system/issues/1247)) ([1dec2ea](https://github.com/Amsterdam/design-system/commit/1dec2ead41fba24e4128c2e1d60b72a7ccb29a92))
35
+ * Add Field component ([#1228](https://github.com/Amsterdam/design-system/issues/1228)) ([66832aa](https://github.com/Amsterdam/design-system/commit/66832aaf14a209915b60498acecf90cecff27c23))
36
+ * Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237)) ([d7316e8](https://github.com/Amsterdam/design-system/commit/d7316e81cd424f79f9bd655265d1c9b41296fecf))
37
+ * Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236)) ([eec669a](https://github.com/Amsterdam/design-system/commit/eec669ad79353fc205e12a35aa7d0a8297c72e41))
38
+ * Allow small text for ordered lists ([#1219](https://github.com/Amsterdam/design-system/issues/1219)) ([0e77bd6](https://github.com/Amsterdam/design-system/commit/0e77bd60d8f395417c3c736d8e51a3ca3729ece5))
39
+ * Allow small text for unordered lists ([#1217](https://github.com/Amsterdam/design-system/issues/1217)) ([5012851](https://github.com/Amsterdam/design-system/commit/5012851492e50e50e2a651250622740e517fd22f))
40
+ * File Input ([#1218](https://github.com/Amsterdam/design-system/issues/1218)) ([7b6ba98](https://github.com/Amsterdam/design-system/commit/7b6ba98530caaefafedada5b89a175ef0b1a8784))
41
+ * Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232)) ([6cf2e5e](https://github.com/Amsterdam/design-system/commit/6cf2e5e51217900a24d739c4569c13237b9fb4ab))
42
+ * Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) ([9477186](https://github.com/Amsterdam/design-system/commit/9477186b8432d6d20991e93d92c64a4357d6f391))
43
+ * Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226)) ([4471c7a](https://github.com/Amsterdam/design-system/commit/4471c7a154e9f1f31dd92298f932f4bbc134dbf9))
44
+
45
+
46
+ ### Bug Fixes
47
+
48
+ * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) ([8ab6f81](https://github.com/Amsterdam/design-system/commit/8ab6f81d4cbcdb75b7acb986a145d49ccd1895c8))
49
+ * Flatten token names for default text size and line height ([#1221](https://github.com/Amsterdam/design-system/issues/1221)) ([6eeaeb4](https://github.com/Amsterdam/design-system/commit/6eeaeb41fae90a2d455b4e41da3ff3a4561dcbe4))
50
+
6
51
  ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.1...design-system-tokens-v0.8.0) (2024-04-22)
7
52
 
8
53
 
package/dist/compact.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Apr 2024 09:30:48 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/compact.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Apr 2024 09:30:48 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
package/dist/compact.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Apr 2024 09:30:48 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  export const amsSpaceGridXs = "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)";
package/dist/compact.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 22 Apr 2024 09:30:48 GMT
3
+ // Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
 
5
5
  $ams-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
6
6
  $ams-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
package/dist/compact.theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Apr 2024 09:30:48 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  .ams-theme--compact {
package/dist/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Apr 2024 09:30:48 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:39 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -19,14 +19,14 @@
19
19
  --ams-tabs-button-padding-inline: 1rem;
20
20
  --ams-tabs-button-padding-block: .5rem;
21
21
  --ams-tabs-button-outline-offset: -0.25rem;
22
- --ams-switch-thumb-height: 1.75rem;
23
- --ams-switch-thumb-width: 1.75rem;
24
- --ams-switch-width: 3.5rem;
22
+ --ams-switch-thumb-block-size: 1.75rem;
23
+ --ams-switch-thumb-inline-size: 1.75rem;
24
+ --ams-switch-inline-size: 3.5rem;
25
25
  --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>");
26
26
  --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>");
27
27
  --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>");
28
- --ams-screen-x-wide-max-width: 132rem;
29
- --ams-screen-wide-max-width: 100rem;
28
+ --ams-screen-x-wide-max-inline-size: 132rem;
29
+ --ams-screen-wide-max-inline-size: 100rem;
30
30
  --ams-radio-circle-invalid-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
31
31
  --ams-radio-circle-invalid-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
32
32
  --ams-radio-circle-disabled-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
@@ -43,7 +43,7 @@
43
43
  --ams-ordered-list-gap: 0.75rem;
44
44
  --ams-mega-menu-list-category-padding-block-start: 1rem;
45
45
  --ams-mega-menu-list-category-column-width: 20rem;
46
- --ams-logo-height: 2.5rem;
46
+ --ams-logo-block-size: 2.5rem;
47
47
  --ams-link-inline-line-height: inherit;
48
48
  --ams-link-inline-font-size: inherit;
49
49
  --ams-link-inline-font-family: inherit;
@@ -79,13 +79,13 @@
79
79
  --ams-accordion-button-padding-inline: 0;
80
80
  --ams-link-appearance-subtle-hover-text-decoration-line: underline;
81
81
  --ams-link-appearance-subtle-text-decoration-line: none;
82
- --ams-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
82
+ --ams-link-appearance-regular-hover-text-underline-offset: 0.2778em;
83
83
  --ams-link-appearance-regular-text-decoration-line: underline;
84
- --ams-link-appearance-text-underline-offset: 0.375rem;
84
+ --ams-link-appearance-text-underline-offset: 0.3333em;
85
85
  --ams-hyphenation-overflow-wrap: break-word;
86
86
  --ams-hyphenation-hyphens: auto;
87
87
  --ams-hyphenation-hyphenate-limit-chars: 12 8 4;
88
- --ams-focus-outline-offset: 2px;
88
+ --ams-focus-outline-offset: 0.125rem;
89
89
  --ams-action-submit-cursor: pointer;
90
90
  --ams-action-navigate-cursor: pointer;
91
91
  --ams-action-inert-cursor: default;
@@ -124,11 +124,11 @@
124
124
  --ams-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
125
125
  --ams-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
126
126
  --ams-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
127
- --ams-proportion-2x-wide: 32 / 9;
127
+ --ams-proportion-2x-wide: 16 / 5;
128
128
  --ams-proportion-x-wide: 16 / 9;
129
- --ams-proportion-wide: 5 / 4;
129
+ --ams-proportion-wide: 4 / 3;
130
130
  --ams-proportion-square: 1 / 1;
131
- --ams-proportion-tall: 4 / 5;
131
+ --ams-proportion-tall: 3 / 4;
132
132
  --ams-proportion-x-tall: 9 / 16;
133
133
  --ams-color-neutral-grey3: #767676;
134
134
  --ams-color-neutral-grey2: #BEBEBE;
@@ -149,6 +149,8 @@
149
149
  --ams-border-width-lg: 0.1875rem;
150
150
  --ams-border-width-md: 0.125rem;
151
151
  --ams-border-width-sm: 0.0625rem;
152
+ --ams-unordered-list-small-line-height: var(--ams-text-level-6-line-height);
153
+ --ams-unordered-list-small-font-size: var(--ams-text-level-6-font-size);
152
154
  --ams-unordered-list-line-height: var(--ams-text-level-5-line-height);
153
155
  --ams-unordered-list-inverse-color: var(--ams-color-primary-white);
154
156
  --ams-unordered-list-font-weight: var(--ams-text-font-weight-normal);
@@ -211,7 +213,7 @@
211
213
  --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
212
214
  --ams-text-area-disabled-background-color: var(--ams-color-primary-white);
213
215
  --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
214
- --ams-text-area-min-height: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
216
+ --ams-text-area-min-block-size: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
215
217
  --ams-text-area-line-height: var(--ams-text-level-5-line-height);
216
218
  --ams-text-area-font-weight: var(--ams-text-font-weight-normal);
217
219
  --ams-text-area-font-size: var(--ams-text-level-5-font-size);
@@ -231,25 +233,40 @@
231
233
  --ams-tabs-button-font-family: var(--ams-text-font-family);
232
234
  --ams-tabs-button-cursor: var(--ams-action-activate-cursor);
233
235
  --ams-tabs-button-color: var(--ams-color-primary-blue);
234
- --ams-tabs-list-border-bottom: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
236
+ --ams-tabs-list-border-block-end: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
235
237
  --ams-tabs-list-background-color: var(--ams-color-primary-white);
236
238
  --ams-table-header-cell-font-weight: var(--ams-text-font-weight-bold);
237
239
  --ams-table-cell-padding-inline: var(--ams-space-inside-md);
238
240
  --ams-table-cell-padding-block: var(--ams-space-inside-md);
239
- --ams-table-cell-border-bottom: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
241
+ --ams-table-cell-border-block-end: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
240
242
  --ams-table-caption-font-weight: var(--ams-text-font-weight-bold);
241
243
  --ams-table-line-height: var(--ams-text-level-5-line-height);
242
244
  --ams-table-font-weight: var(--ams-text-font-weight-normal);
243
245
  --ams-table-font-size: var(--ams-text-level-5-font-size);
244
246
  --ams-table-font-family: var(--ams-text-font-family);
245
247
  --ams-table-color: var(--ams-color-primary-black);
248
+ --ams-table-of-contents-heading-line-height: var(--ams-text-level-4-line-height);
249
+ --ams-table-of-contents-heading-font-size: var(--ams-text-level-4-font-size);
250
+ --ams-table-of-contents-heading-font-weight: var(--ams-text-font-weight-bold);
251
+ --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-inside-lg);
252
+ --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-inside-md);
253
+ --ams-table-of-contents-list-gap: var(--ams-space-inside-md);
254
+ --ams-table-of-contents-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
255
+ --ams-table-of-contents-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
256
+ --ams-table-of-contents-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
257
+ --ams-table-of-contents-link-outline-offset: var(--ams-focus-outline-offset);
258
+ --ams-table-of-contents-line-height: var(--ams-text-level-5-line-height);
259
+ --ams-table-of-contents-gap: var(--ams-space-inside-md);
260
+ --ams-table-of-contents-font-weight: var(--ams-text-font-weight-normal);
261
+ --ams-table-of-contents-font-size: var(--ams-text-level-5-font-size);
262
+ --ams-table-of-contents-font-family: var(--ams-text-font-family);
246
263
  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
247
- --ams-switch-outline-offset: var(--ams-focus-outline-offset);
248
264
  --ams-switch-checked-background-color: var(--ams-color-primary-blue);
249
265
  --ams-switch-thumb-hover-color: var(--ams-color-dark-blue);
250
266
  --ams-switch-thumb-background-color: var(--ams-color-primary-white);
251
- --ams-switch-background-color: var(--ams-color-neutral-grey3);
267
+ --ams-switch-outline-offset: var(--ams-focus-outline-offset);
252
268
  --ams-switch-font-family: var(--ams-text-font-family);
269
+ --ams-switch-background-color: var(--ams-color-neutral-grey3);
253
270
  --ams-spotlight-yellow-background-color: var(--ams-color-yellow);
254
271
  --ams-spotlight-purple-background-color: var(--ams-color-purple);
255
272
  --ams-spotlight-orange-background-color: var(--ams-color-orange);
@@ -286,10 +303,12 @@
286
303
  --ams-select-background-position: right var(--ams-space-inside-md) center;
287
304
  --ams-select-background-color: var(--ams-color-primary-white);
288
305
  --ams-search-field-input-placeholder-color: var(--ams-color-neutral-grey3);
306
+ --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
307
+ --ams-search-field-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
289
308
  --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
290
- --ams-search-field-input-cancel-button-width: var(--ams-text-level-5-font-size);
291
- --ams-search-field-input-cancel-button-height: var(--ams-text-level-5-font-size);
309
+ --ams-search-field-input-cancel-button-inline-size: var(--ams-text-level-5-font-size);
292
310
  --ams-search-field-input-cancel-button-color: var(--ams-color-primary-blue);
311
+ --ams-search-field-input-cancel-button-block-size: var(--ams-text-level-5-font-size);
293
312
  --ams-search-field-input-padding-inline: var(--ams-space-inside-md);
294
313
  --ams-search-field-input-padding-block: var(--ams-space-inside-xs);
295
314
  --ams-search-field-input-outline-offset: var(--ams-focus-outline-offset);
@@ -300,9 +319,9 @@
300
319
  --ams-search-field-input-color: var(--ams-color-primary-black);
301
320
  --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
302
321
  --ams-search-field-input-background-color: var(--ams-color-primary-white);
322
+ --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
303
323
  --ams-search-field-button-padding-inline: var(--ams-space-inside-xs);
304
324
  --ams-search-field-button-padding-block: var(--ams-space-inside-xs);
305
- --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
306
325
  --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
307
326
  --ams-search-field-button-color: var(--ams-color-primary-white);
308
327
  --ams-search-field-button-background-color: var(--ams-color-primary-blue);
@@ -330,12 +349,12 @@
330
349
  --ams-radio-color: var(--ams-color-primary-black);
331
350
  --ams-paragraph-large-line-height: var(--ams-text-level-4-line-height);
332
351
  --ams-paragraph-large-font-size: var(--ams-text-level-4-font-size);
333
- --ams-paragraph-medium-line-height: var(--ams-text-level-5-line-height);
334
- --ams-paragraph-medium-font-size: var(--ams-text-level-5-font-size);
335
352
  --ams-paragraph-small-line-height: var(--ams-text-level-6-line-height);
336
353
  --ams-paragraph-small-font-size: var(--ams-text-level-6-font-size);
337
354
  --ams-paragraph-inverse-color: var(--ams-color-primary-white);
355
+ --ams-paragraph-line-height: var(--ams-text-level-5-line-height);
338
356
  --ams-paragraph-font-weight: var(--ams-text-font-weight-normal);
357
+ --ams-paragraph-font-size: var(--ams-text-level-5-font-size);
339
358
  --ams-paragraph-font-family: var(--ams-text-font-family);
340
359
  --ams-paragraph-color: var(--ams-color-primary-black);
341
360
  --ams-pagination-button-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
@@ -364,6 +383,8 @@
364
383
  --ams-page-heading-font-size: var(--ams-text-level-0-font-size);
365
384
  --ams-page-heading-font-family: var(--ams-text-font-family);
366
385
  --ams-page-heading-color: var(--ams-color-primary-black);
386
+ --ams-ordered-list-small-line-height: var(--ams-text-level-6-line-height);
387
+ --ams-ordered-list-small-font-size: var(--ams-text-level-6-font-size);
367
388
  --ams-ordered-list-line-height: var(--ams-text-level-5-line-height);
368
389
  --ams-ordered-list-inverse-color: var(--ams-color-primary-white);
369
390
  --ams-ordered-list-font-weight: var(--ams-text-font-weight-normal);
@@ -396,14 +417,14 @@
396
417
  --ams-link-list-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
397
418
  --ams-link-list-link-large-line-height: var(--ams-text-level-4-line-height);
398
419
  --ams-link-list-link-large-font-size: var(--ams-text-level-4-font-size);
399
- --ams-link-list-link-medium-line-height: var(--ams-text-level-5-line-height);
400
- --ams-link-list-link-medium-font-size: var(--ams-text-level-5-font-size);
401
420
  --ams-link-list-link-small-line-height: var(--ams-text-level-6-line-height);
402
421
  --ams-link-list-link-small-font-size: var(--ams-text-level-6-font-size);
403
422
  --ams-link-list-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
404
423
  --ams-link-list-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
405
424
  --ams-link-list-link-outline-offset: var(--ams-focus-outline-offset);
425
+ --ams-link-list-link-line-height: var(--ams-text-level-5-line-height);
406
426
  --ams-link-list-link-font-weight: var(--ams-text-font-weight-normal);
427
+ --ams-link-list-link-font-size: var(--ams-text-level-5-font-size);
407
428
  --ams-link-list-link-font-family: var(--ams-text-font-family);
408
429
  --ams-label-line-height: var(--ams-text-level-4-line-height);
409
430
  --ams-label-font-weight: var(--ams-text-font-weight-bold);
@@ -469,11 +490,48 @@
469
490
  --ams-form-field-character-counter-font-size: var(--ams-text-level-6-font-size);
470
491
  --ams-form-field-character-counter-font-family: var(--ams-text-font-family);
471
492
  --ams-form-field-character-counter-color: var(--ams-color-primary-black);
472
- --ams-fieldset-legend-line-height: var(--ams-text-level-4-line-height);
473
- --ams-fieldset-legend-font-weight: var(--ams-text-font-weight-bold);
474
- --ams-fieldset-legend-font-size: var(--ams-text-level-4-font-size);
475
- --ams-fieldset-legend-font-family: var(--ams-text-font-family);
476
- --ams-fieldset-legend-color: var(--ams-color-primary-black);
493
+ --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-md) solid;
494
+ --ams-file-input-file-selector-button-disabled-cursor: var(--ams-action-disabled-cursor);
495
+ --ams-file-input-file-selector-button-disabled-color: var(--ams-color-neutral-grey2);
496
+ --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
497
+ --ams-file-input-file-selector-button-hover-color: var(--ams-color-dark-blue);
498
+ --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
499
+ --ams-file-input-file-selector-button-padding-inline: var(--ams-space-inside-md);
500
+ --ams-file-input-file-selector-button-padding-block: var(--ams-space-inside-xs);
501
+ --ams-file-input-file-selector-button-margin-inline-end: var(--ams-space-inside-md);
502
+ --ams-file-input-file-selector-button-cursor: var(--ams-action-activate-cursor);
503
+ --ams-file-input-file-selector-button-color: var(--ams-color-primary-blue);
504
+ --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
505
+ --ams-file-input-file-selector-button-background-color: var(--ams-color-primary-white);
506
+ --ams-file-input-disabled-cursor: var(--ams-action-disabled-cursor);
507
+ --ams-file-input-disabled-color: var(--ams-color-neutral-grey2);
508
+ --ams-file-input-padding-inline: var(--ams-space-inside-md);
509
+ --ams-file-input-padding-block: var(--ams-space-inside-md);
510
+ --ams-file-input-outline-offset: var(--ams-focus-outline-offset);
511
+ --ams-file-input-line-height: var(--ams-text-level-5-line-height);
512
+ --ams-file-input-font-weight: var(--ams-text-font-weight-normal);
513
+ --ams-file-input-font-size: var(--ams-text-level-5-font-size);
514
+ --ams-file-input-font-family: var(--ams-text-font-family);
515
+ --ams-file-input-cursor: var(--ams-action-activate-cursor);
516
+ --ams-file-input-color: var(--ams-color-primary-black);
517
+ --ams-file-input-border: var(--ams-border-width-sm) dashed var(--ams-color-neutral-grey3);
518
+ --ams-file-input-background-color: var(--ams-color-primary-white);
519
+ --ams-field-invalid-padding-inline-start: var(--ams-space-inside-md);
520
+ --ams-field-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
521
+ --ams-field-gap: var(--ams-space-stack-sm);
522
+ --ams-field-set-legend-margin-block-end: var(--ams-space-inside-md);
523
+ --ams-field-set-legend-line-height: var(--ams-text-level-4-line-height);
524
+ --ams-field-set-legend-font-weight: var(--ams-text-font-weight-bold);
525
+ --ams-field-set-legend-font-size: var(--ams-text-level-4-font-size);
526
+ --ams-field-set-legend-font-family: var(--ams-text-font-family);
527
+ --ams-field-set-legend-color: var(--ams-color-primary-black);
528
+ --ams-field-set-invalid-padding-inline-start: var(--ams-space-inside-md);
529
+ --ams-field-set-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
530
+ --ams-error-message-line-height: var(--ams-text-level-6-line-height);
531
+ --ams-error-message-font-weight: var(--ams-text-font-weight-normal);
532
+ --ams-error-message-font-size: var(--ams-text-level-6-font-size);
533
+ --ams-error-message-font-family: var(--ams-text-font-family);
534
+ --ams-error-message-color: var(--ams-color-primary-red);
477
535
  --ams-dialog-background-color: var(--ams-color-primary-white);
478
536
  --ams-description-list-details-padding-inline-start: var(--ams-space-inside-xl);
479
537
  --ams-description-list-details-font-weight: var(--ams-text-font-weight-bold);
@@ -568,11 +626,11 @@
568
626
  --ams-button-font-size: var(--ams-text-level-5-font-size);
569
627
  --ams-button-font-family: var(--ams-text-font-family);
570
628
  --ams-button-cursor: var(--ams-action-activate-cursor);
571
- --ams-breadcrumb-item-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
572
- --ams-breadcrumb-item-link-hover-color: var(--ams-color-dark-blue);
573
- --ams-breadcrumb-item-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
574
- --ams-breadcrumb-item-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
575
- --ams-breadcrumb-item-link-outline-offset: var(--ams-focus-outline-offset);
629
+ --ams-breadcrumb-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
630
+ --ams-breadcrumb-link-hover-color: var(--ams-color-dark-blue);
631
+ --ams-breadcrumb-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
632
+ --ams-breadcrumb-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
633
+ --ams-breadcrumb-link-outline-offset: var(--ams-focus-outline-offset);
576
634
  --ams-breadcrumb-line-height: var(--ams-text-level-6-line-height);
577
635
  --ams-breadcrumb-font-weight: var(--ams-text-font-weight-normal);
578
636
  --ams-breadcrumb-font-size: var(--ams-text-level-6-font-size);
@@ -585,20 +643,32 @@
585
643
  --ams-blockquote-color: var(--ams-color-primary-black);
586
644
  --ams-badge-yellow-color: var(--ams-color-primary-black);
587
645
  --ams-badge-yellow-background-color: var(--ams-color-yellow);
646
+ --ams-badge-white-color: var(--ams-color-primary-black);
647
+ --ams-badge-white-background-color: var(--ams-color-primary-white);
648
+ --ams-badge-red-color: var(--ams-color-primary-white);
649
+ --ams-badge-red-background-color: var(--ams-color-primary-red);
588
650
  --ams-badge-purple-color: var(--ams-color-primary-white);
589
651
  --ams-badge-purple-background-color: var(--ams-color-purple);
590
652
  --ams-badge-orange-color: var(--ams-color-primary-black);
591
653
  --ams-badge-orange-background-color: var(--ams-color-orange);
592
654
  --ams-badge-magenta-color: var(--ams-color-primary-white);
593
655
  --ams-badge-magenta-background-color: var(--ams-color-magenta);
656
+ --ams-badge-light-blue-color: var(--ams-color-primary-black);
657
+ --ams-badge-light-blue-background-color: var(--ams-color-blue);
658
+ --ams-badge-grey-3-color: var(--ams-color-primary-white);
659
+ --ams-badge-grey-3-background-color: var(--ams-color-neutral-grey3);
660
+ --ams-badge-grey-2-color: var(--ams-color-primary-black);
661
+ --ams-badge-grey-2-background-color: var(--ams-color-neutral-grey2);
662
+ --ams-badge-grey-1-color: var(--ams-color-primary-black);
663
+ --ams-badge-grey-1-background-color: var(--ams-color-neutral-grey1);
594
664
  --ams-badge-green-color: var(--ams-color-primary-black);
595
665
  --ams-badge-green-background-color: var(--ams-color-green);
596
666
  --ams-badge-dark-green-color: var(--ams-color-primary-white);
597
667
  --ams-badge-dark-green-background-color: var(--ams-color-dark-green);
598
- --ams-badge-dark-blue-color: var(--ams-color-primary-white);
599
- --ams-badge-dark-blue-background-color: var(--ams-color-primary-blue);
600
- --ams-badge-blue-color: var(--ams-color-primary-black);
601
- --ams-badge-blue-background-color: var(--ams-color-blue);
668
+ --ams-badge-blue-color: var(--ams-color-primary-white);
669
+ --ams-badge-blue-background-color: var(--ams-color-primary-blue);
670
+ --ams-badge-black-color: var(--ams-color-primary-white);
671
+ --ams-badge-black-background-color: var(--ams-color-primary-black);
602
672
  --ams-badge-padding-inline: var(--ams-space-inside-xs);
603
673
  --ams-badge-line-height: var(--ams-text-level-5-line-height);
604
674
  --ams-badge-font-weight: var(--ams-text-font-weight-bold);
@@ -606,6 +676,8 @@
606
676
  --ams-badge-font-family: var(--ams-text-font-family);
607
677
  --ams-avatar-yellow-color: var(--ams-color-primary-black);
608
678
  --ams-avatar-yellow-background-color: var(--ams-color-yellow);
679
+ --ams-avatar-white-color: var(--ams-color-primary-black);
680
+ --ams-avatar-white-background-color: var(--ams-color-primary-white);
609
681
  --ams-avatar-red-color: var(--ams-color-primary-white);
610
682
  --ams-avatar-red-background-color: var(--ams-color-primary-red);
611
683
  --ams-avatar-purple-color: var(--ams-color-primary-white);
@@ -614,14 +686,22 @@
614
686
  --ams-avatar-orange-background-color: var(--ams-color-orange);
615
687
  --ams-avatar-magenta-color: var(--ams-color-primary-white);
616
688
  --ams-avatar-magenta-background-color: var(--ams-color-magenta);
689
+ --ams-avatar-light-blue-color: var(--ams-color-primary-black);
690
+ --ams-avatar-light-blue-background-color: var(--ams-color-blue);
691
+ --ams-avatar-grey-3-color: var(--ams-color-primary-white);
692
+ --ams-avatar-grey-3-background-color: var(--ams-color-neutral-grey3);
693
+ --ams-avatar-grey-2-color: var(--ams-color-primary-black);
694
+ --ams-avatar-grey-2-background-color: var(--ams-color-neutral-grey2);
695
+ --ams-avatar-grey-1-color: var(--ams-color-primary-black);
696
+ --ams-avatar-grey-1-background-color: var(--ams-color-neutral-grey1);
617
697
  --ams-avatar-green-color: var(--ams-color-primary-black);
618
698
  --ams-avatar-green-background-color: var(--ams-color-green);
619
699
  --ams-avatar-dark-green-color: var(--ams-color-primary-white);
620
700
  --ams-avatar-dark-green-background-color: var(--ams-color-dark-green);
621
- --ams-avatar-dark-blue-color: var(--ams-color-primary-white);
622
- --ams-avatar-dark-blue-background-color: var(--ams-color-primary-blue);
623
- --ams-avatar-blue-color: var(--ams-color-primary-black);
624
- --ams-avatar-blue-background-color: var(--ams-color-blue);
701
+ --ams-avatar-blue-color: var(--ams-color-primary-white);
702
+ --ams-avatar-blue-background-color: var(--ams-color-primary-blue);
703
+ --ams-avatar-black-color: var(--ams-color-primary-white);
704
+ --ams-avatar-black-background-color: var(--ams-color-primary-black);
625
705
  --ams-avatar-line-height: var(--ams-text-level-6-line-height);
626
706
  --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
627
707
  --ams-avatar-font-size: var(--ams-text-level-6-font-size);
@@ -661,6 +741,10 @@
661
741
  --ams-link-appearance-color: var(--ams-color-primary-blue);
662
742
  --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
663
743
  --ams-top-task-link-label-color: var(--ams-link-appearance-color);
744
+ --ams-table-of-contents-link-hover-color: var(--ams-link-appearance-hover-color);
745
+ --ams-table-of-contents-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
746
+ --ams-table-of-contents-link-color: var(--ams-link-appearance-color);
747
+ --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
664
748
  --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
665
749
  --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
666
750
  --ams-pagination-color: var(--ams-link-appearance-color);
@@ -689,6 +773,6 @@
689
773
  --ams-card-link-hover-color: var(--ams-link-appearance-hover-color);
690
774
  --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
691
775
  --ams-card-link-color: var(--ams-link-appearance-color);
692
- --ams-breadcrumb-item-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
693
- --ams-breadcrumb-item-link-color: var(--ams-link-appearance-color);
776
+ --ams-breadcrumb-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
777
+ --ams-breadcrumb-link-color: var(--ams-link-appearance-color);
694
778
  }