@amsterdam/design-system-tokens 0.7.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +27 -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 +145 -64
  8. package/dist/index.d.ts +159 -22
  9. package/dist/index.json +191 -54
  10. package/dist/index.mjs +129 -48
  11. package/dist/index.scss +145 -64
  12. package/dist/index.theme.css +145 -64
  13. package/package.json +1 -1
  14. package/src/brand/ams/border.tokens.json +12 -0
  15. package/src/common/ams/link-appearance.tokens.json +2 -2
  16. package/src/components/ams/accordion.tokens.json +6 -4
  17. package/src/components/ams/alert.tokens.json +1 -1
  18. package/src/components/ams/button.tokens.json +11 -8
  19. package/src/components/ams/checkbox.tokens.json +6 -2
  20. package/src/components/ams/date-input.tokens.json +45 -0
  21. package/src/components/ams/description-list.tokens.json +20 -0
  22. package/src/components/ams/{form-label.tokens.json → label.tokens.json} +1 -1
  23. package/src/components/ams/page-menu.tokens.json +2 -2
  24. package/src/components/ams/radio.tokens.json +4 -1
  25. package/src/components/ams/screen.tokens.json +1 -0
  26. package/src/components/ams/search-field.tokens.json +7 -6
  27. package/src/components/ams/select.tokens.json +41 -0
  28. package/src/components/ams/skip-link.tokens.json +1 -1
  29. package/src/components/ams/table.tokens.json +2 -2
  30. package/src/components/ams/tabs.tokens.json +3 -4
  31. package/src/components/ams/text-area.tokens.json +9 -8
  32. package/src/components/ams/text-input.tokens.json +8 -7
  33. package/src/components/ams/time-input.tokens.json +45 -0
  34. package/src/common/ams/border.tokens.json +0 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.8.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.1...design-system-tokens-v0.8.0) (2024-04-22)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * Rename Form Label to Label ([#1201](https://github.com/Amsterdam/design-system/issues/1201))
12
+ * Allow setting a background colour on Tabs List ([#1142](https://github.com/Amsterdam/design-system/issues/1142))
13
+
14
+ ### Features
15
+
16
+ * Add background colour and full-height prop to Screen ([#1144](https://github.com/Amsterdam/design-system/issues/1144)) ([c4621e8](https://github.com/Amsterdam/design-system/commit/c4621e817cb0306fe109046d41847725d47b33a2))
17
+ * Add border tokens and use rems for widths ([#1147](https://github.com/Amsterdam/design-system/issues/1147)) ([d91d889](https://github.com/Amsterdam/design-system/commit/d91d889c3a529a90167bd9b9d0d9c3174b2b0e05))
18
+ * Add date input ([#1152](https://github.com/Amsterdam/design-system/issues/1152)) ([afbbef8](https://github.com/Amsterdam/design-system/commit/afbbef8bb1a3d13fa47638ce2856def0c028b13f))
19
+ * Add Description List component ([#1139](https://github.com/Amsterdam/design-system/issues/1139)) ([ee3428a](https://github.com/Amsterdam/design-system/commit/ee3428ab701ea3980f26a8562acbecc6e4eb031e))
20
+ * Allow setting a background colour on Tabs List ([#1142](https://github.com/Amsterdam/design-system/issues/1142)) ([fedb1a1](https://github.com/Amsterdam/design-system/commit/fedb1a1d8f54decc81e5bd5081f8eb9a35dfb9b6))
21
+ * Remove border from accordion section and move chevron to the left ([#1116](https://github.com/Amsterdam/design-system/issues/1116)) ([3e23677](https://github.com/Amsterdam/design-system/commit/3e2367738664dcd0e4d3d4267c021c0992572da7))
22
+ * Rename Form Label to Label ([#1201](https://github.com/Amsterdam/design-system/issues/1201)) ([c5f82ab](https://github.com/Amsterdam/design-system/commit/c5f82abcc41ac4652af6c270325441d448d65525))
23
+ * Select component ([#1151](https://github.com/Amsterdam/design-system/issues/1151)) ([7679acc](https://github.com/Amsterdam/design-system/commit/7679acc7542c2e3d1279b9eaa364031092d16016))
24
+ * Set explicit white background on text fields ([#1200](https://github.com/Amsterdam/design-system/issues/1200)) ([e22d48e](https://github.com/Amsterdam/design-system/commit/e22d48eae8994eb370e3edef38a0ca1e015925bf))
25
+ * Time input component ([#1202](https://github.com/Amsterdam/design-system/issues/1202)) ([ccec68e](https://github.com/Amsterdam/design-system/commit/ccec68efafa02d5f9ac9bd4abea6c5e7cb72d556))
26
+ * Use fluid gaps in Page Menu ([#1146](https://github.com/Amsterdam/design-system/issues/1146)) ([848223b](https://github.com/Amsterdam/design-system/commit/848223bed7c0ad95de9ce1911c7313104a938f5b))
27
+
28
+
29
+ ### Bug Fixes
30
+
31
+ * Use correct text size in Text Input, Search Field, and Text Area ([#1150](https://github.com/Amsterdam/design-system/issues/1150)) ([d5462e4](https://github.com/Amsterdam/design-system/commit/d5462e4537cfb39d62d0cd31564cfff086238330))
32
+
6
33
  ## [0.7.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.7.0...design-system-tokens-v0.7.1) (2024-03-22)
7
34
 
8
35
 
package/dist/compact.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Mar 2024 15:51:06 GMT
3
+ * Generated on Mon, 22 Apr 2024 09:30:48 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/compact.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Mar 2024 15:51:06 GMT
3
+ * Generated on Mon, 22 Apr 2024 09:30:48 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
package/dist/compact.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Mar 2024 15:51:06 GMT
3
+ * Generated on Mon, 22 Apr 2024 09:30:48 GMT
4
4
  */
5
5
 
6
6
  export const amsSpaceGridXs = "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)";
package/dist/compact.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 22 Mar 2024 15:51:06 GMT
3
+ // Generated on Mon, 22 Apr 2024 09:30:48 GMT
4
4
 
5
5
  $ams-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
6
6
  $ams-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
package/dist/compact.theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Mar 2024 15:51:06 GMT
3
+ * Generated on Mon, 22 Apr 2024 09:30:48 GMT
4
4
  */
5
5
 
6
6
  .ams-theme--compact {
package/dist/index.css 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 Mon, 22 Apr 2024 09:30:48 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -11,16 +11,19 @@
11
11
  --ams-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
12
12
  --ams-unordered-list-list-style-type: '\2022';
13
13
  --ams-unordered-list-gap: 0.75rem;
14
+ --ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
15
+ --ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23BEBEBE'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
16
+ --ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
14
17
  --ams-text-area-padding-inline: 1rem;
15
18
  --ams-text-area-padding-block: 0.5rem;
16
19
  --ams-tabs-button-padding-inline: 1rem;
17
20
  --ams-tabs-button-padding-block: .5rem;
18
21
  --ams-tabs-button-outline-offset: -0.25rem;
19
- --ams-tabs-button-border: none;
20
- --ams-tabs-button-background-color: transparent;
21
22
  --ams-switch-thumb-height: 1.75rem;
22
23
  --ams-switch-thumb-width: 1.75rem;
23
24
  --ams-switch-width: 3.5rem;
25
+ --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
26
+ --ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
24
27
  --ams-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
25
28
  --ams-screen-x-wide-max-width: 132rem;
26
29
  --ams-screen-wide-max-width: 100rem;
@@ -31,8 +34,6 @@
31
34
  --ams-radio-circle-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
32
35
  --ams-radio-circle-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
33
36
  --ams-page-menu-item-gap: 0.5rem;
34
- --ams-page-menu-row-gap: 0.5rem;
35
- --ams-page-menu-column-gap: 2.5rem;
36
37
  --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
37
38
  --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; /* Indent less than the parent to start-align the child’s marker with the parent text. */
38
39
  --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
@@ -61,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
82
  --ams-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
78
- --ams-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
79
83
  --ams-link-appearance-regular-text-decoration-line: underline;
80
84
  --ams-link-appearance-text-underline-offset: 0.375rem;
81
- --ams-link-appearance-text-decoration-thickness: 0.125rem;
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
88
  --ams-focus-outline-offset: 2px;
86
- --ams-border-width-lg: 3px;
87
- --ams-border-width-md: 2px;
88
- --ams-border-width-sm: 1px;
89
89
  --ams-action-submit-cursor: pointer;
90
90
  --ams-action-navigate-cursor: pointer;
91
91
  --ams-action-inert-cursor: default;
@@ -145,6 +145,10 @@
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;
148
152
  --ams-unordered-list-line-height: var(--ams-text-level-5-line-height);
149
153
  --ams-unordered-list-inverse-color: var(--ams-color-primary-white);
150
154
  --ams-unordered-list-font-weight: var(--ams-text-font-weight-normal);
@@ -155,7 +159,6 @@
155
159
  --ams-top-task-link-label-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
156
160
  --ams-top-task-link-label-hover-color: var(--ams-color-dark-blue);
157
161
  --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
162
  --ams-top-task-link-label-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
160
163
  --ams-top-task-link-label-line-height: var(--ams-text-level-4-line-height);
161
164
  --ams-top-task-link-label-font-weight: var(--ams-text-font-weight-bold);
@@ -166,38 +169,56 @@
166
169
  --ams-top-task-link-description-font-size: var(--ams-text-level-6-font-size);
167
170
  --ams-top-task-link-description-font-family: var(--ams-text-font-family);
168
171
  --ams-top-task-link-description-color: var(--ams-color-primary-black);
172
+ --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
173
+ --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
174
+ --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
175
+ --ams-time-input-disabled-color: var(--ams-color-neutral-grey2);
176
+ --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
177
+ --ams-time-input-disabled-background-color: var(--ams-color-primary-white);
178
+ --ams-time-input-padding-inline: var(--ams-space-inside-md);
179
+ --ams-time-input-padding-block: var(--ams-space-inside-xs);
180
+ --ams-time-input-outline-offset: var(--ams-focus-outline-offset);
181
+ --ams-time-input-line-height: var(--ams-text-level-5-line-height);
182
+ --ams-time-input-font-weight: var(--ams-text-font-weight-normal);
183
+ --ams-time-input-font-size: var(--ams-text-level-5-font-size);
184
+ --ams-time-input-font-family: var(--ams-text-font-family);
185
+ --ams-time-input-color: var(--ams-color-primary-black);
186
+ --ams-time-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
187
+ --ams-time-input-background-color: var(--ams-color-primary-white);
169
188
  --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);
189
+ --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
190
+ --ams-text-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
191
+ --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
173
192
  --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);
193
+ --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
175
194
  --ams-text-input-disabled-background-color: var(--ams-color-primary-white);
176
195
  --ams-text-input-padding-inline: var(--ams-space-inside-md);
177
196
  --ams-text-input-padding-block: var(--ams-space-inside-xs);
178
197
  --ams-text-input-outline-offset: var(--ams-focus-outline-offset);
179
- --ams-text-input-line-height: var(--ams-text-level-6-line-height);
198
+ --ams-text-input-line-height: var(--ams-text-level-5-line-height);
180
199
  --ams-text-input-font-weight: var(--ams-text-font-weight-normal);
181
- --ams-text-input-font-size: var(--ams-text-level-6-font-size);
200
+ --ams-text-input-font-size: var(--ams-text-level-5-font-size);
182
201
  --ams-text-input-font-family: var(--ams-text-font-family);
183
202
  --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);
203
+ --ams-text-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
204
+ --ams-text-input-background-color: var(--ams-color-primary-white);
185
205
  --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);
206
+ --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
207
+ --ams-text-area-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
208
+ --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
189
209
  --ams-text-area-disabled-cursor: var(--ams-action-disabled-cursor);
190
210
  --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);
211
+ --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
192
212
  --ams-text-area-disabled-background-color: var(--ams-color-primary-white);
193
213
  --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);
214
+ --ams-text-area-min-height: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
215
+ --ams-text-area-line-height: var(--ams-text-level-5-line-height);
196
216
  --ams-text-area-font-weight: var(--ams-text-font-weight-normal);
197
- --ams-text-area-font-size: var(--ams-text-level-6-font-size);
217
+ --ams-text-area-font-size: var(--ams-text-level-5-font-size);
198
218
  --ams-text-area-font-family: var(--ams-text-font-family);
199
219
  --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);
220
+ --ams-text-area-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
221
+ --ams-text-area-background-color: var(--ams-color-primary-white);
201
222
  --ams-tabs-button-disabled-cursor: var(--ams-action-disabled-cursor);
202
223
  --ams-tabs-button-disabled-color: var(--ams-color-neutral-grey2);
203
224
  --ams-tabs-button-selected-color: var(--ams-color-primary-white);
@@ -205,20 +226,21 @@
205
226
  --ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 var(--ams-color-dark-blue);
206
227
  --ams-tabs-button-hover-color: var(--ams-color-dark-blue);
207
228
  --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
229
  --ams-tabs-button-font-weight: var(--ams-text-font-weight-normal);
230
+ --ams-tabs-button-font-size: var(--ams-text-level-5-font-size);
210
231
  --ams-tabs-button-font-family: var(--ams-text-font-family);
211
232
  --ams-tabs-button-cursor: var(--ams-action-activate-cursor);
212
233
  --ams-tabs-button-color: var(--ams-color-primary-blue);
213
- --ams-tabs-list-border-bottom: .125rem solid var(--ams-color-primary-blue);
234
+ --ams-tabs-list-border-bottom: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
235
+ --ams-tabs-list-background-color: var(--ams-color-primary-white);
214
236
  --ams-table-header-cell-font-weight: var(--ams-text-font-weight-bold);
215
237
  --ams-table-cell-padding-inline: var(--ams-space-inside-md);
216
238
  --ams-table-cell-padding-block: var(--ams-space-inside-md);
217
- --ams-table-cell-border-bottom: 1px solid var(--ams-color-neutral-grey1);
239
+ --ams-table-cell-border-bottom: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
218
240
  --ams-table-caption-font-weight: var(--ams-text-font-weight-bold);
219
241
  --ams-table-line-height: var(--ams-text-level-5-line-height);
220
- --ams-table-font-size: var(--ams-text-level-5-font-size);
221
242
  --ams-table-font-weight: var(--ams-text-font-weight-normal);
243
+ --ams-table-font-size: var(--ams-text-level-5-font-size);
222
244
  --ams-table-font-family: var(--ams-text-font-family);
223
245
  --ams-table-color: var(--ams-color-primary-black);
224
246
  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
@@ -241,42 +263,64 @@
241
263
  --ams-skip-link-padding-block: var(--ams-space-inside-xs);
242
264
  --ams-skip-link-outline-offset: var(--ams-focus-outline-offset);
243
265
  --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
266
  --ams-skip-link-font-weight: var(--ams-text-font-weight-normal);
267
+ --ams-skip-link-font-size: var(--ams-text-level-6-font-size);
246
268
  --ams-skip-link-font-family: var(--ams-text-font-family);
247
269
  --ams-skip-link-color: var(--ams-color-primary-white);
248
270
  --ams-skip-link-background-color: var(--ams-color-primary-blue);
271
+ --ams-select-option-disabled-color: var(--ams-color-neutral-grey2);
272
+ --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
273
+ --ams-select-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
274
+ --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
275
+ --ams-select-disabled-color: var(--ams-color-neutral-grey2);
276
+ --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
277
+ --ams-select-padding-inline: var(--ams-space-inside-md) calc(2 * var(--ams-space-inside-md) + 1em);
278
+ --ams-select-padding-block: var(--ams-space-inside-xs);
279
+ --ams-select-outline-offset: var(--ams-focus-outline-offset);
280
+ --ams-select-line-height: var(--ams-text-level-5-line-height);
281
+ --ams-select-font-weight: var(--ams-text-font-weight-normal);
282
+ --ams-select-font-size: var(--ams-text-level-5-font-size);
283
+ --ams-select-font-family: var(--ams-text-font-family);
284
+ --ams-select-color: var(--ams-color-primary-black);
285
+ --ams-select-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
286
+ --ams-select-background-position: right var(--ams-space-inside-md) center;
287
+ --ams-select-background-color: var(--ams-color-primary-white);
249
288
  --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);
289
+ --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
290
+ --ams-search-field-input-cancel-button-width: var(--ams-text-level-5-font-size);
291
+ --ams-search-field-input-cancel-button-height: var(--ams-text-level-5-font-size);
253
292
  --ams-search-field-input-cancel-button-color: var(--ams-color-primary-blue);
254
293
  --ams-search-field-input-padding-inline: var(--ams-space-inside-md);
255
294
  --ams-search-field-input-padding-block: var(--ams-space-inside-xs);
256
295
  --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);
296
+ --ams-search-field-input-line-height: var(--ams-text-level-5-line-height);
258
297
  --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);
298
+ --ams-search-field-input-font-size: var(--ams-text-level-5-font-size);
260
299
  --ams-search-field-input-font-family: var(--ams-text-font-family);
261
300
  --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);
301
+ --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
302
+ --ams-search-field-input-background-color: var(--ams-color-primary-white);
263
303
  --ams-search-field-button-padding-inline: var(--ams-space-inside-xs);
264
304
  --ams-search-field-button-padding-block: var(--ams-space-inside-xs);
265
305
  --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
266
306
  --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
267
307
  --ams-search-field-button-color: var(--ams-color-primary-white);
268
308
  --ams-search-field-button-background-color: var(--ams-color-primary-blue);
309
+ --ams-screen-background-color: var(--ams-color-primary-white);
269
310
  --ams-row-gap-xl: var(--ams-space-stack-xl);
270
311
  --ams-row-gap-lg: var(--ams-space-stack-lg);
271
312
  --ams-row-gap-md: var(--ams-space-stack-md);
272
313
  --ams-row-gap-sm: var(--ams-space-stack-sm);
273
314
  --ams-row-gap-xs: var(--ams-space-stack-xs);
315
+ --ams-radio-hover-text-decoration-thickness: var(--ams-border-width-md);
274
316
  --ams-radio-hover-color: var(--ams-color-dark-blue);
275
317
  --ams-radio-disabled-color: var(--ams-color-neutral-grey3);
276
318
  --ams-radio-circle-invalid-hover-border-color: var(--ams-color-primary-red);
277
319
  --ams-radio-circle-invalid-border-color: var(--ams-color-primary-red);
278
320
  --ams-radio-circle-hover-border-color: var(--ams-color-dark-blue);
321
+ --ams-radio-circle-disabled-border-width: var(--ams-border-width-md);
279
322
  --ams-radio-circle-disabled-border-color: var(--ams-color-neutral-grey3);
323
+ --ams-radio-circle-border-width: var(--ams-border-width-md);
280
324
  --ams-radio-circle-border-color: var(--ams-color-primary-blue);
281
325
  --ams-radio-outline-offset: var(--ams-focus-outline-offset);
282
326
  --ams-radio-line-height: var(--ams-text-level-5-line-height);
@@ -297,7 +341,6 @@
297
341
  --ams-pagination-button-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
298
342
  --ams-pagination-button-current-font-weight: var(--ams-text-font-weight-bold);
299
343
  --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
344
  --ams-pagination-button-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
302
345
  --ams-pagination-button-padding-inline: var(--ams-space-inside-sm);
303
346
  --ams-pagination-button-outline-offset: var(--ams-focus-outline-offset);
@@ -307,13 +350,14 @@
307
350
  --ams-pagination-font-family: var(--ams-text-font-family);
308
351
  --ams-page-menu-item-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
309
352
  --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
353
  --ams-page-menu-item-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
312
354
  --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
313
355
  --ams-page-menu-item-line-height: var(--ams-text-level-6-line-height);
314
356
  --ams-page-menu-item-font-weight: var(--ams-text-font-weight-normal);
315
357
  --ams-page-menu-item-font-size: var(--ams-text-level-6-font-size);
316
358
  --ams-page-menu-item-font-family: var(--ams-text-font-family);
359
+ --ams-page-menu-row-gap: var(--ams-space-grid-xs);
360
+ --ams-page-menu-column-gap: var(--ams-space-grid-md);
317
361
  --ams-page-heading-line-height: var(--ams-text-level-0-font-size);
318
362
  --ams-page-heading-inverse-color: var(--ams-color-primary-white);
319
363
  --ams-page-heading-font-weight: var(--ams-text-font-weight-bold);
@@ -338,17 +382,13 @@
338
382
  --ams-logo-title-color: var(--ams-color-primary-red);
339
383
  --ams-logo-emblem-color: var(--ams-color-primary-red);
340
384
  --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
385
  --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
386
  --ams-link-standalone-text-decoration-line: var(--ams-link-appearance-regular-text-decoration-line);
345
387
  --ams-link-standalone-line-height: var(--ams-text-level-5-line-height);
346
388
  --ams-link-standalone-font-size: var(--ams-text-level-5-font-size);
347
389
  --ams-link-inline-visited-color: var(--ams-color-purple);
348
390
  --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
391
  --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
392
  --ams-link-inline-text-decoration-line: var(--ams-link-appearance-regular-text-decoration-line);
353
393
  --ams-link-outline-offset: var(--ams-focus-outline-offset);
354
394
  --ams-link-font-weight: var(--ams-text-font-weight-normal);
@@ -361,11 +401,15 @@
361
401
  --ams-link-list-link-small-line-height: var(--ams-text-level-6-line-height);
362
402
  --ams-link-list-link-small-font-size: var(--ams-text-level-6-font-size);
363
403
  --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
404
  --ams-link-list-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
366
405
  --ams-link-list-link-outline-offset: var(--ams-focus-outline-offset);
367
406
  --ams-link-list-link-font-weight: var(--ams-text-font-weight-normal);
368
407
  --ams-link-list-link-font-family: var(--ams-text-font-family);
408
+ --ams-label-line-height: var(--ams-text-level-4-line-height);
409
+ --ams-label-font-weight: var(--ams-text-font-weight-bold);
410
+ --ams-label-font-size: var(--ams-text-level-4-font-size);
411
+ --ams-label-font-family: var(--ams-text-font-family);
412
+ --ams-label-color: var(--ams-color-primary-black);
369
413
  --ams-icon-size-6-line-height: var(--ams-text-level-6-line-height);
370
414
  --ams-icon-size-6-font-size: var(--ams-text-level-6-font-size);
371
415
  --ams-icon-size-5-line-height: var(--ams-text-level-5-line-height);
@@ -419,11 +463,6 @@
419
463
  --ams-gap-md: var(--ams-space-grid-md);
420
464
  --ams-gap-sm: var(--ams-space-grid-sm);
421
465
  --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
466
  --ams-form-field-character-counter-error-color: var(--ams-color-primary-red);
428
467
  --ams-form-field-character-counter-line-height: var(--ams-text-level-6-line-height);
429
468
  --ams-form-field-character-counter-font-weight: var(--ams-text-font-weight-normal);
@@ -436,11 +475,38 @@
436
475
  --ams-fieldset-legend-font-family: var(--ams-text-font-family);
437
476
  --ams-fieldset-legend-color: var(--ams-color-primary-black);
438
477
  --ams-dialog-background-color: var(--ams-color-primary-white);
478
+ --ams-description-list-details-padding-inline-start: var(--ams-space-inside-xl);
479
+ --ams-description-list-details-font-weight: var(--ams-text-font-weight-bold);
480
+ --ams-description-list-row-gap: var(--ams-space-stack-md);
481
+ --ams-description-list-line-height: var(--ams-text-level-5-line-height);
482
+ --ams-description-list-inverse-color: var(--ams-color-primary-white);
483
+ --ams-description-list-gap: var(--ams-space-stack-md);
484
+ --ams-description-list-font-weight: var(--ams-text-font-weight-normal);
485
+ --ams-description-list-font-size: var(--ams-text-level-5-font-size);
486
+ --ams-description-list-font-family: var(--ams-text-font-family);
487
+ --ams-description-list-color: var(--ams-color-primary-black);
488
+ --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
489
+ --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
490
+ --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
491
+ --ams-date-input-disabled-color: var(--ams-color-neutral-grey2);
492
+ --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
493
+ --ams-date-input-disabled-background-color: var(--ams-color-primary-white);
494
+ --ams-date-input-padding-inline: var(--ams-space-inside-lg);
495
+ --ams-date-input-padding-block: var(--ams-space-inside-xs);
496
+ --ams-date-input-outline-offset: var(--ams-focus-outline-offset);
497
+ --ams-date-input-line-height: var(--ams-text-level-5-line-height);
498
+ --ams-date-input-font-weight: var(--ams-text-font-weight-normal);
499
+ --ams-date-input-font-size: var(--ams-text-level-5-font-size);
500
+ --ams-date-input-font-family: var(--ams-text-font-family);
501
+ --ams-date-input-color: var(--ams-color-primary-black);
502
+ --ams-date-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
503
+ --ams-date-input-background-color: var(--ams-color-primary-white);
439
504
  --ams-column-gap-xl: var(--ams-space-grid-xl);
440
505
  --ams-column-gap-lg: var(--ams-space-grid-lg);
441
506
  --ams-column-gap-md: var(--ams-space-grid-md);
442
507
  --ams-column-gap-sm: var(--ams-space-grid-sm);
443
508
  --ams-column-gap-xs: var(--ams-space-grid-xs);
509
+ --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-md);
444
510
  --ams-checkbox-hover-color: var(--ams-color-dark-blue);
445
511
  --ams-checkbox-disabled-color: var(--ams-color-neutral-grey3);
446
512
  --ams-checkbox-checkmark-indeterminate-hover-background-color: var(--ams-color-dark-blue);
@@ -451,14 +517,17 @@
451
517
  --ams-checkbox-checkmark-invalid-checked-hover-background-color: var(--ams-color-primary-red);
452
518
  --ams-checkbox-checkmark-invalid-checked-background-color: var(--ams-color-primary-red);
453
519
  --ams-checkbox-checkmark-invalid-border-color: var(--ams-color-primary-red);
520
+ --ams-checkbox-checkmark-hover-border-width: var(--ams-border-width-lg);
454
521
  --ams-checkbox-checkmark-hover-border-color: var(--ams-color-dark-blue);
455
522
  --ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: var(--ams-color-neutral-grey3);
456
523
  --ams-checkbox-checkmark-disabled-indeterminate-background-color: var(--ams-color-neutral-grey3);
457
524
  --ams-checkbox-checkmark-disabled-checked-hover-background-color: var(--ams-color-neutral-grey3);
458
525
  --ams-checkbox-checkmark-disabled-checked-background-color: var(--ams-color-neutral-grey3);
526
+ --ams-checkbox-checkmark-disabled-border-width: var(--ams-border-width-md);
459
527
  --ams-checkbox-checkmark-disabled-border-color: var(--ams-color-neutral-grey3);
460
528
  --ams-checkbox-checkmark-checked-hover-background-color: var(--ams-color-dark-blue);
461
529
  --ams-checkbox-checkmark-checked-background-color: var(--ams-color-primary-blue);
530
+ --ams-checkbox-checkmark-border-width: var(--ams-border-width-md);
462
531
  --ams-checkbox-checkmark-border-color: var(--ams-color-primary-blue);
463
532
  --ams-checkbox-outline-offset: var(--ams-focus-outline-offset);
464
533
  --ams-checkbox-line-height: var(--ams-text-level-5-line-height);
@@ -469,28 +538,28 @@
469
538
  --ams-card-outline-offset: var(--ams-focus-outline-offset);
470
539
  --ams-card-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
471
540
  --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
541
  --ams-card-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
474
542
  --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey2);
475
543
  --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);
544
+ --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
477
545
  --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);
546
+ --ams-button-secondary-focus-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
479
547
  --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);
548
+ --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
481
549
  --ams-button-secondary-disabled-background-color: var(--ams-color-primary-white);
482
550
  --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);
551
+ --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
552
+ --ams-button-secondary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
485
553
  --ams-button-secondary-color: var(--ams-color-primary-blue);
486
554
  --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);
555
+ --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
488
556
  --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);
557
+ --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
490
558
  --ams-button-primary-disabled-background-color: var(--ams-color-neutral-grey2);
491
559
  --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);
560
+ --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
493
561
  --ams-button-primary-background-color: var(--ams-color-primary-blue);
562
+ --ams-button-forced-color-mode-border: var(--ams-border-width-md) solid;
494
563
  --ams-button-disabled-cursor: var(--ams-action-disabled-cursor);
495
564
  --ams-button-outline-offset: var(--ams-focus-outline-offset);
496
565
  --ams-button-padding-inline: var(--ams-space-inside-md);
@@ -502,7 +571,6 @@
502
571
  --ams-breadcrumb-item-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
503
572
  --ams-breadcrumb-item-link-hover-color: var(--ams-color-dark-blue);
504
573
  --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
574
  --ams-breadcrumb-item-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
507
575
  --ams-breadcrumb-item-link-outline-offset: var(--ams-focus-outline-offset);
508
576
  --ams-breadcrumb-line-height: var(--ams-text-level-6-line-height);
@@ -573,25 +641,31 @@
573
641
  --ams-alert-error-border-color: var(--ams-color-primary-red);
574
642
  --ams-alert-padding-inline: var(--ams-space-inside-lg);
575
643
  --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);
644
+ --ams-alert-border-width: var(--ams-border-width-xl);
645
+ --ams-accordion-panel-padding-block: 0 var(--ams-space-inside-md);
646
+ --ams-accordion-button-hover-color: var(--ams-color-dark-blue);
579
647
  --ams-accordion-button-focus-outline-offset: var(--ams-focus-outline-offset);
580
- --ams-accordion-button-padding-inline: var(--ams-space-inside-md);
581
648
  --ams-accordion-button-padding-block: var(--ams-space-inside-sm);
582
649
  --ams-accordion-button-line-height: var(--ams-text-level-5-line-height);
650
+ --ams-accordion-button-gap: var(--ams-space-inside-md);
583
651
  --ams-accordion-button-font-weight: var(--ams-text-font-weight-bold);
584
652
  --ams-accordion-button-font-size: var(--ams-text-level-5-font-size);
585
653
  --ams-accordion-button-font-family: var(--ams-text-font-family);
586
654
  --ams-accordion-button-color: var(--ams-color-primary-blue);
655
+ --ams-accordion-gap: var(--ams-space-inside-xs);
656
+ --ams-link-appearance-regular-hover-text-decoration-thickness: var(--ams-border-width-lg);
587
657
  --ams-link-appearance-on-background-light-color: var(--ams-color-primary-black);
588
658
  --ams-link-appearance-on-background-dark-color: var(--ams-color-primary-white);
589
659
  --ams-link-appearance-hover-color: var(--ams-color-dark-blue);
660
+ --ams-link-appearance-text-decoration-thickness: var(--ams-border-width-md);
590
661
  --ams-link-appearance-color: var(--ams-color-primary-blue);
662
+ --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
591
663
  --ams-top-task-link-label-color: var(--ams-link-appearance-color);
592
664
  --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
665
+ --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
593
666
  --ams-pagination-color: var(--ams-link-appearance-color);
594
667
  --ams-page-menu-item-hover-color: var(--ams-link-appearance-hover-color);
668
+ --ams-page-menu-item-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
595
669
  --ams-page-menu-item-color: var(--ams-link-appearance-color);
596
670
  --ams-link-on-background-light-visited-color: var(--ams-link-appearance-on-background-light-color);
597
671
  --ams-link-on-background-light-hover-color: var(--ams-link-appearance-on-background-light-color);
@@ -599,6 +673,10 @@
599
673
  --ams-link-on-background-dark-visited-color: var(--ams-link-appearance-on-background-dark-color);
600
674
  --ams-link-on-background-dark-hover-color: var(--ams-link-appearance-on-background-dark-color);
601
675
  --ams-link-on-background-dark-color: var(--ams-link-appearance-on-background-dark-color);
676
+ --ams-link-standalone-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
677
+ --ams-link-standalone-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
678
+ --ams-link-inline-hover-text-decoration-thickness: var(--ams-link-appearance-regular-hover-text-decoration-thickness);
679
+ --ams-link-inline-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
602
680
  --ams-link-hover-color: var(--ams-link-appearance-hover-color);
603
681
  --ams-link-color: var(--ams-link-appearance-color);
604
682
  --ams-link-list-link-on-background-light-hover-color: var(--ams-link-appearance-on-background-light-color);
@@ -606,8 +684,11 @@
606
684
  --ams-link-list-link-on-background-dark-hover-color: var(--ams-link-appearance-on-background-dark-color);
607
685
  --ams-link-list-link-on-background-dark-color: var(--ams-link-appearance-on-background-dark-color);
608
686
  --ams-link-list-link-hover-color: var(--ams-link-appearance-hover-color);
687
+ --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
609
688
  --ams-link-list-link-color: var(--ams-link-appearance-color);
610
689
  --ams-card-link-hover-color: var(--ams-link-appearance-hover-color);
690
+ --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
611
691
  --ams-card-link-color: var(--ams-link-appearance-color);
692
+ --ams-breadcrumb-item-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
612
693
  --ams-breadcrumb-item-link-color: var(--ams-link-appearance-color);
613
694
  }