Remove theme from annotations

pomber · pomber · commit b99d276387fb · 2023-06-05T12:04:40.000Z
diff --git a/packages/mdx/src/index.scss b/packages/mdx/src/index.scss
@@ -61,13 +61,19 @@
   border-radius: 0.25rem;
   padding: 0.2rem 0.15rem 0.1rem;
   margin: 0 -0.15rem;
+  background: var(--ch-l-editor-rangeHighlightBackground);
+}
+
+.ch-code-multiline-mark {
+  background: var(--ch-l-editor-rangeHighlightBackground);
 }
 
 .ch-code-multiline-mark-border {
   width: 3px;
   height: 100%;
   position: absolute;
   left: 0;
+  background: var(--ch-l-editor-infoForeground);
 }
 
 .ch-code-multiline-mark .ch-code-button {
@@ -93,3 +99,7 @@
   text-decoration-style: dotted;
   color: inherit;
 }
+
+.ch-code-box-annotation {
+  outline: 2px solid var(--ch-l-editor-infoForeground);
+}
diff --git a/packages/mdx/src/mdx-client/annotations.tsx b/packages/mdx/src/mdx-client/annotations.tsx
@@ -1,8 +1,12 @@
 import React from "react"
 import { CodeAnnotation } from "../smooth-code"
-import { getColor, transparent, ColorName } from "../utils"
-import { LineWithElement } from "../smooth-code/partial-step-parser"
+import { transparent } from "../utils"
+import {
+  AnnotationProps,
+  LineWithElement,
+} from "../smooth-code/partial-step-parser"
 import { CopyButton } from "../smooth-code/copy-button"
+import { CSSV } from "utils/light/css"
 
 export function Annotation() {
   return (
@@ -36,35 +40,19 @@ function MultilineMark({
   children,
   data,
   style,
-  theme,
   lines,
 }: {
   data: string
   children: React.ReactNode
   style?: React.CSSProperties
-  theme?: any
   lines?: LineWithElement[]
 }) {
   const content = getContent(lines)
   const className = `ch-code-multiline-mark ` + (data ?? "")
-  const bg = getColor(
-    theme,
-    ColorName.RangeHighlightBackground
-  )
-  const border = getColor(
-    theme,
-    ColorName.EditorInfoForeground
-  )
 
   return (
-    <div
-      style={{ ...style, background: bg }}
-      className={className}
-    >
-      <span
-        className="ch-code-multiline-mark-border"
-        style={{ background: border }}
-      />
+    <div style={style} className={className}>
+      <span className="ch-code-multiline-mark-border" />
       {children}
       <CopyButton
         className="ch-code-button"
@@ -88,25 +76,15 @@ function getContent(lines: LineWithElement[]) {
     .join("\n")
 }
 
-function InlineMark({
-  children,
-  data,
-  theme,
-}: {
-  data: any
-  children: React.ReactNode
-  theme: any
-}) {
-  const bg =
-    tryGuessColor(children) ||
-    transparent(
-      getColor(theme, ColorName.CodeForeground),
-      0.2
-    )
-
+function InlineMark({ children, data }: AnnotationProps) {
   const className = "ch-code-inline-mark " + (data ?? "")
   return (
-    <span className={className} style={{ background: bg }}>
+    <span
+      className={className}
+      style={{
+        background: tryGuessColor(children) || undefined,
+      }}
+    >
       {children}
     </span>
   )
@@ -115,44 +93,34 @@ function InlineMark({
 function tryGuessColor(
   children: React.ReactNode
 ): string | undefined {
-  const child = React.Children.toArray(children)[0] as any
-
-  const grandChild = React.Children.toArray(
-    child?.props?.children || []
-  )[0] as any
-
-  const grandGrandChild = React.Children.toArray(
-    grandChild?.props?.children || []
-  )[0] as any
-
-  const { color } = grandGrandChild?.props?.style || {}
-
-  if (color) {
-    return transparent(color as string, 0.2)
+  try {
+    const child = React.Children.toArray(children)[0] as any
+
+    const grandChild = React.Children.toArray(
+      child?.props?.children || []
+    )[0] as any
+
+    const grandGrandChild = React.Children.toArray(
+      grandChild?.props?.children || []
+    )[0] as any
+    const { color } = grandGrandChild?.props?.style || {}
+
+    if (color) {
+      return transparent(color as string, 0.2)
+    }
+    return undefined
+  } catch (e) {
+    return undefined
   }
-
-  return undefined
 }
 
-function Box({
-  children,
-  data,
-  theme,
-}: {
-  data: any
-  children: React.ReactNode
-  theme: any
-}) {
-  const border =
-    typeof data === "string"
-      ? data
-      : theme.tokenColors.find((tc: any) =>
-          tc.scope?.includes("string")
-        )?.settings?.foreground || "yellow"
+function Box({ children, data }: AnnotationProps) {
+  const outlineColor =
+    typeof data === "string" ? data : undefined
   return (
     <span
       className="ch-code-box-annotation"
-      style={{ outline: `2px solid ${border}` }}
+      style={{ outlineColor }}
     >
       {children}
     </span>
@@ -163,38 +131,16 @@ function WithClass({
   children,
   data,
   style,
-  theme,
-}: {
-  data: any
-  children: React.ReactNode
-  style?: React.CSSProperties
-  theme: any
-}) {
-  const className = data as string
+}: AnnotationProps) {
   return (
-    <span style={style} className={className}>
+    <span style={style} className={data as string}>
       {children}
     </span>
   )
 }
 
-function Label({
-  children,
-  data,
-  style,
-  theme,
-}: {
-  data: any
-  children: React.ReactNode
-  style?: React.CSSProperties
-  theme?: any
-}) {
-  const bg = ((theme as any).colors[
-    "editor.lineHighlightBackground"
-  ] ||
-    (theme as any).colors[
-      "editor.selectionHighlightBackground"
-    ]) as string
+function Label({ children, data, style }: AnnotationProps) {
+  const bg = CSSV.editor.lineHighlightBackground
   const [hover, setHover] = React.useState(false)
 
   return (
diff --git a/packages/mdx/src/smooth-code/partial-step-parser.ts b/packages/mdx/src/smooth-code/partial-step-parser.ts
@@ -17,15 +17,16 @@ import {
   annotateMultiline,
 } from "./annotations"
 
+export type AnnotationProps = {
+  style?: React.CSSProperties
+  children: React.ReactNode
+  data: any
+  isInline: boolean
+}
+
 export type CodeAnnotation = {
   focus: string
-  Component?: (props: {
-    style?: React.CSSProperties
-    children: React.ReactNode
-    data: any
-    theme: EditorTheme
-    isInline: boolean
-  }) => React.ReactElement
+  Component?: (props: AnnotationProps) => React.ReactElement
   data?: any
   // sometimes serializing the Component function doesn't work (Astro)
   // so we pass the name and get the Component from annotationsMap
diff --git a/packages/mdx/src/utils/light/css.tsx b/packages/mdx/src/utils/light/css.tsx
@@ -0,0 +1,105 @@
+import { Theme } from "@code-hike/lighter"
+import { getColor, getTheme } from "./theme-colors"
+
+const keys = [
+  "editor.background",
+  "editor.foreground",
+  "editor.lineHighlightBackground",
+  "editor.rangeHighlightBackground",
+  "editor.infoForeground",
+  "editor.selectionBackground",
+  "focusBorder",
+  "tab.activeBackground",
+  "tab.activeForeground",
+  "tab.inactiveBackground",
+  "tab.inactiveForeground",
+  "tab.border",
+  "tab.activeBorder",
+  "editorGroup.border",
+  "editorGroupHeader.tabsBackground",
+  "editorLineNumber.foreground",
+  "input.background",
+  "input.foreground",
+  "input.border",
+  "icon.foreground",
+  "sideBar.background",
+  "sideBar.foreground",
+  "sideBar.border",
+  "list.activeSelectionBackground",
+  "list.activeSelectionForeground",
+  "list.hoverBackground",
+  "list.hoverForeground",
+]
+
+function v(key: string) {
+  return `var(${vn(key)})`
+}
+
+function vn(key: string) {
+  return `--ch-l-${key.replace(".", "-")}`
+}
+
+export const CSSV = {
+  editor: {
+    background: v("editor.background"),
+    foreground: v("editor.foreground"),
+    lineHighlightBackground: v(
+      "editor.lineHighlightBackground"
+    ),
+    rangeHighlightBackground: v(
+      "editor.rangeHighlightBackground"
+    ),
+    infoForeground: v("editor.infoForeground"),
+    selectionBackground: v("editor.selectionBackground"),
+  },
+  focusBorder: v("focusBorder"),
+  tab: {
+    activeBackground: v("tab.activeBackground"),
+    activeForeground: v("tab.activeForeground"),
+    inactiveBackground: v("tab.inactiveBackground"),
+    inactiveForeground: v("tab.inactiveForeground"),
+    border: v("tab.border"),
+    activeBorder: v("tab.activeBorder"),
+  },
+  editorGroup: {
+    border: v("editorGroup.border"),
+  },
+  editorGroupHeader: {
+    tabsBackground: v("editorGroupHeader.tabsBackground"),
+  },
+  editorLineNumber: {
+    foreground: v("editorLineNumber.foreground"),
+  },
+  input: {
+    background: v("input.background"),
+    foreground: v("input.foreground"),
+    border: v("input.border"),
+  },
+  icon: {
+    foreground: v("icon.foreground"),
+  },
+  sideBar: {
+    background: v("sideBar.background"),
+    foreground: v("sideBar.foreground"),
+    border: v("sideBar.border"),
+  },
+  list: {
+    activeSelectionBackground: v(
+      "list.activeSelectionBackground"
+    ),
+    activeSelectionForeground: v(
+      "list.activeSelectionForeground"
+    ),
+    hoverBackground: v("list.hoverBackground"),
+    hoverForeground: v("list.hoverForeground"),
+  },
+}
+
+export function getCSSVariables(theme: Theme) {
+  const finalTheme = getTheme(theme)
+  const vars = {}
+  for (const key of keys) {
+    vars[vn(key)] = getColor(finalTheme, key)
+  }
+  return vars
+}
diff --git a/packages/mdx/src/utils/light/theme-colors.ts b/packages/mdx/src/utils/light/theme-colors.ts
