remove uiw codemirror themes to fix site

+ todo: refactor themes to not use uiw package

packages/codemirror/themes/strudel-theme-vanilla.mjs

@@ -0,0 +1,82 @@
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+import { HighlightStyle } from '@codemirror/language';
+import { syntaxHighlighting } from '@codemirror/language';
+
+let colors = {
+  teal600: '#c084fc', // text
+  teal400: '#2dd4bf',
+  amber: '#d97706',
+  violet400: '#a78bfa',
+  violet300: '#c4b5fd',
+  indigo300: '#a5b4fc',
+  indigo400: '#818cf8',
+  fuchsia400: '#e879f9',
+  fuchsia300: '#78716c', // brackets
+  fuchsia200: '#f5d0fe',
+  whitish: '#d9f99d', // text
+  stone400: '#a8a29e',
+  stone500: '#78716c',
+};
+
+let theme = EditorView.theme(
+  {
+    '&': {
+      color: colors.teal600,
+      overflow: 'hidden',
+      backgroundColor: 'transparent',
+      fontSize: '16px',
+      height: '100%',
+    },
+    '.cm-gutters': {
+      'background-color': 'transparent',
+      color: colors.stone500,
+    },
+    '.cm-cursor': {
+      'border-left-color': 'transparent',
+      // the regular cursor is hidden, because we're showing a nametag..
+      // the cursor is part of https://github.com/felixroos/y-codemirror.next
+      // i had to fork again because the scrollIntoView was messing with the global scroll
+    },
+    /* '.cm-activeLine, .cm-activeLineGutter, .cm-line': {
+      'background-color': 'rgba(0,0,0,.7) !important',
+    }, */
+    /* '.cm-line': {
+      'background-color': 'transparent',
+    }, */
+    '.cm-selectionBackground': {
+      'background-color': 'rgba(255,255,255,.7) !important',
+    },
+    '.cm-cursorLayer': {
+      'animation-name': 'inherit !important;', // disables blinking
+    },
+    '.cm-matchingBracket': {
+      'text-decoration': 'underline 0.12rem',
+      'text-underline-offset': '0.24rem',
+      'text-decoration-color': colors.fuchsia300,
+    },
+    '.cm-ySelectionInfo': {
+      opacity: '1',
+      fontFamily: 'monospace',
+      color: 'black',
+      padding: '2px 2px',
+      fontSize: '0.8rem',
+      //"font-weight": "bold",
+      top: '1.45em',
+      'z-index': '1000',
+    },
+  },
+  { dark: true },
+);
+
+const highlightStyle = HighlightStyle.define([
+  { tag: tags.labelName, color: '#7dd3fc' },
+  { tag: tags.keyword, color: colors.teal600 },
+  { tag: tags.literal, color: colors.whitish },
+  { tag: tags.squareBracket, color: colors.amber },
+  { tag: tags.punctuation, color: colors.fuchsia300 },
+  { tag: tags.operator, color: colors.fuchsia300 },
+  { tag: tags.comment, color: colors.stone500, fontStyle: 'italic' },
+]);
+
+export default [theme, syntaxHighlighting(highlightStyle)];