From 64fe01343676b39afd457635921f979e91e15424 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 13 May 2024 19:04:12 +0300
Subject: [PATCH] Fixed focus visual on InputChips

---
 components/lib/inputchips/style/InputChipsStyle.js |  6 ++++++
 components/lib/themes/aura/chip/index.js           |  2 +-
 components/lib/themes/aura/inputchips/index.js     | 14 ++++++++++++++
 components/lib/themes/lara/chip/index.js           |  2 +-
 components/lib/themes/lara/inputchips/index.js     | 14 ++++++++++++++
 components/lib/themes/nora/chip/index.js           |  2 +-
 components/lib/themes/nora/inputchips/index.js     | 14 ++++++++++++++
 7 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/components/lib/inputchips/style/InputChipsStyle.js b/components/lib/inputchips/style/InputChipsStyle.js
index 3bded7425..52e009a66 100644
--- a/components/lib/inputchips/style/InputChipsStyle.js
+++ b/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) {
diff --git a/components/lib/themes/aura/chip/index.js b/components/lib/themes/aura/chip/index.js
index e3a382a69..02ec5fe87 100644
--- a/components/lib/themes/aura/chip/index.js
+++ b/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: {
diff --git a/components/lib/themes/aura/inputchips/index.js b/components/lib/themes/aura/inputchips/index.js
index 607905eac..09be9f7f7 100644
--- a/components/lib/themes/aura/inputchips/index.js
+++ b/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}'
+            }
+        }
     }
 };
diff --git a/components/lib/themes/lara/chip/index.js b/components/lib/themes/lara/chip/index.js
index f84a85952..eda7b9a38 100644
--- a/components/lib/themes/lara/chip/index.js
+++ b/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: {
diff --git a/components/lib/themes/lara/inputchips/index.js b/components/lib/themes/lara/inputchips/index.js
index 7ce8e89fd..4c0b7d6ad 100644
--- a/components/lib/themes/lara/inputchips/index.js
+++ b/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}'
+            }
+        }
     }
 };
diff --git a/components/lib/themes/nora/chip/index.js b/components/lib/themes/nora/chip/index.js
index e3a382a69..02ec5fe87 100644
--- a/components/lib/themes/nora/chip/index.js
+++ b/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: {
diff --git a/components/lib/themes/nora/inputchips/index.js b/components/lib/themes/nora/inputchips/index.js
index 607905eac..09be9f7f7 100644
--- a/components/lib/themes/nora/inputchips/index.js
+++ b/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}'
+            }
+        }
     }
 };