@aws-amplify/ui 3.6.2 → 3.6.3

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Mon, 11 Apr 2022 18:40:17 GMT
+ * Generated on Wed, 13 Apr 2022 22:17:55 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -247,7 +247,6 @@
   --amplify-components-menu-item-min-height: 2.5rem;
   --amplify-components-menu-min-width: 14rem;
   --amplify-components-menu-max-width: 30rem;
-  --amplify-components-menu-gap: 0;
   --amplify-components-menu-flex-direction: column;
   --amplify-components-menu-border-style: solid;
   --amplify-components-loader-linear-animation-duration: 1s;
@@ -269,7 +268,6 @@
   --amplify-components-fieldmessages-description-font-style: italic;
   --amplify-components-fieldgroup-outer-align-items: center;
   --amplify-components-fieldgroup-vertical-align-items: center;
-  --amplify-components-fieldgroup-gap: 0;
   --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
   --amplify-components-fieldcontrol-quiet-border-radius: 0;
   --amplify-components-fieldcontrol-quiet-border-block-start: none;
@@ -288,7 +286,6 @@
   --amplify-components-expander-width: 100%;
   --amplify-components-expander-display: block;
   --amplify-components-divider-border-style: solid;
-  --amplify-components-countrycodeselect-height: 100%;
   --amplify-components-checkboxfield-justify-content: center;
   --amplify-components-checkboxfield-flex-direction: column;
   --amplify-components-checkboxfield-align-content: center;
@@ -325,12 +322,10 @@
   --amplify-components-button-link-active-border-color: transparent;
   --amplify-components-button-link-focus-border-color: transparent;
   --amplify-components-button-link-hover-border-color: transparent;
-  --amplify-components-button-link-background-color: transparent;
   --amplify-components-button-link-border-color: transparent;
-  --amplify-components-button-link-border-width: 0;
+  --amplify-components-button-link-background-color: transparent;
   --amplify-components-button-menu-justify-content: start;
   --amplify-components-button-menu-background-color: transparent;
-  --amplify-components-button-menu-border-width: 0;
   --amplify-components-button-primary-active-border-color: transparent;
   --amplify-components-button-primary-focus-border-color: transparent;
   --amplify-components-button-primary-hover-border-color: transparent;
@@ -490,6 +485,7 @@
   --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl);
   --amplify-components-menu-small-height: var(--amplify-font-sizes-medium);
   --amplify-components-menu-small-width: var(--amplify-font-sizes-medium);
+  --amplify-components-menu-gap: var(--amplify-space-zero);
   --amplify-components-menu-border-width: var(--amplify-border-widths-small);
   --amplify-components-menu-border-radius: var(--amplify-radii-medium);
   --amplify-components-menu-background-color: var(--amplify-colors-white);
@@ -528,6 +524,7 @@
   --amplify-components-flex-gap: var(--amplify-space-medium);
   --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
   --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
   --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
   --amplify-components-fieldcontrol-quiet-border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
   --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium);
@@ -582,6 +579,7 @@
   --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
   --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
   --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full);
   --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);
@@ -604,6 +602,8 @@
   --amplify-components-card-padding: var(--amplify-space-medium);
   --amplify-components-card-border-radius: var(--amplify-radii-xs);
   --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
+  --amplify-components-button-link-border-width: var(--amplify-space-zero);
+  --amplify-components-button-menu-border-width: var(--amplify-space-zero);
   --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
   --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
   --amplify-components-button-font-weight: 700;
@@ -699,7 +699,7 @@
   --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
   --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
-  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px var(--amplify-colors-border-error);
+  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
   --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
@@ -818,7 +818,7 @@
   --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
-  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px var(--amplify-colors-border-focus);
+  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
   --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
   --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 11 Apr 2022 18:40:17 GMT
+ * Generated on Wed, 13 Apr 2022 22:17:55 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -245,7 +245,6 @@
   --amplify-components-menu-item-min-height: 2.5rem;
   --amplify-components-menu-min-width: 14rem;
   --amplify-components-menu-max-width: 30rem;
-  --amplify-components-menu-gap: 0;
   --amplify-components-menu-flex-direction: column;
   --amplify-components-menu-border-style: solid;
   --amplify-components-loader-linear-animation-duration: 1s;
@@ -267,7 +266,6 @@
   --amplify-components-fieldmessages-description-font-style: italic;
   --amplify-components-fieldgroup-outer-align-items: center;
   --amplify-components-fieldgroup-vertical-align-items: center;
-  --amplify-components-fieldgroup-gap: 0;
   --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
   --amplify-components-fieldcontrol-quiet-border-radius: 0;
   --amplify-components-fieldcontrol-quiet-border-block-start: none;
@@ -286,7 +284,6 @@
   --amplify-components-expander-width: 100%;
   --amplify-components-expander-display: block;
   --amplify-components-divider-border-style: solid;
-  --amplify-components-countrycodeselect-height: 100%;
   --amplify-components-checkboxfield-justify-content: center;
   --amplify-components-checkboxfield-flex-direction: column;
   --amplify-components-checkboxfield-align-content: center;
@@ -323,12 +320,10 @@
   --amplify-components-button-link-active-border-color: transparent;
   --amplify-components-button-link-focus-border-color: transparent;
   --amplify-components-button-link-hover-border-color: transparent;
-  --amplify-components-button-link-background-color: transparent;
   --amplify-components-button-link-border-color: transparent;
-  --amplify-components-button-link-border-width: 0;
+  --amplify-components-button-link-background-color: transparent;
   --amplify-components-button-menu-justify-content: start;
   --amplify-components-button-menu-background-color: transparent;
-  --amplify-components-button-menu-border-width: 0;
   --amplify-components-button-primary-active-border-color: transparent;
   --amplify-components-button-primary-focus-border-color: transparent;
   --amplify-components-button-primary-hover-border-color: transparent;
@@ -488,6 +483,7 @@
   --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl);
   --amplify-components-menu-small-height: var(--amplify-font-sizes-medium);
   --amplify-components-menu-small-width: var(--amplify-font-sizes-medium);
+  --amplify-components-menu-gap: var(--amplify-space-zero);
   --amplify-components-menu-border-width: var(--amplify-border-widths-small);
   --amplify-components-menu-border-radius: var(--amplify-radii-medium);
   --amplify-components-menu-background-color: var(--amplify-colors-white);
@@ -526,6 +522,7 @@
   --amplify-components-flex-gap: var(--amplify-space-medium);
   --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
   --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
   --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
   --amplify-components-fieldcontrol-quiet-border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
   --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium);
@@ -580,6 +577,7 @@
   --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
   --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
   --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full);
   --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);
@@ -602,6 +600,8 @@
   --amplify-components-card-padding: var(--amplify-space-medium);
   --amplify-components-card-border-radius: var(--amplify-radii-xs);
   --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
+  --amplify-components-button-link-border-width: var(--amplify-space-zero);
+  --amplify-components-button-menu-border-width: var(--amplify-space-zero);
   --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
   --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
   --amplify-components-button-font-weight: 700;
@@ -697,7 +697,7 @@
   --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
   --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
-  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px   var(--amplify-colors-border-error);
+  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px  var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
   --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
@@ -816,7 +816,7 @@
   --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
-  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px   var(--amplify-colors-border-focus);
+  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px  var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
   --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
   --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);

package/dist/types/theme/tokens/components/alert.d.ts

@@ -1,65 +1,28 @@
-export declare const alert: {
-    alignItems: {
-        value: string;
-    };
-    justifyContent: {
-        value: string;
-    };
-    color: {
-        value: string;
-    };
-    backgroundColor: {
-        value: string;
-    };
-    paddingBlock: {
-        value: string;
-    };
-    paddingInline: {
-        value: string;
-    };
-    icon: {
-        size: {
-            value: string;
-        };
-    };
-    heading: {
-        fontSize: {
-            value: string;
-        };
-        fontWeight: {
-            value: string;
-        };
-    };
-    info: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-    };
-    error: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-    };
-    warning: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-    };
-    success: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-    };
-};
+import { AlignItemsValue, BackgroundColorValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, JustifyContentValue, SpaceValue } from '../types/designToken';
+interface AlertVariationTokens {
+    color: DesignToken<ColorValue>;
+    backgroundColor: DesignToken<BackgroundColorValue>;
+}
+interface AlertIconTokens {
+    size: DesignToken<FontSizeValue>;
+}
+interface AlertHeadingTokens {
+    fontSize: DesignToken<FontSizeValue>;
+    fontWeight: DesignToken<FontWeightValue>;
+}
+export interface AlertTokens {
+    alignItems: DesignToken<AlignItemsValue>;
+    justifyContent: DesignToken<JustifyContentValue>;
+    color: DesignToken<ColorValue>;
+    backgroundColor: DesignToken<BackgroundColorValue>;
+    paddingBlock: DesignToken<SpaceValue>;
+    paddingInline: DesignToken<SpaceValue>;
+    icon: AlertIconTokens;
+    heading: AlertHeadingTokens;
+    info: AlertVariationTokens;
+    error: AlertVariationTokens;
+    warning: AlertVariationTokens;
+    success: AlertVariationTokens;
+}
+export declare const alert: AlertTokens;
+export {};

package/dist/types/theme/tokens/components/authenticator.d.ts

@@ -1,71 +1,47 @@
-export declare const authenticator: {
-    maxWidth: {
-        value: string;
-    };
-    modal: {
-        width: {
-            value: string;
-        };
-        height: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        top: {
-            value: string;
-        };
-        left: {
-            value: string;
-        };
-    };
-    container: {
-        widthMax: {
-            value: string;
-        };
-    };
-    router: {
-        borderWidth: {
-            value: string;
-        };
-        borderStyle: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        boxShadow: {
-            value: string;
-        };
-    };
-    footer: {
-        paddingBottom: {
-            value: string;
-        };
-    };
-    form: {
-        padding: {
-            value: string;
-        };
-    };
-    state: {
-        inactive: {
-            backgroundColor: {
-                value: string;
-            };
-        };
-    };
-    orContainer: {
-        color: {
-            value: string;
-        };
-        orLine: {
-            backgroundColor: {
-                value: string;
-            };
-        };
-    };
-};
+import { DesignToken, ColorValue, SpaceValue, BorderWidthValue, BorderColorValue, BackgroundColorValue, BorderStyleValue, BoxShadowValue } from '../types/designToken';
+interface AuthenticatorModalTokens {
+    width: DesignToken<SpaceValue>;
+    height: DesignToken<SpaceValue>;
+    backgroundColor: DesignToken<BackgroundColorValue>;
+    top: DesignToken<SpaceValue>;
+    left: DesignToken<SpaceValue>;
+}
+interface AuthenticatorRouterTokens {
+    borderWidth: DesignToken<BorderWidthValue>;
+    borderStyle: DesignToken<BorderStyleValue>;
+    borderColor: DesignToken<BorderColorValue>;
+    backgroundColor: DesignToken<BackgroundColorValue>;
+    boxShadow: DesignToken<BoxShadowValue>;
+}
+interface AuthenticatorFooterTokens {
+    paddingBottom: DesignToken<SpaceValue>;
+}
+interface AuthenticatorFormTokens {
+    padding: DesignToken<SpaceValue>;
+}
+interface AuthenticatorStateTokens {
+    inactive: {
+        backgroundColor: DesignToken<BackgroundColorValue>;
+    };
+}
+interface AuthenticatorOrContainerTokens {
+    color: DesignToken<ColorValue>;
+    orLine: {
+        backgroundColor: DesignToken<BackgroundColorValue>;
+    };
+}
+interface AuthenticatorContainerToken {
+    widthMax: DesignToken<SpaceValue>;
+}
+export interface AuthenticatorTokens {
+    maxWidth: DesignToken<SpaceValue>;
+    modal: AuthenticatorModalTokens;
+    container: AuthenticatorContainerToken;
+    router: AuthenticatorRouterTokens;
+    footer: AuthenticatorFooterTokens;
+    form: AuthenticatorFormTokens;
+    state: AuthenticatorStateTokens;
+    orContainer: AuthenticatorOrContainerTokens;
+}
+export declare const authenticator: AuthenticatorTokens;
+export {};

package/dist/types/theme/tokens/components/badge.d.ts

@@ -1,83 +1,29 @@
-export declare const badge: {
-    color: {
-        value: string;
-    };
-    lineHeight: {
-        value: number;
-    };
-    fontWeight: {
-        value: string;
-    };
-    fontSize: {
-        value: string;
-    };
-    textAlign: {
-        value: string;
-    };
-    paddingVertical: {
-        value: string;
-    };
-    paddingHorizontal: {
-        value: string;
-    };
-    backgroundColor: {
-        value: string;
-    };
-    borderRadius: {
-        value: string;
-    };
-    info: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-    };
-    warning: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-    };
-    success: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-    };
-    error: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-    };
-    small: {
-        fontSize: {
-            value: string;
-        };
-        paddingVertical: {
-            value: string;
-        };
-        paddingHorizontal: {
-            value: string;
-        };
-    };
-    large: {
-        fontSize: {
-            value: string;
-        };
-        paddingVertical: {
-            value: string;
-        };
-        paddingHorizontal: {
-            value: string;
-        };
-    };
-};
+import { BackgroundColorValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, LineHeightValue, RadiusValue, SpaceValue, TextAlignValue } from '../types/designToken';
+interface BadgeVariationTokens {
+    backgroundColor: DesignToken<BackgroundColorValue>;
+    color: DesignToken<ColorValue>;
+}
+interface BadgeSizeTokens {
+    fontSize: DesignToken<FontSizeValue>;
+    paddingHorizontal: DesignToken<SpaceValue>;
+    paddingVertical: DesignToken<SpaceValue>;
+}
+export interface BadgeTokens {
+    backgroundColor: DesignToken<BackgroundColorValue>;
+    borderRadius: DesignToken<RadiusValue>;
+    color: DesignToken<ColorValue>;
+    error: BadgeVariationTokens;
+    fontSize: DesignToken<FontSizeValue>;
+    fontWeight: DesignToken<FontWeightValue>;
+    info: BadgeVariationTokens;
+    large: BadgeSizeTokens;
+    lineHeight: DesignToken<LineHeightValue>;
+    paddingHorizontal: DesignToken<SpaceValue>;
+    paddingVertical: DesignToken<SpaceValue>;
+    small: BadgeSizeTokens;
+    success: BadgeVariationTokens;
+    textAlign: DesignToken<TextAlignValue>;
+    warning: BadgeVariationTokens;
+}
+export declare const badge: BadgeTokens;
+export {};