@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.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);
@@ -2900,6 +2905,7 @@ strong.amplify-text {
2900
2905
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2901
2906
  }
2902
2907
  .amplify-input--quiet[aria-invalid=true]:focus {
2908
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2903
2909
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2904
2910
  }
2905
2911
  .amplify-input[disabled] {
@@ -2972,6 +2978,7 @@ strong.amplify-text {
2972
2978
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
2973
2979
  }
2974
2980
  .amplify-textarea--quiet[aria-invalid=true]:focus {
2981
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
2975
2982
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
2976
2983
  }
2977
2984
  .amplify-textarea[disabled] {
@@ -4879,6 +4886,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4879
4886
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
4880
4887
  }
4881
4888
  .amplify-select--quiet[aria-invalid=true]:focus {
4889
+ border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color);
4882
4890
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
4883
4891
  }
4884
4892
  .amplify-select[disabled] {
package/dist/theme.css CHANGED
@@ -164,7 +164,7 @@
164
164
  --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
165
165
  --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
166
166
  --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
167
- --amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
167
+ --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
168
168
  --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
169
169
  --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
170
170
  --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
@@ -177,7 +177,7 @@
177
177
  --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
178
178
  --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
179
179
  --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
180
- --amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
180
+ --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
181
181
  --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
182
182
  --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
183
183
  --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
@@ -190,7 +190,7 @@
190
190
  --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
191
191
  --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
192
192
  --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
193
- --amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
193
+ --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
194
194
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
195
195
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
196
196
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
@@ -203,7 +203,7 @@
203
203
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
204
204
  --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
205
205
  --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
206
- --amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
206
+ --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
207
207
  --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
208
208
  --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
209
209
  --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
@@ -216,7 +216,7 @@
216
216
  --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
217
217
  --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
218
218
  --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
219
- --amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
219
+ --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
220
220
  --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
221
221
  --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
222
222
  --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
@@ -250,7 +250,7 @@
250
250
  --amplify-components-button-primary-info-focus-border-color: transparent;
251
251
  --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
252
252
  --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
253
- --amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
253
+ --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
254
254
  --amplify-components-button-primary-info-active-border-color: transparent;
255
255
  --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
256
256
  --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
@@ -263,7 +263,7 @@
263
263
  --amplify-components-button-primary-warning-focus-border-color: transparent;
264
264
  --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
265
265
  --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
266
- --amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
266
+ --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
267
267
  --amplify-components-button-primary-warning-active-border-color: transparent;
268
268
  --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
269
269
  --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
@@ -276,7 +276,7 @@
276
276
  --amplify-components-button-primary-error-focus-border-color: transparent;
277
277
  --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
278
278
  --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
279
- --amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
279
+ --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
280
280
  --amplify-components-button-primary-error-active-border-color: transparent;
281
281
  --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
282
282
  --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
@@ -289,7 +289,7 @@
289
289
  --amplify-components-button-primary-success-focus-border-color: transparent;
290
290
  --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
291
291
  --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
292
- --amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
292
+ --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
293
293
  --amplify-components-button-primary-success-active-border-color: transparent;
294
294
  --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
295
295
  --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
@@ -302,7 +302,7 @@
302
302
  --amplify-components-button-primary-overlay-focus-border-color: transparent;
303
303
  --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
304
304
  --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
305
- --amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
305
+ --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
306
306
  --amplify-components-button-primary-overlay-active-border-color: transparent;
307
307
  --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
308
308
  --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
@@ -345,7 +345,7 @@
345
345
  --amplify-components-button-link-info-focus-border-color: transparent;
346
346
  --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
347
347
  --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
348
- --amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
348
+ --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
349
349
  --amplify-components-button-link-info-active-border-color: transparent;
350
350
  --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
351
351
  --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
@@ -358,7 +358,7 @@
358
358
  --amplify-components-button-link-warning-focus-border-color: transparent;
359
359
  --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
360
360
  --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
361
- --amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
361
+ --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
362
362
  --amplify-components-button-link-warning-active-border-color: transparent;
363
363
  --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
364
364
  --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
@@ -371,7 +371,7 @@
371
371
  --amplify-components-button-link-success-focus-border-color: transparent;
372
372
  --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
373
373
  --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
374
- --amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
374
+ --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
375
375
  --amplify-components-button-link-success-active-border-color: transparent;
376
376
  --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
377
377
  --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
@@ -384,7 +384,7 @@
384
384
  --amplify-components-button-link-error-focus-border-color: transparent;
385
385
  --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
386
386
  --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
387
- --amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
387
+ --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
388
388
  --amplify-components-button-link-error-active-border-color: transparent;
389
389
  --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
390
390
  --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
@@ -397,7 +397,7 @@
397
397
  --amplify-components-button-link-overlay-focus-border-color: transparent;
398
398
  --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
399
399
  --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
400
- --amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
400
+ --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
401
401
  --amplify-components-button-link-overlay-active-border-color: transparent;
402
402
  --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
403
403
  --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
@@ -490,12 +490,12 @@
490
490
  --amplify-components-checkbox-button-focus-outline-style: solid;
491
491
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
492
492
  --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
493
- --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
494
- --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
493
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
494
+ --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
495
495
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
496
496
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
497
- --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
498
- --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
497
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
498
+ --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
499
499
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80);
500
500
  --amplify-components-checkbox-icon-border-radius: 20%;
501
501
  --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
@@ -624,19 +624,24 @@
624
624
  --amplify-components-fieldcontrol-quiet-border-inline-end: none;
625
625
  --amplify-components-fieldcontrol-quiet-border-block-start: none;
626
626
  --amplify-components-fieldcontrol-quiet-border-radius: 0;
627
- --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
628
- --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
627
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent;
628
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
629
629
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
630
- --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
630
+ --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent;
631
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
631
632
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
632
- --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
633
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
633
634
  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
634
635
  --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
635
636
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
636
637
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
637
638
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
638
639
  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
639
- --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
640
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
641
+ --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100);
642
+ --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100);
643
+ --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100);
644
+ --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90);
640
645
  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
641
646
  --amplify-components-fieldgroup-vertical-align-items: center;
642
647
  --amplify-components-fieldgroup-outer-align-items: center;
@@ -982,7 +987,7 @@
982
987
  --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
983
988
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
984
989
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
985
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
990
+ --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
986
991
  --amplify-components-sliderfield-small-track-height: 0.25rem;
987
992
  --amplify-components-sliderfield-small-thumb-width: 1rem;
988
993
  --amplify-components-sliderfield-small-thumb-height: 1rem;
@@ -1066,7 +1071,7 @@
1066
1071
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1067
1072
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1068
1073
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1069
- --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
1074
+ --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
1070
1075
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
1071
1076
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
1072
1077
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
package/dist/types/theme/tokens/components/fieldControl.d.ts CHANGED
@@ -8,7 +8,7 @@ type FieldControlErrorTokens<Output> = DesignTokenProperties<'borderColor' | 'co
8
8
  type FieldControlQuietTokens<Output> = DesignTokenProperties<'borderStyle' | 'borderInlineStart' | 'borderInlineEnd' | 'borderBlockStart' | 'borderRadius', Output> & {
9
9
  _focus?: DesignTokenProperties<'borderBlockEndColor' | 'boxShadow', Output>;
10
10
  _error?: DesignTokenProperties<'borderBlockEndColor', Output> & {
11
- _focus?: DesignTokenProperties<'boxShadow', Output>;
11
+ _focus?: DesignTokenProperties<'borderBlockEndColor' | 'boxShadow', Output>;
12
12
  };
13
13
  };
14
14
  export type FieldControlTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderStyle' | 'borderColor' | 'borderWidth' | 'borderRadius' | 'color' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'fontSize' | 'lineHeight' | 'transitionDuration' | 'outlineColor' | 'outlineStyle' | 'outlineWidth' | 'outlineOffset', Output> & {
@@ -18,6 +18,18 @@ export type FieldControlTokens<Output extends OutputVariantKey> = DesignTokenPro
18
18
  _focus?: FieldControlFocusTokens<Output>;
19
19
  _disabled?: FieldControlDisabledTokens<Output>;
20
20
  _error?: FieldControlErrorTokens<Output>;
21
+ info?: {
22
+ _focus?: DesignTokenProperties<'boxShadow', Output>;
23
+ };
24
+ warning?: {
25
+ _focus?: DesignTokenProperties<'boxShadow', Output>;
26
+ };
27
+ success?: {
28
+ _focus?: DesignTokenProperties<'boxShadow', Output>;
29
+ };
30
+ overlay?: {
31
+ _focus?: DesignTokenProperties<'boxShadow', Output>;
32
+ };
21
33
  };
22
34
  export declare const fieldcontrol: Required<FieldControlTokens<'default'>>;
23
35
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.0.2",
3
+ "version": "6.0.3",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {