fix ::selection styles, use hsla instead of hsl because it can overlap text with ::selection background when background-clip: text is set (#4011)

fix

Author: dimaMachina

.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

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})`
-}