@aws-amplify/ui 3.1.0 → 3.2.0

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Tue, 01 Mar 2022 22:42:53 GMT
+ * Generated on Thu, 03 Mar 2022 23:05:31 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -12,6 +12,7 @@
   --amplify-time-long: 500ms;
   --amplify-time-medium: 250ms;
   --amplify-time-short: 100ms;
+  --amplify-space-relative-full: 100%;
   --amplify-space-relative-xxxl: 4.5em;
   --amplify-space-relative-xxl: 3.0em;
   --amplify-space-relative-xl: 2.0em;
@@ -19,7 +20,7 @@
   --amplify-space-relative-medium: 1em;
   --amplify-space-relative-small: 0.75em;
   --amplify-space-relative-xs: 0.5em;
-  --amplify-space-relative-xxs: 0.375rem;
+  --amplify-space-relative-xxs: 0.375em;
   --amplify-space-relative-xxxs: 0.25em;
   --amplify-space-xxxl: 4.5rem;
   --amplify-space-xxl: 3.0rem;
@@ -30,6 +31,7 @@
   --amplify-space-xs: 0.5rem;
   --amplify-space-xxs: 0.375rem;
   --amplify-space-xxxs: 0.25rem;
+  --amplify-space-zero: 0;
   --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary);
   --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary);
   --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary);
@@ -627,10 +629,20 @@
   --amplify-components-divider-opacity: var(--amplify-opacities-60);
   --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
   --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
+  --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
+  --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
   --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
   --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
   --amplify-components-divider-border-style: solid;
   --amplify-components-countrycodeselect-height: 100%;
+  --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs);
+  --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100);
+  --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large);
+  --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
+  --amplify-components-copy-gap: var(--amplify-space-relative-medium);
+  --amplify-components-copy-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-checkboxfield-justify-content: center;
   --amplify-components-checkboxfield-flex-direction: column;
   --amplify-components-checkboxfield-align-content: center;
@@ -803,6 +815,23 @@
   --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
   --amplify-components-badge-line-height: 1;
   --amplify-components-badge-color: var(--amplify-colors-font-primary);
+  --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
+  --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
+  --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
+  --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
+  --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
+  --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-authenticator-router-border-style: solid;
+  --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small);
+  --amplify-components-authenticator-container-width-max: 30rem;
+  --amplify-components-authenticator-modal-left: var(--amplify-space-zero);
+  --amplify-components-authenticator-modal-top: var(--amplify-space-zero);
+  --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50);
+  --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full);
+  --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full);
+  --amplify-components-authenticator-max-width: 60rem;
   --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
   --amplify-components-alert-success-color: var(--amplify-colors-font-success);
   --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
@@ -1411,6 +1440,34 @@ h6.amplify-heading {
     background-color: var(--amplify-components-placeholder-end-color);
   }
 }
+[data-amplify-copy] {
+  display: flex;
+  font-size: var(--amplify-components-copy-font-size);
+  gap: var(--amplify-components-copy-gap);
+  justify-content: center;
+  align-items: center;
+  word-break: break-all;
+}
+
+[data-amplify-copy-svg] {
+  cursor: pointer;
+  position: relative;
+}
+[data-amplify-copy-svg] path {
+  fill: var(--amplify-components-copy-svg-path-fill);
+}
+[data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] {
+  visibility: visible;
+  font-size: var(--amplify-components-copy-tool-tip-font-size);
+}
+
+[data-amplify-copy-tooltip] {
+  visibility: hidden;
+  position: absolute;
+  bottom: var(--amplify-components-copy-tool-tip-bottom);
+  color: var(--amplify-components-copy-tool-tip-color);
+}
+
 .amplify-alert {
   align-items: var(--amplify-components-alert-align-items);
   justify-content: var(--amplify-components-alert-justify-content);
@@ -1457,148 +1514,44 @@ h6.amplify-heading {
 /* Center by default */
 [data-amplify-authenticator] {
   display: grid;
+  max-width: var(--amplify-components-authenticator-max-width);
+  margin: auto;
 }
-
 [data-amplify-authenticator][data-variation=modal] {
   display: grid;
-  width: 100vw;
-  height: 100vh;
-  height: -webkit-fill-available;
-  background-color: var(--amplify-colors-background-secondary, #e1e5e9);
-  /* Override browser default `body { margin: 8px }` */
+  width: var(--amplify-components-authenticator-modal-width);
+  height: var(--amplify-components-authenticator-modal-height);
+  background-color: var(--amplify-components-authenticator-modal-background-color);
   position: fixed;
-  top: 0;
-  left: 0;
+  top: var(--amplify-components-authenticator-modal-top);
+  left: var(--amplify-components-authenticator-modal-left);
   /* Having a z-index at least "wins" by default */
   z-index: 1;
-  /* top-align at the top 20% of the screen */
-  box-sizing: border-box;
-  padding-top: 20vh;
-  align-content: flex-start;
 }
-@media (max-width: 30rem) {
-  [data-amplify-authenticator][data-variation=modal] {
-    overflow: auto;
-    padding-top: 0;
-  }
-}
-
-[data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
-  max-height: 60vh;
-  overflow-y: auto;
-  /* Scroll shadows, adapted from https://codepen.io/chriscoyier/pen/YzXBYvL */
-  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;
-  background-repeat: no-repeat;
-  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-  background-attachment: local, local, scroll, scroll;
-}
-@media (max-width: 30rem) {
-  [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
-    max-height: unset;
-  }
-}
-
-/* Texture for modal */
-[data-amplify-authenticator][data-variation=modal]::before {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  content: "";
-  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");
-  opacity: 0.35;
-  filter: "contrast(120%) brightness(120%)";
-}
-
 [data-amplify-authenticator] [data-amplify-container] {
-  /* Fix z-index of texture being over the Authenticator */
-  position: relative;
   place-self: center;
-  width: 30rem;
 }
-@media (max-width: 30rem) {
+@media (min-width: 30rem) {
   [data-amplify-authenticator] [data-amplify-container] {
-    width: 100%;
+    width: var(--amplify-components-authenticator-container-width-max);
   }
 }
-
-[data-amplify-authenticator] [data-amplify-router] [data-amplify-footer] {
-  padding-bottom: var(--amplify-space-medium);
-  text-align: center;
-}
-
 [data-amplify-authenticator] [data-amplify-router] {
-  background-color: var(--amplify-colors-background-primary);
-  box-shadow: var(--amplify-shadows-medium);
+  background-color: var(--amplify-components-authenticator-router-background-color);
+  box-shadow: var(--amplify-components-authenticator-router-box-shadow);
+  border-color: var(--amplify-components-authenticator-router-border-color);
+  border-width: var(--amplify-components-authenticator-router-border-width);
+  border-style: var(--amplify-components-authenticator-router-border-style);
+}
+[data-amplify-authenticator] [data-amplify-footer] {
+  padding-bottom: var(--amplify-components-authenticator-footer-padding-bottom);
+  text-align: center;
 }
-
 [data-amplify-authenticator] [data-amplify-form] {
-  padding: var(--amplify-space-xl);
-}
-
-[data-amplify-authenticator] [data-state=inactive][role=tab] {
-  background-color: var(--amplify-colors-background-secondary);
+  padding: var(--amplify-components-authenticator-form-padding);
 }
-
-/* Remove double-border between the password field & reveal button */
-[data-amplify-authenticator] .amplify-passwordfield .amplify-button:not(:focus) {
-  border-left: none;
-}
-
-[data-amplify-authenticator] .amplify-phonenumberfield .amplify-countrycodeselect {
-  height: 100%;
-}
-
-[data-amplify-authenticator] .amplify-phonenumberfield .amplify-select__wrapper {
-  height: 100%;
-}
-
-/* Remove double-border between the phone field & country select  */
-[data-amplify-authenticator] .amplify-phonenumberfield select:not(:focus) {
-  border-right: none;
-}
-
-[data-amplify-authenticator] [data-or-container] {
-  position: relative;
-  color: gray;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem 0px;
-}
-[data-amplify-authenticator] [data-or-container] [data-or-line] {
-  position: absolute;
-  background: var(--amplify-colors-white);
-  z-index: 1;
-  padding: 0px 1.5rem;
-}
-
-[data-amplify-copy] {
-  display: flex;
-  font-size: 0.688rem;
-  gap: 1rem;
-  justify-content: center;
-  align-items: center;
-}
-@media (max-width: 30rem) {
-  [data-amplify-copy] {
-    word-break: break-all;
-  }
-}
-
-[data-amplify-copy-svg] {
-  cursor: pointer;
-  position: relative;
-}
-[data-amplify-copy-svg]:hover [data-amplify-copy-tooltip] {
-  visibility: visible;
-  font-size: 0.55rem;
-}
-
-[data-amplify-copy-tooltip] {
-  visibility: hidden;
-  position: absolute;
-  top: -1rem;
-  left: -0.1rem;
-  color: var(--amplify-colors-teal-100);
+[data-amplify-authenticator] [data-state=inactive] {
+  background-color: var(--amplify-components-authenticator-state-inactive-background-color);
 }
 
 .amplify-card {
@@ -1724,10 +1677,11 @@ h6.amplify-heading {
   border-color: var(--amplify-components-divider-border-color);
   border-style: var(--amplify-components-divider-border-style);
   border-width: 0;
-  margin: 0;
   opacity: var(--amplify-components-divider-opacity);
   padding: 0;
   display: block;
+  position: relative;
+  text-align: center;
 }
 .amplify-divider[aria-orientation=horizontal] {
   width: 100%;
@@ -1748,6 +1702,28 @@ h6.amplify-heading {
 .amplify-divider[aria-orientation=vertical][data-size=large] {
   border-left-width: var(--amplify-components-divider-large-border-width);
 }
+.amplify-divider--label {
+  display: flex;
+  justify-content: center;
+}
+.amplify-divider--label::after {
+  content: attr(data-label);
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: var(--amplify-components-divider-label-font-size);
+  padding-inline: var(--amplify-components-divider-label-padding-inline);
+  background-color: var(--amplify-components-divider-label-background-color);
+  color: var(--amplify-components-divider-label-color);
+}
+.amplify-divider--label[aria-orientation=vertical] {
+  flex-direction: column;
+}
+.amplify-divider--label[aria-orientation=vertical]::after {
+  top: auto;
+  transform: translateX(-50%);
+  padding-block: 0;
+  padding-inline: 0;
+}
 
 .amplify-expander {
   display: block;

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Mar 2022 22:42:53 GMT
+ * Generated on Thu, 03 Mar 2022 23:05:31 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -10,6 +10,7 @@
   --amplify-time-long: 500ms;
   --amplify-time-medium: 250ms;
   --amplify-time-short: 100ms;
+  --amplify-space-relative-full: 100%;
   --amplify-space-relative-xxxl: 4.5em;
   --amplify-space-relative-xxl: 3.0em;
   --amplify-space-relative-xl: 2.0em;
@@ -17,7 +18,7 @@
   --amplify-space-relative-medium: 1em;
   --amplify-space-relative-small: 0.75em;
   --amplify-space-relative-xs: 0.5em;
-  --amplify-space-relative-xxs: 0.375rem;
+  --amplify-space-relative-xxs: 0.375em;
   --amplify-space-relative-xxxs: 0.25em;
   --amplify-space-xxxl: 4.5rem;
   --amplify-space-xxl: 3.0rem;
@@ -28,6 +29,7 @@
   --amplify-space-xs: 0.5rem;
   --amplify-space-xxs: 0.375rem;
   --amplify-space-xxxs: 0.25rem;
+  --amplify-space-zero: 0;
   --amplify-shadows-large: 0px 4px 12px  var(--amplify-colors-shadow-primary);
   --amplify-shadows-medium: 0px 2px 6px  var(--amplify-colors-shadow-secondary);
   --amplify-shadows-small: 0px 2px 4px  var(--amplify-colors-shadow-tertiary);
@@ -625,10 +627,20 @@
   --amplify-components-divider-opacity: var(--amplify-opacities-60);
   --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
   --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
+  --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
+  --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
   --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
   --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
   --amplify-components-divider-border-style: solid;
   --amplify-components-countrycodeselect-height: 100%;
+  --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs);
+  --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100);
+  --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large);
+  --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
+  --amplify-components-copy-gap: var(--amplify-space-relative-medium);
+  --amplify-components-copy-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-checkboxfield-justify-content: center;
   --amplify-components-checkboxfield-flex-direction: column;
   --amplify-components-checkboxfield-align-content: center;
@@ -801,6 +813,23 @@
   --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
   --amplify-components-badge-line-height: 1;
   --amplify-components-badge-color: var(--amplify-colors-font-primary);
+  --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
+  --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
+  --amplify-components-authenticator-form-padding: var(--amplify-space-xl);
+  --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
+  --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
+  --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary);
+  --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-authenticator-router-border-style: solid;
+  --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small);
+  --amplify-components-authenticator-container-width-max: 30rem;
+  --amplify-components-authenticator-modal-left: var(--amplify-space-zero);
+  --amplify-components-authenticator-modal-top: var(--amplify-space-zero);
+  --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50);
+  --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full);
+  --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full);
+  --amplify-components-authenticator-max-width: 60rem;
   --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
   --amplify-components-alert-success-color: var(--amplify-colors-font-success);
   --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {