migrate custom themes awa from @uiw/codemirror-themes

packages/codemirror/themes/algoboy.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#9bbc0f',
   foreground: '#0f380f', // whats that?

packages/codemirror/themes/blackscreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'black',
   foreground: 'white', // whats that?

packages/codemirror/themes/bluescreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#051DB5',
   lineBackground: '#051DB550',

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

@@ -1,82 +0,0 @@
-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)];

packages/codemirror/themes/strudel-theme.mjs

@@ -1,19 +1,24 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  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',
+};
+
 export default createTheme({
   theme: 'dark',
-  settings: {
-    background: '#222',
-    foreground: '#75baff', // whats that?
-    caret: '#ffcc00',
-    selection: 'rgba(128, 203, 196, 0.5)',
-    selectionMatch: '#036dd626',
-    // lineHighlight: '#8a91991a', // original
-    lineHighlight: '#00000050',
-    gutterBackground: 'transparent',
-    // gutterForeground: '#8a919966',
-    gutterForeground: '#8a919966',
-  },
+  settings,
   styles: [
     { tag: t.labelName, color: '#89ddff' },
     { tag: t.keyword, color: '#c792ea' },

packages/codemirror/themes/teletext.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 
 let colorA = '#6edee4';
 //let colorB = 'magenta';

packages/codemirror/themes/terminal.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'black',
   foreground: '#41FF00', // whats that?

packages/codemirror/themes/theme-helper.mjs

@@ -0,0 +1,43 @@
+import { EditorView } from '@codemirror/view';
+import { syntaxHighlighting } from '@codemirror/language';
+import { HighlightStyle } from '@codemirror/language';
+
+export const createTheme = ({ theme, settings, styles }) => {
+  console.log('create', settings);
+  const _theme = EditorView.theme(
+    {
+      '&': {
+        color: settings.foreground,
+        backgroundColor: settings.background,
+      },
+      '.cm-gutters': {
+        backgroundColor: settings.gutterBackground,
+        color: settings.gutterForeground,
+        //borderRightColor: settings.gutterBorder
+      },
+      '.cm-content': {
+        caretColor: settings.caret,
+      },
+      '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: settings.caret,
+      },
+      '.cm-activeLineGutter': {
+        // color: settings.gutterActiveForeground
+        backgroundColor: settings.lineHighlight,
+      },
+      '.cm-activeLine': {
+        backgroundColor: settings.lineHighlight,
+      },
+      '&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection':
+        {
+          background: settings.selection + ' !important',
+        },
+      '& .cm-selectionMatch': {
+        backgroundColor: settings.selectionMatch,
+      },
+    },
+    { dark: theme === 'dark' },
+  );
+  const highlightStyle = HighlightStyle.define(styles);
+  return [_theme, syntaxHighlighting(highlightStyle)];
+};

packages/codemirror/themes/whitescreen.mjs

@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: 'white',
   foreground: 'black', // whats that?