[Website] Selection Highlight Transparent

[song-dog]

Highlighting on the docs site and help site are currently transparent. The variables being used in the ::selection pseudo element are defined in a scope that it does not have access to, leading to the transparent highlighting. Given that the .theme-dark and .theme-light only define a different alpha value relative to the selection color, one solution may be to define the core components of the colors to the :root and define the alpha values using .has pseudo-classes, as that would give pseudo elements like ::selection access to them.

Ex:

:root {
  --accent-h: 258;
  --accent-s: 88%;
  --accent-l: 66%;
  --text-selection: var(--accent-h), var(--accent-s), var(--accent-l);
}

:root:has(.theme-dark) {
  --text-selection-alpha: 0.25;
}

:root:has(.theme-light) {
  --text-selection-alpha: 0.2;
}

::selection {
  background-color: hsla(var(--text-selection), var(--text-selection-alpha));
}

[joethei]

I am not able to reproduce this, what browser are you using?