fix(ui): make SearchAutocomplete background-aware

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.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

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';

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 {

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">

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',