feat: increase contrast when prefers-contrast: more (#684)

Author: lukewarlow

app/assets/main.css

@@ -75,6 +75,32 @@
   --badge-cyan: oklch(0.571 0.181 210);
 }
 
+@media (prefers-contrast: more) {
+  :root[data-theme='dark'] {
+    /* text colors */
+    --fg: oklch(1 0 0);
+    --fg-muted: oklch(0.769 0 0);
+    --fg-subtle: oklch(0.693 0 0);
+
+    /* border, separator colors */
+    --border: oklch(0.769 0 0);
+    --border-subtle: oklch(0.739 0 0);
+    --border-hover: oklch(0.771 0 0);
+  }
+
+  :root[data-theme='light'] {
+    /* text colors */
+    --fg: oklch(0 0 0);
+    --fg-muted: oklch(0.329 0 0);
+    --fg-subtle: oklch(0.4 0 0);
+
+    /* border, separator colors */
+    --border: oklch(0.3514 0 0);
+    --border-subtle: oklch(0.422 0 0);
+    --border-hover: oklch(0.315 0 0);
+  }
+}
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

app/components/Package/Card.vue

@@ -32,7 +32,7 @@ const pkgDescription = useMarkdown(() => ({
   <article
     class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'border-accent/30 bg-accent/5': isExactMatch,
+      'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
     }"
   >
     <!-- Glow effect for exact matches -->

app/components/SearchSuggestionCard.vue

@@ -15,7 +15,7 @@ defineProps<{
   <article
     class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
-      'border-accent/30 bg-accent/5': isExactMatch,
+      'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
     }"
   >
     <!-- Glow effect for exact matches -->