@aws-amplify/ui 3.0.15 → 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/esm/index.js +15 -15
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.ts +217 -85
  4. package/dist/index.js +20 -20
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles.css +125 -145
  7. package/dist/theme.css +31 -2
  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, 22 Feb 2022 22:51:55 GMT
6
+ * Generated on Wed, 09 Mar 2022 00:15:33 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -12,6 +12,7 @@
12
12
  --amplify-time-long: 500ms;
13
13
  --amplify-time-medium: 250ms;
14
14
  --amplify-time-short: 100ms;
15
+ --amplify-space-relative-full: 100%;
15
16
  --amplify-space-relative-xxxl: 4.5em;
16
17
  --amplify-space-relative-xxl: 3.0em;
17
18
  --amplify-space-relative-xl: 2.0em;
@@ -19,7 +20,7 @@
19
20
  --amplify-space-relative-medium: 1em;
20
21
  --amplify-space-relative-small: 0.75em;
21
22
  --amplify-space-relative-xs: 0.5em;
22
- --amplify-space-relative-xxs: 0.375rem;
23
+ --amplify-space-relative-xxs: 0.375em;
23
24
  --amplify-space-relative-xxxs: 0.25em;
24
25
  --amplify-space-xxxl: 4.5rem;
25
26
  --amplify-space-xxl: 3.0rem;
@@ -30,6 +31,7 @@
30
31
  --amplify-space-xs: 0.5rem;
31
32
  --amplify-space-xxs: 0.375rem;
32
33
  --amplify-space-xxxs: 0.25rem;
34
+ --amplify-space-zero: 0;
33
35
  --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary);
34
36
  --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary);
35
37
  --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary);
@@ -627,10 +629,20 @@
627
629
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
628
630
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
629
631
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
632
+ --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
633
+ --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
634
+ --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
635
+ --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
630
636
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
631
637
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
632
638
  --amplify-components-divider-border-style: solid;
633
639
  --amplify-components-countrycodeselect-height: 100%;
640
+ --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs);
641
+ --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100);
642
+ --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large);
643
+ --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
644
+ --amplify-components-copy-gap: var(--amplify-space-relative-medium);
645
+ --amplify-components-copy-font-size: var(--amplify-font-sizes-xs);
634
646
  --amplify-components-checkboxfield-justify-content: center;
635
647
  --amplify-components-checkboxfield-flex-direction: column;
636
648
  --amplify-components-checkboxfield-align-content: center;
@@ -803,6 +815,23 @@
803
815
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
804
816
  --amplify-components-badge-line-height: 1;
805
817
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
818
+ --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
819
+ --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
820
+ --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
821
+ --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
822
+ --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
823
+ --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
824
+ --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary);
825
+ --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary);
826
+ --amplify-components-authenticator-router-border-style: solid;
827
+ --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small);
828
+ --amplify-components-authenticator-container-width-max: 30rem;
829
+ --amplify-components-authenticator-modal-left: var(--amplify-space-zero);
830
+ --amplify-components-authenticator-modal-top: var(--amplify-space-zero);
831
+ --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50);
832
+ --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full);
833
+ --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full);
834
+ --amplify-components-authenticator-max-width: 60rem;
806
835
  --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
807
836
  --amplify-components-alert-success-color: var(--amplify-colors-font-success);
808
837
  --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
@@ -1411,6 +1440,34 @@ h6.amplify-heading {
1411
1440
  background-color: var(--amplify-components-placeholder-end-color);
1412
1441
  }
1413
1442
  }
1443
+ [data-amplify-copy] {
1444
+ display: flex;
1445
+ font-size: var(--amplify-components-copy-font-size);
1446
+ gap: var(--amplify-components-copy-gap);
1447
+ justify-content: center;
1448
+ align-items: center;
1449
+ word-break: break-all;
1450
+ }
1451
+
1452
+ [data-amplify-copy-svg] {
1453
+ cursor: pointer;
1454
+ position: relative;
1455
+ }
1456
+ [data-amplify-copy-svg] path {
1457
+ fill: var(--amplify-components-copy-svg-path-fill);
1458
+ }
1459
+ [data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] {
1460
+ visibility: visible;
1461
+ font-size: var(--amplify-components-copy-tool-tip-font-size);
1462
+ }
1463
+
1464
+ [data-amplify-copy-tooltip] {
1465
+ visibility: hidden;
1466
+ position: absolute;
1467
+ bottom: var(--amplify-components-copy-tool-tip-bottom);
1468
+ color: var(--amplify-components-copy-tool-tip-color);
1469
+ }
1470
+
1414
1471
  .amplify-alert {
1415
1472
  align-items: var(--amplify-components-alert-align-items);
1416
1473
  justify-content: var(--amplify-components-alert-justify-content);
@@ -1457,148 +1514,44 @@ h6.amplify-heading {
1457
1514
  /* Center by default */
1458
1515
  [data-amplify-authenticator] {
1459
1516
  display: grid;
1517
+ max-width: var(--amplify-components-authenticator-max-width);
1518
+ margin: auto;
1460
1519
  }
1461
-
1462
1520
  [data-amplify-authenticator][data-variation=modal] {
1463
1521
  display: grid;
1464
- width: 100vw;
1465
- height: 100vh;
1466
- height: -webkit-fill-available;
1467
- background-color: var(--amplify-colors-background-secondary, #e1e5e9);
1468
- /* Override browser default `body { margin: 8px }` */
1522
+ width: var(--amplify-components-authenticator-modal-width);
1523
+ height: var(--amplify-components-authenticator-modal-height);
1524
+ background-color: var(--amplify-components-authenticator-modal-background-color);
1469
1525
  position: fixed;
1470
- top: 0;
1471
- left: 0;
1526
+ top: var(--amplify-components-authenticator-modal-top);
1527
+ left: var(--amplify-components-authenticator-modal-left);
1472
1528
  /* Having a z-index at least "wins" by default */
1473
1529
  z-index: 1;
1474
- /* top-align at the top 20% of the screen */
1475
- box-sizing: border-box;
1476
- padding-top: 20vh;
1477
- align-content: flex-start;
1478
- }
1479
- @media (max-width: 30rem) {
1480
- [data-amplify-authenticator][data-variation=modal] {
1481
- overflow: auto;
1482
- padding-top: 0;
1483
- }
1484
1530
  }
1485
-
1486
- [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1487
- max-height: 60vh;
1488
- overflow-y: auto;
1489
- /* Scroll shadows, adapted from https://codepen.io/chriscoyier/pen/YzXBYvL */
1490
- background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center bottom;
1491
- background-repeat: no-repeat;
1492
- background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
1493
- background-attachment: local, local, scroll, scroll;
1494
- }
1495
- @media (max-width: 30rem) {
1496
- [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1497
- max-height: unset;
1498
- }
1499
- }
1500
-
1501
- /* Texture for modal */
1502
- [data-amplify-authenticator][data-variation=modal]::before {
1503
- position: absolute;
1504
- width: 100%;
1505
- height: 100%;
1506
- content: "";
1507
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='texture' data-v-1d260e0e=''%3E%3Cfilter id='noise' data-v-1d260e0e=''%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch' data-v-1d260e0e=''%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0' data-v-1d260e0e=''%3E%3C/feColorMatrix%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' data-v-1d260e0e=''%3E%3C/rect%3E%3C/svg%3E");
1508
- opacity: 0.35;
1509
- filter: "contrast(120%) brightness(120%)";
1510
- }
1511
-
1512
1531
  [data-amplify-authenticator] [data-amplify-container] {
1513
- /* Fix z-index of texture being over the Authenticator */
1514
- position: relative;
1515
1532
  place-self: center;
1516
- width: 30rem;
1517
1533
  }
1518
- @media (max-width: 30rem) {
1534
+ @media (min-width: 30rem) {
1519
1535
  [data-amplify-authenticator] [data-amplify-container] {
1520
- width: 100%;
1536
+ width: var(--amplify-components-authenticator-container-width-max);
1521
1537
  }
1522
1538
  }
1523
-
1524
- [data-amplify-authenticator] [data-amplify-router] [data-amplify-footer] {
1525
- padding-bottom: var(--amplify-space-medium);
1526
- text-align: center;
1527
- }
1528
-
1529
1539
  [data-amplify-authenticator] [data-amplify-router] {
1530
- background-color: var(--amplify-colors-background-primary);
1531
- box-shadow: var(--amplify-shadows-medium);
1540
+ background-color: var(--amplify-components-authenticator-router-background-color);
1541
+ box-shadow: var(--amplify-components-authenticator-router-box-shadow);
1542
+ border-color: var(--amplify-components-authenticator-router-border-color);
1543
+ border-width: var(--amplify-components-authenticator-router-border-width);
1544
+ border-style: var(--amplify-components-authenticator-router-border-style);
1545
+ }
1546
+ [data-amplify-authenticator] [data-amplify-footer] {
1547
+ padding-bottom: var(--amplify-components-authenticator-footer-padding-bottom);
1548
+ text-align: center;
1532
1549
  }
1533
-
1534
1550
  [data-amplify-authenticator] [data-amplify-form] {
1535
- padding: var(--amplify-space-xl);
1536
- }
1537
-
1538
- [data-amplify-authenticator] [data-state=inactive][role=tab] {
1539
- background-color: var(--amplify-colors-background-secondary);
1540
- }
1541
-
1542
- /* Remove double-border between the password field & reveal button */
1543
- [data-amplify-authenticator] .amplify-passwordfield .amplify-button:not(:focus) {
1544
- border-left: none;
1551
+ padding: var(--amplify-components-authenticator-form-padding);
1545
1552
  }
1546
-
1547
- [data-amplify-authenticator] .amplify-phonenumberfield .amplify-countrycodeselect {
1548
- height: 100%;
1549
- }
1550
-
1551
- [data-amplify-authenticator] .amplify-phonenumberfield .amplify-select__wrapper {
1552
- height: 100%;
1553
- }
1554
-
1555
- /* Remove double-border between the phone field & country select */
1556
- [data-amplify-authenticator] .amplify-phonenumberfield select:not(:focus) {
1557
- border-right: none;
1558
- }
1559
-
1560
- [data-amplify-authenticator] [data-or-container] {
1561
- position: relative;
1562
- color: gray;
1563
- align-items: center;
1564
- justify-content: center;
1565
- padding: 1.5rem 0px;
1566
- }
1567
- [data-amplify-authenticator] [data-or-container] [data-or-line] {
1568
- position: absolute;
1569
- background: var(--amplify-colors-white);
1570
- z-index: 1;
1571
- padding: 0px 1.5rem;
1572
- }
1573
-
1574
- [data-amplify-copy] {
1575
- display: flex;
1576
- font-size: 0.688rem;
1577
- gap: 1rem;
1578
- justify-content: center;
1579
- align-items: center;
1580
- }
1581
- @media (max-width: 30rem) {
1582
- [data-amplify-copy] {
1583
- word-break: break-all;
1584
- }
1585
- }
1586
-
1587
- [data-amplify-copy-svg] {
1588
- cursor: pointer;
1589
- position: relative;
1590
- }
1591
- [data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] {
1592
- visibility: visible;
1593
- font-size: 0.55rem;
1594
- }
1595
-
1596
- [data-amplify-copy-tooltip] {
1597
- visibility: hidden;
1598
- position: absolute;
1599
- top: -1rem;
1600
- left: -0.1rem;
1601
- color: var(--amplify-colors-teal-100);
1553
+ [data-amplify-authenticator] [data-state=inactive] {
1554
+ background-color: var(--amplify-components-authenticator-state-inactive-background-color);
1602
1555
  }
1603
1556
 
1604
1557
  .amplify-card {
@@ -1608,7 +1561,7 @@ h6.amplify-heading {
1608
1561
  border-style: var(--amplify-components-card-border-style);
1609
1562
  border-color: var(--amplify-components-card-border-color);
1610
1563
  box-shadow: var(--amplify-components-card-box-shadow);
1611
- display: inline-block;
1564
+ display: block;
1612
1565
  padding: var(--amplify-components-card-padding);
1613
1566
  }
1614
1567
  .amplify-card[data-variation=outlined] {
@@ -1645,6 +1598,7 @@ h6.amplify-heading {
1645
1598
  cursor: var(--amplify-components-checkbox-cursor);
1646
1599
  align-items: var(--amplify-components-checkbox-align-items);
1647
1600
  gap: inherit;
1601
+ flex-direction: row-reverse;
1648
1602
  }
1649
1603
  .amplify-checkbox[data-disabled=true] {
1650
1604
  cursor: var(--amplify-components-checkbox-disabled-cursor);
@@ -1723,10 +1677,11 @@ h6.amplify-heading {
1723
1677
  border-color: var(--amplify-components-divider-border-color);
1724
1678
  border-style: var(--amplify-components-divider-border-style);
1725
1679
  border-width: 0;
1726
- margin: 0;
1727
1680
  opacity: var(--amplify-components-divider-opacity);
1728
1681
  padding: 0;
1729
1682
  display: block;
1683
+ position: relative;
1684
+ text-align: center;
1730
1685
  }
1731
1686
  .amplify-divider[aria-orientation=horizontal] {
1732
1687
  width: 100%;
@@ -1747,6 +1702,28 @@ h6.amplify-heading {
1747
1702
  .amplify-divider[aria-orientation=vertical][data-size=large] {
1748
1703
  border-left-width: var(--amplify-components-divider-large-border-width);
1749
1704
  }
1705
+ .amplify-divider--label {
1706
+ display: flex;
1707
+ justify-content: center;
1708
+ }
1709
+ .amplify-divider--label::after {
1710
+ content: attr(data-label);
1711
+ position: absolute;
1712
+ transform: translateY(-50%);
1713
+ font-size: var(--amplify-components-divider-label-font-size);
1714
+ padding-inline: var(--amplify-components-divider-label-padding-inline);
1715
+ background-color: var(--amplify-components-divider-label-background-color);
1716
+ color: var(--amplify-components-divider-label-color);
1717
+ }
1718
+ .amplify-divider--label[aria-orientation=vertical] {
1719
+ flex-direction: column;
1720
+ }
1721
+ .amplify-divider--label[aria-orientation=vertical]::after {
1722
+ top: auto;
1723
+ transform: translateX(-50%);
1724
+ padding-block: 0;
1725
+ padding-inline: 0;
1726
+ }
1750
1727
 
1751
1728
  .amplify-expander {
1752
1729
  display: block;
@@ -1981,22 +1958,6 @@ h6.amplify-heading {
1981
1958
  color: var(--amplify-components-field-label-color);
1982
1959
  }
1983
1960
 
1984
- [data-label-position=start] {
1985
- flex-direction: row;
1986
- }
1987
-
1988
- [data-label-position=end] {
1989
- flex-direction: row-reverse;
1990
- }
1991
-
1992
- [data-label-position=top] {
1993
- flex-direction: column;
1994
- }
1995
-
1996
- [data-label-position=bottom] {
1997
- flex-direction: column-reverse;
1998
- }
1999
-
2000
1961
  .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 {
2001
1962
  border-start-start-radius: 0;
2002
1963
  border-end-start-radius: 0;
@@ -2281,6 +2242,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2281
2242
  align-items: var(--amplify-components-radio-align-items);
2282
2243
  justify-content: var(--amplify-components-radio-justify-content);
2283
2244
  gap: inherit;
2245
+ flex-direction: row-reverse;
2284
2246
  }
2285
2247
 
2286
2248
  .amplify-radio[data-disabled=true] {
@@ -2358,10 +2320,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
2358
2320
  .amplify-radiogroup {
2359
2321
  gap: inherit;
2360
2322
  flex-direction: inherit;
2323
+ align-items: inherit;
2361
2324
  }
2362
2325
 
2363
2326
  .amplify-radiogroupfield {
2364
2327
  flex-direction: column;
2328
+ align-items: flex-start;
2365
2329
  }
2366
2330
 
2367
2331
  .amplify-select__wrapper {
@@ -2903,6 +2867,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
2903
2867
  }
2904
2868
  }
2905
2869
 
2870
+ [data-label-position=start] {
2871
+ flex-direction: row;
2872
+ }
2873
+
2874
+ [data-label-position=end] {
2875
+ flex-direction: row-reverse;
2876
+ }
2877
+
2878
+ [data-label-position=top] {
2879
+ flex-direction: column;
2880
+ }
2881
+
2882
+ [data-label-position=bottom] {
2883
+ flex-direction: column-reverse;
2884
+ }
2885
+
2906
2886
  .amplify-visually-hidden {
2907
2887
  position: absolute;
2908
2888
  width: 1px;
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 22 Feb 2022 22:51:55 GMT
3
+ * Generated on Wed, 09 Mar 2022 00:15:33 GMT
4
4
  */
5
5
 
6
6
  :root, [data-amplify-theme] {
@@ -10,6 +10,7 @@
10
10
  --amplify-time-long: 500ms;
11
11
  --amplify-time-medium: 250ms;
12
12
  --amplify-time-short: 100ms;
13
+ --amplify-space-relative-full: 100%;
13
14
  --amplify-space-relative-xxxl: 4.5em;
14
15
  --amplify-space-relative-xxl: 3.0em;
15
16
  --amplify-space-relative-xl: 2.0em;
@@ -17,7 +18,7 @@
17
18
  --amplify-space-relative-medium: 1em;
18
19
  --amplify-space-relative-small: 0.75em;
19
20
  --amplify-space-relative-xs: 0.5em;
20
- --amplify-space-relative-xxs: 0.375rem;
21
+ --amplify-space-relative-xxs: 0.375em;
21
22
  --amplify-space-relative-xxxs: 0.25em;
22
23
  --amplify-space-xxxl: 4.5rem;
23
24
  --amplify-space-xxl: 3.0rem;
@@ -28,6 +29,7 @@
28
29
  --amplify-space-xs: 0.5rem;
29
30
  --amplify-space-xxs: 0.375rem;
30
31
  --amplify-space-xxxs: 0.25rem;
32
+ --amplify-space-zero: 0;
31
33
  --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary);
32
34
  --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary);
33
35
  --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary);
@@ -625,10 +627,20 @@
625
627
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
626
628
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
627
629
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
630
+ --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
631
+ --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
632
+ --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
633
+ --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
628
634
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
629
635
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
630
636
  --amplify-components-divider-border-style: solid;
631
637
  --amplify-components-countrycodeselect-height: 100%;
638
+ --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs);
639
+ --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100);
640
+ --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large);
641
+ --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
642
+ --amplify-components-copy-gap: var(--amplify-space-relative-medium);
643
+ --amplify-components-copy-font-size: var(--amplify-font-sizes-xs);
632
644
  --amplify-components-checkboxfield-justify-content: center;
633
645
  --amplify-components-checkboxfield-flex-direction: column;
634
646
  --amplify-components-checkboxfield-align-content: center;
@@ -801,6 +813,23 @@
801
813
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
802
814
  --amplify-components-badge-line-height: 1;
803
815
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
816
+ --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
817
+ --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
818
+ --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
819
+ --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
820
+ --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
821
+ --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
822
+ --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary);
823
+ --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary);
824
+ --amplify-components-authenticator-router-border-style: solid;
825
+ --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small);
826
+ --amplify-components-authenticator-container-width-max: 30rem;
827
+ --amplify-components-authenticator-modal-left: var(--amplify-space-zero);
828
+ --amplify-components-authenticator-modal-top: var(--amplify-space-zero);
829
+ --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50);
830
+ --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full);
831
+ --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full);
832
+ --amplify-components-authenticator-max-width: 60rem;
804
833
  --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
805
834
  --amplify-components-alert-success-color: var(--amplify-colors-font-success);
806
835
  --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "3.0.15",
3
+ "version": "3.2.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {