From bcbb6eb6b8c7a83b35d24b3472ee8df3c63c79a7 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Thu, 19 Mar 2026 11:59:09 +0100
Subject: [PATCH] fix(ui): make SearchAutocomplete background-aware

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/easy-pens-judge.md                        |  7 +++++++
 packages/ui/report.api.md                            |  1 +
 .../SearchAutocomplete/SearchAutocomplete.module.css | 12 ++++++++++++
 .../SearchAutocomplete/SearchAutocomplete.tsx        |  2 +-
 .../src/components/SearchAutocomplete/definition.ts  |  1 +
 5 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/easy-pens-judge.md

diff --git a/.changeset/easy-pens-judge.md b/.changeset/easy-pens-judge.md
new file mode 100644
index 0000000000..fe9dde7665
--- /dev/null
+++ b/.changeset/easy-pens-judge.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Made `SearchAutocomplete` background-aware. The input now adapts its background color based on its parent container's background level.
+
+**Affected components:** SearchAutocomplete
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 364592a6ff..511074f8bb 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -2159,6 +2159,7 @@ export const SearchAutocompleteDefinition: {
   readonly styles: {
     readonly [key: string]: string;
   };
+  readonly bg: 'consumer';
   readonly classNames: {
     readonly root: 'bui-SearchAutocomplete';
     readonly searchField: 'bui-SearchAutocompleteSearchField';
diff --git a/packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.module.css b/packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.module.css
index ca6de73402..5eccb188ed 100644
--- a/packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.module.css
+++ b/packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.module.css
@@ -38,6 +38,18 @@
       --search-autocomplete-item-height: 2.5rem;
       height: 2.5rem;
     }
+
+    &[data-on-bg='neutral-1'] {
+      background-color: var(--bui-bg-neutral-2);
+    }
+
+    &[data-on-bg='neutral-2'] {
+      background-color: var(--bui-bg-neutral-3);
+    }
+
+    &[data-on-bg='neutral-3'] {
+      background-color: var(--bui-bg-neutral-4);
+    }
   }
 
   .bui-SearchAutocompleteSearchField {
diff --git a/packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.tsx b/packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.tsx
index d8c4640e26..5fd63661f4 100644
--- a/packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.tsx
+++ b/packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.tsx
@@ -124,7 +124,7 @@ export function SearchAutocomplete(props: SearchAutocompleteProps) {
           <div
             ref={triggerRef}
             className={classes.root}
-            data-size={dataAttributes['data-size']}
+            {...dataAttributes}
             style={style}
           >
             <div aria-hidden="true">
diff --git a/packages/ui/src/components/SearchAutocomplete/definition.ts b/packages/ui/src/components/SearchAutocomplete/definition.ts
index 4a2e47881d..d6204dad6a 100644
--- a/packages/ui/src/components/SearchAutocomplete/definition.ts
+++ b/packages/ui/src/components/SearchAutocomplete/definition.ts
@@ -28,6 +28,7 @@ import styles from './SearchAutocomplete.module.css';
 export const SearchAutocompleteDefinition =
   defineComponent<SearchAutocompleteOwnProps>()({
     styles,
+    bg: 'consumer',
     classNames: {
       root: 'bui-SearchAutocomplete',
       searchField: 'bui-SearchAutocompleteSearchField',