From 2dcfcee4cb32dbbcb3926a0350c74bab6177f450 Mon Sep 17 00:00:00 2001
From: Tyler <26290074+thegitduck@users.noreply.github.com>
Date: Tue, 11 Mar 2025 23:42:42 -0700
Subject: [PATCH] fix styles

---
 src/components/search.tsx |   6 +-
 src/styles.css            | 250 --------------------------------------
 2 files changed, 3 insertions(+), 253 deletions(-)

diff --git a/src/components/search.tsx b/src/components/search.tsx
index fbaa387..2b8b222 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -90,12 +90,12 @@ export const Searcher = () => {
     <>
       <style>{`
       .listbox-item-${activeIndex} {
-        border-color: rgb(var(--black));
+        border-color: black;
       }
 
       @media (prefers-color-scheme: dark) {
         .listbox-item-${activeIndex} {
-          border-color: rgb(var(--white));
+          border-color: white;
         }
       }
     `}</style>
@@ -225,7 +225,7 @@ export const Searcher = () => {
             {results.results.map((result, index) => (
               <li key={result.id} className="relative isolate">
                 <div
-                  className={`rounded-lg border border-transparent focus:border-white hover:border-white p-3 listbox-item-${index}`}
+                  className={`rounded-lg border border-transparent dark:hover:border-white hover:border-black p-3 listbox-item-${index}`}
                 >
                   <a
                     className="text-lg"
diff --git a/src/styles.css b/src/styles.css
index 70de535..4dc3f1f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -13,50 +13,6 @@
     --font-sans: "Inter", --apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
       Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
       sans-serif;
-    --app-bg: var(--gray1);
-    --cmdk-shadow: 0 16px 70px rgb(0 0 0 / 20%);
-
-    --lowContrast: #ffffff;
-    --highContrast: #000000;
-
-    --gray1: hsl(0, 0%, 99%);
-    --gray2: hsl(0, 0%, 97.3%);
-    --gray3: hsl(0, 0%, 95.1%);
-    --gray4: hsl(0, 0%, 93%);
-    --gray5: hsl(0, 0%, 90.9%);
-    --gray6: hsl(0, 0%, 88.7%);
-    --gray7: hsl(0, 0%, 85.8%);
-    --gray8: hsl(0, 0%, 78%);
-    --gray9: hsl(0, 0%, 56.1%);
-    --gray10: hsl(0, 0%, 52.3%);
-    --gray11: hsl(0, 0%, 43.5%);
-    --gray12: hsl(0, 0%, 9%);
-
-    --grayA1: hsla(0, 0%, 0%, 0.012);
-    --grayA2: hsla(0, 0%, 0%, 0.027);
-    --grayA3: hsla(0, 0%, 0%, 0.047);
-    --grayA4: hsla(0, 0%, 0%, 0.071);
-    --grayA5: hsla(0, 0%, 0%, 0.09);
-    --grayA6: hsla(0, 0%, 0%, 0.114);
-    --grayA7: hsla(0, 0%, 0%, 0.141);
-    --grayA8: hsla(0, 0%, 0%, 0.22);
-    --grayA9: hsla(0, 0%, 0%, 0.439);
-    --grayA10: hsla(0, 0%, 0%, 0.478);
-    --grayA11: hsla(0, 0%, 0%, 0.565);
-    --grayA12: hsla(0, 0%, 0%, 0.91);
-
-    --blue1: hsl(206, 100%, 99.2%);
-    --blue2: hsl(210, 100%, 98%);
-    --blue3: hsl(209, 100%, 96.5%);
-    --blue4: hsl(210, 98.8%, 94%);
-    --blue5: hsl(209, 95%, 90.1%);
-    --blue6: hsl(209, 81.2%, 84.5%);
-    --blue7: hsl(208, 77.5%, 76.9%);
-    --blue8: hsl(206, 81.9%, 65.3%);
-    --blue9: hsl(206, 100%, 50%);
-    --blue10: hsl(208, 100%, 47.3%);
-    --blue11: hsl(211, 100%, 43.2%);
-    --blue12: hsl(211, 100%, 15%);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -67,50 +23,6 @@
       --card-foreground: 250 250 249;
       --border: 63 63 70;
       --accent: 192 132 252;
-
-      --app-bg: var(--gray1);
-
-      --lowContrast: #000000;
-      --highContrast: #ffffff;
-
-      --gray1: hsl(0, 0%, 8.5%);
-      --gray2: hsl(0, 0%, 11%);
-      --gray3: hsl(0, 0%, 13.6%);
-      --gray4: hsl(0, 0%, 15.8%);
-      --gray5: hsl(0, 0%, 17.9%);
-      --gray6: hsl(0, 0%, 20.5%);
-      --gray7: hsl(0, 0%, 24.3%);
-      --gray8: hsl(0, 0%, 31.2%);
-      --gray9: hsl(0, 0%, 43.9%);
-      --gray10: hsl(0, 0%, 49.4%);
-      --gray11: hsl(0, 0%, 62.8%);
-      --gray12: hsl(0, 0%, 93%);
-
-      --grayA1: hsla(0, 0%, 100%, 0);
-      --grayA2: hsla(0, 0%, 100%, 0.026);
-      --grayA3: hsla(0, 0%, 100%, 0.056);
-      --grayA4: hsla(0, 0%, 100%, 0.077);
-      --grayA5: hsla(0, 0%, 100%, 0.103);
-      --grayA6: hsla(0, 0%, 100%, 0.129);
-      --grayA7: hsla(0, 0%, 100%, 0.172);
-      --grayA8: hsla(0, 0%, 100%, 0.249);
-      --grayA9: hsla(0, 0%, 100%, 0.386);
-      --grayA10: hsla(0, 0%, 100%, 0.446);
-      --grayA11: hsla(0, 0%, 100%, 0.592);
-      --grayA12: hsla(0, 0%, 100%, 0.923);
-
-      --blue1: hsl(212, 35%, 9.2%);
-      --blue2: hsl(216, 50%, 11.8%);
-      --blue3: hsl(214, 59.4%, 15.3%);
-      --blue4: hsl(214, 65.8%, 17.9%);
-      --blue5: hsl(213, 71.2%, 20.2%);
-      --blue6: hsl(212, 77.4%, 23.1%);
-      --blue7: hsl(211, 85.1%, 27.4%);
-      --blue8: hsl(211, 89.7%, 34.1%);
-      --blue9: hsl(206, 100%, 50%);
-      --blue10: hsl(209, 100%, 60.6%);
-      --blue11: hsl(210, 100%, 66.1%);
-      --blue12: hsl(206, 98%, 95.8%);
     }
   }
 
@@ -123,165 +35,3 @@
   --font-chalk: Chalkboard, ChalkboardSE-Regular, ChalkboardSE, ChalkDuster,
     Comic Sans MS, comic-sans, sans-serif;
 }
-
-@layer components {
-  .quest-card {
-    @apply bg-[rgb(var(--card))] p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 border border-[rgb(var(--border))];
-  }
-
-  .quest-input {
-    @apply w-full px-4 py-2 rounded-lg border border-[rgb(var(--border))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--accent))] bg-[rgb(var(--card))];
-  }
-
-  .quest-button {
-    @apply px-4 py-2 bg-[rgb(var(--accent))] text-[rgb(var(--card))] rounded-lg hover:opacity-90 transition-colors duration-200 font-medium;
-  }
-}
-
-[cmdk-root] {
-  max-width: 640px;
-  width: 100%;
-  background: rgb(var(--background));
-  border-radius: 8px;
-  overflow: hidden;
-  padding: 0;
-  font-family: var(--font-sans);
-  box-shadow: var(--cmdk-shadow);
-  outline: none;
-
-  .dark & {
-    background: linear-gradient(
-      136.61deg,
-      rgb(39, 40, 43) 13.72%,
-      rgb(45, 46, 49) 74.3%
-    );
-  }
-}
-
-[cmdk-linear-badge] {
-  height: 24px;
-  padding: 0 8px;
-  font-size: 12px;
-  color: var(--gray11);
-  background: var(--gray3);
-  border-radius: 4px;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  margin: 16px 16px 0;
-}
-
-[cmdk-linear-shortcuts] {
-  display: flex;
-  margin-left: auto;
-  gap: 8px;
-
-  kbd {
-    font-family: var(--font-sans);
-    font-size: 13px;
-    color: var(--gray11);
-  }
-}
-
-[cmdk-input] {
-  font-family: var(--font-sans);
-  border: none;
-  width: 100%;
-  font-size: 18px;
-  padding: 20px;
-  outline: none;
-  background: var(--bg);
-  color: var(--gray12);
-  border-bottom: 1px solid var(--gray6);
-  border-radius: 0;
-  caret-color: #6e5ed2;
-  margin: 0;
-
-  &::placeholder {
-    color: var(--gray9);
-  }
-}
-
-[cmdk-item] {
-  content-visibility: auto;
-
-  cursor: pointer;
-  height: 48px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 16px;
-  color: var(--gray12);
-  user-select: none;
-  will-change: background, color;
-  transition: all 150ms ease;
-  transition-property: none;
-  position: relative;
-
-  &[data-selected="true"] {
-    background: var(--gray3);
-
-    svg {
-      color: var(--gray12);
-    }
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      z-index: 123;
-      width: 3px;
-      height: 100%;
-      background: #5f6ad2;
-    }
-  }
-
-  &[data-disabled="true"] {
-    color: var(--gray8);
-    cursor: not-allowed;
-  }
-
-  &:active {
-    transition-property: background;
-    background: var(--gray4);
-  }
-
-  & + [cmdk-item] {
-    margin-top: 4px;
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-    color: var(--gray10);
-  }
-}
-
-[cmdk-list] {
-  height: min(300px, var(--cmdk-list-height));
-  max-height: 400px;
-  overflow: auto;
-  overscroll-behavior: contain;
-  transition: 100ms ease;
-  transition-property: height;
-}
-
-[cmdk-group-heading] {
-  user-select: none;
-  font-size: 12px;
-  color: var(--gray11);
-  padding: 0 8px;
-  display: flex;
-  align-items: center;
-}
-
-[cmdk-empty] {
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 64px;
-  white-space: pre-wrap;
-  color: var(--gray11);
-}
-- 
2.51.2