@aws-amplify/ui 3.9.1 → 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 (12) hide show
  1. package/dist/esm/helpers/authenticator/facade.js +1 -1
  2. package/dist/esm/machines/authenticator/actors/signIn.js +1 -1
  3. package/dist/esm/machines/authenticator/index.js +1 -1
  4. package/dist/esm/machines/authenticator/signUp.js +1 -1
  5. package/dist/esm/theme/tokens/colors.js +1 -1
  6. package/dist/esm/theme/tokens/components/toggleButton.js +1 -1
  7. package/dist/index.js +2 -2
  8. package/dist/styles.css +110 -120
  9. package/dist/theme.css +18 -7
  10. package/dist/types/theme/tokens/colors.d.ts +1 -0
  11. package/dist/types/theme/tokens/components/toggleButton.d.ts +13 -0
  12. 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, 19 May 2022 22:35:34 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);
@@ -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);
@@ -3161,9 +3172,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3161
3172
  }
3162
3173
 
3163
3174
  .amplify-togglebutton {
3164
- background-color: var(--amplify-internal-togglebutton-background-color);
3165
- border-color: var(--amplify-internal-togglebutton-border-color);
3166
- color: var(--amplify-internal-togglebutton-color);
3167
3175
  --amplify-internal-togglebutton-background-color: initial;
3168
3176
  --amplify-internal-togglebutton-border-color: var(
3169
3177
  --amplify-components-togglebutton-border-color
@@ -3171,9 +3179,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3171
3179
  --amplify-internal-togglebutton-color: var(
3172
3180
  --amplify-components-togglebutton-color
3173
3181
  );
3174
- --amplify-internal-togglebutton-hover-background-color: var(
3175
- --amplify-components-togglebutton-hover-background-color
3176
- );
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);
3177
3185
  --amplify-internal-togglebutton-focus-background-color: var(
3178
3186
  --amplify-internal-togglebutton-background-color
3179
3187
  );
@@ -3183,6 +3191,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
3183
3191
  --amplify-internal-togglebutton-focus-color: var(
3184
3192
  --amplify-components-togglebutton-focus-color
3185
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
+ );
3186
3203
  --amplify-internal-togglebutton-active-background-color: var(
3187
3204
  --amplify-components-togglebutton-active-background-color
3188
3205
  );
@@ -3196,19 +3213,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
3196
3213
  --amplify-components-togglebutton-disabled-color
3197
3214
  );
3198
3215
  }
3199
- .amplify-togglebutton:hover {
3200
- background-color: var(--amplify-internal-togglebutton-hover-background-color);
3201
- border-color: var(--amplify-internal-togglebutton-border-color);
3202
- color: var(--amplify-internal-togglebutton-color);
3203
- --amplify-internal-togglebutton-focus-background-color: var(
3204
- --amplify-internal-togglebutton-hover-background-color
3205
- );
3206
- }
3207
3216
  .amplify-togglebutton:focus {
3208
3217
  background-color: var(--amplify-internal-togglebutton-focus-background-color);
3209
3218
  border-color: var(--amplify-internal-togglebutton-focus-border-color);
3210
3219
  color: var(--amplify-internal-togglebutton-focus-color);
3211
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
+ }
3212
3226
  .amplify-togglebutton:active {
3213
3227
  background-color: var(--amplify-internal-togglebutton-active-background-color);
3214
3228
  }
@@ -3218,22 +3232,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3218
3232
  color: var(--amplify-internal-togglebutton-disabled-color);
3219
3233
  }
3220
3234
  .amplify-togglebutton--pressed {
3235
+ --amplify-internal-togglebutton-border-color: var(
3236
+ --amplify-components-togglebutton-pressed-border-color
3237
+ );
3221
3238
  --amplify-internal-togglebutton-background-color: var(
3222
3239
  --amplify-components-togglebutton-pressed-background-color
3223
3240
  );
3224
3241
  --amplify-internal-togglebutton-color: var(
3225
3242
  --amplify-components-togglebutton-pressed-color
3226
3243
  );
3227
- }
3228
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3229
3244
  --amplify-internal-togglebutton-hover-background-color: var(
3230
3245
  --amplify-components-togglebutton-pressed-hover-background-color
3231
3246
  );
3232
- }
3233
- .amplify-togglebutton--pressed:disabled {
3234
3247
  --amplify-internal-togglebutton-disabled-background-color: var(
3235
3248
  --amplify-components-togglebutton-pressed-background-color
3236
3249
  );
3250
+ --amplify-internal-togglebutton-disabled-border-color: var(
3251
+ --amplify-components-togglebutton-pressed-border-color
3252
+ );
3237
3253
  --amplify-internal-togglebutton-disabled-color: var(
3238
3254
  --amplify-components-togglebutton-pressed-color
3239
3255
  );
@@ -3258,27 +3274,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3258
3274
  --amplify-internal-togglebutton-primary-color
3259
3275
  );
3260
3276
  border-width: var(--amplify-components-togglebutton-primary-border-width);
3261
- --amplify-internal-togglebutton-hover-background-color: var(
3262
- --amplify-components-togglebutton-primary-background-color
3263
- );
3264
- --amplify-internal-togglebutton-focus-border-color: var(
3265
- --amplify-components-togglebutton-border-color
3266
- );
3267
- --amplify-internal-togglebutton-focus-color: var(
3268
- --amplify-components-togglebutton-color
3269
- );
3270
- --amplify-internal-togglebutton-active-background-color: var(
3271
- --amplify-components-togglebutton-primary-background-color
3272
- );
3273
- --amplify-internal-togglebutton-disabled-background-color: var(
3274
- --amplify-components-togglebutton-primary-background-color
3275
- );
3276
- --amplify-internal-togglebutton-disabled-border-color: var(
3277
- --amplify-components-togglebutton-border-color
3278
- );
3279
- --amplify-internal-togglebutton-disabled-color: var(
3280
- --amplify-components-togglebutton-color
3281
- );
3282
3277
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3283
3278
  --amplify-components-togglebutton-primary-focus-background-color
3284
3279
  );
@@ -3288,6 +3283,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
3288
3283
  --amplify-internal-togglebutton-primary-focus-color: var(
3289
3284
  --amplify-components-togglebutton-primary-focus-color
3290
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
+ );
3291
3298
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3292
3299
  --amplify-components-togglebutton-primary-hover-background-color
3293
3300
  );
@@ -3297,40 +3304,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3297
3304
  --amplify-internal-togglebutton-primary-hover-color: var(
3298
3305
  --amplify-components-togglebutton-primary-hover-color
3299
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
+ );
3300
3316
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3301
3317
  --amplify-components-togglebutton-primary-disabled-background-color
3302
3318
  );
3303
3319
  --amplify-internal-togglebutton-primary-disabled-border-color: var(
3304
- --amplify-internal-togglebutton-primary-border-color
3320
+ --amplify-components-togglebutton-primary-disabled-border-color
3305
3321
  );
3306
3322
  --amplify-internal-togglebutton-primary-disabled-color: var(
3307
3323
  --amplify-components-togglebutton-primary-disabled-color
3308
3324
  );
3309
- }
3310
- .amplify-togglebutton--primary:focus {
3311
- --amplify-internal-togglebutton-focus-background-color: var(
3312
- --amplify-internal-togglebutton-primary-focus-background-color
3313
- );
3314
- --amplify-internal-togglebutton-focus-border-color: var(
3315
- --amplify-internal-togglebutton-primary-focus-border-color
3316
- );
3317
- --amplify-internal-togglebutton-focus-color: var(
3318
- --amplify-internal-togglebutton-primary-focus-color
3319
- );
3320
- box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
3321
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3322
- --amplify-internal-togglebutton-primary-focus-border-color
3323
- );
3324
- }
3325
- .amplify-togglebutton--primary:hover {
3326
- background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
3327
- border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
3328
- color: var(--amplify-internal-togglebutton-primary-hover-color);
3329
- --amplify-internal-togglebutton-focus-background-color: var(
3330
- --amplify-internal-togglebutton-primary-hover-background-color
3331
- );
3332
- }
3333
- .amplify-togglebutton--primary:disabled {
3334
3325
  --amplify-internal-togglebutton-disabled-background-color: var(
3335
3326
  --amplify-internal-togglebutton-primary-disabled-background-color
3336
3327
  );
@@ -3341,6 +3332,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3341
3332
  --amplify-internal-togglebutton-primary-disabled-color
3342
3333
  );
3343
3334
  }
3335
+ .amplify-togglebutton--primary:focus {
3336
+ box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
3337
+ }
3344
3338
  .amplify-togglebutton--pressed {
3345
3339
  --amplify-internal-togglebutton-primary-background-color: var(
3346
3340
  --amplify-components-togglebutton-primary-pressed-background-color
@@ -3351,43 +3345,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3351
3345
  --amplify-internal-togglebutton-primary-color: var(
3352
3346
  --amplify-components-togglebutton-primary-pressed-color
3353
3347
  );
3354
- }
3355
- .amplify-togglebutton--pressed:focus {
3356
3348
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3357
3349
  --amplify-components-togglebutton-primary-pressed-focus-background-color
3358
3350
  );
3359
3351
  --amplify-internal-togglebutton-primary-focus-border-color: var(
3360
3352
  --amplify-components-togglebutton-primary-pressed-focus-border-color
3361
3353
  );
3362
- }
3363
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3364
- --amplify-internal-togglebutton-primary-hover-background-color: var(
3365
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3366
- );
3367
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3368
- --amplify-components-togglebutton-primary-pressed-hover-border-color
3369
- );
3370
- --amplify-internal-togglebutton-primary-focus-background-color: var(
3371
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3372
- );
3373
- }
3374
- .amplify-togglebutton--pressed:focus {
3375
3354
  --amplify-internal-togglebutton-primary-focus-color: var(
3376
- --amplify-components-togglebutton-primary-pressed-color
3355
+ --amplify-components-togglebutton-primary-pressed-focus-color
3377
3356
  );
3378
- }
3379
- .amplify-togglebutton--pressed:hover {
3380
3357
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3381
- --amplify-components-togglebutton-primary-hover-background-color
3358
+ --amplify-components-togglebutton-primary-pressed-hover-background-color
3382
3359
  );
3383
3360
  --amplify-internal-togglebutton-primary-hover-border-color: var(
3384
- --amplify-internal-togglebutton-primary-border-color
3361
+ --amplify-components-togglebutton-primary-pressed-hover-border-color
3385
3362
  );
3386
3363
  --amplify-internal-togglebutton-primary-hover-color: var(
3387
- --amplify-components-togglebutton-primary-pressed-color
3364
+ --amplify-components-togglebutton-primary-pressed-hover-color
3388
3365
  );
3389
- }
3390
- .amplify-togglebutton--pressed:disabled {
3391
3366
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3392
3367
  --amplify-components-togglebutton-primary-pressed-background-color
3393
3368
  );
@@ -3398,27 +3373,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3398
3373
  --amplify-components-togglebutton-primary-pressed-color
3399
3374
  );
3400
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
+ }
3401
3381
  .amplify-togglebutton--link {
3402
3382
  --amplify-internal-togglebutton-link-background-color: var(
3403
- --amplify-components-togglebutton-background-color
3383
+ --amplify-components-togglebutton-link-background-color
3404
3384
  );
3405
3385
  --amplify-internal-togglebutton-link-color: var(
3406
3386
  --amplify-components-togglebutton-link-color
3407
3387
  );
3408
- background-color: var(--amplify-internal-togglebutton-link-background-color);
3409
- color: var(--amplify-internal-togglebutton-link-color);
3410
- --amplify-internal-togglebutton-link-hover-background-color: var(
3411
- --amplify-components-togglebutton-link-hover-background-color
3388
+ --amplify-internal-togglebutton-background-color: var(
3389
+ --amplify-internal-togglebutton-link-background-color
3412
3390
  );
3413
- --amplify-internal-togglebutton-link-hover-color: var(
3414
- --amplify-components-togglebutton-link-hover-color
3391
+ --amplify-internal-togglebutton-color: var(
3392
+ --amplify-internal-togglebutton-link-color
3415
3393
  );
3416
- }
3417
- .amplify-togglebutton--link:hover {
3418
- background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
3419
- color: var(--amplify-internal-togglebutton-link-hover-color);
3420
- }
3421
- .amplify-togglebutton--link:focus {
3422
3394
  --amplify-internal-togglebutton-link-focus-background-color: var(
3423
3395
  --amplify-components-togglebutton-link-focus-background-color
3424
3396
  );
@@ -3431,11 +3403,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
3431
3403
  --amplify-internal-togglebutton-focus-color: var(
3432
3404
  --amplify-internal-togglebutton-link-focus-color
3433
3405
  );
3434
- }
3435
- .amplify-togglebutton--link:disabled {
3436
- --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(
3437
3419
  --amplify-components-togglebutton-link-disabled-color
3438
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
+ );
3439
3430
  }
3440
3431
  .amplify-togglebutton--pressed {
3441
3432
  --amplify-internal-togglebutton-link-color: var(
@@ -3444,20 +3435,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
3444
3435
  --amplify-internal-togglebutton-link-background-color: var(
3445
3436
  --amplify-components-togglebutton-link-pressed-background-color
3446
3437
  );
3447
- }
3448
- .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
+ );
3449
3444
  --amplify-internal-togglebutton-link-hover-background-color: var(
3450
3445
  --amplify-components-togglebutton-link-pressed-hover-background-color
3451
3446
  );
3452
3447
  --amplify-internal-togglebutton-link-hover-color: var(
3453
- --amplify-components-togglebutton-link-pressed-color
3448
+ --amplify-components-togglebutton-link-pressed-hover-color
3454
3449
  );
3455
- }
3456
- .amplify-togglebutton--pressed:focus {
3457
- --amplify-internal-togglebutton-link-focus-background-color: var(
3458
- --amplify-components-togglebutton-link-pressed-background-color
3459
- );
3460
- --amplify-internal-togglebutton-link-focus-color: var(
3450
+ --amplify-internal-togglebutton-link-disabled-color: var(
3461
3451
  --amplify-components-togglebutton-link-pressed-color
3462
3452
  );
3463
3453
  }
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 19 May 2022 22:35:34 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);
@@ -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);
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/toggleButton.d.ts CHANGED
@@ -15,6 +15,7 @@ interface ToggleButtonDisabledTokens {
15
15
  color: DesignToken<ColorValue>;
16
16
  }
17
17
  interface ToggleButtonPressedTokens {
18
+ borderColor: DesignToken<BorderColorValue>;
18
19
  color: DesignToken<ColorValue>;
19
20
  backgroundColor: DesignToken<BackgroundColorValue>;
20
21
  _hover: ToggleButtonPressedHoverTokens;
@@ -41,6 +42,7 @@ interface ToggleButtonPrimaryHoverTokens {
41
42
  color: DesignToken<ColorValue>;
42
43
  }
43
44
  interface ToggleButtonPrimaryDisabledTokens {
45
+ borderColor: DesignToken<BorderColorValue>;
44
46
  backgroundColor: DesignToken<BackgroundColorValue>;
45
47
  color: DesignToken<ColorValue>;
46
48
  }
@@ -57,12 +59,16 @@ interface ToggleButtonPrimaryPressedTokens {
57
59
  interface TogglButtonPrimaryPressedFocusTokens {
58
60
  backgroundColor: DesignToken<BackgroundColorValue>;
59
61
  borderColor: DesignToken<BorderColorValue>;
62
+ color: DesignToken<ColorValue>;
60
63
  }
61
64
  interface TogglButtonPrimaryPressedHoverTokens {
62
65
  backgroundColor: DesignToken<BackgroundColorValue>;
63
66
  borderColor: DesignToken<BorderColorValue>;
67
+ boxShadow: DesignToken<BoxShadowValue>;
68
+ color: DesignToken<ColorValue>;
64
69
  }
65
70
  interface ToggleButtonLinkTokens {
71
+ backgroundColor: DesignToken<BackgroundColorValue>;
66
72
  color: DesignToken<ColorValue>;
67
73
  _hover: ToggleButtonLinkHoverTokens;
68
74
  _focus: ToggleButtonLinkFocusTokens;
@@ -78,14 +84,21 @@ interface ToggleButtonLinkFocusTokens {
78
84
  color: DesignToken<ColorValue>;
79
85
  }
80
86
  interface ToggleButtonLinkDisabledTokens {
87
+ backgroundColor: DesignToken<BackgroundColorValue>;
81
88
  color: DesignToken<ColorValue>;
82
89
  }
83
90
  interface ToggleButtonLinkPressedTokens {
84
91
  backgroundColor: DesignToken<BackgroundColorValue>;
85
92
  color: DesignToken<ColorValue>;
93
+ _focus: ToggleButtonLinkPressedFocusTokens;
86
94
  _hover: ToggleButtonLinkPressedHoverTokens;
87
95
  }
96
+ interface ToggleButtonLinkPressedFocusTokens {
97
+ color: DesignToken<ColorValue>;
98
+ backgroundColor: DesignToken<BackgroundColorValue>;
99
+ }
88
100
  interface ToggleButtonLinkPressedHoverTokens {
101
+ color: DesignToken<ColorValue>;
89
102
  backgroundColor: DesignToken<BackgroundColorValue>;
90
103
  }
91
104
  export interface ToggleButtonTokens {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "3.9.1",
3
+ "version": "3.9.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {