@aws-amplify/ui 3.0.13 → 3.1.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 (8) hide show
  1. package/dist/esm/index.js +6 -6
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.ts +45 -1
  4. package/dist/index.js +12 -12
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles.css +88 -65
  7. package/dist/theme.css +25 -19
  8. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Tue, 15 Feb 2022 00:31:27 GMT
6
+ * Generated on Tue, 01 Mar 2022 22:42:53 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -237,7 +237,7 @@
237
237
  --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
238
238
  --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
239
239
  --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
240
- --amplify-components-togglebutton-pressed-color: var(--amplify-colors-overlay-90);
240
+ --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
241
241
  --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
242
242
  --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
243
243
  --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
@@ -339,9 +339,9 @@
339
339
  --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
340
340
  --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
341
341
  --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
342
+ --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
342
343
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
343
344
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
344
- --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
345
345
  --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
346
346
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
347
347
  --amplify-components-stepperfield-input-text-align: center;
@@ -362,7 +362,7 @@
362
362
  --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
363
363
  --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
364
364
  --amplify-components-sliderfield-thumb-border-radius: 50%;
365
- --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
365
+ --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
366
366
  --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
367
367
  --amplify-components-sliderfield-thumb-height: 1.25rem;
368
368
  --amplify-components-sliderfield-thumb-width: 1.25rem;
@@ -472,30 +472,33 @@
472
472
  --amplify-components-menu-gap: 0;
473
473
  --amplify-components-menu-flex-direction: column;
474
474
  --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
475
+ --amplify-components-menu-border-color: var(--amplify-colors-border-primary);
476
+ --amplify-components-menu-border-style: solid;
477
+ --amplify-components-menu-border-width: var(--amplify-border-widths-small);
475
478
  --amplify-components-menu-border-radius: var(--amplify-radii-medium);
476
479
  --amplify-components-menu-background-color: var(--amplify-colors-white);
477
- --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs);
478
- --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-xs);
479
- --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs);
480
- --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-xxxs);
480
+ --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
481
+ --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-large);
482
+ --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-small);
483
+ --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-small);
481
484
  --amplify-components-loader-linear-animation-duration: 1s;
482
485
  --amplify-components-loader-linear-stroke-linecap: round;
483
486
  --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
484
487
  --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
485
- --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
486
- --amplify-components-loader-linear-height: var(--amplify-font-sizes-xxs);
488
+ --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-medium);
489
+ --amplify-components-loader-linear-height: var(--amplify-font-sizes-medium);
487
490
  --amplify-components-loader-linear-min-width: 5rem;
488
491
  --amplify-components-loader-linear-width: 100%;
489
- --amplify-components-loader-large-height: var(--amplify-font-sizes-xxxl);
490
- --amplify-components-loader-large-width: var(--amplify-font-sizes-xxxl);
491
- --amplify-components-loader-small-height: var(--amplify-font-sizes-medium);
492
- --amplify-components-loader-small-width: var(--amplify-font-sizes-medium);
492
+ --amplify-components-loader-large-height: var(--amplify-font-sizes-large);
493
+ --amplify-components-loader-large-width: var(--amplify-font-sizes-large);
494
+ --amplify-components-loader-small-height: var(--amplify-font-sizes-small);
495
+ --amplify-components-loader-small-width: var(--amplify-font-sizes-small);
493
496
  --amplify-components-loader-animation-duration: 1s;
494
497
  --amplify-components-loader-stroke-linecap: round;
495
498
  --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
496
499
  --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
497
- --amplify-components-loader-height: var(--amplify-font-sizes-xxl);
498
- --amplify-components-loader-width: var(--amplify-font-sizes-xxl);
500
+ --amplify-components-loader-height: var(--amplify-font-sizes-medium);
501
+ --amplify-components-loader-width: var(--amplify-font-sizes-medium);
499
502
  --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
500
503
  --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
501
504
  --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
@@ -672,6 +675,7 @@
672
675
  --amplify-components-card-elevated-border-width: 0;
673
676
  --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
674
677
  --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
678
+ --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
675
679
  --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
676
680
  --amplify-components-card-outlined-border-style: solid;
677
681
  --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
@@ -684,6 +688,8 @@
684
688
  --amplify-components-card-border-width: 0;
685
689
  --amplify-components-card-border-radius: var(--amplify-radii-xs);
686
690
  --amplify-components-card-background-color: var(--amplify-colors-background-primary);
691
+ --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
692
+ --amplify-components-button-loader-wrapper-align-items: center;
687
693
  --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
688
694
  --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
689
695
  --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
@@ -734,8 +740,8 @@
734
740
  --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
735
741
  --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
736
742
  --amplify-components-button-primary-hover-border-color: transparent;
737
- --amplify-components-button-primary-loading-color: var(--amplify-colors-font-inverse);
738
- --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-tertiary);
743
+ --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
744
+ --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
739
745
  --amplify-components-button-primary-loading-border-color: transparent;
740
746
  --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
741
747
  --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
@@ -750,7 +756,7 @@
750
756
  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
751
757
  --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
752
758
  --amplify-components-button-loading-background-color: transparent;
753
- --amplify-components-button-loading-color: var(--amplify-colors-font-tertiary);
759
+ --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
754
760
  --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
755
761
  --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
756
762
  --amplify-components-button-active-color: var(--amplify-colors-font-active);
@@ -858,16 +864,30 @@ select {
858
864
  /* set box-sizing after unset above */
859
865
  }
860
866
 
861
- .sr-only {
862
- position: absolute !important;
863
- width: 1px !important;
864
- height: 1px !important;
865
- padding: 0 !important;
866
- margin: -1px !important;
867
- overflow: hidden !important;
868
- clip: rect(0, 0, 0, 0) !important;
869
- white-space: nowrap !important;
870
- border-width: 0 !important;
867
+ .amplify-flex {
868
+ align-content: var(--amplify-components-flex-align-content);
869
+ align-items: var(--amplify-components-flex-align-items);
870
+ display: flex;
871
+ flex-wrap: var(--amplify-components-flex-flex-wrap);
872
+ gap: var(--amplify-components-flex-gap);
873
+ justify-content: var(--amplify-components-flex-justify-content);
874
+ }
875
+
876
+ .amplify-grid {
877
+ display: grid;
878
+ }
879
+
880
+ .amplify-scrollview {
881
+ display: block;
882
+ overflow: scroll;
883
+ }
884
+ .amplify-scrollview[data-orientation=horizontal] {
885
+ overflow-x: scroll;
886
+ overflow-y: initial;
887
+ }
888
+ .amplify-scrollview[data-orientation=vertical] {
889
+ overflow-x: initial;
890
+ overflow-y: scroll;
871
891
  }
872
892
 
873
893
  .amplify-text {
@@ -1052,16 +1072,16 @@ strong.amplify-text {
1052
1072
  border-color: var(--amplify-components-button-primary-active-border-color);
1053
1073
  color: var(--amplify-components-button-primary-active-color);
1054
1074
  }
1055
- .amplify-button[data-variation=primary][data-loading=true] {
1056
- background-color: var(--amplify-components-button-primary-loading-background-color);
1057
- border-color: var(--amplify-components-button-primary-loading-border-color);
1058
- color: var(--amplify-components-button-primary-loading-color);
1059
- }
1060
1075
  .amplify-button[data-variation=primary][disabled] {
1061
1076
  background-color: var(--amplify-components-button-primary-disabled-background-color);
1062
1077
  border-color: var(--amplify-components-button-primary-disabled-border-color);
1063
1078
  color: var(--amplify-components-button-primary-disabled-color);
1064
1079
  }
1080
+ .amplify-button[data-variation=primary][data-loading=true] {
1081
+ background-color: var(--amplify-components-button-primary-loading-background-color);
1082
+ border-color: var(--amplify-components-button-primary-loading-border-color);
1083
+ color: var(--amplify-components-button-primary-loading-color);
1084
+ }
1065
1085
  .amplify-button[data-variation=link] {
1066
1086
  border-width: var(--amplify-components-button-link-border-width);
1067
1087
  background-color: var(--amplify-components-button-link-background-color);
@@ -1118,6 +1138,11 @@ strong.amplify-text {
1118
1138
  padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
1119
1139
  }
1120
1140
 
1141
+ .amplify-button__loader-wrapper {
1142
+ align-items: var(--amplify-components-button-loader-wrapper-align-items);
1143
+ gap: var(--amplify-components-button-loader-wrapper-gap);
1144
+ }
1145
+
1121
1146
  @media (prefers-reduced-motion: reduce) {
1122
1147
  .amplify-button {
1123
1148
  transition: none;
@@ -1200,6 +1225,11 @@ h6.amplify-heading {
1200
1225
  text-decoration: var(--amplify-components-link-text-decoration);
1201
1226
  cursor: pointer;
1202
1227
  }
1228
+ .amplify-link:visited {
1229
+ color: var(--amplify-components-link-visited-color);
1230
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
1231
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
1232
+ }
1203
1233
  .amplify-link:active {
1204
1234
  color: var(--amplify-components-link-active-color);
1205
1235
  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
@@ -1215,11 +1245,6 @@ h6.amplify-heading {
1215
1245
  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
1216
1246
  text-decoration: var(--amplify-components-link-hover-text-decoration);
1217
1247
  }
1218
- .amplify-link:visited {
1219
- color: var(--amplify-components-link-visited-color);
1220
- -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
1221
- text-decoration: var(--amplify-components-link-visited-text-decoration);
1222
- }
1223
1248
  .amplify-link[data-size=small] {
1224
1249
  font-size: var(--amplify-components-link-small-font-size);
1225
1250
  }
@@ -1386,32 +1411,6 @@ h6.amplify-heading {
1386
1411
  background-color: var(--amplify-components-placeholder-end-color);
1387
1412
  }
1388
1413
  }
1389
- .amplify-flex {
1390
- align-content: var(--amplify-components-flex-align-content);
1391
- align-items: var(--amplify-components-flex-align-items);
1392
- display: flex;
1393
- flex-wrap: var(--amplify-components-flex-flex-wrap);
1394
- gap: var(--amplify-components-flex-gap);
1395
- justify-content: var(--amplify-components-flex-justify-content);
1396
- }
1397
-
1398
- .amplify-grid {
1399
- display: grid;
1400
- }
1401
-
1402
- .amplify-scrollview {
1403
- display: block;
1404
- overflow: scroll;
1405
- }
1406
- .amplify-scrollview[data-orientation=horizontal] {
1407
- overflow-x: scroll;
1408
- overflow-y: initial;
1409
- }
1410
- .amplify-scrollview[data-orientation=vertical] {
1411
- overflow-x: initial;
1412
- overflow-y: scroll;
1413
- }
1414
-
1415
1414
  .amplify-alert {
1416
1415
  align-items: var(--amplify-components-alert-align-items);
1417
1416
  justify-content: var(--amplify-components-alert-justify-content);
@@ -1646,6 +1645,7 @@ h6.amplify-heading {
1646
1645
  cursor: var(--amplify-components-checkbox-cursor);
1647
1646
  align-items: var(--amplify-components-checkbox-align-items);
1648
1647
  gap: inherit;
1648
+ flex-direction: row-reverse;
1649
1649
  }
1650
1650
  .amplify-checkbox[data-disabled=true] {
1651
1651
  cursor: var(--amplify-components-checkbox-disabled-cursor);
@@ -1982,6 +1982,22 @@ h6.amplify-heading {
1982
1982
  color: var(--amplify-components-field-label-color);
1983
1983
  }
1984
1984
 
1985
+ [data-label-position=start] {
1986
+ flex-direction: row;
1987
+ }
1988
+
1989
+ [data-label-position=end] {
1990
+ flex-direction: row-reverse;
1991
+ }
1992
+
1993
+ [data-label-position=top] {
1994
+ flex-direction: column;
1995
+ }
1996
+
1997
+ [data-label-position=bottom] {
1998
+ flex-direction: column-reverse;
1999
+ }
2000
+
1985
2001
  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
1986
2002
  border-start-start-radius: 0;
1987
2003
  border-end-start-radius: 0;
@@ -2110,6 +2126,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
2110
2126
  gap: var(--amplify-components-menu-gap);
2111
2127
  min-width: var(--amplify-components-menu-min-width);
2112
2128
  max-width: var(--amplify-components-menu-max-width);
2129
+ border-color: var(--amplify-components-menu-border-color);
2130
+ border-width: var(--amplify-components-menu-border-width);
2131
+ border-style: var(--amplify-components-menu-border-style);
2113
2132
  }
2114
2133
 
2115
2134
  .amplify-menu-content__item {
@@ -2765,6 +2784,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
2765
2784
  flex-grow: 1;
2766
2785
  }
2767
2786
 
2787
+ .amplify-textareafield {
2788
+ flex-direction: column;
2789
+ }
2790
+
2768
2791
  .amplify-textfield {
2769
2792
  flex-direction: column;
2770
2793
  }
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 15 Feb 2022 00:31:27 GMT
3
+ * Generated on Tue, 01 Mar 2022 22:42:53 GMT
4
4
  */
5
5
 
6
6
  :root, [data-amplify-theme] {
@@ -235,7 +235,7 @@
235
235
  --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
236
236
  --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
237
237
  --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
238
- --amplify-components-togglebutton-pressed-color: var(--amplify-colors-overlay-90);
238
+ --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
239
239
  --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
240
240
  --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
241
241
  --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
@@ -337,9 +337,9 @@
337
337
  --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
338
338
  --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
339
339
  --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
340
+ --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
340
341
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
341
342
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
342
- --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
343
343
  --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
344
344
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
345
345
  --amplify-components-stepperfield-input-text-align: center;
@@ -360,7 +360,7 @@
360
360
  --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
361
361
  --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
362
362
  --amplify-components-sliderfield-thumb-border-radius: 50%;
363
- --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
363
+ --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
364
364
  --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
365
365
  --amplify-components-sliderfield-thumb-height: 1.25rem;
366
366
  --amplify-components-sliderfield-thumb-width: 1.25rem;
@@ -470,30 +470,33 @@
470
470
  --amplify-components-menu-gap: 0;
471
471
  --amplify-components-menu-flex-direction: column;
472
472
  --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
473
+ --amplify-components-menu-border-color: var(--amplify-colors-border-primary);
474
+ --amplify-components-menu-border-style: solid;
475
+ --amplify-components-menu-border-width: var(--amplify-border-widths-small);
473
476
  --amplify-components-menu-border-radius: var(--amplify-radii-medium);
474
477
  --amplify-components-menu-background-color: var(--amplify-colors-white);
475
- --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs);
476
- --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-xs);
477
- --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs);
478
- --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-xxxs);
478
+ --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
479
+ --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-large);
480
+ --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-small);
481
+ --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-small);
479
482
  --amplify-components-loader-linear-animation-duration: 1s;
480
483
  --amplify-components-loader-linear-stroke-linecap: round;
481
484
  --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
482
485
  --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
483
- --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
484
- --amplify-components-loader-linear-height: var(--amplify-font-sizes-xxs);
486
+ --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-medium);
487
+ --amplify-components-loader-linear-height: var(--amplify-font-sizes-medium);
485
488
  --amplify-components-loader-linear-min-width: 5rem;
486
489
  --amplify-components-loader-linear-width: 100%;
487
- --amplify-components-loader-large-height: var(--amplify-font-sizes-xxxl);
488
- --amplify-components-loader-large-width: var(--amplify-font-sizes-xxxl);
489
- --amplify-components-loader-small-height: var(--amplify-font-sizes-medium);
490
- --amplify-components-loader-small-width: var(--amplify-font-sizes-medium);
490
+ --amplify-components-loader-large-height: var(--amplify-font-sizes-large);
491
+ --amplify-components-loader-large-width: var(--amplify-font-sizes-large);
492
+ --amplify-components-loader-small-height: var(--amplify-font-sizes-small);
493
+ --amplify-components-loader-small-width: var(--amplify-font-sizes-small);
491
494
  --amplify-components-loader-animation-duration: 1s;
492
495
  --amplify-components-loader-stroke-linecap: round;
493
496
  --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
494
497
  --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
495
- --amplify-components-loader-height: var(--amplify-font-sizes-xxl);
496
- --amplify-components-loader-width: var(--amplify-font-sizes-xxl);
498
+ --amplify-components-loader-height: var(--amplify-font-sizes-medium);
499
+ --amplify-components-loader-width: var(--amplify-font-sizes-medium);
497
500
  --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
498
501
  --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
499
502
  --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
@@ -670,6 +673,7 @@
670
673
  --amplify-components-card-elevated-border-width: 0;
671
674
  --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
672
675
  --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
676
+ --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
673
677
  --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
674
678
  --amplify-components-card-outlined-border-style: solid;
675
679
  --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
@@ -682,6 +686,8 @@
682
686
  --amplify-components-card-border-width: 0;
683
687
  --amplify-components-card-border-radius: var(--amplify-radii-xs);
684
688
  --amplify-components-card-background-color: var(--amplify-colors-background-primary);
689
+ --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
690
+ --amplify-components-button-loader-wrapper-align-items: center;
685
691
  --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
686
692
  --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
687
693
  --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
@@ -732,8 +738,8 @@
732
738
  --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
733
739
  --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
734
740
  --amplify-components-button-primary-hover-border-color: transparent;
735
- --amplify-components-button-primary-loading-color: var(--amplify-colors-font-inverse);
736
- --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-tertiary);
741
+ --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
742
+ --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
737
743
  --amplify-components-button-primary-loading-border-color: transparent;
738
744
  --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
739
745
  --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
@@ -748,7 +754,7 @@
748
754
  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
749
755
  --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
750
756
  --amplify-components-button-loading-background-color: transparent;
751
- --amplify-components-button-loading-color: var(--amplify-colors-font-tertiary);
757
+ --amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
752
758
  --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
753
759
  --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
754
760
  --amplify-components-button-active-color: var(--amplify-colors-font-active);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "3.0.13",
3
+ "version": "3.1.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {