From b937a11d2e9c4daf6080bc9140d85d8941911b2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Thu, 18 Sep 2025 14:57:39 +0200
Subject: [PATCH] fix(ui): add smooth border animations and improve SearchField
 styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
---
 packages/ui/css/styles.css                    | 27 ++++++++++++++---
 .../SearchField/SearchField.styles.css        | 30 +++++++++++++++----
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index 6fbc7be3a5..8aa99175b3 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -10564,14 +10564,33 @@
           opacity: 0;
         }
       }
+
+      & .bui-InputWrapper {
+        & .bui-Input[data-icon] {
+          padding-right: 0;
+        }
+      }
     }
   }
 }
 
 .bui-SearchField .bui-Input {
-  padding-left: var(--bui-space-6);
-  padding-right: var(--bui-space-1);
-  transition: padding .3s ease-in-out;
+  transition: padding .3s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out;
+
+  &[data-hovered] {
+    border-color: var(--bui-border-hover);
+  }
+
+  &[data-focused] {
+    border-color: var(--bui-border-pressed);
+    outline-width: 0;
+  }
+}
+
+.bui-SearchField .bui-InputWrapper {
+  & .bui-Input[data-icon] {
+    padding-right: var(--bui-space-6);
+  }
 }
 
 .bui-SearchField .bui-InputIcon {
@@ -10580,7 +10599,7 @@
   left: 0;
 
   &[data-size="small"] {
-    width: var(--bui-space-9);
+    width: var(--bui-space-8);
   }
 
   &[data-size="medium"] {
diff --git a/packages/ui/src/components/SearchField/SearchField.styles.css b/packages/ui/src/components/SearchField/SearchField.styles.css
index 2a505e5f14..b56bc0efd5 100644
--- a/packages/ui/src/components/SearchField/SearchField.styles.css
+++ b/packages/ui/src/components/SearchField/SearchField.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
- .bui-SearchField {
+.bui-SearchField {
   flex: 1;
   flex-shrink: 0;
 
@@ -60,14 +60,34 @@
           opacity: 0;
         }
       }
+
+      .bui-InputWrapper {
+        .bui-Input[data-icon] {
+          padding-right: 0px;
+        }
+      }
     }
   }
 }
 
 .bui-SearchField .bui-Input {
-  padding-left: var(--bui-space-6);
-  padding-right: var(--bui-space-1);
-  transition: padding 0.3s ease-in-out;
+
+  transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
+
+  &[data-hovered] {
+    border-color: var(--bui-border-hover);
+  }
+
+  &[data-focused] {
+    border-color: var(--bui-border-pressed);
+    outline-width: 0px;
+  }
+}
+
+.bui-SearchField .bui-InputWrapper {
+  .bui-Input[data-icon] {
+    padding-right: var(--bui-space-6);
+  }
 }
 
 .bui-SearchField .bui-InputIcon {
@@ -76,7 +96,7 @@
   justify-content: center;
 
   &[data-size='small'] {
-    width: var(--bui-space-9);
+    width: var(--bui-space-8);
   }
 
   &[data-size='medium'] {