@aws-amplify/ui 3.9.0 → 3.10.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 (28) hide show
  1. package/dist/esm/helpers/authenticator/facade.js +1 -1
  2. package/dist/esm/machines/authenticator/actors/signIn.js +1 -1
  3. package/dist/esm/machines/authenticator/index.js +1 -1
  4. package/dist/esm/machines/authenticator/signUp.js +1 -1
  5. package/dist/esm/node_modules/tslib/tslib.es6.js +0 -14
  6. package/dist/esm/theme/tokens/colors.js +1 -1
  7. package/dist/esm/theme/tokens/components/collection.js +1 -0
  8. package/dist/esm/theme/tokens/components/index.js +1 -1
  9. package/dist/esm/theme/tokens/components/searchField.js +1 -0
  10. package/dist/esm/theme/tokens/components/sliderField.js +1 -1
  11. package/dist/esm/theme/tokens/components/toggleButton.js +1 -1
  12. package/dist/index.js +1 -16
  13. package/dist/styles.css +240 -127
  14. package/dist/theme.css +55 -9
  15. package/dist/types/machines/authenticator/actors/resetPassword.d.ts +1 -21
  16. package/dist/types/machines/authenticator/actors/signIn.d.ts +1 -21
  17. package/dist/types/machines/authenticator/actors/signOut.d.ts +1 -21
  18. package/dist/types/machines/authenticator/index.d.ts +1 -21
  19. package/dist/types/machines/authenticator/signUp.d.ts +1 -21
  20. package/dist/types/theme/tokens/colors.d.ts +1 -0
  21. package/dist/types/theme/tokens/components/button.d.ts +1 -1
  22. package/dist/types/theme/tokens/components/collection.d.ts +32 -0
  23. package/dist/types/theme/tokens/components/index.d.ts +4 -0
  24. package/dist/types/theme/tokens/components/pagination.d.ts +2 -2
  25. package/dist/types/theme/tokens/components/searchField.d.ts +15 -0
  26. package/dist/types/theme/tokens/components/sliderField.d.ts +1 -0
  27. package/dist/types/theme/tokens/components/toggleButton.d.ts +13 -0
  28. 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, 17 May 2022 21:59:14 GMT
6
+ * Generated on Wed, 08 Jun 2022 19:50:16 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -380,17 +380,22 @@
380
380
  --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
381
381
  --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
382
382
  --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
383
+ --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
384
+ --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
385
+ --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
383
386
  --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
384
387
  --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
388
+ --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
385
389
  --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
386
390
  --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
387
391
  --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
388
392
  --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
389
393
  --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
394
+ --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
395
+ --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
396
+ --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
390
397
  --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
391
- --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
392
398
  --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
393
- --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
394
399
  --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
395
400
  --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
396
401
  --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
@@ -398,9 +403,7 @@
398
403
  --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
399
404
  --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
400
405
  --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
401
- --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
402
406
  --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
403
- --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
404
407
  --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
405
408
  --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
406
409
  --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
@@ -440,10 +443,11 @@
440
443
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
441
444
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
442
445
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
443
- --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
446
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
444
447
  --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
445
448
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
446
449
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
450
+ --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
447
451
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
448
452
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
449
453
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
@@ -632,6 +636,7 @@
632
636
  --amplify-components-alert-padding-inline: var(--amplify-space-medium);
633
637
  --amplify-components-alert-padding-block: var(--amplify-space-small);
634
638
  --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
639
+ --amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
635
640
  --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
636
641
  --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
637
642
  --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
@@ -639,13 +644,16 @@
639
644
  --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
640
645
  --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
641
646
  --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
647
+ --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
642
648
  --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
643
649
  --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
644
650
  --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
645
651
  --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);
652
+ --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
653
+ --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
647
654
  --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
648
- --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
655
+ --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
656
+ --amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
649
657
  --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
650
658
  --amplify-components-text-info-color: var(--amplify-colors-font-info);
651
659
  --amplify-components-text-success-color: var(--amplify-colors-font-success);
@@ -712,6 +720,10 @@
712
720
  --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
713
721
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
714
722
  --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
723
+ --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color);
724
+ --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color);
725
+ --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color);
726
+ --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color);
715
727
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
716
728
  --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
717
729
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
@@ -789,8 +801,12 @@
789
801
  --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
790
802
  --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
791
803
  --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
804
+ --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
805
+ --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
792
806
  --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
807
+ --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
793
808
  --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
809
+ --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
794
810
  --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
795
811
  --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
796
812
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
@@ -798,10 +814,19 @@
798
814
  --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
799
815
  --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
800
816
  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
801
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
817
+ --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
818
+ --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
802
819
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
803
820
  --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
804
821
  --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
822
+ --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color);
823
+ --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
824
+ --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
825
+ --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
826
+ --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color);
827
+ --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
828
+ --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
829
+ --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
805
830
  --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
806
831
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
807
832
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
@@ -820,6 +845,8 @@
820
845
  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
821
846
  --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
822
847
  --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
848
+ --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color);
849
+ --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color);
823
850
  --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
824
851
  --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
825
852
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
@@ -848,10 +875,29 @@
848
875
  --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
849
876
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
850
877
  --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
878
+ --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color);
879
+ --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color);
880
+ --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
881
+ --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color);
882
+ --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);
851
883
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
884
+ --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color);
885
+ --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color);
886
+ --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color);
887
+ --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color);
888
+ --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color);
889
+ --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color);
890
+ --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color);
891
+ --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color);
892
+ --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color);
852
893
  --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
853
894
  --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
854
895
  --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
896
+ --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color);
897
+ --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color);
898
+ --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color);
899
+ --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color);
900
+ --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color);
855
901
  }
856
902
 
857
903
  html {
@@ -1875,14 +1921,72 @@ strong.amplify-text {
1875
1921
  .amplify-collection {
1876
1922
  flex-direction: column;
1877
1923
  }
1878
-
1879
- .amplify-collection-search {
1880
- flex-direction: row;
1924
+ .amplify-collection-pagination {
1881
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
+ );
1882
1944
  }
1883
-
1884
- .amplify-collection-pagination {
1945
+ .amplify-collection-search {
1946
+ flex-direction: row;
1885
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
+ );
1886
1990
  }
1887
1991
 
1888
1992
  .amplify-checkbox {
@@ -2569,6 +2673,35 @@ html[dir=rtl] .amplify-field-group__inner-start {
2569
2673
  align-items: flex-start;
2570
2674
  }
2571
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
+
2572
2705
  .amplify-select__wrapper {
2573
2706
  flex: var(--amplify-components-select-wrapper-flex);
2574
2707
  display: var(--amplify-components-select-wrapper-display);
@@ -2818,6 +2951,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2818
2951
  border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
2819
2952
  }
2820
2953
  .amplify-sliderfield__thumb:focus {
2954
+ border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
2821
2955
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
2822
2956
  }
2823
2957
  .amplify-sliderfield__thumb[data-disabled] {
@@ -3159,9 +3293,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3159
3293
  }
3160
3294
 
3161
3295
  .amplify-togglebutton {
3162
- background-color: var(--amplify-internal-togglebutton-background-color);
3163
- border-color: var(--amplify-internal-togglebutton-border-color);
3164
- color: var(--amplify-internal-togglebutton-color);
3165
3296
  --amplify-internal-togglebutton-background-color: initial;
3166
3297
  --amplify-internal-togglebutton-border-color: var(
3167
3298
  --amplify-components-togglebutton-border-color
@@ -3169,9 +3300,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3169
3300
  --amplify-internal-togglebutton-color: var(
3170
3301
  --amplify-components-togglebutton-color
3171
3302
  );
3172
- --amplify-internal-togglebutton-hover-background-color: var(
3173
- --amplify-components-togglebutton-hover-background-color
3174
- );
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);
3175
3306
  --amplify-internal-togglebutton-focus-background-color: var(
3176
3307
  --amplify-internal-togglebutton-background-color
3177
3308
  );
@@ -3181,6 +3312,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
3181
3312
  --amplify-internal-togglebutton-focus-color: var(
3182
3313
  --amplify-components-togglebutton-focus-color
3183
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
+ );
3184
3324
  --amplify-internal-togglebutton-active-background-color: var(
3185
3325
  --amplify-components-togglebutton-active-background-color
3186
3326
  );
@@ -3194,19 +3334,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
3194
3334
  --amplify-components-togglebutton-disabled-color
3195
3335
  );
3196
3336
  }
3197
- .amplify-togglebutton:hover {
3198
- background-color: var(--amplify-internal-togglebutton-hover-background-color);
3199
- border-color: var(--amplify-internal-togglebutton-border-color);
3200
- color: var(--amplify-internal-togglebutton-color);
3201
- --amplify-internal-togglebutton-focus-background-color: var(
3202
- --amplify-internal-togglebutton-hover-background-color
3203
- );
3204
- }
3205
3337
  .amplify-togglebutton:focus {
3206
3338
  background-color: var(--amplify-internal-togglebutton-focus-background-color);
3207
3339
  border-color: var(--amplify-internal-togglebutton-focus-border-color);
3208
3340
  color: var(--amplify-internal-togglebutton-focus-color);
3209
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
+ }
3210
3347
  .amplify-togglebutton:active {
3211
3348
  background-color: var(--amplify-internal-togglebutton-active-background-color);
3212
3349
  }
@@ -3216,22 +3353,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3216
3353
  color: var(--amplify-internal-togglebutton-disabled-color);
3217
3354
  }
3218
3355
  .amplify-togglebutton--pressed {
3356
+ --amplify-internal-togglebutton-border-color: var(
3357
+ --amplify-components-togglebutton-pressed-border-color
3358
+ );
3219
3359
  --amplify-internal-togglebutton-background-color: var(
3220
3360
  --amplify-components-togglebutton-pressed-background-color
3221
3361
  );
3222
3362
  --amplify-internal-togglebutton-color: var(
3223
3363
  --amplify-components-togglebutton-pressed-color
3224
3364
  );
3225
- }
3226
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3227
3365
  --amplify-internal-togglebutton-hover-background-color: var(
3228
3366
  --amplify-components-togglebutton-pressed-hover-background-color
3229
3367
  );
3230
- }
3231
- .amplify-togglebutton--pressed:disabled {
3232
3368
  --amplify-internal-togglebutton-disabled-background-color: var(
3233
3369
  --amplify-components-togglebutton-pressed-background-color
3234
3370
  );
3371
+ --amplify-internal-togglebutton-disabled-border-color: var(
3372
+ --amplify-components-togglebutton-pressed-border-color
3373
+ );
3235
3374
  --amplify-internal-togglebutton-disabled-color: var(
3236
3375
  --amplify-components-togglebutton-pressed-color
3237
3376
  );
@@ -3256,27 +3395,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3256
3395
  --amplify-internal-togglebutton-primary-color
3257
3396
  );
3258
3397
  border-width: var(--amplify-components-togglebutton-primary-border-width);
3259
- --amplify-internal-togglebutton-hover-background-color: var(
3260
- --amplify-components-togglebutton-primary-background-color
3261
- );
3262
- --amplify-internal-togglebutton-focus-border-color: var(
3263
- --amplify-components-togglebutton-border-color
3264
- );
3265
- --amplify-internal-togglebutton-focus-color: var(
3266
- --amplify-components-togglebutton-color
3267
- );
3268
- --amplify-internal-togglebutton-active-background-color: var(
3269
- --amplify-components-togglebutton-primary-background-color
3270
- );
3271
- --amplify-internal-togglebutton-disabled-background-color: var(
3272
- --amplify-components-togglebutton-primary-background-color
3273
- );
3274
- --amplify-internal-togglebutton-disabled-border-color: var(
3275
- --amplify-components-togglebutton-border-color
3276
- );
3277
- --amplify-internal-togglebutton-disabled-color: var(
3278
- --amplify-components-togglebutton-color
3279
- );
3280
3398
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3281
3399
  --amplify-components-togglebutton-primary-focus-background-color
3282
3400
  );
@@ -3286,6 +3404,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
3286
3404
  --amplify-internal-togglebutton-primary-focus-color: var(
3287
3405
  --amplify-components-togglebutton-primary-focus-color
3288
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
+ );
3289
3419
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3290
3420
  --amplify-components-togglebutton-primary-hover-background-color
3291
3421
  );
@@ -3295,40 +3425,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3295
3425
  --amplify-internal-togglebutton-primary-hover-color: var(
3296
3426
  --amplify-components-togglebutton-primary-hover-color
3297
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
+ );
3298
3437
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3299
3438
  --amplify-components-togglebutton-primary-disabled-background-color
3300
3439
  );
3301
3440
  --amplify-internal-togglebutton-primary-disabled-border-color: var(
3302
- --amplify-internal-togglebutton-primary-border-color
3441
+ --amplify-components-togglebutton-primary-disabled-border-color
3303
3442
  );
3304
3443
  --amplify-internal-togglebutton-primary-disabled-color: var(
3305
3444
  --amplify-components-togglebutton-primary-disabled-color
3306
3445
  );
3307
- }
3308
- .amplify-togglebutton--primary:focus {
3309
- --amplify-internal-togglebutton-focus-background-color: var(
3310
- --amplify-internal-togglebutton-primary-focus-background-color
3311
- );
3312
- --amplify-internal-togglebutton-focus-border-color: var(
3313
- --amplify-internal-togglebutton-primary-focus-border-color
3314
- );
3315
- --amplify-internal-togglebutton-focus-color: var(
3316
- --amplify-internal-togglebutton-primary-focus-color
3317
- );
3318
- box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
3319
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3320
- --amplify-internal-togglebutton-primary-focus-border-color
3321
- );
3322
- }
3323
- .amplify-togglebutton--primary:hover {
3324
- background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
3325
- border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
3326
- color: var(--amplify-internal-togglebutton-primary-hover-color);
3327
- --amplify-internal-togglebutton-focus-background-color: var(
3328
- --amplify-internal-togglebutton-primary-hover-background-color
3329
- );
3330
- }
3331
- .amplify-togglebutton--primary:disabled {
3332
3446
  --amplify-internal-togglebutton-disabled-background-color: var(
3333
3447
  --amplify-internal-togglebutton-primary-disabled-background-color
3334
3448
  );
@@ -3339,6 +3453,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
3339
3453
  --amplify-internal-togglebutton-primary-disabled-color
3340
3454
  );
3341
3455
  }
3456
+ .amplify-togglebutton--primary:focus {
3457
+ box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
3458
+ }
3342
3459
  .amplify-togglebutton--pressed {
3343
3460
  --amplify-internal-togglebutton-primary-background-color: var(
3344
3461
  --amplify-components-togglebutton-primary-pressed-background-color
@@ -3349,43 +3466,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3349
3466
  --amplify-internal-togglebutton-primary-color: var(
3350
3467
  --amplify-components-togglebutton-primary-pressed-color
3351
3468
  );
3352
- }
3353
- .amplify-togglebutton--pressed:focus {
3354
3469
  --amplify-internal-togglebutton-primary-focus-background-color: var(
3355
3470
  --amplify-components-togglebutton-primary-pressed-focus-background-color
3356
3471
  );
3357
3472
  --amplify-internal-togglebutton-primary-focus-border-color: var(
3358
3473
  --amplify-components-togglebutton-primary-pressed-focus-border-color
3359
3474
  );
3360
- }
3361
- .amplify-togglebutton--pressed:hover:not(:disabled) {
3362
- --amplify-internal-togglebutton-primary-hover-background-color: var(
3363
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3364
- );
3365
- --amplify-internal-togglebutton-primary-hover-border-color: var(
3366
- --amplify-components-togglebutton-primary-pressed-hover-border-color
3367
- );
3368
- --amplify-internal-togglebutton-primary-focus-background-color: var(
3369
- --amplify-components-togglebutton-primary-pressed-hover-background-color
3370
- );
3371
- }
3372
- .amplify-togglebutton--pressed:focus {
3373
3475
  --amplify-internal-togglebutton-primary-focus-color: var(
3374
- --amplify-components-togglebutton-primary-pressed-color
3476
+ --amplify-components-togglebutton-primary-pressed-focus-color
3375
3477
  );
3376
- }
3377
- .amplify-togglebutton--pressed:hover {
3378
3478
  --amplify-internal-togglebutton-primary-hover-background-color: var(
3379
- --amplify-components-togglebutton-primary-hover-background-color
3479
+ --amplify-components-togglebutton-primary-pressed-hover-background-color
3380
3480
  );
3381
3481
  --amplify-internal-togglebutton-primary-hover-border-color: var(
3382
- --amplify-internal-togglebutton-primary-border-color
3482
+ --amplify-components-togglebutton-primary-pressed-hover-border-color
3383
3483
  );
3384
3484
  --amplify-internal-togglebutton-primary-hover-color: var(
3385
- --amplify-components-togglebutton-primary-pressed-color
3485
+ --amplify-components-togglebutton-primary-pressed-hover-color
3386
3486
  );
3387
- }
3388
- .amplify-togglebutton--pressed:disabled {
3389
3487
  --amplify-internal-togglebutton-primary-disabled-background-color: var(
3390
3488
  --amplify-components-togglebutton-primary-pressed-background-color
3391
3489
  );
@@ -3396,27 +3494,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
3396
3494
  --amplify-components-togglebutton-primary-pressed-color
3397
3495
  );
3398
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
+ }
3399
3502
  .amplify-togglebutton--link {
3400
3503
  --amplify-internal-togglebutton-link-background-color: var(
3401
- --amplify-components-togglebutton-background-color
3504
+ --amplify-components-togglebutton-link-background-color
3402
3505
  );
3403
3506
  --amplify-internal-togglebutton-link-color: var(
3404
3507
  --amplify-components-togglebutton-link-color
3405
3508
  );
3406
- background-color: var(--amplify-internal-togglebutton-link-background-color);
3407
- color: var(--amplify-internal-togglebutton-link-color);
3408
- --amplify-internal-togglebutton-link-hover-background-color: var(
3409
- --amplify-components-togglebutton-link-hover-background-color
3509
+ --amplify-internal-togglebutton-background-color: var(
3510
+ --amplify-internal-togglebutton-link-background-color
3410
3511
  );
3411
- --amplify-internal-togglebutton-link-hover-color: var(
3412
- --amplify-components-togglebutton-link-hover-color
3512
+ --amplify-internal-togglebutton-color: var(
3513
+ --amplify-internal-togglebutton-link-color
3413
3514
  );
3414
- }
3415
- .amplify-togglebutton--link:hover {
3416
- background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
3417
- color: var(--amplify-internal-togglebutton-link-hover-color);
3418
- }
3419
- .amplify-togglebutton--link:focus {
3420
3515
  --amplify-internal-togglebutton-link-focus-background-color: var(
3421
3516
  --amplify-components-togglebutton-link-focus-background-color
3422
3517
  );
@@ -3429,11 +3524,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
3429
3524
  --amplify-internal-togglebutton-focus-color: var(
3430
3525
  --amplify-internal-togglebutton-link-focus-color
3431
3526
  );
3432
- }
3433
- .amplify-togglebutton--link:disabled {
3434
- --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(
3435
3540
  --amplify-components-togglebutton-link-disabled-color
3436
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
+ );
3437
3551
  }
3438
3552
  .amplify-togglebutton--pressed {
3439
3553
  --amplify-internal-togglebutton-link-color: var(
@@ -3442,20 +3556,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
3442
3556
  --amplify-internal-togglebutton-link-background-color: var(
3443
3557
  --amplify-components-togglebutton-link-pressed-background-color
3444
3558
  );
3445
- }
3446
- .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
+ );
3447
3565
  --amplify-internal-togglebutton-link-hover-background-color: var(
3448
3566
  --amplify-components-togglebutton-link-pressed-hover-background-color
3449
3567
  );
3450
3568
  --amplify-internal-togglebutton-link-hover-color: var(
3451
- --amplify-components-togglebutton-link-pressed-color
3569
+ --amplify-components-togglebutton-link-pressed-hover-color
3452
3570
  );
3453
- }
3454
- .amplify-togglebutton--pressed:focus {
3455
- --amplify-internal-togglebutton-link-focus-background-color: var(
3456
- --amplify-components-togglebutton-link-pressed-background-color
3457
- );
3458
- --amplify-internal-togglebutton-link-focus-color: var(
3571
+ --amplify-internal-togglebutton-link-disabled-color: var(
3459
3572
  --amplify-components-togglebutton-link-pressed-color
3460
3573
  );
3461
3574
  }