fix(docs): refactor search-widget styles to use minimal theme CSS (#6092)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>
Co-authored-by: Sahil <[email protected]>

Author: devin-ai-integration[bot]

packages/search-widget/package.json

@@ -78,6 +78,7 @@
     "lucide-react": "^0.460.0",
     "mini-css-extract-plugin": "^2.9.4",
     "postcss-loader": "^8.2.0",
+    "postcss-nesting": "^13.0.2",
     "react-instantsearch": "^7.15.5",
     "react-markdown": "^9.0.1",
     "sass": "^1.97.0",

packages/search-widget/postcss.config.mjs

@@ -1,7 +1,6 @@
+import postcssNesting from "postcss-nesting";
+
 export default {
     // This is duplicated, make sure to keep it in sync with others
-    plugins: {
-        "@tailwindcss/postcss": {},
-        ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
-    }
+    plugins: [postcssNesting(), "@tailwindcss/postcss", ...(process.env.NODE_ENV === "production" ? ["cssnano"] : [])]
 };

packages/search-widget/src/components/search.tsx

@@ -19,7 +19,7 @@ import { useApiRoute } from "@/hooks/useApiRoute";
 import { searchDialogOpenAtom, useConversationId } from "@/state/search";
 import { generateQueryId } from "@/utils/generateQueryId";
 
-import "../styles/desktop.scss";
+import "../styles/search-modal.scss";
 import { atomWithStorageString } from "../utils/atomWithStorageString";
 
 const SEARCH_INDEX = "fern_docs_search";

packages/search-widget/src/styles/desktop.scss

@@ -1,33 +1,33 @@
 :root {
-  --color-background: #fbfffa;
-  --accent-1: #f9fdf8;
-  --accent-2: #f3faf2;
-  --accent-3: #e4f6e3;
-  --accent-4: #d4f1d3;
-  --accent-5: #c0eabf;
-  --accent-6: #a8dfa6;
-  --accent-7: #86d185;
-  --accent-8: #4fbc52;
-  --accent-9: #1ba32a;
-  --accent-10: #009618;
-  --accent-11: #00810c;
-  --accent-12: #1a3e1b;
-  --accent-a1: #51555003;
-  --accent-a2: #19721809;
-  --accent-a3: #07a00618;
-  --accent-a4: #03a60228;
-  --accent-a5: #05a8043d;
-  --accent-a6: #05a10156;
-  --accent-a7: #039e0278;
-  --accent-a8: #009e06af;
-  --accent-a9: #009812e4;
-  --accent-a10: #009618;
-  --accent-a11: #00810c;
-  --accent-a12: #002802e5;
-  --accent-contrast: #fff;
-  --accent-surface: #f1f9f0cc;
-  --accent-indicator: #1ba32a;
-  --accent-track: #1ba32a;
+  --color-background: var(--widget-color-background, #fbfffa);
+  --accent-1: var(--widget-accent-1, #f9fdf8);
+  --accent-2: var(--widget-accent-2, #f3faf2);
+  --accent-3: var(--widget-accent-3, #e4f6e3);
+  --accent-4: var(--widget-accent-4, #d4f1d3);
+  --accent-5: var(--widget-accent-5, #c0eabf);
+  --accent-6: var(--widget-accent-6, #a8dfa6);
+  --accent-7: var(--widget-accent-7, #86d185);
+  --accent-8: var(--widget-accent-8, #4fbc52);
+  --accent-9: var(--widget-accent-9, #1ba32a);
+  --accent-10: var(--widget-accent-10, #009618);
+  --accent-11: var(--widget-accent-11, #00810c);
+  --accent-12: var(--widget-accent-12, #1a3e1b);
+  --accent-a1: var(--widget-accent-a1, #51555003);
+  --accent-a2: var(--widget-accent-a2, #19721809);
+  --accent-a3: var(--widget-accent-a3, #07a00618);
+  --accent-a4: var(--widget-accent-a4, #03a60228);
+  --accent-a5: var(--widget-accent-a5, #05a8043d);
+  --accent-a6: var(--widget-accent-a6, #05a10156);
+  --accent-a7: var(--widget-accent-a7, #039e0278);
+  --accent-a8: var(--widget-accent-a8, #009e06af);
+  --accent-a9: var(--widget-accent-a9, #009812e4);
+  --accent-a10: var(--widget-accent-a10, #009618);
+  --accent-a11: var(--widget-accent-a11, #00810c);
+  --accent-a12: var(--widget-accent-a12, #002802e5);
+  --accent-contrast: var(--widget-accent-contrast, #fff);
+  --accent-surface: var(--widget-accent-surface, #f1f9f0cc);
+  --accent-indicator: var(--widget-accent-indicator, #1ba32a);
+  --accent-track: var(--widget-accent-track, #1ba32a);
 }
 
 @supports (color: color(display-p3 1 1 1)) {