Merge pull request #1268 from tidalcycles/theme-glowup

Theme glowup
tidalcycles · Jan 29, 2025 · f105ea6 · f105ea6
2 parents fac698e + 6307f75
commit f105ea6
Show file tree

Hide file tree

Showing 14 changed files with 132 additions and 98 deletions.
diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs
@@ -22,7 +22,7 @@ import gruvboxLight, { settings as gruvboxLightSettings } from './themes/gruvbox
 import materialDark, { settings as materialDarkSettings } from './themes/materialDark.mjs';
 import materialLight, { settings as materialLightSettings } from './themes/materialLight.mjs';
 import nord, { settings as nordSettings } from './themes/nord.mjs';
-import okaidia, { settings as okaidiaSettings } from './themes/okaidia.mjs';
+import monokai, { settings as monokaiSettings } from './themes/monokai.mjs';
 import solarizedDark, { settings as solarizedDarkSettings } from './themes/solarizedDark.mjs';
 import solarizedLight, { settings as solarizedLightSettings } from './themes/solarizedLight.mjs';
 import sublime, { settings as sublimeSettings } from './themes/sublime.mjs';
@@ -31,7 +31,7 @@ import tokyoNightStorm, { settings as tokyoNightStormSettings } from './themes/t
 import tokyoNightDay, { settings as tokyoNightDaySettings } from './themes/tokyoNightDay.mjs';
 import vscodeDark, { settings as vscodeDarkSettings } from './themes/vscodeDark.mjs';
 import vscodeLight, { settings as vscodeLightSettings } from './themes/vscodeLight.mjs';
-import xcodeDark, { settings as xcodeDarkSettings } from './themes/xcodeDark.mjs';
+// import xcodeDark, { settings as xcodeDarkSettings } from './themes/xcodeDark.mjs';
 import xcodeLight, { settings as xcodeLightSettings } from './themes/xcodeLight.mjs';
 import bbedit, { settings as bbeditSettings } from './themes/bbedit.mjs';
 import noctisLilac, { settings as noctisLilacSettings } from './themes/noctisLilac.mjs';
@@ -50,25 +50,25 @@ export const themes = {
   darcula,
   dracula,
   // todo: optimize
-  terminal,
-  bespin,
-  abcdef,
+  // bespin,
+  //abcdef,
   androidstudio,
   duotoneDark,
-  duotoneLight,
-  eclipse,
   githubDark,
   gruvboxDark,
   materialDark,
   nord,
-  okaidia,
+  monokai,
   solarizedDark,
   sublime,
   tokyoNight,
   tokyoNightStorm,
   vscodeDark,
-  xcodeDark,
+  //xcodeDark,
+  // LIGHT
   bbedit,
+  //duotoneLight,
+  eclipse,
   githubLight,
   gruvboxLight,
   materialLight,
@@ -106,7 +106,7 @@ export const settings = {
   materialLight: materialLightSettings,
   noctisLilac: noctisLilacSettings,
   nord: nordSettings,
-  okaidia: okaidiaSettings,
+  monokai: monokaiSettings,
   solarizedLight: solarizedLightSettings,
   solarizedDark: solarizedDarkSettings,
   sublime: sublimeSettings,
@@ -115,7 +115,7 @@ export const settings = {
   vscodeDark: vscodeDarkSettings,
   vscodeLight: vscodeLightSettings,
   xcodeLight: xcodeLightSettings,
-  xcodeDark: xcodeDarkSettings,
+  //xcodeDark: xcodeDarkSettings,
   tokyoNightDay: tokyoNightDaySettings,
 };
 

diff --git a/packages/codemirror/themes/abcdef.mjs b/packages/codemirror/themes/abcdef.mjs
@@ -26,11 +26,14 @@ export default createTheme({
     caret: '#00FF00',
     selection: '#515151',
     selectionMatch: '#515151',
-    gutterBackground: '#555',
-    gutterForeground: '#FFFFFF',
+    // gutterBackground: '#555',
+    gutterBackground: 'transparent',
+    /* gutterForeground: '#FFFFFF', */
+    gutterForeground: '#7a7b7c',
     lineHighlight: '#0a6bcb3d',
   },
   styles: [
+    { tag: t.labelName, color: 'inherit' },
     { tag: t.keyword, color: 'darkgoldenrod', fontWeight: 'bold' },
     { tag: t.atom, color: '#77F' },
     { tag: t.comment, color: '#7a7b7c', fontStyle: 'italic' },

diff --git a/packages/codemirror/themes/algoboy.mjs b/packages/codemirror/themes/algoboy.mjs
@@ -1,42 +1,60 @@
 import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
+
+const palettes = {
+  // https://www.deviantart.com/advancedfan2020/art/Game-Boy-Palette-Set-Color-HEX-Part-09-920495662
+  'Central Florida A': ['#FFF630', '#B3AC22', '#666213', '#191905'],
+  'Central Florida B': ['#38CEBA', '#279082', '#16524A', '#061513'],
+  'Central Florida C': ['#FF8836', '#B35F26', '#663616', '#190E05'],
+  'Central Florida D': ['#E07070', '#9D4E4E', '#5A2D2D', '#160B0B'],
+  'Central Florida E': ['#7AA4CB', '#55738E', '#314251', '#0C1014'],
+  'Feminine Energy A': ['#DC5686', '#9A415E', '#582536', '#16090D'],
+  'Feminine Energy B': ['#D0463C', '#92312A', '#531c18', '#150706'],
+  'Feminine Energy C': ['#D86918', '#974A11', '#562A0A', '#160A02'],
+  'Feminine Energy D': ['#EFC54F', '#A78A36', '#604F20', '#181408'],
+  'Feminine Energy E': ['#866399', '#5e456b', '#36283d', '#0d0a0f'],
+  'Sour Watermelon A': ['#993366', '#6B2447', '#3D1429', '#0F050A'],
+  'Sour Watermelon B': ['#996666', '#6B4747', '#3D2929', '#0F0A0A'],
+  'Sour Watermelon C': ['#999966', '#686B47', '#3d3d29', '#0f0f0A'],
+  'Sour Watermelon D': ['#99cc66', '#6b8f47', '#3d5229', '#0f140a'],
+  'Sour Watermelon E': ['#99ff66', '#6bb347', '#3d6629', '#0f190a'],
+  //https://www.deviantart.com/advancedfan2020/art/Game-Boy-Palette-Set-Color-HEX-Part-02-920073260
+  'Peri Peaceful A': ['#909BE9', '#656DA3', '#3A3E5D', '#0e0f17'],
+  'Peri Peaceful B': ['#68628d', '#494563', '#2a2738', '#0a0a0e'], // pretty dim
+  'Peri Peaceful E': ['#b5a0a9', '#7f7076', '#484044', '#121011'],
+  'Hichem Palette B': ['#4fa3a5', '#377273', '#204142', '#081010'],
+  'Hichem Palette C': ['#Fe6f9b', '#b24e6d', '#662c3e', '#190b0f'],
+  'Hichem Palette D': ['#ffbb5a', '#b3833f', '#664b24', '#191309'],
+  'JSR2 A': ['#E0EFC0', '#9da786', '#5a604d', '#161813'],
+};
+const palette = palettes['Sour Watermelon B'];
 export const settings = {
-  background: '#9bbc0f',
-  foreground: '#0f380f', // whats that?
-  caret: '#0f380f',
-  selection: '#306230',
-  selectionMatch: '#ffffff26',
-  lineHighlight: '#8bac0f',
-  lineBackground: '#9bbc0f50',
+  background: palette[3],
+  foreground: palette[1],
+  caret: palette[0],
+  selection: palette[0],
+  selectionMatch: palette[1],
+  lineHighlight: palette[3],
+  lineBackground: palette[3] + '90',
   //lineBackground: 'transparent',
   gutterBackground: 'transparent',
-  gutterForeground: '#0f380f',
-  light: true,
+  gutterForeground: palette[0],
+  light: false,
   // customStyle: '.cm-line { line-height: 1 }',
 };
 export default createTheme({
-  theme: 'light',
+  theme: 'dark',
   settings,
   styles: [
-    { tag: t.labelName, color: 'inherit' },
-    { tag: t.keyword, color: 'inherit' },
-    { tag: t.operator, color: 'inherit' },
-    { tag: t.special(t.variableName), color: 'inherit' },
-    { tag: t.typeName, color: 'inherit' },
-    { tag: t.atom, color: 'inherit' },
-    { tag: t.number, color: 'inherit' },
-    { tag: t.definition(t.variableName), color: 'inherit' },
-    { tag: t.string, color: 'inherit' },
-    { tag: t.special(t.string), color: 'inherit' },
-    { tag: t.comment, color: 'inherit' },
-    { tag: t.variableName, color: 'inherit' },
-    { tag: t.tagName, color: 'inherit' },
-    { tag: t.bracket, color: 'inherit' },
-    { tag: t.meta, color: 'inherit' },
-    { tag: t.attributeName, color: 'inherit' },
-    { tag: t.propertyName, color: 'inherit' },
-    { tag: t.className, color: 'inherit' },
-    { tag: t.invalid, color: 'inherit' },
-    { tag: [t.unit, t.punctuation], color: 'inherit' },
+    { tag: t.comment, color: palette[2] },
+    { tag: t.string, color: palette[1] },
+    { tag: [t.atom, t.number], color: palette[1] },
+    { tag: [t.meta, t.labelName, t.variableName], color: palette[0] },
+    {
+      tag: [t.keyword, t.tagName, t.arithmeticOperator],
+      color: palette[1],
+    },
+    { tag: [t.function(t.variableName), t.propertyName], color: palette[0] },
+    { tag: t.atom, color: palette[1] },
   ],
 });
diff --git a/packages/codemirror/themes/androidstudio.mjs b/packages/codemirror/themes/androidstudio.mjs
@@ -22,15 +22,20 @@ export default createTheme({
     caret: '#00FF00',
     selection: '#4e5254',
     selectionMatch: '#4e5254',
+    gutterForeground: '#cccccc50',
     lineHighlight: '#7f85891f',
   },
   styles: [
-    { tag: [t.keyword, t.deleted, t.className], color: '#cc7832' },
-    { tag: [t.number, t.literal, t.derefOperator], color: '#6897bb' },
-    { tag: [t.link, t.variableName], color: '#629755' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: [t.keyword, t.deleted, t.className], color: '#a9b7c6' },
+    { tag: [t.number, t.literal], color: '#6897bb' },
+    //{ tag: [t.link, t.variableName], color: '#629755' },
+    { tag: [t.link, t.variableName], color: '#a9b7c6' },
     { tag: [t.comment, t.quote], color: 'grey' },
     { tag: [t.meta, t.documentMeta], color: '#bbb529' },
-    { tag: [t.string, t.propertyName, t.attributeValue], color: '#6a8759' },
+    //{ tag: [t.string, t.propertyName, t.attributeValue], color: '#6a8759' },
+    { tag: [t.propertyName, t.attributeValue], color: '#a9b7c6' },
+    { tag: [t.string], color: '#6a8759' },
     { tag: [t.heading, t.typeName], color: '#ffc66d' },
     { tag: [t.attributeName], color: '#a9b7c6' },
     { tag: [t.emphasis], fontStyle: 'italic' },

diff --git a/packages/codemirror/themes/atomone.mjs b/packages/codemirror/themes/atomone.mjs
@@ -10,7 +10,7 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#272C35',
   lineBackground: '#272C3599',
-  foreground: '#9d9b97',
+  foreground: 'hsl(220, 14%, 71%)',
   caret: '#797977',
   selection: '#ffffff30',
   selectionMatch: '#2B323D',
@@ -40,7 +40,7 @@ export default createTheme({
     },
     { tag: [t.tagName, t.heading], color: '#e06c75' },
     { tag: t.comment, color: '#54636D' },
-    { tag: [t.propertyName], color: 'hsl(220, 14%, 71%)' },
+    { tag: [t.variableName, t.propertyName, t.labelName], 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%)' },

diff --git a/packages/codemirror/themes/darcula.mjs b/packages/codemirror/themes/darcula.mjs
@@ -7,8 +7,8 @@
 import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 export const settings = {
-  background: '#2B2B2B',
-  lineBackground: '#2B2B2B99',
+  background: '#242424',
+  lineBackground: '#24242499',
   foreground: '#f8f8f2',
   caret: '#FFFFFF',
   selection: 'rgba(255, 255, 255, 0.1)',
@@ -22,22 +22,24 @@ export const settings = {
 export default createTheme({
   theme: 'dark',
   settings: {
-    background: '#2B2B2B',
+    background: '#242424',
     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)',
+    gutterBackground: 'transparent',
     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.labelName, color: '#CCCCCC' },
+    { tag: [t.atom, t.number], color: '#7A9EC2' },
+    { tag: [t.comment], color: '#707070' },
     { tag: [t.string], color: '#6A8759' },
-    { tag: [t.variableName, t.operator], color: '#A9B7C6' },
-    { tag: [t.meta, t.className], color: '#A9B7C6' },
+    { tag: [t.variableName, t.operator], color: '#CCCCCC' },
+    { tag: [t.function(t.variableName), t.propertyName], color: '#FFC66D' },
+    { tag: [t.meta, t.className], color: '#FFC66D' },
     { tag: [t.propertyName], color: '#FFC66D' },
     { tag: [t.keyword], color: '#CC7832' },
     { tag: [t.tagName], color: '#ff79c6' },

diff --git a/packages/codemirror/themes/dracula.mjs b/packages/codemirror/themes/dracula.mjs
@@ -4,6 +4,7 @@
  * Michael Kaminsky (http://github.com/mkaminsky11)
  * Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
  */
+// this is different from https://thememirror.net/dracula
 import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 
@@ -15,11 +16,13 @@ export const settings = {
   selection: 'rgba(255, 255, 255, 0.1)',
   selectionMatch: 'rgba(255, 255, 255, 0.2)',
   gutterBackground: '#282a36',
-  gutterForeground: '#6D8A88',
+  gutterForeground: '#6272a4',
   gutterBorder: 'transparent',
   lineHighlight: 'rgba(255, 255, 255, 0.1)',
 };
 
+const purple = '#BD93F9';
+
 export default createTheme({
   theme: 'dark',
   settings: {
@@ -29,21 +32,20 @@ export default createTheme({
     selection: 'rgba(255, 255, 255, 0.1)',
     selectionMatch: 'rgba(255, 255, 255, 0.2)',
     gutterBackground: '#282a36',
-    gutterForeground: '#6D8A88',
+    gutterForeground: '#6272a4',
     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.atom, t.number], color: purple },
+    { tag: [t.meta, t.labelName, t.variableName], color: '#f8f8f2' },
     {
-      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],
-      color: '#50fa7b',
+      tag: [t.keyword, t.tagName, t.arithmeticOperator],
+      color: '#ff79c6',
     },
+    { tag: [t.function(t.variableName), t.propertyName], color: '#50fa7b' },
     { tag: t.atom, color: '#bd93f9' },
   ],
 });
diff --git a/packages/codemirror/themes/duotoneDark.mjs b/packages/codemirror/themes/duotoneDark.mjs
@@ -9,7 +9,7 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#2a2734',
   lineBackground: '#2a273499',
-  foreground: '#6c6783',
+  foreground: '#eeebff',
   caret: '#ffad5c',
   selection: 'rgba(255, 255, 255, 0.1)',
   gutterBackground: '#2a2734',
@@ -23,20 +23,20 @@ export default createTheme({
     background: '#2a2734',
     foreground: '#6c6783',
     caret: '#ffad5c',
-    selection: '#91ff6c26',
-    selectionMatch: '#91ff6c26',
+    selection: '#9a86fd',
+    selectionMatch: '#9a86fd',
     gutterBackground: '#2a2734',
     gutterForeground: '#545167',
     lineHighlight: '#36334280',
   },
   styles: [
-    { tag: [t.comment, t.bracket], color: '#6c6783' },
+    { tag: [t.comment, t.bracket, t.operator], color: '#6c6783' },
     { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#ffcc99' },
     { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName], color: '#eeebff' },
-    { tag: [t.typeName, t.url], color: '#7a63ee' },
-    { tag: t.operator, color: '#ffad5c' },
+    { tag: [t.typeName, t.url], color: '#eeebff' },
     { tag: t.string, color: '#ffb870' },
-    { tag: [t.propertyName], color: '#9a86fd' },
-    { tag: [t.unit, t.punctuation], color: '#e09142' },
+    /* { tag: [t.propertyName], color: '#9a86fd' }, */
+    { tag: [t.propertyName], color: '#eeebff' },
+    { tag: t.labelName, color: '#eeebff' },
   ],
 });
diff --git a/packages/codemirror/themes/githubDark.mjs b/packages/codemirror/themes/githubDark.mjs
@@ -25,10 +25,12 @@ export default createTheme({
     lineHighlight: '#36334280',
   },
   styles: [
+    { tag: t.labelName, color: '#d2a8ff' },
     { tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' },
     { tag: [t.comment, t.bracket], color: '#8b949e' },
     { tag: [t.className, t.propertyName], color: '#d2a8ff' },
-    { tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#79c0ff' },
+    { tag: [t.variableName, t.attributeName], color: '#d2a8ff' },
+    { tag: [t.number, t.operator], color: '#79c0ff' },
     { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#ff7b72' },
     { tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
     { tag: [t.name, t.quote], color: '#7ee787' },

diff --git a/packages/codemirror/themes/gruvboxDark.mjs b/packages/codemirror/themes/gruvboxDark.mjs
@@ -35,15 +35,15 @@ export default createTheme({
     { tag: t.keyword, color: '#fb4934' },
     { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: '#8ec07c' },
     { tag: [t.variableName], color: '#83a598' },
-    { tag: [t.function(t.variableName)], color: '#b8bb26', fontStyle: 'bold' },
+    { tag: [t.function(t.variableName)], color: '#8ec07c', fontStyle: 'bold' },
     { tag: [t.labelName], color: '#ebdbb2' },
     { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#d3869b' },
     { tag: [t.definition(t.name), t.separator], color: '#ebdbb2' },
     { tag: [t.brace], color: '#ebdbb2' },
     { tag: [t.annotation], color: '#fb4934d' },
     { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#d3869b' },
     { tag: [t.typeName, t.className], color: '#fabd2f' },
-    { tag: [t.operator, t.operatorKeyword], color: '#fb4934' },
+    { tag: [t.operatorKeyword], color: '#fb4934' },
     {
       tag: [t.tagName],
       color: '#8ec07c',