@aws-amplify/ui 5.7.0 → 5.7.2

package/dist/theme.css

@@ -110,6 +110,7 @@
 --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
 --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
 --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+--amplify-components-button-background-color: transparent;
 --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
 --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
 --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
@@ -131,6 +132,71 @@
 --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
 --amplify-components-button-disabled-background-color: transparent;
 --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
+--amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60);
+--amplify-components-button-outlined-info-background-color: transparent;
+--amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100);
+--amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60);
+--amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10);
+--amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100);
+--amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
+--amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
+--amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
+--amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
+--amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
+--amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
+--amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
+--amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60);
+--amplify-components-button-outlined-warning-background-color: transparent;
+--amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100);
+--amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60);
+--amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10);
+--amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100);
+--amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
+--amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
+--amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
+--amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
+--amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
+--amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
+--amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
+--amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60);
+--amplify-components-button-outlined-success-background-color: transparent;
+--amplify-components-button-outlined-success-color: var(--amplify-colors-green-100);
+--amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60);
+--amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10);
+--amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100);
+--amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
+--amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
+--amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
+--amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
+--amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
+--amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
+--amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
+--amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
+--amplify-components-button-outlined-error-background-color: transparent;
+--amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
+--amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
+--amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
+--amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
+--amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
+--amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
+--amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
+--amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
+--amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
+--amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
+--amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
+--amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60);
+--amplify-components-button-outlined-overlay-background-color: transparent;
+--amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary);
+--amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60);
+--amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5);
+--amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90);
+--amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
+--amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
+--amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
+--amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
+--amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
+--amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
+--amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
 --amplify-components-button-primary-border-color: transparent;
 --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
 --amplify-components-button-primary-border-style: solid;
@@ -152,6 +218,71 @@
 --amplify-components-button-primary-active-border-color: transparent;
 --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
 --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-info-border-color: transparent;
+--amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80);
+--amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-info-hover-border-color: transparent;
+--amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90);
+--amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-info-focus-border-color: transparent;
+--amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
+--amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
+--amplify-components-button-primary-info-active-border-color: transparent;
+--amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
+--amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-warning-border-color: transparent;
+--amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80);
+--amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-warning-hover-border-color: transparent;
+--amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90);
+--amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-warning-focus-border-color: transparent;
+--amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
+--amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
+--amplify-components-button-primary-warning-active-border-color: transparent;
+--amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
+--amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-error-border-color: transparent;
+--amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80);
+--amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-error-hover-border-color: transparent;
+--amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90);
+--amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-error-focus-border-color: transparent;
+--amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
+--amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
+--amplify-components-button-primary-error-active-border-color: transparent;
+--amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
+--amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-success-border-color: transparent;
+--amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80);
+--amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-success-hover-border-color: transparent;
+--amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90);
+--amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-success-focus-border-color: transparent;
+--amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
+--amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
+--amplify-components-button-primary-success-active-border-color: transparent;
+--amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
+--amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-overlay-border-color: transparent;
+--amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70);
+--amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-overlay-hover-border-color: transparent;
+--amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90);
+--amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-overlay-focus-border-color: transparent;
+--amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
+--amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
+--amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
+--amplify-components-button-primary-overlay-active-border-color: transparent;
+--amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
+--amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
 --amplify-components-button-menu-border-width: var(--amplify-space-zero);
 --amplify-components-button-menu-background-color: transparent;
 --amplify-components-button-menu-justify-content: start;
@@ -164,7 +295,7 @@
 --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
 --amplify-components-button-link-background-color: transparent;
 --amplify-components-button-link-border-color: transparent;
---amplify-components-button-link-border-width: var(--amplify-space-zero);
+--amplify-components-button-link-border-width: var(--amplify-border-widths-small);
 --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
 --amplify-components-button-link-hover-border-color: transparent;
 --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
@@ -182,6 +313,71 @@
 --amplify-components-button-link-loading-border-color: transparent;
 --amplify-components-button-link-loading-background-color: transparent;
 --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
+--amplify-components-button-link-info-border-color: transparent;
+--amplify-components-button-link-info-background-color: transparent;
+--amplify-components-button-link-info-color: var(--amplify-colors-blue-100);
+--amplify-components-button-link-info-hover-border-color: transparent;
+--amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10);
+--amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90);
+--amplify-components-button-link-info-focus-border-color: transparent;
+--amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
+--amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
+--amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
+--amplify-components-button-link-info-active-border-color: transparent;
+--amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
+--amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
+--amplify-components-button-link-warning-border-color: transparent;
+--amplify-components-button-link-warning-background-color: transparent;
+--amplify-components-button-link-warning-color: var(--amplify-colors-orange-100);
+--amplify-components-button-link-warning-hover-border-color: transparent;
+--amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10);
+--amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90);
+--amplify-components-button-link-warning-focus-border-color: transparent;
+--amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
+--amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
+--amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
+--amplify-components-button-link-warning-active-border-color: transparent;
+--amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
+--amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
+--amplify-components-button-link-success-border-color: transparent;
+--amplify-components-button-link-success-background-color: transparent;
+--amplify-components-button-link-success-color: var(--amplify-colors-green-100);
+--amplify-components-button-link-success-hover-border-color: transparent;
+--amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10);
+--amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90);
+--amplify-components-button-link-success-focus-border-color: transparent;
+--amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
+--amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
+--amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
+--amplify-components-button-link-success-active-border-color: transparent;
+--amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
+--amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
+--amplify-components-button-link-error-border-color: transparent;
+--amplify-components-button-link-error-background-color: transparent;
+--amplify-components-button-link-error-color: var(--amplify-colors-red-100);
+--amplify-components-button-link-error-hover-border-color: transparent;
+--amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10);
+--amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90);
+--amplify-components-button-link-error-focus-border-color: transparent;
+--amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
+--amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
+--amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
+--amplify-components-button-link-error-active-border-color: transparent;
+--amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
+--amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
+--amplify-components-button-link-overlay-border-color: transparent;
+--amplify-components-button-link-overlay-background-color: transparent;
+--amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100);
+--amplify-components-button-link-overlay-hover-border-color: transparent;
+--amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5);
+--amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80);
+--amplify-components-button-link-overlay-focus-border-color: transparent;
+--amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
+--amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
+--amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
+--amplify-components-button-link-overlay-active-border-color: transparent;
+--amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
+--amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
 --amplify-components-button-warning-background-color: transparent;
 --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
 --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
@@ -1094,6 +1290,7 @@
 --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
 --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
 --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
+--amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05);
 --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1);
 --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2);
 --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3);

package/dist/types/theme/tokens/colors.d.ts

@@ -10,7 +10,7 @@ type ColorValues<VariantKey extends string | number, Output, Platform = unknown>
 type BaseColorValueScale<VariantKey extends string | number, Output, Platform = unknown> = Record<VariantKey, ColorValues<ScaleKey, Output, Platform>>;
 type ColorValueScale<VariantKey extends string | number, Output, Platform = unknown> = Output extends 'required' | 'default' ? BaseColorValueScale<VariantKey, Output, Platform> : Partial<BaseColorValueScale<VariantKey, Output, Platform>>;
 type ScaleKey = 10 | 20 | 40 | 60 | 80 | 90 | 100;
-type OverlayKey = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
+type OverlayKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
 type ColorPaletteKey = 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'neutral';
 type GreyscalePaletteKey = 'white' | 'black' | 'transparent';
 type OrderVariant = 'primary' | 'secondary' | 'tertiary';

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

@@ -1,5 +1,10 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
 type StateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
+type ColorThemeTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output> & {
+    _hover?: StateTokens<Output>;
+    _focus?: StateWithShadowTokens<Output>;
+    _active?: StateTokens<Output>;
+};
 type StateWithShadowTokens<Output> = StateTokens<Output> & DesignTokenProperties<'boxShadow', Output>;
 type MenuStateTokens<Output> = Omit<StateTokens<Output>, 'borderColor'>;
 type PrimaryVariationTokens<Output> = StateTokens<Output> & DesignTokenProperties<'borderStyle' | 'borderWidth', Output> & {
@@ -8,6 +13,11 @@ type PrimaryVariationTokens<Output> = StateTokens<Output> & DesignTokenPropertie
     _hover?: StateTokens<Output>;
     _focus?: StateWithShadowTokens<Output>;
     _active?: StateTokens<Output>;
+    info?: ColorThemeTokens<Output>;
+    error?: ColorThemeTokens<Output>;
+    success?: ColorThemeTokens<Output>;
+    warning?: ColorThemeTokens<Output>;
+    overlay?: ColorThemeTokens<Output>;
 };
 type MenuVariationTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderWidth' | 'justifyContent', Output> & {
     _hover?: MenuStateTokens<Output>;
@@ -21,9 +31,21 @@ type LinkVariationTokens<Output> = DesignTokenProperties<'backgroundColor' | 'bo
     _active?: StateTokens<Output>;
     _disabled?: StateTokens<Output>;
     _loading?: StateTokens<Output>;
+    info?: ColorThemeTokens<Output>;
+    error?: ColorThemeTokens<Output>;
+    success?: ColorThemeTokens<Output>;
+    warning?: ColorThemeTokens<Output>;
+    overlay?: ColorThemeTokens<Output>;
+};
+type OutlinedVariationTokens<Output> = {
+    info?: ColorThemeTokens<Output>;
+    error?: ColorThemeTokens<Output>;
+    success?: ColorThemeTokens<Output>;
+    warning?: ColorThemeTokens<Output>;
+    overlay?: ColorThemeTokens<Output>;
 };
 type ButtonSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', Output>;
-export type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color', Output> & {
+export type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'backgroundColor' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color', Output> & {
     _hover?: StateTokens<Output>;
     _focus?: StateWithShadowTokens<Output>;
     _active?: StateTokens<Output>;
@@ -34,6 +56,7 @@ export type ButtonTokens<Output extends OutputVariantKey> = DesignTokenPropertie
     destructive?: PrimaryVariationTokens<Output>;
     menu?: MenuVariationTokens<Output>;
     link?: LinkVariationTokens<Output>;
+    outlined?: OutlinedVariationTokens<Output>;
     small?: ButtonSizeTokens<Output>;
     large?: ButtonSizeTokens<Output>;
     loaderWrapper?: DesignTokenProperties<'alignItems' | 'gap', Output>;

package/dist/types/types/util.d.ts

@@ -1,4 +1,15 @@
+/**
+ * Prevents usage of T from being automatically inferred.
+ * see: https://github.com/Microsoft/TypeScript/issues/14829#issuecomment-504042546
+ */
 export type NoInfer<T> = [T][T extends any ? 0 : never];
+/**
+ * Improves readability of enumerable properties of an `Object` created from another `Object`,
+ * for example types that have been created using `Omit` or `Pick`.
+ */
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 /**
 Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
 

package/dist/types/utils/index.d.ts

@@ -110,3 +110,26 @@ export declare const classNameModifier: (base: ComponentClassName, modifier?: Mo
  * @returns the modified class name or empty string
  */
 export declare const classNameModifierByFlag: (base: ComponentClassName, modifier: Modifiers, flag?: boolean) => string;
+/**
+ * `isFunction` but types the param with its function signature
+ *
+ * @param {unknown} value param to check
+ * @returns {boolean} whether `value` is a function
+ */
+export declare function isTypedFunction<T extends (...args: any[]) => any>(value: unknown): value is T;
+/**
+ * Similar to `Array.join`, with an optional callback/template param
+ * for formatting returned string values
+ *
+ * @param {string[]} values string array
+ * @param {(value: string) => string} template callback format param
+ * @returns formatted string array
+ */
+export declare function templateJoin(values: string[], template: (value: string) => string): string;
+/**
+ * A function that does nothing
+ *
+ * @param {any[]} _ accepts any parameters
+ * @returns nothing
+ */
+export declare function noop(..._: any[]): void;

package/package.json

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