fix: Correct alignment of search input, closes #117

BREAKING CHANGE: The default height of the search input is now 36px. Use
the --aa-search-input-height CSS variable to adjust it if needed.

README.md

@@ -87,6 +87,9 @@ The following options are available (defaults are shown below):
   // setting this to "none" will prevent the default CSS to be included. The default CSS
   // comes from autocomplete-theme-classic, which you can read more about here:
   // https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic/
+  // When you want to overwrite CSS variables defined by the default theme, make sure to suffix your
+  // overwrites with `!important`, because they might otherwise not be applied as expected. See the
+  // following comment for more information: https://github.com/cmfcmf/docusaurus-search-local/issues/107#issuecomment-1119831938.
   style: undefined,
 
   // lunr.js-specific settings

packages/docusaurus-search-local/src/client/theme/SearchBar/index.css

@@ -1,5 +1,5 @@
-.dsla-search-wrapper {
-  margin-left: var(--aa-spacing);
+:root {
+  --aa-search-input-height: 36px;
 }
 
 body.dark,

packages/docusaurus-search-local/src/server/index.ts

@@ -174,7 +174,7 @@ export default function cmfcmfDocusaurusSearchLocal(
     "// THIS FILE IS AUTOGENERATED\n" + "// DO NOT EDIT THIS FILE!\n\n";
 
   if (style !== "none") {
-    generated += 'require("@algolia/autocomplete-theme-classic");\n';
+    generated += 'import "@algolia/autocomplete-theme-classic";\n';
     generated += 'import "./index.css";\n';
   }