From 9112a0c4f57622a39bb5b1dd80657c93d57e6904 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Mon, 27 Jan 2025 08:21:56 +0100
Subject: [PATCH] migrate 5 more themes

---
 packages/codemirror/themes.mjs              | 96 ++++++---------------
 packages/codemirror/themes/atomone.mjs      | 49 +++++++++++
 packages/codemirror/themes/aura.mjs         | 51 +++++++++++
 packages/codemirror/themes/bespin.mjs       | 38 ++++++++
 packages/codemirror/themes/darcula.mjs      | 46 ++++++++++
 packages/codemirror/themes/dracula.mjs      | 49 +++++++++++
 packages/codemirror/themes/theme-helper.mjs |  1 -
 7 files changed, 257 insertions(+), 73 deletions(-)
 create mode 100644 packages/codemirror/themes/atomone.mjs
 create mode 100644 packages/codemirror/themes/aura.mjs
 create mode 100644 packages/codemirror/themes/bespin.mjs
 create mode 100644 packages/codemirror/themes/darcula.mjs
 create mode 100644 packages/codemirror/themes/dracula.mjs

diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs
index 08d4b8b1..e4c25a9b 100644
--- a/packages/codemirror/themes.mjs
+++ b/packages/codemirror/themes.mjs
@@ -30,15 +30,20 @@
   xcodeLight,
 } from '@uiw/codemirror-themes-all'; */
 
-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';
-import teletext, { settings as teletextSettings } from './themes/teletext';
-import algoboy, { settings as algoboySettings } from './themes/algoboy';
-import terminal, { settings as terminalSettings } from './themes/terminal';
-import abcdef, { settings as abcdefSettings } from './themes/abcdef';
-import androidstudio, { settings as androidstudioSettings } from './themes/androidstudio';
+import strudelTheme, { settings as strudelThemeSettings } from './themes/strudel-theme.mjs';
+import bluescreen, { settings as bluescreenSettings } from './themes/bluescreen.mjs';
+import blackscreen, { settings as blackscreenSettings } from './themes/blackscreen.mjs';
+import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen.mjs';
+import teletext, { settings as teletextSettings } from './themes/teletext.mjs';
+import algoboy, { settings as algoboySettings } from './themes/algoboy.mjs';
+import terminal, { settings as terminalSettings } from './themes/terminal.mjs';
+import abcdef, { settings as abcdefSettings } from './themes/abcdef.mjs';
+import androidstudio, { settings as androidstudioSettings } from './themes/androidstudio.mjs';
+import atomone, { settings as atomOneSettings } from './themes/atomone.mjs';
+import aura, { settings as auraSettings } from './themes/aura.mjs';
+import bespin, { settings as bespinSettings } from './themes/bespin.mjs';
+import darcula, { settings as darculaSettings } from './themes/darcula.mjs';
+import dracula, { settings as draculaSettings } from './themes/dracula.mjs';
 import { setTheme } from '@strudel/draw';
 
 export const themes = {
@@ -51,12 +56,12 @@ export const themes = {
   terminal,
   abcdef,
   androidstudio,
-  /*atomone,
+  atomone,
   aura,
   bespin,
   darcula,
   dracula,
-  duotoneDark,
+  /*duotoneDark,
   eclipse,
   githubDark,
   gruvboxDark,
@@ -92,31 +97,9 @@ export const settings = {
   terminal: terminalSettings,
   abcdef: abcdefSettings,
   androidstudio: androidstudioSettings,
-  /*atomone: {
-    background: '#272C35',
-    lineBackground: '#272C3599',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#ffffff30',
-    selectionMatch: '#2B323D',
-    gutterBackground: '#272C35',
-    gutterForeground: '#465063',
-    gutterBorder: 'transparent',
-    lineHighlight: '#2B323D',
-  },
-  aura: {
-    background: '#21202e',
-    lineBackground: '#21202e99',
-    foreground: '#edecee',
-    caret: '#a277ff',
-    selection: '#3d375e7f',
-    selectionMatch: '#3d375e7f',
-    gutterBackground: '#21202e',
-    gutterForeground: '#edecee',
-    gutterBorder: 'transparent',
-    lineHighlight: '#a394f033',
-  },
-  bbedit: {
+  atomone: atomOneSettings,
+  aura: auraSettings,
+  /*bbedit: {
     light: true,
     background: '#FFFFFF',
     lineBackground: '#FFFFFF99',
@@ -128,42 +111,11 @@ export const settings = {
     gutterForeground: '#4D4D4C',
     gutterBorder: 'transparent',
     lineHighlight: '#00000012',
-  },
-  bespin: {
-    background: '#28211c',
-    lineBackground: '#28211c99',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#36312e',
-    selectionMatch: '#4f382b',
-    gutterBackground: '#28211c',
-    gutterForeground: '#666666',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  darcula: {
-    background: '#2B2B2B',
-    lineBackground: '#2B2B2B99',
-    foreground: '#f8f8f2',
-    caret: '#FFFFFF',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: 'rgba(255, 255, 255, 0.1)',
-    gutterForeground: '#999',
-    gutterBorder: 'transparent',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  dracula: {
-    background: '#282a36',
-    lineBackground: '#282a3699',
-    foreground: '#f8f8f2',
-    caret: '#f8f8f0',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: '#282a36',
-    gutterForeground: '#6D8A88',
-    gutterBorder: 'transparent',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
+  },*/
+  bespin: bespinSettings,
+  darcula: darculaSettings,
+  dracula: draculaSettings,
+  /*
   duotoneLight: {
     light: true,
     background: '#faf8f5',
diff --git a/packages/codemirror/themes/atomone.mjs b/packages/codemirror/themes/atomone.mjs
new file mode 100644
index 00000000..1839b495
--- /dev/null
+++ b/packages/codemirror/themes/atomone.mjs
@@ -0,0 +1,49 @@
+/**
+ * @name Atom One
+ * Atom One dark syntax theme
+ *
+ * https://github.com/atom/one-dark-syntax
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#272C35',
+  lineBackground: '#272C3599',
+  foreground: '#9d9b97',
+  caret: '#797977',
+  selection: '#ffffff30',
+  selectionMatch: '#2B323D',
+  gutterBackground: '#272C35',
+  gutterForeground: '#465063',
+  gutterBorder: 'transparent',
+  lineHighlight: '#2B323D',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#272C35',
+    foreground: '#9d9b97',
+    caret: '#797977',
+    selection: '#3d4c64',
+    selectionMatch: '#3d4c64',
+    gutterBackground: '#272C35',
+    gutterForeground: '#465063',
+    gutterBorder: 'transparent',
+    lineHighlight: '#2e3f5940',
+  },
+  styles: [
+    {
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
+      color: 'hsl(207, 82%, 66%)',
+    },
+    { tag: [t.tagName, t.heading], color: '#e06c75' },
+    { tag: t.comment, color: '#54636D' },
+    { tag: [t.propertyName], color: 'hsl(220, 14%, 71%)' },
+    { tag: [t.attributeName, t.number], color: 'hsl( 29, 54%, 61%)' },
+    { tag: t.className, color: 'hsl( 39, 67%, 69%)' },
+    { tag: t.keyword, color: 'hsl(286, 60%, 67%)' },
+    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: '#98c379' },
+  ],
+});
diff --git a/packages/codemirror/themes/aura.mjs b/packages/codemirror/themes/aura.mjs
new file mode 100644
index 00000000..b42a5839
--- /dev/null
+++ b/packages/codemirror/themes/aura.mjs
@@ -0,0 +1,51 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#21202e',
+  lineBackground: '#21202e99',
+  foreground: '#edecee',
+  caret: '#a277ff',
+  selection: '#3d375e7f',
+  selectionMatch: '#3d375e7f',
+  gutterBackground: '#21202e',
+  gutterForeground: '#edecee',
+  gutterBorder: 'transparent',
+  lineHighlight: '#a394f033',
+};
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#21202e',
+    foreground: '#edecee',
+    caret: '#a277ff',
+    selection: '#5a51898f',
+    selectionMatch: '#5a51898f',
+    gutterBackground: '#21202e',
+    gutterForeground: '#edecee',
+    gutterBorder: 'transparent',
+    lineHighlight: '#a394f033',
+  },
+  styles: [
+    { tag: t.keyword, color: '#a277ff' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#edecee' },
+    { tag: [t.propertyName], color: '#ffca85' },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#61ffca' },
+    { tag: [t.function(t.variableName), t.labelName], color: '#ffca85' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#61ffca' },
+    { tag: [t.definition(t.name), t.separator], color: '#edecee' },
+    { tag: [t.className], color: '#82e2ff' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#61ffca' },
+    { tag: [t.typeName], color: '#82e2ff' },
+    { tag: [t.operator, t.operatorKeyword], color: '#a277ff' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#61ffca' },
+    { tag: [t.meta, t.comment], color: '#6d6d6d' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#a277ff' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#edecee' },
+    { tag: t.invalid, color: '#ff6767' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});
diff --git a/packages/codemirror/themes/bespin.mjs b/packages/codemirror/themes/bespin.mjs
new file mode 100644
index 00000000..b15e85a0
--- /dev/null
+++ b/packages/codemirror/themes/bespin.mjs
@@ -0,0 +1,38 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#28211c',
+  lineBackground: '#28211c99',
+  foreground: '#9d9b97',
+  caret: '#797977',
+  selection: '#36312e',
+  selectionMatch: '#4f382b',
+  gutterBackground: '#28211c',
+  gutterForeground: '#666666',
+  lineHighlight: 'rgba(255, 255, 255, 0.1)',
+};
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#28211c',
+    foreground: '#9d9b97',
+    caret: '#797977',
+    selection: '#4f382b',
+    selectionMatch: '#4f382b',
+    gutterBackground: '#28211c',
+    gutterForeground: '#666666',
+    lineHighlight: '#ffffff1a',
+  },
+  styles: [
+    { tag: [t.atom, t.number, t.link, t.bool], color: '#9b859d' },
+    { tag: t.comment, color: '#937121' },
+    { tag: [t.keyword, t.tagName], color: '#cf6a4c' },
+    { tag: t.string, color: '#f9ee98' },
+    { tag: t.bracket, color: '#9d9b97' },
+    { tag: [t.variableName], color: '#5ea6ea' },
+    { tag: t.definition(t.variableName), color: '#cf7d34' },
+    { tag: [t.function(t.variableName), t.className], color: '#cf7d34' },
+    { tag: [t.propertyName, t.attributeName], color: '#54be0d' },
+  ],
+});
diff --git a/packages/codemirror/themes/darcula.mjs b/packages/codemirror/themes/darcula.mjs
new file mode 100644
index 00000000..ac61c6b1
--- /dev/null
+++ b/packages/codemirror/themes/darcula.mjs
@@ -0,0 +1,46 @@
+/**
+ * @name darcula
+ * @author darcula
+ * Name: IntelliJ IDEA darcula theme
+ * From IntelliJ IDEA by JetBrains
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+export const settings = {
+  background: '#2B2B2B',
+  lineBackground: '#2B2B2B99',
+  foreground: '#f8f8f2',
+  caret: '#FFFFFF',
+  selection: 'rgba(255, 255, 255, 0.1)',
+  selectionMatch: 'rgba(255, 255, 255, 0.2)',
+  gutterBackground: 'rgba(255, 255, 255, 0.1)',
+  gutterForeground: '#999',
+  gutterBorder: 'transparent',
+  lineHighlight: 'rgba(255, 255, 255, 0.1)',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#2B2B2B',
+    foreground: '#f8f8f2',
+    caret: '#FFFFFF',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    selectionMatch: 'rgba(255, 255, 255, 0.2)',
+    gutterBackground: 'rgba(255, 255, 255, 0.1)',
+    gutterForeground: '#999',
+    gutterBorder: 'transparent',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  styles: [
+    { tag: [t.atom, t.number], color: '#bd93f9' },
+    { tag: [t.comment], color: '#61A151' },
+    { tag: [t.string], color: '#6A8759' },
+    { tag: [t.variableName, t.operator], color: '#A9B7C6' },
+    { tag: [t.meta, t.className], color: '#A9B7C6' },
+    { tag: [t.propertyName], color: '#FFC66D' },
+    { tag: [t.keyword], color: '#CC7832' },
+    { tag: [t.tagName], color: '#ff79c6' },
+    { tag: [t.typeName], color: '#ffb86c' },
+  ],
+});
diff --git a/packages/codemirror/themes/dracula.mjs b/packages/codemirror/themes/dracula.mjs
new file mode 100644
index 00000000..e1e78d30
--- /dev/null
+++ b/packages/codemirror/themes/dracula.mjs
@@ -0,0 +1,49 @@
+/**
+ * @name dracula
+ * @author dracula
+ * Michael Kaminsky (http://github.com/mkaminsky11)
+ * Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#282a36',
+  lineBackground: '#282a3699',
+  foreground: '#f8f8f2',
+  caret: '#f8f8f0',
+  selection: 'rgba(255, 255, 255, 0.1)',
+  selectionMatch: 'rgba(255, 255, 255, 0.2)',
+  gutterBackground: '#282a36',
+  gutterForeground: '#6D8A88',
+  gutterBorder: 'transparent',
+  lineHighlight: 'rgba(255, 255, 255, 0.1)',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#282a36',
+    foreground: '#f8f8f2',
+    caret: '#f8f8f0',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    selectionMatch: 'rgba(255, 255, 255, 0.2)',
+    gutterBackground: '#282a36',
+    gutterForeground: '#6D8A88',
+    gutterBorder: 'transparent',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  styles: [
+    { tag: t.comment, color: '#6272a4' },
+    { tag: t.string, color: '#f1fa8c' },
+    { tag: t.atom, color: '#bd93f9' },
+    { tag: t.meta, color: '#f8f8f2' },
+    { tag: [t.keyword, t.operator, t.tagName], color: '#ff79c6' },
+    { tag: [t.function(t.propertyName), t.propertyName], color: '#66d9ef' },
+    {
+      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],
+      color: '#50fa7b',
+    },
+    { tag: t.atom, color: '#bd93f9' },
+  ],
+});
diff --git a/packages/codemirror/themes/theme-helper.mjs b/packages/codemirror/themes/theme-helper.mjs
index 06fe44ee..ee9bad8e 100644
--- a/packages/codemirror/themes/theme-helper.mjs
+++ b/packages/codemirror/themes/theme-helper.mjs
@@ -3,7 +3,6 @@ import { syntaxHighlighting } from '@codemirror/language';
 import { HighlightStyle } from '@codemirror/language';
 
 export const createTheme = ({ theme, settings, styles }) => {
-  console.log('create', settings);
   const _theme = EditorView.theme(
     {
       '&': {