@amsterdam/design-system-tokens 0.15.0 → 1.0.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 (54) hide show
  1. package/CHANGELOG.md +61 -0
  2. package/LICENSE.md +2 -2
  3. package/README.md +4 -4
  4. package/dist/compact.css +3 -0
  5. package/dist/compact.d.ts +7 -0
  6. package/dist/compact.json +8 -1
  7. package/dist/compact.mjs +4 -0
  8. package/dist/compact.scss +3 -0
  9. package/dist/compact.theme.css +3 -0
  10. package/dist/index.css +239 -217
  11. package/dist/index.d.ts +292 -250
  12. package/dist/index.json +361 -319
  13. package/dist/index.mjs +293 -273
  14. package/dist/index.scss +231 -209
  15. package/dist/index.theme.css +239 -217
  16. package/package.json +3 -3
  17. package/src/brand/ams/focus.tokens.json +1 -1
  18. package/src/brand/ams/typography.compact.tokens.json +2 -1
  19. package/src/brand/ams/typography.tokens.json +1 -0
  20. package/src/components/ams/accordion.tokens.json +1 -0
  21. package/src/components/ams/alert.tokens.json +7 -8
  22. package/src/components/ams/avatar.tokens.json +10 -1
  23. package/src/components/ams/badge.tokens.json +1 -1
  24. package/src/components/ams/button.tokens.json +8 -12
  25. package/src/components/ams/card.tokens.json +8 -2
  26. package/src/components/ams/checkbox.tokens.json +57 -36
  27. package/src/components/ams/date-input.tokens.json +9 -8
  28. package/src/components/ams/dialog.tokens.json +25 -8
  29. package/src/components/ams/field-set.tokens.json +2 -1
  30. package/src/components/ams/file-input.tokens.json +8 -11
  31. package/src/components/ams/grid.tokens.json +6 -6
  32. package/src/components/ams/heading.tokens.json +1 -0
  33. package/src/components/ams/hint.tokens.json +1 -1
  34. package/src/components/ams/label.tokens.json +2 -1
  35. package/src/components/ams/link.tokens.json +8 -27
  36. package/src/components/ams/{footer.tokens.json → page-footer.tokens.json} +7 -1
  37. package/src/components/ams/page-header.compact.tokens.json +10 -0
  38. package/src/components/ams/{header.tokens.json → page-header.tokens.json} +10 -2
  39. package/src/components/ams/page-heading.tokens.json +1 -0
  40. package/src/components/ams/page.tokens.json +8 -0
  41. package/src/components/ams/password-input.tokens.json +7 -6
  42. package/src/components/ams/radio.tokens.json +0 -2
  43. package/src/components/ams/search-field.tokens.json +7 -4
  44. package/src/components/ams/select.tokens.json +11 -6
  45. package/src/components/ams/standalone-link.tokens.json +40 -0
  46. package/src/components/ams/switch.tokens.json +2 -2
  47. package/src/components/ams/tabs.tokens.json +3 -3
  48. package/src/components/ams/text-area.tokens.json +7 -6
  49. package/src/components/ams/text-input.tokens.json +7 -6
  50. package/src/components/ams/time-input.tokens.json +9 -8
  51. package/src/components/ams/mega-menu.tokens.json +0 -18
  52. package/src/components/ams/page-menu.tokens.json +0 -24
  53. package/src/components/ams/screen.tokens.json +0 -13
  54. package/src/components/ams/top-task-link.tokens.json +0 -29
package/dist/index.theme.css CHANGED
@@ -39,7 +39,7 @@
39
39
  --ams-color-text-secondary: #767676;
40
40
  --ams-cursor-disabled: not-allowed;
41
41
  --ams-cursor-interactive: pointer;
42
- --ams-focus-outline-offset: 0.125rem;
42
+ --ams-focus-outline-offset: 0.25rem;
43
43
  --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
44
44
  --ams-space-s: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
45
45
  --ams-space-m: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
@@ -69,6 +69,7 @@
69
69
  --ams-typography-heading-5-line-height: 1.3345;
70
70
  --ams-typography-heading-6-line-height: 1.3776;
71
71
  --ams-typography-heading-font-weight: 800;
72
+ --ams-typography-heading-text-wrap: balance;
72
73
  --ams-links-text-underline-offset: 0.3333em;
73
74
  --ams-links-hover-text-underline-offset: 0.2778em;
74
75
  --ams-links-subtle-text-decoration-line: none;
@@ -76,24 +77,33 @@
76
77
  --ams-accordion-button-padding-inline: 0;
77
78
  --ams-accordion-panel-padding-block: 0;
78
79
  --ams-accordion-panel-padding-inline: 0;
80
+ --ams-alert-border-style: solid;
81
+ --ams-avatar-border-style: solid;
79
82
  --ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
80
83
  --ams-breadcrumb-separator-block-size: 1ex;
81
84
  --ams-breadcrumb-separator-inline-size: 1ex;
85
+ --ams-button-border-style: solid;
82
86
  --ams-button-tertiary-background-color: transparent;
83
- --ams-button-tertiary-disabled-background-color: transparent;
84
- --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");
85
- --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");
87
+ --ams-button-tertiary-border-color: transparent;
88
+ --ams-button-tertiary-hover-border-color: currentColor;
89
+ --ams-checkbox-icon-container-inline-size: 1.5rem;
90
+ --ams-date-input-border-color: currentColor;
91
+ --ams-date-input-border-style: solid;
86
92
  --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>");
87
- --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>");
88
- --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>");
93
+ --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
94
+ --ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
89
95
  --ams-description-list-narrow-grid-template-columns: 1fr 4fr;
90
96
  --ams-description-list-medium-grid-template-columns: 1fr 2fr;
91
97
  --ams-description-list-wide-grid-template-columns: 1fr 1fr;
98
+ --ams-dialog-border-style: solid;
92
99
  --ams-dialog-max-inline-size: 48rem;
93
100
  --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
94
101
  --ams-dialog-body-padding-block: 0;
102
+ --ams-file-input-border-color: currentColor;
103
+ --ams-file-input-border-style: dashed;
104
+ --ams-file-input-file-selector-button-border-color: currentColor;
105
+ --ams-file-input-file-selector-button-border-style: solid;
95
106
  --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
96
- --ams-footer-spotlight-background-color: #004699;
97
107
  --ams-grid-column-count: 4;
98
108
  --ams-grid-medium-column-count: 8;
99
109
  --ams-grid-wide-column-count: 12;
@@ -103,43 +113,52 @@
103
113
  --ams-image-slider-thumbnails-thumbnail-opacity: 40%;
104
114
  --ams-image-slider-thumbnails-thumbnail-in-view-opacity: 100%;
105
115
  --ams-image-slider-thumbnails-thumbnail-hover-opacity: 100%;
106
- --ams-link-inline-font-family: inherit;
107
- --ams-link-inline-font-size: inherit;
108
- --ams-link-inline-line-height: inherit;
116
+ --ams-link-font-family: inherit;
117
+ --ams-link-font-size: inherit;
118
+ --ams-link-line-height: inherit;
109
119
  --ams-logo-min-block-size: 2.5rem;
110
120
  --ams-logo-emblem-color: #ec0000;
111
121
  --ams-logo-title-color: #ec0000;
112
- --ams-mega-menu-list-category-column-width: 20rem;
113
122
  --ams-ordered-list-list-style-type: decimal;
114
- --ams-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
115
- --ams-ordered-list-item-padding-inline-start: 0.25rem; /* The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
123
+ --ams-ordered-list-item-margin-inline-start: 2.25rem; /** Divide your total indentation width over margin and padding to position the marker. */
124
+ --ams-ordered-list-item-padding-inline-start: 0.25rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
116
125
  --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
117
126
  --ams-ordered-list-ordered-list-padding-block-end: 0;
118
- --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. */
119
- --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
120
- --ams-radio-hover-indicator-stroke-width: 3px;
121
- --ams-radio-circle-stroke-width: 2px;
127
+ --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. */
128
+ --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
129
+ --ams-page-footer-spotlight-background-color: #004699;
130
+ --ams-page-max-inline-size: 100rem;
131
+ --ams-password-input-border-color: currentColor;
132
+ --ams-password-input-border-style: solid;
122
133
  --ams-radio-icon-container-inline-size: 1.5rem;
123
- --ams-screen-wide-max-inline-size: 100rem;
124
- --ams-screen-x-wide-max-inline-size: 132rem;
134
+ --ams-search-field-input-border-color: currentColor;
135
+ --ams-search-field-input-border-style: solid;
125
136
  --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>");
126
137
  --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>");
127
- --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>");
138
+ --ams-select-border-color: currentColor;
139
+ --ams-select-border-style: solid;
140
+ --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
141
+ --ams-select-hover-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
128
142
  --ams-switch-background-color: #767676;
129
143
  --ams-switch-inline-size: 3.5rem;
130
- --ams-switch-thumb-inline-size: 1.75rem;
131
144
  --ams-switch-thumb-block-size: 1.75rem;
132
- --ams-tabs-button-outline-offset: -0.25rem;
145
+ --ams-switch-thumb-inline-size: 1.75rem;
146
+ --ams-text-area-border-color: currentColor;
147
+ --ams-text-area-border-style: solid;
148
+ --ams-text-input-border-color: currentColor;
149
+ --ams-text-input-border-style: solid;
150
+ --ams-time-input-border-color: currentColor;
151
+ --ams-time-input-border-style: solid;
133
152
  --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>");
134
- --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>");
135
- --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>");
153
+ --ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
154
+ --ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
136
155
  --ams-unordered-list-list-style-type: '\2022';
137
- --ams-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
138
- --ams-unordered-list-item-padding-inline-start: 0.875rem; /* The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
156
+ --ams-unordered-list-item-margin-inline-start: 1.625rem; /** Divide your total indentation width over margin and padding to position the marker. */
157
+ --ams-unordered-list-item-padding-inline-start: 0.875rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
139
158
  --ams-unordered-list-unordered-list-list-style-type: '\2013';
140
159
  --ams-unordered-list-unordered-list-padding-block-end: 0;
141
- --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. */
142
- --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
160
+ --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. */
161
+ --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
143
162
  --ams-typography-heading-3-font-size: var(--ams-typography-body-text-x-large-font-size);
144
163
  --ams-typography-heading-4-font-size: var(--ams-typography-body-text-large-font-size);
145
164
  --ams-typography-heading-5-font-size: var(--ams-typography-body-text-font-size);
@@ -161,25 +180,28 @@
161
180
  --ams-accordion-button-line-height: var(--ams-typography-heading-4-line-height);
162
181
  --ams-accordion-button-outline-offset: var(--ams-focus-outline-offset);
163
182
  --ams-accordion-button-padding-block: var(--ams-space-s);
183
+ --ams-accordion-button-text-wrap: var(--ams-typography-heading-text-wrap);
164
184
  --ams-accordion-button-hover-color: var(--ams-color-interactive-hover);
165
185
  --ams-action-group-gap: var(--ams-space-m);
166
186
  --ams-alert-background-color: var(--ams-color-background);
167
- --ams-alert-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-info);
168
- --ams-alert-forced-colors-border-width: var(--ams-border-width-xl);
187
+ --ams-alert-border-color: var(--ams-color-feedback-info);
188
+ --ams-alert-border-width: var(--ams-border-width-xl);
169
189
  --ams-alert-severity-indicator-background-color: var(--ams-color-feedback-info);
170
190
  --ams-alert-severity-indicator-padding-block: var(--ams-space-m);
171
- --ams-alert-severity-indicator-padding-inline: var(--ams-space-xs);
191
+ --ams-alert-severity-indicator-padding-inline: var(--ams-space-s);
172
192
  --ams-alert-content-gap: var(--ams-space-s);
173
193
  --ams-alert-content-padding-block: var(--ams-space-m);
174
194
  --ams-alert-content-padding-inline: var(--ams-space-m);
175
- --ams-alert-error-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-error);
195
+ --ams-alert-error-border-color: var(--ams-color-feedback-error);
176
196
  --ams-alert-error-severity-indicator-background-color: var(--ams-color-feedback-error);
177
- --ams-alert-success-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-success);
197
+ --ams-alert-success-border-color: var(--ams-color-feedback-success);
178
198
  --ams-alert-success-severity-indicator-background-color: var(--ams-color-feedback-success);
179
- --ams-alert-warning-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-warning);
199
+ --ams-alert-warning-border-color: var(--ams-color-feedback-warning);
180
200
  --ams-alert-warning-severity-indicator-background-color: var(--ams-color-feedback-warning);
181
201
  --ams-avatar-aspect-ratio: var(--ams-aspect-ratio-1-1);
182
202
  --ams-avatar-background-color: var(--ams-color-highlight-purple);
203
+ --ams-avatar-border-color: var(--ams-color-highlight-purple);
204
+ --ams-avatar-border-width: var(--ams-border-width-m);
183
205
  --ams-avatar-color: var(--ams-color-text-inverse);
184
206
  --ams-avatar-font-family: var(--ams-typography-font-family);
185
207
  --ams-avatar-font-size: var(--ams-typography-body-text-small-font-size);
@@ -189,16 +211,22 @@
189
211
  --ams-avatar-padding-inline: var(--ams-space-xs);
190
212
  --ams-avatar-forced-colors-border-width: var(--ams-border-width-m);
191
213
  --ams-avatar-azure-background-color: var(--ams-color-highlight-azure);
192
- --ams-avatar-azure-color: var(--ams-color-text);
214
+ --ams-avatar-azure-border-color: var(--ams-color-highlight-azure);
215
+ --ams-avatar-azure-color: var(--ams-color-text-inverse);
193
216
  --ams-avatar-green-background-color: var(--ams-color-highlight-green);
217
+ --ams-avatar-green-border-color: var(--ams-color-highlight-green);
194
218
  --ams-avatar-green-color: var(--ams-color-text-inverse);
195
219
  --ams-avatar-lime-background-color: var(--ams-color-highlight-lime);
220
+ --ams-avatar-lime-border-color: var(--ams-color-highlight-lime);
196
221
  --ams-avatar-lime-color: var(--ams-color-text);
197
222
  --ams-avatar-magenta-background-color: var(--ams-color-highlight-magenta);
223
+ --ams-avatar-magenta-border-color: var(--ams-color-highlight-magenta);
198
224
  --ams-avatar-magenta-color: var(--ams-color-text-inverse);
199
225
  --ams-avatar-orange-background-color: var(--ams-color-highlight-orange);
226
+ --ams-avatar-orange-border-color: var(--ams-color-highlight-orange);
200
227
  --ams-avatar-orange-color: var(--ams-color-text);
201
228
  --ams-avatar-yellow-background-color: var(--ams-color-highlight-yellow);
229
+ --ams-avatar-yellow-border-color: var(--ams-color-highlight-yellow);
202
230
  --ams-avatar-yellow-color: var(--ams-color-text);
203
231
  --ams-badge-background-color: var(--ams-color-feedback-success);
204
232
  --ams-badge-color: var(--ams-color-text-inverse);
@@ -208,7 +236,7 @@
208
236
  --ams-badge-line-height: var(--ams-typography-body-text-line-height);
209
237
  --ams-badge-padding-inline: var(--ams-space-xs);
210
238
  --ams-badge-azure-background-color: var(--ams-color-feedback-info);
211
- --ams-badge-azure-color: var(--ams-color-text);
239
+ --ams-badge-azure-color: var(--ams-color-text-inverse);
212
240
  --ams-badge-lime-background-color: var(--ams-color-highlight-lime);
213
241
  --ams-badge-lime-color: var(--ams-color-text);
214
242
  --ams-badge-magenta-background-color: var(--ams-color-highlight-magenta);
@@ -236,6 +264,7 @@
236
264
  --ams-breadcrumb-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
237
265
  --ams-breadcrumb-link-text-underline-offset: var(--ams-links-text-underline-offset);
238
266
  --ams-breadcrumb-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
267
+ --ams-button-border-width: var(--ams-border-width-m);
239
268
  --ams-button-cursor: var(--ams-cursor-interactive);
240
269
  --ams-button-font-family: var(--ams-typography-font-family);
241
270
  --ams-button-font-size: var(--ams-typography-body-text-font-size);
@@ -246,30 +275,27 @@
246
275
  --ams-button-padding-block: var(--ams-space-s);
247
276
  --ams-button-padding-inline: var(--ams-space-m);
248
277
  --ams-button-disabled-cursor: var(--ams-cursor-disabled);
249
- --ams-button-forced-color-mode-border: var(--ams-border-width-m) solid;
250
278
  --ams-button-primary-background-color: var(--ams-color-interactive);
251
- --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
279
+ --ams-button-primary-border-color: var(--ams-color-interactive);
252
280
  --ams-button-primary-color: var(--ams-color-text-inverse);
253
281
  --ams-button-primary-disabled-background-color: var(--ams-color-interactive-disabled);
254
- --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
282
+ --ams-button-primary-disabled-border-color: var(--ams-color-interactive-disabled);
255
283
  --ams-button-primary-hover-background-color: var(--ams-color-interactive-hover);
256
- --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-hover);
284
+ --ams-button-primary-hover-border-color: var(--ams-color-interactive-hover);
257
285
  --ams-button-secondary-background-color: var(--ams-color-background);
258
286
  --ams-button-secondary-color: var(--ams-color-interactive);
259
- --ams-button-secondary-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
260
- --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-l) var(--ams-color-interactive-hover);
287
+ --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
261
288
  --ams-button-secondary-hover-color: var(--ams-color-interactive-hover);
262
- --ams-button-secondary-disabled-background-color: var(--ams-color-background);
263
- --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
264
289
  --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
265
290
  --ams-button-tertiary-color: var(--ams-color-interactive);
266
- --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-hover);
267
291
  --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
268
292
  --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
269
293
  --ams-button-icon-only-padding-block: var(--ams-space-s);
270
294
  --ams-button-icon-only-padding-inline: var(--ams-space-s);
271
- --ams-card-gap: var(--ams-space-s);
272
- --ams-card-heading-group-gap: var(--ams-space-s);
295
+ --ams-card-heading-margin-block-end: var(--ams-space-xs);
296
+ --ams-card-heading-group-gap: var(--ams-space-xs);
297
+ --ams-card-heading-group-margin-block-end: var(--ams-space-xs);
298
+ --ams-card-image-margin-block-end: var(--ams-space-s);
273
299
  --ams-card-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
274
300
  --ams-card-link-text-underline-offset: var(--ams-links-text-underline-offset);
275
301
  --ams-card-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
@@ -288,26 +314,31 @@
288
314
  --ams-checkbox-gap: var(--ams-space-s);
289
315
  --ams-checkbox-line-height: var(--ams-typography-body-text-line-height);
290
316
  --ams-checkbox-outline-offset: var(--ams-focus-outline-offset);
291
- --ams-checkbox-checkmark-border-color: var(--ams-color-interactive);
292
- --ams-checkbox-checkmark-border-width: var(--ams-border-width-m);
293
- --ams-checkbox-checkmark-checked-background-color: var(--ams-color-interactive);
294
- --ams-checkbox-checkmark-checked-hover-background-color: var(--ams-color-interactive-hover);
295
- --ams-checkbox-checkmark-disabled-border-color: var(--ams-color-interactive-disabled);
296
- --ams-checkbox-checkmark-disabled-border-width: var(--ams-border-width-m);
297
- --ams-checkbox-checkmark-disabled-checked-background-color: var(--ams-color-interactive-disabled);
298
- --ams-checkbox-checkmark-disabled-checked-hover-background-color: var(--ams-color-interactive-disabled);
299
- --ams-checkbox-checkmark-disabled-indeterminate-background-color: var(--ams-color-interactive-disabled);
300
- --ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: var(--ams-color-interactive-disabled);
301
- --ams-checkbox-checkmark-hover-border-color: var(--ams-color-interactive-hover);
302
- --ams-checkbox-checkmark-hover-border-width: var(--ams-border-width-l);
303
- --ams-checkbox-checkmark-invalid-border-color: var(--ams-color-interactive-invalid);
304
- --ams-checkbox-checkmark-invalid-checked-background-color: var(--ams-color-interactive-invalid);
305
- --ams-checkbox-checkmark-invalid-checked-hover-background-color: var(--ams-color-interactive-invalid-hover);
306
- --ams-checkbox-checkmark-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
307
- --ams-checkbox-checkmark-invalid-indeterminate-background-color: var(--ams-color-interactive-invalid);
308
- --ams-checkbox-checkmark-invalid-indeterminate-hover-background-color: var(--ams-color-interactive-invalid-hover);
309
- --ams-checkbox-checkmark-indeterminate-background-color: var(--ams-color-interactive);
310
- --ams-checkbox-checkmark-indeterminate-hover-background-color: var(--ams-color-interactive-hover);
317
+ --ams-checkbox-checked-indicator-stroke: var(--ams-color-interactive-inverse);
318
+ --ams-checkbox-indeterminate-indicator-stroke: var(--ams-color-interactive-inverse);
319
+ --ams-checkbox-hover-indicator-hover-stroke: var(--ams-color-interactive-hover);
320
+ --ams-checkbox-hover-indicator-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
321
+ --ams-checkbox-rectangle-fill: var(--ams-color-background);
322
+ --ams-checkbox-rectangle-stroke: var(--ams-color-interactive);
323
+ --ams-checkbox-rectangle-checked-fill: var(--ams-color-interactive);
324
+ --ams-checkbox-rectangle-checked-disabled-fill: var(--ams-color-interactive-disabled);
325
+ --ams-checkbox-rectangle-checked-disabled-hover-fill: var(--ams-color-interactive-disabled);
326
+ --ams-checkbox-rectangle-checked-hover-fill: var(--ams-color-interactive-hover);
327
+ --ams-checkbox-rectangle-checked-hover-disabled-invalid-fill: var(--ams-color-interactive-disabled);
328
+ --ams-checkbox-rectangle-checked-invalid-fill: var(--ams-color-interactive-invalid);
329
+ --ams-checkbox-rectangle-checked-invalid-hover-fill: var(--ams-color-interactive-invalid-hover);
330
+ --ams-checkbox-rectangle-disabled-stroke: var(--ams-color-interactive-disabled);
331
+ --ams-checkbox-rectangle-hover-stroke: var(--ams-color-interactive-hover);
332
+ --ams-checkbox-rectangle-hover-disabled-invalid-stroke: var(--ams-color-interactive-disabled);
333
+ --ams-checkbox-rectangle-indeterminate-fill: var(--ams-color-interactive);
334
+ --ams-checkbox-rectangle-indeterminate-disabled-fill: var(--ams-color-interactive-disabled);
335
+ --ams-checkbox-rectangle-indeterminate-disabled-hover-fill: var(--ams-color-interactive-disabled);
336
+ --ams-checkbox-rectangle-indeterminate-hover-fill: var(--ams-color-interactive-hover);
337
+ --ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill: var(--ams-color-interactive-disabled);
338
+ --ams-checkbox-rectangle-indeterminate-invalid-fill: var(--ams-color-interactive-invalid);
339
+ --ams-checkbox-rectangle-indeterminate-invalid-hover-fill: var(--ams-color-interactive-invalid-hover);
340
+ --ams-checkbox-rectangle-invalid-stroke: var(--ams-color-interactive-invalid);
341
+ --ams-checkbox-rectangle-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
311
342
  --ams-checkbox-disabled-cursor: var(--ams-cursor-disabled);
312
343
  --ams-checkbox-disabled-color: var(--ams-color-interactive-disabled);
313
344
  --ams-checkbox-hover-color: var(--ams-color-interactive-hover);
@@ -318,7 +349,7 @@
318
349
  --ams-column-gap-large: var(--ams-space-l);
319
350
  --ams-column-gap-x-large: var(--ams-space-xl);
320
351
  --ams-date-input-background-color: var(--ams-color-background);
321
- --ams-date-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
352
+ --ams-date-input-border-width: var(--ams-border-width-m);
322
353
  --ams-date-input-color: var(--ams-color-text);
323
354
  --ams-date-input-font-family: var(--ams-typography-font-family);
324
355
  --ams-date-input-font-size: var(--ams-typography-body-text-font-size);
@@ -328,13 +359,12 @@
328
359
  --ams-date-input-padding-block: var(--ams-space-s);
329
360
  --ams-date-input-padding-inline: var(--ams-space-m);
330
361
  --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
331
- --ams-date-input-disabled-background-color: var(--ams-color-background);
332
- --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
333
362
  --ams-date-input-disabled-color: var(--ams-color-interactive-disabled);
334
363
  --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
335
- --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
336
- --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
337
- --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
364
+ --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
365
+ --ams-date-input-invalid-border-color: var(--ams-color-interactive-invalid);
366
+ --ams-date-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
367
+ --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
338
368
  --ams-description-list-color: var(--ams-color-text);
339
369
  --ams-description-list-column-gap: var(--ams-space-l);
340
370
  --ams-description-list-font-family: var(--ams-typography-font-family);
@@ -346,16 +376,23 @@
346
376
  --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
347
377
  --ams-description-list-description-padding-inline-start: var(--ams-space-l);
348
378
  --ams-dialog-background-color: var(--ams-color-background);
349
- --ams-dialog-border: var(--ams-border-width-m) solid var(--ams-dialog-background-color);
379
+ --ams-dialog-border-width: var(--ams-border-width-m);
350
380
  --ams-dialog-gap: var(--ams-space-m);
351
- --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-xl));
352
- --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
381
+ --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-l));
382
+ --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-l));
383
+ --ams-dialog-medium-inline-size: calc(100% - 2 * var(--ams-space-xl));
384
+ --ams-dialog-medium-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
353
385
  --ams-dialog-header-gap: var(--ams-space-m);
354
- --ams-dialog-header-padding-block: var(--ams-space-xl) 0;
355
- --ams-dialog-header-padding-inline: var(--ams-space-2xl);
356
- --ams-dialog-body-padding-inline: var(--ams-space-2xl);
357
- --ams-dialog-footer-padding-block: 0 var(--ams-space-xl);
358
- --ams-dialog-footer-padding-inline: var(--ams-space-2xl);
386
+ --ams-dialog-header-padding-block: var(--ams-space-l) 0;
387
+ --ams-dialog-header-padding-inline: var(--ams-space-l);
388
+ --ams-dialog-header-medium-padding-block: var(--ams-space-xl) 0;
389
+ --ams-dialog-header-medium-padding-inline: var(--ams-space-xl);
390
+ --ams-dialog-body-padding-inline: var(--ams-space-l);
391
+ --ams-dialog-body-medium-padding-inline: var(--ams-space-xl);
392
+ --ams-dialog-footer-padding-block: 0 var(--ams-space-l);
393
+ --ams-dialog-footer-padding-inline: var(--ams-space-l);
394
+ --ams-dialog-footer-medium-padding-block: 0 var(--ams-space-xl);
395
+ --ams-dialog-footer-medium-padding-inline: var(--ams-space-xl);
359
396
  --ams-error-message-color: var(--ams-color-feedback-error);
360
397
  --ams-error-message-font-family: var(--ams-typography-font-family);
361
398
  --ams-error-message-font-size: var(--ams-typography-body-text-small-font-size);
@@ -369,6 +406,7 @@
369
406
  --ams-field-set-legend-font-weight: var(--ams-typography-heading-font-weight);
370
407
  --ams-field-set-legend-line-height: var(--ams-typography-heading-4-line-height);
371
408
  --ams-field-set-legend-margin-block-end: var(--ams-space-m);
409
+ --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
372
410
  --ams-field-gap: var(--ams-space-s);
373
411
  --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
374
412
  --ams-field-invalid-padding-inline-start: var(--ams-space-m);
@@ -380,31 +418,29 @@
380
418
  --ams-figure-caption-line-height: var(--ams-typography-body-text-small-line-height);
381
419
  --ams-figure-caption-inverse-color: var(--ams-color-text-inverse);
382
420
  --ams-file-input-background-color: var(--ams-color-background);
383
- --ams-file-input-border: var(--ams-border-width-s) dashed var(--ams-color-interactive-secondary);
421
+ --ams-file-input-border-width: var(--ams-border-width-m);
384
422
  --ams-file-input-color: var(--ams-color-text);
385
423
  --ams-file-input-cursor: var(--ams-cursor-interactive);
386
424
  --ams-file-input-font-family: var(--ams-typography-font-family);
387
425
  --ams-file-input-font-size: var(--ams-typography-body-text-font-size);
388
426
  --ams-file-input-font-weight: var(--ams-typography-body-text-font-weight);
389
427
  --ams-file-input-line-height: var(--ams-typography-body-text-line-height);
390
- --ams-file-input-outline-offset: calc(var(--ams-focus-outline-offset) * 2); /* Compensate for the dashed border */
428
+ --ams-file-input-outline-offset: var(--ams-focus-outline-offset);
391
429
  --ams-file-input-padding-block: var(--ams-space-m);
392
430
  --ams-file-input-padding-inline: var(--ams-space-m);
393
431
  --ams-file-input-disabled-color: var(--ams-color-interactive-disabled);
394
432
  --ams-file-input-disabled-cursor: var(--ams-cursor-disabled);
395
433
  --ams-file-input-file-selector-button-background-color: var(--ams-color-background);
396
- --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
434
+ --ams-file-input-file-selector-button-border-width: var(--ams-border-width-m);
397
435
  --ams-file-input-file-selector-button-color: var(--ams-color-interactive);
398
436
  --ams-file-input-file-selector-button-cursor: var(--ams-cursor-interactive);
399
437
  --ams-file-input-file-selector-button-margin-inline-end: var(--ams-space-m);
400
438
  --ams-file-input-file-selector-button-padding-block: var(--ams-space-s);
401
439
  --ams-file-input-file-selector-button-padding-inline: var(--ams-space-m);
402
- --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-l) var(--ams-color-interactive-hover);
440
+ --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
403
441
  --ams-file-input-file-selector-button-hover-color: var(--ams-color-interactive-hover);
404
- --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
405
442
  --ams-file-input-file-selector-button-disabled-color: var(--ams-color-interactive-disabled);
406
443
  --ams-file-input-file-selector-button-disabled-cursor: var(--ams-cursor-disabled);
407
- --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-m) solid;
408
444
  --ams-file-list-gap: var(--ams-space-m);
409
445
  --ams-file-list-padding-block: var(--ams-space-m);
410
446
  --ams-file-list-file-font-family: var(--ams-typography-font-family);
@@ -413,49 +449,16 @@
413
449
  --ams-file-list-file-gap: var(--ams-space-s);
414
450
  --ams-file-list-file-line-height: var(--ams-typography-body-text-small-line-height);
415
451
  --ams-file-list-file-details-color: var(--ams-color-text-secondary);
416
- --ams-footer-menu-column-gap: var(--ams-space-l);
417
- --ams-footer-menu-padding-block: var(--ams-space-l);
418
- --ams-footer-menu-row-gap: var(--ams-space-xs);
419
- --ams-footer-menu-link-font-family: var(--ams-typography-font-family);
420
- --ams-footer-menu-link-font-size: var(--ams-typography-body-text-small-font-size);
421
- --ams-footer-menu-link-font-weight: var(--ams-typography-body-text-font-weight);
422
- --ams-footer-menu-link-line-height: var(--ams-typography-body-text-small-line-height);
423
- --ams-footer-menu-link-outline-offset: var(--ams-focus-outline-offset);
424
- --ams-footer-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
425
- --ams-footer-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
426
- --ams-footer-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
427
452
  --ams-grid-column-gap: var(--ams-space-xl);
428
- --ams-grid-padding-block-s: var(--ams-space-l);
429
- --ams-grid-padding-block-m: var(--ams-space-xl);
430
- --ams-grid-padding-block-l: var(--ams-space-2xl);
453
+ --ams-grid-padding-block-l: var(--ams-space-l);
454
+ --ams-grid-padding-block-xl: var(--ams-space-xl);
455
+ --ams-grid-padding-block-2xl: var(--ams-space-2xl);
431
456
  --ams-grid-padding-inline: var(--ams-space-l);
432
- --ams-grid-row-gap-s: var(--ams-space-l);
433
- --ams-grid-row-gap-m: var(--ams-space-xl);
434
- --ams-grid-row-gap-l: var(--ams-space-2xl);
457
+ --ams-grid-row-gap-l: var(--ams-space-l);
458
+ --ams-grid-row-gap-xl: var(--ams-space-xl);
459
+ --ams-grid-row-gap-2xl: var(--ams-space-2xl);
435
460
  --ams-grid-medium-padding-inline: var(--ams-space-xl);
436
461
  --ams-grid-wide-padding-inline: var(--ams-space-2xl);
437
- --ams-header-font-family: var(--ams-typography-font-family);
438
- --ams-header-padding-block: var(--ams-space-l);
439
- --ams-header-logo-link-column-gap: var(--ams-space-m);
440
- --ams-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
441
- --ams-header-brand-name-color: var(--ams-color-text);
442
- --ams-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
443
- --ams-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
444
- --ams-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
445
- --ams-header-menu-column-gap: var(--ams-space-l);
446
- --ams-header-menu-row-gap: var(--ams-space-xs);
447
- --ams-header-menu-item-column-gap: var(--ams-space-xs);
448
- --ams-header-menu-item-font-family: var(--ams-typography-font-family);
449
- --ams-header-menu-item-font-size: var(--ams-typography-body-text-font-size);
450
- --ams-header-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
451
- --ams-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
452
- --ams-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
453
- --ams-header-menu-item-padding-block: var(--ams-space-xs);
454
- --ams-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
455
- --ams-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
456
- --ams-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
457
- --ams-header-navigation-column-gap: var(--ams-space-l);
458
- --ams-header-navigation-row-gap: var(--ams-space-s);
459
462
  --ams-heading-1-font-size: var(--ams-typography-heading-1-font-size);
460
463
  --ams-heading-1-line-height: var(--ams-typography-heading-1-line-height);
461
464
  --ams-heading-2-font-size: var(--ams-typography-heading-2-font-size);
@@ -467,8 +470,9 @@
467
470
  --ams-heading-color: var(--ams-color-text);
468
471
  --ams-heading-font-family: var(--ams-typography-font-family);
469
472
  --ams-heading-font-weight: var(--ams-typography-heading-font-weight);
473
+ --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
470
474
  --ams-heading-inverse-color: var(--ams-color-text-inverse);
471
- --ams-hint-color: var(--ams-color-text-secondary);
475
+ --ams-hint-font-weight: var(--ams-typography-body-text-font-weight);
472
476
  --ams-icon-button-color: var(--ams-color-interactive);
473
477
  --ams-icon-button-cursor: var(--ams-cursor-interactive);
474
478
  --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
@@ -507,6 +511,7 @@
507
511
  --ams-label-font-family: var(--ams-typography-font-family);
508
512
  --ams-label-font-weight: var(--ams-typography-heading-font-weight);
509
513
  --ams-label-line-height: var(--ams-typography-heading-4-line-height);
514
+ --ams-label-text-wrap: var(--ams-typography-heading-text-wrap);
510
515
  --ams-link-list-gap: var(--ams-space-s);
511
516
  --ams-link-list-link-font-family: var(--ams-typography-font-family);
512
517
  --ams-link-list-link-font-size: var(--ams-typography-body-text-font-size);
@@ -521,21 +526,13 @@
521
526
  --ams-link-list-link-large-font-size: var(--ams-typography-body-text-large-font-size);
522
527
  --ams-link-list-link-large-line-height: var(--ams-typography-body-text-large-line-height);
523
528
  --ams-link-list-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
524
- --ams-link-font-family: var(--ams-typography-font-family);
525
529
  --ams-link-font-weight: var(--ams-typography-body-text-font-weight);
526
530
  --ams-link-outline-offset: var(--ams-focus-outline-offset);
527
- --ams-link-inline-text-underline-offset: var(--ams-links-text-underline-offset);
528
- --ams-link-inline-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
529
- --ams-link-standalone-font-size: var(--ams-typography-body-text-font-size);
530
- --ams-link-standalone-line-height: var(--ams-typography-body-text-line-height);
531
- --ams-link-standalone-text-underline-offset: var(--ams-links-text-underline-offset);
532
- --ams-link-standalone-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
531
+ --ams-link-text-underline-offset: var(--ams-links-text-underline-offset);
532
+ --ams-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
533
533
  --ams-logo-block-size: var(--ams-space-xl);
534
534
  --ams-logo-subsite-color: var(--ams-color-text);
535
535
  --ams-mark-background-color: var(--ams-color-highlight-yellow);
536
- --ams-mega-menu-list-category-column-gap: var(--ams-space-xl); /* Must have the same value as `ams.grid.column-gap`. */
537
- --ams-mega-menu-list-category-padding-block-start: var(--ams-space-m);
538
- --ams-mega-menu-list-category-padding-block-end: var(--ams-space-xl); /* Must have the same value as `ams.grid.row-gap.md`. */
539
536
  --ams-ordered-list-color: var(--ams-color-text);
540
537
  --ams-ordered-list-font-family: var(--ams-typography-font-family);
541
538
  --ams-ordered-list-font-size: var(--ams-typography-body-text-font-size);
@@ -547,23 +544,49 @@
547
544
  --ams-ordered-list-inverse-color: var(--ams-color-text-inverse);
548
545
  --ams-ordered-list-ordered-list-gap: var(--ams-space-s);
549
546
  --ams-ordered-list-ordered-list-padding-block-start: var(--ams-space-s);
547
+ --ams-page-footer-menu-column-gap: var(--ams-space-l);
548
+ --ams-page-footer-menu-padding-block: var(--ams-space-l);
549
+ --ams-page-footer-menu-row-gap: var(--ams-space-xs);
550
+ --ams-page-footer-menu-link-font-family: var(--ams-typography-font-family);
551
+ --ams-page-footer-menu-link-font-size: var(--ams-typography-body-text-small-font-size);
552
+ --ams-page-footer-menu-link-font-weight: var(--ams-typography-body-text-font-weight);
553
+ --ams-page-footer-menu-link-line-height: var(--ams-typography-body-text-small-line-height);
554
+ --ams-page-footer-menu-link-outline-offset: var(--ams-focus-outline-offset);
555
+ --ams-page-footer-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
556
+ --ams-page-footer-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
557
+ --ams-page-footer-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
558
+ --ams-page-header-font-family: var(--ams-typography-font-family);
559
+ --ams-page-header-padding-block: var(--ams-space-l);
560
+ --ams-page-header-logo-link-column-gap: var(--ams-space-m);
561
+ --ams-page-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
562
+ --ams-page-header-brand-name-color: var(--ams-color-text);
563
+ --ams-page-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
564
+ --ams-page-header-brand-name-line-height: var(--ams-typography-heading-4-line-height);
565
+ --ams-page-header-brand-name-text-wrap: var(--ams-typography-heading-text-wrap);
566
+ --ams-page-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
567
+ --ams-page-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
568
+ --ams-page-header-menu-column-gap: var(--ams-space-l);
569
+ --ams-page-header-menu-row-gap: var(--ams-space-xs);
570
+ --ams-page-header-menu-item-column-gap: var(--ams-space-xs);
571
+ --ams-page-header-menu-item-font-family: var(--ams-typography-font-family);
572
+ --ams-page-header-menu-item-font-size: var(--ams-typography-body-text-font-size);
573
+ --ams-page-header-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
574
+ --ams-page-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
575
+ --ams-page-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
576
+ --ams-page-header-menu-item-padding-block: var(--ams-space-xs);
577
+ --ams-page-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
578
+ --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
579
+ --ams-page-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
580
+ --ams-page-header-navigation-column-gap: var(--ams-space-l);
581
+ --ams-page-header-navigation-row-gap: var(--ams-space-s);
550
582
  --ams-page-heading-color: var(--ams-color-text);
551
583
  --ams-page-heading-font-family: var(--ams-typography-font-family);
552
584
  --ams-page-heading-font-size: var(--ams-typography-heading-0-font-size);
553
585
  --ams-page-heading-font-weight: var(--ams-typography-heading-font-weight);
554
586
  --ams-page-heading-line-height: var(--ams-typography-heading-0-line-height);
587
+ --ams-page-heading-text-wrap: var(--ams-typography-heading-text-wrap);
555
588
  --ams-page-heading-inverse-color: var(--ams-color-text-inverse);
556
- --ams-page-menu-column-gap: var(--ams-space-xl);
557
- --ams-page-menu-row-gap: var(--ams-space-m);
558
- --ams-page-menu-item-font-family: var(--ams-typography-font-family);
559
- --ams-page-menu-item-font-size: var(--ams-typography-body-text-small-font-size);
560
- --ams-page-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
561
- --ams-page-menu-item-gap: var(--ams-space-s);
562
- --ams-page-menu-item-line-height: var(--ams-typography-body-text-small-line-height);
563
- --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
564
- --ams-page-menu-item-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
565
- --ams-page-menu-item-text-underline-offset: var(--ams-links-text-underline-offset);
566
- --ams-page-menu-item-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
589
+ --ams-page-background-color: var(--ams-color-background);
567
590
  --ams-pagination-font-family: var(--ams-typography-font-family);
568
591
  --ams-pagination-font-size: var(--ams-typography-body-text-font-size);
569
592
  --ams-pagination-font-weight: var(--ams-typography-body-text-font-weight);
@@ -586,7 +609,7 @@
586
609
  --ams-paragraph-large-font-size: var(--ams-typography-body-text-large-font-size);
587
610
  --ams-paragraph-large-line-height: var(--ams-typography-body-text-large-line-height);
588
611
  --ams-password-input-background-color: var(--ams-color-background);
589
- --ams-password-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
612
+ --ams-password-input-border-width: var(--ams-border-width-m);
590
613
  --ams-password-input-color: var(--ams-color-text);
591
614
  --ams-password-input-font-family: var(--ams-typography-font-family);
592
615
  --ams-password-input-font-size: var(--ams-typography-body-text-font-size);
@@ -595,13 +618,12 @@
595
618
  --ams-password-input-outline-offset: var(--ams-focus-outline-offset);
596
619
  --ams-password-input-padding-block: var(--ams-space-s);
597
620
  --ams-password-input-padding-inline: var(--ams-space-m);
598
- --ams-password-input-disabled-background-color: var(--ams-color-background);
599
- --ams-password-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
600
621
  --ams-password-input-disabled-color: var(--ams-color-interactive-disabled);
601
622
  --ams-password-input-disabled-cursor: var(--ams-cursor-disabled);
602
- --ams-password-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
603
- --ams-password-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
604
- --ams-password-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
623
+ --ams-password-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
624
+ --ams-password-input-invalid-border-color: var(--ams-color-interactive-invalid);
625
+ --ams-password-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
626
+ --ams-password-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
605
627
  --ams-password-input-placeholder-color: var(--ams-color-text-secondary);
606
628
  --ams-radio-color: var(--ams-color-text);
607
629
  --ams-radio-cursor: var(--ams-cursor-interactive);
@@ -638,9 +660,8 @@
638
660
  --ams-row-gap-medium: var(--ams-space-m);
639
661
  --ams-row-gap-large: var(--ams-space-l);
640
662
  --ams-row-gap-x-large: var(--ams-space-xl);
641
- --ams-screen-background-color: var(--ams-color-background);
642
663
  --ams-search-field-input-background-color: var(--ams-color-background);
643
- --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
664
+ --ams-search-field-input-border-width: var(--ams-border-width-m);
644
665
  --ams-search-field-input-color: var(--ams-color-text);
645
666
  --ams-search-field-input-font-family: var(--ams-typography-font-family);
646
667
  --ams-search-field-input-font-size: var(--ams-typography-body-text-font-size);
@@ -653,13 +674,14 @@
653
674
  --ams-search-field-input-cancel-button-color: var(--ams-color-interactive);
654
675
  --ams-search-field-input-cancel-button-cursor: var(--ams-cursor-interactive);
655
676
  --ams-search-field-input-cancel-button-inline-size: var(--ams-typography-body-text-font-size);
656
- --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
657
- --ams-search-field-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
658
- --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
677
+ --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
678
+ --ams-search-field-input-invalid-border-color: var(--ams-color-interactive-invalid);
679
+ --ams-search-field-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
680
+ --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
659
681
  --ams-search-field-input-placeholder-color: var(--ams-color-text-secondary);
660
682
  --ams-select-background-color: var(--ams-color-background);
661
683
  --ams-select-background-position: right var(--ams-space-m) center;
662
- --ams-select-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
684
+ --ams-select-border-width: var(--ams-border-width-m);
663
685
  --ams-select-color: var(--ams-color-text);
664
686
  --ams-select-font-family: var(--ams-typography-font-family);
665
687
  --ams-select-font-size: var(--ams-typography-body-text-font-size);
@@ -668,12 +690,12 @@
668
690
  --ams-select-outline-offset: var(--ams-focus-outline-offset);
669
691
  --ams-select-padding-block: var(--ams-space-s);
670
692
  --ams-select-padding-inline: var(--ams-space-m) calc(2 * var(--ams-space-m) + 1em);
671
- --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
672
693
  --ams-select-disabled-color: var(--ams-color-interactive-disabled);
673
694
  --ams-select-disabled-cursor: var(--ams-cursor-disabled);
674
- --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
675
- --ams-select-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
676
- --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
695
+ --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
696
+ --ams-select-invalid-border-color: var(--ams-color-interactive-invalid);
697
+ --ams-select-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
698
+ --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
677
699
  --ams-select-option-disabled-color: var(--ams-color-interactive-disabled);
678
700
  --ams-skip-link-background-color: var(--ams-color-interactive);
679
701
  --ams-skip-link-color: var(--ams-color-text-inverse);
@@ -692,10 +714,21 @@
692
714
  --ams-spotlight-magenta-background-color: var(--ams-color-highlight-magenta);
693
715
  --ams-spotlight-orange-background-color: var(--ams-color-highlight-orange);
694
716
  --ams-spotlight-yellow-background-color: var(--ams-color-highlight-yellow);
717
+ --ams-standalone-link-column-gap: var(--ams-space-s);
718
+ --ams-standalone-link-font-family: var(--ams-typography-font-family);
719
+ --ams-standalone-link-font-size: var(--ams-typography-body-text-font-size);
720
+ --ams-standalone-link-font-weight: var(--ams-typography-body-text-font-weight);
721
+ --ams-standalone-link-line-height: var(--ams-typography-body-text-line-height);
722
+ --ams-standalone-link-outline-offset: var(--ams-focus-outline-offset);
723
+ --ams-standalone-link-text-underline-offset: var(--ams-links-text-underline-offset);
724
+ --ams-standalone-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
725
+ --ams-standalone-link-with-icon-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
726
+ --ams-standalone-link-with-icon-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
695
727
  --ams-switch-cursor: var(--ams-cursor-interactive);
696
728
  --ams-switch-outline-offset: var(--ams-focus-outline-offset);
697
729
  --ams-switch-thumb-background-color: var(--ams-color-background);
698
730
  --ams-switch-thumb-hover-color: var(--ams-color-interactive-hover);
731
+ --ams-switch-thumb-hover-box-shadow: 0 0 0 var(--ams-border-width-m) var(--ams-switch-thumb-hover-color);
699
732
  --ams-switch-checked-background-color: var(--ams-color-interactive);
700
733
  --ams-switch-disabled-background-color: var(--ams-color-interactive-disabled);
701
734
  --ams-switch-disabled-cursor: var(--ams-cursor-disabled);
@@ -731,16 +764,17 @@
731
764
  --ams-tabs-button-font-size: var(--ams-typography-body-text-font-size);
732
765
  --ams-tabs-button-font-weight: var(--ams-typography-body-text-font-weight);
733
766
  --ams-tabs-button-line-height: var(--ams-typography-body-text-line-height);
767
+ --ams-tabs-button-outline-offset: calc(var(--ams-focus-outline-offset) * -1);
734
768
  --ams-tabs-button-padding-block: var(--ams-space-s);
735
769
  --ams-tabs-button-padding-inline: var(--ams-space-m);
736
- --ams-tabs-button-hover-color: var(--ams-color-interactive-hover);
737
770
  --ams-tabs-button-hover-box-shadow: inset 0 calc(var(--ams-border-width-m) * -1);
771
+ --ams-tabs-button-hover-color: var(--ams-color-interactive-hover);
738
772
  --ams-tabs-button-selected-box-shadow: inset 0 calc(var(--ams-border-width-xl) * -1);
739
773
  --ams-tabs-button-selected-font-weight: var(--ams-typography-body-text-bold-font-weight);
740
774
  --ams-tabs-button-disabled-color: var(--ams-color-interactive-disabled);
741
775
  --ams-tabs-button-disabled-cursor: var(--ams-cursor-disabled);
742
776
  --ams-text-area-background-color: var(--ams-color-background);
743
- --ams-text-area-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
777
+ --ams-text-area-border-width: var(--ams-border-width-m);
744
778
  --ams-text-area-color: var(--ams-color-text);
745
779
  --ams-text-area-font-family: var(--ams-typography-font-family);
746
780
  --ams-text-area-font-size: var(--ams-typography-body-text-font-size);
@@ -750,16 +784,15 @@
750
784
  --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
751
785
  --ams-text-area-padding-block: var(--ams-space-s);
752
786
  --ams-text-area-padding-inline: var(--ams-space-m);
753
- --ams-text-area-disabled-background-color: var(--ams-color-background);
754
- --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
755
787
  --ams-text-area-disabled-color: var(--ams-color-interactive-disabled);
756
788
  --ams-text-area-disabled-cursor: var(--ams-cursor-disabled);
757
- --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
758
- --ams-text-area-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
759
- --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
789
+ --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
790
+ --ams-text-area-invalid-border-color: var(--ams-color-interactive-invalid);
791
+ --ams-text-area-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
792
+ --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
760
793
  --ams-text-area-placeholder-color: var(--ams-color-text-secondary);
761
794
  --ams-text-input-background-color: var(--ams-color-background);
762
- --ams-text-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
795
+ --ams-text-input-border-width: var(--ams-border-width-m);
763
796
  --ams-text-input-color: var(--ams-color-text);
764
797
  --ams-text-input-font-family: var(--ams-typography-font-family);
765
798
  --ams-text-input-font-size: var(--ams-typography-body-text-font-size);
@@ -768,16 +801,15 @@
768
801
  --ams-text-input-outline-offset: var(--ams-focus-outline-offset);
769
802
  --ams-text-input-padding-block: var(--ams-space-s);
770
803
  --ams-text-input-padding-inline: var(--ams-space-m);
771
- --ams-text-input-disabled-background-color: var(--ams-color-background);
772
- --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
773
804
  --ams-text-input-disabled-color: var(--ams-color-interactive-disabled);
774
805
  --ams-text-input-disabled-cursor: var(--ams-cursor-disabled);
775
- --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
776
- --ams-text-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
777
- --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
806
+ --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
807
+ --ams-text-input-invalid-border-color: var(--ams-color-interactive-invalid);
808
+ --ams-text-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
809
+ --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
778
810
  --ams-text-input-placeholder-color: var(--ams-color-text-secondary);
779
811
  --ams-time-input-background-color: var(--ams-color-background);
780
- --ams-time-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
812
+ --ams-time-input-border-width: var(--ams-border-width-m);
781
813
  --ams-time-input-color: var(--ams-color-text);
782
814
  --ams-time-input-font-family: var(--ams-typography-font-family);
783
815
  --ams-time-input-font-size: var(--ams-typography-body-text-font-size);
@@ -787,26 +819,12 @@
787
819
  --ams-time-input-padding-block: var(--ams-space-s);
788
820
  --ams-time-input-padding-inline: var(--ams-space-m);
789
821
  --ams-time-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
790
- --ams-time-input-disabled-background-color: var(--ams-color-background);
791
- --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
792
822
  --ams-time-input-disabled-color: var(--ams-color-interactive-disabled);
793
823
  --ams-time-input-disabled-cursor: var(--ams-cursor-disabled);
794
- --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
795
- --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
796
- --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
797
- --ams-top-task-link-gap: var(--ams-space-s);
798
- --ams-top-task-link-description-color: var(--ams-color-text);
799
- --ams-top-task-link-description-font-family: var(--ams-typography-font-family);
800
- --ams-top-task-link-description-font-size: var(--ams-typography-body-text-small-font-size);
801
- --ams-top-task-link-description-font-weight: var(--ams-typography-body-text-font-weight);
802
- --ams-top-task-link-description-line-height: var(--ams-typography-body-text-small-line-height);
803
- --ams-top-task-link-label-font-family: var(--ams-typography-font-family);
804
- --ams-top-task-link-label-font-weight: var(--ams-typography-heading-font-weight);
805
- --ams-top-task-link-label-line-height: var(--ams-typography-heading-4-line-height);
806
- --ams-top-task-link-label-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
807
- --ams-top-task-link-label-text-underline-offset: var(--ams-links-text-underline-offset);
808
- --ams-top-task-link-label-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
809
- --ams-top-task-link-outline-offset: var(--ams-focus-outline-offset);
824
+ --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
825
+ --ams-time-input-invalid-border-color: var(--ams-color-interactive-invalid);
826
+ --ams-time-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
827
+ --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
810
828
  --ams-unordered-list-color: var(--ams-color-text);
811
829
  --ams-unordered-list-font-family: var(--ams-typography-font-family);
812
830
  --ams-unordered-list-font-size: var(--ams-typography-body-text-font-size);
@@ -825,16 +843,9 @@
825
843
  --ams-card-link-color: var(--ams-links-color);
826
844
  --ams-card-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
827
845
  --ams-card-link-hover-color: var(--ams-links-hover-color);
846
+ --ams-checkbox-icon-container-block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
847
+ --ams-dialog-border-color: var(--ams-dialog-background-color);
828
848
  --ams-field-set-legend-font-size: var(--ams-typography-heading-4-font-size);
829
- --ams-footer-menu-padding-inline: var(--ams-grid-padding-inline);
830
- --ams-footer-menu-link-color: var(--ams-links-color);
831
- --ams-footer-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
832
- --ams-footer-menu-link-hover-color: var(--ams-links-hover-color);
833
- --ams-header-padding-inline: var(--ams-grid-padding-inline); /* Must be the Grid inline padding, to make sure Header and Grid line up */
834
- --ams-header-brand-name-font-size: var(--ams-typography-heading-4-font-size);
835
- --ams-header-menu-item-color: var(--ams-links-color);
836
- --ams-header-menu-item-hover-color: var(--ams-links-hover-color);
837
- --ams-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
838
849
  --ams-heading-3-font-size: var(--ams-typography-heading-3-font-size);
839
850
  --ams-heading-4-font-size: var(--ams-typography-heading-4-font-size);
840
851
  --ams-heading-5-font-size: var(--ams-typography-heading-5-font-size);
@@ -852,30 +863,41 @@
852
863
  --ams-link-list-link-inverse-color: var(--ams-links-inverse-color);
853
864
  --ams-link-list-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
854
865
  --ams-link-color: var(--ams-links-color);
866
+ --ams-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
855
867
  --ams-link-hover-color: var(--ams-links-hover-color);
856
- --ams-link-inline-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
857
- --ams-link-inline-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
858
- --ams-link-standalone-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
859
- --ams-link-standalone-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
868
+ --ams-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
860
869
  --ams-link-contrast-color: var(--ams-links-contrast-color);
861
870
  --ams-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
862
871
  --ams-link-inverse-color: var(--ams-links-inverse-color);
863
872
  --ams-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
864
- --ams-page-menu-item-color: var(--ams-links-color);
865
- --ams-page-menu-item-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
866
- --ams-page-menu-item-hover-color: var(--ams-links-hover-color);
873
+ --ams-page-footer-menu-padding-inline: var(--ams-grid-padding-inline);
874
+ --ams-page-footer-menu-medium-padding-inline: var(--ams-grid-medium-padding-inline);
875
+ --ams-page-footer-menu-wide-padding-inline: var(--ams-grid-wide-padding-inline);
876
+ --ams-page-footer-menu-link-color: var(--ams-links-color);
877
+ --ams-page-footer-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
878
+ --ams-page-footer-menu-link-hover-color: var(--ams-links-hover-color);
879
+ --ams-page-header-padding-inline: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Header and Grid line up */
880
+ --ams-page-header-medium-padding-inline: var(--ams-grid-medium-padding-inline);
881
+ --ams-page-header-wide-padding-inline: var(--ams-grid-wide-padding-inline);
882
+ --ams-page-header-brand-name-font-size: var(--ams-typography-heading-4-font-size);
883
+ --ams-page-header-menu-item-color: var(--ams-links-color);
884
+ --ams-page-header-menu-item-hover-color: var(--ams-links-hover-color);
885
+ --ams-page-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
867
886
  --ams-pagination-link-color: var(--ams-links-color);
868
887
  --ams-pagination-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
869
888
  --ams-pagination-link-hover-color: var(--ams-links-hover-color);
870
889
  --ams-radio-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
871
890
  --ams-radio-icon-container-block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
872
- --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
891
+ --ams-standalone-link-color: var(--ams-links-color);
892
+ --ams-standalone-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
893
+ --ams-standalone-link-contrast-color: var(--ams-links-contrast-color);
894
+ --ams-standalone-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
895
+ --ams-standalone-link-hover-color: var(--ams-links-hover-color);
896
+ --ams-standalone-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
897
+ --ams-standalone-link-inverse-color: var(--ams-links-inverse-color);
898
+ --ams-standalone-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
873
899
  --ams-table-of-contents-link-color: var(--ams-links-color);
874
900
  --ams-table-of-contents-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
875
901
  --ams-table-of-contents-link-hover-color: var(--ams-links-hover-color);
876
902
  --ams-table-of-contents-heading-font-size: var(--ams-typography-heading-4-font-size);
877
- --ams-top-task-link-label-color: var(--ams-links-color);
878
- --ams-top-task-link-label-font-size: var(--ams-typography-heading-4-font-size);
879
- --ams-top-task-link-label-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
880
- --ams-top-task-link-label-hover-color: var(--ams-links-hover-color);
881
903
  }