Use color-mix for text selection highlights (#94)

* Use color-mix for text selection highlights

- Make selection background use `color-mix()`
- Keep selection foreground aligned with the default text color

* Add selection highlight accessibility fixes

- Replace invalid hsl(var(--...)) color usage with color-mix-friendly values
- Add reduced-motion, forced-colors, and high-contrast selection styles
- Cover selection and scrollbar styling with regression tests

Author: BunsDev

apps/web/src/components/ui/button.tsx

@@ -9,9 +9,9 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-linear-to-b from-primary to-[hsl(223_82%_62%)] text-primary-foreground shadow-[0_18px_45px_-20px_hsl(var(--primary)/0.85)] hover:brightness-110 hover:shadow-[0_22px_55px_-22px_hsl(var(--primary)/0.95)]",
+          "bg-linear-to-b from-primary to-[hsl(223_82%_62%)] text-primary-foreground shadow-[0_18px_45px_-20px_color-mix(in_srgb,var(--primary)_85%,transparent)] hover:brightness-110 hover:shadow-[0_22px_55px_-22px_color-mix(in_srgb,var(--primary)_95%,transparent)]",
         destructive:
-          "bg-linear-to-b from-destructive to-[hsl(352_72%_52%)] text-destructive-foreground shadow-[0_18px_45px_-20px_hsl(var(--destructive)/0.7)] hover:brightness-105 hover:shadow-[0_22px_55px_-22px_hsl(var(--destructive)/0.8)]",
+          "bg-linear-to-b from-destructive to-[hsl(352_72%_52%)] text-destructive-foreground shadow-[0_18px_45px_-20px_color-mix(in_srgb,var(--destructive)_70%,transparent)] hover:brightness-105 hover:shadow-[0_22px_55px_-22px_color-mix(in_srgb,var(--destructive)_80%,transparent)]",
         "destructive-outline":
           "border border-destructive/35 bg-destructive/6 text-destructive shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] hover:border-destructive/45 hover:bg-destructive/10 hover:text-destructive",
         outline:

apps/web/src/components/ui/sidebar.tsx

@@ -814,7 +814,7 @@ const sidebarMenuButtonVariants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_var(--color-sidebar-border,var(--border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--color-sidebar-accent,var(--accent))]",
       },
     },
   },

apps/web/src/index.css

@@ -598,18 +598,17 @@ label:has(> select#reasoning-effort) select {
   body {
     background:
       radial-gradient(circle at top, hsl(217 96% 71% / 0.08), transparent 28%),
-      radial-gradient(circle at 80% 0%, hsl(228 88% 68% / 0.06), transparent 24%),
-      hsl(var(--background));
+      radial-gradient(circle at 80% 0%, hsl(228 88% 68% / 0.06), transparent 24%), var(--background);
     background-attachment: fixed;
   }
 
   ::selection {
-    background: hsl(var(--primary) / 0.55);
-    color: hsl(var(--foreground));
+    background: color-mix(in srgb, var(--primary) 55%, transparent);
+    color: var(--foreground);
   }
 
   * {
-    scrollbar-color: hsl(var(--primary) / 0.42) transparent;
+    scrollbar-color: color-mix(in srgb, var(--primary) 42%, transparent) transparent;
   }
 
   *::-webkit-scrollbar {
@@ -623,14 +622,48 @@ label:has(> select#reasoning-effort) select {
 
   *::-webkit-scrollbar-thumb {
     border-radius: 999px;
-    background: hsl(var(--primary) / 0.25);
+    background: color-mix(in srgb, var(--primary) 25%, transparent);
     border: 2px solid transparent;
     background-clip: padding-box;
   }
 
   *::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--primary) / 0.38);
+    background: color-mix(in srgb, var(--primary) 38%, transparent);
     border: 2px solid transparent;
     background-clip: padding-box;
   }
 }
+
+/* ─── Accessibility ─── */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+@media (forced-colors: active) {
+  ::selection {
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: ButtonText;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: Canvas;
+  }
+}
+
+@media (prefers-contrast: more) {
+  ::selection {
+    background: color-mix(in srgb, var(--primary) 88%, transparent);
+  }
+}