migrate custom themes awa from @uiw/codemirror-themes

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-vanilla.mjs';
+import { initTheme, activateTheme, theme } from './themes.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-vanilla.mjs';
+export * from './themes.mjs';
 export * from './widget.mjs';

packages/codemirror/themes-vanilla.mjs

@@ -1,116 +0,0 @@
-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.mjs

@@ -1,4 +1,4 @@
-import {
+/* import {
   abcdef,
   androidstudio,
   atomone,
@@ -28,9 +28,9 @@ import {
   solarizedLight,
   tokyoNightDay,
   xcodeLight,
-} from '@uiw/codemirror-themes-all';
+} from '@uiw/codemirror-themes-all'; */
 
-import strudelTheme from './themes/strudel-theme';
+import strudelTheme, { settings as strudelThemeSettings } from './themes/strudel-theme';
 import bluescreen, { settings as bluescreenSettings } from './themes/bluescreen';
 import blackscreen, { settings as blackscreenSettings } from './themes/blackscreen';
 import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen';
@@ -47,7 +47,7 @@ export const themes = {
   teletext,
   algoboy,
   terminal,
-  abcdef,
+  /* abcdef,
   androidstudio,
   atomone,
   aura,
@@ -75,33 +75,20 @@ export const themes = {
   noctisLilac,
   solarizedLight,
   tokyoNightDay,
-  xcodeLight,
+  xcodeLight, */
 };
 
 // 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',
-  },
+  strudelTheme: strudelThemeSettings,
   bluescreen: bluescreenSettings,
   blackscreen: blackscreenSettings,
   whitescreen: whitescreenSettings,
   teletext: teletextSettings,
   algoboy: algoboySettings,
   terminal: terminalSettings,
-  abcdef: {
+  /* abcdef: {
     background: '#0f0f0f',
     lineBackground: '#0f0f0f99',
     foreground: '#defdef',
@@ -434,7 +421,7 @@ export const settings = {
     selection: '#727377',
     selectionMatch: '#727377',
     lineHighlight: '#2F3239',
-  },
+  }, */
 };
 
 function getColors(str) {

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?