@amsterdam/design-system-tokens 4.0.1 → 4.1.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.
- package/CHANGELOG.md +18 -0
- package/README.md +29 -41
- package/dist/compact.css +1 -0
- package/dist/compact.d.ts +3 -0
- package/dist/compact.json +3 -0
- package/dist/compact.mjs +1 -0
- package/dist/compact.scss +1 -0
- package/dist/compact.theme.css +1 -0
- package/dist/index.css +110 -31
- package/dist/index.d.ts +138 -5
- package/dist/index.json +178 -45
- package/dist/index.mjs +148 -45
- package/dist/index.scss +110 -31
- package/dist/index.theme.css +110 -31
- package/package.json +5 -4
- package/src/brand/ams/typography.tokens.json +2 -2
- package/src/common/ams/query-containers.tokens.json +12 -0
- package/src/components/ams/calendar.compact.tokens.json +10 -0
- package/src/components/ams/calendar.tokens.json +87 -0
- package/src/components/ams/date-picker.tokens.json +103 -0
- package/src/components/ams/description-list.tokens.json +4 -4
- package/src/components/ams/dialog.tokens.json +13 -7
- package/src/components/ams/grid.tokens.json +10 -4
- package/src/components/ams/menu.tokens.json +4 -4
- package/src/components/ams/page-footer.tokens.json +2 -2
- package/src/components/ams/page-header.tokens.json +2 -2
- package/src/components/ams/page.tokens.json +6 -0
- package/src/components/ams/pagination.tokens.json +219 -2
- package/src/components/ams/progress-list.tokens.json +2 -2
- package/src/components/ams/switch.tokens.json +8 -0
- package/src/components/ams/table-of-contents.tokens.json +65 -14
package/dist/index.mjs
CHANGED
|
@@ -56,7 +56,7 @@ export const amsTypographyBodyTextFontSize =
|
|
|
56
56
|
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)"; // Scales from 18px to 20px.
|
|
57
57
|
export const amsTypographyBodyTextFontWeight = "400";
|
|
58
58
|
export const amsTypographyBodyTextLineHeight = 1.6;
|
|
59
|
-
export const amsTypographyBodyTextBoldFontWeight = "
|
|
59
|
+
export const amsTypographyBodyTextBoldFontWeight = "700";
|
|
60
60
|
export const amsTypographyBodyTextSmallFontSize = "1rem"; // Fixed at 16px; does not scale.
|
|
61
61
|
export const amsTypographyBodyTextSmallLineHeight = 1.5;
|
|
62
62
|
export const amsTypographyBodyTextLargeFontSize =
|
|
@@ -79,7 +79,7 @@ export const amsTypographyHeading_4FontSize =
|
|
|
79
79
|
export const amsTypographyHeading_4LineHeight = 1.4;
|
|
80
80
|
export const amsTypographyHeading_5FontSize = "1rem";
|
|
81
81
|
export const amsTypographyHeading_5LineHeight = 1.4;
|
|
82
|
-
export const amsTypographyHeadingFontWeight = "
|
|
82
|
+
export const amsTypographyHeadingFontWeight = "700";
|
|
83
83
|
export const amsTypographyHeadingTextWrap = "balance"; // Distributes heading text evenly across lines for a more balanced appearance.
|
|
84
84
|
export const amsInputsBackgroundColor = "#ffffff";
|
|
85
85
|
export const amsInputsBorderColor = "currentColor"; // Uses currentColor so the border adapts to the text colour, including in error states.
|
|
@@ -116,6 +116,8 @@ export const amsLinksContrastColor = "#202020";
|
|
|
116
116
|
export const amsLinksContrastHoverColor = "#202020";
|
|
117
117
|
export const amsLinksInverseColor = "#ffffff";
|
|
118
118
|
export const amsLinksInverseHoverColor = "#ffffff";
|
|
119
|
+
export const amsQueryContainersInlineSizeContainerName =
|
|
120
|
+
"ams-query-container-inline-size";
|
|
119
121
|
export const amsAccordionGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
120
122
|
export const amsAccordionButtonColor = "#004699";
|
|
121
123
|
export const amsAccordionButtonCursor = "pointer";
|
|
@@ -186,7 +188,7 @@ export const amsBadgeColor = "#ffffff";
|
|
|
186
188
|
export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
187
189
|
export const amsBadgeFontSize =
|
|
188
190
|
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
189
|
-
export const amsBadgeFontWeight = "
|
|
191
|
+
export const amsBadgeFontWeight = "700";
|
|
190
192
|
export const amsBadgeGap = "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
191
193
|
export const amsBadgeLineHeight = 1.6;
|
|
192
194
|
export const amsBadgePaddingInline =
|
|
@@ -209,7 +211,7 @@ export const amsBlockquoteColor = "#202020";
|
|
|
209
211
|
export const amsBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
210
212
|
export const amsBlockquoteFontSize =
|
|
211
213
|
"clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)";
|
|
212
|
-
export const amsBlockquoteFontWeight = "
|
|
214
|
+
export const amsBlockquoteFontWeight = "700";
|
|
213
215
|
export const amsBlockquoteLineHeight = 1.4;
|
|
214
216
|
export const amsBlockquoteInverseColor = "#ffffff";
|
|
215
217
|
export const amsBodyBackgroundColor = "#ffffff";
|
|
@@ -271,6 +273,21 @@ export const amsButtonTertiaryColor = "#004699";
|
|
|
271
273
|
export const amsButtonTertiaryDisabledColor = "#767676";
|
|
272
274
|
export const amsButtonTertiaryHoverBorderColor = "currentColor";
|
|
273
275
|
export const amsButtonTertiaryHoverColor = "#003677";
|
|
276
|
+
export const amsCalendarFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
277
|
+
export const amsCalendarFontSize =
|
|
278
|
+
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
279
|
+
export const amsCalendarFontWeight = "400";
|
|
280
|
+
export const amsCalendarGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
281
|
+
export const amsCalendarInlineSize = "20rem";
|
|
282
|
+
export const amsCalendarLineHeight = 1.6;
|
|
283
|
+
export const amsCalendarDayOutlineOffset = "0.25rem";
|
|
284
|
+
export const amsCalendarDayCurrentFontWeight = "700";
|
|
285
|
+
export const amsCalendarDayLinkColor = "#004699";
|
|
286
|
+
export const amsCalendarDayLinkTextDecorationLine = "none";
|
|
287
|
+
export const amsCalendarDayLinkTextDecorationThickness = "0.125rem";
|
|
288
|
+
export const amsCalendarDayLinkTextUnderlineOffset = "0.15625rem";
|
|
289
|
+
export const amsCalendarDayLinkHoverColor = "#003677";
|
|
290
|
+
export const amsCalendarDayLinkHoverTextDecorationLine = "underline";
|
|
274
291
|
export const amsCallToActionLinkBackgroundColor = "#00893c";
|
|
275
292
|
export const amsCallToActionLinkColor = "#ffffff";
|
|
276
293
|
export const amsCallToActionLinkFontFamily =
|
|
@@ -385,8 +402,28 @@ export const amsDateInputInvalidHoverBoxShadow =
|
|
|
385
402
|
export const amsDateInputCalendarPickerIndicatorBackgroundImage =
|
|
386
403
|
"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
|
|
387
404
|
export const amsDateInputCalendarPickerIndicatorCursor = "pointer";
|
|
405
|
+
export const amsDatePickerFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
406
|
+
export const amsDatePickerFontSize =
|
|
407
|
+
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
408
|
+
export const amsDatePickerFontWeight = "400";
|
|
409
|
+
export const amsDatePickerGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
410
|
+
export const amsDatePickerInlineSize = "20rem";
|
|
411
|
+
export const amsDatePickerLineHeight = 1.6;
|
|
412
|
+
export const amsDatePickerDayColor = "#004699";
|
|
413
|
+
export const amsDatePickerDayCursor = "pointer";
|
|
414
|
+
export const amsDatePickerDayOutlineOffset = "0.25rem";
|
|
415
|
+
export const amsDatePickerDayCurrentFontWeight = "700";
|
|
416
|
+
export const amsDatePickerDayDisabledColor = "#767676";
|
|
417
|
+
export const amsDatePickerDayDisabledCursor = "not-allowed";
|
|
418
|
+
export const amsDatePickerDayDisabledTextDecorationLine = "line-through";
|
|
419
|
+
export const amsDatePickerDayHoverBackgroundColor = "rgb(0 70 153 / 12.5%)";
|
|
420
|
+
export const amsDatePickerDayHoverColor = "#003677";
|
|
421
|
+
export const amsDatePickerDaySelectedBackgroundColor = "#004699";
|
|
422
|
+
export const amsDatePickerDaySelectedColor = "#ffffff";
|
|
423
|
+
export const amsDatePickerDaySelectedHoverBackgroundColor = "#003677";
|
|
388
424
|
export const amsDescriptionListColor = "#202020";
|
|
389
|
-
export const amsDescriptionListColumnGap =
|
|
425
|
+
export const amsDescriptionListColumnGap =
|
|
426
|
+
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
390
427
|
export const amsDescriptionListFontFamily =
|
|
391
428
|
"'Amsterdam Sans', Arial, sans-serif";
|
|
392
429
|
export const amsDescriptionListFontSize =
|
|
@@ -396,7 +433,7 @@ export const amsDescriptionListRowGap = "0";
|
|
|
396
433
|
export const amsDescriptionListInverseColor = "#ffffff";
|
|
397
434
|
export const amsDescriptionListTermFontSize =
|
|
398
435
|
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
399
|
-
export const amsDescriptionListTermFontWeight = "
|
|
436
|
+
export const amsDescriptionListTermFontWeight = "700";
|
|
400
437
|
export const amsDescriptionListTermLineHeight = 1.4;
|
|
401
438
|
export const amsDescriptionListTermMarginBlockEnd =
|
|
402
439
|
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
@@ -409,9 +446,9 @@ export const amsDescriptionListDescriptionMarginBlockEnd =
|
|
|
409
446
|
export const amsDescriptionListDescriptionPaddingInlineStart = "0";
|
|
410
447
|
export const amsDescriptionListSectionMarginBlockEnd =
|
|
411
448
|
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
412
|
-
export const amsDescriptionListNarrowGridTemplateColumns = "
|
|
413
|
-
export const amsDescriptionListMediumGridTemplateColumns = "
|
|
414
|
-
export const amsDescriptionListWideGridTemplateColumns = "
|
|
449
|
+
export const amsDescriptionListNarrowGridTemplateColumns = "1fr 4fr";
|
|
450
|
+
export const amsDescriptionListMediumGridTemplateColumns = "1fr 2fr";
|
|
451
|
+
export const amsDescriptionListWideGridTemplateColumns = "1fr 1fr";
|
|
415
452
|
export const amsDescriptionListViMediumColumnGap =
|
|
416
453
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
417
454
|
export const amsDescriptionListViMediumNarrowGridTemplateColumns = "1fr 4fr";
|
|
@@ -423,14 +460,18 @@ export const amsDialogBorderRadius = "initial";
|
|
|
423
460
|
export const amsDialogBorderStyle = "solid";
|
|
424
461
|
export const amsDialogBorderWidth = "0.125rem";
|
|
425
462
|
export const amsDialogBoxShadow = "initial";
|
|
463
|
+
export const amsDialogContainerName = "ams-query-container-inline-size";
|
|
464
|
+
export const amsDialogContainerType = "inline-size";
|
|
426
465
|
export const amsDialogGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
427
466
|
export const amsDialogInlineSize =
|
|
428
467
|
"calc(100% - 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem))";
|
|
429
468
|
export const amsDialogMaxBlockSize =
|
|
430
469
|
"calc(100dvh - 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem))";
|
|
431
470
|
export const amsDialogMaxInlineSize = "48rem";
|
|
432
|
-
export const amsDialogMediumInlineSize =
|
|
433
|
-
|
|
471
|
+
export const amsDialogMediumInlineSize =
|
|
472
|
+
"calc(100% - 2 * clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem))";
|
|
473
|
+
export const amsDialogMediumMaxBlockSize =
|
|
474
|
+
"calc(100dvh - 2 * clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem))";
|
|
434
475
|
export const amsDialogViMediumInlineSize =
|
|
435
476
|
"calc(100% - 2 * clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem))";
|
|
436
477
|
export const amsDialogViMediumMaxBlockSize =
|
|
@@ -441,8 +482,10 @@ export const amsDialogHeaderPaddingBlock =
|
|
|
441
482
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem) 0";
|
|
442
483
|
export const amsDialogHeaderPaddingInline =
|
|
443
484
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
444
|
-
export const amsDialogHeaderMediumPaddingBlock =
|
|
445
|
-
|
|
485
|
+
export const amsDialogHeaderMediumPaddingBlock =
|
|
486
|
+
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem) 0";
|
|
487
|
+
export const amsDialogHeaderMediumPaddingInline =
|
|
488
|
+
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
446
489
|
export const amsDialogHeaderViMediumPaddingBlock =
|
|
447
490
|
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem) 0";
|
|
448
491
|
export const amsDialogHeaderViMediumPaddingInline =
|
|
@@ -450,15 +493,18 @@ export const amsDialogHeaderViMediumPaddingInline =
|
|
|
450
493
|
export const amsDialogBodyPaddingBlock = "0";
|
|
451
494
|
export const amsDialogBodyPaddingInline =
|
|
452
495
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
453
|
-
export const amsDialogBodyMediumPaddingInline =
|
|
496
|
+
export const amsDialogBodyMediumPaddingInline =
|
|
497
|
+
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
454
498
|
export const amsDialogBodyViMediumPaddingInline =
|
|
455
499
|
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
456
500
|
export const amsDialogFooterPaddingBlock =
|
|
457
501
|
"0 clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
458
502
|
export const amsDialogFooterPaddingInline =
|
|
459
503
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
460
|
-
export const amsDialogFooterMediumPaddingBlock =
|
|
461
|
-
|
|
504
|
+
export const amsDialogFooterMediumPaddingBlock =
|
|
505
|
+
"0 clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
506
|
+
export const amsDialogFooterMediumPaddingInline =
|
|
507
|
+
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
462
508
|
export const amsDialogFooterViMediumPaddingBlock =
|
|
463
509
|
"0 clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
464
510
|
export const amsDialogFooterViMediumPaddingInline =
|
|
@@ -489,7 +535,7 @@ export const amsFieldSetLegendFontFamily =
|
|
|
489
535
|
"'Amsterdam Sans', Arial, sans-serif";
|
|
490
536
|
export const amsFieldSetLegendFontSize =
|
|
491
537
|
"clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)";
|
|
492
|
-
export const amsFieldSetLegendFontWeight = "
|
|
538
|
+
export const amsFieldSetLegendFontWeight = "700";
|
|
493
539
|
export const amsFieldSetLegendLineHeight = 1.3;
|
|
494
540
|
export const amsFieldSetLegendTextWrap = "balance";
|
|
495
541
|
export const amsFieldSetLegendInFieldsetFontWeight = "400";
|
|
@@ -568,10 +614,12 @@ export const amsGridPaddingInline =
|
|
|
568
614
|
export const amsGridRowGapL = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
569
615
|
export const amsGridRowGapXl = "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
570
616
|
export const amsGridRowGap_2xl = "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)";
|
|
571
|
-
export const amsGridMediumColumnCount =
|
|
572
|
-
export const amsGridMediumPaddingInline =
|
|
573
|
-
|
|
574
|
-
export const
|
|
617
|
+
export const amsGridMediumColumnCount = 8;
|
|
618
|
+
export const amsGridMediumPaddingInline =
|
|
619
|
+
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
620
|
+
export const amsGridWideColumnCount = 12;
|
|
621
|
+
export const amsGridWidePaddingInline =
|
|
622
|
+
"clamp(3rem, 2.25rem + 3.75vw, 5.625rem)";
|
|
575
623
|
export const amsGridViMediumColumnCount = 8;
|
|
576
624
|
export const amsGridViMediumPaddingInline =
|
|
577
625
|
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
@@ -579,6 +627,8 @@ export const amsGridViWideColumnCount = 12;
|
|
|
579
627
|
export const amsGridViWidePaddingInline =
|
|
580
628
|
"clamp(3rem, 2.25rem + 3.75vw, 5.625rem)";
|
|
581
629
|
export const amsGridCellBackgroundColor = "initial";
|
|
630
|
+
export const amsGridCellContainerName = "ams-query-container-inline-size";
|
|
631
|
+
export const amsGridCellContainerType = "inline-size";
|
|
582
632
|
export const amsGridCellPaddingBlock = "initial";
|
|
583
633
|
export const amsGridCellPaddingInline = "initial";
|
|
584
634
|
export const amsHeading_1FontSize = "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)";
|
|
@@ -595,7 +645,7 @@ export const amsHeading_5FontSize = "1rem";
|
|
|
595
645
|
export const amsHeading_5LineHeight = 1.4;
|
|
596
646
|
export const amsHeadingColor = "#202020";
|
|
597
647
|
export const amsHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
598
|
-
export const amsHeadingFontWeight = "
|
|
648
|
+
export const amsHeadingFontWeight = "700";
|
|
599
649
|
export const amsHeadingTextWrap = "balance";
|
|
600
650
|
export const amsHeadingInverseColor = "#ffffff";
|
|
601
651
|
export const amsHintFontWeight = "400";
|
|
@@ -660,7 +710,7 @@ export const amsLabelColor = "#202020";
|
|
|
660
710
|
export const amsLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
661
711
|
export const amsLabelFontSize =
|
|
662
712
|
"clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)";
|
|
663
|
-
export const amsLabelFontWeight = "
|
|
713
|
+
export const amsLabelFontWeight = "700";
|
|
664
714
|
export const amsLabelLineHeight = 1.3;
|
|
665
715
|
export const amsLabelTextWrap = "balance";
|
|
666
716
|
export const amsLabelInFieldsetFontWeight = "400";
|
|
@@ -715,9 +765,11 @@ export const amsMenuFontSize = "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
|
715
765
|
export const amsMenuFontWeight = "400";
|
|
716
766
|
export const amsMenuLineHeight = 1.6;
|
|
717
767
|
export const amsMenuPaddingBlock = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
718
|
-
export const amsMenuWideMaxInlineSize = "
|
|
719
|
-
export const amsMenuWidePaddingBlock =
|
|
720
|
-
|
|
768
|
+
export const amsMenuWideMaxInlineSize = "8rem";
|
|
769
|
+
export const amsMenuWidePaddingBlock =
|
|
770
|
+
"calc(clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem) + 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)) clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
771
|
+
export const amsMenuWidePaddingInline =
|
|
772
|
+
"clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
721
773
|
export const amsMenuViWideMaxInlineSize = "8rem";
|
|
722
774
|
export const amsMenuViWidePaddingBlock =
|
|
723
775
|
"calc(clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem) + 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)) clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
@@ -735,7 +787,8 @@ export const amsMenuLinkTextDecorationThickness = "0.125rem";
|
|
|
735
787
|
export const amsMenuLinkTextUnderlineOffset = "0.15625rem";
|
|
736
788
|
export const amsMenuLinkHoverColor = "#ffffff";
|
|
737
789
|
export const amsMenuLinkHoverTextDecorationLine = "underline";
|
|
738
|
-
export const amsMenuLinkWideGap =
|
|
790
|
+
export const amsMenuLinkWideGap =
|
|
791
|
+
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
739
792
|
export const amsMenuLinkViWideGap =
|
|
740
793
|
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
741
794
|
export const amsMenuListGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
@@ -770,8 +823,10 @@ export const amsPageFooterMenuPaddingInline =
|
|
|
770
823
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
771
824
|
export const amsPageFooterMenuRowGap =
|
|
772
825
|
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
773
|
-
export const amsPageFooterMenuMediumPaddingInline =
|
|
774
|
-
|
|
826
|
+
export const amsPageFooterMenuMediumPaddingInline =
|
|
827
|
+
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
828
|
+
export const amsPageFooterMenuWidePaddingInline =
|
|
829
|
+
"clamp(3rem, 2.25rem + 3.75vw, 5.625rem)";
|
|
775
830
|
export const amsPageFooterMenuViMediumPaddingInline =
|
|
776
831
|
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
777
832
|
export const amsPageFooterMenuViWidePaddingInline =
|
|
@@ -796,8 +851,10 @@ export const amsPageHeaderPaddingBlock =
|
|
|
796
851
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
797
852
|
export const amsPageHeaderPaddingInline =
|
|
798
853
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
799
|
-
export const amsPageHeaderMediumPaddingInline =
|
|
800
|
-
|
|
854
|
+
export const amsPageHeaderMediumPaddingInline =
|
|
855
|
+
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
856
|
+
export const amsPageHeaderWidePaddingInline =
|
|
857
|
+
"clamp(3rem, 2.25rem + 3.75vw, 5.625rem)";
|
|
801
858
|
export const amsPageHeaderViMediumPaddingInline =
|
|
802
859
|
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
803
860
|
export const amsPageHeaderViWidePaddingInline =
|
|
@@ -808,7 +865,7 @@ export const amsPageHeaderLogoLinkOutlineOffset = "0.25rem";
|
|
|
808
865
|
export const amsPageHeaderBrandNameColor = "#202020";
|
|
809
866
|
export const amsPageHeaderBrandNameFontSize =
|
|
810
867
|
"clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)";
|
|
811
|
-
export const amsPageHeaderBrandNameFontWeight = "
|
|
868
|
+
export const amsPageHeaderBrandNameFontWeight = "700";
|
|
812
869
|
export const amsPageHeaderBrandNameLineHeight = 1.3;
|
|
813
870
|
export const amsPageHeaderBrandNameTextWrap = "balance";
|
|
814
871
|
export const amsPageHeaderMegaMenuPaddingBlock =
|
|
@@ -850,6 +907,8 @@ export const amsPageHeaderNavigationColumnGap =
|
|
|
850
907
|
export const amsPageHeaderNavigationRowGap =
|
|
851
908
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
852
909
|
export const amsPageBackgroundColor = "#ffffff";
|
|
910
|
+
export const amsPageContainerName = "ams-query-container-inline-size";
|
|
911
|
+
export const amsPageContainerType = "inline-size";
|
|
853
912
|
export const amsPageMaxInlineSize = "90rem";
|
|
854
913
|
export const amsPageWithMenuMaxInlineSize = "120rem";
|
|
855
914
|
export const amsPageWithMenuAreaSkipLinkMarginInlineEnd =
|
|
@@ -858,19 +917,53 @@ export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
|
858
917
|
export const amsPaginationFontSize =
|
|
859
918
|
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
860
919
|
export const amsPaginationFontWeight = "400";
|
|
920
|
+
export const amsPaginationGap = "0";
|
|
861
921
|
export const amsPaginationLineHeight = 1.6;
|
|
922
|
+
export const amsPaginationListGap = "0";
|
|
923
|
+
export const amsPaginationLinkBackgroundColor = "transparent";
|
|
862
924
|
export const amsPaginationLinkColor = "#004699";
|
|
925
|
+
export const amsPaginationLinkFontWeight = "400";
|
|
863
926
|
export const amsPaginationLinkGap =
|
|
864
927
|
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
928
|
+
export const amsPaginationLinkMinBlockSize = "auto";
|
|
929
|
+
export const amsPaginationLinkMinInlineSize = "auto";
|
|
865
930
|
export const amsPaginationLinkOutlineOffset = "0.25rem";
|
|
931
|
+
export const amsPaginationLinkPaddingBlock = "0";
|
|
866
932
|
export const amsPaginationLinkPaddingInline =
|
|
867
933
|
"clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
868
934
|
export const amsPaginationLinkTextDecorationLine = "none";
|
|
869
935
|
export const amsPaginationLinkTextDecorationThickness = "0.125rem";
|
|
870
936
|
export const amsPaginationLinkTextUnderlineOffset = "0.15625rem";
|
|
871
|
-
export const
|
|
937
|
+
export const amsPaginationLinkHoverBackgroundColor = "transparent";
|
|
872
938
|
export const amsPaginationLinkHoverColor = "#003677";
|
|
873
939
|
export const amsPaginationLinkHoverTextDecorationLine = "underline";
|
|
940
|
+
export const amsPaginationLinkActiveBackgroundColor = "transparent";
|
|
941
|
+
export const amsPaginationLinkActiveColor = "#004699";
|
|
942
|
+
export const amsPaginationLinkCurrentBackgroundColor = "transparent";
|
|
943
|
+
export const amsPaginationLinkCurrentColor = "#004699";
|
|
944
|
+
export const amsPaginationLinkCurrentFontWeight = "700";
|
|
945
|
+
export const amsPaginationLinkCurrentHoverBackgroundColor = "transparent";
|
|
946
|
+
export const amsPaginationLinkCurrentHoverColor = "#003677";
|
|
947
|
+
export const amsPaginationRelativeLinkBackgroundColor = "transparent";
|
|
948
|
+
export const amsPaginationRelativeLinkColor = "#004699";
|
|
949
|
+
export const amsPaginationRelativeLinkFontWeight = "400";
|
|
950
|
+
export const amsPaginationRelativeLinkGap =
|
|
951
|
+
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
952
|
+
export const amsPaginationRelativeLinkOutlineOffset = "0.25rem";
|
|
953
|
+
export const amsPaginationRelativeLinkPaddingBlock = "0";
|
|
954
|
+
export const amsPaginationRelativeLinkPaddingInline =
|
|
955
|
+
"clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
956
|
+
export const amsPaginationRelativeLinkTextDecorationLine = "none";
|
|
957
|
+
export const amsPaginationRelativeLinkTextDecorationThickness = "0.125rem";
|
|
958
|
+
export const amsPaginationRelativeLinkTextUnderlineOffset = "0.15625rem";
|
|
959
|
+
export const amsPaginationRelativeLinkHoverBackgroundColor = "transparent";
|
|
960
|
+
export const amsPaginationRelativeLinkHoverColor = "#003677";
|
|
961
|
+
export const amsPaginationRelativeLinkHoverTextDecorationLine = "underline";
|
|
962
|
+
export const amsPaginationRelativeLinkActiveBackgroundColor = "transparent";
|
|
963
|
+
export const amsPaginationRelativeLinkActiveColor = "#004699";
|
|
964
|
+
export const amsPaginationEllipsisColor = "#202020";
|
|
965
|
+
export const amsPaginationEllipsisPaddingBlock = "0";
|
|
966
|
+
export const amsPaginationEllipsisPaddingInline = "0";
|
|
874
967
|
export const amsParagraphColor = "#202020";
|
|
875
968
|
export const amsParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
876
969
|
export const amsParagraphFontSize =
|
|
@@ -932,7 +1025,8 @@ export const amsProgressListIconTransitionDuration = "0.3s";
|
|
|
932
1025
|
export const amsProgressListIconTransitionTimingFunction = "ease";
|
|
933
1026
|
export const amsProgressListStepGap =
|
|
934
1027
|
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
935
|
-
export const amsProgressListStepMediumGap =
|
|
1028
|
+
export const amsProgressListStepMediumGap =
|
|
1029
|
+
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
936
1030
|
export const amsProgressListStepViMediumGap =
|
|
937
1031
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
938
1032
|
export const amsProgressListStepMarkerShapeBlockSize = "1.5rem";
|
|
@@ -962,7 +1056,7 @@ export const amsProgressListSubstepsPaddingBlockStart =
|
|
|
962
1056
|
export const amsProgressListSubstepsStepIndicatorMarginInlineEnd =
|
|
963
1057
|
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
964
1058
|
export const amsProgressListSubstepsStepIndicatorMediumMarginInlineEnd =
|
|
965
|
-
"
|
|
1059
|
+
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
966
1060
|
export const amsProgressListSubstepsStepIndicatorViMediumMarginInlineEnd =
|
|
967
1061
|
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
968
1062
|
export const amsProgressListSubstepsStepMarkerBlockSize =
|
|
@@ -1147,6 +1241,7 @@ export const amsSwitchBackgroundColor = "#767676";
|
|
|
1147
1241
|
export const amsSwitchCursor = "pointer";
|
|
1148
1242
|
export const amsSwitchOutlineOffset = "0.25rem";
|
|
1149
1243
|
export const amsSwitchInlineSize = "3.5rem";
|
|
1244
|
+
export const amsSwitchLabelBorderWidth = "0.125rem";
|
|
1150
1245
|
export const amsSwitchThumbBackgroundColor = "#ffffff";
|
|
1151
1246
|
export const amsSwitchThumbBlockSize = "1.75rem";
|
|
1152
1247
|
export const amsSwitchThumbInlineSize = "1.75rem";
|
|
@@ -1179,7 +1274,7 @@ export const amsTabNavigationLinkHoverBoxShadow =
|
|
|
1179
1274
|
export const amsTabNavigationLinkHoverColor = "#003677";
|
|
1180
1275
|
export const amsTabNavigationLinkCurrentBoxShadow =
|
|
1181
1276
|
"inset 0rem -0.25rem 0rem 0rem currentColor";
|
|
1182
|
-
export const amsTabNavigationLinkCurrentFontWeight = "
|
|
1277
|
+
export const amsTabNavigationLinkCurrentFontWeight = "700";
|
|
1183
1278
|
export const amsTabNavigationLinkVerticalHoverBoxShadow =
|
|
1184
1279
|
"inset -0.125rem 0rem 0rem 0rem currentColor";
|
|
1185
1280
|
export const amsTabNavigationLinkVerticalCurrentBoxShadow =
|
|
@@ -1192,26 +1287,34 @@ export const amsTableOfContentsFontWeight = "400";
|
|
|
1192
1287
|
export const amsTableOfContentsGap =
|
|
1193
1288
|
"clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
1194
1289
|
export const amsTableOfContentsLineHeight = 1.6;
|
|
1290
|
+
export const amsTableOfContentsListGap =
|
|
1291
|
+
"clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
1292
|
+
export const amsTableOfContentsListListPaddingBlockStart =
|
|
1293
|
+
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
1294
|
+
export const amsTableOfContentsListListPaddingInlineStart =
|
|
1295
|
+
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
1296
|
+
export const amsTableOfContentsItemGap =
|
|
1297
|
+
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
1195
1298
|
export const amsTableOfContentsLinkColor = "#004699";
|
|
1196
1299
|
export const amsTableOfContentsLinkOutlineOffset = "0.25rem";
|
|
1197
1300
|
export const amsTableOfContentsLinkTextDecorationLine = "none";
|
|
1198
1301
|
export const amsTableOfContentsLinkTextDecorationThickness = "0.125rem";
|
|
1199
1302
|
export const amsTableOfContentsLinkTextUnderlineOffset = "0.15625rem";
|
|
1303
|
+
export const amsTableOfContentsLinkCurrentColor = "#004699";
|
|
1304
|
+
export const amsTableOfContentsLinkCurrentFontWeight = "700";
|
|
1200
1305
|
export const amsTableOfContentsLinkHoverColor = "#003677";
|
|
1201
1306
|
export const amsTableOfContentsLinkHoverTextDecorationLine = "underline";
|
|
1202
|
-
export const
|
|
1203
|
-
|
|
1204
|
-
export const
|
|
1205
|
-
|
|
1206
|
-
export const amsTableOfContentsListListPaddingInlineStart =
|
|
1207
|
-
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
1307
|
+
export const amsTableOfContentsButtonColor = "#004699";
|
|
1308
|
+
export const amsTableOfContentsButtonHoverColor = "#003677";
|
|
1309
|
+
export const amsTableOfContentsButtonIconTransitionDuration = "0.3s";
|
|
1310
|
+
export const amsTableOfContentsButtonIconTransitionTimingFunction = "ease";
|
|
1208
1311
|
export const amsTableColor = "#202020";
|
|
1209
1312
|
export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
1210
1313
|
export const amsTableFontSize =
|
|
1211
1314
|
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
1212
1315
|
export const amsTableFontWeight = "400";
|
|
1213
1316
|
export const amsTableLineHeight = 1.6;
|
|
1214
|
-
export const amsTableCaptionFontWeight = "
|
|
1317
|
+
export const amsTableCaptionFontWeight = "700";
|
|
1215
1318
|
export const amsTableCaptionMarginBlockEnd =
|
|
1216
1319
|
"clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
1217
1320
|
export const amsTableCellBorderBlockEnd = "0.0625rem solid #d1d1d1";
|
|
@@ -1219,7 +1322,7 @@ export const amsTableCellPaddingBlock =
|
|
|
1219
1322
|
"clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
1220
1323
|
export const amsTableCellPaddingInline =
|
|
1221
1324
|
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
1222
|
-
export const amsTableHeaderCellFontWeight = "
|
|
1325
|
+
export const amsTableHeaderCellFontWeight = "700";
|
|
1223
1326
|
export const amsTabsGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
1224
1327
|
export const amsTabsListBoxShadow = "inset 0rem -0.125rem 0rem 0rem #d1d1d1";
|
|
1225
1328
|
export const amsTabsButtonColor = "#004699";
|
|
@@ -1239,7 +1342,7 @@ export const amsTabsButtonHoverBoxShadow =
|
|
|
1239
1342
|
export const amsTabsButtonHoverColor = "#003677";
|
|
1240
1343
|
export const amsTabsButtonSelectedBoxShadow =
|
|
1241
1344
|
"inset 0rem -0.25rem 0rem 0rem currentColor";
|
|
1242
|
-
export const amsTabsButtonSelectedFontWeight = "
|
|
1345
|
+
export const amsTabsButtonSelectedFontWeight = "700";
|
|
1243
1346
|
export const amsTabsButtonDisabledColor = "#767676";
|
|
1244
1347
|
export const amsTabsButtonDisabledCursor = "not-allowed";
|
|
1245
1348
|
export const amsTextAreaBackgroundColor = "#ffffff";
|