@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/dist/index.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-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
6
6
  $ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; // Indent less than the parent to start-align the child’s marker with the parent text.
@@ -17,14 +17,14 @@ $ams-text-area-padding-block: 0.5rem;
17
17
  $ams-tabs-button-padding-inline: 1rem;
18
18
  $ams-tabs-button-padding-block: .5rem;
19
19
  $ams-tabs-button-outline-offset: -0.25rem;
20
- $ams-switch-thumb-height: 1.75rem;
21
- $ams-switch-thumb-width: 1.75rem;
22
- $ams-switch-width: 3.5rem;
20
+ $ams-switch-thumb-block-size: 1.75rem;
21
+ $ams-switch-thumb-inline-size: 1.75rem;
22
+ $ams-switch-inline-size: 3.5rem;
23
23
  $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>");
24
24
  $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>");
25
25
  $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>");
26
- $ams-screen-x-wide-max-width: 132rem;
27
- $ams-screen-wide-max-width: 100rem;
26
+ $ams-screen-x-wide-max-inline-size: 132rem;
27
+ $ams-screen-wide-max-inline-size: 100rem;
28
28
  $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");
29
29
  $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");
30
30
  $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");
@@ -41,7 +41,7 @@ $ams-ordered-list-list-style-type: decimal;
41
41
  $ams-ordered-list-gap: 0.75rem;
42
42
  $ams-mega-menu-list-category-padding-block-start: 1rem;
43
43
  $ams-mega-menu-list-category-column-width: 20rem;
44
- $ams-logo-height: 2.5rem;
44
+ $ams-logo-block-size: 2.5rem;
45
45
  $ams-link-inline-line-height: inherit;
46
46
  $ams-link-inline-font-size: inherit;
47
47
  $ams-link-inline-font-family: inherit;
@@ -77,13 +77,13 @@ $ams-accordion-panel-padding-inline: 0;
77
77
  $ams-accordion-button-padding-inline: 0;
78
78
  $ams-link-appearance-subtle-hover-text-decoration-line: underline;
79
79
  $ams-link-appearance-subtle-text-decoration-line: none;
80
- $ams-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
80
+ $ams-link-appearance-regular-hover-text-underline-offset: 0.2778em;
81
81
  $ams-link-appearance-regular-text-decoration-line: underline;
82
- $ams-link-appearance-text-underline-offset: 0.375rem;
82
+ $ams-link-appearance-text-underline-offset: 0.3333em;
83
83
  $ams-hyphenation-overflow-wrap: break-word;
84
84
  $ams-hyphenation-hyphens: auto;
85
85
  $ams-hyphenation-hyphenate-limit-chars: 12 8 4;
86
- $ams-focus-outline-offset: 2px;
86
+ $ams-focus-outline-offset: 0.125rem;
87
87
  $ams-action-submit-cursor: pointer;
88
88
  $ams-action-navigate-cursor: pointer;
89
89
  $ams-action-inert-cursor: default;
@@ -147,6 +147,8 @@ $ams-border-width-xl: 0.25rem;
147
147
  $ams-border-width-lg: 0.1875rem;
148
148
  $ams-border-width-md: 0.125rem;
149
149
  $ams-border-width-sm: 0.0625rem;
150
+ $ams-unordered-list-small-line-height: $ams-text-level-6-line-height;
151
+ $ams-unordered-list-small-font-size: $ams-text-level-6-font-size;
150
152
  $ams-unordered-list-line-height: $ams-text-level-5-line-height;
151
153
  $ams-unordered-list-inverse-color: $ams-color-primary-white;
152
154
  $ams-unordered-list-font-weight: $ams-text-font-weight-normal;
@@ -209,7 +211,7 @@ $ams-text-area-disabled-color: $ams-color-neutral-grey2;
209
211
  $ams-text-area-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
210
212
  $ams-text-area-disabled-background-color: $ams-color-primary-white;
211
213
  $ams-text-area-outline-offset: $ams-focus-outline-offset;
212
- $ams-text-area-min-height: calc($ams-text-level-5-line-height * 1em + 2 * $ams-text-area-padding-block);
214
+ $ams-text-area-min-block-size: calc($ams-text-level-5-line-height * 1em + 2 * $ams-text-area-padding-block);
213
215
  $ams-text-area-line-height: $ams-text-level-5-line-height;
214
216
  $ams-text-area-font-weight: $ams-text-font-weight-normal;
215
217
  $ams-text-area-font-size: $ams-text-level-5-font-size;
@@ -229,12 +231,12 @@ $ams-tabs-button-font-size: $ams-text-level-5-font-size;
229
231
  $ams-tabs-button-font-family: $ams-text-font-family;
230
232
  $ams-tabs-button-cursor: $ams-action-activate-cursor;
231
233
  $ams-tabs-button-color: $ams-color-primary-blue;
232
- $ams-tabs-list-border-bottom: $ams-border-width-md solid $ams-color-primary-blue;
234
+ $ams-tabs-list-border-block-end: $ams-border-width-md solid $ams-color-primary-blue;
233
235
  $ams-tabs-list-background-color: $ams-color-primary-white;
234
236
  $ams-table-header-cell-font-weight: $ams-text-font-weight-bold;
235
237
  $ams-table-cell-padding-inline: $ams-space-inside-md;
236
238
  $ams-table-cell-padding-block: $ams-space-inside-md;
237
- $ams-table-cell-border-bottom: $ams-border-width-sm solid $ams-color-neutral-grey1;
239
+ $ams-table-cell-border-block-end: $ams-border-width-sm solid $ams-color-neutral-grey1;
238
240
  $ams-table-caption-font-weight: $ams-text-font-weight-bold;
239
241
  $ams-table-line-height: $ams-text-level-5-line-height;
240
242
  $ams-table-font-weight: $ams-text-font-weight-normal;
@@ -242,12 +244,12 @@ $ams-table-font-size: $ams-text-level-5-font-size;
242
244
  $ams-table-font-family: $ams-text-font-family;
243
245
  $ams-table-color: $ams-color-primary-black;
244
246
  $ams-switch-disabled-background-color: $ams-color-neutral-grey2;
245
- $ams-switch-outline-offset: $ams-focus-outline-offset;
246
247
  $ams-switch-checked-background-color: $ams-color-primary-blue;
247
248
  $ams-switch-thumb-hover-color: $ams-color-dark-blue;
248
249
  $ams-switch-thumb-background-color: $ams-color-primary-white;
249
- $ams-switch-background-color: $ams-color-neutral-grey3;
250
+ $ams-switch-outline-offset: $ams-focus-outline-offset;
250
251
  $ams-switch-font-family: $ams-text-font-family;
252
+ $ams-switch-background-color: $ams-color-neutral-grey3;
251
253
  $ams-spotlight-yellow-background-color: $ams-color-yellow;
252
254
  $ams-spotlight-purple-background-color: $ams-color-purple;
253
255
  $ams-spotlight-orange-background-color: $ams-color-orange;
@@ -284,10 +286,12 @@ $ams-select-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-blac
284
286
  $ams-select-background-position: right $ams-space-inside-md center;
285
287
  $ams-select-background-color: $ams-color-primary-white;
286
288
  $ams-search-field-input-placeholder-color: $ams-color-neutral-grey3;
289
+ $ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
290
+ $ams-search-field-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
287
291
  $ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
288
- $ams-search-field-input-cancel-button-width: $ams-text-level-5-font-size;
289
- $ams-search-field-input-cancel-button-height: $ams-text-level-5-font-size;
292
+ $ams-search-field-input-cancel-button-inline-size: $ams-text-level-5-font-size;
290
293
  $ams-search-field-input-cancel-button-color: $ams-color-primary-blue;
294
+ $ams-search-field-input-cancel-button-block-size: $ams-text-level-5-font-size;
291
295
  $ams-search-field-input-padding-inline: $ams-space-inside-md;
292
296
  $ams-search-field-input-padding-block: $ams-space-inside-xs;
293
297
  $ams-search-field-input-outline-offset: $ams-focus-outline-offset;
@@ -298,9 +302,9 @@ $ams-search-field-input-font-family: $ams-text-font-family;
298
302
  $ams-search-field-input-color: $ams-color-primary-black;
299
303
  $ams-search-field-input-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
300
304
  $ams-search-field-input-background-color: $ams-color-primary-white;
305
+ $ams-search-field-button-hover-background-color: $ams-color-dark-blue;
301
306
  $ams-search-field-button-padding-inline: $ams-space-inside-xs;
302
307
  $ams-search-field-button-padding-block: $ams-space-inside-xs;
303
- $ams-search-field-button-hover-background-color: $ams-color-dark-blue;
304
308
  $ams-search-field-button-outline-offset: $ams-focus-outline-offset;
305
309
  $ams-search-field-button-color: $ams-color-primary-white;
306
310
  $ams-search-field-button-background-color: $ams-color-primary-blue;
@@ -328,12 +332,12 @@ $ams-radio-font-family: $ams-text-font-family;
328
332
  $ams-radio-color: $ams-color-primary-black;
329
333
  $ams-paragraph-large-line-height: $ams-text-level-4-line-height;
330
334
  $ams-paragraph-large-font-size: $ams-text-level-4-font-size;
331
- $ams-paragraph-medium-line-height: $ams-text-level-5-line-height;
332
- $ams-paragraph-medium-font-size: $ams-text-level-5-font-size;
333
335
  $ams-paragraph-small-line-height: $ams-text-level-6-line-height;
334
336
  $ams-paragraph-small-font-size: $ams-text-level-6-font-size;
335
337
  $ams-paragraph-inverse-color: $ams-color-primary-white;
338
+ $ams-paragraph-line-height: $ams-text-level-5-line-height;
336
339
  $ams-paragraph-font-weight: $ams-text-font-weight-normal;
340
+ $ams-paragraph-font-size: $ams-text-level-5-font-size;
337
341
  $ams-paragraph-font-family: $ams-text-font-family;
338
342
  $ams-paragraph-color: $ams-color-primary-black;
339
343
  $ams-pagination-button-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
@@ -362,6 +366,8 @@ $ams-page-heading-font-weight: $ams-text-font-weight-bold;
362
366
  $ams-page-heading-font-size: $ams-text-level-0-font-size;
363
367
  $ams-page-heading-font-family: $ams-text-font-family;
364
368
  $ams-page-heading-color: $ams-color-primary-black;
369
+ $ams-ordered-list-small-line-height: $ams-text-level-6-line-height;
370
+ $ams-ordered-list-small-font-size: $ams-text-level-6-font-size;
365
371
  $ams-ordered-list-line-height: $ams-text-level-5-line-height;
366
372
  $ams-ordered-list-inverse-color: $ams-color-primary-white;
367
373
  $ams-ordered-list-font-weight: $ams-text-font-weight-normal;
@@ -394,14 +400,14 @@ $ams-link-font-family: $ams-text-font-family;
394
400
  $ams-link-list-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
395
401
  $ams-link-list-link-large-line-height: $ams-text-level-4-line-height;
396
402
  $ams-link-list-link-large-font-size: $ams-text-level-4-font-size;
397
- $ams-link-list-link-medium-line-height: $ams-text-level-5-line-height;
398
- $ams-link-list-link-medium-font-size: $ams-text-level-5-font-size;
399
403
  $ams-link-list-link-small-line-height: $ams-text-level-6-line-height;
400
404
  $ams-link-list-link-small-font-size: $ams-text-level-6-font-size;
401
405
  $ams-link-list-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
402
406
  $ams-link-list-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
403
407
  $ams-link-list-link-outline-offset: $ams-focus-outline-offset;
408
+ $ams-link-list-link-line-height: $ams-text-level-5-line-height;
404
409
  $ams-link-list-link-font-weight: $ams-text-font-weight-normal;
410
+ $ams-link-list-link-font-size: $ams-text-level-5-font-size;
405
411
  $ams-link-list-link-font-family: $ams-text-font-family;
406
412
  $ams-label-line-height: $ams-text-level-4-line-height;
407
413
  $ams-label-font-weight: $ams-text-font-weight-bold;
@@ -467,11 +473,48 @@ $ams-form-field-character-counter-font-weight: $ams-text-font-weight-normal;
467
473
  $ams-form-field-character-counter-font-size: $ams-text-level-6-font-size;
468
474
  $ams-form-field-character-counter-font-family: $ams-text-font-family;
469
475
  $ams-form-field-character-counter-color: $ams-color-primary-black;
470
- $ams-fieldset-legend-line-height: $ams-text-level-4-line-height;
471
- $ams-fieldset-legend-font-weight: $ams-text-font-weight-bold;
472
- $ams-fieldset-legend-font-size: $ams-text-level-4-font-size;
473
- $ams-fieldset-legend-font-family: $ams-text-font-family;
474
- $ams-fieldset-legend-color: $ams-color-primary-black;
476
+ $ams-file-input-file-selector-button-forced-color-mode-border: $ams-border-width-md solid;
477
+ $ams-file-input-file-selector-button-disabled-cursor: $ams-action-disabled-cursor;
478
+ $ams-file-input-file-selector-button-disabled-color: $ams-color-neutral-grey2;
479
+ $ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey2;
480
+ $ams-file-input-file-selector-button-hover-color: $ams-color-dark-blue;
481
+ $ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-lg $ams-color-dark-blue;
482
+ $ams-file-input-file-selector-button-padding-inline: $ams-space-inside-md;
483
+ $ams-file-input-file-selector-button-padding-block: $ams-space-inside-xs;
484
+ $ams-file-input-file-selector-button-margin-inline-end: $ams-space-inside-md;
485
+ $ams-file-input-file-selector-button-cursor: $ams-action-activate-cursor;
486
+ $ams-file-input-file-selector-button-color: $ams-color-primary-blue;
487
+ $ams-file-input-file-selector-button-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
488
+ $ams-file-input-file-selector-button-background-color: $ams-color-primary-white;
489
+ $ams-file-input-disabled-cursor: $ams-action-disabled-cursor;
490
+ $ams-file-input-disabled-color: $ams-color-neutral-grey2;
491
+ $ams-file-input-padding-inline: $ams-space-inside-md;
492
+ $ams-file-input-padding-block: $ams-space-inside-md;
493
+ $ams-file-input-outline-offset: $ams-focus-outline-offset;
494
+ $ams-file-input-line-height: $ams-text-level-5-line-height;
495
+ $ams-file-input-font-weight: $ams-text-font-weight-normal;
496
+ $ams-file-input-font-size: $ams-text-level-5-font-size;
497
+ $ams-file-input-font-family: $ams-text-font-family;
498
+ $ams-file-input-cursor: $ams-action-activate-cursor;
499
+ $ams-file-input-color: $ams-color-primary-black;
500
+ $ams-file-input-border: $ams-border-width-sm dashed $ams-color-neutral-grey3;
501
+ $ams-file-input-background-color: $ams-color-primary-white;
502
+ $ams-field-invalid-padding-inline-start: $ams-space-inside-md;
503
+ $ams-field-invalid-border-inline-start: $ams-border-width-lg solid $ams-color-primary-red;
504
+ $ams-field-gap: $ams-space-stack-sm;
505
+ $ams-field-set-legend-margin-block-end: $ams-space-inside-md;
506
+ $ams-field-set-legend-line-height: $ams-text-level-4-line-height;
507
+ $ams-field-set-legend-font-weight: $ams-text-font-weight-bold;
508
+ $ams-field-set-legend-font-size: $ams-text-level-4-font-size;
509
+ $ams-field-set-legend-font-family: $ams-text-font-family;
510
+ $ams-field-set-legend-color: $ams-color-primary-black;
511
+ $ams-field-set-invalid-padding-inline-start: $ams-space-inside-md;
512
+ $ams-field-set-invalid-border-inline-start: $ams-border-width-lg solid $ams-color-primary-red;
513
+ $ams-error-message-line-height: $ams-text-level-6-line-height;
514
+ $ams-error-message-font-weight: $ams-text-font-weight-normal;
515
+ $ams-error-message-font-size: $ams-text-level-6-font-size;
516
+ $ams-error-message-font-family: $ams-text-font-family;
517
+ $ams-error-message-color: $ams-color-primary-red;
475
518
  $ams-dialog-background-color: $ams-color-primary-white;
476
519
  $ams-description-list-details-padding-inline-start: $ams-space-inside-xl;
477
520
  $ams-description-list-details-font-weight: $ams-text-font-weight-bold;
@@ -566,11 +609,11 @@ $ams-button-line-height: $ams-text-level-5-line-height;
566
609
  $ams-button-font-size: $ams-text-level-5-font-size;
567
610
  $ams-button-font-family: $ams-text-font-family;
568
611
  $ams-button-cursor: $ams-action-activate-cursor;
569
- $ams-breadcrumb-item-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
570
- $ams-breadcrumb-item-link-hover-color: $ams-color-dark-blue;
571
- $ams-breadcrumb-item-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
572
- $ams-breadcrumb-item-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
573
- $ams-breadcrumb-item-link-outline-offset: $ams-focus-outline-offset;
612
+ $ams-breadcrumb-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
613
+ $ams-breadcrumb-link-hover-color: $ams-color-dark-blue;
614
+ $ams-breadcrumb-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
615
+ $ams-breadcrumb-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
616
+ $ams-breadcrumb-link-outline-offset: $ams-focus-outline-offset;
574
617
  $ams-breadcrumb-line-height: $ams-text-level-6-line-height;
575
618
  $ams-breadcrumb-font-weight: $ams-text-font-weight-normal;
576
619
  $ams-breadcrumb-font-size: $ams-text-level-6-font-size;
@@ -583,20 +626,32 @@ $ams-blockquote-font-family: $ams-text-font-family;
583
626
  $ams-blockquote-color: $ams-color-primary-black;
584
627
  $ams-badge-yellow-color: $ams-color-primary-black;
585
628
  $ams-badge-yellow-background-color: $ams-color-yellow;
629
+ $ams-badge-white-color: $ams-color-primary-black;
630
+ $ams-badge-white-background-color: $ams-color-primary-white;
631
+ $ams-badge-red-color: $ams-color-primary-white;
632
+ $ams-badge-red-background-color: $ams-color-primary-red;
586
633
  $ams-badge-purple-color: $ams-color-primary-white;
587
634
  $ams-badge-purple-background-color: $ams-color-purple;
588
635
  $ams-badge-orange-color: $ams-color-primary-black;
589
636
  $ams-badge-orange-background-color: $ams-color-orange;
590
637
  $ams-badge-magenta-color: $ams-color-primary-white;
591
638
  $ams-badge-magenta-background-color: $ams-color-magenta;
639
+ $ams-badge-light-blue-color: $ams-color-primary-black;
640
+ $ams-badge-light-blue-background-color: $ams-color-blue;
641
+ $ams-badge-grey-3-color: $ams-color-primary-white;
642
+ $ams-badge-grey-3-background-color: $ams-color-neutral-grey3;
643
+ $ams-badge-grey-2-color: $ams-color-primary-black;
644
+ $ams-badge-grey-2-background-color: $ams-color-neutral-grey2;
645
+ $ams-badge-grey-1-color: $ams-color-primary-black;
646
+ $ams-badge-grey-1-background-color: $ams-color-neutral-grey1;
592
647
  $ams-badge-green-color: $ams-color-primary-black;
593
648
  $ams-badge-green-background-color: $ams-color-green;
594
649
  $ams-badge-dark-green-color: $ams-color-primary-white;
595
650
  $ams-badge-dark-green-background-color: $ams-color-dark-green;
596
- $ams-badge-dark-blue-color: $ams-color-primary-white;
597
- $ams-badge-dark-blue-background-color: $ams-color-primary-blue;
598
- $ams-badge-blue-color: $ams-color-primary-black;
599
- $ams-badge-blue-background-color: $ams-color-blue;
651
+ $ams-badge-blue-color: $ams-color-primary-white;
652
+ $ams-badge-blue-background-color: $ams-color-primary-blue;
653
+ $ams-badge-black-color: $ams-color-primary-white;
654
+ $ams-badge-black-background-color: $ams-color-primary-black;
600
655
  $ams-badge-padding-inline: $ams-space-inside-xs;
601
656
  $ams-badge-line-height: $ams-text-level-5-line-height;
602
657
  $ams-badge-font-weight: $ams-text-font-weight-bold;
@@ -659,6 +714,7 @@ $ams-link-appearance-text-decoration-thickness: $ams-border-width-md;
659
714
  $ams-link-appearance-color: $ams-color-primary-blue;
660
715
  $ams-top-task-link-label-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
661
716
  $ams-top-task-link-label-color: $ams-link-appearance-color;
717
+ $ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem $ams-switch-thumb-hover-color;
662
718
  $ams-pagination-button-hover-color: $ams-link-appearance-hover-color;
663
719
  $ams-pagination-button-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
664
720
  $ams-pagination-color: $ams-link-appearance-color;
@@ -687,5 +743,5 @@ $ams-link-list-link-color: $ams-link-appearance-color;
687
743
  $ams-card-link-hover-color: $ams-link-appearance-hover-color;
688
744
  $ams-card-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
689
745
  $ams-card-link-color: $ams-link-appearance-color;
690
- $ams-breadcrumb-item-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
691
- $ams-breadcrumb-item-link-color: $ams-link-appearance-color;
746
+ $ams-breadcrumb-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
747
+ $ams-breadcrumb-link-color: $ams-link-appearance-color;
package/dist/index.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:10 GMT
4
4
  */
5
5
 
6
6
  .ams-theme {
@@ -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
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.8.0",
2
+ "version": "0.9.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
package/src/common/ams/focus.tokens.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "ams": {
3
3
  "focus": {
4
- "outline-offset": { "value": "2px" }
4
+ "outline-offset": { "value": "0.125rem" }
5
5
  }
6
6
  }
7
7
  }
package/src/common/ams/link-appearance.tokens.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "link-appearance": {
4
4
  "color": { "value": "{ams.color.primary-blue}" },
5
5
  "text-decoration-thickness": { "value": "{ams.border.width.md}" },
6
- "text-underline-offset": { "value": "0.375rem" },
6
+ "text-underline-offset": { "value": "0.3333em" },
7
7
  "hover": {
8
8
  "color": { "value": "{ams.color.dark-blue}" }
9
9
  },
@@ -17,7 +17,7 @@
17
17
  "text-decoration-line": { "value": "underline" },
18
18
  "hover": {
19
19
  "text-decoration-thickness": { "value": "{ams.border.width.lg}" },
20
- "text-underline-offset": { "value": "0.3125rem" }
20
+ "text-underline-offset": { "value": "0.2778em" }
21
21
  }
22
22
  },
23
23
  "subtle": {