Use color-mix for text selection highlights

BunsDev · BunsDev · commit 50bc3281968d · 2026-03-29T01:24:17.000-05:00
- Make selection background use `color-mix()`
- Keep selection foreground aligned with the default text color
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
@@ -483,8 +483,8 @@ label:has(> select#reasoning-effort) select {
   }
 
   ::selection {
-    background: hsl(var(--primary) / 0.55);
-    color: hsl(var(--foreground));
+    background: color-mix(in srgb, var(--primary) 55%, transparent);
+    color: var(--foreground);
   }
 
   * {

Original file line number	Diff line number	Diff line change
`@@ -483,8 +483,8 @@ label:has(> select#reasoning-effort) select {`
`483`	`483`	`}`
`484`	`484`
`485`	`485`	`::selection {`
`486`		`- background: hsl(var(--primary) / 0.55);`
`487`		`- color: hsl(var(--foreground));`
	`486`	`+ background: color-mix(in srgb, var(--primary) 55%, transparent);`
	`487`	`+ color: var(--foreground);`
`488`	`488`	`}`
`489`	`489`
`490`	`490`	`* {`