@aws-amplify/ui 3.6.1 → 3.6.4

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Thu, 07 Apr 2022 22:05:00 GMT
+ * Generated on Wed, 20 Apr 2022 01:36:14 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;
@@ -347,9 +342,9 @@
   --amplify-components-authenticator-max-width: 60rem;
   --amplify-components-alert-justify-content: space-between;
   --amplify-components-alert-align-items: center;
-  --amplify-shadows-large: [object Object];
-  --amplify-shadows-medium: [object Object];
-  --amplify-shadows-small: [object Object];
+  --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);
   --amplify-colors-border-error: var(--amplify-colors-red-80);
   --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
   --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
@@ -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);
@@ -565,7 +562,7 @@
   --amplify-components-expander-trigger-hover-background-color: var(--amplify-colors-overlay-10);
   --amplify-components-expander-trigger-padding-inline-end: var(--amplify-space-large);
   --amplify-components-expander-trigger-padding-inline-start: var(--amplify-space-large);
-  --amplify-components-expander-header-box-shadow: [object Object];
+  --amplify-components-expander-header-box-shadow: 0 1px 0 var(--amplify-colors-overlay-20);
   --amplify-components-expander-item-border-end-end-radius: var(--amplify-radii-medium);
   --amplify-components-expander-item-border-end-start-radius: var(--amplify-radii-medium);
   --amplify-components-expander-item-border-start-end-radius: var(--amplify-radii-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;
@@ -671,10 +671,9 @@
   --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
-  --amplify-components-switchfield-focused-shadow: [object Object];
   --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
-  --amplify-components-sliderfield-thumb-box-shadow: [object Object];
+  --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
   --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
@@ -689,7 +688,7 @@
   --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
   --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
   --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
-  --amplify-components-menu-box-shadow: [object Object];
+  --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
   --amplify-components-menu-border-color: var(--amplify-colors-border-primary);
   --amplify-components-loader-text-fill: var(--amplify-colors-font-primary);
   --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
@@ -697,9 +696,9 @@
   --amplify-components-heading-color: var(--amplify-colors-font-primary);
   --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
   --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
-  --amplify-components-fieldcontrol-error-focus-box-shadow: [object Object];
+  --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: [object Object];
+  --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);
@@ -708,17 +707,17 @@
   --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary);
   --amplify-components-field-label-color: var(--amplify-colors-font-secondary);
   --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
-  --amplify-components-expander-item-box-shadow: [object Object];
-  --amplify-components-expander-box-shadow: [object Object];
+  --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
+  --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
   --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
   --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
   --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
   --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
   --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
-  --amplify-components-checkbox-button-error-focus-box-shadow: [object Object];
+  --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
   --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
   --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
-  --amplify-components-card-elevated-box-shadow: [object Object];
+  --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
   --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
   --amplify-components-card-background-color: var(--amplify-colors-background-primary);
   --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
@@ -774,7 +773,7 @@
   --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-state-inactive-background-color: var(--amplify-colors-background-secondary);
-  --amplify-components-authenticator-router-box-shadow: [object Object];
+  --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-alert-success-background-color: var(--amplify-colors-background-success);
@@ -799,13 +798,14 @@
   --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
   --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
-  --amplify-components-sliderfield-thumb-focus-box-shadow: [object Object];
+  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
+  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
-  --amplify-components-radio-button-error-focus-box-shadow: [object Object];
+  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
   --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
@@ -816,15 +816,15 @@
   --amplify-components-link-active-color: var(--amplify-colors-font-active);
   --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
-  --amplify-components-fieldcontrol-focus-box-shadow: [object Object];
+  --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: [object Object];
+  --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: [object Object];
+  --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);
   --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
-  --amplify-components-checkbox-button-focus-box-shadow: [object Object];
+  --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
   --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
   --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
   --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
@@ -848,11 +848,11 @@
   --amplify-components-button-hover-color: var(--amplify-colors-font-focus);
   --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
-  --amplify-components-togglebutton-primary-focus-box-shadow: [object Object];
-  --amplify-components-radio-button-focus-box-shadow: [object Object];
-  --amplify-components-button-link-focus-box-shadow: [object Object];
-  --amplify-components-button-primary-focus-box-shadow: [object Object];
-  --amplify-components-button-focus-box-shadow: [object Object];
+  --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
 }
 
 html {

package/dist/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 07 Apr 2022 22:05:00 GMT
+ * Generated on Wed, 20 Apr 2022 01:36:14 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;
@@ -345,9 +340,9 @@
   --amplify-components-authenticator-max-width: 60rem;
   --amplify-components-alert-justify-content: space-between;
   --amplify-components-alert-align-items: center;
-  --amplify-shadows-large: [object Object];
-  --amplify-shadows-medium: [object Object];
-  --amplify-shadows-small: [object Object];
+  --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);
   --amplify-colors-border-error: var(--amplify-colors-red-80);
   --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
   --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
@@ -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);
@@ -563,7 +560,7 @@
   --amplify-components-expander-trigger-hover-background-color: var(--amplify-colors-overlay-10);
   --amplify-components-expander-trigger-padding-inline-end: var(--amplify-space-large);
   --amplify-components-expander-trigger-padding-inline-start: var(--amplify-space-large);
-  --amplify-components-expander-header-box-shadow: [object Object];
+  --amplify-components-expander-header-box-shadow: 0 1px 0  var(--amplify-colors-overlay-20);
   --amplify-components-expander-item-border-end-end-radius: var(--amplify-radii-medium);
   --amplify-components-expander-item-border-end-start-radius: var(--amplify-radii-medium);
   --amplify-components-expander-item-border-start-end-radius: var(--amplify-radii-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;
@@ -669,10 +669,9 @@
   --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
-  --amplify-components-switchfield-focused-shadow: [object Object];
   --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
-  --amplify-components-sliderfield-thumb-box-shadow: [object Object];
+  --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
   --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
@@ -687,7 +686,7 @@
   --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
   --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
   --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
-  --amplify-components-menu-box-shadow: [object Object];
+  --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
   --amplify-components-menu-border-color: var(--amplify-colors-border-primary);
   --amplify-components-loader-text-fill: var(--amplify-colors-font-primary);
   --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
@@ -695,9 +694,9 @@
   --amplify-components-heading-color: var(--amplify-colors-font-primary);
   --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
   --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
-  --amplify-components-fieldcontrol-error-focus-box-shadow: [object Object];
+  --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: [object Object];
+  --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);
@@ -706,17 +705,17 @@
   --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary);
   --amplify-components-field-label-color: var(--amplify-colors-font-secondary);
   --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
-  --amplify-components-expander-item-box-shadow: [object Object];
-  --amplify-components-expander-box-shadow: [object Object];
+  --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
+  --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
   --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary);
   --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary);
   --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
   --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary);
   --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
-  --amplify-components-checkbox-button-error-focus-box-shadow: [object Object];
+  --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
   --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
   --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
-  --amplify-components-card-elevated-box-shadow: [object Object];
+  --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
   --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
   --amplify-components-card-background-color: var(--amplify-colors-background-primary);
   --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
@@ -772,7 +771,7 @@
   --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-state-inactive-background-color: var(--amplify-colors-background-secondary);
-  --amplify-components-authenticator-router-box-shadow: [object Object];
+  --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-alert-success-background-color: var(--amplify-colors-background-success);
@@ -797,13 +796,14 @@
   --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
   --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
-  --amplify-components-sliderfield-thumb-focus-box-shadow: [object Object];
+  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
+  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
-  --amplify-components-radio-button-error-focus-box-shadow: [object Object];
+  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
   --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
   --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
@@ -814,15 +814,15 @@
   --amplify-components-link-active-color: var(--amplify-colors-font-active);
   --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
-  --amplify-components-fieldcontrol-focus-box-shadow: [object Object];
+  --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: [object Object];
+  --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: [object Object];
+  --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);
   --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
-  --amplify-components-checkbox-button-focus-box-shadow: [object Object];
+  --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
   --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
   --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
   --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
@@ -846,9 +846,9 @@
   --amplify-components-button-hover-color: var(--amplify-colors-font-focus);
   --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
-  --amplify-components-togglebutton-primary-focus-box-shadow: [object Object];
-  --amplify-components-radio-button-focus-box-shadow: [object Object];
-  --amplify-components-button-link-focus-box-shadow: [object Object];
-  --amplify-components-button-primary-focus-box-shadow: [object Object];
-  --amplify-components-button-focus-box-shadow: [object Object];
+  --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+  --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
 }

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 {};