diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index 96d0f55fa..0bbf80b03 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -159,8 +159,9 @@ const theme = ({ dt }) => `
 
 .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
     border-color: ${dt('autocomplete.focus.border.color')};
-    box-shadow: ${dt('autocomplete.focus.shadow')};
-    outline: 0 none;
+    box-shadow: ${dt('autocomplete.focus.ring.shadow')};
+    outline: ${dt('autocomplete.focus.ring.width')} ${dt('autocomplete.focus.ring.style')} ${dt('autocomplete.focus.ring.color')};
+    outline-offset: ${dt('autocomplete.focus.ring.offset')};
 }
 
 .p-autocomplete.p-invalid .p-autocomplete-input-multiple {
diff --git a/components/lib/inputtext/style/InputTextStyle.js b/components/lib/inputtext/style/InputTextStyle.js
index dbd7c893d..5378ea8cf 100644
--- a/components/lib/inputtext/style/InputTextStyle.js
+++ b/components/lib/inputtext/style/InputTextStyle.js
@@ -22,8 +22,9 @@ const theme = ({ dt }) => `
 
 .p-inputtext:enabled:focus {
     border-color: ${dt('inputtext.focus.border.color')};
-    box-shadow: ${dt('inputtext.focus.shadow')};
-    outline: 0 none;
+    box-shadow: ${dt('inputtext.focus.ring.shadow')};
+    outline: ${dt('inputtext.focus.ring.width')} ${dt('inputtext.focus.ring.style')} ${dt('inputtext.focus.ring.color')};
+    outline-offset: ${dt('inputtext.focus.ring.offset')};
 }
 
 .p-inputtext.p-invalid {
diff --git a/components/lib/textarea/style/TextareaStyle.js b/components/lib/textarea/style/TextareaStyle.js
index 37d93ba9c..7f388fe90 100644
--- a/components/lib/textarea/style/TextareaStyle.js
+++ b/components/lib/textarea/style/TextareaStyle.js
@@ -22,8 +22,9 @@ const theme = ({ dt }) => `
 
 .p-inputtextarea:enabled:focus {
     border-color: ${dt('textarea.focus.border.color')};
-    box-shadow: ${dt('textarea.focus.shadow')};
-    outline: 0 none;
+    box-shadow: ${dt('textarea.focus.ring.shadow')};
+    outline: ${dt('textarea.focus.ring.width')} ${dt('textarea.focus.ring.style')} ${dt('textarea.focus.ring.color')};
+    outline-offset: ${dt('textarea.focus.ring.offset')};
 }
 
 .p-inputtextarea.p-invalid {
diff --git a/components/lib/themes/aura/autocomplete/index.js b/components/lib/themes/aura/autocomplete/index.js
index f17f51e27..66883e42d 100644
--- a/components/lib/themes/aura/autocomplete/index.js
+++ b/components/lib/themes/aura/autocomplete/index.js
@@ -12,10 +12,16 @@ export default {
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
         shadow: '{form.field.shadow}',
-        focusShadow: '{form.field.focus.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
-        borderRadius: '{form.field.border.radius}'
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     },
     overlay: {
         background: '{overlay.select.background}',
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index d4d5e49fc..22d42fcfe 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -121,7 +121,7 @@ export default {
         focusRing: {
             width: '1px',
             style: 'solid',
-            color: '{primary.500}',
+            color: '{primary.color}',
             offset: '2px'
         },
         anchorGutter: '2px',
@@ -141,7 +141,14 @@ export default {
         formField: {
             paddingX: '0.75rem',
             paddingY: '0.5rem',
-            borderRadius: '{border.radius.md}'
+            borderRadius: '{border.radius.md}',
+            focusRing: {
+                width: '0',
+                style: 'none',
+                color: 'transparent',
+                offset: '0',
+                shadow: 'none'
+            }
         },
         list: {
             padding: '0.25rem 0.25rem',
@@ -199,8 +206,7 @@ export default {
                     floatLabelFocusColor: '{surface.500}',
                     floatLabelInvalidColor: '{red.400}',
                     iconColor: '{surface.400}',
-                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
-                    focusShadow: 'none'
+                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 },
                 text: {
                     color: '{surface.700}',
@@ -306,8 +312,7 @@ export default {
                     floatLabelFocusColor: '{surface.400}',
                     floatLabelInvalidColor: '{red.300}',
                     iconColor: '{surface.400}',
-                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
-                    focusShadow: 'none'
+                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 },
                 text: {
                     color: '{surface.0}',
diff --git a/components/lib/themes/aura/inputtext/index.js b/components/lib/themes/aura/inputtext/index.js
index 40f295d51..b1ed3815c 100644
--- a/components/lib/themes/aura/inputtext/index.js
+++ b/components/lib/themes/aura/inputtext/index.js
@@ -12,9 +12,15 @@ export default {
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
         shadow: '{form.field.shadow}',
-        focusShadow: '{form.field.focus.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
-        borderRadius: '{form.field.border.radius}'
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     }
 };
diff --git a/components/lib/themes/aura/textarea/index.js b/components/lib/themes/aura/textarea/index.js
index 40f295d51..b1ed3815c 100644
--- a/components/lib/themes/aura/textarea/index.js
+++ b/components/lib/themes/aura/textarea/index.js
@@ -12,9 +12,15 @@ export default {
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
         shadow: '{form.field.shadow}',
-        focusShadow: '{form.field.focus.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
-        borderRadius: '{form.field.border.radius}'
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     }
 };
diff --git a/components/lib/themes/lara/autocomplete/index.js b/components/lib/themes/lara/autocomplete/index.js
index a6c90bd67..19d984b4f 100644
--- a/components/lib/themes/lara/autocomplete/index.js
+++ b/components/lib/themes/lara/autocomplete/index.js
@@ -12,10 +12,16 @@ export default {
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
         shadow: '{form.field.shadow}',
-        focusShadow: '{form.field.focus.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
-        borderRadius: '{form.field.border.radius}'
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     },
     overlay: {
         background: '{overlay.select.background}',
diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js
index fd27f0dc0..a62a3dd8d 100644
--- a/components/lib/themes/lara/index.js
+++ b/components/lib/themes/lara/index.js
@@ -119,10 +119,10 @@ export default {
     semantic: {
         transitionDuration: '0.2s',
         focusRing: {
-            width: '1px',
-            style: 'solid',
-            color: '{primary.500}',
-            offset: '2px'
+            width: '0',
+            style: 'none',
+            color: 'transparent',
+            offset: '0'
         },
         anchorGutter: '2px',
         primary: {
@@ -141,7 +141,14 @@ export default {
         formField: {
             paddingX: '0.75rem',
             paddingY: '0.625rem',
-            borderRadius: '{border.radius.sm}'
+            borderRadius: '{border.radius.sm}',
+            focusRing: {
+                width: '{focus.ring.width}',
+                style: '{focus.ring.style}',
+                color: '{focus.ring.color}',
+                offset: '{focus.ring.offset}',
+                shadow: '{focus.ring.shadow}'
+            }
         },
         list: {
             padding: '0.5rem 0',
@@ -182,6 +189,9 @@ export default {
                     color: '{primary.700}',
                     focusColor: '{primary.800}'
                 },
+                focusRing: {
+                    shadow: '0 0 0 0.2rem {primary.200}'
+                },
                 maskBackground: 'rgba(0,0,0,0.4)',
                 formField: {
                     background: '{surface.0}',
@@ -199,8 +209,7 @@ export default {
                     floatLabelFocusColor: '{surface.500}',
                     floatLabelInvalidColor: '{red.400}',
                     iconColor: '{surface.400}',
-                    shadow: 'none',
-                    focusShadow: '0 0 0 0.2rem {primary.200}'
+                    shadow: 'none'
                 },
                 text: {
                     color: '{surface.700}',
@@ -289,6 +298,9 @@ export default {
                     color: 'rgba(255,255,255,.87)',
                     focusColor: 'rgba(255,255,255,.87)'
                 },
+                focusRing: {
+                    shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
+                },
                 maskBackground: 'rgba(0,0,0,0.4)',
                 formField: {
                     background: '{surface.950}',
@@ -296,7 +308,7 @@ export default {
                     filledBackground: '{surface.800}',
                     filledFocusBackground: '{surface.950}',
                     borderColor: '{surface.700}',
-                    hoverBorderColor: '{surface.600}',
+                    hoverBorderColor: '{primary.color}',
                     focusBorderColor: '{primary.color}',
                     invalidBorderColor: '{red.300}',
                     color: '{surface.0}',
@@ -306,8 +318,7 @@ export default {
                     floatLabelFocusColor: '{surface.400}',
                     floatLabelInvalidColor: '{red.300}',
                     iconColor: '{surface.400}',
-                    shadow: 'none',
-                    focusShadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
+                    shadow: 'none'
                 },
                 text: {
                     color: '{surface.0}',
diff --git a/components/lib/themes/lara/inputtext/index.js b/components/lib/themes/lara/inputtext/index.js
index 40f295d51..b1ed3815c 100644
--- a/components/lib/themes/lara/inputtext/index.js
+++ b/components/lib/themes/lara/inputtext/index.js
@@ -12,9 +12,15 @@ export default {
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
         shadow: '{form.field.shadow}',
-        focusShadow: '{form.field.focus.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
-        borderRadius: '{form.field.border.radius}'
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     }
 };
diff --git a/components/lib/themes/lara/textarea/index.js b/components/lib/themes/lara/textarea/index.js
index 40f295d51..b1ed3815c 100644
--- a/components/lib/themes/lara/textarea/index.js
+++ b/components/lib/themes/lara/textarea/index.js
@@ -12,9 +12,15 @@ export default {
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
         shadow: '{form.field.shadow}',
-        focusShadow: '{form.field.focus.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
-        borderRadius: '{form.field.border.radius}'
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     }
 };