@amsterdam/design-system-tokens 0.7.1 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.md +59 -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 +232 -95
  8. package/dist/index.d.ts +278 -49
  9. package/dist/index.json +341 -112
  10. package/dist/index.mjs +244 -107
  11. package/dist/index.scss +232 -95
  12. package/dist/index.theme.css +232 -95
  13. package/package.json +1 -1
  14. package/src/brand/ams/border.tokens.json +12 -0
  15. package/src/common/ams/focus.tokens.json +1 -1
  16. package/src/common/ams/link-appearance.tokens.json +4 -4
  17. package/src/components/ams/accordion.tokens.json +6 -4
  18. package/src/components/ams/alert.tokens.json +1 -1
  19. package/src/components/ams/badge.tokens.json +28 -4
  20. package/src/components/ams/breadcrumb.tokens.json +1 -1
  21. package/src/components/ams/button.tokens.json +11 -8
  22. package/src/components/ams/checkbox.tokens.json +6 -2
  23. package/src/components/ams/date-input.tokens.json +45 -0
  24. package/src/components/ams/description-list.tokens.json +20 -0
  25. package/src/components/ams/error-message.tokens.json +11 -0
  26. package/src/components/ams/{fieldset.tokens.json → field-set.tokens.json} +11 -2
  27. package/src/components/ams/field.tokens.json +17 -0
  28. package/src/components/ams/file-input.tokens.json +42 -0
  29. package/src/components/ams/{form-label.tokens.json → label.tokens.json} +1 -1
  30. package/src/components/ams/link-list.tokens.json +2 -4
  31. package/src/components/ams/logo.tokens.json +1 -1
  32. package/src/components/ams/ordered-list.tokens.json +4 -0
  33. package/src/components/ams/page-menu.tokens.json +2 -2
  34. package/src/components/ams/paragraph.tokens.json +2 -4
  35. package/src/components/ams/radio.tokens.json +4 -1
  36. package/src/components/ams/screen.tokens.json +3 -2
  37. package/src/components/ams/search-field.tokens.json +16 -9
  38. package/src/components/ams/select.tokens.json +41 -0
  39. package/src/components/ams/skip-link.tokens.json +1 -1
  40. package/src/components/ams/switch.tokens.json +6 -5
  41. package/src/components/ams/table.tokens.json +2 -2
  42. package/src/components/ams/tabs.tokens.json +3 -4
  43. package/src/components/ams/text-area.tokens.json +10 -9
  44. package/src/components/ams/text-input.tokens.json +8 -7
  45. package/src/components/ams/time-input.tokens.json +45 -0
  46. package/src/components/ams/unordered-list.tokens.json +4 -0
  47. package/src/common/ams/border.tokens.json +0 -9
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Mar 2024 15:51:05 GMT
3
+ * Generated on Wed, 05 Jun 2024 11:22:10 GMT
4
4
  */
5
5
 
6
6
  .ams-theme {
@@ -11,19 +11,22 @@
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
- --ams-switch-thumb-height: 1.75rem;
22
- --ams-switch-thumb-width: 1.75rem;
23
- --ams-switch-width: 3.5rem;
22
+ --ams-switch-thumb-block-size: 1.75rem;
23
+ --ams-switch-thumb-inline-size: 1.75rem;
24
+ --ams-switch-inline-size: 3.5rem;
25
+ --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
- --ams-screen-x-wide-max-width: 132rem;
26
- --ams-screen-wide-max-width: 100rem;
28
+ --ams-screen-x-wide-max-inline-size: 132rem;
29
+ --ams-screen-wide-max-inline-size: 100rem;
27
30
  --ams-radio-circle-invalid-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
28
31
  --ams-radio-circle-invalid-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
29
32
  --ams-radio-circle-disabled-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
@@ -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;
@@ -42,7 +43,7 @@
42
43
  --ams-ordered-list-gap: 0.75rem;
43
44
  --ams-mega-menu-list-category-padding-block-start: 1rem;
44
45
  --ams-mega-menu-list-category-column-width: 20rem;
45
- --ams-logo-height: 2.5rem;
46
+ --ams-logo-block-size: 2.5rem;
46
47
  --ams-link-inline-line-height: inherit;
47
48
  --ams-link-inline-font-size: inherit;
48
49
  --ams-link-inline-font-family: inherit;
@@ -61,6 +62,9 @@
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;
@@ -71,21 +75,17 @@
71
75
  --ams-avatar-padding-block: 0.25rem;
72
76
  --ams-alert-gap: 1rem;
73
77
  --ams-alert-border-style: solid;
74
- --ams-alert-border-width: 4px;
78
+ --ams-accordion-panel-padding-inline: 0;
79
+ --ams-accordion-button-padding-inline: 0;
75
80
  --ams-link-appearance-subtle-hover-text-decoration-line: underline;
76
81
  --ams-link-appearance-subtle-text-decoration-line: none;
77
- --ams-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
78
- --ams-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
82
+ --ams-link-appearance-regular-hover-text-underline-offset: 0.2778em;
79
83
  --ams-link-appearance-regular-text-decoration-line: underline;
80
- --ams-link-appearance-text-underline-offset: 0.375rem;
81
- --ams-link-appearance-text-decoration-thickness: 0.125rem;
84
+ --ams-link-appearance-text-underline-offset: 0.3333em;
82
85
  --ams-hyphenation-overflow-wrap: break-word;
83
86
  --ams-hyphenation-hyphens: auto;
84
87
  --ams-hyphenation-hyphenate-limit-chars: 12 8 4;
85
- --ams-focus-outline-offset: 2px;
86
- --ams-border-width-lg: 3px;
87
- --ams-border-width-md: 2px;
88
- --ams-border-width-sm: 1px;
88
+ --ams-focus-outline-offset: 0.125rem;
89
89
  --ams-action-submit-cursor: pointer;
90
90
  --ams-action-navigate-cursor: pointer;
91
91
  --ams-action-inert-cursor: default;
@@ -145,6 +145,12 @@
145
145
  --ams-color-primary-blue: #004699;
146
146
  --ams-color-primary-white: #FFFFFF;
147
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;
152
+ --ams-unordered-list-small-line-height: var(--ams-text-level-6-line-height);
153
+ --ams-unordered-list-small-font-size: var(--ams-text-level-6-font-size);
148
154
  --ams-unordered-list-line-height: var(--ams-text-level-5-line-height);
149
155
  --ams-unordered-list-inverse-color: var(--ams-color-primary-white);
150
156
  --ams-unordered-list-font-weight: var(--ams-text-font-weight-normal);
@@ -155,7 +161,6 @@
155
161
  --ams-top-task-link-label-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
156
162
  --ams-top-task-link-label-hover-color: var(--ams-color-dark-blue);
157
163
  --ams-top-task-link-label-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
158
- --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
159
164
  --ams-top-task-link-label-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
160
165
  --ams-top-task-link-label-line-height: var(--ams-text-level-4-line-height);
161
166
  --ams-top-task-link-label-font-weight: var(--ams-text-font-weight-bold);
@@ -166,38 +171,56 @@
166
171
  --ams-top-task-link-description-font-size: var(--ams-text-level-6-font-size);
167
172
  --ams-top-task-link-description-font-family: var(--ams-text-font-family);
168
173
  --ams-top-task-link-description-color: var(--ams-color-primary-black);
174
+ --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
175
+ --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
176
+ --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
177
+ --ams-time-input-disabled-color: var(--ams-color-neutral-grey2);
178
+ --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
179
+ --ams-time-input-disabled-background-color: var(--ams-color-primary-white);
180
+ --ams-time-input-padding-inline: var(--ams-space-inside-md);
181
+ --ams-time-input-padding-block: var(--ams-space-inside-xs);
182
+ --ams-time-input-outline-offset: var(--ams-focus-outline-offset);
183
+ --ams-time-input-line-height: var(--ams-text-level-5-line-height);
184
+ --ams-time-input-font-weight: var(--ams-text-font-weight-normal);
185
+ --ams-time-input-font-size: var(--ams-text-level-5-font-size);
186
+ --ams-time-input-font-family: var(--ams-text-font-family);
187
+ --ams-time-input-color: var(--ams-color-primary-black);
188
+ --ams-time-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
189
+ --ams-time-input-background-color: var(--ams-color-primary-white);
169
190
  --ams-text-input-placeholder-color: var(--ams-color-neutral-grey3);
170
- --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-red);
171
- --ams-text-input-invalid-box-shadow: inset 0 0 0 1px var(--ams-color-primary-red);
172
- --ams-text-input-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
191
+ --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
192
+ --ams-text-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
193
+ --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
173
194
  --ams-text-input-disabled-color: var(--ams-color-neutral-grey2);
174
- --ams-text-input-disabled-box-shadow: inset 0 0 0 1px var(--ams-color-neutral-grey2);
195
+ --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
175
196
  --ams-text-input-disabled-background-color: var(--ams-color-primary-white);
176
197
  --ams-text-input-padding-inline: var(--ams-space-inside-md);
177
198
  --ams-text-input-padding-block: var(--ams-space-inside-xs);
178
199
  --ams-text-input-outline-offset: var(--ams-focus-outline-offset);
179
- --ams-text-input-line-height: var(--ams-text-level-6-line-height);
200
+ --ams-text-input-line-height: var(--ams-text-level-5-line-height);
180
201
  --ams-text-input-font-weight: var(--ams-text-font-weight-normal);
181
- --ams-text-input-font-size: var(--ams-text-level-6-font-size);
202
+ --ams-text-input-font-size: var(--ams-text-level-5-font-size);
182
203
  --ams-text-input-font-family: var(--ams-text-font-family);
183
204
  --ams-text-input-color: var(--ams-color-primary-black);
184
- --ams-text-input-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
205
+ --ams-text-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
206
+ --ams-text-input-background-color: var(--ams-color-primary-white);
185
207
  --ams-text-area-placeholder-color: var(--ams-color-neutral-grey3);
186
- --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-red);
187
- --ams-text-area-invalid-box-shadow: inset 0 0 0 1px var(--ams-color-primary-red);
188
- --ams-text-area-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
208
+ --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
209
+ --ams-text-area-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
210
+ --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
189
211
  --ams-text-area-disabled-cursor: var(--ams-action-disabled-cursor);
190
212
  --ams-text-area-disabled-color: var(--ams-color-neutral-grey2);
191
- --ams-text-area-disabled-box-shadow: inset 0 0 0 1px var(--ams-color-neutral-grey2);
213
+ --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
192
214
  --ams-text-area-disabled-background-color: var(--ams-color-primary-white);
193
215
  --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
194
- --ams-text-area-min-height: calc(var(--ams-text-level-6-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
195
- --ams-text-area-line-height: var(--ams-text-level-6-line-height);
216
+ --ams-text-area-min-block-size: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
217
+ --ams-text-area-line-height: var(--ams-text-level-5-line-height);
196
218
  --ams-text-area-font-weight: var(--ams-text-font-weight-normal);
197
- --ams-text-area-font-size: var(--ams-text-level-6-font-size);
219
+ --ams-text-area-font-size: var(--ams-text-level-5-font-size);
198
220
  --ams-text-area-font-family: var(--ams-text-font-family);
199
221
  --ams-text-area-color: var(--ams-color-primary-black);
200
- --ams-text-area-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
222
+ --ams-text-area-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
223
+ --ams-text-area-background-color: var(--ams-color-primary-white);
201
224
  --ams-tabs-button-disabled-cursor: var(--ams-action-disabled-cursor);
202
225
  --ams-tabs-button-disabled-color: var(--ams-color-neutral-grey2);
203
226
  --ams-tabs-button-selected-color: var(--ams-color-primary-white);
@@ -205,29 +228,30 @@
205
228
  --ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 var(--ams-color-dark-blue);
206
229
  --ams-tabs-button-hover-color: var(--ams-color-dark-blue);
207
230
  --ams-tabs-button-line-height: var(--ams-text-level-5-line-height);
208
- --ams-tabs-button-font-size: var(--ams-text-level-5-font-size);
209
231
  --ams-tabs-button-font-weight: var(--ams-text-font-weight-normal);
232
+ --ams-tabs-button-font-size: var(--ams-text-level-5-font-size);
210
233
  --ams-tabs-button-font-family: var(--ams-text-font-family);
211
234
  --ams-tabs-button-cursor: var(--ams-action-activate-cursor);
212
235
  --ams-tabs-button-color: var(--ams-color-primary-blue);
213
- --ams-tabs-list-border-bottom: .125rem solid var(--ams-color-primary-blue);
236
+ --ams-tabs-list-border-block-end: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
237
+ --ams-tabs-list-background-color: var(--ams-color-primary-white);
214
238
  --ams-table-header-cell-font-weight: var(--ams-text-font-weight-bold);
215
239
  --ams-table-cell-padding-inline: var(--ams-space-inside-md);
216
240
  --ams-table-cell-padding-block: var(--ams-space-inside-md);
217
- --ams-table-cell-border-bottom: 1px solid var(--ams-color-neutral-grey1);
241
+ --ams-table-cell-border-block-end: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
218
242
  --ams-table-caption-font-weight: var(--ams-text-font-weight-bold);
219
243
  --ams-table-line-height: var(--ams-text-level-5-line-height);
220
- --ams-table-font-size: var(--ams-text-level-5-font-size);
221
244
  --ams-table-font-weight: var(--ams-text-font-weight-normal);
245
+ --ams-table-font-size: var(--ams-text-level-5-font-size);
222
246
  --ams-table-font-family: var(--ams-text-font-family);
223
247
  --ams-table-color: var(--ams-color-primary-black);
224
248
  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
225
- --ams-switch-outline-offset: var(--ams-focus-outline-offset);
226
249
  --ams-switch-checked-background-color: var(--ams-color-primary-blue);
227
250
  --ams-switch-thumb-hover-color: var(--ams-color-dark-blue);
228
251
  --ams-switch-thumb-background-color: var(--ams-color-primary-white);
229
- --ams-switch-background-color: var(--ams-color-neutral-grey3);
252
+ --ams-switch-outline-offset: var(--ams-focus-outline-offset);
230
253
  --ams-switch-font-family: var(--ams-text-font-family);
254
+ --ams-switch-background-color: var(--ams-color-neutral-grey3);
231
255
  --ams-spotlight-yellow-background-color: var(--ams-color-yellow);
232
256
  --ams-spotlight-purple-background-color: var(--ams-color-purple);
233
257
  --ams-spotlight-orange-background-color: var(--ams-color-orange);
@@ -241,42 +265,66 @@
241
265
  --ams-skip-link-padding-block: var(--ams-space-inside-xs);
242
266
  --ams-skip-link-outline-offset: var(--ams-focus-outline-offset);
243
267
  --ams-skip-link-line-height: var(--ams-text-level-6-line-height);
244
- --ams-skip-link-font-size: var(--ams-text-level-6-font-size);
245
268
  --ams-skip-link-font-weight: var(--ams-text-font-weight-normal);
269
+ --ams-skip-link-font-size: var(--ams-text-level-6-font-size);
246
270
  --ams-skip-link-font-family: var(--ams-text-font-family);
247
271
  --ams-skip-link-color: var(--ams-color-primary-white);
248
272
  --ams-skip-link-background-color: var(--ams-color-primary-blue);
273
+ --ams-select-option-disabled-color: var(--ams-color-neutral-grey2);
274
+ --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
275
+ --ams-select-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
276
+ --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
277
+ --ams-select-disabled-color: var(--ams-color-neutral-grey2);
278
+ --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
279
+ --ams-select-padding-inline: var(--ams-space-inside-md) calc(2 * var(--ams-space-inside-md) + 1em);
280
+ --ams-select-padding-block: var(--ams-space-inside-xs);
281
+ --ams-select-outline-offset: var(--ams-focus-outline-offset);
282
+ --ams-select-line-height: var(--ams-text-level-5-line-height);
283
+ --ams-select-font-weight: var(--ams-text-font-weight-normal);
284
+ --ams-select-font-size: var(--ams-text-level-5-font-size);
285
+ --ams-select-font-family: var(--ams-text-font-family);
286
+ --ams-select-color: var(--ams-color-primary-black);
287
+ --ams-select-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
288
+ --ams-select-background-position: right var(--ams-space-inside-md) center;
289
+ --ams-select-background-color: var(--ams-color-primary-white);
249
290
  --ams-search-field-input-placeholder-color: var(--ams-color-neutral-grey3);
250
- --ams-search-field-input-hover-box-shadow: inset 0 0 0 2px var(--ams-color-primary-black);
251
- --ams-search-field-input-cancel-button-width: var(--ams-text-level-6-font-size);
252
- --ams-search-field-input-cancel-button-height: var(--ams-text-level-6-font-size);
291
+ --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
292
+ --ams-search-field-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
293
+ --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
294
+ --ams-search-field-input-cancel-button-inline-size: var(--ams-text-level-5-font-size);
253
295
  --ams-search-field-input-cancel-button-color: var(--ams-color-primary-blue);
296
+ --ams-search-field-input-cancel-button-block-size: var(--ams-text-level-5-font-size);
254
297
  --ams-search-field-input-padding-inline: var(--ams-space-inside-md);
255
298
  --ams-search-field-input-padding-block: var(--ams-space-inside-xs);
256
299
  --ams-search-field-input-outline-offset: var(--ams-focus-outline-offset);
257
- --ams-search-field-input-line-height: var(--ams-text-level-6-line-height);
300
+ --ams-search-field-input-line-height: var(--ams-text-level-5-line-height);
258
301
  --ams-search-field-input-font-weight: var(--ams-text-font-weight-normal);
259
- --ams-search-field-input-font-size: var(--ams-text-level-6-font-size);
302
+ --ams-search-field-input-font-size: var(--ams-text-level-5-font-size);
260
303
  --ams-search-field-input-font-family: var(--ams-text-font-family);
261
304
  --ams-search-field-input-color: var(--ams-color-primary-black);
262
- --ams-search-field-input-box-shadow: inset 0 0 0 1px var(--ams-color-primary-black);
305
+ --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
306
+ --ams-search-field-input-background-color: var(--ams-color-primary-white);
307
+ --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
263
308
  --ams-search-field-button-padding-inline: var(--ams-space-inside-xs);
264
309
  --ams-search-field-button-padding-block: var(--ams-space-inside-xs);
265
- --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
266
310
  --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
267
311
  --ams-search-field-button-color: var(--ams-color-primary-white);
268
312
  --ams-search-field-button-background-color: var(--ams-color-primary-blue);
313
+ --ams-screen-background-color: var(--ams-color-primary-white);
269
314
  --ams-row-gap-xl: var(--ams-space-stack-xl);
270
315
  --ams-row-gap-lg: var(--ams-space-stack-lg);
271
316
  --ams-row-gap-md: var(--ams-space-stack-md);
272
317
  --ams-row-gap-sm: var(--ams-space-stack-sm);
273
318
  --ams-row-gap-xs: var(--ams-space-stack-xs);
319
+ --ams-radio-hover-text-decoration-thickness: var(--ams-border-width-md);
274
320
  --ams-radio-hover-color: var(--ams-color-dark-blue);
275
321
  --ams-radio-disabled-color: var(--ams-color-neutral-grey3);
276
322
  --ams-radio-circle-invalid-hover-border-color: var(--ams-color-primary-red);
277
323
  --ams-radio-circle-invalid-border-color: var(--ams-color-primary-red);
278
324
  --ams-radio-circle-hover-border-color: var(--ams-color-dark-blue);
325
+ --ams-radio-circle-disabled-border-width: var(--ams-border-width-md);
279
326
  --ams-radio-circle-disabled-border-color: var(--ams-color-neutral-grey3);
327
+ --ams-radio-circle-border-width: var(--ams-border-width-md);
280
328
  --ams-radio-circle-border-color: var(--ams-color-primary-blue);
281
329
  --ams-radio-outline-offset: var(--ams-focus-outline-offset);
282
330
  --ams-radio-line-height: var(--ams-text-level-5-line-height);
@@ -286,18 +334,17 @@
286
334
  --ams-radio-color: var(--ams-color-primary-black);
287
335
  --ams-paragraph-large-line-height: var(--ams-text-level-4-line-height);
288
336
  --ams-paragraph-large-font-size: var(--ams-text-level-4-font-size);
289
- --ams-paragraph-medium-line-height: var(--ams-text-level-5-line-height);
290
- --ams-paragraph-medium-font-size: var(--ams-text-level-5-font-size);
291
337
  --ams-paragraph-small-line-height: var(--ams-text-level-6-line-height);
292
338
  --ams-paragraph-small-font-size: var(--ams-text-level-6-font-size);
293
339
  --ams-paragraph-inverse-color: var(--ams-color-primary-white);
340
+ --ams-paragraph-line-height: var(--ams-text-level-5-line-height);
294
341
  --ams-paragraph-font-weight: var(--ams-text-font-weight-normal);
342
+ --ams-paragraph-font-size: var(--ams-text-level-5-font-size);
295
343
  --ams-paragraph-font-family: var(--ams-text-font-family);
296
344
  --ams-paragraph-color: var(--ams-color-primary-black);
297
345
  --ams-pagination-button-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
298
346
  --ams-pagination-button-current-font-weight: var(--ams-text-font-weight-bold);
299
347
  --ams-pagination-button-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
300
- --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
301
348
  --ams-pagination-button-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
302
349
  --ams-pagination-button-padding-inline: var(--ams-space-inside-sm);
303
350
  --ams-pagination-button-outline-offset: var(--ams-focus-outline-offset);
@@ -307,19 +354,22 @@
307
354
  --ams-pagination-font-family: var(--ams-text-font-family);
308
355
  --ams-page-menu-item-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
309
356
  --ams-page-menu-item-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
310
- --ams-page-menu-item-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
311
357
  --ams-page-menu-item-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
312
358
  --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
313
359
  --ams-page-menu-item-line-height: var(--ams-text-level-6-line-height);
314
360
  --ams-page-menu-item-font-weight: var(--ams-text-font-weight-normal);
315
361
  --ams-page-menu-item-font-size: var(--ams-text-level-6-font-size);
316
362
  --ams-page-menu-item-font-family: var(--ams-text-font-family);
363
+ --ams-page-menu-row-gap: var(--ams-space-grid-xs);
364
+ --ams-page-menu-column-gap: var(--ams-space-grid-md);
317
365
  --ams-page-heading-line-height: var(--ams-text-level-0-font-size);
318
366
  --ams-page-heading-inverse-color: var(--ams-color-primary-white);
319
367
  --ams-page-heading-font-weight: var(--ams-text-font-weight-bold);
320
368
  --ams-page-heading-font-size: var(--ams-text-level-0-font-size);
321
369
  --ams-page-heading-font-family: var(--ams-text-font-family);
322
370
  --ams-page-heading-color: var(--ams-color-primary-black);
371
+ --ams-ordered-list-small-line-height: var(--ams-text-level-6-line-height);
372
+ --ams-ordered-list-small-font-size: var(--ams-text-level-6-font-size);
323
373
  --ams-ordered-list-line-height: var(--ams-text-level-5-line-height);
324
374
  --ams-ordered-list-inverse-color: var(--ams-color-primary-white);
325
375
  --ams-ordered-list-font-weight: var(--ams-text-font-weight-normal);
@@ -338,17 +388,13 @@
338
388
  --ams-logo-title-color: var(--ams-color-primary-red);
339
389
  --ams-logo-emblem-color: var(--ams-color-primary-red);
340
390
  --ams-link-standalone-hover-text-underline-offset: var(--ams-link-appearance-regular-hover-text-underline-offset);
341
- --ams-link-standalone-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
342
391
  --ams-link-standalone-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
343
- --ams-link-standalone-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
344
392
  --ams-link-standalone-text-decoration-line: var(--ams-link-appearance-regular-text-decoration-line);
345
393
  --ams-link-standalone-line-height: var(--ams-text-level-5-line-height);
346
394
  --ams-link-standalone-font-size: var(--ams-text-level-5-font-size);
347
395
  --ams-link-inline-visited-color: var(--ams-color-purple);
348
396
  --ams-link-inline-hover-text-underline-offset: var(--ams-link-appearance-regular-hover-text-underline-offset);
349
- --ams-link-inline-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
350
397
  --ams-link-inline-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
351
- --ams-link-inline-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
352
398
  --ams-link-inline-text-decoration-line: var(--ams-link-appearance-regular-text-decoration-line);
353
399
  --ams-link-outline-offset: var(--ams-focus-outline-offset);
354
400
  --ams-link-font-weight: var(--ams-text-font-weight-normal);
@@ -356,16 +402,20 @@
356
402
  --ams-link-list-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
357
403
  --ams-link-list-link-large-line-height: var(--ams-text-level-4-line-height);
358
404
  --ams-link-list-link-large-font-size: var(--ams-text-level-4-font-size);
359
- --ams-link-list-link-medium-line-height: var(--ams-text-level-5-line-height);
360
- --ams-link-list-link-medium-font-size: var(--ams-text-level-5-font-size);
361
405
  --ams-link-list-link-small-line-height: var(--ams-text-level-6-line-height);
362
406
  --ams-link-list-link-small-font-size: var(--ams-text-level-6-font-size);
363
407
  --ams-link-list-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
364
- --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
365
408
  --ams-link-list-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
366
409
  --ams-link-list-link-outline-offset: var(--ams-focus-outline-offset);
410
+ --ams-link-list-link-line-height: var(--ams-text-level-5-line-height);
367
411
  --ams-link-list-link-font-weight: var(--ams-text-font-weight-normal);
412
+ --ams-link-list-link-font-size: var(--ams-text-level-5-font-size);
368
413
  --ams-link-list-link-font-family: var(--ams-text-font-family);
414
+ --ams-label-line-height: var(--ams-text-level-4-line-height);
415
+ --ams-label-font-weight: var(--ams-text-font-weight-bold);
416
+ --ams-label-font-size: var(--ams-text-level-4-font-size);
417
+ --ams-label-font-family: var(--ams-text-font-family);
418
+ --ams-label-color: var(--ams-color-primary-black);
369
419
  --ams-icon-size-6-line-height: var(--ams-text-level-6-line-height);
370
420
  --ams-icon-size-6-font-size: var(--ams-text-level-6-font-size);
371
421
  --ams-icon-size-5-line-height: var(--ams-text-level-5-line-height);
@@ -419,28 +469,87 @@
419
469
  --ams-gap-md: var(--ams-space-grid-md);
420
470
  --ams-gap-sm: var(--ams-space-grid-sm);
421
471
  --ams-gap-xs: var(--ams-space-grid-xs);
422
- --ams-form-label-line-height: var(--ams-text-level-4-line-height);
423
- --ams-form-label-font-weight: var(--ams-text-font-weight-bold);
424
- --ams-form-label-font-size: var(--ams-text-level-4-font-size);
425
- --ams-form-label-font-family: var(--ams-text-font-family);
426
- --ams-form-label-color: var(--ams-color-primary-black);
427
472
  --ams-form-field-character-counter-error-color: var(--ams-color-primary-red);
428
473
  --ams-form-field-character-counter-line-height: var(--ams-text-level-6-line-height);
429
474
  --ams-form-field-character-counter-font-weight: var(--ams-text-font-weight-normal);
430
475
  --ams-form-field-character-counter-font-size: var(--ams-text-level-6-font-size);
431
476
  --ams-form-field-character-counter-font-family: var(--ams-text-font-family);
432
477
  --ams-form-field-character-counter-color: var(--ams-color-primary-black);
433
- --ams-fieldset-legend-line-height: var(--ams-text-level-4-line-height);
434
- --ams-fieldset-legend-font-weight: var(--ams-text-font-weight-bold);
435
- --ams-fieldset-legend-font-size: var(--ams-text-level-4-font-size);
436
- --ams-fieldset-legend-font-family: var(--ams-text-font-family);
437
- --ams-fieldset-legend-color: var(--ams-color-primary-black);
478
+ --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-md) solid;
479
+ --ams-file-input-file-selector-button-disabled-cursor: var(--ams-action-disabled-cursor);
480
+ --ams-file-input-file-selector-button-disabled-color: var(--ams-color-neutral-grey2);
481
+ --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
482
+ --ams-file-input-file-selector-button-hover-color: var(--ams-color-dark-blue);
483
+ --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
484
+ --ams-file-input-file-selector-button-padding-inline: var(--ams-space-inside-md);
485
+ --ams-file-input-file-selector-button-padding-block: var(--ams-space-inside-xs);
486
+ --ams-file-input-file-selector-button-margin-inline-end: var(--ams-space-inside-md);
487
+ --ams-file-input-file-selector-button-cursor: var(--ams-action-activate-cursor);
488
+ --ams-file-input-file-selector-button-color: var(--ams-color-primary-blue);
489
+ --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
490
+ --ams-file-input-file-selector-button-background-color: var(--ams-color-primary-white);
491
+ --ams-file-input-disabled-cursor: var(--ams-action-disabled-cursor);
492
+ --ams-file-input-disabled-color: var(--ams-color-neutral-grey2);
493
+ --ams-file-input-padding-inline: var(--ams-space-inside-md);
494
+ --ams-file-input-padding-block: var(--ams-space-inside-md);
495
+ --ams-file-input-outline-offset: var(--ams-focus-outline-offset);
496
+ --ams-file-input-line-height: var(--ams-text-level-5-line-height);
497
+ --ams-file-input-font-weight: var(--ams-text-font-weight-normal);
498
+ --ams-file-input-font-size: var(--ams-text-level-5-font-size);
499
+ --ams-file-input-font-family: var(--ams-text-font-family);
500
+ --ams-file-input-cursor: var(--ams-action-activate-cursor);
501
+ --ams-file-input-color: var(--ams-color-primary-black);
502
+ --ams-file-input-border: var(--ams-border-width-sm) dashed var(--ams-color-neutral-grey3);
503
+ --ams-file-input-background-color: var(--ams-color-primary-white);
504
+ --ams-field-invalid-padding-inline-start: var(--ams-space-inside-md);
505
+ --ams-field-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
506
+ --ams-field-gap: var(--ams-space-stack-sm);
507
+ --ams-field-set-legend-margin-block-end: var(--ams-space-inside-md);
508
+ --ams-field-set-legend-line-height: var(--ams-text-level-4-line-height);
509
+ --ams-field-set-legend-font-weight: var(--ams-text-font-weight-bold);
510
+ --ams-field-set-legend-font-size: var(--ams-text-level-4-font-size);
511
+ --ams-field-set-legend-font-family: var(--ams-text-font-family);
512
+ --ams-field-set-legend-color: var(--ams-color-primary-black);
513
+ --ams-field-set-invalid-padding-inline-start: var(--ams-space-inside-md);
514
+ --ams-field-set-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
515
+ --ams-error-message-line-height: var(--ams-text-level-6-line-height);
516
+ --ams-error-message-font-weight: var(--ams-text-font-weight-normal);
517
+ --ams-error-message-font-size: var(--ams-text-level-6-font-size);
518
+ --ams-error-message-font-family: var(--ams-text-font-family);
519
+ --ams-error-message-color: var(--ams-color-primary-red);
438
520
  --ams-dialog-background-color: var(--ams-color-primary-white);
521
+ --ams-description-list-details-padding-inline-start: var(--ams-space-inside-xl);
522
+ --ams-description-list-details-font-weight: var(--ams-text-font-weight-bold);
523
+ --ams-description-list-row-gap: var(--ams-space-stack-md);
524
+ --ams-description-list-line-height: var(--ams-text-level-5-line-height);
525
+ --ams-description-list-inverse-color: var(--ams-color-primary-white);
526
+ --ams-description-list-gap: var(--ams-space-stack-md);
527
+ --ams-description-list-font-weight: var(--ams-text-font-weight-normal);
528
+ --ams-description-list-font-size: var(--ams-text-level-5-font-size);
529
+ --ams-description-list-font-family: var(--ams-text-font-family);
530
+ --ams-description-list-color: var(--ams-color-primary-black);
531
+ --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
532
+ --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
533
+ --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
534
+ --ams-date-input-disabled-color: var(--ams-color-neutral-grey2);
535
+ --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
536
+ --ams-date-input-disabled-background-color: var(--ams-color-primary-white);
537
+ --ams-date-input-padding-inline: var(--ams-space-inside-lg);
538
+ --ams-date-input-padding-block: var(--ams-space-inside-xs);
539
+ --ams-date-input-outline-offset: var(--ams-focus-outline-offset);
540
+ --ams-date-input-line-height: var(--ams-text-level-5-line-height);
541
+ --ams-date-input-font-weight: var(--ams-text-font-weight-normal);
542
+ --ams-date-input-font-size: var(--ams-text-level-5-font-size);
543
+ --ams-date-input-font-family: var(--ams-text-font-family);
544
+ --ams-date-input-color: var(--ams-color-primary-black);
545
+ --ams-date-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
546
+ --ams-date-input-background-color: var(--ams-color-primary-white);
439
547
  --ams-column-gap-xl: var(--ams-space-grid-xl);
440
548
  --ams-column-gap-lg: var(--ams-space-grid-lg);
441
549
  --ams-column-gap-md: var(--ams-space-grid-md);
442
550
  --ams-column-gap-sm: var(--ams-space-grid-sm);
443
551
  --ams-column-gap-xs: var(--ams-space-grid-xs);
552
+ --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-md);
444
553
  --ams-checkbox-hover-color: var(--ams-color-dark-blue);
445
554
  --ams-checkbox-disabled-color: var(--ams-color-neutral-grey3);
446
555
  --ams-checkbox-checkmark-indeterminate-hover-background-color: var(--ams-color-dark-blue);
@@ -451,14 +560,17 @@
451
560
  --ams-checkbox-checkmark-invalid-checked-hover-background-color: var(--ams-color-primary-red);
452
561
  --ams-checkbox-checkmark-invalid-checked-background-color: var(--ams-color-primary-red);
453
562
  --ams-checkbox-checkmark-invalid-border-color: var(--ams-color-primary-red);
563
+ --ams-checkbox-checkmark-hover-border-width: var(--ams-border-width-lg);
454
564
  --ams-checkbox-checkmark-hover-border-color: var(--ams-color-dark-blue);
455
565
  --ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: var(--ams-color-neutral-grey3);
456
566
  --ams-checkbox-checkmark-disabled-indeterminate-background-color: var(--ams-color-neutral-grey3);
457
567
  --ams-checkbox-checkmark-disabled-checked-hover-background-color: var(--ams-color-neutral-grey3);
458
568
  --ams-checkbox-checkmark-disabled-checked-background-color: var(--ams-color-neutral-grey3);
569
+ --ams-checkbox-checkmark-disabled-border-width: var(--ams-border-width-md);
459
570
  --ams-checkbox-checkmark-disabled-border-color: var(--ams-color-neutral-grey3);
460
571
  --ams-checkbox-checkmark-checked-hover-background-color: var(--ams-color-dark-blue);
461
572
  --ams-checkbox-checkmark-checked-background-color: var(--ams-color-primary-blue);
573
+ --ams-checkbox-checkmark-border-width: var(--ams-border-width-md);
462
574
  --ams-checkbox-checkmark-border-color: var(--ams-color-primary-blue);
463
575
  --ams-checkbox-outline-offset: var(--ams-focus-outline-offset);
464
576
  --ams-checkbox-line-height: var(--ams-text-level-5-line-height);
@@ -469,28 +581,28 @@
469
581
  --ams-card-outline-offset: var(--ams-focus-outline-offset);
470
582
  --ams-card-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
471
583
  --ams-card-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
472
- --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
473
584
  --ams-card-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
474
585
  --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey2);
475
586
  --ams-button-tertiary-hover-color: var(--ams-color-dark-blue);
476
- --ams-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--ams-color-dark-blue);
587
+ --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
477
588
  --ams-button-tertiary-color: var(--ams-color-primary-blue);
478
- --ams-button-secondary-focus-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
589
+ --ams-button-secondary-focus-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
479
590
  --ams-button-secondary-disabled-color: var(--ams-color-neutral-grey2);
480
- --ams-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey2);
591
+ --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
481
592
  --ams-button-secondary-disabled-background-color: var(--ams-color-primary-white);
482
593
  --ams-button-secondary-hover-color: var(--ams-color-dark-blue);
483
- --ams-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--ams-color-dark-blue);
484
- --ams-button-secondary-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
594
+ --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
595
+ --ams-button-secondary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
485
596
  --ams-button-secondary-color: var(--ams-color-primary-blue);
486
597
  --ams-button-secondary-background-color: var(--ams-color-primary-white);
487
- --ams-button-primary-hover-box-shadow: inset 0 0 0 2px var(--ams-color-dark-blue);
598
+ --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
488
599
  --ams-button-primary-hover-background-color: var(--ams-color-dark-blue);
489
- --ams-button-primary-disabled-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey2);
600
+ --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
490
601
  --ams-button-primary-disabled-background-color: var(--ams-color-neutral-grey2);
491
602
  --ams-button-primary-color: var(--ams-color-primary-white);
492
- --ams-button-primary-box-shadow: inset 0 0 0 2px var(--ams-color-primary-blue);
603
+ --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
493
604
  --ams-button-primary-background-color: var(--ams-color-primary-blue);
605
+ --ams-button-forced-color-mode-border: var(--ams-border-width-md) solid;
494
606
  --ams-button-disabled-cursor: var(--ams-action-disabled-cursor);
495
607
  --ams-button-outline-offset: var(--ams-focus-outline-offset);
496
608
  --ams-button-padding-inline: var(--ams-space-inside-md);
@@ -499,12 +611,11 @@
499
611
  --ams-button-font-size: var(--ams-text-level-5-font-size);
500
612
  --ams-button-font-family: var(--ams-text-font-family);
501
613
  --ams-button-cursor: var(--ams-action-activate-cursor);
502
- --ams-breadcrumb-item-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
503
- --ams-breadcrumb-item-link-hover-color: var(--ams-color-dark-blue);
504
- --ams-breadcrumb-item-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
505
- --ams-breadcrumb-item-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
506
- --ams-breadcrumb-item-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
507
- --ams-breadcrumb-item-link-outline-offset: var(--ams-focus-outline-offset);
614
+ --ams-breadcrumb-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
615
+ --ams-breadcrumb-link-hover-color: var(--ams-color-dark-blue);
616
+ --ams-breadcrumb-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
617
+ --ams-breadcrumb-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
618
+ --ams-breadcrumb-link-outline-offset: var(--ams-focus-outline-offset);
508
619
  --ams-breadcrumb-line-height: var(--ams-text-level-6-line-height);
509
620
  --ams-breadcrumb-font-weight: var(--ams-text-font-weight-normal);
510
621
  --ams-breadcrumb-font-size: var(--ams-text-level-6-font-size);
@@ -517,20 +628,32 @@
517
628
  --ams-blockquote-color: var(--ams-color-primary-black);
518
629
  --ams-badge-yellow-color: var(--ams-color-primary-black);
519
630
  --ams-badge-yellow-background-color: var(--ams-color-yellow);
631
+ --ams-badge-white-color: var(--ams-color-primary-black);
632
+ --ams-badge-white-background-color: var(--ams-color-primary-white);
633
+ --ams-badge-red-color: var(--ams-color-primary-white);
634
+ --ams-badge-red-background-color: var(--ams-color-primary-red);
520
635
  --ams-badge-purple-color: var(--ams-color-primary-white);
521
636
  --ams-badge-purple-background-color: var(--ams-color-purple);
522
637
  --ams-badge-orange-color: var(--ams-color-primary-black);
523
638
  --ams-badge-orange-background-color: var(--ams-color-orange);
524
639
  --ams-badge-magenta-color: var(--ams-color-primary-white);
525
640
  --ams-badge-magenta-background-color: var(--ams-color-magenta);
641
+ --ams-badge-light-blue-color: var(--ams-color-primary-black);
642
+ --ams-badge-light-blue-background-color: var(--ams-color-blue);
643
+ --ams-badge-grey-3-color: var(--ams-color-primary-white);
644
+ --ams-badge-grey-3-background-color: var(--ams-color-neutral-grey3);
645
+ --ams-badge-grey-2-color: var(--ams-color-primary-black);
646
+ --ams-badge-grey-2-background-color: var(--ams-color-neutral-grey2);
647
+ --ams-badge-grey-1-color: var(--ams-color-primary-black);
648
+ --ams-badge-grey-1-background-color: var(--ams-color-neutral-grey1);
526
649
  --ams-badge-green-color: var(--ams-color-primary-black);
527
650
  --ams-badge-green-background-color: var(--ams-color-green);
528
651
  --ams-badge-dark-green-color: var(--ams-color-primary-white);
529
652
  --ams-badge-dark-green-background-color: var(--ams-color-dark-green);
530
- --ams-badge-dark-blue-color: var(--ams-color-primary-white);
531
- --ams-badge-dark-blue-background-color: var(--ams-color-primary-blue);
532
- --ams-badge-blue-color: var(--ams-color-primary-black);
533
- --ams-badge-blue-background-color: var(--ams-color-blue);
653
+ --ams-badge-blue-color: var(--ams-color-primary-white);
654
+ --ams-badge-blue-background-color: var(--ams-color-primary-blue);
655
+ --ams-badge-black-color: var(--ams-color-primary-white);
656
+ --ams-badge-black-background-color: var(--ams-color-primary-black);
534
657
  --ams-badge-padding-inline: var(--ams-space-inside-xs);
535
658
  --ams-badge-line-height: var(--ams-text-level-5-line-height);
536
659
  --ams-badge-font-weight: var(--ams-text-font-weight-bold);
@@ -573,25 +696,32 @@
573
696
  --ams-alert-error-border-color: var(--ams-color-primary-red);
574
697
  --ams-alert-padding-inline: var(--ams-space-inside-lg);
575
698
  --ams-alert-padding-block: var(--ams-space-inside-md);
576
- --ams-accordion-panel-padding-inline: var(--ams-space-inside-md);
577
- --ams-accordion-panel-padding-block: var(--ams-space-inside-md);
578
- --ams-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--ams-color-neutral-grey3);
699
+ --ams-alert-border-width: var(--ams-border-width-xl);
700
+ --ams-accordion-panel-padding-block: 0 var(--ams-space-inside-md);
701
+ --ams-accordion-button-hover-color: var(--ams-color-dark-blue);
579
702
  --ams-accordion-button-focus-outline-offset: var(--ams-focus-outline-offset);
580
- --ams-accordion-button-padding-inline: var(--ams-space-inside-md);
581
703
  --ams-accordion-button-padding-block: var(--ams-space-inside-sm);
582
704
  --ams-accordion-button-line-height: var(--ams-text-level-5-line-height);
705
+ --ams-accordion-button-gap: var(--ams-space-inside-md);
583
706
  --ams-accordion-button-font-weight: var(--ams-text-font-weight-bold);
584
707
  --ams-accordion-button-font-size: var(--ams-text-level-5-font-size);
585
708
  --ams-accordion-button-font-family: var(--ams-text-font-family);
586
709
  --ams-accordion-button-color: var(--ams-color-primary-blue);
710
+ --ams-accordion-gap: var(--ams-space-inside-xs);
711
+ --ams-link-appearance-regular-hover-text-decoration-thickness: var(--ams-border-width-lg);
587
712
  --ams-link-appearance-on-background-light-color: var(--ams-color-primary-black);
588
713
  --ams-link-appearance-on-background-dark-color: var(--ams-color-primary-white);
589
714
  --ams-link-appearance-hover-color: var(--ams-color-dark-blue);
715
+ --ams-link-appearance-text-decoration-thickness: var(--ams-border-width-md);
590
716
  --ams-link-appearance-color: var(--ams-color-primary-blue);
717
+ --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
591
718
  --ams-top-task-link-label-color: var(--ams-link-appearance-color);
719
+ --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
592
720
  --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
721
+ --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
593
722
  --ams-pagination-color: var(--ams-link-appearance-color);
594
723
  --ams-page-menu-item-hover-color: var(--ams-link-appearance-hover-color);
724
+ --ams-page-menu-item-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
595
725
  --ams-page-menu-item-color: var(--ams-link-appearance-color);
596
726
  --ams-link-on-background-light-visited-color: var(--ams-link-appearance-on-background-light-color);
597
727
  --ams-link-on-background-light-hover-color: var(--ams-link-appearance-on-background-light-color);
@@ -599,6 +729,10 @@
599
729
  --ams-link-on-background-dark-visited-color: var(--ams-link-appearance-on-background-dark-color);
600
730
  --ams-link-on-background-dark-hover-color: var(--ams-link-appearance-on-background-dark-color);
601
731
  --ams-link-on-background-dark-color: var(--ams-link-appearance-on-background-dark-color);
732
+ --ams-link-standalone-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
733
+ --ams-link-standalone-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
734
+ --ams-link-inline-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
735
+ --ams-link-inline-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
602
736
  --ams-link-hover-color: var(--ams-link-appearance-hover-color);
603
737
  --ams-link-color: var(--ams-link-appearance-color);
604
738
  --ams-link-list-link-on-background-light-hover-color: var(--ams-link-appearance-on-background-light-color);
@@ -606,8 +740,11 @@
606
740
  --ams-link-list-link-on-background-dark-hover-color: var(--ams-link-appearance-on-background-dark-color);
607
741
  --ams-link-list-link-on-background-dark-color: var(--ams-link-appearance-on-background-dark-color);
608
742
  --ams-link-list-link-hover-color: var(--ams-link-appearance-hover-color);
743
+ --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
609
744
  --ams-link-list-link-color: var(--ams-link-appearance-color);
610
745
  --ams-card-link-hover-color: var(--ams-link-appearance-hover-color);
746
+ --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
611
747
  --ams-card-link-color: var(--ams-link-appearance-color);
612
- --ams-breadcrumb-item-link-color: var(--ams-link-appearance-color);
748
+ --ams-breadcrumb-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
749
+ --ams-breadcrumb-link-color: var(--ams-link-appearance-color);
613
750
  }