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