diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs index 75dff5b2..b3bf3178 100644 --- a/packages/codemirror/themes.mjs +++ b/packages/codemirror/themes.mjs @@ -28,8 +28,13 @@ import solarizedLight, { settings as solarizedLightSettings } from './themes/sol import sublime, { settings as sublimeSettings } from './themes/sublime.mjs'; import tokyoNight, { settings as tokyoNightSettings } from './themes/tokyoNight.mjs'; import tokyoNightStorm, { settings as tokyoNightStormSettings } from './themes/tokioNightStorm.mjs'; +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'; @@ -40,14 +45,15 @@ export const themes = { whitescreen, teletext, algoboy, - terminal, - abcdef, - androidstudio, atomone, aura, - bespin, darcula, dracula, + // todo: optimize + terminal, + bespin, + abcdef, + androidstudio, duotoneDark, duotoneLight, eclipse, @@ -61,20 +67,18 @@ export const themes = { tokyoNight, tokyoNightStorm, vscodeDark, - //xcodeDark, - //bbedit, + xcodeDark, + bbedit, githubLight, gruvboxLight, materialLight, vscodeLight, - //noctisLilac, + noctisLilac, solarizedLight, - //tokyoNightDay, - //xcodeLight, + tokyoNightDay, + xcodeLight, }; -// lineBackground is background with 50% opacity, to make sure the selection below is visible - export const settings = { strudelTheme: strudelThemeSettings, bluescreen: bluescreenSettings, @@ -87,19 +91,7 @@ export const settings = { androidstudio: androidstudioSettings, atomone: atomOneSettings, aura: auraSettings, - /*bbedit: { - light: true, - background: '#FFFFFF', - lineBackground: '#FFFFFF99', - foreground: '#000000', - caret: '#FBAC52', - selection: '#FFD420', - selectionMatch: '#FFD420', - gutterBackground: '#f5f5f5', - gutterForeground: '#4D4D4C', - gutterBorder: 'transparent', - lineHighlight: '#00000012', - },*/ + bbedit: bbeditSettings, bespin: bespinSettings, darcula: darculaSettings, dracula: draculaSettings, @@ -112,18 +104,7 @@ export const settings = { gruvboxLight: gruvboxLightSettings, materialDark: materialDarkSettings, materialLight: materialLightSettings, - /*noctisLilac: { - light: true, - background: '#f2f1f8', - lineBackground: '#f2f1f899', - foreground: '#0c006b', - caret: '#5c49e9', - selection: '#d5d1f2', - selectionMatch: '#d5d1f2', - gutterBackground: '#f2f1f8', - gutterForeground: '#0c006b70', - lineHighlight: '#e1def3', - },*/ + noctisLilac: noctisLilacSettings, nord: nordSettings, okaidia: okaidiaSettings, solarizedLight: solarizedLightSettings, @@ -133,39 +114,9 @@ export const settings = { tokyoNightStorm: tokyoNightStormSettings, vscodeDark: vscodeDarkSettings, vscodeLight: vscodeLightSettings, - /*tokyoNightDay: { - light: true, - background: '#e1e2e7', - lineBackground: '#e1e2e799', - foreground: '#3760bf', - caret: '#3760bf', - selection: '#99a7df', - selectionMatch: '#99a7df', - gutterBackground: '#e1e2e7', - gutterForeground: '#3760bf', - gutterBorder: 'transparent', - lineHighlight: '#5f5faf11', - }, - xcodeLight: { - light: true, - background: '#fff', - lineBackground: '#ffffff99', - foreground: '#3D3D3D', - selection: '#BBDFFF', - selectionMatch: '#BBDFFF', - gutterBackground: '#fff', - gutterForeground: '#AFAFAF', - lineHighlight: '#EDF4FF', - }, - xcodeDark: { - background: '#292A30', - lineBackground: '#292A3099', - foreground: '#CECFD0', - caret: '#fff', - selection: '#727377', - selectionMatch: '#727377', - lineHighlight: '#2F3239', - }, */ + xcodeLight: xcodeLightSettings, + xcodeDark: xcodeDarkSettings, + tokyoNightDay: tokyoNightDaySettings, }; function getColors(str) { diff --git a/packages/codemirror/themes/bbedit.mjs b/packages/codemirror/themes/bbedit.mjs new file mode 100644 index 00000000..535bf9ea --- /dev/null +++ b/packages/codemirror/themes/bbedit.mjs @@ -0,0 +1,46 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + light: true, + background: '#FFFFFF', + lineBackground: '#FFFFFF99', + foreground: '#000000', + caret: '#FBAC52', + selection: '#FFD420', + selectionMatch: '#FFD420', + gutterBackground: '#f5f5f5', + gutterForeground: '#4D4D4C', + gutterBorder: 'transparent', + lineHighlight: '#00000012', +}; + +export default createTheme({ + theme: 'light', + settings: { + background: '#FFFFFF', + foreground: '#000000', + caret: '#FBAC52', + selection: '#FFD420', + selectionMatch: '#FFD420', + gutterBackground: '#f5f5f5', + gutterForeground: '#4D4D4C', + gutterBorder: 'transparent', + lineHighlight: '#00000012', + }, + styles: [ + { tag: [t.meta, t.comment], color: '#804000' }, + { tag: [t.keyword, t.strong], color: '#0000FF' }, + { tag: [t.number], color: '#FF0080' }, + { tag: [t.string], color: '#FF0080' }, + { tag: [t.variableName], color: '#006600' }, + { tag: [t.escape], color: '#33CC33' }, + { tag: [t.tagName], color: '#1C02FF' }, + { tag: [t.heading], color: '#0C07FF' }, + { tag: [t.quote], color: '#000000' }, + { tag: [t.list], color: '#B90690' }, + { tag: [t.documentMeta], color: '#888888' }, + { tag: [t.function(t.variableName)], color: '#0000A2' }, + { tag: [t.definition(t.typeName), t.typeName], color: '#6D79DE' }, + ], +}); diff --git a/packages/codemirror/themes/bespin.mjs b/packages/codemirror/themes/bespin.mjs index b15e85a0..41af821b 100644 --- a/packages/codemirror/themes/bespin.mjs +++ b/packages/codemirror/themes/bespin.mjs @@ -1,3 +1,4 @@ +// this is different from https://thememirror.net/bespin import { tags as t } from '@lezer/highlight'; import { createTheme } from './theme-helper.mjs'; diff --git a/packages/codemirror/themes/noctisLilac.mjs b/packages/codemirror/themes/noctisLilac.mjs new file mode 100644 index 00000000..b11c6b40 --- /dev/null +++ b/packages/codemirror/themes/noctisLilac.mjs @@ -0,0 +1,50 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + light: true, + background: '#f2f1f8', + lineBackground: '#f2f1f899', + foreground: '#0c006b', + caret: '#5c49e9', + selection: '#d5d1f2', + selectionMatch: '#d5d1f2', + gutterBackground: '#f2f1f8', + gutterForeground: '#0c006b70', + lineHighlight: '#e1def3', +}; + +export default createTheme({ + theme: 'light', + settings: { + background: '#f2f1f8', + foreground: '#0c006b', + caret: '#5c49e9', + selection: '#d5d1f2', + selectionMatch: '#d5d1f2', + gutterBackground: '#f2f1f8', + gutterForeground: '#0c006b70', + lineHighlight: '#16067911', + }, + styles: [ + { tag: t.comment, color: '#9995b7' }, + { + tag: t.keyword, + color: '#ff5792', + fontWeight: 'bold', + }, + { tag: [t.definitionKeyword, t.modifier], color: '#ff5792' }, + { tag: [t.className, t.tagName, t.definition(t.typeName)], color: '#0094f0' }, + { tag: [t.number, t.bool, t.null, t.special(t.brace)], color: '#5842ff' }, + { tag: [t.definition(t.propertyName), t.function(t.variableName)], color: '#0095a8' }, + { tag: t.typeName, color: '#b3694d' }, + { tag: [t.propertyName, t.variableName], color: '#fa8900' }, + { tag: t.operator, color: '#ff5792' }, + { tag: t.self, color: '#e64100' }, + { tag: [t.string, t.regexp], color: '#00b368' }, + { tag: [t.paren, t.bracket], color: '#0431fa' }, + { tag: t.labelName, color: '#00bdd6' }, + { tag: t.attributeName, color: '#e64100' }, + { tag: t.angleBracket, color: '#9995b7' }, + ], +}); diff --git a/packages/codemirror/themes/solarizedLight.mjs b/packages/codemirror/themes/solarizedLight.mjs index 7eedf3f7..b6828ff6 100644 --- a/packages/codemirror/themes/solarizedLight.mjs +++ b/packages/codemirror/themes/solarizedLight.mjs @@ -1,6 +1,8 @@ import { tags as t } from '@lezer/highlight'; import { createTheme } from './theme-helper.mjs'; +// this is slightly different from https://thememirror.net/solarized-light + export const settings = { light: true, background: '#fdf6e3', diff --git a/packages/codemirror/themes/tokyoNightDay.mjs b/packages/codemirror/themes/tokyoNightDay.mjs new file mode 100644 index 00000000..1cd58a41 --- /dev/null +++ b/packages/codemirror/themes/tokyoNightDay.mjs @@ -0,0 +1,53 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + light: true, + background: '#e1e2e7', + lineBackground: '#e1e2e799', + foreground: '#3760bf', + caret: '#3760bf', + selection: '#99a7df', + selectionMatch: '#99a7df', + gutterBackground: '#e1e2e7', + gutterForeground: '#3760bf', + gutterBorder: 'transparent', + lineHighlight: '#5f5faf11', +}; + +export default createTheme({ + theme: 'light', + settings: { + background: '#e1e2e7', + foreground: '#3760bf', + caret: '#3760bf', + selection: '#99a7df', + selectionMatch: '#99a7df', + gutterBackground: '#e1e2e7', + gutterForeground: '#3760bf', + gutterBorder: 'transparent', + lineHighlight: '#5f5faf11', + }, + styles: [ + { tag: t.keyword, color: '#007197' }, + { tag: [t.name, t.deleted, t.character, t.macroName], color: '#3760bf' }, + { tag: [t.propertyName], color: '#3760bf' }, + { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#587539' }, + { tag: [t.function(t.variableName), t.labelName], color: '#3760bf' }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#3760bf' }, + { tag: [t.definition(t.name), t.separator], color: '#3760bf' }, + { tag: [t.className], color: '#3760bf' }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b15c00' }, + { tag: [t.typeName], color: '#007197', fontStyle: '#007197' }, + { tag: [t.operator, t.operatorKeyword], color: '#007197' }, + { tag: [t.url, t.escape, t.regexp, t.link], color: '#587539' }, + { tag: [t.meta, t.comment], color: '#848cb5' }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.heading, fontWeight: 'bold', color: '#b15c00' }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#3760bf' }, + { tag: t.invalid, color: '#f52a65' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + ], +}); diff --git a/packages/codemirror/themes/vscodeDark.mjs b/packages/codemirror/themes/vscodeDark.mjs index 59b9b125..cb46d328 100644 --- a/packages/codemirror/themes/vscodeDark.mjs +++ b/packages/codemirror/themes/vscodeDark.mjs @@ -1,6 +1,3 @@ -/** - * https://github.com/uiwjs/react-codemirror/issues/409 - */ import { tags as t } from '@lezer/highlight'; import { createTheme } from './theme-helper.mjs'; diff --git a/packages/codemirror/themes/vscodeLight.mjs b/packages/codemirror/themes/vscodeLight.mjs index 208fd1b8..9a734511 100644 --- a/packages/codemirror/themes/vscodeLight.mjs +++ b/packages/codemirror/themes/vscodeLight.mjs @@ -1,6 +1,3 @@ -/** - * https://github.com/uiwjs/react-codemirror/issues/409 - */ import { tags as t } from '@lezer/highlight'; import { createTheme } from './theme-helper.mjs'; diff --git a/packages/codemirror/themes/xcodeDark.mjs b/packages/codemirror/themes/xcodeDark.mjs new file mode 100644 index 00000000..41440cfd --- /dev/null +++ b/packages/codemirror/themes/xcodeDark.mjs @@ -0,0 +1,34 @@ +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' }, + ], +}); diff --git a/packages/codemirror/themes/xcodeLight.mjs b/packages/codemirror/themes/xcodeLight.mjs new file mode 100644 index 00000000..8977c133 --- /dev/null +++ b/packages/codemirror/themes/xcodeLight.mjs @@ -0,0 +1,38 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from './theme-helper.mjs'; + +export const settings = { + light: true, + background: '#fff', + lineBackground: '#ffffff99', + foreground: '#3D3D3D', + selection: '#BBDFFF', + selectionMatch: '#BBDFFF', + gutterBackground: '#fff', + gutterForeground: '#AFAFAF', + lineHighlight: '#EDF4FF', +}; + +export default createTheme({ + theme: 'light', + settings: { + background: '#fff', + foreground: '#3D3D3D', + selection: '#BBDFFF', + selectionMatch: '#BBDFFF', + gutterBackground: '#fff', + gutterForeground: '#AFAFAF', + lineHighlight: '#d5e6ff69', + }, + styles: [ + { tag: [t.comment, t.quote], color: '#707F8D' }, + { tag: [t.typeName, t.typeOperator], color: '#aa0d91' }, + { tag: [t.keyword], color: '#aa0d91', fontWeight: 'bold' }, + { tag: [t.string, t.meta], color: '#D23423' }, + { tag: [t.name], color: '#032f62' }, + { tag: [t.typeName], color: '#522BB2' }, + { tag: [t.variableName], color: '#23575C' }, + { tag: [t.definition(t.variableName)], color: '#327A9E' }, + { tag: [t.regexp, t.link], color: '#0e0eff' }, + ], +});