diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index aab231d2..5886c476 100644 --- a/packages/codemirror/codemirror.mjs +++ b/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'; diff --git a/packages/codemirror/index.mjs b/packages/codemirror/index.mjs index b4bb5673..3a5f2a23 100644 --- a/packages/codemirror/index.mjs +++ b/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'; diff --git a/packages/codemirror/themes-vanilla.mjs b/packages/codemirror/themes-vanilla.mjs deleted file mode 100644 index 96606443..00000000 --- a/packages/codemirror/themes-vanilla.mjs +++ /dev/null @@ -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); - } -} diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs index f25cf9ce..20804632 100644 --- a/packages/codemirror/themes.mjs +++ b/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) { diff --git a/packages/codemirror/themes/algoboy.mjs b/packages/codemirror/themes/algoboy.mjs index 5c6a91b8..b74b4302 100644 --- a/packages/codemirror/themes/algoboy.mjs +++ b/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? diff --git a/packages/codemirror/themes/blackscreen.mjs b/packages/codemirror/themes/blackscreen.mjs index ca67ea9a..2c45df11 100644 --- a/packages/codemirror/themes/blackscreen.mjs +++ b/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? diff --git a/packages/codemirror/themes/bluescreen.mjs b/packages/codemirror/themes/bluescreen.mjs index 4f5dff2f..97d165c9 100644 --- a/packages/codemirror/themes/bluescreen.mjs +++ b/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', diff --git a/packages/codemirror/themes/strudel-theme-vanilla.mjs b/packages/codemirror/themes/strudel-theme-vanilla.mjs deleted file mode 100644 index 2fb63834..00000000 --- a/packages/codemirror/themes/strudel-theme-vanilla.mjs +++ /dev/null @@ -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)]; diff --git a/packages/codemirror/themes/strudel-theme.mjs b/packages/codemirror/themes/strudel-theme.mjs index 4ec3ab92..7fd6bb65 100644 --- a/packages/codemirror/themes/strudel-theme.mjs +++ b/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' }, diff --git a/packages/codemirror/themes/teletext.mjs b/packages/codemirror/themes/teletext.mjs index 630329c1..7857cb13 100644 --- a/packages/codemirror/themes/teletext.mjs +++ b/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'; diff --git a/packages/codemirror/themes/terminal.mjs b/packages/codemirror/themes/terminal.mjs index a5b4506f..b07bdb8d 100644 --- a/packages/codemirror/themes/terminal.mjs +++ b/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? diff --git a/packages/codemirror/themes/theme-helper.mjs b/packages/codemirror/themes/theme-helper.mjs new file mode 100644 index 00000000..06fe44ee --- /dev/null +++ b/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)]; +}; diff --git a/packages/codemirror/themes/whitescreen.mjs b/packages/codemirror/themes/whitescreen.mjs index ff860537..a2937c38 100644 --- a/packages/codemirror/themes/whitescreen.mjs +++ b/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?