@amsterdam/design-system-tokens 3.0.0 → 3.2.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 (107) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +45 -1
  3. package/build.js +25 -35
  4. package/dist/compact.css +2 -2
  5. package/dist/compact.d.ts +3 -3
  6. package/dist/compact.mjs +2 -2
  7. package/dist/compact.scss +2 -2
  8. package/dist/compact.theme.css +2 -2
  9. package/dist/index.css +118 -47
  10. package/dist/index.d.ts +174 -9
  11. package/dist/index.json +197 -32
  12. package/dist/index.mjs +176 -70
  13. package/dist/index.scss +118 -47
  14. package/dist/index.theme.css +118 -47
  15. package/package.json +2 -2
  16. package/src/brand/ams/aspect-ratio.tokens.json +18 -6
  17. package/src/brand/ams/border.compact.tokens.json +36 -4
  18. package/src/brand/ams/border.tokens.json +36 -4
  19. package/src/brand/ams/color.deprecated.tokens.json +3 -2
  20. package/src/brand/ams/color.tokens.json +106 -23
  21. package/src/brand/ams/cursor.tokens.json +6 -2
  22. package/src/brand/ams/focus.tokens.json +10 -1
  23. package/src/brand/ams/space.compact.tokens.json +30 -6
  24. package/src/brand/ams/space.tokens.json +24 -6
  25. package/src/brand/ams/typography.compact.tokens.json +110 -18
  26. package/src/brand/ams/typography.deprecated.compact.tokens.json +10 -4
  27. package/src/brand/ams/typography.deprecated.tokens.json +20 -8
  28. package/src/brand/ams/typography.tokens.json +131 -24
  29. package/src/common/ams/inputs.tokens.json +121 -18
  30. package/src/common/ams/links.tokens.json +72 -12
  31. package/src/components/ams/accordion.deprecated.tokens.json +29 -7
  32. package/src/components/ams/accordion.tokens.json +46 -8
  33. package/src/components/ams/action-group.tokens.json +7 -1
  34. package/src/components/ams/alert.tokens.json +83 -16
  35. package/src/components/ams/avatar.tokens.json +139 -31
  36. package/src/components/ams/badge.tokens.json +98 -21
  37. package/src/components/ams/blockquote.tokens.json +28 -6
  38. package/src/components/ams/breadcrumb.tokens.json +68 -15
  39. package/src/components/ams/button.tokens.json +176 -34
  40. package/src/components/ams/call-to-action-link.tokens.json +73 -14
  41. package/src/components/ams/card.tokens.json +60 -11
  42. package/src/components/ams/character-count.tokens.json +28 -6
  43. package/src/components/ams/checkbox.deprecated.tokens.json +23 -7
  44. package/src/components/ams/checkbox.tokens.json +154 -36
  45. package/src/components/ams/column.tokens.json +35 -5
  46. package/src/components/ams/date-input.deprecated.tokens.json +14 -8
  47. package/src/components/ams/date-input.tokens.json +92 -25
  48. package/src/components/ams/description-list.tokens.json +86 -13
  49. package/src/components/ams/dialog.tokens.json +144 -23
  50. package/src/components/ams/error-message.tokens.json +31 -6
  51. package/src/components/ams/field-set.deprecated.tokens.json +8 -1
  52. package/src/components/ams/field-set.tokens.json +69 -13
  53. package/src/components/ams/field.deprecated.tokens.json +8 -1
  54. package/src/components/ams/field.tokens.json +24 -4
  55. package/src/components/ams/figure.tokens.json +35 -7
  56. package/src/components/ams/file-input.tokens.json +143 -29
  57. package/src/components/ams/file-list.tokens.json +49 -9
  58. package/src/components/ams/grid.compact.tokens.json +7 -1
  59. package/src/components/ams/grid.tokens.json +79 -13
  60. package/src/components/ams/heading.tokens.json +91 -17
  61. package/src/components/ams/hint.tokens.json +8 -2
  62. package/src/components/ams/icon-button.tokens.json +69 -17
  63. package/src/components/ams/icon.deprecated.tokens.json +10 -4
  64. package/src/components/ams/icon.tokens.json +112 -19
  65. package/src/components/ams/image-slider.tokens.json +60 -10
  66. package/src/components/ams/image.tokens.json +3 -1
  67. package/src/components/ams/invalid-form-alert.tokens.json +7 -1
  68. package/src/components/ams/label.tokens.json +31 -7
  69. package/src/components/ams/link-list.tokens.json +106 -21
  70. package/src/components/ams/link.tokens.json +73 -15
  71. package/src/components/ams/logo.tokens.json +23 -5
  72. package/src/components/ams/mark.tokens.json +4 -1
  73. package/src/components/ams/menu.deprecated.tokens.json +12 -8
  74. package/src/components/ams/menu.tokens.json +119 -21
  75. package/src/components/ams/ordered-list.tokens.json +110 -22
  76. package/src/components/ams/page-footer.tokens.json +98 -18
  77. package/src/components/ams/page-header.compact.tokens.json +19 -3
  78. package/src/components/ams/page-header.tokens.json +214 -34
  79. package/src/components/ams/page-heading.deprecated.tokens.json +38 -8
  80. package/src/components/ams/page.tokens.json +24 -5
  81. package/src/components/ams/pagination.tokens.json +70 -14
  82. package/src/components/ams/paragraph.tokens.json +55 -11
  83. package/src/components/ams/password-input.tokens.json +92 -19
  84. package/src/components/ams/progress-list.tokens.json +372 -0
  85. package/src/components/ams/radio.tokens.json +142 -33
  86. package/src/components/ams/row.tokens.json +35 -5
  87. package/src/components/ams/search-field.tokens.json +101 -22
  88. package/src/components/ams/select.tokens.json +97 -24
  89. package/src/components/ams/skip-link.tokens.json +53 -10
  90. package/src/components/ams/spotlight.tokens.json +28 -7
  91. package/src/components/ams/standalone-link.deprecated.tokens.json +16 -10
  92. package/src/components/ams/standalone-link.tokens.json +75 -16
  93. package/src/components/ams/switch.tokens.json +57 -12
  94. package/src/components/ams/table-of-contents.deprecated.tokens.json +16 -3
  95. package/src/components/ams/table-of-contents.tokens.json +80 -15
  96. package/src/components/ams/table.tokens.json +49 -10
  97. package/src/components/ams/tabs.tokens.json +130 -17
  98. package/src/components/ams/text-area.tokens.json +97 -20
  99. package/src/components/ams/text-input.tokens.json +90 -19
  100. package/src/components/ams/time-input.deprecated.tokens.json +14 -8
  101. package/src/components/ams/time-input.tokens.json +90 -25
  102. package/src/components/ams/unordered-list.tokens.json +112 -22
  103. package/style-dictionary/dimensionToString.js +25 -0
  104. package/style-dictionary/transforms/dtcg-dimension.js +30 -0
  105. package/style-dictionary/transforms/name-custom-camel.js +27 -0
  106. package/style-dictionary/transforms/name-custom-kebab.js +27 -0
  107. package/style-dictionary/transforms/shadow-dtcg-dimension-normalize.js +50 -0
package/dist/index.scss CHANGED
@@ -11,7 +11,7 @@ $ams-border-width-s: 0.0625rem;
11
11
  $ams-border-width-m: 0.125rem;
12
12
  $ams-border-width-l: 0.1875rem;
13
13
  $ams-border-width-xl: 0.25rem;
14
- $ams-color-interactive-secondary: #202020; // Use `currentColor` instead
14
+ $ams-color-interactive-secondary: #202020;
15
15
  $ams-color-interactive-contrast: #202020;
16
16
  $ams-color-interactive: #004699;
17
17
  $ams-color-interactive-disabled: #767676;
@@ -31,6 +31,9 @@ $ams-color-highlight-magenta: #e50082;
31
31
  $ams-color-highlight-orange: #ff9100;
32
32
  $ams-color-highlight-purple: #a00078;
33
33
  $ams-color-highlight-yellow: #ffe600;
34
+ $ams-color-progress-current: #00893c;
35
+ $ams-color-progress-completed: #00893c;
36
+ $ams-color-progress-upcoming: #767676;
34
37
  $ams-color-separator: #d1d1d1;
35
38
  $ams-color-text: #202020;
36
39
  $ams-color-text-inverse: #ffffff;
@@ -44,19 +47,19 @@ $ams-space-m: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
44
47
  $ams-space-l: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
45
48
  $ams-space-xl: clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem);
46
49
  $ams-space-2xl: clamp(3rem, 2.25rem + 3.75vw, 5.625rem);
47
- $ams-typography-heading-0-font-size: clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem); // Use Heading size 1 instead.
48
- $ams-typography-heading-0-line-height: 1.1; // Use Heading size 1 instead.
50
+ $ams-typography-heading-0-font-size: clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem);
51
+ $ams-typography-heading-0-line-height: 1.1;
49
52
  $ams-typography-heading-1-font-size: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
50
53
  $ams-typography-heading-1-line-height: 1.2;
51
54
  $ams-typography-heading-2-line-height: 1.3;
52
55
  $ams-typography-heading-3-line-height: 1.3;
53
56
  $ams-typography-heading-4-line-height: 1.4;
54
57
  $ams-typography-heading-5-line-height: 1.4;
55
- $ams-typography-heading-6-line-height: 1.4; // Use Heading size 5 instead.
58
+ $ams-typography-heading-6-line-height: 1.4;
56
59
  $ams-typography-heading-font-weight: 800;
57
60
  $ams-typography-heading-text-wrap: balance;
58
61
  $ams-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
59
- $ams-typography-hyphenate-limit-chars: 12 8 4;
62
+ $ams-typography-hyphenate-limit-chars: auto;
60
63
  $ams-typography-body-text-font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
61
64
  $ams-typography-body-text-font-weight: 400;
62
65
  $ams-typography-body-text-line-height: 1.8;
@@ -70,10 +73,10 @@ $ams-typography-body-text-x-large-line-height: 1.4;
70
73
  $ams-inputs-border-color: currentColor;
71
74
  $ams-inputs-border-style: solid;
72
75
  $ams-inputs-line-height: 1.4;
73
- $ams-links-text-decoration-thickness: 0.125rem; // 2px
74
- $ams-links-text-underline-offset: 0.15625rem; // 2.5px
75
- $ams-links-hover-text-decoration-thickness: 0.1875rem; // 3px
76
- $ams-links-hover-text-underline-offset: 0.09375rem; // 1.5px
76
+ $ams-links-text-decoration-thickness: 0.125rem;
77
+ $ams-links-text-underline-offset: 0.15625rem;
78
+ $ams-links-hover-text-decoration-thickness: 0.1875rem;
79
+ $ams-links-hover-text-underline-offset: 0.09375rem;
77
80
  $ams-links-subtle-text-decoration-line: none;
78
81
  $ams-links-subtle-hover-text-decoration-line: underline;
79
82
  $ams-accordion-button-padding-inline: 0;
@@ -91,16 +94,19 @@ $ams-button-tertiary-border-color: transparent;
91
94
  $ams-button-tertiary-hover-border-color: currentColor;
92
95
  $ams-call-to-action-link-background-color: #00893c;
93
96
  $ams-call-to-action-link-hover-background-color: #10552b;
94
- $ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); // Use the token with ‘calendar’ spelled correctly instead
95
97
  $ams-date-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
96
- $ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); // Use the token with ‘calendar’ spelled correctly instead
98
+ $ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
99
+ $ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
97
100
  $ams-date-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
98
- $ams-date-input-calender-picker-indicator-background-image: 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>"); // Use the token with ‘calendar’ spelled correctly instead
101
+ $ams-date-input-calender-picker-indicator-background-image: 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>");
99
102
  $ams-date-input-calendar-picker-indicator-background-image: 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>");
103
+ $ams-description-list-description-padding-inline-start: 0;
100
104
  $ams-description-list-narrow-grid-template-columns: 1fr 4fr;
101
105
  $ams-description-list-medium-grid-template-columns: 1fr 2fr;
102
106
  $ams-description-list-wide-grid-template-columns: 1fr 1fr;
107
+ $ams-dialog-border-radius: initial;
103
108
  $ams-dialog-border-style: solid;
109
+ $ams-dialog-box-shadow: initial;
104
110
  $ams-dialog-max-inline-size: 48rem;
105
111
  $ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
106
112
  $ams-dialog-body-padding-block: 0;
@@ -123,15 +129,27 @@ $ams-logo-emblem-color: #ec0000;
123
129
  $ams-logo-title-color: #ec0000;
124
130
  $ams-menu-wide-max-inline-size: 8rem;
125
131
  $ams-ordered-list-list-style-type: decimal;
126
- $ams-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
127
- $ams-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
132
+ $ams-ordered-list-item-margin-inline-start: 2.25rem;
133
+ $ams-ordered-list-item-padding-inline-start: 0.25rem;
128
134
  $ams-ordered-list-ordered-list-list-style-type: lower-alpha;
129
- $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; // Indent less than the parent to start-align the child’s marker with the parent text.
130
- $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
135
+ $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem;
136
+ $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem;
131
137
  $ams-page-footer-spotlight-background-color: #004699;
132
138
  $ams-page-max-inline-size: 90rem;
133
139
  $ams-page-with-menu-max-inline-size: 120rem;
134
140
  $ams-paragraph-large-text-wrap: balance;
141
+ $ams-progress-list-step-marker-shape-block-size: 1.5rem;
142
+ $ams-progress-list-step-marker-shape-border-style: solid;
143
+ $ams-progress-list-step-marker-shape-outline-style: solid;
144
+ $ams-progress-list-step-connector-border-inline-style: dashed;
145
+ $ams-progress-list-step-connector-border-inline-width: 1px;
146
+ $ams-progress-list-step-completed-connector-border-inline-style: solid;
147
+ $ams-progress-list-substeps-step-marker-shape-block-size: 0.75rem;
148
+ $ams-progress-list-substeps-step-marker-shape-border-style: solid;
149
+ $ams-progress-list-substeps-step-marker-shape-outline-style: solid;
150
+ $ams-progress-list-substeps-step-connector-border-inline-style: dashed;
151
+ $ams-progress-list-substeps-step-connector-border-inline-width: 1px;
152
+ $ams-progress-list-substeps-step-completed-connector-border-inline-style: solid;
135
153
  $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>");
136
154
  $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>");
137
155
  $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='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -140,23 +158,23 @@ $ams-switch-background-color: #767676;
140
158
  $ams-switch-inline-size: 3.5rem;
141
159
  $ams-switch-thumb-block-size: 1.75rem;
142
160
  $ams-switch-thumb-inline-size: 1.75rem;
143
- $ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); // Use the token with ‘calendar’ spelled correctly instead
144
161
  $ams-time-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
145
- $ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); // Use the token with ‘calendar’ spelled correctly instead
162
+ $ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
163
+ $ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
146
164
  $ams-time-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
147
- $ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); // Use the token with ‘calendar’ spelled correctly instead
165
+ $ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
148
166
  $ams-time-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
149
167
  $ams-unordered-list-list-style-type: '\2022';
150
- $ams-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
151
- $ams-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
168
+ $ams-unordered-list-item-margin-inline-start: 1.625rem;
169
+ $ams-unordered-list-item-padding-inline-start: 0.875rem;
152
170
  $ams-unordered-list-unordered-list-list-style-type: '\2013';
153
- $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.
154
- $ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
171
+ $ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem;
172
+ $ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem;
155
173
  $ams-typography-heading-2-font-size: $ams-typography-body-text-x-large-font-size;
156
174
  $ams-typography-heading-3-font-size: $ams-typography-body-text-large-font-size;
157
175
  $ams-typography-heading-4-font-size: $ams-typography-body-text-font-size;
158
176
  $ams-typography-heading-5-font-size: $ams-typography-body-text-small-font-size;
159
- $ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size; // Use Heading size 5 instead.
177
+ $ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size;
160
178
  $ams-inputs-background-color: $ams-color-background;
161
179
  $ams-inputs-border-width: $ams-border-width-m;
162
180
  $ams-inputs-color: $ams-color-text;
@@ -167,10 +185,10 @@ $ams-inputs-outline-offset: $ams-focus-outline-offset;
167
185
  $ams-inputs-padding-block: $ams-space-s;
168
186
  $ams-inputs-padding-inline: $ams-space-m;
169
187
  $ams-inputs-disabled-color: $ams-color-interactive-disabled;
170
- $ams-inputs-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
188
+ $ams-inputs-hover-box-shadow: inset 0rem 0rem 0rem $ams-border-width-s currentColor;
171
189
  $ams-inputs-invalid-border-color: $ams-color-interactive-invalid;
172
190
  $ams-inputs-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
173
- $ams-inputs-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
191
+ $ams-inputs-invalid-hover-box-shadow: inset 0rem 0rem 0rem $ams-border-width-s $ams-color-interactive-invalid-hover;
174
192
  $ams-inputs-placeholder-color: $ams-color-text-secondary;
175
193
  $ams-links-color: $ams-color-interactive;
176
194
  $ams-links-hover-color: $ams-color-interactive-hover;
@@ -240,6 +258,7 @@ $ams-badge-color: $ams-color-text-inverse;
240
258
  $ams-badge-font-family: $ams-typography-font-family;
241
259
  $ams-badge-font-size: $ams-typography-body-text-font-size;
242
260
  $ams-badge-font-weight: $ams-typography-body-text-bold-font-weight;
261
+ $ams-badge-gap: $ams-space-xs;
243
262
  $ams-badge-line-height: $ams-typography-body-text-line-height;
244
263
  $ams-badge-padding-inline: $ams-space-xs;
245
264
  $ams-badge-azure-background-color: $ams-color-feedback-info;
@@ -296,7 +315,7 @@ $ams-button-secondary-background-color: $ams-color-background;
296
315
  $ams-button-secondary-color: $ams-color-interactive;
297
316
  $ams-button-secondary-disabled-border-color: $ams-color-interactive-disabled;
298
317
  $ams-button-secondary-disabled-color: $ams-color-interactive-disabled;
299
- $ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
318
+ $ams-button-secondary-hover-box-shadow: inset 0rem 0rem 0rem $ams-border-width-s currentColor;
300
319
  $ams-button-secondary-hover-color: $ams-color-interactive-hover;
301
320
  $ams-button-tertiary-color: $ams-color-interactive;
302
321
  $ams-button-tertiary-disabled-color: $ams-color-interactive-disabled;
@@ -328,7 +347,7 @@ $ams-character-count-font-size: $ams-typography-body-text-small-font-size;
328
347
  $ams-character-count-font-weight: $ams-typography-body-text-font-weight;
329
348
  $ams-character-count-line-height: $ams-typography-body-text-small-line-height;
330
349
  $ams-character-count-error-color: $ams-color-feedback-error;
331
- $ams-checkbox-hover-text-decoration-thickness: $ams-border-width-m; // Use `ams.checkbox.text-decoration-thickness` instead
350
+ $ams-checkbox-hover-text-decoration-thickness: $ams-border-width-m;
332
351
  $ams-checkbox-hover-color: $ams-color-interactive-hover;
333
352
  $ams-checkbox-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
334
353
  $ams-checkbox-rectangle-checked-disabled-hover-fill: $ams-color-interactive-disabled;
@@ -374,7 +393,7 @@ $ams-column-gap-medium: $ams-space-m;
374
393
  $ams-column-gap-large: $ams-space-l;
375
394
  $ams-column-gap-x-large: $ams-space-xl;
376
395
  $ams-date-input-disabled-cursor: $ams-cursor-disabled;
377
- $ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive; // Use the token with ‘calendar’ spelled correctly instead
396
+ $ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
378
397
  $ams-date-input-border-color: $ams-inputs-border-color;
379
398
  $ams-date-input-border-style: $ams-inputs-border-style;
380
399
  $ams-date-input-line-height: $ams-inputs-line-height;
@@ -387,8 +406,10 @@ $ams-description-list-line-height: $ams-typography-body-text-line-height;
387
406
  $ams-description-list-row-gap: $ams-space-s;
388
407
  $ams-description-list-inverse-color: $ams-color-text-inverse;
389
408
  $ams-description-list-term-font-weight: $ams-typography-body-text-bold-font-weight;
409
+ $ams-description-list-term-margin-block-end: $ams-space-xs;
390
410
  $ams-description-list-description-font-weight: $ams-typography-body-text-font-weight;
391
- $ams-description-list-description-padding-inline-start: $ams-space-l;
411
+ $ams-description-list-description-margin-block-end: $ams-space-m;
412
+ $ams-description-list-section-margin-block-end: $ams-space-m;
392
413
  $ams-dialog-background-color: $ams-color-background;
393
414
  $ams-dialog-border-width: $ams-border-width-m;
394
415
  $ams-dialog-gap: $ams-space-m;
@@ -494,8 +515,8 @@ $ams-icon-button-inverse-hover-background-color: $ams-color-interactive-hover;
494
515
  $ams-icon-button-inverse-hover-color: $ams-color-interactive-inverse;
495
516
  $ams-icon-button-inverse-disabled-color: $ams-color-interactive-inverse;
496
517
  $ams-icon-button-inverse-disabled-background-color: $ams-color-interactive-disabled;
497
- $ams-icon-heading-0-font-size: $ams-typography-heading-0-font-size; // Deprecated. Use ‘heading 1’ instead.
498
- $ams-icon-heading-0-line-height: $ams-typography-heading-0-line-height; // Deprecated. Use ‘heading 1’ instead.
518
+ $ams-icon-heading-0-font-size: $ams-typography-heading-0-font-size;
519
+ $ams-icon-heading-0-line-height: $ams-typography-heading-0-line-height;
499
520
  $ams-icon-font-size: $ams-typography-body-text-font-size;
500
521
  $ams-icon-line-height: $ams-typography-body-text-line-height;
501
522
  $ams-icon-small-font-size: $ams-typography-body-text-small-font-size;
@@ -516,6 +537,7 @@ $ams-image-slider-scroller-outline-offset: $ams-focus-outline-offset;
516
537
  $ams-image-slider-thumbnails-gap: $ams-space-xs;
517
538
  $ams-image-slider-thumbnails-thumbnail-cursor: $ams-cursor-interactive;
518
539
  $ams-image-slider-thumbnails-thumbnail-outline-offset: $ams-focus-outline-offset;
540
+ $ams-image-slider-figure-margin-block-end: $ams-space-m;
519
541
  $ams-image-aspect-ratio: $ams-aspect-ratio-16-9;
520
542
  $ams-invalid-form-alert-outline-offset: $ams-focus-outline-offset;
521
543
  $ams-label-color: $ams-color-text;
@@ -598,8 +620,13 @@ $ams-page-header-brand-name-font-weight: $ams-typography-heading-font-weight;
598
620
  $ams-page-header-brand-name-line-height: $ams-typography-heading-3-line-height;
599
621
  $ams-page-header-brand-name-text-wrap: $ams-typography-heading-text-wrap;
600
622
  $ams-page-header-mega-menu-padding-block: $ams-space-l;
623
+ $ams-page-header-mega-menu-button-background-color: $ams-color-interactive;
624
+ $ams-page-header-mega-menu-button-color: $ams-color-text-inverse;
601
625
  $ams-page-header-mega-menu-button-cursor: $ams-cursor-interactive;
602
626
  $ams-page-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
627
+ $ams-page-header-mega-menu-button-padding-inline: $ams-space-s;
628
+ $ams-page-header-mega-menu-button-hover-background-color: $ams-color-interactive-hover;
629
+ $ams-page-header-mega-menu-button-hover-color: $ams-color-text-inverse;
603
630
  $ams-page-header-menu-column-gap: $ams-space-l;
604
631
  $ams-page-header-menu-row-gap: $ams-space-xs;
605
632
  $ams-page-header-menu-item-column-gap: $ams-space-xs;
@@ -650,6 +677,46 @@ $ams-password-input-border-color: $ams-inputs-border-color;
650
677
  $ams-password-input-border-style: $ams-inputs-border-style;
651
678
  $ams-password-input-line-height: $ams-inputs-line-height;
652
679
  $ams-password-input-disabled-cursor: $ams-cursor-disabled;
680
+ $ams-progress-list-heading-2-step-marker-margin-block-start: calc(($ams-typography-heading-2-line-height * $ams-typography-heading-2-font-size) / 2);
681
+ $ams-progress-list-heading-3-step-marker-margin-block-start: calc(($ams-typography-heading-3-line-height * $ams-typography-heading-3-font-size) / 2);
682
+ $ams-progress-list-heading-4-step-marker-margin-block-start: calc(($ams-typography-heading-4-line-height * $ams-typography-heading-4-font-size) / 2);
683
+ $ams-progress-list-step-gap: $ams-space-m;
684
+ $ams-progress-list-step-medium-gap: $ams-space-l;
685
+ $ams-progress-list-step-marker-shape-background-color: $ams-color-background;
686
+ $ams-progress-list-step-marker-shape-border-color: $ams-color-progress-upcoming;
687
+ $ams-progress-list-step-marker-shape-border-width: $ams-border-width-m;
688
+ $ams-progress-list-step-marker-shape-outline-color: $ams-color-background;
689
+ $ams-progress-list-step-marker-shape-outline-width: $ams-border-width-m;
690
+ $ams-progress-list-step-connector-border-inline-color: $ams-color-progress-upcoming;
691
+ $ams-progress-list-step-heading-margin-block-end: $ams-space-s;
692
+ $ams-progress-list-step-content-margin-block-end: $ams-space-l;
693
+ $ams-progress-list-step-completed-marker-shape-background-color: $ams-color-progress-completed;
694
+ $ams-progress-list-step-completed-marker-shape-border-color: $ams-color-progress-completed;
695
+ $ams-progress-list-step-completed-connector-border-inline-color: $ams-color-progress-completed;
696
+ $ams-progress-list-step-current-marker-shape-background-color: $ams-color-progress-current;
697
+ $ams-progress-list-step-current-marker-shape-border-color: $ams-color-progress-current;
698
+ $ams-progress-list-step-current-connector-border-inline-color: $ams-color-progress-current;
699
+ $ams-progress-list-substeps-padding-block-start: $ams-space-m;
700
+ $ams-progress-list-substeps-step-indicator-margin-inline-end: $ams-space-m;
701
+ $ams-progress-list-substeps-step-indicator-medium-margin-inline-end: $ams-space-l;
702
+ $ams-progress-list-substeps-step-marker-block-size: calc($ams-typography-body-text-font-size * $ams-typography-body-text-line-height);
703
+ $ams-progress-list-substeps-step-marker-inline-size: $ams-progress-list-step-marker-shape-block-size;
704
+ $ams-progress-list-substeps-step-marker-shape-background-color: $ams-color-background;
705
+ $ams-progress-list-substeps-step-marker-shape-border-color: $ams-color-progress-upcoming;
706
+ $ams-progress-list-substeps-step-marker-shape-border-width: $ams-border-width-m;
707
+ $ams-progress-list-substeps-step-marker-shape-outline-color: $ams-color-background;
708
+ $ams-progress-list-substeps-step-marker-shape-outline-width: $ams-border-width-m;
709
+ $ams-progress-list-substeps-step-connector-background-color: $ams-color-background;
710
+ $ams-progress-list-substeps-step-connector-border-inline-color: $ams-color-progress-upcoming;
711
+ $ams-progress-list-substeps-step-connector-margin-block-start: calc($ams-typography-body-text-font-size * $ams-typography-body-text-line-height / 2);
712
+ $ams-progress-list-substeps-step-connector-last-child-border-inline-color: $ams-color-background;
713
+ $ams-progress-list-substeps-step-content-margin-block-end: $ams-space-m;
714
+ $ams-progress-list-substeps-step-completed-marker-shape-background-color: $ams-color-progress-completed;
715
+ $ams-progress-list-substeps-step-completed-marker-shape-border-color: $ams-color-progress-completed;
716
+ $ams-progress-list-substeps-step-completed-connector-border-inline-color: $ams-color-progress-completed;
717
+ $ams-progress-list-substeps-step-current-marker-shape-background-color: $ams-color-progress-current;
718
+ $ams-progress-list-substeps-step-current-marker-shape-border-color: $ams-color-progress-current;
719
+ $ams-progress-list-substeps-last-child-content-margin-block-end: $ams-space-l;
653
720
  $ams-radio-color: $ams-color-text;
654
721
  $ams-radio-cursor: $ams-cursor-interactive;
655
722
  $ams-radio-font-family: $ams-typography-font-family;
@@ -716,12 +783,12 @@ $ams-spotlight-lime-background-color: $ams-color-highlight-lime;
716
783
  $ams-spotlight-magenta-background-color: $ams-color-highlight-magenta;
717
784
  $ams-spotlight-orange-background-color: $ams-color-highlight-orange;
718
785
  $ams-spotlight-yellow-background-color: $ams-color-highlight-yellow;
719
- $ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness; // Use `ams.standalone-link.text-decoration-thickness` instead
720
- $ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset; // Use `ams.standalone-link.text-underline-offset` instead
786
+ $ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
787
+ $ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
721
788
  $ams-standalone-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
722
- $ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line; // Use `ams.standalone-link.text-decoration-line` instead
723
- $ams-standalone-link-with-icon-text-decoration-thickness: $ams-links-text-decoration-thickness; // Use `ams.standalone-link.text-decoration-thickness` instead
724
- $ams-standalone-link-with-icon-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line; // Use `ams.standalone-link.hover.text-decoration-line` instead
789
+ $ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line;
790
+ $ams-standalone-link-with-icon-text-decoration-thickness: $ams-links-text-decoration-thickness;
791
+ $ams-standalone-link-with-icon-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
725
792
  $ams-standalone-link-column-gap: $ams-space-s;
726
793
  $ams-standalone-link-font-family: $ams-typography-font-family;
727
794
  $ams-standalone-link-font-size: $ams-typography-body-text-font-size;
@@ -765,7 +832,7 @@ $ams-table-cell-padding-block: $ams-space-s;
765
832
  $ams-table-cell-padding-inline: $ams-space-m;
766
833
  $ams-table-header-cell-font-weight: $ams-typography-body-text-bold-font-weight;
767
834
  $ams-tabs-gap: $ams-space-m;
768
- $ams-tabs-list-box-shadow: inset 0 calc($ams-border-width-m * -1) $ams-color-separator;
835
+ $ams-tabs-list-box-shadow: inset 0rem calc($ams-border-width-m * -1) 0rem 0rem $ams-color-separator;
769
836
  $ams-tabs-button-color: $ams-color-interactive;
770
837
  $ams-tabs-button-cursor: $ams-cursor-interactive;
771
838
  $ams-tabs-button-font-family: $ams-typography-font-family;
@@ -775,9 +842,9 @@ $ams-tabs-button-line-height: $ams-typography-body-text-line-height;
775
842
  $ams-tabs-button-outline-offset: calc($ams-focus-outline-offset * -1);
776
843
  $ams-tabs-button-padding-block: $ams-space-s;
777
844
  $ams-tabs-button-padding-inline: $ams-space-m;
778
- $ams-tabs-button-hover-box-shadow: inset 0 calc($ams-border-width-m * -1);
845
+ $ams-tabs-button-hover-box-shadow: inset 0rem calc($ams-border-width-m * -1) 0rem 0rem currentColor;
779
846
  $ams-tabs-button-hover-color: $ams-color-interactive-hover;
780
- $ams-tabs-button-selected-box-shadow: inset 0 calc($ams-border-width-xl * -1);
847
+ $ams-tabs-button-selected-box-shadow: inset 0rem calc($ams-border-width-xl * -1) 0rem 0rem currentColor;
781
848
  $ams-tabs-button-selected-font-weight: $ams-typography-body-text-bold-font-weight;
782
849
  $ams-tabs-button-disabled-color: $ams-color-interactive-disabled;
783
850
  $ams-tabs-button-disabled-cursor: $ams-cursor-disabled;
@@ -791,7 +858,7 @@ $ams-text-input-border-style: $ams-inputs-border-style;
791
858
  $ams-text-input-line-height: $ams-inputs-line-height;
792
859
  $ams-text-input-disabled-cursor: $ams-cursor-disabled;
793
860
  $ams-time-input-disabled-cursor: $ams-cursor-disabled;
794
- $ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive; // Use the token with ‘calendar’ spelled correctly instead
861
+ $ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
795
862
  $ams-time-input-border-color: $ams-inputs-border-color;
796
863
  $ams-time-input-border-style: $ams-inputs-border-style;
797
864
  $ams-time-input-line-height: $ams-inputs-line-height;
@@ -873,10 +940,10 @@ $ams-link-contrast-color: $ams-links-contrast-color;
873
940
  $ams-link-contrast-hover-color: $ams-links-contrast-hover-color;
874
941
  $ams-link-inverse-color: $ams-links-inverse-color;
875
942
  $ams-link-inverse-hover-color: $ams-links-inverse-hover-color;
876
- $ams-menu-link-contrast-color: $ams-links-contrast-color; // The menu has a dark background now, so this is no longer needed.
877
- $ams-menu-link-contrast-hover-color: $ams-links-contrast-hover-color; // The menu has a dark background now, so this is no longer needed.
878
- $ams-menu-link-inverse-color: $ams-links-inverse-color; // The menu has a dark background now, so this is no longer needed.
879
- $ams-menu-link-inverse-hover-color: $ams-links-inverse-hover-color; // The menu has a dark background now, so this is no longer needed.
943
+ $ams-menu-link-contrast-color: $ams-links-contrast-color;
944
+ $ams-menu-link-contrast-hover-color: $ams-links-contrast-hover-color;
945
+ $ams-menu-link-inverse-color: $ams-links-inverse-color;
946
+ $ams-menu-link-inverse-hover-color: $ams-links-inverse-hover-color;
880
947
  $ams-menu-link-color: $ams-links-inverse-color;
881
948
  $ams-menu-link-hover-color: $ams-links-inverse-hover-color;
882
949
  $ams-menu-wide-padding-block: calc($ams-logo-block-size + 2 * $ams-page-header-padding-block) $ams-space-m;
@@ -885,13 +952,14 @@ $ams-page-footer-menu-medium-padding-inline: $ams-grid-medium-padding-inline;
885
952
  $ams-page-footer-menu-wide-padding-inline: $ams-grid-wide-padding-inline;
886
953
  $ams-page-footer-menu-link-color: $ams-links-color;
887
954
  $ams-page-footer-menu-link-hover-color: $ams-links-hover-color;
888
- $ams-page-header-padding-inline: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Header and Grid line up
955
+ $ams-page-header-padding-inline: $ams-grid-padding-inline;
889
956
  $ams-page-header-medium-padding-inline: $ams-grid-medium-padding-inline;
890
957
  $ams-page-header-wide-padding-inline: $ams-grid-wide-padding-inline;
891
958
  $ams-page-header-brand-name-font-size: $ams-typography-heading-3-font-size;
892
959
  $ams-page-header-menu-item-color: $ams-links-color;
893
960
  $ams-page-header-menu-item-hover-color: $ams-links-hover-color;
894
- $ams-page-with-menu-area-skip-link-margin-inline-end: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
961
+ $ams-page-header-menu-link-color: $ams-links-color;
962
+ $ams-page-with-menu-area-skip-link-margin-inline-end: $ams-grid-padding-inline;
895
963
  $ams-pagination-link-color: $ams-links-color;
896
964
  $ams-pagination-link-hover-color: $ams-links-hover-color;
897
965
  $ams-password-input-background-color: $ams-inputs-background-color;
@@ -909,6 +977,9 @@ $ams-password-input-invalid-border-color: $ams-inputs-invalid-border-color;
909
977
  $ams-password-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
910
978
  $ams-password-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
911
979
  $ams-password-input-placeholder-color: $ams-inputs-placeholder-color;
980
+ $ams-progress-list-heading-2-step-marker-block-size: calc($ams-typography-heading-2-font-size * $ams-typography-heading-2-line-height);
981
+ $ams-progress-list-heading-3-step-marker-block-size: calc($ams-typography-heading-3-font-size * $ams-typography-heading-3-line-height);
982
+ $ams-progress-list-heading-4-step-marker-block-size: calc($ams-typography-heading-4-font-size * $ams-typography-heading-4-line-height);
912
983
  $ams-radio-icon-container-block-size: calc($ams-radio-font-size * $ams-radio-line-height);
913
984
  $ams-radio-icon-container-inline-size: $ams-radio-font-size;
914
985
  $ams-search-field-input-background-color: $ams-inputs-background-color;