fix ::selection styles, use hsla instead of hsl because it can …

…overlap text with `::selection` background when `background-clip: text` is set (#4011) fix
shuding · Jan 23, 2025 · 32e7d55 · 32e7d55
1 parent fc78033
commit 32e7d55
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/.changeset/honest-parrots-rest.md b/.changeset/honest-parrots-rest.md
@@ -0,0 +1,5 @@
+---
+"nextra": patch
+---
+
+fix `::selection` styles, use `hsla` instead of `hsl` because it can overlap text with `::selection` background when `background-clip: text` is set
diff --git a/packages/nextra/src/client/components/head.tsx b/packages/nextra/src/client/components/head.tsx
@@ -96,10 +96,7 @@ export const Head: FC<HeadProps> = ({ children, ...props }) => {
   --nextra-bg: ${backgroundColor.dark};
 }
 ::selection {
-  background: ${makePrimaryColor('+ 41%')};
-}
-.dark ::selection {
-  background: ${makePrimaryColor('- 11%')};
+  background: hsla(var(--nextra-primary-hue),var(--nextra-primary-saturation),var(--nextra-primary-lightness),.3);
 }
 html {
   background: rgb(var(--nextra-bg));
@@ -130,10 +127,3 @@ html {
     </head>
   )
 }
-
-function makePrimaryColor(val: string): string {
-  const h = 'var(--nextra-primary-hue)'
-  const s = 'var(--nextra-primary-saturation)'
-  const l = `calc(var(--nextra-primary-lightness) ${val})`
-  return `hsl(${h + s + l})`
-}