Dont use theme variables in JS

Author: pomber

packages/mdx/src/index.scss

@@ -107,3 +107,17 @@
 .ch-code-box-annotation {
   outline: 2px solid var(--ch-l-editor-infoForeground);
 }
+
+.ch-code-label-annotation:hover {
+  background: var(--ch-l-editor-lineHighlightBackground);
+  .ch-code-label-annotation-text {
+    display: block;
+  }
+}
+.ch-code-label-annotation-text {
+  position: absolute;
+  right: 0;
+  padding-right: 16px;
+  opacity: 0.7;
+  display: none;
+}

packages/mdx/src/mdx-client/annotations.tsx

@@ -6,7 +6,6 @@ import {
   LineWithElement,
 } from "../smooth-code/partial-step-parser"
 import { CopyButton } from "../smooth-code/copy-button"
-import { CSSV } from "utils/light/css"
 
 export function Annotation() {
   return (
@@ -140,28 +139,10 @@ function WithClass({
 }
 
 function Label({ children, data, style }: AnnotationProps) {
-  const bg = CSSV.editor.lineHighlightBackground
-  const [hover, setHover] = React.useState(false)
-
   return (
-    <div
-      style={{
-        ...style,
-        background: hover ? bg : undefined,
-      }}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-    >
+    <div className="ch-code-label-annotation" style={style}>
       {children}
-      <div
-        style={{
-          position: "absolute",
-          right: 0,
-          paddingRight: 16,
-          display: hover ? "block" : "none",
-          opacity: 0.7,
-        }}
-      >
+      <div className="ch-code-label-annotation-text">
         {data?.children || data}
       </div>
     </div>

packages/mdx/src/utils/light/css.tsx

@@ -43,7 +43,7 @@ function vn(key: string) {
   return `--ch-l-${key.replace(".", "-")}`
 }
 
-export const CSSV = {
+const CSSV = {
   colorScheme: v("colorScheme"),
   foreground: v("foreground"),
   background: v("background"),