New tokens for customizable focus rings

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')};
+    box-shadow: ${dt('autocomplete.focus.ring.shadow')};
-    outline: 0 none;
+    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 {

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')};
+    box-shadow: ${dt('inputtext.focus.ring.shadow')};
-    outline: 0 none;
+    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 {

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')};
+    box-shadow: ${dt('textarea.focus.ring.shadow')};
-    outline: 0 none;
+    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 {

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}',

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)',
+                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
-                    focusShadow: 'none'
                 },
                 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)',
+                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
-                    focusShadow: 'none'
                 },
                 text: {
                     color: '{surface.0}',

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}'
+        }
     }
 };

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}'
+        }
     }
 };

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}',

components/lib/themes/lara/index.js

@@ -119,10 +119,10 @@ export default {
     semantic: {
         transitionDuration: '0.2s',
         focusRing: {
-            width: '1px',
+            width: '0',
-            style: 'solid',
+            style: 'none',
-            color: '{primary.500}',
+            color: 'transparent',
-            offset: '2px'
+            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',
+                    shadow: 'none'
-                    focusShadow: '0 0 0 0.2rem {primary.200}'
                 },
                 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',
+                    shadow: 'none'
-                    focusShadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
                 },
                 text: {
                     color: '{surface.0}',

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}'
+        }
     }
 };

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}'
+        }
     }
 };