@aws-amplify/ui 3.9.2 → 3.11.0

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 (41) hide show
  1. package/dist/esm/helpers/authenticator/constants.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/defaultServices.js +1 -1
  5. package/dist/esm/node_modules/tslib/tslib.es6.js +0 -14
  6. package/dist/esm/theme/defaultDarkModeOverride.js +1 -1
  7. package/dist/esm/theme/tokens/colors.js +1 -1
  8. package/dist/esm/theme/tokens/components/checkbox.js +1 -1
  9. package/dist/esm/theme/tokens/components/collection.js +1 -0
  10. package/dist/esm/theme/tokens/components/expander.js +1 -1
  11. package/dist/esm/theme/tokens/components/index.js +1 -1
  12. package/dist/esm/theme/tokens/components/menu.js +1 -1
  13. package/dist/esm/theme/tokens/components/pagination.js +1 -1
  14. package/dist/esm/theme/tokens/components/passwordField.js +1 -0
  15. package/dist/esm/theme/tokens/components/radio.js +1 -1
  16. package/dist/esm/theme/tokens/components/searchField.js +1 -0
  17. package/dist/esm/theme/tokens/components/textAreaField.js +1 -0
  18. package/dist/esm/theme/tokens/components/textField.js +1 -0
  19. package/dist/esm/theme/tokens/components/toggleButton.js +1 -1
  20. package/dist/index.js +1 -16
  21. package/dist/styles.css +239 -31
  22. package/dist/theme.css +80 -26
  23. package/dist/types/helpers/authenticator/constants.d.ts +6 -0
  24. package/dist/types/helpers/authenticator/utils.d.ts +1 -0
  25. package/dist/types/machines/authenticator/actors/resetPassword.d.ts +1 -21
  26. package/dist/types/machines/authenticator/actors/signIn.d.ts +1 -21
  27. package/dist/types/machines/authenticator/actors/signOut.d.ts +1 -21
  28. package/dist/types/machines/authenticator/index.d.ts +1 -21
  29. package/dist/types/machines/authenticator/signUp.d.ts +1 -21
  30. package/dist/types/theme/index.d.ts +1 -0
  31. package/dist/types/theme/tokens/components/button.d.ts +1 -1
  32. package/dist/types/theme/tokens/components/collection.d.ts +32 -0
  33. package/dist/types/theme/tokens/components/index.d.ts +10 -0
  34. package/dist/types/theme/tokens/components/pagination.d.ts +2 -2
  35. package/dist/types/theme/tokens/components/passwordField.d.ts +15 -0
  36. package/dist/types/theme/tokens/components/searchField.d.ts +15 -0
  37. package/dist/types/theme/tokens/components/textAreaField.d.ts +11 -0
  38. package/dist/types/theme/tokens/components/textField.d.ts +11 -0
  39. package/dist/types/theme/tokens/space.d.ts +1 -2
  40. package/dist/types/theme/types.d.ts +6 -0
  41. 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 Tue, 24 May 2022 22:52:46 GMT
6
+ * Generated on Fri, 17 Jun 2022 21:04:04 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);
@@ -392,9 +393,6 @@
392
393
  --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
393
394
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
394
395
  --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);
397
- --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
398
396
  --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
399
397
  --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
400
398
  --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
@@ -447,6 +445,7 @@
447
445
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
448
446
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
449
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);
450
449
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
451
450
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
452
451
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
@@ -459,8 +458,6 @@
459
458
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
460
459
  --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
461
460
  --amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
462
- --amplify-components-radio-button-background-color: var(--amplify-colors-white);
463
- --amplify-components-radio-button-color: var(--amplify-colors-white);
464
461
  --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium);
465
462
  --amplify-components-radio-button-height: var(--amplify-font-sizes-medium);
466
463
  --amplify-components-radio-button-width: var(--amplify-font-sizes-medium);
@@ -469,6 +466,7 @@
469
466
  --amplify-components-placeholder-small-height: var(--amplify-space-small);
470
467
  --amplify-components-placeholder-transition-duration: var(--amplify-time-long);
471
468
  --amplify-components-placeholder-border-radius: var(--amplify-radii-small);
469
+ --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
472
470
  --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium);
473
471
  --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl);
474
472
  --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl);
@@ -482,7 +480,6 @@
482
480
  --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs);
483
481
  --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
484
482
  --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
485
- --amplify-components-pagination-current-color: var(--amplify-colors-white);
486
483
  --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
487
484
  --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
488
485
  --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl);
@@ -492,7 +489,6 @@
492
489
  --amplify-components-menu-gap: var(--amplify-space-zero);
493
490
  --amplify-components-menu-border-width: var(--amplify-border-widths-small);
494
491
  --amplify-components-menu-border-radius: var(--amplify-radii-medium);
495
- --amplify-components-menu-background-color: var(--amplify-colors-white);
496
492
  --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-large);
497
493
  --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
498
494
  --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-small);
@@ -574,7 +570,6 @@
574
570
  --amplify-components-expander-item-border-bottom-right-radius: var(--amplify-radii-medium);
575
571
  --amplify-components-expander-item-border-bottom-left-radius: var(--amplify-radii-medium);
576
572
  --amplify-components-expander-border-radius: var(--amplify-radii-medium);
577
- --amplify-components-expander-background-color: var(--amplify-colors-white);
578
573
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
579
574
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
580
575
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
@@ -596,7 +591,6 @@
596
591
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
597
592
  --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent);
598
593
  --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
599
- --amplify-components-checkbox-button-color: var(--amplify-colors-white);
600
594
  --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
601
595
  --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
602
596
  --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
@@ -642,15 +636,20 @@
642
636
  --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
643
637
  --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
644
638
  --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
645
- --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
639
+ --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
640
+ --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
646
641
  --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
647
642
  --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
648
643
  --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
644
+ --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary);
645
+ --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
649
646
  --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
650
647
  --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
648
+ --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
651
649
  --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
652
650
  --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
653
651
  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
652
+ --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
654
653
  --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
655
654
  --amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
656
655
  --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
@@ -663,6 +662,7 @@
663
662
  --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
664
663
  --amplify-components-text-color: var(--amplify-colors-font-primary);
665
664
  --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
665
+ --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
666
666
  --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
667
667
  --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
668
668
  --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
@@ -686,16 +686,22 @@
686
686
  --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
687
687
  --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
688
688
  --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
689
+ --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
689
690
  --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
690
691
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
691
692
  --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
693
+ --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary);
694
+ --amplify-components-radio-button-color: var(--amplify-colors-background-primary);
692
695
  --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
693
696
  --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
694
697
  --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
698
+ --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
695
699
  --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
696
700
  --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
701
+ --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
697
702
  --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
698
703
  --amplify-components-menu-border-color: var(--amplify-colors-border-primary);
704
+ --amplify-components-menu-background-color: var(--amplify-colors-background-primary);
699
705
  --amplify-components-loader-text-fill: var(--amplify-colors-font-primary);
700
706
  --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
701
707
  --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
@@ -704,6 +710,7 @@
704
710
  --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
705
711
  --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
706
712
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
713
+ --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
707
714
  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
708
715
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
709
716
  --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
@@ -715,14 +722,20 @@
715
722
  --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
716
723
  --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
717
724
  --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
725
+ --amplify-components-expander-background-color: var(--amplify-colors-background-primary);
718
726
  --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
719
727
  --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
720
728
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
721
729
  --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
730
+ --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color);
731
+ --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color);
732
+ --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color);
733
+ --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
722
734
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
723
735
  --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
724
736
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
725
737
  --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
738
+ --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse);
726
739
  --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
727
740
  --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
728
741
  --amplify-components-card-background-color: var(--amplify-colors-background-primary);
@@ -734,9 +747,12 @@
734
747
  --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
735
748
  --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
736
749
  --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
750
+ --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
751
+ --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
737
752
  --amplify-components-button-link-active-background-color: var(--amplify-colors-brand-primary-20);
738
753
  --amplify-components-button-link-focus-background-color: var(--amplify-colors-brand-primary-10);
739
754
  --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
755
+ --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
740
756
  --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90);
741
757
  --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
742
758
  --amplify-components-button-menu-focus-background-color: var(--amplify-colors-brand-primary-80);
@@ -749,10 +765,14 @@
749
765
  --amplify-components-button-primary-focus-background-color: var(--amplify-colors-brand-primary-90);
750
766
  --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
751
767
  --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
768
+ --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
769
+ --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
752
770
  --amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
753
771
  --amplify-components-button-primary-background-color: var(--amplify-colors-brand-primary-80);
754
772
  --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
773
+ --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
755
774
  --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
775
+ --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
756
776
  --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
757
777
  --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
758
778
  --amplify-components-button-focus-background-color: var(--amplify-colors-brand-primary-10);
@@ -792,18 +812,18 @@
792
812
  --amplify-components-alert-info-color: var(--amplify-colors-font-info);
793
813
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
794
814
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
795
- --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
796
815
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
797
816
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
798
- --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
799
817
  --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
800
818
  --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
801
819
  --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
802
820
  --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
803
- --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
804
821
  --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
805
822
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
806
- --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
823
+ --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color);
824
+ --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color);
825
+ --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color);
826
+ --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color);
807
827
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
808
828
  --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
809
829
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
@@ -814,25 +834,43 @@
814
834
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
815
835
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
816
836
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
817
- --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
837
+ --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
838
+ --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
839
+ --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
840
+ --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color);
841
+ --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
842
+ --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color);
843
+ --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
844
+ --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
845
+ --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
818
846
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
819
847
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
820
848
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
821
849
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
822
- --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
850
+ --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
851
+ --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
852
+ --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
853
+ --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
854
+ --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
855
+ --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color);
856
+ --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color);
857
+ --amplify-components-passwordfield-button-color: var(--amplify-components-button-color);
858
+ --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color);
823
859
  --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
824
860
  --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
825
861
  --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
826
862
  --amplify-components-link-color: var(--amplify-colors-font-interactive);
827
863
  --amplify-components-link-active-color: var(--amplify-colors-font-active);
828
864
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
829
- --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
830
865
  --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
831
866
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
832
867
  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
833
868
  --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
834
869
  --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
835
- --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
870
+ --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color);
871
+ --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color);
872
+ --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color);
873
+ --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color);
836
874
  --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
837
875
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
838
876
  --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
@@ -840,19 +878,12 @@
840
878
  --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
841
879
  --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
842
880
  --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
843
- --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
844
- --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
845
881
  --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
846
882
  --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
847
883
  --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
848
884
  --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
849
- --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
850
- --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
851
885
  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
852
- --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
853
886
  --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
854
- --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
855
- --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
856
887
  --amplify-components-button-active-color: var(--amplify-colors-font-active);
857
888
  --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
858
889
  --amplify-components-button-focus-color: var(--amplify-colors-font-focus);
@@ -860,10 +891,33 @@
860
891
  --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
861
892
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
862
893
  --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
894
+ --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
895
+ --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color);
896
+ --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
897
+ --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
898
+ --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
899
+ --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
863
900
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
901
+ --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color);
902
+ --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
903
+ --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
904
+ --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color);
905
+ --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color);
906
+ --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color);
907
+ --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color);
908
+ --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color);
909
+ --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color);
910
+ --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color);
911
+ --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color);
912
+ --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color);
913
+ --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color);
864
914
  --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
865
915
  --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
866
916
  --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
917
+ --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color);
918
+ --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color);
919
+ --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color);
920
+ --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color);
867
921
  }
868
922
 
869
923
  html {
@@ -1887,14 +1941,72 @@ strong.amplify-text {
1887
1941
  .amplify-collection {
1888
1942
  flex-direction: column;
1889
1943
  }
1890
-
1891
- .amplify-collection-search {
1892
- flex-direction: row;
1944
+ .amplify-collection-pagination {
1893
1945
  justify-content: center;
1946
+ --amplify-components-pagination-current-color: var(
1947
+ --amplify-components-collection-pagination-current-color
1948
+ );
1949
+ --amplify-components-pagination-current-background-color: var(
1950
+ --amplify-components-collection-pagination-current-background-color
1951
+ );
1952
+ --amplify-components-pagination-button-color: var(
1953
+ --amplify-components-collection-pagination-button-color
1954
+ );
1955
+ --amplify-components-pagination-button-hover-color: var(
1956
+ --amplify-components-collection-pagination-button-hover-color
1957
+ );
1958
+ --amplify-components-pagination-button-hover-background-color: var(
1959
+ --amplify-components-collection-pagination-button-hover-background-color
1960
+ );
1961
+ --amplify-components-pagination-button-disabled-color: var(
1962
+ --amplify-components-collection-pagination-button-disabled-color
1963
+ );
1894
1964
  }
1895
-
1896
- .amplify-collection-pagination {
1965
+ .amplify-collection-search {
1966
+ flex-direction: row;
1897
1967
  justify-content: center;
1968
+ --amplify-components-searchfield-input-color: var(
1969
+ --amplify-components-collection-search-input-color
1970
+ );
1971
+ --amplify-components-searchfield-button-color: var(
1972
+ --amplify-components-collection-search-button-color
1973
+ );
1974
+ --amplify-components-searchfield-button-active-background-color: var(
1975
+ --amplify-components-collection-search-button-active-background-color
1976
+ );
1977
+ --amplify-components-searchfield-button-active-border-color: var(
1978
+ --amplify-components-collection-search-button-active-border-color
1979
+ );
1980
+ --amplify-components-searchfield-button-active-color: var(
1981
+ --amplify-components-collection-search-button-active-color
1982
+ );
1983
+ --amplify-components-searchfield-button-disabled-background-color: var(
1984
+ --amplify-components-collection-search-button-disabled-background-color
1985
+ );
1986
+ --amplify-components-searchfield-button-disabled-border-color: var(
1987
+ --amplify-components-collection-search-button-disabled-border-color
1988
+ );
1989
+ --amplify-components-searchfield-button-disabled-color: var(
1990
+ --amplify-components-collection-search-button-disabled-color
1991
+ );
1992
+ --amplify-components-searchfield-button-focus-background-color: var(
1993
+ --amplify-components-collection-search-button-focus-background-color
1994
+ );
1995
+ --amplify-components-searchfield-button-focus-border-color: var(
1996
+ --amplify-components-collection-search-button-focus-border-color
1997
+ );
1998
+ --amplify-components-searchfield-button-focus-color: var(
1999
+ --amplify-components-collection-search-button-focus-color
2000
+ );
2001
+ --amplify-components-searchfield-button-hover-background-color: var(
2002
+ --amplify-components-collection-search-button-hover-background-color
2003
+ );
2004
+ --amplify-components-searchfield-button-hover-border-color: var(
2005
+ --amplify-components-collection-search-button-hover-border-color
2006
+ );
2007
+ --amplify-components-searchfield-button-hover-color: var(
2008
+ --amplify-components-collection-search-button-hover-color
2009
+ );
1898
2010
  }
1899
2011
 
1900
2012
  .amplify-checkbox {
@@ -2329,6 +2441,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
2329
2441
  height: 100%;
2330
2442
  }
2331
2443
 
2444
+ [data-radix-popper-content-wrapper] {
2445
+ z-index: 999999;
2446
+ }
2447
+
2332
2448
  .amplify-menu-trigger {
2333
2449
  display: flex;
2334
2450
  justify-content: center;
@@ -2433,6 +2549,51 @@ html[dir=rtl] .amplify-field-group__inner-start {
2433
2549
  padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
2434
2550
  }
2435
2551
 
2552
+ .amplify-passwordfield {
2553
+ --amplify-components-fieldcontrol-color: var(
2554
+ --amplify-components-passwordfield-color
2555
+ );
2556
+ --amplify-components-button-color: var(
2557
+ --amplify-components-passwordfield-button-color
2558
+ );
2559
+ --amplify-components-button-active-background-color: var(
2560
+ --amplify-components-passwordfield-button-active-background-color
2561
+ );
2562
+ --amplify-components-button-active-border-color: var(
2563
+ --amplify-components-passwordfield-button-active-border-color
2564
+ );
2565
+ --amplify-components-button-active-color: var(
2566
+ --amplify-components-passwordfield-button-active-color
2567
+ );
2568
+ --amplify-components-button-disabled-background-color: var(
2569
+ --amplify-components-passwordfield-button-disabled-background-color
2570
+ );
2571
+ --amplify-components-button-disabled-border-color: var(
2572
+ --amplify-components-passwordfield-button-disabled-border-color
2573
+ );
2574
+ --amplify-components-button-disabled-color: var(
2575
+ --amplify-components-passwordfield-button-disabled-color
2576
+ );
2577
+ --amplify-components-button-focus-background-color: var(
2578
+ --amplify-components-passwordfield-button-focus-background-color
2579
+ );
2580
+ --amplify-components-button-focus-border-color: var(
2581
+ --amplify-components-passwordfield-button-focus-border-color
2582
+ );
2583
+ --amplify-components-button-focus-color: var(
2584
+ --amplify-components-passwordfield-button-focus-color
2585
+ );
2586
+ --amplify-components-button-hover-background-color: var(
2587
+ --amplify-components-passwordfield-button-hover-background-color
2588
+ );
2589
+ --amplify-components-button-hover-border-color: var(
2590
+ --amplify-components-passwordfield-button-hover-border-color
2591
+ );
2592
+ --amplify-components-button-hover-color: var(
2593
+ --amplify-components-passwordfield-button-hover-color
2594
+ );
2595
+ }
2596
+
2436
2597
  .amplify-phonenumberfield select:not(:focus) {
2437
2598
  border-right: none;
2438
2599
  }
@@ -2581,6 +2742,35 @@ html[dir=rtl] .amplify-field-group__inner-start {
2581
2742
  align-items: flex-start;
2582
2743
  }
2583
2744
 
2745
+ .amplify-searchfield {
2746
+ --amplify-components-fieldcontrol-color: var(
2747
+ --amplify-components-searchfield-input-color
2748
+ );
2749
+ }
2750
+ .amplify-searchfield__search {
2751
+ color: var(--amplify-components-searchfield-button-color);
2752
+ }
2753
+ .amplify-searchfield__search:active {
2754
+ background-color: var(--amplify-components-button-active-background-color);
2755
+ border-color: var(--amplify-components-button-active-border-color);
2756
+ color: var(--amplify-components-button-active-color);
2757
+ }
2758
+ .amplify-searchfield__search:disabled {
2759
+ background-color: var(--amplify-components-searchfield-button-disabled-background-color);
2760
+ border-color: var(--amplify-components-searchfield-button-disabled-border-color);
2761
+ color: var(--amplify-components-searchfield-button-disabled-color);
2762
+ }
2763
+ .amplify-searchfield__search:focus {
2764
+ background-color: var(--amplify-components-searchfield-button-focus-background-color);
2765
+ border-color: var(--amplify-components-searchfield-button-focus-border-color);
2766
+ color: var(--amplify-components-searchfield-button-focus-color);
2767
+ }
2768
+ .amplify-searchfield__search:hover {
2769
+ background-color: var(--amplify-components-searchfield-button-hover-background-color);
2770
+ border-color: var(--amplify-components-searchfield-button-hover-border-color);
2771
+ color: var(--amplify-components-searchfield-button-hover-color);
2772
+ }
2773
+
2584
2774
  .amplify-select__wrapper {
2585
2775
  flex: var(--amplify-components-select-wrapper-flex);
2586
2776
  display: var(--amplify-components-select-wrapper-display);
@@ -3165,10 +3355,28 @@ html[dir=rtl] .amplify-field-group__inner-start {
3165
3355
 
3166
3356
  .amplify-textareafield {
3167
3357
  flex-direction: column;
3358
+ --amplify-components-fieldcontrol-color: var(
3359
+ --amplify-components-textareafield-color
3360
+ );
3361
+ --amplify-components-fieldcontrol-border-color: var(
3362
+ --amplify-components-textareafield-border-color
3363
+ );
3364
+ --amplify-components-fieldcontrol-focus-border-color: var(
3365
+ --amplify-components-textareafield-focus-border-color
3366
+ );
3168
3367
  }
3169
3368
 
3170
3369
  .amplify-textfield {
3171
3370
  flex-direction: column;
3371
+ --amplify-components-fieldcontrol-color: var(
3372
+ --amplify-components-textfield-color
3373
+ );
3374
+ --amplify-components-fieldcontrol-border-color: var(
3375
+ --amplify-components-textfield-border-color
3376
+ );
3377
+ --amplify-components-fieldcontrol-focus-border-color: var(
3378
+ --amplify-components-textfield-focus-border-color
3379
+ );
3172
3380
  }
3173
3381
 
3174
3382
  .amplify-togglebutton {