@aws-amplify/ui 3.8.3 → 3.9.2

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/helpers/authenticator/facade.js +1 -1
  2. package/dist/esm/helpers/authenticator/utils.js +1 -1
  3. package/dist/esm/index.js +1 -1
  4. package/dist/esm/machines/authenticator/actors/signIn.js +1 -1
  5. package/dist/esm/machines/authenticator/index.js +1 -1
  6. package/dist/esm/machines/authenticator/signUp.js +1 -1
  7. package/dist/esm/theme/defaultDarkModeOverride.js +1 -0
  8. package/dist/esm/theme/tokens/colors.js +1 -1
  9. package/dist/esm/theme/tokens/components/sliderField.js +1 -1
  10. package/dist/esm/theme/tokens/components/toggleButton.js +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/styles.css +116 -124
  13. package/dist/theme.css +21 -9
  14. package/dist/types/helpers/authenticator/utils.d.ts +3 -2
  15. package/dist/types/theme/defaultDarkModeOverride.d.ts +6 -0
  16. package/dist/types/theme/index.d.ts +1 -0
  17. package/dist/types/theme/tokens/colors.d.ts +1 -0
  18. package/dist/types/theme/tokens/components/sliderField.d.ts +1 -0
  19. package/dist/types/theme/tokens/components/toggleButton.d.ts +13 -0
  20. package/dist/types/types/authenticator/stateMachine/authMachine.d.ts +2 -0
  21. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Thu, 12 May 2022 23:33:36 GMT
6
+ * Generated on Tue, 24 May 2022 22:52:46 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -380,17 +380,22 @@
380
380
  --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
381
381
  --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
382
382
  --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
383
+ --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
384
+ --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
385
+ --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
383
386
  --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
384
387
  --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
388
+ --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
385
389
  --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
386
390
  --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
387
391
  --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
388
392
  --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
389
393
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
394
+ --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
395
+ --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
396
+ --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
390
397
  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
391
- --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
392
398
  --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
393
- --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
394
399
  --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
395
400
  --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
396
401
  --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
@@ -398,9 +403,7 @@
398
403
  --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
399
404
  --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
400
405
  --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
401
- --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
402
406
  --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
403
- --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
404
407
  --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
405
408
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
406
409
  --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
@@ -440,7 +443,7 @@
440
443
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
441
444
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
442
445
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
443
- --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
446
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
444
447
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
445
448
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
446
449
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
@@ -632,6 +635,7 @@
632
635
  --amplify-components-alert-padding-inline: var(--amplify-space-medium);
633
636
  --amplify-components-alert-padding-block: var(--amplify-space-small);
634
637
  --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
638
+ --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
635
639
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
636
640
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
637
641
  --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
@@ -639,13 +643,16 @@
639
643
  --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
640
644
  --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
641
645
  --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
646
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
642
647
  --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
643
648
  --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
644
649
  --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
645
650
  --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
646
- --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
651
+ --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
652
+ --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
647
653
  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
648
- --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
654
+ --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
655
+ --amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
649
656
  --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
650
657
  --amplify-components-text-info-color: var(--amplify-colors-font-info);
651
658
  --amplify-components-text-success-color: var(--amplify-colors-font-success);
@@ -789,8 +796,12 @@
789
796
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
790
797
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
791
798
  --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
799
+ --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
800
+ --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
792
801
  --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
802
+ --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
793
803
  --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
804
+ --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
794
805
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
795
806
  --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
796
807
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
@@ -798,7 +809,8 @@
798
809
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
799
810
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
800
811
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
801
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
812
+ --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
813
+ --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
802
814
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
803
815
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
804
816
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
@@ -911,7 +923,7 @@ select {
911
923
 
912
924
  .amplify-scrollview {
913
925
  display: block;
914
- overflow: scroll;
926
+ overflow: auto;
915
927
  }
916
928
  .amplify-scrollview--horizontal {
917
929
  overflow-x: scroll;
@@ -2337,7 +2349,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2337
2349
  }
2338
2350
 
2339
2351
  .amplify-menu-content__item {
2340
- min-height: var(--amplify-components-menu-item-min-width);
2352
+ min-height: var(--amplify-components-menu-item-min-height);
2341
2353
  -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
2342
2354
  padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
2343
2355
  -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
@@ -2818,6 +2830,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2818
2830
  border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
2819
2831
  }
2820
2832
  .amplify-sliderfield__thumb:focus {
2833
+ border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
2821
2834
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
2822
2835
  }
2823
2836
  .amplify-sliderfield__thumb[data-disabled] {
@@ -3159,9 +3172,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3159
3172
  }
3160
3173
 
3161
3174
  .amplify-togglebutton {
3162
- background-color: var(--amplify-internal-togglebutton-background-color);
3163
- border-color: var(--amplify-internal-togglebutton-border-color);
3164
- color: var(--amplify-internal-togglebutton-color);
3165
3175
  --amplify-internal-togglebutton-background-color: initial;
3166
3176
  --amplify-internal-togglebutton-border-color: var(
3167
3177
  --amplify-components-togglebutton-border-color
@@ -3169,9 +3179,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3169
3179
  --amplify-internal-togglebutton-color: var(
3170
3180
  --amplify-components-togglebutton-color
3171
3181
  );
3172
- --amplify-internal-togglebutton-hover-background-color: var(
3173
- --amplify-components-togglebutton-hover-background-color
3174
- );
3182
+ background-color: var(--amplify-internal-togglebutton-background-color);
3183
+ border-color: var(--amplify-internal-togglebutton-border-color);
3184
+ color: var(--amplify-internal-togglebutton-color);
3175
3185
  --amplify-internal-togglebutton-focus-background-color: var(
3176
3186
  --amplify-internal-togglebutton-background-color
3177
3187
  );
@@ -3181,6 +3191,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
3181
3191
  --amplify-internal-togglebutton-focus-color: var(
3182
3192
  --amplify-components-togglebutton-focus-color
3183
3193
  );
3194
+ --amplify-internal-togglebutton-hover-background-color: var(
3195
+ --amplify-components-togglebutton-hover-background-color
3196
+ );
3197
+ --amplify-internal-togglebutton-hover-border-color: var(
3198
+ --amplify-internal-togglebutton-border-color
3199
+ );
3200
+ --amplify-internal-togglebutton-hover-color: var(
3201
+ --amplify-internal-togglebutton-color
3202
+ );
3184
3203
  --amplify-internal-togglebutton-active-background-color: var(
3185
3204
  --amplify-components-togglebutton-active-background-color
3186
3205
  );
@@ -3194,19 +3213,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
3194
3213
  --amplify-components-togglebutton-disabled-color
3195
3214
  );
3196
3215
  }
3197
- .amplify-togglebutton:hover {
3198
- background-color: var(--amplify-internal-togglebutton-hover-background-color);
3199
- border-color: var(--amplify-internal-togglebutton-border-color);
3200
- color: var(--amplify-internal-togglebutton-color);
3201
- --amplify-internal-togglebutton-focus-background-color: var(
3202
- --amplify-internal-togglebutton-hover-background-color
3203
- );
3204
- }
3205
3216
  .amplify-togglebutton:focus {
3206
3217
  background-color: var(--amplify-internal-togglebutton-focus-background-color);
3207
3218
  border-color: var(--amplify-internal-togglebutton-focus-border-color);
3208
3219
  color: var(--amplify-internal-togglebutton-focus-color);
3209
3220
  }
3221
+ .amplify-togglebutton:hover {
3222
+ background-color: var(--amplify-internal-togglebutton-hover-background-color);
3223
+ border-color: var(--amplify-internal-togglebutton-hover-border-color);
3224
+ color: var(--amplify-internal-togglebutton-hover-color);
3225
+ }
3210
3226
  .amplify-togglebutton:active {
3211
3227
  background-color: var(--amplify-internal-togglebutton-active-background-color);
3212
3228
  }
@@ -3216,22 +3232,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3216
3232
  color: var(--amplify-internal-togglebutton-disabled-color);
3217
3233
  }
3218
3234
  .amplify-togglebutton--pressed {
3235
+ --amplify-internal-togglebutton-border-color: var(
3236
+ --amplify-components-togglebutton-pressed-border-color
3237
+ );
3219
3238
  --amplify-internal-togglebutton-background-color: var(
3220
3239
  --amplify-components-togglebutton-pressed-background-color
3221
3240
  );
3222
3241
  --amplify-internal-togglebutton-color: var(
3223
3242
  --amplify-components-togglebutton-pressed-color
3224
3243
  );
3225
- }
3226
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3227
3244
  --amplify-internal-togglebutton-hover-background-color: var(
3228
3245
  --amplify-components-togglebutton-pressed-hover-background-color
3229
3246
  );
3230
- }
3231
- .amplify-togglebutton--pressed:disabled {
3232
3247
  --amplify-internal-togglebutton-disabled-background-color: var(
3233
3248
  --amplify-components-togglebutton-pressed-background-color
3234
3249
  );
3250
+ --amplify-internal-togglebutton-disabled-border-color: var(
3251
+ --amplify-components-togglebutton-pressed-border-color
3252
+ );
3235
3253
  --amplify-internal-togglebutton-disabled-color: var(
3236
3254
  --amplify-components-togglebutton-pressed-color
3237
3255
  );
@@ -3256,27 +3274,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3256
3274
  --amplify-internal-togglebutton-primary-color
3257
3275
  );
3258
3276
  border-width: var(--amplify-components-togglebutton-primary-border-width);
3259
- --amplify-internal-togglebutton-hover-background-color: var(
3260
- --amplify-components-togglebutton-primary-background-color
3261
- );
3262
- --amplify-internal-togglebutton-focus-border-color: var(
3263
- --amplify-components-togglebutton-border-color
3264
- );
3265
- --amplify-internal-togglebutton-focus-color: var(
3266
- --amplify-components-togglebutton-color
3267
- );
3268
- --amplify-internal-togglebutton-active-background-color: var(
3269
- --amplify-components-togglebutton-primary-background-color
3270
- );
3271
- --amplify-internal-togglebutton-disabled-background-color: var(
3272
- --amplify-components-togglebutton-primary-background-color
3273
- );
3274
- --amplify-internal-togglebutton-disabled-border-color: var(
3275
- --amplify-components-togglebutton-border-color
3276
- );
3277
- --amplify-internal-togglebutton-disabled-color: var(
3278
- --amplify-components-togglebutton-color
3279
- );
3280
3277
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3281
3278
  --amplify-components-togglebutton-primary-focus-background-color
3282
3279
  );
@@ -3286,6 +3283,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
3286
3283
  --amplify-internal-togglebutton-primary-focus-color: var(
3287
3284
  --amplify-components-togglebutton-primary-focus-color
3288
3285
  );
3286
+ --amplify-internal-togglebutton-primary-focus-box-shadow: var(
3287
+ --amplify-components-togglebutton-primary-focus-box-shadow
3288
+ );
3289
+ --amplify-internal-togglebutton-focus-background-color: var(
3290
+ --amplify-internal-togglebutton-primary-focus-background-color
3291
+ );
3292
+ --amplify-internal-togglebutton-focus-border-color: var(
3293
+ --amplify-internal-togglebutton-primary-focus-border-color
3294
+ );
3295
+ --amplify-internal-togglebutton-focus-color: var(
3296
+ --amplify-internal-togglebutton-primary-focus-color
3297
+ );
3289
3298
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3290
3299
  --amplify-components-togglebutton-primary-hover-background-color
3291
3300
  );
@@ -3295,40 +3304,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3295
3304
  --amplify-internal-togglebutton-primary-hover-color: var(
3296
3305
  --amplify-components-togglebutton-primary-hover-color
3297
3306
  );
3307
+ --amplify-internal-togglebutton-hover-background-color: var(
3308
+ --amplify-internal-togglebutton-primary-hover-background-color
3309
+ );
3310
+ --amplify-internal-togglebutton-hover-border-color: var(
3311
+ --amplify-internal-togglebutton-primary-hover-border-color
3312
+ );
3313
+ --amplify-internal-togglebutton-hover-color: var(
3314
+ --amplify-internal-togglebutton-primary-hover-color
3315
+ );
3298
3316
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3299
3317
  --amplify-components-togglebutton-primary-disabled-background-color
3300
3318
  );
3301
3319
  --amplify-internal-togglebutton-primary-disabled-border-color: var(
3302
- --amplify-internal-togglebutton-primary-border-color
3320
+ --amplify-components-togglebutton-primary-disabled-border-color
3303
3321
  );
3304
3322
  --amplify-internal-togglebutton-primary-disabled-color: var(
3305
3323
  --amplify-components-togglebutton-primary-disabled-color
3306
3324
  );
3307
- }
3308
- .amplify-togglebutton--primary:focus {
3309
- --amplify-internal-togglebutton-focus-background-color: var(
3310
- --amplify-internal-togglebutton-primary-focus-background-color
3311
- );
3312
- --amplify-internal-togglebutton-focus-border-color: var(
3313
- --amplify-internal-togglebutton-primary-focus-border-color
3314
- );
3315
- --amplify-internal-togglebutton-focus-color: var(
3316
- --amplify-internal-togglebutton-primary-focus-color
3317
- );
3318
- box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
3319
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3320
- --amplify-internal-togglebutton-primary-focus-border-color
3321
- );
3322
- }
3323
- .amplify-togglebutton--primary:hover {
3324
- background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
3325
- border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
3326
- color: var(--amplify-internal-togglebutton-primary-hover-color);
3327
- --amplify-internal-togglebutton-focus-background-color: var(
3328
- --amplify-internal-togglebutton-primary-hover-background-color
3329
- );
3330
- }
3331
- .amplify-togglebutton--primary:disabled {
3332
3325
  --amplify-internal-togglebutton-disabled-background-color: var(
3333
3326
  --amplify-internal-togglebutton-primary-disabled-background-color
3334
3327
  );
@@ -3339,6 +3332,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3339
3332
  --amplify-internal-togglebutton-primary-disabled-color
3340
3333
  );
3341
3334
  }
3335
+ .amplify-togglebutton--primary:focus {
3336
+ box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
3337
+ }
3342
3338
  .amplify-togglebutton--pressed {
3343
3339
  --amplify-internal-togglebutton-primary-background-color: var(
3344
3340
  --amplify-components-togglebutton-primary-pressed-background-color
@@ -3349,43 +3345,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3349
3345
  --amplify-internal-togglebutton-primary-color: var(
3350
3346
  --amplify-components-togglebutton-primary-pressed-color
3351
3347
  );
3352
- }
3353
- .amplify-togglebutton--pressed:focus {
3354
3348
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3355
3349
  --amplify-components-togglebutton-primary-pressed-focus-background-color
3356
3350
  );
3357
3351
  --amplify-internal-togglebutton-primary-focus-border-color: var(
3358
3352
  --amplify-components-togglebutton-primary-pressed-focus-border-color
3359
3353
  );
3360
- }
3361
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3362
- --amplify-internal-togglebutton-primary-hover-background-color: var(
3363
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3364
- );
3365
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3366
- --amplify-components-togglebutton-primary-pressed-hover-border-color
3367
- );
3368
- --amplify-internal-togglebutton-primary-focus-background-color: var(
3369
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3370
- );
3371
- }
3372
- .amplify-togglebutton--pressed:focus {
3373
3354
  --amplify-internal-togglebutton-primary-focus-color: var(
3374
- --amplify-components-togglebutton-primary-pressed-color
3355
+ --amplify-components-togglebutton-primary-pressed-focus-color
3375
3356
  );
3376
- }
3377
- .amplify-togglebutton--pressed:hover {
3378
3357
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3379
- --amplify-components-togglebutton-primary-hover-background-color
3358
+ --amplify-components-togglebutton-primary-pressed-hover-background-color
3380
3359
  );
3381
3360
  --amplify-internal-togglebutton-primary-hover-border-color: var(
3382
- --amplify-internal-togglebutton-primary-border-color
3361
+ --amplify-components-togglebutton-primary-pressed-hover-border-color
3383
3362
  );
3384
3363
  --amplify-internal-togglebutton-primary-hover-color: var(
3385
- --amplify-components-togglebutton-primary-pressed-color
3364
+ --amplify-components-togglebutton-primary-pressed-hover-color
3386
3365
  );
3387
- }
3388
- .amplify-togglebutton--pressed:disabled {
3389
3366
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3390
3367
  --amplify-components-togglebutton-primary-pressed-background-color
3391
3368
  );
@@ -3396,27 +3373,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3396
3373
  --amplify-components-togglebutton-primary-pressed-color
3397
3374
  );
3398
3375
  }
3376
+ .amplify-togglebutton--pressed:hover {
3377
+ --amplify-internal-togglebutton-primary-focus-box-shadow: var(
3378
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow
3379
+ );
3380
+ }
3399
3381
  .amplify-togglebutton--link {
3400
3382
  --amplify-internal-togglebutton-link-background-color: var(
3401
- --amplify-components-togglebutton-background-color
3383
+ --amplify-components-togglebutton-link-background-color
3402
3384
  );
3403
3385
  --amplify-internal-togglebutton-link-color: var(
3404
3386
  --amplify-components-togglebutton-link-color
3405
3387
  );
3406
- background-color: var(--amplify-internal-togglebutton-link-background-color);
3407
- color: var(--amplify-internal-togglebutton-link-color);
3408
- --amplify-internal-togglebutton-link-hover-background-color: var(
3409
- --amplify-components-togglebutton-link-hover-background-color
3388
+ --amplify-internal-togglebutton-background-color: var(
3389
+ --amplify-internal-togglebutton-link-background-color
3410
3390
  );
3411
- --amplify-internal-togglebutton-link-hover-color: var(
3412
- --amplify-components-togglebutton-link-hover-color
3391
+ --amplify-internal-togglebutton-color: var(
3392
+ --amplify-internal-togglebutton-link-color
3413
3393
  );
3414
- }
3415
- .amplify-togglebutton--link:hover {
3416
- background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
3417
- color: var(--amplify-internal-togglebutton-link-hover-color);
3418
- }
3419
- .amplify-togglebutton--link:focus {
3420
3394
  --amplify-internal-togglebutton-link-focus-background-color: var(
3421
3395
  --amplify-components-togglebutton-link-focus-background-color
3422
3396
  );
@@ -3429,11 +3403,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
3429
3403
  --amplify-internal-togglebutton-focus-color: var(
3430
3404
  --amplify-internal-togglebutton-link-focus-color
3431
3405
  );
3432
- }
3433
- .amplify-togglebutton--link:disabled {
3434
- --amplify-internal-togglebutton-disabled-color: var(
3406
+ --amplify-internal-togglebutton-link-hover-background-color: var(
3407
+ --amplify-components-togglebutton-link-hover-background-color
3408
+ );
3409
+ --amplify-internal-togglebutton-link-hover-color: var(
3410
+ --amplify-components-togglebutton-link-hover-color
3411
+ );
3412
+ --amplify-internal-togglebutton-hover-background-color: var(
3413
+ --amplify-internal-togglebutton-link-hover-background-color
3414
+ );
3415
+ --amplify-internal-togglebutton-hover-color: var(
3416
+ --amplify-internal-togglebutton-link-hover-color
3417
+ );
3418
+ --amplify-internal-togglebutton-link-disabled-color: var(
3435
3419
  --amplify-components-togglebutton-link-disabled-color
3436
3420
  );
3421
+ --amplify-internal-togglebutton-link-disabled-background-color: var(
3422
+ --amplify-components-togglebutton-link-disabled-background-color
3423
+ );
3424
+ --amplify-internal-togglebutton-disabled-color: var(
3425
+ --amplify-internal-togglebutton-link-disabled-color
3426
+ );
3427
+ --amplify-internal-togglebutton-disabled-background-color: var(
3428
+ --amplify-internal-togglebutton-link-disabled-background-color
3429
+ );
3437
3430
  }
3438
3431
  .amplify-togglebutton--pressed {
3439
3432
  --amplify-internal-togglebutton-link-color: var(
@@ -3442,20 +3435,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
3442
3435
  --amplify-internal-togglebutton-link-background-color: var(
3443
3436
  --amplify-components-togglebutton-link-pressed-background-color
3444
3437
  );
3445
- }
3446
- .amplify-togglebutton--pressed:hover {
3438
+ --amplify-internal-togglebutton-link-focus-background-color: var(
3439
+ --amplify-components-togglebutton-link-pressed-focus-background-color
3440
+ );
3441
+ --amplify-internal-togglebutton-link-focus-color: var(
3442
+ --amplify-components-togglebutton-link-pressed-focus-color
3443
+ );
3447
3444
  --amplify-internal-togglebutton-link-hover-background-color: var(
3448
3445
  --amplify-components-togglebutton-link-pressed-hover-background-color
3449
3446
  );
3450
3447
  --amplify-internal-togglebutton-link-hover-color: var(
3451
- --amplify-components-togglebutton-link-pressed-color
3448
+ --amplify-components-togglebutton-link-pressed-hover-color
3452
3449
  );
3453
- }
3454
- .amplify-togglebutton--pressed:focus {
3455
- --amplify-internal-togglebutton-link-focus-background-color: var(
3456
- --amplify-components-togglebutton-link-pressed-background-color
3457
- );
3458
- --amplify-internal-togglebutton-link-focus-color: var(
3450
+ --amplify-internal-togglebutton-link-disabled-color: var(
3459
3451
  --amplify-components-togglebutton-link-pressed-color
3460
3452
  );
3461
3453
  }
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 May 2022 23:33:36 GMT
3
+ * Generated on Tue, 24 May 2022 22:52:46 GMT
4
4
  */
5
5
 
6
6
  :root, [data-amplify-theme] {
@@ -378,17 +378,22 @@
378
378
  --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
379
379
  --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
380
380
  --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
381
+ --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
382
+ --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
383
+ --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
381
384
  --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
382
385
  --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
386
+ --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
383
387
  --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
384
388
  --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
385
389
  --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
386
390
  --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
387
391
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
392
+ --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
393
+ --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
394
+ --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
388
395
  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
389
- --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
390
396
  --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
391
- --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
392
397
  --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
393
398
  --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
394
399
  --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
@@ -396,9 +401,7 @@
396
401
  --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
397
402
  --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
398
403
  --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
399
- --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
400
404
  --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
401
- --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
402
405
  --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
403
406
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
404
407
  --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
@@ -438,7 +441,7 @@
438
441
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
439
442
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
440
443
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
441
- --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
444
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
442
445
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
443
446
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
444
447
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
@@ -630,6 +633,7 @@
630
633
  --amplify-components-alert-padding-inline: var(--amplify-space-medium);
631
634
  --amplify-components-alert-padding-block: var(--amplify-space-small);
632
635
  --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
636
+ --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
633
637
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
634
638
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
635
639
  --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
@@ -637,13 +641,16 @@
637
641
  --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
638
642
  --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
639
643
  --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
644
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
640
645
  --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
641
646
  --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
642
647
  --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
643
648
  --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
644
- --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
649
+ --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
650
+ --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
645
651
  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
646
- --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
652
+ --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
653
+ --amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
647
654
  --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
648
655
  --amplify-components-text-info-color: var(--amplify-colors-font-info);
649
656
  --amplify-components-text-success-color: var(--amplify-colors-font-success);
@@ -787,8 +794,12 @@
787
794
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
788
795
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
789
796
  --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
797
+ --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
798
+ --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
790
799
  --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
800
+ --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
791
801
  --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
802
+ --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
792
803
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
793
804
  --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
794
805
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
@@ -796,7 +807,8 @@
796
807
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
797
808
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
798
809
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
799
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
810
+ --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
811
+ --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
800
812
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
801
813
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
802
814
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
package/dist/types/helpers/authenticator/utils.d.ts CHANGED
@@ -2,9 +2,10 @@
2
2
  * This file contains general helpers that state machine or authenticator
3
3
  * implementations can use.
4
4
  */
5
- import { AuthMachineSend } from '../../types';
5
+ import { AuthInterpreter, HubHandler } from '../../types';
6
6
  export declare const censorAllButFirstAndLast: (value: string) => string;
7
7
  export declare const censorPhoneNumber: (val: string) => string;
8
+ export declare const defaultAuthHubHandler: HubHandler;
8
9
  /**
9
10
  * Listens to external auth Hub events and sends corresponding event to
10
11
  * the `authService` of interest
@@ -13,4 +14,4 @@ export declare const censorPhoneNumber: (val: string) => string;
13
14
  *
14
15
  * @returns function that unsubscribes to the hub evenmt
15
16
  */
16
- export declare const listenToAuthHub: (send: AuthMachineSend) => () => void;
17
+ export declare const listenToAuthHub: (service: AuthInterpreter, handler?: HubHandler) => () => void;
package/dist/types/theme/defaultDarkModeOverride.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ColorModeOverride } from './types';
2
+ /**
3
+ * A basic dark mode that just flips the base color
4
+ * palette.
5
+ */
6
+ export declare const defaultDarkModeOverride: ColorModeOverride;
package/dist/types/theme/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { createTheme } from './createTheme';
2
2
  export { defaultTheme } from './defaultTheme';
3
+ export { defaultDarkModeOverride } from './defaultDarkModeOverride';
3
4
  export * from './types';
package/dist/types/theme/tokens/colors.d.ts CHANGED
@@ -21,6 +21,7 @@ declare type BackgroundColors<DesignTokenType = DesignToken<ColorValue>> = {
21
21
  } & OrdinalScale<DesignTokenType> & OrdinalVariation<DesignTokenType>;
22
22
  declare type BorderColors<DesignTokenType = DesignToken<ColorValue>> = {
23
23
  disabled: DesignTokenType;
24
+ pressed: DesignTokenType;
24
25
  focus: DesignTokenType;
25
26
  error: DesignTokenType;
26
27
  } & OrdinalScale<DesignTokenType>;
package/dist/types/theme/tokens/components/sliderField.d.ts CHANGED
@@ -36,6 +36,7 @@ interface SliderFieldThumbHoverTokens {
36
36
  borderColor: DesignToken<BorderColorValue>;
37
37
  }
38
38
  interface SliderFieldThumbFocusTokens {
39
+ borderColor: DesignToken<BorderColorValue>;
39
40
  boxShadow: DesignToken<BoxShadowValue>;
40
41
  }
41
42
  interface SliderFieldSizeTokens {