@aws-amplify/ui 3.9.1 → 3.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/esm/helpers/authenticator/facade.js +1 -1
  2. package/dist/esm/index.js +1 -1
  3. package/dist/esm/machines/authenticator/actors/signIn.js +1 -1
  4. package/dist/esm/machines/authenticator/defaultServices.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/node_modules/tslib/tslib.es6.js +0 -14
  8. package/dist/esm/theme/defaultDarkModeOverride.js +1 -1
  9. package/dist/esm/theme/tokens/colors.js +1 -1
  10. package/dist/esm/theme/tokens/components/checkbox.js +1 -1
  11. package/dist/esm/theme/tokens/components/collection.js +1 -0
  12. package/dist/esm/theme/tokens/components/expander.js +1 -1
  13. package/dist/esm/theme/tokens/components/index.js +1 -1
  14. package/dist/esm/theme/tokens/components/menu.js +1 -1
  15. package/dist/esm/theme/tokens/components/pagination.js +1 -1
  16. package/dist/esm/theme/tokens/components/radio.js +1 -1
  17. package/dist/esm/theme/tokens/components/searchField.js +1 -0
  18. package/dist/esm/theme/tokens/components/toggleButton.js +1 -1
  19. package/dist/index.js +1 -16
  20. package/dist/styles.css +259 -148
  21. package/dist/theme.css +75 -30
  22. package/dist/types/machines/authenticator/actors/resetPassword.d.ts +1 -21
  23. package/dist/types/machines/authenticator/actors/signIn.d.ts +1 -21
  24. package/dist/types/machines/authenticator/actors/signOut.d.ts +1 -21
  25. package/dist/types/machines/authenticator/index.d.ts +1 -21
  26. package/dist/types/machines/authenticator/signUp.d.ts +1 -21
  27. package/dist/types/theme/index.d.ts +1 -0
  28. package/dist/types/theme/tokens/colors.d.ts +1 -0
  29. package/dist/types/theme/tokens/components/button.d.ts +1 -1
  30. package/dist/types/theme/tokens/components/collection.d.ts +32 -0
  31. package/dist/types/theme/tokens/components/index.d.ts +4 -0
  32. package/dist/types/theme/tokens/components/pagination.d.ts +2 -2
  33. package/dist/types/theme/tokens/components/searchField.d.ts +15 -0
  34. package/dist/types/theme/tokens/components/toggleButton.d.ts +13 -0
  35. package/dist/types/theme/tokens/space.d.ts +1 -2
  36. package/dist/types/theme/types.d.ts +6 -0
  37. package/package.json +2 -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, 14 Jun 2022 23:36:33 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -362,6 +362,7 @@
362
362
  --amplify-colors-font-warning: var(--amplify-colors-orange-90);
363
363
  --amplify-colors-font-info: var(--amplify-colors-blue-90);
364
364
  --amplify-colors-font-inverse: var(--amplify-colors-white);
365
+ --amplify-colors-font-disabled: var(--amplify-colors-neutral-60);
365
366
  --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
366
367
  --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
367
368
  --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
@@ -380,17 +381,19 @@
380
381
  --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
381
382
  --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
382
383
  --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
384
+ --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
385
+ --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
386
+ --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
383
387
  --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
384
388
  --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
389
+ --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
385
390
  --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
386
391
  --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
387
392
  --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
388
393
  --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
389
394
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
390
- --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
391
- --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
395
+ --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
392
396
  --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
397
  --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
395
398
  --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
396
399
  --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
@@ -398,9 +401,7 @@
398
401
  --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
399
402
  --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
400
403
  --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
401
- --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
402
404
  --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
403
- --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
404
405
  --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
405
406
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
406
407
  --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
@@ -444,6 +445,7 @@
444
445
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
445
446
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
446
447
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
448
+ --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
447
449
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
448
450
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
449
451
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
@@ -456,8 +458,6 @@
456
458
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
457
459
  --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
458
460
  --amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
459
- --amplify-components-radio-button-background-color: var(--amplify-colors-white);
460
- --amplify-components-radio-button-color: var(--amplify-colors-white);
461
461
  --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium);
462
462
  --amplify-components-radio-button-height: var(--amplify-font-sizes-medium);
463
463
  --amplify-components-radio-button-width: var(--amplify-font-sizes-medium);
@@ -479,7 +479,6 @@
479
479
  --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs);
480
480
  --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
481
481
  --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
482
- --amplify-components-pagination-current-color: var(--amplify-colors-white);
483
482
  --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
484
483
  --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
485
484
  --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl);
@@ -489,7 +488,6 @@
489
488
  --amplify-components-menu-gap: var(--amplify-space-zero);
490
489
  --amplify-components-menu-border-width: var(--amplify-border-widths-small);
491
490
  --amplify-components-menu-border-radius: var(--amplify-radii-medium);
492
- --amplify-components-menu-background-color: var(--amplify-colors-white);
493
491
  --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-large);
494
492
  --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
495
493
  --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-small);
@@ -571,7 +569,6 @@
571
569
  --amplify-components-expander-item-border-bottom-right-radius: var(--amplify-radii-medium);
572
570
  --amplify-components-expander-item-border-bottom-left-radius: var(--amplify-radii-medium);
573
571
  --amplify-components-expander-border-radius: var(--amplify-radii-medium);
574
- --amplify-components-expander-background-color: var(--amplify-colors-white);
575
572
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
576
573
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
577
574
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
@@ -593,7 +590,6 @@
593
590
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
594
591
  --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent);
595
592
  --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
596
- --amplify-components-checkbox-button-color: var(--amplify-colors-white);
597
593
  --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
598
594
  --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
599
595
  --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
@@ -632,20 +628,29 @@
632
628
  --amplify-components-alert-padding-inline: var(--amplify-space-medium);
633
629
  --amplify-components-alert-padding-block: var(--amplify-space-small);
634
630
  --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
631
+ --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
635
632
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
636
633
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
637
634
  --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
638
635
  --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
639
636
  --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
640
637
  --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
641
- --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
638
+ --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
639
+ --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
640
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
642
641
  --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
643
642
  --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
643
+ --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary);
644
+ --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
644
645
  --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
645
646
  --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);
647
+ --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
648
+ --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
649
+ --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
647
650
  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
648
- --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
651
+ --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
652
+ --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
653
+ --amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
649
654
  --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
650
655
  --amplify-components-text-info-color: var(--amplify-colors-font-info);
651
656
  --amplify-components-text-success-color: var(--amplify-colors-font-success);
@@ -656,6 +661,7 @@
656
661
  --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
657
662
  --amplify-components-text-color: var(--amplify-colors-font-primary);
658
663
  --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
664
+ --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
659
665
  --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
660
666
  --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
661
667
  --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
@@ -679,16 +685,22 @@
679
685
  --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
680
686
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
681
687
  --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
688
+ --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
682
689
  --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
683
690
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
684
691
  --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
692
+ --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary);
693
+ --amplify-components-radio-button-color: var(--amplify-colors-background-primary);
685
694
  --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
686
695
  --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
687
696
  --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
697
+ --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
688
698
  --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
689
699
  --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
700
+ --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
690
701
  --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
691
702
  --amplify-components-menu-border-color: var(--amplify-colors-border-primary);
703
+ --amplify-components-menu-background-color: var(--amplify-colors-background-primary);
692
704
  --amplify-components-loader-text-fill: var(--amplify-colors-font-primary);
693
705
  --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
694
706
  --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
@@ -697,6 +709,7 @@
697
709
  --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
698
710
  --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
699
711
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
712
+ --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
700
713
  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
701
714
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
702
715
  --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
@@ -708,14 +721,20 @@
708
721
  --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
709
722
  --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
710
723
  --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
724
+ --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
711
725
  --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
712
726
  --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
713
727
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
714
728
  --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
729
+ --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color);
730
+ --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color);
731
+ --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color);
732
+ --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
715
733
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
716
734
  --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
717
735
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
718
736
  --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
737
+ --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse);
719
738
  --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
720
739
  --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
721
740
  --amplify-components-card-background-color: var(--amplify-colors-background-primary);
@@ -727,9 +746,12 @@
727
746
  --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
728
747
  --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
729
748
  --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
749
+ --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
750
+ --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
730
751
  --amplify-components-button-link-active-background-color: var(--amplify-colors-brand-primary-20);
731
752
  --amplify-components-button-link-focus-background-color: var(--amplify-colors-brand-primary-10);
732
753
  --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
754
+ --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
733
755
  --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90);
734
756
  --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
735
757
  --amplify-components-button-menu-focus-background-color: var(--amplify-colors-brand-primary-80);
@@ -742,10 +764,14 @@
742
764
  --amplify-components-button-primary-focus-background-color: var(--amplify-colors-brand-primary-90);
743
765
  --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
744
766
  --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
767
+ --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
768
+ --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
745
769
  --amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
746
770
  --amplify-components-button-primary-background-color: var(--amplify-colors-brand-primary-80);
747
771
  --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
772
+ --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
748
773
  --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
774
+ --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
749
775
  --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
750
776
  --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
751
777
  --amplify-components-button-focus-background-color: var(--amplify-colors-brand-primary-10);
@@ -785,14 +811,14 @@
785
811
  --amplify-components-alert-info-color: var(--amplify-colors-font-info);
786
812
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
787
813
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
788
- --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
789
814
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
790
815
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
791
- --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
816
+ --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
817
+ --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
792
818
  --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
793
- --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
819
+ --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
820
+ --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
794
821
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
795
- --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
796
822
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
797
823
  --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
798
824
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
@@ -803,25 +829,34 @@
803
829
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
804
830
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
805
831
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
806
- --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
832
+ --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
833
+ --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
834
+ --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
835
+ --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color);
836
+ --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
837
+ --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color);
838
+ --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
839
+ --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
840
+ --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
807
841
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
808
842
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
809
843
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
810
844
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
811
- --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
812
845
  --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
813
846
  --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
814
847
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
815
848
  --amplify-components-link-color: var(--amplify-colors-font-interactive);
816
849
  --amplify-components-link-active-color: var(--amplify-colors-font-active);
817
850
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
818
- --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
819
851
  --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
820
852
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
821
853
  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
822
854
  --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
823
855
  --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
824
- --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
856
+ --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color);
857
+ --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color);
858
+ --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color);
859
+ --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color);
825
860
  --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
826
861
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
827
862
  --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
@@ -829,19 +864,12 @@
829
864
  --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
830
865
  --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
831
866
  --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
832
- --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
833
- --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
834
867
  --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
835
868
  --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
836
869
  --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
837
870
  --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
838
- --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
839
- --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
840
871
  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
841
- --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
842
872
  --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
843
- --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
844
- --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
845
873
  --amplify-components-button-active-color: var(--amplify-colors-font-active);
846
874
  --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
847
875
  --amplify-components-button-focus-color: var(--amplify-colors-font-focus);
@@ -849,10 +877,27 @@
849
877
  --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
850
878
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
851
879
  --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
880
+ --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
881
+ --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
882
+ --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
883
+ --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
852
884
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
885
+ --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color);
886
+ --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color);
887
+ --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color);
888
+ --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color);
889
+ --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color);
890
+ --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color);
891
+ --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color);
892
+ --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color);
893
+ --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color);
853
894
  --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
854
895
  --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
855
896
  --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
897
+ --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color);
898
+ --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color);
899
+ --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color);
900
+ --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color);
856
901
  }
857
902
 
858
903
  html {
@@ -1876,14 +1921,72 @@ strong.amplify-text {
1876
1921
  .amplify-collection {
1877
1922
  flex-direction: column;
1878
1923
  }
1879
-
1880
- .amplify-collection-search {
1881
- flex-direction: row;
1924
+ .amplify-collection-pagination {
1882
1925
  justify-content: center;
1926
+ --amplify-components-pagination-current-color: var(
1927
+ --amplify-components-collection-pagination-current-color
1928
+ );
1929
+ --amplify-components-pagination-current-background-color: var(
1930
+ --amplify-components-collection-pagination-current-background-color
1931
+ );
1932
+ --amplify-components-pagination-button-color: var(
1933
+ --amplify-components-collection-pagination-button-color
1934
+ );
1935
+ --amplify-components-pagination-button-hover-color: var(
1936
+ --amplify-components-collection-pagination-button-hover-color
1937
+ );
1938
+ --amplify-components-pagination-button-hover-background-color: var(
1939
+ --amplify-components-collection-pagination-button-hover-background-color
1940
+ );
1941
+ --amplify-components-pagination-button-disabled-color: var(
1942
+ --amplify-components-collection-pagination-button-disabled-color
1943
+ );
1883
1944
  }
1884
-
1885
- .amplify-collection-pagination {
1945
+ .amplify-collection-search {
1946
+ flex-direction: row;
1886
1947
  justify-content: center;
1948
+ --amplify-components-searchfield-input-color: var(
1949
+ --amplify-components-collection-search-input-color
1950
+ );
1951
+ --amplify-components-searchfield-button-color: var(
1952
+ --amplify-components-collection-search-button-color
1953
+ );
1954
+ --amplify-components-searchfield-button-active-background-color: var(
1955
+ --amplify-components-collection-search-button-active-background-color
1956
+ );
1957
+ --amplify-components-searchfield-button-active-border-color: var(
1958
+ --amplify-components-collection-search-button-active-border-color
1959
+ );
1960
+ --amplify-components-searchfield-button-active-color: var(
1961
+ --amplify-components-collection-search-button-active-color
1962
+ );
1963
+ --amplify-components-searchfield-button-disabled-background-color: var(
1964
+ --amplify-components-collection-search-button-disabled-background-color
1965
+ );
1966
+ --amplify-components-searchfield-button-disabled-border-color: var(
1967
+ --amplify-components-collection-search-button-disabled-border-color
1968
+ );
1969
+ --amplify-components-searchfield-button-disabled-color: var(
1970
+ --amplify-components-collection-search-button-disabled-color
1971
+ );
1972
+ --amplify-components-searchfield-button-focus-background-color: var(
1973
+ --amplify-components-collection-search-button-focus-background-color
1974
+ );
1975
+ --amplify-components-searchfield-button-focus-border-color: var(
1976
+ --amplify-components-collection-search-button-focus-border-color
1977
+ );
1978
+ --amplify-components-searchfield-button-focus-color: var(
1979
+ --amplify-components-collection-search-button-focus-color
1980
+ );
1981
+ --amplify-components-searchfield-button-hover-background-color: var(
1982
+ --amplify-components-collection-search-button-hover-background-color
1983
+ );
1984
+ --amplify-components-searchfield-button-hover-border-color: var(
1985
+ --amplify-components-collection-search-button-hover-border-color
1986
+ );
1987
+ --amplify-components-searchfield-button-hover-color: var(
1988
+ --amplify-components-collection-search-button-hover-color
1989
+ );
1887
1990
  }
1888
1991
 
1889
1992
  .amplify-checkbox {
@@ -2570,6 +2673,35 @@ html[dir=rtl] .amplify-field-group__inner-start {
2570
2673
  align-items: flex-start;
2571
2674
  }
2572
2675
 
2676
+ .amplify-searchfield {
2677
+ --amplify-components-fieldcontrol-color: var(
2678
+ --amplify-components-searchfield-input-color
2679
+ );
2680
+ }
2681
+ .amplify-searchfield__search {
2682
+ color: var(--amplify-components-searchfield-button-color);
2683
+ }
2684
+ .amplify-searchfield__search:active {
2685
+ background-color: var(--amplify-components-button-active-background-color);
2686
+ border-color: var(--amplify-components-button-active-border-color);
2687
+ color: var(--amplify-components-button-active-color);
2688
+ }
2689
+ .amplify-searchfield__search:disabled {
2690
+ background-color: var(--amplify-components-searchfield-button-disabled-background-color);
2691
+ border-color: var(--amplify-components-searchfield-button-disabled-border-color);
2692
+ color: var(--amplify-components-searchfield-button-disabled-color);
2693
+ }
2694
+ .amplify-searchfield__search:focus {
2695
+ background-color: var(--amplify-components-searchfield-button-focus-background-color);
2696
+ border-color: var(--amplify-components-searchfield-button-focus-border-color);
2697
+ color: var(--amplify-components-searchfield-button-focus-color);
2698
+ }
2699
+ .amplify-searchfield__search:hover {
2700
+ background-color: var(--amplify-components-searchfield-button-hover-background-color);
2701
+ border-color: var(--amplify-components-searchfield-button-hover-border-color);
2702
+ color: var(--amplify-components-searchfield-button-hover-color);
2703
+ }
2704
+
2573
2705
  .amplify-select__wrapper {
2574
2706
  flex: var(--amplify-components-select-wrapper-flex);
2575
2707
  display: var(--amplify-components-select-wrapper-display);
@@ -3161,9 +3293,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3161
3293
  }
3162
3294
 
3163
3295
  .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
3296
  --amplify-internal-togglebutton-background-color: initial;
3168
3297
  --amplify-internal-togglebutton-border-color: var(
3169
3298
  --amplify-components-togglebutton-border-color
@@ -3171,9 +3300,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3171
3300
  --amplify-internal-togglebutton-color: var(
3172
3301
  --amplify-components-togglebutton-color
3173
3302
  );
3174
- --amplify-internal-togglebutton-hover-background-color: var(
3175
- --amplify-components-togglebutton-hover-background-color
3176
- );
3303
+ background-color: var(--amplify-internal-togglebutton-background-color);
3304
+ border-color: var(--amplify-internal-togglebutton-border-color);
3305
+ color: var(--amplify-internal-togglebutton-color);
3177
3306
  --amplify-internal-togglebutton-focus-background-color: var(
3178
3307
  --amplify-internal-togglebutton-background-color
3179
3308
  );
@@ -3183,6 +3312,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
3183
3312
  --amplify-internal-togglebutton-focus-color: var(
3184
3313
  --amplify-components-togglebutton-focus-color
3185
3314
  );
3315
+ --amplify-internal-togglebutton-hover-background-color: var(
3316
+ --amplify-components-togglebutton-hover-background-color
3317
+ );
3318
+ --amplify-internal-togglebutton-hover-border-color: var(
3319
+ --amplify-internal-togglebutton-border-color
3320
+ );
3321
+ --amplify-internal-togglebutton-hover-color: var(
3322
+ --amplify-internal-togglebutton-color
3323
+ );
3186
3324
  --amplify-internal-togglebutton-active-background-color: var(
3187
3325
  --amplify-components-togglebutton-active-background-color
3188
3326
  );
@@ -3196,19 +3334,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
3196
3334
  --amplify-components-togglebutton-disabled-color
3197
3335
  );
3198
3336
  }
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
3337
  .amplify-togglebutton:focus {
3208
3338
  background-color: var(--amplify-internal-togglebutton-focus-background-color);
3209
3339
  border-color: var(--amplify-internal-togglebutton-focus-border-color);
3210
3340
  color: var(--amplify-internal-togglebutton-focus-color);
3211
3341
  }
3342
+ .amplify-togglebutton:hover {
3343
+ background-color: var(--amplify-internal-togglebutton-hover-background-color);
3344
+ border-color: var(--amplify-internal-togglebutton-hover-border-color);
3345
+ color: var(--amplify-internal-togglebutton-hover-color);
3346
+ }
3212
3347
  .amplify-togglebutton:active {
3213
3348
  background-color: var(--amplify-internal-togglebutton-active-background-color);
3214
3349
  }
@@ -3218,22 +3353,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3218
3353
  color: var(--amplify-internal-togglebutton-disabled-color);
3219
3354
  }
3220
3355
  .amplify-togglebutton--pressed {
3356
+ --amplify-internal-togglebutton-border-color: var(
3357
+ --amplify-components-togglebutton-pressed-border-color
3358
+ );
3221
3359
  --amplify-internal-togglebutton-background-color: var(
3222
3360
  --amplify-components-togglebutton-pressed-background-color
3223
3361
  );
3224
3362
  --amplify-internal-togglebutton-color: var(
3225
3363
  --amplify-components-togglebutton-pressed-color
3226
3364
  );
3227
- }
3228
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3229
3365
  --amplify-internal-togglebutton-hover-background-color: var(
3230
3366
  --amplify-components-togglebutton-pressed-hover-background-color
3231
3367
  );
3232
- }
3233
- .amplify-togglebutton--pressed:disabled {
3234
3368
  --amplify-internal-togglebutton-disabled-background-color: var(
3235
3369
  --amplify-components-togglebutton-pressed-background-color
3236
3370
  );
3371
+ --amplify-internal-togglebutton-disabled-border-color: var(
3372
+ --amplify-components-togglebutton-pressed-border-color
3373
+ );
3237
3374
  --amplify-internal-togglebutton-disabled-color: var(
3238
3375
  --amplify-components-togglebutton-pressed-color
3239
3376
  );
@@ -3258,27 +3395,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3258
3395
  --amplify-internal-togglebutton-primary-color
3259
3396
  );
3260
3397
  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
3398
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3283
3399
  --amplify-components-togglebutton-primary-focus-background-color
3284
3400
  );
@@ -3288,6 +3404,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
3288
3404
  --amplify-internal-togglebutton-primary-focus-color: var(
3289
3405
  --amplify-components-togglebutton-primary-focus-color
3290
3406
  );
3407
+ --amplify-internal-togglebutton-primary-focus-box-shadow: var(
3408
+ --amplify-components-togglebutton-primary-focus-box-shadow
3409
+ );
3410
+ --amplify-internal-togglebutton-focus-background-color: var(
3411
+ --amplify-internal-togglebutton-primary-focus-background-color
3412
+ );
3413
+ --amplify-internal-togglebutton-focus-border-color: var(
3414
+ --amplify-internal-togglebutton-primary-focus-border-color
3415
+ );
3416
+ --amplify-internal-togglebutton-focus-color: var(
3417
+ --amplify-internal-togglebutton-primary-focus-color
3418
+ );
3291
3419
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3292
3420
  --amplify-components-togglebutton-primary-hover-background-color
3293
3421
  );
@@ -3297,40 +3425,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3297
3425
  --amplify-internal-togglebutton-primary-hover-color: var(
3298
3426
  --amplify-components-togglebutton-primary-hover-color
3299
3427
  );
3428
+ --amplify-internal-togglebutton-hover-background-color: var(
3429
+ --amplify-internal-togglebutton-primary-hover-background-color
3430
+ );
3431
+ --amplify-internal-togglebutton-hover-border-color: var(
3432
+ --amplify-internal-togglebutton-primary-hover-border-color
3433
+ );
3434
+ --amplify-internal-togglebutton-hover-color: var(
3435
+ --amplify-internal-togglebutton-primary-hover-color
3436
+ );
3300
3437
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3301
3438
  --amplify-components-togglebutton-primary-disabled-background-color
3302
3439
  );
3303
3440
  --amplify-internal-togglebutton-primary-disabled-border-color: var(
3304
- --amplify-internal-togglebutton-primary-border-color
3441
+ --amplify-components-togglebutton-primary-disabled-border-color
3305
3442
  );
3306
3443
  --amplify-internal-togglebutton-primary-disabled-color: var(
3307
3444
  --amplify-components-togglebutton-primary-disabled-color
3308
3445
  );
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
3446
  --amplify-internal-togglebutton-disabled-background-color: var(
3335
3447
  --amplify-internal-togglebutton-primary-disabled-background-color
3336
3448
  );
@@ -3341,6 +3453,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3341
3453
  --amplify-internal-togglebutton-primary-disabled-color
3342
3454
  );
3343
3455
  }
3456
+ .amplify-togglebutton--primary:focus {
3457
+ box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
3458
+ }
3344
3459
  .amplify-togglebutton--pressed {
3345
3460
  --amplify-internal-togglebutton-primary-background-color: var(
3346
3461
  --amplify-components-togglebutton-primary-pressed-background-color
@@ -3351,43 +3466,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3351
3466
  --amplify-internal-togglebutton-primary-color: var(
3352
3467
  --amplify-components-togglebutton-primary-pressed-color
3353
3468
  );
3354
- }
3355
- .amplify-togglebutton--pressed:focus {
3356
3469
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3357
3470
  --amplify-components-togglebutton-primary-pressed-focus-background-color
3358
3471
  );
3359
3472
  --amplify-internal-togglebutton-primary-focus-border-color: var(
3360
3473
  --amplify-components-togglebutton-primary-pressed-focus-border-color
3361
3474
  );
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
3475
  --amplify-internal-togglebutton-primary-focus-color: var(
3376
- --amplify-components-togglebutton-primary-pressed-color
3476
+ --amplify-components-togglebutton-primary-pressed-focus-color
3377
3477
  );
3378
- }
3379
- .amplify-togglebutton--pressed:hover {
3380
3478
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3381
- --amplify-components-togglebutton-primary-hover-background-color
3479
+ --amplify-components-togglebutton-primary-pressed-hover-background-color
3382
3480
  );
3383
3481
  --amplify-internal-togglebutton-primary-hover-border-color: var(
3384
- --amplify-internal-togglebutton-primary-border-color
3482
+ --amplify-components-togglebutton-primary-pressed-hover-border-color
3385
3483
  );
3386
3484
  --amplify-internal-togglebutton-primary-hover-color: var(
3387
- --amplify-components-togglebutton-primary-pressed-color
3485
+ --amplify-components-togglebutton-primary-pressed-hover-color
3388
3486
  );
3389
- }
3390
- .amplify-togglebutton--pressed:disabled {
3391
3487
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3392
3488
  --amplify-components-togglebutton-primary-pressed-background-color
3393
3489
  );
@@ -3398,27 +3494,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3398
3494
  --amplify-components-togglebutton-primary-pressed-color
3399
3495
  );
3400
3496
  }
3497
+ .amplify-togglebutton--pressed:hover {
3498
+ --amplify-internal-togglebutton-primary-focus-box-shadow: var(
3499
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow
3500
+ );
3501
+ }
3401
3502
  .amplify-togglebutton--link {
3402
3503
  --amplify-internal-togglebutton-link-background-color: var(
3403
- --amplify-components-togglebutton-background-color
3504
+ --amplify-components-togglebutton-link-background-color
3404
3505
  );
3405
3506
  --amplify-internal-togglebutton-link-color: var(
3406
3507
  --amplify-components-togglebutton-link-color
3407
3508
  );
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
3509
+ --amplify-internal-togglebutton-background-color: var(
3510
+ --amplify-internal-togglebutton-link-background-color
3412
3511
  );
3413
- --amplify-internal-togglebutton-link-hover-color: var(
3414
- --amplify-components-togglebutton-link-hover-color
3512
+ --amplify-internal-togglebutton-color: var(
3513
+ --amplify-internal-togglebutton-link-color
3415
3514
  );
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
3515
  --amplify-internal-togglebutton-link-focus-background-color: var(
3423
3516
  --amplify-components-togglebutton-link-focus-background-color
3424
3517
  );
@@ -3431,11 +3524,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
3431
3524
  --amplify-internal-togglebutton-focus-color: var(
3432
3525
  --amplify-internal-togglebutton-link-focus-color
3433
3526
  );
3434
- }
3435
- .amplify-togglebutton--link:disabled {
3436
- --amplify-internal-togglebutton-disabled-color: var(
3527
+ --amplify-internal-togglebutton-link-hover-background-color: var(
3528
+ --amplify-components-togglebutton-link-hover-background-color
3529
+ );
3530
+ --amplify-internal-togglebutton-link-hover-color: var(
3531
+ --amplify-components-togglebutton-link-hover-color
3532
+ );
3533
+ --amplify-internal-togglebutton-hover-background-color: var(
3534
+ --amplify-internal-togglebutton-link-hover-background-color
3535
+ );
3536
+ --amplify-internal-togglebutton-hover-color: var(
3537
+ --amplify-internal-togglebutton-link-hover-color
3538
+ );
3539
+ --amplify-internal-togglebutton-link-disabled-color: var(
3437
3540
  --amplify-components-togglebutton-link-disabled-color
3438
3541
  );
3542
+ --amplify-internal-togglebutton-link-disabled-background-color: var(
3543
+ --amplify-components-togglebutton-link-disabled-background-color
3544
+ );
3545
+ --amplify-internal-togglebutton-disabled-color: var(
3546
+ --amplify-internal-togglebutton-link-disabled-color
3547
+ );
3548
+ --amplify-internal-togglebutton-disabled-background-color: var(
3549
+ --amplify-internal-togglebutton-link-disabled-background-color
3550
+ );
3439
3551
  }
3440
3552
  .amplify-togglebutton--pressed {
3441
3553
  --amplify-internal-togglebutton-link-color: var(
@@ -3444,20 +3556,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
3444
3556
  --amplify-internal-togglebutton-link-background-color: var(
3445
3557
  --amplify-components-togglebutton-link-pressed-background-color
3446
3558
  );
3447
- }
3448
- .amplify-togglebutton--pressed:hover {
3559
+ --amplify-internal-togglebutton-link-focus-background-color: var(
3560
+ --amplify-components-togglebutton-link-pressed-focus-background-color
3561
+ );
3562
+ --amplify-internal-togglebutton-link-focus-color: var(
3563
+ --amplify-components-togglebutton-link-pressed-focus-color
3564
+ );
3449
3565
  --amplify-internal-togglebutton-link-hover-background-color: var(
3450
3566
  --amplify-components-togglebutton-link-pressed-hover-background-color
3451
3567
  );
3452
3568
  --amplify-internal-togglebutton-link-hover-color: var(
3453
- --amplify-components-togglebutton-link-pressed-color
3454
- );
3455
- }
3456
- .amplify-togglebutton--pressed:focus {
3457
- --amplify-internal-togglebutton-link-focus-background-color: var(
3458
- --amplify-components-togglebutton-link-pressed-background-color
3569
+ --amplify-components-togglebutton-link-pressed-hover-color
3459
3570
  );
3460
- --amplify-internal-togglebutton-link-focus-color: var(
3571
+ --amplify-internal-togglebutton-link-disabled-color: var(
3461
3572
  --amplify-components-togglebutton-link-pressed-color
3462
3573
  );
3463
3574
  }