@amsterdam/design-system-tokens 0.8.0 → 0.9.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 (32) hide show
  1. package/CHANGELOG.md +32 -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 +94 -38
  8. package/dist/index.d.ts +122 -30
  9. package/dist/index.json +157 -65
  10. package/dist/index.mjs +123 -67
  11. package/dist/index.scss +94 -38
  12. package/dist/index.theme.css +94 -38
  13. package/package.json +1 -1
  14. package/src/common/ams/focus.tokens.json +1 -1
  15. package/src/common/ams/link-appearance.tokens.json +2 -2
  16. package/src/components/ams/badge.tokens.json +28 -4
  17. package/src/components/ams/breadcrumb.tokens.json +1 -1
  18. package/src/components/ams/error-message.tokens.json +11 -0
  19. package/src/components/ams/{fieldset.tokens.json → field-set.tokens.json} +11 -2
  20. package/src/components/ams/field.tokens.json +17 -0
  21. package/src/components/ams/file-input.tokens.json +42 -0
  22. package/src/components/ams/link-list.tokens.json +2 -4
  23. package/src/components/ams/logo.tokens.json +1 -1
  24. package/src/components/ams/ordered-list.tokens.json +4 -0
  25. package/src/components/ams/paragraph.tokens.json +2 -4
  26. package/src/components/ams/screen.tokens.json +2 -2
  27. package/src/components/ams/search-field.tokens.json +11 -5
  28. package/src/components/ams/switch.tokens.json +6 -5
  29. package/src/components/ams/table.tokens.json +1 -1
  30. package/src/components/ams/tabs.tokens.json +1 -1
  31. package/src/components/ams/text-area.tokens.json +1 -1
  32. package/src/components/ams/unordered-list.tokens.json +4 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,38 @@
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.9.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.8.0...design-system-tokens-v0.9.0) (2024-06-05)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245))
12
+ * Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240))
13
+ * Add invalid prop to Field Set and update Field and Field Set docs ([#1237](https://github.com/Amsterdam/design-system/issues/1237))
14
+ * Allow additional background colours for Badge and remove dark blue option ([#1236](https://github.com/Amsterdam/design-system/issues/1236))
15
+ * Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232))
16
+ * Use logical properties for Search Field, Select, Text Area and Text Input ([#1226](https://github.com/Amsterdam/design-system/issues/1226))
17
+ * Flatten token names for default text size and line height ([#1221](https://github.com/Amsterdam/design-system/issues/1221))
18
+
19
+ ### Features
20
+
21
+ * Add Error Message ([#1247](https://github.com/Amsterdam/design-system/issues/1247)) ([1dec2ea](https://github.com/Amsterdam/design-system/commit/1dec2ead41fba24e4128c2e1d60b72a7ccb29a92))
22
+ * Add Field component ([#1228](https://github.com/Amsterdam/design-system/issues/1228)) ([66832aa](https://github.com/Amsterdam/design-system/commit/66832aaf14a209915b60498acecf90cecff27c23))
23
+ * 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))
24
+ * 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))
25
+ * Allow small text for ordered lists ([#1219](https://github.com/Amsterdam/design-system/issues/1219)) ([0e77bd6](https://github.com/Amsterdam/design-system/commit/0e77bd60d8f395417c3c736d8e51a3ca3729ece5))
26
+ * Allow small text for unordered lists ([#1217](https://github.com/Amsterdam/design-system/issues/1217)) ([5012851](https://github.com/Amsterdam/design-system/commit/5012851492e50e50e2a651250622740e517fd22f))
27
+ * File Input ([#1218](https://github.com/Amsterdam/design-system/issues/1218)) ([7b6ba98](https://github.com/Amsterdam/design-system/commit/7b6ba98530caaefafedada5b89a175ef0b1a8784))
28
+ * Rename Breadcrumb Item to Link ([#1232](https://github.com/Amsterdam/design-system/issues/1232)) ([6cf2e5e](https://github.com/Amsterdam/design-system/commit/6cf2e5e51217900a24d739c4569c13237b9fb4ab))
29
+ * Use invalid prop for most inputs ([#1240](https://github.com/Amsterdam/design-system/issues/1240)) ([9477186](https://github.com/Amsterdam/design-system/commit/9477186b8432d6d20991e93d92c64a4357d6f391))
30
+ * 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))
31
+
32
+
33
+ ### Bug Fixes
34
+
35
+ * Disallow directional style rules ([#1245](https://github.com/Amsterdam/design-system/issues/1245)) ([8ab6f81](https://github.com/Amsterdam/design-system/commit/8ab6f81d4cbcdb75b7acb986a145d49ccd1895c8))
36
+ * 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))
37
+
6
38
  ## [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
39
 
8
40
 
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 Wed, 05 Jun 2024 11:22:11 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 Wed, 05 Jun 2024 11:22:11 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 Wed, 05 Jun 2024 11:22:11 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 Wed, 05 Jun 2024 11:22:11 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 Wed, 05 Jun 2024 11:22:11 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 Wed, 05 Jun 2024 11:22:10 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;
@@ -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,12 +233,12 @@
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);
@@ -244,12 +246,12 @@
244
246
  --ams-table-font-family: var(--ams-text-font-family);
245
247
  --ams-table-color: var(--ams-color-primary-black);
246
248
  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
247
- --ams-switch-outline-offset: var(--ams-focus-outline-offset);
248
249
  --ams-switch-checked-background-color: var(--ams-color-primary-blue);
249
250
  --ams-switch-thumb-hover-color: var(--ams-color-dark-blue);
250
251
  --ams-switch-thumb-background-color: var(--ams-color-primary-white);
251
- --ams-switch-background-color: var(--ams-color-neutral-grey3);
252
+ --ams-switch-outline-offset: var(--ams-focus-outline-offset);
252
253
  --ams-switch-font-family: var(--ams-text-font-family);
254
+ --ams-switch-background-color: var(--ams-color-neutral-grey3);
253
255
  --ams-spotlight-yellow-background-color: var(--ams-color-yellow);
254
256
  --ams-spotlight-purple-background-color: var(--ams-color-purple);
255
257
  --ams-spotlight-orange-background-color: var(--ams-color-orange);
@@ -286,10 +288,12 @@
286
288
  --ams-select-background-position: right var(--ams-space-inside-md) center;
287
289
  --ams-select-background-color: var(--ams-color-primary-white);
288
290
  --ams-search-field-input-placeholder-color: var(--ams-color-neutral-grey3);
291
+ --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
292
+ --ams-search-field-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
289
293
  --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);
294
+ --ams-search-field-input-cancel-button-inline-size: var(--ams-text-level-5-font-size);
292
295
  --ams-search-field-input-cancel-button-color: var(--ams-color-primary-blue);
296
+ --ams-search-field-input-cancel-button-block-size: var(--ams-text-level-5-font-size);
293
297
  --ams-search-field-input-padding-inline: var(--ams-space-inside-md);
294
298
  --ams-search-field-input-padding-block: var(--ams-space-inside-xs);
295
299
  --ams-search-field-input-outline-offset: var(--ams-focus-outline-offset);
@@ -300,9 +304,9 @@
300
304
  --ams-search-field-input-color: var(--ams-color-primary-black);
301
305
  --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
302
306
  --ams-search-field-input-background-color: var(--ams-color-primary-white);
307
+ --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
303
308
  --ams-search-field-button-padding-inline: var(--ams-space-inside-xs);
304
309
  --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
310
  --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
307
311
  --ams-search-field-button-color: var(--ams-color-primary-white);
308
312
  --ams-search-field-button-background-color: var(--ams-color-primary-blue);
@@ -330,12 +334,12 @@
330
334
  --ams-radio-color: var(--ams-color-primary-black);
331
335
  --ams-paragraph-large-line-height: var(--ams-text-level-4-line-height);
332
336
  --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
337
  --ams-paragraph-small-line-height: var(--ams-text-level-6-line-height);
336
338
  --ams-paragraph-small-font-size: var(--ams-text-level-6-font-size);
337
339
  --ams-paragraph-inverse-color: var(--ams-color-primary-white);
340
+ --ams-paragraph-line-height: var(--ams-text-level-5-line-height);
338
341
  --ams-paragraph-font-weight: var(--ams-text-font-weight-normal);
342
+ --ams-paragraph-font-size: var(--ams-text-level-5-font-size);
339
343
  --ams-paragraph-font-family: var(--ams-text-font-family);
340
344
  --ams-paragraph-color: var(--ams-color-primary-black);
341
345
  --ams-pagination-button-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
@@ -364,6 +368,8 @@
364
368
  --ams-page-heading-font-size: var(--ams-text-level-0-font-size);
365
369
  --ams-page-heading-font-family: var(--ams-text-font-family);
366
370
  --ams-page-heading-color: var(--ams-color-primary-black);
371
+ --ams-ordered-list-small-line-height: var(--ams-text-level-6-line-height);
372
+ --ams-ordered-list-small-font-size: var(--ams-text-level-6-font-size);
367
373
  --ams-ordered-list-line-height: var(--ams-text-level-5-line-height);
368
374
  --ams-ordered-list-inverse-color: var(--ams-color-primary-white);
369
375
  --ams-ordered-list-font-weight: var(--ams-text-font-weight-normal);
@@ -396,14 +402,14 @@
396
402
  --ams-link-list-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
397
403
  --ams-link-list-link-large-line-height: var(--ams-text-level-4-line-height);
398
404
  --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
405
  --ams-link-list-link-small-line-height: var(--ams-text-level-6-line-height);
402
406
  --ams-link-list-link-small-font-size: var(--ams-text-level-6-font-size);
403
407
  --ams-link-list-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
404
408
  --ams-link-list-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
405
409
  --ams-link-list-link-outline-offset: var(--ams-focus-outline-offset);
410
+ --ams-link-list-link-line-height: var(--ams-text-level-5-line-height);
406
411
  --ams-link-list-link-font-weight: var(--ams-text-font-weight-normal);
412
+ --ams-link-list-link-font-size: var(--ams-text-level-5-font-size);
407
413
  --ams-link-list-link-font-family: var(--ams-text-font-family);
408
414
  --ams-label-line-height: var(--ams-text-level-4-line-height);
409
415
  --ams-label-font-weight: var(--ams-text-font-weight-bold);
@@ -469,11 +475,48 @@
469
475
  --ams-form-field-character-counter-font-size: var(--ams-text-level-6-font-size);
470
476
  --ams-form-field-character-counter-font-family: var(--ams-text-font-family);
471
477
  --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);
478
+ --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-md) solid;
479
+ --ams-file-input-file-selector-button-disabled-cursor: var(--ams-action-disabled-cursor);
480
+ --ams-file-input-file-selector-button-disabled-color: var(--ams-color-neutral-grey2);
481
+ --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
482
+ --ams-file-input-file-selector-button-hover-color: var(--ams-color-dark-blue);
483
+ --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
484
+ --ams-file-input-file-selector-button-padding-inline: var(--ams-space-inside-md);
485
+ --ams-file-input-file-selector-button-padding-block: var(--ams-space-inside-xs);
486
+ --ams-file-input-file-selector-button-margin-inline-end: var(--ams-space-inside-md);
487
+ --ams-file-input-file-selector-button-cursor: var(--ams-action-activate-cursor);
488
+ --ams-file-input-file-selector-button-color: var(--ams-color-primary-blue);
489
+ --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
490
+ --ams-file-input-file-selector-button-background-color: var(--ams-color-primary-white);
491
+ --ams-file-input-disabled-cursor: var(--ams-action-disabled-cursor);
492
+ --ams-file-input-disabled-color: var(--ams-color-neutral-grey2);
493
+ --ams-file-input-padding-inline: var(--ams-space-inside-md);
494
+ --ams-file-input-padding-block: var(--ams-space-inside-md);
495
+ --ams-file-input-outline-offset: var(--ams-focus-outline-offset);
496
+ --ams-file-input-line-height: var(--ams-text-level-5-line-height);
497
+ --ams-file-input-font-weight: var(--ams-text-font-weight-normal);
498
+ --ams-file-input-font-size: var(--ams-text-level-5-font-size);
499
+ --ams-file-input-font-family: var(--ams-text-font-family);
500
+ --ams-file-input-cursor: var(--ams-action-activate-cursor);
501
+ --ams-file-input-color: var(--ams-color-primary-black);
502
+ --ams-file-input-border: var(--ams-border-width-sm) dashed var(--ams-color-neutral-grey3);
503
+ --ams-file-input-background-color: var(--ams-color-primary-white);
504
+ --ams-field-invalid-padding-inline-start: var(--ams-space-inside-md);
505
+ --ams-field-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
506
+ --ams-field-gap: var(--ams-space-stack-sm);
507
+ --ams-field-set-legend-margin-block-end: var(--ams-space-inside-md);
508
+ --ams-field-set-legend-line-height: var(--ams-text-level-4-line-height);
509
+ --ams-field-set-legend-font-weight: var(--ams-text-font-weight-bold);
510
+ --ams-field-set-legend-font-size: var(--ams-text-level-4-font-size);
511
+ --ams-field-set-legend-font-family: var(--ams-text-font-family);
512
+ --ams-field-set-legend-color: var(--ams-color-primary-black);
513
+ --ams-field-set-invalid-padding-inline-start: var(--ams-space-inside-md);
514
+ --ams-field-set-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
515
+ --ams-error-message-line-height: var(--ams-text-level-6-line-height);
516
+ --ams-error-message-font-weight: var(--ams-text-font-weight-normal);
517
+ --ams-error-message-font-size: var(--ams-text-level-6-font-size);
518
+ --ams-error-message-font-family: var(--ams-text-font-family);
519
+ --ams-error-message-color: var(--ams-color-primary-red);
477
520
  --ams-dialog-background-color: var(--ams-color-primary-white);
478
521
  --ams-description-list-details-padding-inline-start: var(--ams-space-inside-xl);
479
522
  --ams-description-list-details-font-weight: var(--ams-text-font-weight-bold);
@@ -568,11 +611,11 @@
568
611
  --ams-button-font-size: var(--ams-text-level-5-font-size);
569
612
  --ams-button-font-family: var(--ams-text-font-family);
570
613
  --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);
614
+ --ams-breadcrumb-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
615
+ --ams-breadcrumb-link-hover-color: var(--ams-color-dark-blue);
616
+ --ams-breadcrumb-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
617
+ --ams-breadcrumb-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
618
+ --ams-breadcrumb-link-outline-offset: var(--ams-focus-outline-offset);
576
619
  --ams-breadcrumb-line-height: var(--ams-text-level-6-line-height);
577
620
  --ams-breadcrumb-font-weight: var(--ams-text-font-weight-normal);
578
621
  --ams-breadcrumb-font-size: var(--ams-text-level-6-font-size);
@@ -585,20 +628,32 @@
585
628
  --ams-blockquote-color: var(--ams-color-primary-black);
586
629
  --ams-badge-yellow-color: var(--ams-color-primary-black);
587
630
  --ams-badge-yellow-background-color: var(--ams-color-yellow);
631
+ --ams-badge-white-color: var(--ams-color-primary-black);
632
+ --ams-badge-white-background-color: var(--ams-color-primary-white);
633
+ --ams-badge-red-color: var(--ams-color-primary-white);
634
+ --ams-badge-red-background-color: var(--ams-color-primary-red);
588
635
  --ams-badge-purple-color: var(--ams-color-primary-white);
589
636
  --ams-badge-purple-background-color: var(--ams-color-purple);
590
637
  --ams-badge-orange-color: var(--ams-color-primary-black);
591
638
  --ams-badge-orange-background-color: var(--ams-color-orange);
592
639
  --ams-badge-magenta-color: var(--ams-color-primary-white);
593
640
  --ams-badge-magenta-background-color: var(--ams-color-magenta);
641
+ --ams-badge-light-blue-color: var(--ams-color-primary-black);
642
+ --ams-badge-light-blue-background-color: var(--ams-color-blue);
643
+ --ams-badge-grey-3-color: var(--ams-color-primary-white);
644
+ --ams-badge-grey-3-background-color: var(--ams-color-neutral-grey3);
645
+ --ams-badge-grey-2-color: var(--ams-color-primary-black);
646
+ --ams-badge-grey-2-background-color: var(--ams-color-neutral-grey2);
647
+ --ams-badge-grey-1-color: var(--ams-color-primary-black);
648
+ --ams-badge-grey-1-background-color: var(--ams-color-neutral-grey1);
594
649
  --ams-badge-green-color: var(--ams-color-primary-black);
595
650
  --ams-badge-green-background-color: var(--ams-color-green);
596
651
  --ams-badge-dark-green-color: var(--ams-color-primary-white);
597
652
  --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);
653
+ --ams-badge-blue-color: var(--ams-color-primary-white);
654
+ --ams-badge-blue-background-color: var(--ams-color-primary-blue);
655
+ --ams-badge-black-color: var(--ams-color-primary-white);
656
+ --ams-badge-black-background-color: var(--ams-color-primary-black);
602
657
  --ams-badge-padding-inline: var(--ams-space-inside-xs);
603
658
  --ams-badge-line-height: var(--ams-text-level-5-line-height);
604
659
  --ams-badge-font-weight: var(--ams-text-font-weight-bold);
@@ -661,6 +716,7 @@
661
716
  --ams-link-appearance-color: var(--ams-color-primary-blue);
662
717
  --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
663
718
  --ams-top-task-link-label-color: var(--ams-link-appearance-color);
719
+ --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
664
720
  --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
665
721
  --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
666
722
  --ams-pagination-color: var(--ams-link-appearance-color);
@@ -689,6 +745,6 @@
689
745
  --ams-card-link-hover-color: var(--ams-link-appearance-hover-color);
690
746
  --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
691
747
  --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);
748
+ --ams-breadcrumb-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
749
+ --ams-breadcrumb-link-color: var(--ams-link-appearance-color);
694
750
  }