Fixed focus visual on InputChips

components/lib/inputchips/style/InputChipsStyle.js

@@ -58,6 +58,12 @@ const theme = ({ dt }) => `
     padding-top: calc(${dt('inputchips.padding.y')} / 2);
     padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
     border-radius: ${dt('inputchips.chip.border.radius')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')};
+}
+
+.p-inputchips-chip.p-focus .p-chip {
+    background: ${dt('inputchips.chip.focus.background')};
+    color: ${dt('inputchips.chip.focus.color')};
 }
 
 .p-inputchips-input:has(.p-chip) {

components/lib/themes/aura/chip/index.js

@@ -36,7 +36,7 @@ export default {
         },
         dark: {
             root: {
-                background: '{surface.700}',
+                background: '{surface.800}',
                 color: '{surface.0}'
             },
             icon: {

components/lib/themes/aura/inputchips/index.js

@@ -25,5 +25,19 @@ export default {
     },
     chip: {
         borderRadius: '{border.radius.sm}'
+    },
+    colorScheme: {
+        light: {
+            chip: {
+                focusBackground: '{surface.200}',
+                color: '{surface.800}'
+            }
+        },
+        dark: {
+            chip: {
+                focusBackground: '{surface.700}',
+                color: '{surface.0}'
+            }
+        }
     }
 };

components/lib/themes/lara/chip/index.js

@@ -36,7 +36,7 @@ export default {
         },
         dark: {
             root: {
-                background: '{surface.700}',
+                background: '{surface.800}',
                 color: '{surface.0}'
             },
             icon: {

components/lib/themes/lara/inputchips/index.js

@@ -25,5 +25,19 @@ export default {
     },
     chip: {
         borderRadius: '{border.radius.xs}'
+    },
+    colorScheme: {
+        light: {
+            chip: {
+                focusBackground: '{surface.200}',
+                color: '{surface.800}'
+            }
+        },
+        dark: {
+            chip: {
+                focusBackground: '{surface.700}',
+                color: '{surface.0}'
+            }
+        }
     }
 };

components/lib/themes/nora/chip/index.js

@@ -36,7 +36,7 @@ export default {
         },
         dark: {
             root: {
-                background: '{surface.700}',
+                background: '{surface.800}',
                 color: '{surface.0}'
             },
             icon: {

components/lib/themes/nora/inputchips/index.js

@@ -25,5 +25,19 @@ export default {
     },
     chip: {
         borderRadius: '{border.radius.sm}'
+    },
+    colorScheme: {
+        light: {
+            chip: {
+                focusBackground: '{surface.200}',
+                color: '{surface.800}'
+            }
+        },
+        dark: {
+            chip: {
+                focusBackground: '{surface.700}',
+                color: '{surface.0}'
+            }
+        }
     }
 };