@amsterdam/design-system-tokens 0.16.0 → 1.0.1

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 (36) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +10 -3
  3. package/dist/compact.css +3 -0
  4. package/dist/compact.d.ts +7 -0
  5. package/dist/compact.json +8 -1
  6. package/dist/compact.mjs +4 -0
  7. package/dist/compact.scss +3 -0
  8. package/dist/compact.theme.css +3 -0
  9. package/dist/index.css +138 -109
  10. package/dist/index.d.ts +136 -93
  11. package/dist/index.json +191 -148
  12. package/dist/index.mjs +162 -140
  13. package/dist/index.scss +129 -100
  14. package/dist/index.theme.css +138 -109
  15. package/package.json +2 -2
  16. package/src/brand/ams/focus.tokens.json +1 -1
  17. package/src/brand/ams/typography.compact.tokens.json +2 -1
  18. package/src/components/ams/alert.tokens.json +6 -7
  19. package/src/components/ams/avatar.tokens.json +9 -0
  20. package/src/components/ams/button.tokens.json +19 -21
  21. package/src/components/ams/checkbox.tokens.json +57 -36
  22. package/src/components/ams/date-input.tokens.json +9 -8
  23. package/src/components/ams/dialog.tokens.json +3 -1
  24. package/src/components/ams/file-input.tokens.json +8 -11
  25. package/src/components/ams/hint.tokens.json +1 -1
  26. package/src/components/ams/page-header.compact.tokens.json +10 -0
  27. package/src/components/ams/page-header.tokens.json +1 -0
  28. package/src/components/ams/password-input.tokens.json +7 -6
  29. package/src/components/ams/radio.tokens.json +0 -2
  30. package/src/components/ams/search-field.tokens.json +7 -4
  31. package/src/components/ams/select.tokens.json +11 -6
  32. package/src/components/ams/switch.tokens.json +2 -2
  33. package/src/components/ams/tabs.tokens.json +3 -3
  34. package/src/components/ams/text-area.tokens.json +7 -6
  35. package/src/components/ams/text-input.tokens.json +7 -6
  36. package/src/components/ams/time-input.tokens.json +9 -8
package/dist/index.scss CHANGED
@@ -37,7 +37,7 @@ $ams-color-text-inverse: #ffffff;
37
37
  $ams-color-text-secondary: #767676;
38
38
  $ams-cursor-disabled: not-allowed;
39
39
  $ams-cursor-interactive: pointer;
40
- $ams-focus-outline-offset: 0.125rem;
40
+ $ams-focus-outline-offset: 0.25rem;
41
41
  $ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
42
42
  $ams-space-s: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
43
43
  $ams-space-m: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
@@ -75,22 +75,33 @@ $ams-links-subtle-hover-text-decoration-line: underline;
75
75
  $ams-accordion-button-padding-inline: 0;
76
76
  $ams-accordion-panel-padding-block: 0;
77
77
  $ams-accordion-panel-padding-inline: 0;
78
+ $ams-alert-border-style: solid;
79
+ $ams-avatar-border-style: solid;
78
80
  $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>");
79
81
  $ams-breadcrumb-separator-block-size: 1ex;
80
82
  $ams-breadcrumb-separator-inline-size: 1ex;
83
+ $ams-button-border-style: solid;
84
+ $ams-button-secondary-border-color: currentColor;
81
85
  $ams-button-tertiary-background-color: transparent;
82
- $ams-button-tertiary-disabled-background-color: transparent;
83
- $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");
84
- $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");
86
+ $ams-button-tertiary-border-color: transparent;
87
+ $ams-button-tertiary-hover-border-color: currentColor;
88
+ $ams-checkbox-icon-container-inline-size: 1.5rem;
89
+ $ams-date-input-border-color: currentColor;
90
+ $ams-date-input-border-style: solid;
85
91
  $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>");
86
- $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>");
87
- $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>");
92
+ $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>");
93
+ $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>");
88
94
  $ams-description-list-narrow-grid-template-columns: 1fr 4fr;
89
95
  $ams-description-list-medium-grid-template-columns: 1fr 2fr;
90
96
  $ams-description-list-wide-grid-template-columns: 1fr 1fr;
97
+ $ams-dialog-border-style: solid;
91
98
  $ams-dialog-max-inline-size: 48rem;
92
99
  $ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
93
100
  $ams-dialog-body-padding-block: 0;
101
+ $ams-file-input-border-color: currentColor;
102
+ $ams-file-input-border-style: dashed;
103
+ $ams-file-input-file-selector-button-border-color: currentColor;
104
+ $ams-file-input-file-selector-button-border-style: solid;
94
105
  $ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
95
106
  $ams-grid-column-count: 4;
96
107
  $ams-grid-medium-column-count: 8;
@@ -116,20 +127,30 @@ $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; // Indent less
116
127
  $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
117
128
  $ams-page-footer-spotlight-background-color: #004699;
118
129
  $ams-page-max-inline-size: 100rem;
119
- $ams-radio-hover-indicator-stroke-width: 3px;
120
- $ams-radio-circle-stroke-width: 2px;
130
+ $ams-password-input-border-color: currentColor;
131
+ $ams-password-input-border-style: solid;
121
132
  $ams-radio-icon-container-inline-size: 1.5rem;
133
+ $ams-search-field-input-border-color: currentColor;
134
+ $ams-search-field-input-border-style: solid;
122
135
  $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>");
123
136
  $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>");
124
- $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>");
137
+ $ams-select-border-color: currentColor;
138
+ $ams-select-border-style: solid;
139
+ $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>");
140
+ $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>");
125
141
  $ams-switch-background-color: #767676;
126
142
  $ams-switch-inline-size: 3.5rem;
127
- $ams-switch-thumb-inline-size: 1.75rem;
128
143
  $ams-switch-thumb-block-size: 1.75rem;
129
- $ams-tabs-button-outline-offset: -0.25rem;
144
+ $ams-switch-thumb-inline-size: 1.75rem;
145
+ $ams-text-area-border-color: currentColor;
146
+ $ams-text-area-border-style: solid;
147
+ $ams-text-input-border-color: currentColor;
148
+ $ams-text-input-border-style: solid;
149
+ $ams-time-input-border-color: currentColor;
150
+ $ams-time-input-border-style: solid;
130
151
  $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>");
131
- $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>");
132
- $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>");
152
+ $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>");
153
+ $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>");
133
154
  $ams-unordered-list-list-style-type: '\2022';
134
155
  $ams-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
135
156
  $ams-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
@@ -162,22 +183,24 @@ $ams-accordion-button-text-wrap: $ams-typography-heading-text-wrap;
162
183
  $ams-accordion-button-hover-color: $ams-color-interactive-hover;
163
184
  $ams-action-group-gap: $ams-space-m;
164
185
  $ams-alert-background-color: $ams-color-background;
165
- $ams-alert-box-shadow: inset 0 0 0 $ams-border-width-xl $ams-color-feedback-info;
166
- $ams-alert-forced-colors-border-width: $ams-border-width-xl;
186
+ $ams-alert-border-color: $ams-color-feedback-info;
187
+ $ams-alert-border-width: $ams-border-width-xl;
167
188
  $ams-alert-severity-indicator-background-color: $ams-color-feedback-info;
168
189
  $ams-alert-severity-indicator-padding-block: $ams-space-m;
169
190
  $ams-alert-severity-indicator-padding-inline: $ams-space-s;
170
191
  $ams-alert-content-gap: $ams-space-s;
171
192
  $ams-alert-content-padding-block: $ams-space-m;
172
193
  $ams-alert-content-padding-inline: $ams-space-m;
173
- $ams-alert-error-box-shadow: inset 0 0 0 $ams-border-width-xl $ams-color-feedback-error;
194
+ $ams-alert-error-border-color: $ams-color-feedback-error;
174
195
  $ams-alert-error-severity-indicator-background-color: $ams-color-feedback-error;
175
- $ams-alert-success-box-shadow: inset 0 0 0 $ams-border-width-xl $ams-color-feedback-success;
196
+ $ams-alert-success-border-color: $ams-color-feedback-success;
176
197
  $ams-alert-success-severity-indicator-background-color: $ams-color-feedback-success;
177
- $ams-alert-warning-box-shadow: inset 0 0 0 $ams-border-width-xl $ams-color-feedback-warning;
198
+ $ams-alert-warning-border-color: $ams-color-feedback-warning;
178
199
  $ams-alert-warning-severity-indicator-background-color: $ams-color-feedback-warning;
179
200
  $ams-avatar-aspect-ratio: $ams-aspect-ratio-1-1;
180
201
  $ams-avatar-background-color: $ams-color-highlight-purple;
202
+ $ams-avatar-border-color: $ams-color-highlight-purple;
203
+ $ams-avatar-border-width: $ams-border-width-m;
181
204
  $ams-avatar-color: $ams-color-text-inverse;
182
205
  $ams-avatar-font-family: $ams-typography-font-family;
183
206
  $ams-avatar-font-size: $ams-typography-body-text-small-font-size;
@@ -187,16 +210,22 @@ $ams-avatar-padding-block: $ams-space-xs;
187
210
  $ams-avatar-padding-inline: $ams-space-xs;
188
211
  $ams-avatar-forced-colors-border-width: $ams-border-width-m;
189
212
  $ams-avatar-azure-background-color: $ams-color-highlight-azure;
213
+ $ams-avatar-azure-border-color: $ams-color-highlight-azure;
190
214
  $ams-avatar-azure-color: $ams-color-text-inverse;
191
215
  $ams-avatar-green-background-color: $ams-color-highlight-green;
216
+ $ams-avatar-green-border-color: $ams-color-highlight-green;
192
217
  $ams-avatar-green-color: $ams-color-text-inverse;
193
218
  $ams-avatar-lime-background-color: $ams-color-highlight-lime;
219
+ $ams-avatar-lime-border-color: $ams-color-highlight-lime;
194
220
  $ams-avatar-lime-color: $ams-color-text;
195
221
  $ams-avatar-magenta-background-color: $ams-color-highlight-magenta;
222
+ $ams-avatar-magenta-border-color: $ams-color-highlight-magenta;
196
223
  $ams-avatar-magenta-color: $ams-color-text-inverse;
197
224
  $ams-avatar-orange-background-color: $ams-color-highlight-orange;
225
+ $ams-avatar-orange-border-color: $ams-color-highlight-orange;
198
226
  $ams-avatar-orange-color: $ams-color-text;
199
227
  $ams-avatar-yellow-background-color: $ams-color-highlight-yellow;
228
+ $ams-avatar-yellow-border-color: $ams-color-highlight-yellow;
200
229
  $ams-avatar-yellow-color: $ams-color-text;
201
230
  $ams-badge-background-color: $ams-color-feedback-success;
202
231
  $ams-badge-color: $ams-color-text-inverse;
@@ -234,6 +263,7 @@ $ams-breadcrumb-link-outline-offset: $ams-focus-outline-offset;
234
263
  $ams-breadcrumb-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
235
264
  $ams-breadcrumb-link-text-underline-offset: $ams-links-text-underline-offset;
236
265
  $ams-breadcrumb-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
266
+ $ams-button-border-width: $ams-border-width-m;
237
267
  $ams-button-cursor: $ams-cursor-interactive;
238
268
  $ams-button-font-family: $ams-typography-font-family;
239
269
  $ams-button-font-size: $ams-typography-body-text-font-size;
@@ -244,28 +274,24 @@ $ams-button-outline-offset: $ams-focus-outline-offset;
244
274
  $ams-button-padding-block: $ams-space-s;
245
275
  $ams-button-padding-inline: $ams-space-m;
246
276
  $ams-button-disabled-cursor: $ams-cursor-disabled;
247
- $ams-button-forced-color-mode-border: $ams-border-width-m solid;
277
+ $ams-button-icon-only-padding-block: $ams-space-s;
278
+ $ams-button-icon-only-padding-inline: $ams-space-s;
248
279
  $ams-button-primary-background-color: $ams-color-interactive;
249
- $ams-button-primary-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive;
280
+ $ams-button-primary-border-color: $ams-color-interactive;
250
281
  $ams-button-primary-color: $ams-color-text-inverse;
251
282
  $ams-button-primary-disabled-background-color: $ams-color-interactive-disabled;
252
- $ams-button-primary-disabled-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-disabled;
283
+ $ams-button-primary-disabled-border-color: $ams-color-interactive-disabled;
253
284
  $ams-button-primary-hover-background-color: $ams-color-interactive-hover;
254
- $ams-button-primary-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-hover;
285
+ $ams-button-primary-hover-border-color: $ams-color-interactive-hover;
255
286
  $ams-button-secondary-background-color: $ams-color-background;
256
287
  $ams-button-secondary-color: $ams-color-interactive;
257
- $ams-button-secondary-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive;
258
- $ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-l $ams-color-interactive-hover;
259
- $ams-button-secondary-hover-color: $ams-color-interactive-hover;
260
- $ams-button-secondary-disabled-background-color: $ams-color-background;
261
- $ams-button-secondary-disabled-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-disabled;
288
+ $ams-button-secondary-disabled-border-color: $ams-color-interactive-disabled;
262
289
  $ams-button-secondary-disabled-color: $ams-color-interactive-disabled;
290
+ $ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
291
+ $ams-button-secondary-hover-color: $ams-color-interactive-hover;
263
292
  $ams-button-tertiary-color: $ams-color-interactive;
264
- $ams-button-tertiary-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-hover;
265
- $ams-button-tertiary-hover-color: $ams-color-interactive-hover;
266
293
  $ams-button-tertiary-disabled-color: $ams-color-interactive-disabled;
267
- $ams-button-icon-only-padding-block: $ams-space-s;
268
- $ams-button-icon-only-padding-inline: $ams-space-s;
294
+ $ams-button-tertiary-hover-color: $ams-color-interactive-hover;
269
295
  $ams-card-heading-margin-block-end: $ams-space-xs;
270
296
  $ams-card-heading-group-gap: $ams-space-xs;
271
297
  $ams-card-heading-group-margin-block-end: $ams-space-xs;
@@ -288,26 +314,31 @@ $ams-checkbox-font-weight: $ams-typography-body-text-font-weight;
288
314
  $ams-checkbox-gap: $ams-space-s;
289
315
  $ams-checkbox-line-height: $ams-typography-body-text-line-height;
290
316
  $ams-checkbox-outline-offset: $ams-focus-outline-offset;
291
- $ams-checkbox-checkmark-border-color: $ams-color-interactive;
292
- $ams-checkbox-checkmark-border-width: $ams-border-width-m;
293
- $ams-checkbox-checkmark-checked-background-color: $ams-color-interactive;
294
- $ams-checkbox-checkmark-checked-hover-background-color: $ams-color-interactive-hover;
295
- $ams-checkbox-checkmark-disabled-border-color: $ams-color-interactive-disabled;
296
- $ams-checkbox-checkmark-disabled-border-width: $ams-border-width-m;
297
- $ams-checkbox-checkmark-disabled-checked-background-color: $ams-color-interactive-disabled;
298
- $ams-checkbox-checkmark-disabled-checked-hover-background-color: $ams-color-interactive-disabled;
299
- $ams-checkbox-checkmark-disabled-indeterminate-background-color: $ams-color-interactive-disabled;
300
- $ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: $ams-color-interactive-disabled;
301
- $ams-checkbox-checkmark-hover-border-color: $ams-color-interactive-hover;
302
- $ams-checkbox-checkmark-hover-border-width: $ams-border-width-l;
303
- $ams-checkbox-checkmark-invalid-border-color: $ams-color-interactive-invalid;
304
- $ams-checkbox-checkmark-invalid-checked-background-color: $ams-color-interactive-invalid;
305
- $ams-checkbox-checkmark-invalid-checked-hover-background-color: $ams-color-interactive-invalid-hover;
306
- $ams-checkbox-checkmark-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
307
- $ams-checkbox-checkmark-invalid-indeterminate-background-color: $ams-color-interactive-invalid;
308
- $ams-checkbox-checkmark-invalid-indeterminate-hover-background-color: $ams-color-interactive-invalid-hover;
309
- $ams-checkbox-checkmark-indeterminate-background-color: $ams-color-interactive;
310
- $ams-checkbox-checkmark-indeterminate-hover-background-color: $ams-color-interactive-hover;
317
+ $ams-checkbox-checked-indicator-stroke: $ams-color-interactive-inverse;
318
+ $ams-checkbox-indeterminate-indicator-stroke: $ams-color-interactive-inverse;
319
+ $ams-checkbox-hover-indicator-hover-stroke: $ams-color-interactive-hover;
320
+ $ams-checkbox-hover-indicator-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
321
+ $ams-checkbox-rectangle-fill: $ams-color-background;
322
+ $ams-checkbox-rectangle-stroke: $ams-color-interactive;
323
+ $ams-checkbox-rectangle-checked-fill: $ams-color-interactive;
324
+ $ams-checkbox-rectangle-checked-disabled-fill: $ams-color-interactive-disabled;
325
+ $ams-checkbox-rectangle-checked-disabled-hover-fill: $ams-color-interactive-disabled;
326
+ $ams-checkbox-rectangle-checked-hover-fill: $ams-color-interactive-hover;
327
+ $ams-checkbox-rectangle-checked-hover-disabled-invalid-fill: $ams-color-interactive-disabled;
328
+ $ams-checkbox-rectangle-checked-invalid-fill: $ams-color-interactive-invalid;
329
+ $ams-checkbox-rectangle-checked-invalid-hover-fill: $ams-color-interactive-invalid-hover;
330
+ $ams-checkbox-rectangle-disabled-stroke: $ams-color-interactive-disabled;
331
+ $ams-checkbox-rectangle-hover-stroke: $ams-color-interactive-hover;
332
+ $ams-checkbox-rectangle-hover-disabled-invalid-stroke: $ams-color-interactive-disabled;
333
+ $ams-checkbox-rectangle-indeterminate-fill: $ams-color-interactive;
334
+ $ams-checkbox-rectangle-indeterminate-disabled-fill: $ams-color-interactive-disabled;
335
+ $ams-checkbox-rectangle-indeterminate-disabled-hover-fill: $ams-color-interactive-disabled;
336
+ $ams-checkbox-rectangle-indeterminate-hover-fill: $ams-color-interactive-hover;
337
+ $ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill: $ams-color-interactive-disabled;
338
+ $ams-checkbox-rectangle-indeterminate-invalid-fill: $ams-color-interactive-invalid;
339
+ $ams-checkbox-rectangle-indeterminate-invalid-hover-fill: $ams-color-interactive-invalid-hover;
340
+ $ams-checkbox-rectangle-invalid-stroke: $ams-color-interactive-invalid;
341
+ $ams-checkbox-rectangle-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
311
342
  $ams-checkbox-disabled-cursor: $ams-cursor-disabled;
312
343
  $ams-checkbox-disabled-color: $ams-color-interactive-disabled;
313
344
  $ams-checkbox-hover-color: $ams-color-interactive-hover;
@@ -318,7 +349,7 @@ $ams-column-gap-medium: $ams-space-m;
318
349
  $ams-column-gap-large: $ams-space-l;
319
350
  $ams-column-gap-x-large: $ams-space-xl;
320
351
  $ams-date-input-background-color: $ams-color-background;
321
- $ams-date-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
352
+ $ams-date-input-border-width: $ams-border-width-m;
322
353
  $ams-date-input-color: $ams-color-text;
323
354
  $ams-date-input-font-family: $ams-typography-font-family;
324
355
  $ams-date-input-font-size: $ams-typography-body-text-font-size;
@@ -328,13 +359,12 @@ $ams-date-input-outline-offset: $ams-focus-outline-offset;
328
359
  $ams-date-input-padding-block: $ams-space-s;
329
360
  $ams-date-input-padding-inline: $ams-space-m;
330
361
  $ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
331
- $ams-date-input-disabled-background-color: $ams-color-background;
332
- $ams-date-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
333
362
  $ams-date-input-disabled-color: $ams-color-interactive-disabled;
334
363
  $ams-date-input-disabled-cursor: $ams-cursor-disabled;
335
- $ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
336
- $ams-date-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
337
- $ams-date-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
364
+ $ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
365
+ $ams-date-input-invalid-border-color: $ams-color-interactive-invalid;
366
+ $ams-date-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
367
+ $ams-date-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
338
368
  $ams-description-list-color: $ams-color-text;
339
369
  $ams-description-list-column-gap: $ams-space-l;
340
370
  $ams-description-list-font-family: $ams-typography-font-family;
@@ -346,7 +376,7 @@ $ams-description-list-term-font-weight: $ams-typography-body-text-bold-font-weig
346
376
  $ams-description-list-description-font-weight: $ams-typography-body-text-font-weight;
347
377
  $ams-description-list-description-padding-inline-start: $ams-space-l;
348
378
  $ams-dialog-background-color: $ams-color-background;
349
- $ams-dialog-border: $ams-border-width-m solid $ams-dialog-background-color;
379
+ $ams-dialog-border-width: $ams-border-width-m;
350
380
  $ams-dialog-gap: $ams-space-m;
351
381
  $ams-dialog-inline-size: calc(100% - 2 * $ams-space-l);
352
382
  $ams-dialog-max-block-size: calc(100dvh - 2 * $ams-space-l);
@@ -388,31 +418,29 @@ $ams-figure-caption-font-weight: $ams-typography-body-text-font-weight;
388
418
  $ams-figure-caption-line-height: $ams-typography-body-text-small-line-height;
389
419
  $ams-figure-caption-inverse-color: $ams-color-text-inverse;
390
420
  $ams-file-input-background-color: $ams-color-background;
391
- $ams-file-input-border: $ams-border-width-s dashed $ams-color-interactive-secondary;
421
+ $ams-file-input-border-width: $ams-border-width-m;
392
422
  $ams-file-input-color: $ams-color-text;
393
423
  $ams-file-input-cursor: $ams-cursor-interactive;
394
424
  $ams-file-input-font-family: $ams-typography-font-family;
395
425
  $ams-file-input-font-size: $ams-typography-body-text-font-size;
396
426
  $ams-file-input-font-weight: $ams-typography-body-text-font-weight;
397
427
  $ams-file-input-line-height: $ams-typography-body-text-line-height;
398
- $ams-file-input-outline-offset: calc($ams-focus-outline-offset * 2); // Compensate for the dashed border
428
+ $ams-file-input-outline-offset: $ams-focus-outline-offset;
399
429
  $ams-file-input-padding-block: $ams-space-m;
400
430
  $ams-file-input-padding-inline: $ams-space-m;
401
431
  $ams-file-input-disabled-color: $ams-color-interactive-disabled;
402
432
  $ams-file-input-disabled-cursor: $ams-cursor-disabled;
403
433
  $ams-file-input-file-selector-button-background-color: $ams-color-background;
404
- $ams-file-input-file-selector-button-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive;
434
+ $ams-file-input-file-selector-button-border-width: $ams-border-width-m;
405
435
  $ams-file-input-file-selector-button-color: $ams-color-interactive;
406
436
  $ams-file-input-file-selector-button-cursor: $ams-cursor-interactive;
407
437
  $ams-file-input-file-selector-button-margin-inline-end: $ams-space-m;
408
438
  $ams-file-input-file-selector-button-padding-block: $ams-space-s;
409
439
  $ams-file-input-file-selector-button-padding-inline: $ams-space-m;
410
- $ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-l $ams-color-interactive-hover;
440
+ $ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
411
441
  $ams-file-input-file-selector-button-hover-color: $ams-color-interactive-hover;
412
- $ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-disabled;
413
442
  $ams-file-input-file-selector-button-disabled-color: $ams-color-interactive-disabled;
414
443
  $ams-file-input-file-selector-button-disabled-cursor: $ams-cursor-disabled;
415
- $ams-file-input-file-selector-button-forced-color-mode-border: $ams-border-width-m solid;
416
444
  $ams-file-list-gap: $ams-space-m;
417
445
  $ams-file-list-padding-block: $ams-space-m;
418
446
  $ams-file-list-file-font-family: $ams-typography-font-family;
@@ -444,7 +472,7 @@ $ams-heading-font-family: $ams-typography-font-family;
444
472
  $ams-heading-font-weight: $ams-typography-heading-font-weight;
445
473
  $ams-heading-text-wrap: $ams-typography-heading-text-wrap;
446
474
  $ams-heading-inverse-color: $ams-color-text-inverse;
447
- $ams-hint-color: $ams-color-text-secondary;
475
+ $ams-hint-font-weight: $ams-typography-body-text-font-weight;
448
476
  $ams-icon-button-color: $ams-color-interactive;
449
477
  $ams-icon-button-cursor: $ams-cursor-interactive;
450
478
  $ams-icon-button-outline-offset: $ams-focus-outline-offset;
@@ -533,6 +561,7 @@ $ams-page-header-logo-link-column-gap: $ams-space-m;
533
561
  $ams-page-header-logo-link-outline-offset: $ams-focus-outline-offset;
534
562
  $ams-page-header-brand-name-color: $ams-color-text;
535
563
  $ams-page-header-brand-name-font-weight: $ams-typography-heading-font-weight;
564
+ $ams-page-header-brand-name-line-height: $ams-typography-heading-4-line-height;
536
565
  $ams-page-header-brand-name-text-wrap: $ams-typography-heading-text-wrap;
537
566
  $ams-page-header-mega-menu-button-cursor: $ams-cursor-interactive;
538
567
  $ams-page-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
@@ -580,7 +609,7 @@ $ams-paragraph-small-line-height: $ams-typography-body-text-small-line-height;
580
609
  $ams-paragraph-large-font-size: $ams-typography-body-text-large-font-size;
581
610
  $ams-paragraph-large-line-height: $ams-typography-body-text-large-line-height;
582
611
  $ams-password-input-background-color: $ams-color-background;
583
- $ams-password-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
612
+ $ams-password-input-border-width: $ams-border-width-m;
584
613
  $ams-password-input-color: $ams-color-text;
585
614
  $ams-password-input-font-family: $ams-typography-font-family;
586
615
  $ams-password-input-font-size: $ams-typography-body-text-font-size;
@@ -589,13 +618,12 @@ $ams-password-input-line-height: $ams-typography-body-text-line-height;
589
618
  $ams-password-input-outline-offset: $ams-focus-outline-offset;
590
619
  $ams-password-input-padding-block: $ams-space-s;
591
620
  $ams-password-input-padding-inline: $ams-space-m;
592
- $ams-password-input-disabled-background-color: $ams-color-background;
593
- $ams-password-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
594
621
  $ams-password-input-disabled-color: $ams-color-interactive-disabled;
595
622
  $ams-password-input-disabled-cursor: $ams-cursor-disabled;
596
- $ams-password-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
597
- $ams-password-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
598
- $ams-password-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
623
+ $ams-password-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
624
+ $ams-password-input-invalid-border-color: $ams-color-interactive-invalid;
625
+ $ams-password-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
626
+ $ams-password-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
599
627
  $ams-password-input-placeholder-color: $ams-color-text-secondary;
600
628
  $ams-radio-color: $ams-color-text;
601
629
  $ams-radio-cursor: $ams-cursor-interactive;
@@ -633,7 +661,7 @@ $ams-row-gap-medium: $ams-space-m;
633
661
  $ams-row-gap-large: $ams-space-l;
634
662
  $ams-row-gap-x-large: $ams-space-xl;
635
663
  $ams-search-field-input-background-color: $ams-color-background;
636
- $ams-search-field-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
664
+ $ams-search-field-input-border-width: $ams-border-width-m;
637
665
  $ams-search-field-input-color: $ams-color-text;
638
666
  $ams-search-field-input-font-family: $ams-typography-font-family;
639
667
  $ams-search-field-input-font-size: $ams-typography-body-text-font-size;
@@ -646,13 +674,14 @@ $ams-search-field-input-cancel-button-block-size: $ams-typography-body-text-font
646
674
  $ams-search-field-input-cancel-button-color: $ams-color-interactive;
647
675
  $ams-search-field-input-cancel-button-cursor: $ams-cursor-interactive;
648
676
  $ams-search-field-input-cancel-button-inline-size: $ams-typography-body-text-font-size;
649
- $ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
650
- $ams-search-field-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
651
- $ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
677
+ $ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
678
+ $ams-search-field-input-invalid-border-color: $ams-color-interactive-invalid;
679
+ $ams-search-field-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
680
+ $ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
652
681
  $ams-search-field-input-placeholder-color: $ams-color-text-secondary;
653
682
  $ams-select-background-color: $ams-color-background;
654
683
  $ams-select-background-position: right $ams-space-m center;
655
- $ams-select-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
684
+ $ams-select-border-width: $ams-border-width-m;
656
685
  $ams-select-color: $ams-color-text;
657
686
  $ams-select-font-family: $ams-typography-font-family;
658
687
  $ams-select-font-size: $ams-typography-body-text-font-size;
@@ -661,12 +690,12 @@ $ams-select-line-height: $ams-typography-body-text-line-height;
661
690
  $ams-select-outline-offset: $ams-focus-outline-offset;
662
691
  $ams-select-padding-block: $ams-space-s;
663
692
  $ams-select-padding-inline: $ams-space-m calc(2 * $ams-space-m + 1em);
664
- $ams-select-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
665
693
  $ams-select-disabled-color: $ams-color-interactive-disabled;
666
694
  $ams-select-disabled-cursor: $ams-cursor-disabled;
667
- $ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
668
- $ams-select-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
669
- $ams-select-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
695
+ $ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
696
+ $ams-select-invalid-border-color: $ams-color-interactive-invalid;
697
+ $ams-select-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
698
+ $ams-select-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
670
699
  $ams-select-option-disabled-color: $ams-color-interactive-disabled;
671
700
  $ams-skip-link-background-color: $ams-color-interactive;
672
701
  $ams-skip-link-color: $ams-color-text-inverse;
@@ -699,6 +728,7 @@ $ams-switch-cursor: $ams-cursor-interactive;
699
728
  $ams-switch-outline-offset: $ams-focus-outline-offset;
700
729
  $ams-switch-thumb-background-color: $ams-color-background;
701
730
  $ams-switch-thumb-hover-color: $ams-color-interactive-hover;
731
+ $ams-switch-thumb-hover-box-shadow: 0 0 0 $ams-border-width-m $ams-switch-thumb-hover-color;
702
732
  $ams-switch-checked-background-color: $ams-color-interactive;
703
733
  $ams-switch-disabled-background-color: $ams-color-interactive-disabled;
704
734
  $ams-switch-disabled-cursor: $ams-cursor-disabled;
@@ -734,16 +764,17 @@ $ams-tabs-button-font-family: $ams-typography-font-family;
734
764
  $ams-tabs-button-font-size: $ams-typography-body-text-font-size;
735
765
  $ams-tabs-button-font-weight: $ams-typography-body-text-font-weight;
736
766
  $ams-tabs-button-line-height: $ams-typography-body-text-line-height;
767
+ $ams-tabs-button-outline-offset: calc($ams-focus-outline-offset * -1);
737
768
  $ams-tabs-button-padding-block: $ams-space-s;
738
769
  $ams-tabs-button-padding-inline: $ams-space-m;
739
- $ams-tabs-button-hover-color: $ams-color-interactive-hover;
740
770
  $ams-tabs-button-hover-box-shadow: inset 0 calc($ams-border-width-m * -1);
771
+ $ams-tabs-button-hover-color: $ams-color-interactive-hover;
741
772
  $ams-tabs-button-selected-box-shadow: inset 0 calc($ams-border-width-xl * -1);
742
773
  $ams-tabs-button-selected-font-weight: $ams-typography-body-text-bold-font-weight;
743
774
  $ams-tabs-button-disabled-color: $ams-color-interactive-disabled;
744
775
  $ams-tabs-button-disabled-cursor: $ams-cursor-disabled;
745
776
  $ams-text-area-background-color: $ams-color-background;
746
- $ams-text-area-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
777
+ $ams-text-area-border-width: $ams-border-width-m;
747
778
  $ams-text-area-color: $ams-color-text;
748
779
  $ams-text-area-font-family: $ams-typography-font-family;
749
780
  $ams-text-area-font-size: $ams-typography-body-text-font-size;
@@ -753,16 +784,15 @@ $ams-text-area-min-block-size: calc($ams-typography-body-text-line-height * 1em
753
784
  $ams-text-area-outline-offset: $ams-focus-outline-offset;
754
785
  $ams-text-area-padding-block: $ams-space-s;
755
786
  $ams-text-area-padding-inline: $ams-space-m;
756
- $ams-text-area-disabled-background-color: $ams-color-background;
757
- $ams-text-area-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
758
787
  $ams-text-area-disabled-color: $ams-color-interactive-disabled;
759
788
  $ams-text-area-disabled-cursor: $ams-cursor-disabled;
760
- $ams-text-area-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
761
- $ams-text-area-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
762
- $ams-text-area-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
789
+ $ams-text-area-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
790
+ $ams-text-area-invalid-border-color: $ams-color-interactive-invalid;
791
+ $ams-text-area-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
792
+ $ams-text-area-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
763
793
  $ams-text-area-placeholder-color: $ams-color-text-secondary;
764
794
  $ams-text-input-background-color: $ams-color-background;
765
- $ams-text-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
795
+ $ams-text-input-border-width: $ams-border-width-m;
766
796
  $ams-text-input-color: $ams-color-text;
767
797
  $ams-text-input-font-family: $ams-typography-font-family;
768
798
  $ams-text-input-font-size: $ams-typography-body-text-font-size;
@@ -771,16 +801,15 @@ $ams-text-input-line-height: $ams-typography-body-text-line-height;
771
801
  $ams-text-input-outline-offset: $ams-focus-outline-offset;
772
802
  $ams-text-input-padding-block: $ams-space-s;
773
803
  $ams-text-input-padding-inline: $ams-space-m;
774
- $ams-text-input-disabled-background-color: $ams-color-background;
775
- $ams-text-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
776
804
  $ams-text-input-disabled-color: $ams-color-interactive-disabled;
777
805
  $ams-text-input-disabled-cursor: $ams-cursor-disabled;
778
- $ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
779
- $ams-text-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
780
- $ams-text-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
806
+ $ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
807
+ $ams-text-input-invalid-border-color: $ams-color-interactive-invalid;
808
+ $ams-text-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
809
+ $ams-text-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
781
810
  $ams-text-input-placeholder-color: $ams-color-text-secondary;
782
811
  $ams-time-input-background-color: $ams-color-background;
783
- $ams-time-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
812
+ $ams-time-input-border-width: $ams-border-width-m;
784
813
  $ams-time-input-color: $ams-color-text;
785
814
  $ams-time-input-font-family: $ams-typography-font-family;
786
815
  $ams-time-input-font-size: $ams-typography-body-text-font-size;
@@ -790,13 +819,12 @@ $ams-time-input-outline-offset: $ams-focus-outline-offset;
790
819
  $ams-time-input-padding-block: $ams-space-s;
791
820
  $ams-time-input-padding-inline: $ams-space-m;
792
821
  $ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
793
- $ams-time-input-disabled-background-color: $ams-color-background;
794
- $ams-time-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
795
822
  $ams-time-input-disabled-color: $ams-color-interactive-disabled;
796
823
  $ams-time-input-disabled-cursor: $ams-cursor-disabled;
797
- $ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
798
- $ams-time-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
799
- $ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
824
+ $ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
825
+ $ams-time-input-invalid-border-color: $ams-color-interactive-invalid;
826
+ $ams-time-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
827
+ $ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
800
828
  $ams-unordered-list-color: $ams-color-text;
801
829
  $ams-unordered-list-font-family: $ams-typography-font-family;
802
830
  $ams-unordered-list-font-size: $ams-typography-body-text-font-size;
@@ -815,6 +843,8 @@ $ams-breadcrumb-link-hover-color: $ams-links-hover-color;
815
843
  $ams-card-link-color: $ams-links-color;
816
844
  $ams-card-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
817
845
  $ams-card-link-hover-color: $ams-links-hover-color;
846
+ $ams-checkbox-icon-container-block-size: calc($ams-checkbox-font-size * $ams-checkbox-line-height);
847
+ $ams-dialog-border-color: $ams-dialog-background-color;
818
848
  $ams-field-set-legend-font-size: $ams-typography-heading-4-font-size;
819
849
  $ams-heading-3-font-size: $ams-typography-heading-3-font-size;
820
850
  $ams-heading-4-font-size: $ams-typography-heading-4-font-size;
@@ -866,7 +896,6 @@ $ams-standalone-link-hover-color: $ams-links-hover-color;
866
896
  $ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
867
897
  $ams-standalone-link-inverse-color: $ams-links-inverse-color;
868
898
  $ams-standalone-link-inverse-hover-color: $ams-links-inverse-hover-color;
869
- $ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem $ams-switch-thumb-hover-color;
870
899
  $ams-table-of-contents-link-color: $ams-links-color;
871
900
  $ams-table-of-contents-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
872
901
  $ams-table-of-contents-link-hover-color: $ams-links-hover-color;