From c80cd13c8e3273b79c292bc9ada1463ab6a25c5d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 29 Nov 2022 17:00:43 -0800
Subject: [PATCH] add search modal styling

---
 src/theme/search.css | 85 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/src/theme/search.css b/src/theme/search.css
index b81a202509..03946250bc 100644
--- a/src/theme/search.css
+++ b/src/theme/search.css
@@ -33,3 +33,88 @@
   flex: 1;
 }
 
+/* Algolia search modal styling */
+.DocSearch-Search-Icon *,
+.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper svg,
+.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper span,
+.DocSearch-Hit-title mark,
+.DocSearch-Prefill {
+  color: var(--chakra-colors-primary);
+}
+
+.DocSearch-Logo {
+  text-transform: uppercase;
+}
+
+.DocSearch-Commands kbd {
+  background: var(--chakra-colors-button-bg);
+  border: 1px solid var(--chakra-colors-primary);
+  border-radius: 0;
+  color: var(--chakra-colors-primary);
+  box-shadow: none;
+}
+
+.DocSearch-Footer {
+  background: var(--chakra-colors-bg);
+}
+
+svg[aria-label="Algolia"] * {
+  fill: var(--chakra-colors-body);
+}
+
+.DocSearch-Modal {
+  border-radius: 0;
+  background: var(--chakra-colors-bg);
+}
+
+.DocSearch-Form {
+  box-shadow: inset 0 0 0 2px var(--chakra-colors-primary);
+  background: var(--chakra-colors-secondary);
+  border-radius: 0;
+}
+
+.DocSearch-Hit[aria-selected="true"] a {
+  background: var(--chakra-colors-secondary);
+  color: var(--chakra-colors-button-bg);
+}
+
+.DocSearch-Hit[aria-selected="false"] a {
+  background: var(--chakra-colors-button-bg);
+}
+
+.DocSearch-Hit[aria-selected="false"] > a > div > div.DocSearch-Hit-icon > svg > path {
+  color: var(--chakra-colors-body);
+}
+
+.DocSearch-Hit-source,
+.DocSearch-Label {
+  color: var(--chakra-colors-body);
+  font-family: var(--chakra-fonts-heading);
+  letter-spacing: 0.02em;
+  font-weight: 400;
+}
+
+.DocSearch-Hit-source {
+  background: var(--chakra-colors-bg);
+  padding-block: var(--chakra-space-2);
+}
+
+.DocSearch-Input,
+.DocSearch-Input::placeholder,
+.DocSearch-Form > label > svg > path,
+.DocSearch-Reset {
+  color: var(--chakra-colors-bg);
+}
+
+.DocSearch-Input::placeholder {
+  font-style: italic;
+  font-size: var(--chakra-fontSizes-md)
+}
+
+.DocSearch-Hit {
+  padding-bottom: var(--chakra-space-2);
+}
+
+.DocSearch-Hit a {
+  border-radius: 0;
+}