Change multiline mark colors

Author: pomber

packages/mdx/src/index.scss

@@ -53,3 +53,16 @@
 .ch-section-link[data-active="true"] * {
   text-decoration-thickness: 1.5px;
 }
+
+.ch-code-inline-mark {
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.15rem 0.1rem;
+  margin: 0 -0.15rem;
+}
+
+.ch-code-multiline-mark-border {
+  width: 3px;
+  height: 100%;
+  position: absolute;
+  left: 0;
+}

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

@@ -25,7 +25,6 @@ function Mark(props: any) {
     return <MultilineMark {...props} />
   }
 }
-
 function MultilineMark({
   children,
   data,
@@ -39,29 +38,20 @@ function MultilineMark({
 }) {
   const bg =
     data ||
-    (((theme as any).colors[
-      "editor.lineHighlightBackground"
-    ] ||
-      (theme as any).colors[
-        "editor.selectionHighlightBackground"
-      ]) as string)
+    getColor(theme, ColorName.RangeHighlightBackground)
+  const border = getColor(
+    theme,
+    ColorName.EditorInfoForeground
+  )
+
   return (
     <div
-      style={{
-        ...style,
-        background: bg,
-      }}
-      className="ch-code-bg-annotation"
+      style={{ ...style, background: bg }}
+      className="ch-code-multiline-mark"
     >
       <span
-        className="ch-code-bg-annotation-border"
-        style={{
-          background: "#00a2d3",
-          width: "3px",
-          height: "100%",
-          position: "absolute",
-          left: 0,
-        }}
+        className="ch-code-multiline-mark-border"
+        style={{ background: border }}
       />
       {children}
     </div>
@@ -88,13 +78,8 @@ function InlineMark({
 
   return (
     <span
-      className="ch-code-mark-annotation"
-      style={{
-        background: bg,
-        borderRadius: "0.25rem",
-        padding: "0.2rem 0.15rem 0.1rem",
-        margin: "0 -0.15rem",
-      }}
+      className="ch-code-inline-mark"
+      style={{ background: bg }}
     >
       {children}
     </span>

packages/mdx/src/utils/theme.ts

@@ -32,6 +32,7 @@ export enum ColorName {
   CodeBackground,
   EditorForeground,
   EditorBackground,
+  FocusBorder,
   ActiveTabBackground,
   ActiveTabForeground,
   InactiveTabBackground,
@@ -53,6 +54,12 @@ export enum ColorName {
   SideBarBackground,
   SideBarForeground,
   SideBarBorder,
+  // Background color for the highlight of line at the cursor position
+  LineHighlightBackground,
+  // Background color of highlighted ranges, like by quick open and find features
+  RangeHighlightBackground,
+  // Foreground color of info squigglies in the editor
+  EditorInfoForeground,
 }
 
 type Color = string | undefined
@@ -97,6 +104,15 @@ export function getColor(
           hc: "#fffffe",
         })
       )
+    case ColorName.FocusBorder:
+      return (
+        colors["focusBorder"] ||
+        getDefault(theme, {
+          light: "#0090F1",
+          dark: "#007FD4",
+          hc: contrastBorder,
+        })
+      )
     case ColorName.ActiveTabBackground:
       return (
         colors["tab.activeBackground"] ||
@@ -267,6 +283,34 @@ export function getColor(
       )
     case ColorName.ListHoverForeground:
       return colors["list.hoverForeground"] || undefined
+    case ColorName.LineHighlightBackground:
+      return (
+        colors["editor.lineHighlightBackground"] ||
+        getDefault(theme, {
+          dark: undefined,
+          light: undefined,
+          hc: undefined,
+        })
+      )
+    case ColorName.RangeHighlightBackground:
+      return (
+        colors["editor.rangeHighlightBackground"] ||
+        getDefault(theme, {
+          dark: "#ffffff0b",
+          light: "#fdff0033",
+          hc: undefined,
+        })
+      )
+
+    case ColorName.EditorInfoForeground:
+      return (
+        colors["editor.infoForeground"] ||
+        getDefault(theme, {
+          dark: "#3794FF",
+          light: "#1a85ff",
+          hc: "#3794FF",
+        })
+      )
 
     default:
       return "#f00"