diff --git a/packages/ui/src/components/SearchField/SearchField.module.css b/packages/ui/src/components/SearchField/SearchField.module.css
index 7d083d33fd..b52c313a7d 100644
--- a/packages/ui/src/components/SearchField/SearchField.module.css
+++ b/packages/ui/src/components/SearchField/SearchField.module.css
@@ -39,6 +39,18 @@
       }
     }
 
+    &[data-on-bg='neutral-1'] .bui-SearchFieldInputWrapper {
+      background-color: var(--bui-bg-neutral-2);
+    }
+
+    &[data-on-bg='neutral-2'] .bui-SearchFieldInputWrapper {
+      background-color: var(--bui-bg-neutral-3);
+    }
+
+    &[data-on-bg='neutral-3'] .bui-SearchFieldInputWrapper {
+      background-color: var(--bui-bg-neutral-4);
+    }
+
     &[data-startcollapsed='true'] {
       transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,
         max-width 0.3s ease-in-out;
@@ -94,18 +106,14 @@
     align-items: center;
     border-radius: var(--bui-radius-2);
     background-color: var(--bui-bg-neutral-1);
-    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
+    transition: box-shadow 0.2s ease-in-out;
 
-    .bui-SearchField[data-on-bg='neutral-1'] & {
-      background-color: var(--bui-bg-neutral-2);
+    &:has([data-focused]) {
+      box-shadow: inset 0 0 0 1px var(--bui-ring);
     }
 
-    .bui-SearchField[data-on-bg='neutral-2'] & {
-      background-color: var(--bui-bg-neutral-3);
-    }
-
-    .bui-SearchField[data-on-bg='neutral-3'] & {
-      background-color: var(--bui-bg-neutral-4);
+    &:has([data-invalid]) {
+      box-shadow: inset 0 0 0 1px var(--bui-border-danger);
     }
 
     &[data-size='small'] {
@@ -116,10 +124,6 @@
       height: 2.5rem;
     }
 
-    &[data-invalid] {
-      border-color: var(--bui-fg-danger);
-    }
-
     &[data-disabled] {
       opacity: 0.5;
       cursor: not-allowed;
diff --git a/packages/ui/src/components/TextField/TextField.module.css b/packages/ui/src/components/TextField/TextField.module.css
index 8dcad14191..bfef441f51 100644
--- a/packages/ui/src/components/TextField/TextField.module.css
+++ b/packages/ui/src/components/TextField/TextField.module.css
@@ -23,6 +23,18 @@
     font-family: var(--bui-font-regular);
     width: 100%;
     flex-shrink: 0;
+
+    &[data-on-bg='neutral-1'] .bui-Input {
+      background-color: var(--bui-bg-neutral-2);
+    }
+
+    &[data-on-bg='neutral-2'] .bui-Input {
+      background-color: var(--bui-bg-neutral-3);
+    }
+
+    &[data-on-bg='neutral-3'] .bui-Input {
+      background-color: var(--bui-bg-neutral-4);
+    }
   }
 
   .bui-InputWrapper {
@@ -77,19 +89,6 @@
     border-radius: var(--bui-radius-2);
     border: none;
     background-color: var(--bui-bg-neutral-1);
-
-    .bui-TextField[data-on-bg='neutral-1'] & {
-      background-color: var(--bui-bg-neutral-2);
-    }
-
-    .bui-TextField[data-on-bg='neutral-2'] & {
-      background-color: var(--bui-bg-neutral-3);
-    }
-
-    .bui-TextField[data-on-bg='neutral-3'] & {
-      background-color: var(--bui-bg-neutral-4);
-    }
-
     font-size: var(--bui-font-size-3);
     font-family: var(--bui-font-regular);
     font-weight: var(--bui-font-weight-regular);
@@ -114,7 +113,7 @@
     }
 
     &[data-invalid] {
-      border-color: var(--bui-fg-danger);
+      box-shadow: inset 0 0 0 1px var(--bui-border-danger);
     }
 
     &[data-disabled] {