From 928e5abddafb5d83c19e04bbc9bd9c5b81c04153 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Thu, 17 Aug 2023 12:34:40 -0700
Subject: [PATCH] chore: pagefind styles

---
 src/_includes/partials/post-tags.liquid |  2 +-
 tailwind.css                            | 26 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/_includes/partials/post-tags.liquid b/src/_includes/partials/post-tags.liquid
index 4dc74d79..d2929e12 100644
--- a/src/_includes/partials/post-tags.liquid
+++ b/src/_includes/partials/post-tags.liquid
@@ -4,7 +4,7 @@
       <a href="/tags/{{ tag }}">
         <div
           class="tag--button tag--button__small"
-          data-pagefind-filter="tag">{{ tag }}</div>
+          data-pagefind-filter="tags">{{ tag }}</div>
       </a>
     {% endif %}
   {% endfor %}
diff --git a/tailwind.css b/tailwind.css
index e6e21c29..8b6d5d81 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -2,6 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  --pagefind-ui-scale: 1.1;
+  --pagefind-ui-primary: theme(colors.purple.600);
+  --pagefind-ui-text: theme(colors.gray.800);
+  --pagefind-ui-background: theme(colors.white);
+  --pagefind-ui-border: theme(colors.gray.200);
+  --pagefind-ui-tag: theme(colors.gray.200);
+  --pagefind-ui-border-width: 2px;
+  --pagefind-ui-border-radius: 8px;
+  --pagefind-ui-image-border-radius: 8px;
+  --pagefind-ui-image-box-ratio: 3 / 2;
+  --pagefind-ui-font: sans-serif;
+}
+
+body, html {
+  color: theme(colors.gray.900)
+}
+
 ::-moz-selection {
   color: theme(colors.white);
   background: theme(colors.pink.500);
@@ -141,6 +159,14 @@ code[class*=language-], pre[class*=language-] {
 }
 
 @media (prefers-color-scheme: dark) {
+  body {
+    --pagefind-ui-primary: theme(colors.purple.400);
+    --pagefind-ui-text: theme(colors.white);
+    --pagefind-ui-background: theme(colors.gray.900);
+    --pagefind-ui-border: theme(colors.gray.700);
+    --pagefind-ui-tag: theme(colors.gray.700);
+  }
+
   .active,
   .active svg {
     color: theme(colors.teal.300);