@amsterdam/design-system-tokens 0.7.0 → 0.8.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 (37) hide show
  1. package/CHANGELOG.md +40 -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 +176 -69
  8. package/dist/index.d.ts +209 -24
  9. package/dist/index.json +243 -58
  10. package/dist/index.mjs +160 -53
  11. package/dist/index.scss +176 -69
  12. package/dist/index.theme.css +176 -69
  13. package/package.json +1 -1
  14. package/src/brand/ams/border.tokens.json +12 -0
  15. package/src/common/ams/link-appearance.tokens.json +2 -2
  16. package/src/components/ams/accordion.tokens.json +6 -4
  17. package/src/components/ams/alert.tokens.json +1 -1
  18. package/src/components/ams/avatar.tokens.json +49 -0
  19. package/src/components/ams/button.tokens.json +11 -8
  20. package/src/components/ams/checkbox.tokens.json +6 -2
  21. package/src/components/ams/date-input.tokens.json +45 -0
  22. package/src/components/ams/description-list.tokens.json +20 -0
  23. package/src/components/ams/dialog.tokens.json +0 -7
  24. package/src/components/ams/form-field-character-counter.tokens.json +14 -0
  25. package/src/components/ams/{form-label.tokens.json → label.tokens.json} +1 -1
  26. package/src/components/ams/page-menu.tokens.json +2 -2
  27. package/src/components/ams/radio.tokens.json +4 -1
  28. package/src/components/ams/screen.tokens.json +1 -0
  29. package/src/components/ams/search-field.tokens.json +7 -6
  30. package/src/components/ams/select.tokens.json +41 -0
  31. package/src/components/ams/skip-link.tokens.json +1 -1
  32. package/src/components/ams/table.tokens.json +2 -2
  33. package/src/components/ams/tabs.tokens.json +3 -4
  34. package/src/components/ams/text-area.tokens.json +9 -8
  35. package/src/components/ams/text-input.tokens.json +8 -7
  36. package/src/components/ams/time-input.tokens.json +45 -0
  37. package/src/common/ams/border.tokens.json +0 -9
package/dist/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 12 Mar 2024 14:50:53 GMT
3
+ * Generated on Mon, 22 Apr 2024 09:30:48 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -11,16 +11,19 @@
11
11
  --ams-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
12
12
  --ams-unordered-list-list-style-type: '\2022';
13
13
  --ams-unordered-list-gap: 0.75rem;
14
+ --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='%23102E62'><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>");
15
+ --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='%23BEBEBE'><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>");
16
+ --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>");
14
17
  --ams-text-area-padding-inline: 1rem;
15
18
  --ams-text-area-padding-block: 0.5rem;
16
19
  --ams-tabs-button-padding-inline: 1rem;
17
20
  --ams-tabs-button-padding-block: .5rem;
18
21
  --ams-tabs-button-outline-offset: -0.25rem;
19
- --ams-tabs-button-border: none;
20
- --ams-tabs-button-background-color: transparent;
21
22
  --ams-switch-thumb-height: 1.75rem;
22
23
  --ams-switch-thumb-width: 1.75rem;
23
24
  --ams-switch-width: 3.5rem;
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
+ --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>");
24
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>");
25
28
  --ams-screen-x-wide-max-width: 132rem;
26
29
  --ams-screen-wide-max-width: 100rem;
@@ -31,8 +34,6 @@
31
34
  --ams-radio-circle-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
32
35
  --ams-radio-circle-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
33
36
  --ams-page-menu-item-gap: 0.5rem;
34
- --ams-page-menu-row-gap: 0.5rem;
35
- --ams-page-menu-column-gap: 2.5rem;
36
37
  --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
37
38
  --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. */
38
39
  --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
@@ -61,29 +62,30 @@
61
62
  --ams-dialog-form-gap: 1.5rem;
62
63
  --ams-dialog-max-inline-size: min(87.69vw, 45rem);
63
64
  --ams-dialog-border: 0;
65
+ --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='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
66
+ --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='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
67
+ --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>");
64
68
  --ams-checkbox-checkmark-indeterminate-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E");
65
69
  --ams-checkbox-checkmark-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E");
66
70
  --ams-button-tertiary-disabled-background-color: transparent;
67
71
  --ams-button-tertiary-background-color: transparent;
68
72
  --ams-button-gap: 1rem;
69
73
  --ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
74
+ --ams-avatar-padding-inline: 0.25rem;
75
+ --ams-avatar-padding-block: 0.25rem;
70
76
  --ams-alert-gap: 1rem;
71
77
  --ams-alert-border-style: solid;
72
- --ams-alert-border-width: 4px;
78
+ --ams-accordion-panel-padding-inline: 0;
79
+ --ams-accordion-button-padding-inline: 0;
73
80
  --ams-link-appearance-subtle-hover-text-decoration-line: underline;
74
81
  --ams-link-appearance-subtle-text-decoration-line: none;
75
82
  --ams-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
76
- --ams-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
77
83
  --ams-link-appearance-regular-text-decoration-line: underline;
78
84
  --ams-link-appearance-text-underline-offset: 0.375rem;
79
- --ams-link-appearance-text-decoration-thickness: 0.125rem;
80
85
  --ams-hyphenation-overflow-wrap: break-word;
81
86
  --ams-hyphenation-hyphens: auto;
82
87
  --ams-hyphenation-hyphenate-limit-chars: 12 8 4;
83
88
  --ams-focus-outline-offset: 2px;
84
- --ams-border-width-lg: 3px;
85
- --ams-border-width-md: 2px;
86
- --ams-border-width-sm: 1px;
87
89
  --ams-action-submit-cursor: pointer;
88
90
  --ams-action-navigate-cursor: pointer;
89
91
  --ams-action-inert-cursor: default;
@@ -143,6 +145,10 @@
143
145
  --ams-color-primary-blue: #004699;
144
146
  --ams-color-primary-white: #FFFFFF;
145
147
  --ams-color-primary-black: #000000;
148
+ --ams-border-width-xl: 0.25rem;
149
+ --ams-border-width-lg: 0.1875rem;
150
+ --ams-border-width-md: 0.125rem;
151
+ --ams-border-width-sm: 0.0625rem;
146
152
  --ams-unordered-list-line-height: var(--ams-text-level-5-line-height);
147
153
  --ams-unordered-list-inverse-color: var(--ams-color-primary-white);
148
154
  --ams-unordered-list-font-weight: var(--ams-text-font-weight-normal);
@@ -153,7 +159,6 @@
153
159
  --ams-top-task-link-label-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
154
160
  --ams-top-task-link-label-hover-color: var(--ams-color-dark-blue);
155
161
  --ams-top-task-link-label-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
156
- --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
157
162
  --ams-top-task-link-label-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
158
163
  --ams-top-task-link-label-line-height: var(--ams-text-level-4-line-height);
159
164
  --ams-top-task-link-label-font-weight: var(--ams-text-font-weight-bold);
@@ -164,38 +169,56 @@
164
169
  --ams-top-task-link-description-font-size: var(--ams-text-level-6-font-size);
165
170
  --ams-top-task-link-description-font-family: var(--ams-text-font-family);
166
171
  --ams-top-task-link-description-color: var(--ams-color-primary-black);
172
+ --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
173
+ --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
174
+ --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
175
+ --ams-time-input-disabled-color: var(--ams-color-neutral-grey2);
176
+ --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
177
+ --ams-time-input-disabled-background-color: var(--ams-color-primary-white);
178
+ --ams-time-input-padding-inline: var(--ams-space-inside-md);
179
+ --ams-time-input-padding-block: var(--ams-space-inside-xs);
180
+ --ams-time-input-outline-offset: var(--ams-focus-outline-offset);
181
+ --ams-time-input-line-height: var(--ams-text-level-5-line-height);
182
+ --ams-time-input-font-weight: var(--ams-text-font-weight-normal);
183
+ --ams-time-input-font-size: var(--ams-text-level-5-font-size);
184
+ --ams-time-input-font-family: var(--ams-text-font-family);
185
+ --ams-time-input-color: var(--ams-color-primary-black);
186
+ --ams-time-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
187
+ --ams-time-input-background-color: var(--ams-color-primary-white);
167
188
  --ams-text-input-placeholder-color: var(--ams-color-neutral-grey3);
168
- --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-red);
169
- --ams-text-input-invalid-box-shadow: inset 0 0 0 1px var(--ams-color-primary-red);
170
- --ams-text-input-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
189
+ --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
190
+ --ams-text-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
191
+ --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
171
192
  --ams-text-input-disabled-color: var(--ams-color-neutral-grey2);
172
- --ams-text-input-disabled-box-shadow: inset 0 0 0 1px var(--ams-color-neutral-grey2);
193
+ --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
173
194
  --ams-text-input-disabled-background-color: var(--ams-color-primary-white);
174
195
  --ams-text-input-padding-inline: var(--ams-space-inside-md);
175
196
  --ams-text-input-padding-block: var(--ams-space-inside-xs);
176
197
  --ams-text-input-outline-offset: var(--ams-focus-outline-offset);
177
- --ams-text-input-line-height: var(--ams-text-level-6-line-height);
198
+ --ams-text-input-line-height: var(--ams-text-level-5-line-height);
178
199
  --ams-text-input-font-weight: var(--ams-text-font-weight-normal);
179
- --ams-text-input-font-size: var(--ams-text-level-6-font-size);
200
+ --ams-text-input-font-size: var(--ams-text-level-5-font-size);
180
201
  --ams-text-input-font-family: var(--ams-text-font-family);
181
202
  --ams-text-input-color: var(--ams-color-primary-black);
182
- --ams-text-input-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
203
+ --ams-text-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
204
+ --ams-text-input-background-color: var(--ams-color-primary-white);
183
205
  --ams-text-area-placeholder-color: var(--ams-color-neutral-grey3);
184
- --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-red);
185
- --ams-text-area-invalid-box-shadow: inset 0 0 0 1px var(--ams-color-primary-red);
186
- --ams-text-area-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
206
+ --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
207
+ --ams-text-area-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
208
+ --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
187
209
  --ams-text-area-disabled-cursor: var(--ams-action-disabled-cursor);
188
210
  --ams-text-area-disabled-color: var(--ams-color-neutral-grey2);
189
- --ams-text-area-disabled-box-shadow: inset 0 0 0 1px var(--ams-color-neutral-grey2);
211
+ --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
190
212
  --ams-text-area-disabled-background-color: var(--ams-color-primary-white);
191
213
  --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
192
- --ams-text-area-min-height: calc(var(--ams-text-level-6-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
193
- --ams-text-area-line-height: var(--ams-text-level-6-line-height);
214
+ --ams-text-area-min-height: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
215
+ --ams-text-area-line-height: var(--ams-text-level-5-line-height);
194
216
  --ams-text-area-font-weight: var(--ams-text-font-weight-normal);
195
- --ams-text-area-font-size: var(--ams-text-level-6-font-size);
217
+ --ams-text-area-font-size: var(--ams-text-level-5-font-size);
196
218
  --ams-text-area-font-family: var(--ams-text-font-family);
197
219
  --ams-text-area-color: var(--ams-color-primary-black);
198
- --ams-text-area-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
220
+ --ams-text-area-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
221
+ --ams-text-area-background-color: var(--ams-color-primary-white);
199
222
  --ams-tabs-button-disabled-cursor: var(--ams-action-disabled-cursor);
200
223
  --ams-tabs-button-disabled-color: var(--ams-color-neutral-grey2);
201
224
  --ams-tabs-button-selected-color: var(--ams-color-primary-white);
@@ -203,20 +226,21 @@
203
226
  --ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 var(--ams-color-dark-blue);
204
227
  --ams-tabs-button-hover-color: var(--ams-color-dark-blue);
205
228
  --ams-tabs-button-line-height: var(--ams-text-level-5-line-height);
206
- --ams-tabs-button-font-size: var(--ams-text-level-5-font-size);
207
229
  --ams-tabs-button-font-weight: var(--ams-text-font-weight-normal);
230
+ --ams-tabs-button-font-size: var(--ams-text-level-5-font-size);
208
231
  --ams-tabs-button-font-family: var(--ams-text-font-family);
209
232
  --ams-tabs-button-cursor: var(--ams-action-activate-cursor);
210
233
  --ams-tabs-button-color: var(--ams-color-primary-blue);
211
- --ams-tabs-list-border-bottom: .125rem solid var(--ams-color-primary-blue);
234
+ --ams-tabs-list-border-bottom: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
235
+ --ams-tabs-list-background-color: var(--ams-color-primary-white);
212
236
  --ams-table-header-cell-font-weight: var(--ams-text-font-weight-bold);
213
237
  --ams-table-cell-padding-inline: var(--ams-space-inside-md);
214
238
  --ams-table-cell-padding-block: var(--ams-space-inside-md);
215
- --ams-table-cell-border-bottom: 1px solid var(--ams-color-neutral-grey1);
239
+ --ams-table-cell-border-bottom: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
216
240
  --ams-table-caption-font-weight: var(--ams-text-font-weight-bold);
217
241
  --ams-table-line-height: var(--ams-text-level-5-line-height);
218
- --ams-table-font-size: var(--ams-text-level-5-font-size);
219
242
  --ams-table-font-weight: var(--ams-text-font-weight-normal);
243
+ --ams-table-font-size: var(--ams-text-level-5-font-size);
220
244
  --ams-table-font-family: var(--ams-text-font-family);
221
245
  --ams-table-color: var(--ams-color-primary-black);
222
246
  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
@@ -239,42 +263,64 @@
239
263
  --ams-skip-link-padding-block: var(--ams-space-inside-xs);
240
264
  --ams-skip-link-outline-offset: var(--ams-focus-outline-offset);
241
265
  --ams-skip-link-line-height: var(--ams-text-level-6-line-height);
242
- --ams-skip-link-font-size: var(--ams-text-level-6-font-size);
243
266
  --ams-skip-link-font-weight: var(--ams-text-font-weight-normal);
267
+ --ams-skip-link-font-size: var(--ams-text-level-6-font-size);
244
268
  --ams-skip-link-font-family: var(--ams-text-font-family);
245
269
  --ams-skip-link-color: var(--ams-color-primary-white);
246
270
  --ams-skip-link-background-color: var(--ams-color-primary-blue);
271
+ --ams-select-option-disabled-color: var(--ams-color-neutral-grey2);
272
+ --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
273
+ --ams-select-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
274
+ --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
275
+ --ams-select-disabled-color: var(--ams-color-neutral-grey2);
276
+ --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
277
+ --ams-select-padding-inline: var(--ams-space-inside-md) calc(2 * var(--ams-space-inside-md) + 1em);
278
+ --ams-select-padding-block: var(--ams-space-inside-xs);
279
+ --ams-select-outline-offset: var(--ams-focus-outline-offset);
280
+ --ams-select-line-height: var(--ams-text-level-5-line-height);
281
+ --ams-select-font-weight: var(--ams-text-font-weight-normal);
282
+ --ams-select-font-size: var(--ams-text-level-5-font-size);
283
+ --ams-select-font-family: var(--ams-text-font-family);
284
+ --ams-select-color: var(--ams-color-primary-black);
285
+ --ams-select-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
286
+ --ams-select-background-position: right var(--ams-space-inside-md) center;
287
+ --ams-select-background-color: var(--ams-color-primary-white);
247
288
  --ams-search-field-input-placeholder-color: var(--ams-color-neutral-grey3);
248
- --ams-search-field-input-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
249
- --ams-search-field-input-cancel-button-width: var(--ams-text-level-6-font-size);
250
- --ams-search-field-input-cancel-button-height: var(--ams-text-level-6-font-size);
289
+ --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);
251
292
  --ams-search-field-input-cancel-button-color: var(--ams-color-primary-blue);
252
293
  --ams-search-field-input-padding-inline: var(--ams-space-inside-md);
253
294
  --ams-search-field-input-padding-block: var(--ams-space-inside-xs);
254
295
  --ams-search-field-input-outline-offset: var(--ams-focus-outline-offset);
255
- --ams-search-field-input-line-height: var(--ams-text-level-6-line-height);
296
+ --ams-search-field-input-line-height: var(--ams-text-level-5-line-height);
256
297
  --ams-search-field-input-font-weight: var(--ams-text-font-weight-normal);
257
- --ams-search-field-input-font-size: var(--ams-text-level-6-font-size);
298
+ --ams-search-field-input-font-size: var(--ams-text-level-5-font-size);
258
299
  --ams-search-field-input-font-family: var(--ams-text-font-family);
259
300
  --ams-search-field-input-color: var(--ams-color-primary-black);
260
- --ams-search-field-input-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
301
+ --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
302
+ --ams-search-field-input-background-color: var(--ams-color-primary-white);
261
303
  --ams-search-field-button-padding-inline: var(--ams-space-inside-xs);
262
304
  --ams-search-field-button-padding-block: var(--ams-space-inside-xs);
263
305
  --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
264
306
  --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
265
307
  --ams-search-field-button-color: var(--ams-color-primary-white);
266
308
  --ams-search-field-button-background-color: var(--ams-color-primary-blue);
309
+ --ams-screen-background-color: var(--ams-color-primary-white);
267
310
  --ams-row-gap-xl: var(--ams-space-stack-xl);
268
311
  --ams-row-gap-lg: var(--ams-space-stack-lg);
269
312
  --ams-row-gap-md: var(--ams-space-stack-md);
270
313
  --ams-row-gap-sm: var(--ams-space-stack-sm);
271
314
  --ams-row-gap-xs: var(--ams-space-stack-xs);
315
+ --ams-radio-hover-text-decoration-thickness: var(--ams-border-width-md);
272
316
  --ams-radio-hover-color: var(--ams-color-dark-blue);
273
317
  --ams-radio-disabled-color: var(--ams-color-neutral-grey3);
274
318
  --ams-radio-circle-invalid-hover-border-color: var(--ams-color-primary-red);
275
319
  --ams-radio-circle-invalid-border-color: var(--ams-color-primary-red);
276
320
  --ams-radio-circle-hover-border-color: var(--ams-color-dark-blue);
321
+ --ams-radio-circle-disabled-border-width: var(--ams-border-width-md);
277
322
  --ams-radio-circle-disabled-border-color: var(--ams-color-neutral-grey3);
323
+ --ams-radio-circle-border-width: var(--ams-border-width-md);
278
324
  --ams-radio-circle-border-color: var(--ams-color-primary-blue);
279
325
  --ams-radio-outline-offset: var(--ams-focus-outline-offset);
280
326
  --ams-radio-line-height: var(--ams-text-level-5-line-height);
@@ -295,7 +341,6 @@
295
341
  --ams-pagination-button-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
296
342
  --ams-pagination-button-current-font-weight: var(--ams-text-font-weight-bold);
297
343
  --ams-pagination-button-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
298
- --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
299
344
  --ams-pagination-button-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
300
345
  --ams-pagination-button-padding-inline: var(--ams-space-inside-sm);
301
346
  --ams-pagination-button-outline-offset: var(--ams-focus-outline-offset);
@@ -305,13 +350,14 @@
305
350
  --ams-pagination-font-family: var(--ams-text-font-family);
306
351
  --ams-page-menu-item-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
307
352
  --ams-page-menu-item-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
308
- --ams-page-menu-item-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
309
353
  --ams-page-menu-item-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
310
354
  --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
311
355
  --ams-page-menu-item-line-height: var(--ams-text-level-6-line-height);
312
356
  --ams-page-menu-item-font-weight: var(--ams-text-font-weight-normal);
313
357
  --ams-page-menu-item-font-size: var(--ams-text-level-6-font-size);
314
358
  --ams-page-menu-item-font-family: var(--ams-text-font-family);
359
+ --ams-page-menu-row-gap: var(--ams-space-grid-xs);
360
+ --ams-page-menu-column-gap: var(--ams-space-grid-md);
315
361
  --ams-page-heading-line-height: var(--ams-text-level-0-font-size);
316
362
  --ams-page-heading-inverse-color: var(--ams-color-primary-white);
317
363
  --ams-page-heading-font-weight: var(--ams-text-font-weight-bold);
@@ -336,17 +382,13 @@
336
382
  --ams-logo-title-color: var(--ams-color-primary-red);
337
383
  --ams-logo-emblem-color: var(--ams-color-primary-red);
338
384
  --ams-link-standalone-hover-text-underline-offset: var(--ams-link-appearance-regular-hover-text-underline-offset);
339
- --ams-link-standalone-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
340
385
  --ams-link-standalone-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
341
- --ams-link-standalone-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
342
386
  --ams-link-standalone-text-decoration-line: var(--ams-link-appearance-regular-text-decoration-line);
343
387
  --ams-link-standalone-line-height: var(--ams-text-level-5-line-height);
344
388
  --ams-link-standalone-font-size: var(--ams-text-level-5-font-size);
345
389
  --ams-link-inline-visited-color: var(--ams-color-purple);
346
390
  --ams-link-inline-hover-text-underline-offset: var(--ams-link-appearance-regular-hover-text-underline-offset);
347
- --ams-link-inline-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
348
391
  --ams-link-inline-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
349
- --ams-link-inline-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
350
392
  --ams-link-inline-text-decoration-line: var(--ams-link-appearance-regular-text-decoration-line);
351
393
  --ams-link-outline-offset: var(--ams-focus-outline-offset);
352
394
  --ams-link-font-weight: var(--ams-text-font-weight-normal);
@@ -359,11 +401,15 @@
359
401
  --ams-link-list-link-small-line-height: var(--ams-text-level-6-line-height);
360
402
  --ams-link-list-link-small-font-size: var(--ams-text-level-6-font-size);
361
403
  --ams-link-list-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
362
- --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
363
404
  --ams-link-list-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
364
405
  --ams-link-list-link-outline-offset: var(--ams-focus-outline-offset);
365
406
  --ams-link-list-link-font-weight: var(--ams-text-font-weight-normal);
366
407
  --ams-link-list-link-font-family: var(--ams-text-font-family);
408
+ --ams-label-line-height: var(--ams-text-level-4-line-height);
409
+ --ams-label-font-weight: var(--ams-text-font-weight-bold);
410
+ --ams-label-font-size: var(--ams-text-level-4-font-size);
411
+ --ams-label-font-family: var(--ams-text-font-family);
412
+ --ams-label-color: var(--ams-color-primary-black);
367
413
  --ams-icon-size-6-line-height: var(--ams-text-level-6-line-height);
368
414
  --ams-icon-size-6-font-size: var(--ams-text-level-6-font-size);
369
415
  --ams-icon-size-5-line-height: var(--ams-text-level-5-line-height);
@@ -417,27 +463,50 @@
417
463
  --ams-gap-md: var(--ams-space-grid-md);
418
464
  --ams-gap-sm: var(--ams-space-grid-sm);
419
465
  --ams-gap-xs: var(--ams-space-grid-xs);
420
- --ams-form-label-line-height: var(--ams-text-level-4-line-height);
421
- --ams-form-label-font-weight: var(--ams-text-font-weight-bold);
422
- --ams-form-label-font-size: var(--ams-text-level-4-font-size);
423
- --ams-form-label-font-family: var(--ams-text-font-family);
424
- --ams-form-label-color: var(--ams-color-primary-black);
466
+ --ams-form-field-character-counter-error-color: var(--ams-color-primary-red);
467
+ --ams-form-field-character-counter-line-height: var(--ams-text-level-6-line-height);
468
+ --ams-form-field-character-counter-font-weight: var(--ams-text-font-weight-normal);
469
+ --ams-form-field-character-counter-font-size: var(--ams-text-level-6-font-size);
470
+ --ams-form-field-character-counter-font-family: var(--ams-text-font-family);
471
+ --ams-form-field-character-counter-color: var(--ams-color-primary-black);
425
472
  --ams-fieldset-legend-line-height: var(--ams-text-level-4-line-height);
426
473
  --ams-fieldset-legend-font-weight: var(--ams-text-font-weight-bold);
427
474
  --ams-fieldset-legend-font-size: var(--ams-text-level-4-font-size);
428
475
  --ams-fieldset-legend-font-family: var(--ams-text-font-family);
429
476
  --ams-fieldset-legend-color: var(--ams-color-primary-black);
430
- --ams-dialog-title-line-height: var(--ams-text-level-5-line-height);
431
- --ams-dialog-title-font-weight: var(--ams-text-font-weight-bold);
432
- --ams-dialog-title-font-size: var(--ams-text-level-5-font-size);
433
- --ams-dialog-title-font-family: var(--ams-text-font-family);
434
- --ams-dialog-title-color: var(--ams-color-primary-black);
435
477
  --ams-dialog-background-color: var(--ams-color-primary-white);
478
+ --ams-description-list-details-padding-inline-start: var(--ams-space-inside-xl);
479
+ --ams-description-list-details-font-weight: var(--ams-text-font-weight-bold);
480
+ --ams-description-list-row-gap: var(--ams-space-stack-md);
481
+ --ams-description-list-line-height: var(--ams-text-level-5-line-height);
482
+ --ams-description-list-inverse-color: var(--ams-color-primary-white);
483
+ --ams-description-list-gap: var(--ams-space-stack-md);
484
+ --ams-description-list-font-weight: var(--ams-text-font-weight-normal);
485
+ --ams-description-list-font-size: var(--ams-text-level-5-font-size);
486
+ --ams-description-list-font-family: var(--ams-text-font-family);
487
+ --ams-description-list-color: var(--ams-color-primary-black);
488
+ --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
489
+ --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
490
+ --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
491
+ --ams-date-input-disabled-color: var(--ams-color-neutral-grey2);
492
+ --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
493
+ --ams-date-input-disabled-background-color: var(--ams-color-primary-white);
494
+ --ams-date-input-padding-inline: var(--ams-space-inside-lg);
495
+ --ams-date-input-padding-block: var(--ams-space-inside-xs);
496
+ --ams-date-input-outline-offset: var(--ams-focus-outline-offset);
497
+ --ams-date-input-line-height: var(--ams-text-level-5-line-height);
498
+ --ams-date-input-font-weight: var(--ams-text-font-weight-normal);
499
+ --ams-date-input-font-size: var(--ams-text-level-5-font-size);
500
+ --ams-date-input-font-family: var(--ams-text-font-family);
501
+ --ams-date-input-color: var(--ams-color-primary-black);
502
+ --ams-date-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
503
+ --ams-date-input-background-color: var(--ams-color-primary-white);
436
504
  --ams-column-gap-xl: var(--ams-space-grid-xl);
437
505
  --ams-column-gap-lg: var(--ams-space-grid-lg);
438
506
  --ams-column-gap-md: var(--ams-space-grid-md);
439
507
  --ams-column-gap-sm: var(--ams-space-grid-sm);
440
508
  --ams-column-gap-xs: var(--ams-space-grid-xs);
509
+ --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-md);
441
510
  --ams-checkbox-hover-color: var(--ams-color-dark-blue);
442
511
  --ams-checkbox-disabled-color: var(--ams-color-neutral-grey3);
443
512
  --ams-checkbox-checkmark-indeterminate-hover-background-color: var(--ams-color-dark-blue);
@@ -448,14 +517,17 @@
448
517
  --ams-checkbox-checkmark-invalid-checked-hover-background-color: var(--ams-color-primary-red);
449
518
  --ams-checkbox-checkmark-invalid-checked-background-color: var(--ams-color-primary-red);
450
519
  --ams-checkbox-checkmark-invalid-border-color: var(--ams-color-primary-red);
520
+ --ams-checkbox-checkmark-hover-border-width: var(--ams-border-width-lg);
451
521
  --ams-checkbox-checkmark-hover-border-color: var(--ams-color-dark-blue);
452
522
  --ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: var(--ams-color-neutral-grey3);
453
523
  --ams-checkbox-checkmark-disabled-indeterminate-background-color: var(--ams-color-neutral-grey3);
454
524
  --ams-checkbox-checkmark-disabled-checked-hover-background-color: var(--ams-color-neutral-grey3);
455
525
  --ams-checkbox-checkmark-disabled-checked-background-color: var(--ams-color-neutral-grey3);
526
+ --ams-checkbox-checkmark-disabled-border-width: var(--ams-border-width-md);
456
527
  --ams-checkbox-checkmark-disabled-border-color: var(--ams-color-neutral-grey3);
457
528
  --ams-checkbox-checkmark-checked-hover-background-color: var(--ams-color-dark-blue);
458
529
  --ams-checkbox-checkmark-checked-background-color: var(--ams-color-primary-blue);
530
+ --ams-checkbox-checkmark-border-width: var(--ams-border-width-md);
459
531
  --ams-checkbox-checkmark-border-color: var(--ams-color-primary-blue);
460
532
  --ams-checkbox-outline-offset: var(--ams-focus-outline-offset);
461
533
  --ams-checkbox-line-height: var(--ams-text-level-5-line-height);
@@ -466,28 +538,28 @@
466
538
  --ams-card-outline-offset: var(--ams-focus-outline-offset);
467
539
  --ams-card-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
468
540
  --ams-card-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
469
- --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
470
541
  --ams-card-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
471
542
  --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey2);
472
543
  --ams-button-tertiary-hover-color: var(--ams-color-dark-blue);
473
- --ams-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--ams-color-dark-blue);
544
+ --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
474
545
  --ams-button-tertiary-color: var(--ams-color-primary-blue);
475
- --ams-button-secondary-focus-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
546
+ --ams-button-secondary-focus-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
476
547
  --ams-button-secondary-disabled-color: var(--ams-color-neutral-grey2);
477
- --ams-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey2);
548
+ --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
478
549
  --ams-button-secondary-disabled-background-color: var(--ams-color-primary-white);
479
550
  --ams-button-secondary-hover-color: var(--ams-color-dark-blue);
480
- --ams-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--ams-color-dark-blue);
481
- --ams-button-secondary-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
551
+ --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
552
+ --ams-button-secondary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
482
553
  --ams-button-secondary-color: var(--ams-color-primary-blue);
483
554
  --ams-button-secondary-background-color: var(--ams-color-primary-white);
484
- --ams-button-primary-hover-box-shadow: inset 0 0 0 2px var(--ams-color-dark-blue);
555
+ --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
485
556
  --ams-button-primary-hover-background-color: var(--ams-color-dark-blue);
486
- --ams-button-primary-disabled-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey2);
557
+ --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
487
558
  --ams-button-primary-disabled-background-color: var(--ams-color-neutral-grey2);
488
559
  --ams-button-primary-color: var(--ams-color-primary-white);
489
- --ams-button-primary-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
560
+ --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
490
561
  --ams-button-primary-background-color: var(--ams-color-primary-blue);
562
+ --ams-button-forced-color-mode-border: var(--ams-border-width-md) solid;
491
563
  --ams-button-disabled-cursor: var(--ams-action-disabled-cursor);
492
564
  --ams-button-outline-offset: var(--ams-focus-outline-offset);
493
565
  --ams-button-padding-inline: var(--ams-space-inside-md);
@@ -499,7 +571,6 @@
499
571
  --ams-breadcrumb-item-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
500
572
  --ams-breadcrumb-item-link-hover-color: var(--ams-color-dark-blue);
501
573
  --ams-breadcrumb-item-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
502
- --ams-breadcrumb-item-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
503
574
  --ams-breadcrumb-item-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
504
575
  --ams-breadcrumb-item-link-outline-offset: var(--ams-focus-outline-offset);
505
576
  --ams-breadcrumb-line-height: var(--ams-text-level-6-line-height);
@@ -533,6 +604,29 @@
533
604
  --ams-badge-font-weight: var(--ams-text-font-weight-bold);
534
605
  --ams-badge-font-size: var(--ams-text-level-5-font-size);
535
606
  --ams-badge-font-family: var(--ams-text-font-family);
607
+ --ams-avatar-yellow-color: var(--ams-color-primary-black);
608
+ --ams-avatar-yellow-background-color: var(--ams-color-yellow);
609
+ --ams-avatar-red-color: var(--ams-color-primary-white);
610
+ --ams-avatar-red-background-color: var(--ams-color-primary-red);
611
+ --ams-avatar-purple-color: var(--ams-color-primary-white);
612
+ --ams-avatar-purple-background-color: var(--ams-color-purple);
613
+ --ams-avatar-orange-color: var(--ams-color-primary-black);
614
+ --ams-avatar-orange-background-color: var(--ams-color-orange);
615
+ --ams-avatar-magenta-color: var(--ams-color-primary-white);
616
+ --ams-avatar-magenta-background-color: var(--ams-color-magenta);
617
+ --ams-avatar-green-color: var(--ams-color-primary-black);
618
+ --ams-avatar-green-background-color: var(--ams-color-green);
619
+ --ams-avatar-dark-green-color: var(--ams-color-primary-white);
620
+ --ams-avatar-dark-green-background-color: var(--ams-color-dark-green);
621
+ --ams-avatar-dark-blue-color: var(--ams-color-primary-white);
622
+ --ams-avatar-dark-blue-background-color: var(--ams-color-primary-blue);
623
+ --ams-avatar-blue-color: var(--ams-color-primary-black);
624
+ --ams-avatar-blue-background-color: var(--ams-color-blue);
625
+ --ams-avatar-line-height: var(--ams-text-level-6-line-height);
626
+ --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
627
+ --ams-avatar-font-size: var(--ams-text-level-6-font-size);
628
+ --ams-avatar-font-family: var(--ams-text-font-family);
629
+ --ams-avatar-aspect-ratio: var(--ams-proportion-square);
536
630
  --ams-aspect-ratio-2x-wide: var(--ams-proportion-2x-wide);
537
631
  --ams-aspect-ratio-x-wide: var(--ams-proportion-x-wide);
538
632
  --ams-aspect-ratio-wide: var(--ams-proportion-wide);
@@ -547,25 +641,31 @@
547
641
  --ams-alert-error-border-color: var(--ams-color-primary-red);
548
642
  --ams-alert-padding-inline: var(--ams-space-inside-lg);
549
643
  --ams-alert-padding-block: var(--ams-space-inside-md);
550
- --ams-accordion-panel-padding-inline: var(--ams-space-inside-md);
551
- --ams-accordion-panel-padding-block: var(--ams-space-inside-md);
552
- --ams-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey3);
644
+ --ams-alert-border-width: var(--ams-border-width-xl);
645
+ --ams-accordion-panel-padding-block: 0 var(--ams-space-inside-md);
646
+ --ams-accordion-button-hover-color: var(--ams-color-dark-blue);
553
647
  --ams-accordion-button-focus-outline-offset: var(--ams-focus-outline-offset);
554
- --ams-accordion-button-padding-inline: var(--ams-space-inside-md);
555
648
  --ams-accordion-button-padding-block: var(--ams-space-inside-sm);
556
649
  --ams-accordion-button-line-height: var(--ams-text-level-5-line-height);
650
+ --ams-accordion-button-gap: var(--ams-space-inside-md);
557
651
  --ams-accordion-button-font-weight: var(--ams-text-font-weight-bold);
558
652
  --ams-accordion-button-font-size: var(--ams-text-level-5-font-size);
559
653
  --ams-accordion-button-font-family: var(--ams-text-font-family);
560
654
  --ams-accordion-button-color: var(--ams-color-primary-blue);
655
+ --ams-accordion-gap: var(--ams-space-inside-xs);
656
+ --ams-link-appearance-regular-hover-text-decoration-thickness: var(--ams-border-width-lg);
561
657
  --ams-link-appearance-on-background-light-color: var(--ams-color-primary-black);
562
658
  --ams-link-appearance-on-background-dark-color: var(--ams-color-primary-white);
563
659
  --ams-link-appearance-hover-color: var(--ams-color-dark-blue);
660
+ --ams-link-appearance-text-decoration-thickness: var(--ams-border-width-md);
564
661
  --ams-link-appearance-color: var(--ams-color-primary-blue);
662
+ --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
565
663
  --ams-top-task-link-label-color: var(--ams-link-appearance-color);
566
664
  --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
665
+ --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
567
666
  --ams-pagination-color: var(--ams-link-appearance-color);
568
667
  --ams-page-menu-item-hover-color: var(--ams-link-appearance-hover-color);
668
+ --ams-page-menu-item-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
569
669
  --ams-page-menu-item-color: var(--ams-link-appearance-color);
570
670
  --ams-link-on-background-light-visited-color: var(--ams-link-appearance-on-background-light-color);
571
671
  --ams-link-on-background-light-hover-color: var(--ams-link-appearance-on-background-light-color);
@@ -573,6 +673,10 @@
573
673
  --ams-link-on-background-dark-visited-color: var(--ams-link-appearance-on-background-dark-color);
574
674
  --ams-link-on-background-dark-hover-color: var(--ams-link-appearance-on-background-dark-color);
575
675
  --ams-link-on-background-dark-color: var(--ams-link-appearance-on-background-dark-color);
676
+ --ams-link-standalone-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
677
+ --ams-link-standalone-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
678
+ --ams-link-inline-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
679
+ --ams-link-inline-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
576
680
  --ams-link-hover-color: var(--ams-link-appearance-hover-color);
577
681
  --ams-link-color: var(--ams-link-appearance-color);
578
682
  --ams-link-list-link-on-background-light-hover-color: var(--ams-link-appearance-on-background-light-color);
@@ -580,8 +684,11 @@
580
684
  --ams-link-list-link-on-background-dark-hover-color: var(--ams-link-appearance-on-background-dark-color);
581
685
  --ams-link-list-link-on-background-dark-color: var(--ams-link-appearance-on-background-dark-color);
582
686
  --ams-link-list-link-hover-color: var(--ams-link-appearance-hover-color);
687
+ --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
583
688
  --ams-link-list-link-color: var(--ams-link-appearance-color);
584
689
  --ams-card-link-hover-color: var(--ams-link-appearance-hover-color);
690
+ --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
585
691
  --ams-card-link-color: var(--ams-link-appearance-color);
692
+ --ams-breadcrumb-item-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
586
693
  --ams-breadcrumb-item-link-color: var(--ams-link-appearance-color);
587
694
  }