@aws-amplify/ui 6.0.2 → 6.0.3

package/dist/index.js

@@ -3287,6 +3287,7 @@ const runFieldValidators = ({ value, validators, eventType, hasBlurred, }) => {
 
 // default `autoSignIn` flag is `true`
 const DEFAULT_AUTO_SIGN_IN = true;
+const EMPTY_STRING = '';
 const sanitizePhoneNumber = (dialCode, phoneNumber) => `${dialCode}${phoneNumber}`.replace(/[^A-Z0-9+]/gi, '');
 const selectUserAttributes = (_, key) => {
     // Allowlist of Cognito User Pool Attributes (from OpenID Connect specification)
@@ -3318,7 +3319,7 @@ const selectUserAttributes = (_, key) => {
 const getUserAttributes = (formValues) => {
     const { phone_number, ...userAttributes } = pickBy__default["default"](formValues, selectUserAttributes);
     // only include `phone_number` attribute in `userAttributes` if it has a value
-    if (isString(phone_number)) {
+    if (isString(phone_number) && phone_number !== EMPTY_STRING) {
         const { country_code } = formValues;
         return {
             ...userAttributes,
@@ -4461,13 +4462,13 @@ function signUpActor({ services }) {
             async federatedSignIn(_, { data }) {
                 return auth.signInWithRedirect(data);
             },
-            async handleSignUp(context, _event) {
+            async handleSignUp(context) {
                 const { formValues, loginMechanisms, username } = context;
                 const loginMechanism = loginMechanisms[0];
                 const input = getSignUpInput(username, formValues, loginMechanism);
                 return services.handleSignUp(input);
             },
-            async validateSignUp(context, _event) {
+            async validateSignUp(context) {
                 // This needs to exist in the machine to reference new `services`
                 return runValidators(context.formValues, context.touched, context.passwordSettings, [
                     // Validation of password
@@ -5388,13 +5389,7 @@ const button = {
                 backgroundColor: { value: '{colors.blue.10.value}' },
                 color: { value: '{colors.blue.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.blue.100.value}',
-                    },
+                    value: '{components.fieldcontrol.info._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5417,13 +5412,7 @@ const button = {
                 backgroundColor: { value: '{colors.orange.10.value}' },
                 color: { value: '{colors.orange.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.orange.100.value}',
-                    },
+                    value: '{components.fieldcontrol.warning._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5446,13 +5435,7 @@ const button = {
                 backgroundColor: { value: '{colors.green.10.value}' },
                 color: { value: '{colors.green.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.green.100.value}',
-                    },
+                    value: '{components.fieldcontrol.success._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5475,13 +5458,7 @@ const button = {
                 backgroundColor: { value: '{colors.red.10.value}' },
                 color: { value: '{colors.red.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.red.100.value}',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5504,13 +5481,7 @@ const button = {
                 backgroundColor: { value: '{colors.overlay.5.value}' },
                 color: { value: '{colors.neutral.90.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.overlay.90.value}',
-                    },
+                    value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5566,13 +5537,7 @@ const button = {
                 backgroundColor: { value: '{colors.blue.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.blue.100.value}',
-                    },
+                    value: '{components.fieldcontrol.info._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5595,13 +5560,7 @@ const button = {
                 backgroundColor: { value: '{colors.orange.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.orange.100.value}',
-                    },
+                    value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5624,13 +5583,7 @@ const button = {
                 backgroundColor: { value: '{colors.red.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.red.100.value}',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5653,13 +5606,7 @@ const button = {
                 backgroundColor: { value: '{colors.green.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.green.100.value}',
-                    },
+                    value: '{components.fieldcontrol.success._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5682,13 +5629,7 @@ const button = {
                 backgroundColor: { value: '{colors.overlay.90.value}' },
                 color: { value: '{colors.font.inverse.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.overlay.90.value}',
-                    },
+                    value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5766,13 +5707,7 @@ const button = {
                 backgroundColor: { value: '{colors.blue.10.value}' },
                 color: { value: '{colors.blue.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.blue.100.value}',
-                    },
+                    value: '{components.fieldcontrol.info._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5795,13 +5730,7 @@ const button = {
                 backgroundColor: { value: '{colors.orange.10.value}' },
                 color: { value: '{colors.orange.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.orange.100.value}',
-                    },
+                    value: '{components.fieldcontrol.warning._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5824,13 +5753,7 @@ const button = {
                 backgroundColor: { value: '{colors.green.10.value}' },
                 color: { value: '{colors.green.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.green.100.value}',
-                    },
+                    value: '{components.fieldcontrol.success._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5853,13 +5776,7 @@ const button = {
                 backgroundColor: { value: '{colors.red.10.value}' },
                 color: { value: '{colors.red.100.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.red.100.value}',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -5882,13 +5799,7 @@ const button = {
                 backgroundColor: { value: '{colors.overlay.5.value}' },
                 color: { value: '{colors.overlay.90.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '1px',
-                        color: '{colors.overlay.90.value}',
-                    },
+                    value: '{components.fieldcontrol.overlay._focus.boxShadow.value}',
                 },
             },
             _active: {
@@ -6056,16 +5967,8 @@ const checkbox = {
             outlineStyle: { value: 'solid' },
             outlineWidth: { value: '{outlineWidths.medium.value}' },
             outlineOffset: { value: '{outlineOffsets.medium.value}' },
-            borderColor: { value: '{colors.transparent.value}' },
-            boxShadow: {
-                value: {
-                    offsetX: '0px',
-                    offsetY: '0px',
-                    blurRadius: '0px',
-                    spreadRadius: '2px',
-                    color: '{colors.border.focus.value}',
-                },
-            },
+            borderColor: { value: '{colors.border.focus.value}' },
+            boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
         },
         _disabled: {
             borderColor: { value: '{colors.border.disabled.value}' },
@@ -6073,15 +5976,9 @@ const checkbox = {
         _error: {
             borderColor: { value: '{colors.border.error.value}' },
             _focus: {
-                borderColor: { value: '{colors.transparent.value}' },
+                borderColor: { value: '{colors.border.error.value}' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '0px',
-                        blurRadius: '0px',
-                        spreadRadius: '2px',
-                        color: '{colors.border.error.value}',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
         },
@@ -6410,47 +6307,38 @@ const fieldcontrol = {
         borderBlockStart: { value: 'none' },
         borderRadius: { value: '0' },
         _focus: {
-            borderBlockEndColor: { value: '{colors.border.focus.value}' },
+            borderBlockEndColor: { value: 'transparent' },
             boxShadow: {
-                value: {
-                    offsetX: '0px',
-                    offsetY: '1px',
-                    color: '{colors.border.focus.value}',
-                    blurRadius: '0px',
-                },
+                value: '{components.fieldcontrol._focus.boxShadow.value}',
             },
         },
         _error: {
             borderBlockEndColor: { value: '{colors.border.error.value}' },
             _focus: {
+                borderBlockEndColor: { value: 'transparent' },
                 boxShadow: {
-                    value: {
-                        offsetX: '0px',
-                        offsetY: '1px',
-                        color: '{colors.border.error.value}',
-                        blurRadius: '0px',
-                    },
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                 },
             },
         },
     },
     _focus: {
         // These focus styles have been calibrated to create
-        // a highly visible focus indicator per WCAG 2.1 guidliness:
-        // See: https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html
+        // a highly visible focus indicator per WCAG 2.2 guidlines:
+        // See: https://www.w3.org/TR/WCAG22/#focus-appearance
         //
         // Key features:
-        // * Focus indicator area is at least the 1 CSS px border around the component.
-        // * Contrast between focused and unfocused states has a ratio of 3:1
+        // * Focus indicator area is at least the 2 CSS px perimeter around the component.
+        // * Contrast between focused and unfocused area of contrast has a ratio of 3:1
         //
-        // IMPORTANT: Must recalibrate if `colors.border.primary` or `colors.focus` are changed
+        // IMPORTANT: Must recalibrate if `colors.border.focus` are changed
         borderColor: { value: '{colors.border.focus.value}' },
         boxShadow: {
             value: {
                 offsetX: '0px',
                 offsetY: '0px',
                 blurRadius: '0px',
-                spreadRadius: '1px',
+                spreadRadius: '2px',
                 color: '{colors.border.focus.value}',
             },
         },
@@ -6470,12 +6358,64 @@ const fieldcontrol = {
                     offsetX: '0px',
                     offsetY: '0px',
                     blurRadius: '0px',
-                    spreadRadius: '1px',
+                    spreadRadius: '2px',
                     color: '{colors.border.error.value}',
                 },
             },
         },
     },
+    info: {
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.blue.100.value}',
+                },
+            },
+        },
+    },
+    warning: {
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.orange.100.value}',
+                },
+            },
+        },
+    },
+    success: {
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.green.100.value}',
+                },
+            },
+        },
+    },
+    overlay: {
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.overlay.90.value}',
+                },
+            },
+        },
+    },
 };
 
 const fieldgroup = {
@@ -7156,15 +7096,7 @@ const sliderfield = {
         },
         _focus: {
             borderColor: { value: '{colors.border.focus.value}' },
-            boxShadow: {
-                value: {
-                    offsetX: '0',
-                    offsetY: '0',
-                    blurRadius: '0',
-                    spreadRadius: '2px',
-                    color: '{colors.border.focus.value}',
-                },
-            },
+            boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
         },
     },
     small: {
@@ -7322,13 +7254,7 @@ const switchfield = {
     },
     _focused: {
         shadow: {
-            value: {
-                offsetX: '0px',
-                offsetY: '0px',
-                blurRadius: '0px',
-                spreadRadius: '2px',
-                color: '{colors.border.focus.value}',
-            },
+            value: '{components.fieldcontrol._focus.boxShadow.value}',
         },
     },
     // Sizes

package/dist/styles/base.css

@@ -167,7 +167,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
   --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);
@@ -180,7 +180,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
   --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);
@@ -193,7 +193,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
   --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);
@@ -206,7 +206,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --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);
@@ -219,7 +219,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
   --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);
@@ -253,7 +253,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
   --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);
@@ -266,7 +266,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
   --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);
@@ -279,7 +279,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --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);
@@ -292,7 +292,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
   --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);
@@ -305,7 +305,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
   --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);
@@ -348,7 +348,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
   --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);
@@ -361,7 +361,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
   --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);
@@ -374,7 +374,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
   --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);
@@ -387,7 +387,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --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);
@@ -400,7 +400,7 @@
   --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-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
   --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);
@@ -493,12 +493,12 @@
   --amplify-components-checkbox-button-focus-outline-style: solid;
   --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
   --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
-  --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
-  --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
+  --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
+  --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
   --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
   --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
-  --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
-  --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
+  --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
+  --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80);
   --amplify-components-checkbox-icon-border-radius: 20%;
   --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
@@ -627,19 +627,24 @@
   --amplify-components-fieldcontrol-quiet-border-inline-end: none;
   --amplify-components-fieldcontrol-quiet-border-block-start: none;
   --amplify-components-fieldcontrol-quiet-border-radius: 0;
-  --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: 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: transparent;
+  --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
   --amplify-components-fieldcontrol-quiet-error-border-block-end-color: 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-focus-border-block-end-color: transparent;
+  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
   --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
-  --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
+  --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
   --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
   --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
   --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-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-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
+  --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100);
+  --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100);
+  --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100);
+  --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90);
   --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
   --amplify-components-fieldgroup-vertical-align-items: center;
   --amplify-components-fieldgroup-outer-align-items: center;
@@ -985,7 +990,7 @@
   --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
-  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
+  --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
   --amplify-components-sliderfield-small-track-height: 0.25rem;
   --amplify-components-sliderfield-small-thumb-width: 1rem;
   --amplify-components-sliderfield-small-thumb-height: 1rem;
@@ -1069,7 +1074,7 @@
   --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
   --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
   --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
-  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
+  --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
   --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
   --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
   --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);