feat(web): use theme colors in error markers

1 files changed, 112 insertions, 81 deletions

diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts
index 0a25214b..240c73e9 100644
--- a/language-web/src/main/js/editor/EditorParent.ts
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -1,88 +1,119 @@
 import { styled } from '@mui/material/styles';
 
-export const EditorParent = styled('div')(({ theme }) => ({
-  background: theme.palette.background.default,
-  '&, .cm-editor': {
-    height: '100%',
-  },
-  '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': {
-    fontSize: 16,
-    fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
-    fontFeatureSettings: '"liga", "calt"',
-    fontWeight: 400,
-    letterSpacing: 0,
-    textRendering: 'optimizeLegibility',
-  },
-  '.cm-scroller': {
-    color: theme.palette.text.secondary,
-  },
-  '.cm-gutters': {
+/**
+ * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64.
+ *
+ * Based on
+ * https://github.com/codemirror/lint/blob/f524b4a53b0183bb343ac1e32b228d28030d17af/src/lint.ts#L501
+ *
+ * @param color the color of the underline
+ * @returns the CSS `url()`
+ */
+function underline(color: string) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">
+    <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>
+  </svg>`;
+  const svgBase64 = window.btoa(svg);
+  return `url('data:image/svg+xml;base64,${svgBase64}')`;
+}
+
+export const EditorParent = styled('div')(({ theme }) => {
+  const codeMirrorLintStyle: Record<string, unknown> = {};
+  (['error', 'warning', 'info'] as const).forEach((severity) => {
+    const color = theme.palette[severity].main;
+    codeMirrorLintStyle[`.cm-diagnostic-${severity}`] = {
+      borderLeftColor: color,
+    };
+    codeMirrorLintStyle[`.cm-lintRange-${severity}`] = {
+      backgroundImage: underline(color),
+    };
+  });
+
+  return {
     background: theme.palette.background.default,
-    color: theme.palette.text.disabled,
-    border: 'none',
-  },
-  '.cm-specialChar': {
-    color: theme.palette.secondary.main,
-  },
-  '.cm-activeLine': {
-    background: 'rgba(0, 0, 0, 0.3)',
-  },
-  '.cm-activeLineGutter': {
-    background: 'rgba(0, 0, 0, 0.3)',
-    color: theme.palette.text.primary,
-  },
-  '.cm-cursor, .cm-cursor-primary': {
-    borderColor: theme.palette.primary.main,
-    background: theme.palette.common.black,
-  },
-  '.cm-selectionBackground': {
-    background: '#3e4453',
-  },
-  '.cm-focused': {
-    outline: 'none',
+    '&, .cm-editor': {
+      height: '100%',
+    },
+    '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': {
+      fontSize: 16,
+      fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
+      fontFeatureSettings: '"liga", "calt"',
+      fontWeight: 400,
+      letterSpacing: 0,
+      textRendering: 'optimizeLegibility',
+    },
+    '.cm-scroller': {
+      color: theme.palette.text.secondary,
+    },
+    '.cm-gutters': {
+      background: theme.palette.background.default,
+      color: theme.palette.text.disabled,
+      border: 'none',
+    },
+    '.cm-specialChar': {
+      color: theme.palette.secondary.main,
+    },
+    '.cm-activeLine': {
+      background: 'rgba(0, 0, 0, 0.3)',
+    },
+    '.cm-activeLineGutter': {
+      background: 'rgba(0, 0, 0, 0.3)',
+      color: theme.palette.text.primary,
+    },
+    '.cm-cursor, .cm-cursor-primary': {
+      borderColor: theme.palette.primary.main,
+      background: theme.palette.common.black,
+    },
     '.cm-selectionBackground': {
       background: '#3e4453',
     },
-  },
-  '.cm-panels-top': {
-    color: theme.palette.text.secondary,
-  },
-  '.cm-panel': {
-    background: theme.palette.background.paper,
-    borderTop: `1px solid ${theme.palette.divider}`,
-    'button[name="close"]': {
+    '.cm-focused': {
+      outline: 'none',
+      '.cm-selectionBackground': {
+        background: '#3e4453',
+      },
+    },
+    '.cm-panels-top': {
       color: theme.palette.text.secondary,
-      cursor: 'pointer',
-    },
-  },
-  '.cm-foldPlaceholder': {
-    background: theme.palette.background.paper,
-    borderColor: theme.palette.text.disabled,
-    color: theme.palette.text.secondary,
-  },
-  '.cmt-comment': {
-    fontStyle: 'italic',
-    color: theme.palette.text.disabled,
-  },
-  '.cmt-number': {
-    color: '#6188a6',
-  },
-  '.cmt-string': {
-    color: theme.palette.secondary.dark,
-  },
-  '.cmt-keyword': {
-    color: theme.palette.primary.main,
-  },
-  '.cmt-typeName, .cmt-atom': {
-    color: theme.palette.text.primary,
-  },
-  '.cmt-variableName': {
-    color: '#c8ae9d',
-  },
-  '.cm-completionIcon': {
-    width: 16,
-    padding: 0,
-    marginRight: '0.5em',
-    textAlign: 'center',
-  },
-}));
+    },
+    '.cm-panel': {
+      background: theme.palette.background.paper,
+      borderTop: `1px solid ${theme.palette.divider}`,
+      'button[name="close"]': {
+        color: theme.palette.text.secondary,
+        cursor: 'pointer',
+      },
+    },
+    '.cm-foldPlaceholder': {
+      background: theme.palette.background.paper,
+      borderColor: theme.palette.text.disabled,
+      color: theme.palette.text.secondary,
+    },
+    '.cmt-comment': {
+      fontStyle: 'italic',
+      color: theme.palette.text.disabled,
+    },
+    '.cmt-number': {
+      color: '#6188a6',
+    },
+    '.cmt-string': {
+      color: theme.palette.secondary.dark,
+    },
+    '.cmt-keyword': {
+      color: theme.palette.primary.main,
+    },
+    '.cmt-typeName, .cmt-atom': {
+      color: theme.palette.text.primary,
+    },
+    '.cmt-variableName': {
+      color: '#c8ae9d',
+    },
+    '.cm-completionIcon': {
+      width: 16,
+      padding: 0,
+      marginRight: '0.5em',
+      textAlign: 'center',
+    },
+    ...codeMirrorLintStyle,
+  };
+});