remove uiw codemirror themes to fix site

+ todo: refactor themes to not use uiw package

packages/codemirror/codemirror.mjs

@@ -20,7 +20,7 @@ import { isTooltipEnabled } from './tooltip.mjs';
 import { flash, isFlashEnabled } from './flash.mjs';
 import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
 import { keybindings } from './keybindings.mjs';
-import { initTheme, activateTheme, theme } from './themes.mjs';
+import { initTheme, activateTheme, theme } from './themes-vanilla.mjs';
 import { sliderPlugin, updateSliderWidgets } from './slider.mjs';
 import { widgetPlugin, updateWidgets } from './widget.mjs';
 import { persistentAtom } from '@nanostores/persistent';

packages/codemirror/index.mjs

@@ -2,5 +2,5 @@ export * from './codemirror.mjs';
 export * from './highlight.mjs';
 export * from './flash.mjs';
 export * from './slider.mjs';
-export * from './themes.mjs';
+export * from './themes-vanilla.mjs';
 export * from './widget.mjs';

packages/codemirror/package.json

@@ -47,8 +47,6 @@
     "@strudel/core": "workspace:*",
     "@strudel/draw": "workspace:*",
     "@strudel/transpiler": "workspace:*",
-    "@uiw/codemirror-themes": "^4.23.7",
-    "@uiw/codemirror-themes-all": "^4.23.7",
     "nanostores": "^0.11.3"
   },
   "devDependencies": {

packages/codemirror/themes-vanilla.mjs

@@ -0,0 +1,116 @@
+import strudelTheme from './themes/strudel-theme-vanilla.mjs';
+import { setTheme } from '@strudel/draw';
+
+export const themes = {
+  strudelTheme,
+};
+
+// lineBackground is background with 50% opacity, to make sure the selection below is visible
+
+export const settings = {
+  strudelTheme: {
+    background: '#222',
+    lineBackground: '#22222299',
+    foreground: '#fff',
+    // foreground: '#75baff',
+    caret: '#ffcc00',
+    selection: 'rgba(128, 203, 196, 0.5)',
+    selectionMatch: '#036dd626',
+    // lineHighlight: '#8a91991a', // original
+    lineHighlight: '#00000050',
+    gutterBackground: 'transparent',
+    // gutterForeground: '#8a919966',
+    gutterForeground: '#8a919966',
+  },
+};
+
+function getColors(str) {
+  const colorRegex = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g;
+  const colors = [];
+
+  let match;
+  while ((match = colorRegex.exec(str)) !== null) {
+    const color = match[0];
+    if (!colors.includes(color)) {
+      colors.push(color);
+    }
+  }
+
+  return colors;
+}
+
+// TODO: remove
+export function themeColors(theme) {
+  return getColors(stringifySafe(theme));
+}
+
+function getCircularReplacer() {
+  const seen = new WeakSet();
+  return (key, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+}
+
+function stringifySafe(json) {
+  return JSON.stringify(json, getCircularReplacer());
+}
+
+export const theme = (theme) => themes[theme] || themes.strudelTheme;
+
+// css style injection helpers
+export function injectStyle(rule) {
+  const newStyle = document.createElement('style');
+  document.head.appendChild(newStyle);
+  const styleSheet = newStyle.sheet;
+  const ruleIndex = styleSheet.insertRule(rule, 0);
+  return () => styleSheet.deleteRule(ruleIndex);
+}
+
+let currentTheme,
+  resetThemeStyle,
+  themeStyle,
+  styleID = 'strudel-theme-vars';
+export function initTheme(theme) {
+  if (!document.getElementById(styleID)) {
+    themeStyle = document.createElement('style');
+    themeStyle.id = styleID;
+    document.head.append(themeStyle);
+  }
+  activateTheme(theme);
+}
+
+export function activateTheme(name) {
+  if (currentTheme === name) {
+    return;
+  }
+  currentTheme = name;
+  if (!settings[name]) {
+    console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
+  }
+  const themeSettings = settings[name] || settings.strudelTheme;
+  // set css variables
+  themeStyle.innerHTML = `:root {
+      ${Object.entries(themeSettings)
+        // important to override fallback
+        .map(([key, value]) => `--${key}: ${value} !important;`)
+        .join('\n')}
+    }`;
+  setTheme(themeSettings);
+  // tailwind dark mode
+  if (themeSettings.light) {
+    document.documentElement.classList.remove('dark');
+  } else {
+    document.documentElement.classList.add('dark');
+  }
+  resetThemeStyle?.();
+  resetThemeStyle = undefined;
+  if (themeSettings.customStyle) {
+    resetThemeStyle = injectStyle(themeSettings.customStyle);
+  }
+}

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)];