@aws-amplify/ui 6.0.2 → 6.0.3

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 (21) hide show
  1. package/dist/esm/machines/authenticator/actors/signUp.mjs +2 -2
  2. package/dist/esm/machines/authenticator/utils.mjs +2 -1
  3. package/dist/esm/theme/tokens/components/button.mjs +15 -105
  4. package/dist/esm/theme/tokens/components/checkbox.mjs +4 -18
  5. package/dist/esm/theme/tokens/components/fieldControl.mjs +63 -20
  6. package/dist/esm/theme/tokens/components/sliderField.mjs +1 -9
  7. package/dist/esm/theme/tokens/components/switchField.mjs +1 -7
  8. package/dist/index.js +88 -162
  9. package/dist/styles/base.css +31 -26
  10. package/dist/styles/base.layer.css +31 -26
  11. package/dist/styles/input.css +1 -0
  12. package/dist/styles/input.layer.css +1 -0
  13. package/dist/styles/select.css +1 -0
  14. package/dist/styles/select.layer.css +1 -0
  15. package/dist/styles/textArea.css +1 -0
  16. package/dist/styles/textArea.layer.css +1 -0
  17. package/dist/styles.css +34 -26
  18. package/dist/styles.layer.css +34 -26
  19. package/dist/theme.css +31 -26
  20. package/dist/types/theme/tokens/components/fieldControl.d.ts +13 -1
  21. package/package.json +1 -1
package/dist/styles/base.layer.css CHANGED
@@ -168,7 +168,7 @@
168
168
  --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
169
169
  --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
170
170
  --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
171
- --amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
171
+ --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
172
172
  --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
173
173
  --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
174
174
  --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
@@ -181,7 +181,7 @@
181
181
  --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
182
182
  --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
183
183
  --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
184
- --amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
184
+ --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
185
185
  --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
186
186
  --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
187
187
  --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
@@ -194,7 +194,7 @@
194
194
  --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
195
195
  --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
196
196
  --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
197
- --amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
197
+ --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
198
198
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
199
199
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
200
200
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
@@ -207,7 +207,7 @@
207
207
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
208
208
  --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
209
209
  --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
210
- --amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
210
+ --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
211
211
  --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
212
212
  --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
213
213
  --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
@@ -220,7 +220,7 @@
220
220
  --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
221
221
  --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
222
222
  --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
223
- --amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
223
+ --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
224
224
  --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
225
225
  --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
226
226
  --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
@@ -254,7 +254,7 @@
254
254
  --amplify-components-button-primary-info-focus-border-color: transparent;
255
255
  --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
256
256
  --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
257
- --amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
257
+ --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
258
258
  --amplify-components-button-primary-info-active-border-color: transparent;
259
259
  --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
260
260
  --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
@@ -267,7 +267,7 @@
267
267
  --amplify-components-button-primary-warning-focus-border-color: transparent;
268
268
  --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
269
269
  --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
270
- --amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
270
+ --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
271
271
  --amplify-components-button-primary-warning-active-border-color: transparent;
272
272
  --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
273
273
  --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
@@ -280,7 +280,7 @@
280
280
  --amplify-components-button-primary-error-focus-border-color: transparent;
281
281
  --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
282
282
  --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
283
- --amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
283
+ --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
284
284
  --amplify-components-button-primary-error-active-border-color: transparent;
285
285
  --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
286
286
  --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
@@ -293,7 +293,7 @@
293
293
  --amplify-components-button-primary-success-focus-border-color: transparent;
294
294
  --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
295
295
  --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
296
- --amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
296
+ --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
297
297
  --amplify-components-button-primary-success-active-border-color: transparent;
298
298
  --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
299
299
  --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
@@ -306,7 +306,7 @@
306
306
  --amplify-components-button-primary-overlay-focus-border-color: transparent;
307
307
  --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
308
308
  --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
309
- --amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
309
+ --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
310
310
  --amplify-components-button-primary-overlay-active-border-color: transparent;
311
311
  --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
312
312
  --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
@@ -349,7 +349,7 @@
349
349
  --amplify-components-button-link-info-focus-border-color: transparent;
350
350
  --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
351
351
  --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
352
- --amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
352
+ --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
353
353
  --amplify-components-button-link-info-active-border-color: transparent;
354
354
  --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
355
355
  --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
@@ -362,7 +362,7 @@
362
362
  --amplify-components-button-link-warning-focus-border-color: transparent;
363
363
  --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
364
364
  --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
365
- --amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
365
+ --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
366
366
  --amplify-components-button-link-warning-active-border-color: transparent;
367
367
  --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
368
368
  --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
@@ -375,7 +375,7 @@
375
375
  --amplify-components-button-link-success-focus-border-color: transparent;
376
376
  --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
377
377
  --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
378
- --amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
378
+ --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
379
379
  --amplify-components-button-link-success-active-border-color: transparent;
380
380
  --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
381
381
  --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
@@ -388,7 +388,7 @@
388
388
  --amplify-components-button-link-error-focus-border-color: transparent;
389
389
  --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
390
390
  --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
391
- --amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
391
+ --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
392
392
  --amplify-components-button-link-error-active-border-color: transparent;
393
393
  --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
394
394
  --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
@@ -401,7 +401,7 @@
401
401
  --amplify-components-button-link-overlay-focus-border-color: transparent;
402
402
  --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
403
403
  --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
404
- --amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
404
+ --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
405
405
  --amplify-components-button-link-overlay-active-border-color: transparent;
406
406
  --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
407
407
  --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
@@ -494,12 +494,12 @@
494
494
  --amplify-components-checkbox-button-focus-outline-style: solid;
495
495
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
496
496
  --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
497
- --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
498
- --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
497
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
498
+ --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
499
499
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
500
500
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
501
- --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
502
- --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
501
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
502
+ --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
503
503
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80);
504
504
  --amplify-components-checkbox-icon-border-radius: 20%;
505
505
  --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
@@ -628,19 +628,24 @@
628
628
  --amplify-components-fieldcontrol-quiet-border-inline-end: none;
629
629
  --amplify-components-fieldcontrol-quiet-border-block-start: none;
630
630
  --amplify-components-fieldcontrol-quiet-border-radius: 0;
631
- --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
632
- --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
631
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent;
632
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
633
633
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
634
- --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
634
+ --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent;
635
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
635
636
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
636
- --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
637
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
637
638
  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
638
639
  --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
639
640
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
640
641
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
641
642
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
642
643
  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
643
- --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
644
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
645
+ --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100);
646
+ --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100);
647
+ --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100);
648
+ --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90);
644
649
  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
645
650
  --amplify-components-fieldgroup-vertical-align-items: center;
646
651
  --amplify-components-fieldgroup-outer-align-items: center;
@@ -986,7 +991,7 @@
986
991
  --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
987
992
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
988
993
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
989
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
994
+ --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
990
995
  --amplify-components-sliderfield-small-track-height: 0.25rem;
991
996
  --amplify-components-sliderfield-small-thumb-width: 1rem;
992
997
  --amplify-components-sliderfield-small-thumb-height: 1rem;
@@ -1070,7 +1075,7 @@
1070
1075
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1071
1076
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1072
1077
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1073
- --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
1078
+ --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
1074
1079
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
1075
1080
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
1076
1081
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
package/dist/styles/input.css CHANGED
@@ -73,6 +73,7 @@
73
73
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
74
74
  }
75
75
  .amplify-input--quiet[aria-invalid=true]:focus {
76
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
76
77
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
77
78
  }
78
79
  .amplify-input[disabled] {
package/dist/styles/input.layer.css CHANGED
@@ -74,6 +74,7 @@
74
74
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
75
75
  }
76
76
  .amplify-input--quiet[aria-invalid=true]:focus {
77
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
77
78
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
78
79
  }
79
80
  .amplify-input[disabled] {
package/dist/styles/select.css CHANGED
@@ -86,6 +86,7 @@
86
86
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
87
87
  }
88
88
  .amplify-select--quiet[aria-invalid=true]:focus {
89
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
89
90
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
90
91
  }
91
92
  .amplify-select[disabled] {
package/dist/styles/select.layer.css CHANGED
@@ -87,6 +87,7 @@
87
87
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
88
88
  }
89
89
  .amplify-select--quiet[aria-invalid=true]:focus {
90
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
90
91
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
91
92
  }
92
93
  .amplify-select[disabled] {
package/dist/styles/textArea.css CHANGED
@@ -61,6 +61,7 @@
61
61
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
62
62
  }
63
63
  .amplify-textarea--quiet[aria-invalid=true]:focus {
64
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
64
65
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
65
66
  }
66
67
  .amplify-textarea[disabled] {
package/dist/styles/textArea.layer.css CHANGED
@@ -62,6 +62,7 @@
62
62
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
63
63
  }
64
64
  .amplify-textarea--quiet[aria-invalid=true]:focus {
65
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
65
66
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
66
67
  }
67
68
  .amplify-textarea[disabled] {
package/dist/styles.css CHANGED
@@ -167,7 +167,7 @@
167
167
  --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
168
168
  --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
169
169
  --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
170
- --amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
170
+ --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
171
171
  --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
172
172
  --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
173
173
  --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
@@ -180,7 +180,7 @@
180
180
  --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
181
181
  --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
182
182
  --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
183
- --amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
183
+ --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
184
184
  --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
185
185
  --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
186
186
  --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
@@ -193,7 +193,7 @@
193
193
  --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
194
194
  --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
195
195
  --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
196
- --amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
196
+ --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
197
197
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
198
198
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
199
199
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
@@ -206,7 +206,7 @@
206
206
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
207
207
  --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
208
208
  --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
209
- --amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
209
+ --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
210
210
  --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
211
211
  --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
212
212
  --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
@@ -219,7 +219,7 @@
219
219
  --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
220
220
  --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
221
221
  --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
222
- --amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
222
+ --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
223
223
  --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
224
224
  --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
225
225
  --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
@@ -253,7 +253,7 @@
253
253
  --amplify-components-button-primary-info-focus-border-color: transparent;
254
254
  --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
255
255
  --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
256
- --amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
256
+ --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
257
257
  --amplify-components-button-primary-info-active-border-color: transparent;
258
258
  --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
259
259
  --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
@@ -266,7 +266,7 @@
266
266
  --amplify-components-button-primary-warning-focus-border-color: transparent;
267
267
  --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
268
268
  --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
269
- --amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
269
+ --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
270
270
  --amplify-components-button-primary-warning-active-border-color: transparent;
271
271
  --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
272
272
  --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
@@ -279,7 +279,7 @@
279
279
  --amplify-components-button-primary-error-focus-border-color: transparent;
280
280
  --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
281
281
  --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
282
- --amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
282
+ --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
283
283
  --amplify-components-button-primary-error-active-border-color: transparent;
284
284
  --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
285
285
  --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
@@ -292,7 +292,7 @@
292
292
  --amplify-components-button-primary-success-focus-border-color: transparent;
293
293
  --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
294
294
  --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
295
- --amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
295
+ --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
296
296
  --amplify-components-button-primary-success-active-border-color: transparent;
297
297
  --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
298
298
  --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
@@ -305,7 +305,7 @@
305
305
  --amplify-components-button-primary-overlay-focus-border-color: transparent;
306
306
  --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
307
307
  --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
308
- --amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
308
+ --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
309
309
  --amplify-components-button-primary-overlay-active-border-color: transparent;
310
310
  --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
311
311
  --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
@@ -348,7 +348,7 @@
348
348
  --amplify-components-button-link-info-focus-border-color: transparent;
349
349
  --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
350
350
  --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
351
- --amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
351
+ --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
352
352
  --amplify-components-button-link-info-active-border-color: transparent;
353
353
  --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
354
354
  --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
@@ -361,7 +361,7 @@
361
361
  --amplify-components-button-link-warning-focus-border-color: transparent;
362
362
  --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
363
363
  --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
364
- --amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
364
+ --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
365
365
  --amplify-components-button-link-warning-active-border-color: transparent;
366
366
  --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
367
367
  --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
@@ -374,7 +374,7 @@
374
374
  --amplify-components-button-link-success-focus-border-color: transparent;
375
375
  --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
376
376
  --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
377
- --amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
377
+ --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
378
378
  --amplify-components-button-link-success-active-border-color: transparent;
379
379
  --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
380
380
  --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
@@ -387,7 +387,7 @@
387
387
  --amplify-components-button-link-error-focus-border-color: transparent;
388
388
  --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
389
389
  --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
390
- --amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
390
+ --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
391
391
  --amplify-components-button-link-error-active-border-color: transparent;
392
392
  --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
393
393
  --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
@@ -400,7 +400,7 @@
400
400
  --amplify-components-button-link-overlay-focus-border-color: transparent;
401
401
  --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
402
402
  --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
403
- --amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
403
+ --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
404
404
  --amplify-components-button-link-overlay-active-border-color: transparent;
405
405
  --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
406
406
  --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
@@ -493,12 +493,12 @@
493
493
  --amplify-components-checkbox-button-focus-outline-style: solid;
494
494
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
495
495
  --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
496
- --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
497
- --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
496
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
497
+ --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
498
498
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
499
499
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
500
- --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
501
- --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
500
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
501
+ --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
502
502
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80);
503
503
  --amplify-components-checkbox-icon-border-radius: 20%;
504
504
  --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
@@ -627,19 +627,24 @@
627
627
  --amplify-components-fieldcontrol-quiet-border-inline-end: none;
628
628
  --amplify-components-fieldcontrol-quiet-border-block-start: none;
629
629
  --amplify-components-fieldcontrol-quiet-border-radius: 0;
630
- --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
631
- --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
630
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent;
631
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
632
632
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
633
- --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
633
+ --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent;
634
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
634
635
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
635
- --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
636
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
636
637
  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
637
638
  --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
638
639
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
639
640
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
640
641
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
641
642
  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
642
- --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
643
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
644
+ --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100);
645
+ --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100);
646
+ --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100);
647
+ --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90);
643
648
  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
644
649
  --amplify-components-fieldgroup-vertical-align-items: center;
645
650
  --amplify-components-fieldgroup-outer-align-items: center;
@@ -985,7 +990,7 @@
985
990
  --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
986
991
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
987
992
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
988
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
993
+ --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
989
994
  --amplify-components-sliderfield-small-track-height: 0.25rem;
990
995
  --amplify-components-sliderfield-small-thumb-width: 1rem;
991
996
  --amplify-components-sliderfield-small-thumb-height: 1rem;
@@ -1069,7 +1074,7 @@
1069
1074
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1070
1075
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1071
1076
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1072
- --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
1077
+ --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
1073
1078
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
1074
1079
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
1075
1080
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
@@ -2899,6 +2904,7 @@ strong.amplify-text {
2899
2904
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2900
2905
  }
2901
2906
  .amplify-input--quiet[aria-invalid=true]:focus {
2907
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2902
2908
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2903
2909
  }
2904
2910
  .amplify-input[disabled] {
@@ -2971,6 +2977,7 @@ strong.amplify-text {
2971
2977
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2972
2978
  }
2973
2979
  .amplify-textarea--quiet[aria-invalid=true]:focus {
2980
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2974
2981
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2975
2982
  }
2976
2983
  .amplify-textarea[disabled] {
@@ -4878,6 +4885,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4878
4885
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
4879
4886
  }
4880
4887
  .amplify-select--quiet[aria-invalid=true]:focus {
4888
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
4881
4889
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
4882
4890
  }
4883
4891
  .amplify-select[disabled] {