Merge pull request #1326 from daslyfe/origin/jade/newthemes

feat: new themes + theme improvements

packages/codemirror/flash.mjs

@@ -11,7 +11,9 @@ export const flashField = StateField.define({
       for (let e of tr.effects) {
         if (e.is(setFlash)) {
           if (e.value && tr.newDoc.length > 0) {
-            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
+            const mark = Decoration.mark({
+              attributes: { style: `background-color: rgba(255,255,255, .4); filter: invert(10%)` },
+            });
             flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
           } else {
             flash = Decoration.set([]);

packages/codemirror/themes.mjs

@@ -5,16 +5,15 @@ import whitescreen, { settings as whitescreenSettings } from './themes/whitescre
 import teletext, { settings as teletextSettings } from './themes/teletext.mjs';
 import algoboy, { settings as algoboySettings } from './themes/algoboy.mjs';
 import CutiePi, { settings as CutiePiSettings } from './themes/CutiePi.mjs';
-import terminal, { settings as terminalSettings } from './themes/terminal.mjs';
-import abcdef, { settings as abcdefSettings } from './themes/abcdef.mjs';
+import sonicPink, { settings as sonicPinkSettings } from './themes/sonic-pink.mjs';
+import redText, { settings as redTextSettings } from './themes/red-text.mjs';
+import greenText, { settings as greenTextSettings } from './themes/green-text.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 duotoneDark, { settings as duotoneDarkSettings } from './themes/duotoneDark.mjs';
-import duotoneLight, { settings as duotoneLightSettings } from './themes/duotoneLight.mjs';
 import eclipse, { settings as eclipseSettings } from './themes/eclipse.mjs';
 import githubDark, { settings as githubDarkSettings } from './themes/githubDark.mjs';
 import githubLight, { settings as githubLightSettings } from './themes/githubLight.mjs';
@@ -32,52 +31,47 @@ 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 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';
 
 import { setTheme } from '@strudel/draw';
-
 export const themes = {
   strudelTheme,
-  bluescreen,
-  blackscreen,
-  whitescreen,
-  teletext,
   algoboy,
+  androidstudio,
   atomone,
   aura,
+  bbedit,
+  blackscreen,
+  bluescreen,
+  CutiePi,
   darcula,
   dracula,
-  // todo: optimize
-  // bespin,
-  //abcdef,
-  androidstudio,
   duotoneDark,
+  eclipse,
   githubDark,
-  CutiePi,
+  githubLight,
+  greenText,
   gruvboxDark,
+  gruvboxLight,
+  sonicPink,
   materialDark,
-  nord,
+  materialLight,
   monokai,
+  noctisLilac,
+  nord,
+  redText,
   solarizedDark,
+  solarizedLight,
   sublime,
+  teletext,
   tokyoNight,
+  tokyoNightDay,
   tokyoNightStorm,
   vscodeDark,
-  //xcodeDark,
-  // LIGHT
-  bbedit,
-  //duotoneLight,
-  eclipse,
-  githubLight,
-  gruvboxLight,
-  materialLight,
   vscodeLight,
-  noctisLilac,
-  solarizedLight,
-  tokyoNightDay,
+  whitescreen,
   xcodeLight,
 };
 
@@ -88,21 +82,19 @@ export const settings = {
   whitescreen: whitescreenSettings,
   teletext: teletextSettings,
   algoboy: algoboySettings,
-  terminal: terminalSettings,
-  abcdef: abcdefSettings,
   androidstudio: androidstudioSettings,
   atomone: atomOneSettings,
   aura: auraSettings,
   bbedit: bbeditSettings,
-  bespin: bespinSettings,
   darcula: darculaSettings,
   dracula: draculaSettings,
-  duotoneLight: duotoneLightSettings,
   duotoneDark: duotoneDarkSettings,
   eclipse: eclipseSettings,
   CutiePi: CutiePiSettings,
+  sonicPink: sonicPinkSettings,
   githubLight: githubLightSettings,
   githubDark: githubDarkSettings,
+  greenText: greenTextSettings,
   gruvboxDark: gruvboxDarkSettings,
   gruvboxLight: gruvboxLightSettings,
   materialDark: materialDarkSettings,
@@ -110,6 +102,7 @@ export const settings = {
   noctisLilac: noctisLilacSettings,
   nord: nordSettings,
   monokai: monokaiSettings,
+  redText: redTextSettings,
   solarizedLight: solarizedLightSettings,
   solarizedDark: solarizedDarkSettings,
   sublime: sublimeSettings,
@@ -118,7 +111,6 @@ export const settings = {
   vscodeDark: vscodeDarkSettings,
   vscodeLight: vscodeLightSettings,
   xcodeLight: xcodeLightSettings,
-  //xcodeDark: xcodeDarkSettings,
   tokyoNightDay: tokyoNightDaySettings,
 };
 

packages/codemirror/themes/abcdef.mjs

@@ -1,55 +0,0 @@
-/**
- * @name abcdef
- * @author codemirror.net
- * https://codemirror.net/5/theme/abcdef.css
- */
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
-
-export const settings = {
-  background: '#0f0f0f',
-  lineBackground: '#0f0f0f99',
-  foreground: '#defdef',
-  caret: '#00FF00',
-  selection: '#515151',
-  selectionMatch: '#515151',
-  gutterBackground: '#555',
-  gutterForeground: '#FFFFFF',
-  lineHighlight: '#314151',
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#0f0f0f',
-    foreground: '#defdef',
-    caret: '#00FF00',
-    selection: '#515151',
-    selectionMatch: '#515151',
-    // 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' },
-    { tag: t.number, color: 'violet' },
-    { tag: t.definition(t.variableName), color: '#fffabc' },
-    { tag: t.variableName, color: '#abcdef' },
-    { tag: t.function(t.variableName), color: '#fffabc' },
-    { tag: t.typeName, color: '#FFDD44' },
-    { tag: t.tagName, color: '#def' },
-    { tag: t.string, color: '#2b4' },
-    { tag: t.meta, color: '#C9F' },
-    // { tag: t.qualifier, color: '#FFF700' },
-    // { tag: t.builtin, color: '#30aabc' },
-    { tag: t.bracket, color: '#8a8a8a' },
-    { tag: t.attributeName, color: '#DDFF00' },
-    { tag: t.heading, color: 'aquamarine', fontWeight: 'bold' },
-    { tag: t.link, color: 'blueviolet', fontWeight: 'bold' },
-  ],
-});

packages/codemirror/themes/algoboy.mjs

@@ -54,6 +54,7 @@ export default createTheme({
       tag: [t.keyword, t.tagName, t.arithmeticOperator],
       color: palette[1],
     },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: palette[0] },
     { tag: [t.function(t.variableName), t.propertyName], color: palette[0] },
     { tag: t.atom, color: palette[1] },
   ],

packages/codemirror/themes/atomone.mjs

@@ -38,12 +38,14 @@ export default createTheme({
       tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
       color: 'hsl(207, 82%, 66%)',
     },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: 'hsl( 29, 54%, 61%)' },
     { tag: [t.tagName, t.heading], color: '#e06c75' },
     { tag: t.comment, color: '#54636D' },
     { 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%)' },
+
     { tag: [t.string, t.regexp, t.special(t.propertyName)], color: '#98c379' },
   ],
 });

packages/codemirror/themes/bespin.mjs

@@ -1,39 +0,0 @@
-// this is different from https://thememirror.net/bespin
-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' },
-  ],
-});

packages/codemirror/themes/green-text.mjs

@@ -0,0 +1,39 @@
+/**
+ * @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';
+
+const hex = ['#000000', '#8ed675', '#56bd2a', '#54636D', '#171717'];
+
+export const settings = {
+  background: hex[0],
+  lineBackground: 'transparent',
+  foreground: hex[2],
+  selection: hex[4],
+  selectionMatch: hex[0],
+  gutterBackground: hex[0],
+  gutterForeground: hex[3],
+  gutterBorder: 'transparent',
+  lineHighlight: hex[0],
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    {
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
+      color: hex[2],
+    },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: hex[1] },
+    { tag: t.comment, color: hex[3] },
+    { tag: [t.variableName, t.propertyName, t.labelName], color: hex[2] },
+    { tag: [t.attributeName, t.number], color: hex[1] },
+    { tag: t.keyword, color: hex[2] },
+    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[1] },
+  ],
+});

packages/codemirror/themes/red-text.mjs

@@ -0,0 +1,39 @@
+/**
+ * @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';
+
+const hex = ['#000000', '#ff5356', '#bd312a', '#54636D', '#171717'];
+
+export const settings = {
+  background: hex[0],
+  lineBackground: 'transparent',
+  foreground: hex[2],
+  selection: hex[4],
+  selectionMatch: hex[0],
+  gutterBackground: hex[0],
+  gutterForeground: hex[3],
+  gutterBorder: 'transparent',
+  lineHighlight: hex[0],
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    {
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
+      color: hex[2],
+    },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: hex[1] },
+    { tag: t.comment, color: hex[3] },
+    { tag: [t.variableName, t.propertyName, t.labelName], color: hex[2] },
+    { tag: [t.attributeName, t.number], color: hex[1] },
+    { tag: t.keyword, color: hex[2] },
+    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[1] },
+  ],
+});

packages/codemirror/themes/sonic-pink.mjs

@@ -0,0 +1,39 @@
+/**
+ * @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';
+
+const hex = ['#1e1e1e', '#fbde2d', '#ff1493', '#4c83ff', '#ededed', '#cccccc', '#ffffff30', '#dc2f8c'];
+
+export const settings = {
+  background: '#000000',
+  lineBackground: 'transparent',
+  foreground: hex[4],
+  selection: hex[6],
+  gutterBackground: hex[0],
+  gutterForeground: hex[5],
+  gutterBorder: 'transparent',
+  lineHighlight: hex[0],
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    {
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
+      color: hex[4],
+    },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: hex[3] },
+
+    { tag: t.comment, color: '#54636D' },
+    { tag: [t.variableName, t.propertyName, t.labelName], color: hex[4] },
+    { tag: [t.attributeName, t.number], color: hex[3] },
+    { tag: t.keyword, color: hex[1] },
+    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[2] },
+  ],
+});

packages/codemirror/themes/strudel-theme.mjs

@@ -5,14 +5,11 @@ 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',
 };
 
@@ -20,6 +17,7 @@ export default createTheme({
   theme: 'dark',
   settings,
   styles: [
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#89ddff' },
     { tag: t.labelName, color: '#89ddff' },
     { tag: t.keyword, color: '#c792ea' },
     { tag: t.operator, color: '#89ddff' },

packages/codemirror/themes/xcodeDark.mjs

@@ -1,34 +0,0 @@
-import { tags as t } from '@lezer/highlight';
-import { createTheme } from './theme-helper.mjs';
-
-export const settings = {
-  background: '#292A30',
-  lineBackground: '#292A3099',
-  foreground: '#CECFD0',
-  caret: '#fff',
-  selection: '#727377',
-  selectionMatch: '#727377',
-  lineHighlight: '#2F3239',
-};
-
-export default createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#292A30',
-    foreground: '#CECFD0',
-    caret: '#fff',
-    selection: '#727377',
-    selectionMatch: '#727377',
-    lineHighlight: '#ffffff0f',
-  },
-  styles: [
-    { tag: [t.comment, t.quote], color: '#7F8C98' },
-    { tag: [t.keyword], color: '#FF7AB2', fontWeight: 'bold' },
-    { tag: [t.string, t.meta], color: '#FF8170' },
-    { tag: [t.typeName], color: '#DABAFF' },
-    { tag: [t.definition(t.variableName)], color: '#6BDFFF' },
-    { tag: [t.name], color: '#6BAA9F' },
-    { tag: [t.variableName], color: '#ACF2E4' },
-    { tag: [t.regexp, t.link], color: '#FF8170' },
-  ],
-});

website/src/repl/components/panel/SelectInput.jsx

@@ -5,7 +5,7 @@ export function SelectInput({ value, options, onChange, onClick, isDisabled }) {
     <select
       disabled={isDisabled}
       onClick={onClick}
-      className="p-2 bg-background rounded-md text-foreground"
+      className="p-2 bg-background rounded-md text-foreground  border-foreground"
       value={value ?? ''}
       onChange={(e) => onChange(e.target.value)}
     >

website/src/repl/components/panel/SettingsTab.jsx

@@ -20,7 +20,7 @@ function Checkbox({ label, value, onChange, disabled = false }) {
 function SelectInput({ value, options, onChange }) {
   return (
     <select
-      className="p-2 bg-background rounded-md text-foreground"
+      className="p-2 bg-background rounded-md text-foreground  border-foreground"
       value={value}
       onChange={(e) => onChange(e.target.value)}
     >

website/src/repl/components/textbox/Textbox.jsx

@@ -3,7 +3,10 @@ import cx from '@src/cx.mjs';
 export function Textbox({ onChange, className, ...inputProps }) {
   return (
     <input
-      className={cx('p-1 bg-background rounded-md my-2 border-foreground', className)}
+      className={cx(
+        'p-2 bg-background rounded-md  border-foreground text-foreground placeholder-foreground',
+        className,
+      )}
       onChange={(e) => onChange(e.target.value)}
       {...inputProps}
     />