From 427a6e470fdf93de3fc294d5efb5bdae8625f3cb Mon Sep 17 00:00:00 2001 From: Raphael Forment Date: Fri, 15 Dec 2023 22:42:06 +0100 Subject: [PATCH] small progress --- index.html | 33 +++--- src/EditorSetup.ts | 121 ++++++++++----------- src/InterfaceLogic.ts | 4 +- src/main.ts | 23 ++-- src/style.css | 35 +++++++ src/themes/toposTheme.ts | 221 --------------------------------------- 6 files changed, 124 insertions(+), 313 deletions(-) delete mode 100644 src/themes/toposTheme.ts diff --git a/index.html b/index.html index a596a12..8165fad 100644 --- a/index.html +++ b/index.html @@ -74,6 +74,10 @@ .subtitle { @apply bg-selection_foreground text-sm lg:text-xl border-b py-4 text-foreground } + + .tab_panel { + @apply inline-block lg:px-4 px-8 py-1 text-selection_foreground + } @@ -264,7 +268,7 @@ @@ -371,11 +375,11 @@ Upload universes - @@ -520,33 +524,32 @@
diff --git a/src/EditorSetup.ts b/src/EditorSetup.ts index 0168fa8..0103822 100644 --- a/src/EditorSetup.ts +++ b/src/EditorSetup.ts @@ -92,7 +92,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => }, ".cm-activeLine": { // backgroundColor: highlightBackground - backgroundColor: `${selection_background}`, + backgroundColor: `${selection_foreground}`, }, ".cm-selectionMatch": { backgroundColor: yellow, @@ -123,17 +123,17 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => }, ".cm-tooltip": { border: "none", - backgroundColor: yellow, + backgroundColor: background, }, ".cm-tooltip .cm-tooltip-arrow:before": {}, ".cm-tooltip .cm-tooltip-arrow:after": { - borderTopColor: yellow, - borderBottomColor: yellow, + borderTopColor: background, + borderBottomColor: background, }, ".cm-tooltip-autocomplete": { "& > ul > li[aria-selected]": { - backgroundColor: blue, - color: blue, + backgroundColor: background, + color: background, }, }, }, @@ -141,60 +141,25 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => ); let toposHighlightStyle = HighlightStyle.define([ + { tag: t.paren, color: brightwhite }, + { tag: [t.propertyName, t.punctuation, t.variableName], color: brightwhite }, { tag: t.keyword, color: yellow }, - { - tag: [t.name, t.deleted, t.character, t.macroName], - color: red, - }, - { tag: [t.propertyName], color: red }, - { tag: [t.variableName], color: red }, + { tag: [t.name, t.deleted, t.character, t.macroName], color: red, }, { tag: [t.function(t.variableName)], color: blue }, { tag: [t.labelName], color: red }, - { - tag: [t.color, t.constant(t.name), t.standard(t.name)], color: yellow, - }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, }, { tag: [t.definition(t.name), t.separator], color: magenta }, - { tag: [t.brace], color: magenta }, - { - tag: [t.annotation], - color: white , - }, - { - tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], - color: yellow , - }, - { - tag: [t.typeName, t.className], - color: magenta, - }, - { - tag: [t.operator, t.operatorKeyword], - color: blue , - }, - { - tag: [t.tagName], - color: blue, - }, - { - tag: [t.squareBracket], - color: yellow, - }, - { - tag: [t.angleBracket], - color: yellow, - }, - { - tag: [t.attributeName], - color: red, - }, - { - tag: [t.regexp], - color: brightgreen, - }, - { - tag: [t.quote], - color: green, - }, + { tag: [t.brace], color: white }, + { tag: [t.annotation], color: blue, }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, }, + { tag: [t.typeName, t.className], color: magenta, }, + { tag: [t.operator, t.operatorKeyword], color: blue, }, + { tag: [t.tagName], color: blue, }, + { tag: [t.squareBracket], color: blue, }, + { tag: [t.angleBracket], color: blue, }, + { tag: [t.attributeName], color: red, }, + { tag: [t.regexp], color: brightgreen, }, + { tag: [t.quote], color: green, }, { tag: [t.string], color: green }, { tag: t.link, @@ -206,14 +171,14 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => tag: [t.url, t.escape, t.special(t.string)], color: green, }, - { tag: [t.meta], color: brightblack }, - { tag: [t.comment], color: brightblack, fontStyle: "italic" }, - { tag: t.monospace, color: black }, - { tag: t.strong, fontWeight: "bold", color: magenta }, - { tag: t.emphasis, fontStyle: "italic", color: magenta }, + { tag: [t.meta], color: brightwhite }, + { tag: [t.comment], color: brightwhite, fontStyle: "italic" }, + { tag: t.monospace, color: brightwhite }, + { tag: t.strong, fontWeight: "bold", color: white }, + { tag: t.emphasis, fontStyle: "italic", color: white }, { tag: t.strikethrough, textDecoration: "line-through" }, - { tag: t.heading, fontWeight: "bold", color: magenta }, - { tag: t.heading1, fontWeight: "bold", color: magenta }, + { tag: t.heading, fontWeight: "bold", color: white }, + { tag: t.heading1, fontWeight: "bold", color: white }, { tag: [t.heading2, t.heading3, t.heading4], fontWeight: "bold", @@ -238,6 +203,35 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => ] } +const debugTheme = EditorView.theme({ + ".cm-line span": { + position: "relative", + }, + ".cm-line span:hover::after": { + position: "absolute", + bottom: "100%", + left: 0, + background: "black", + color: "white", + border: "solid 2px", + borderRadius: "5px", + content: "var(--tags)", + width: `max-content`, + padding: "1px 4px", + zIndex: 10, + pointerEvents: "none", + }, +}); + +const debugHighlightStyle = HighlightStyle.define( + // @ts-ignore + Object.entries(t).map(([key, value]) => { + return { tag: value, "--tags": `"tag.${key}"` }; + }) +); +const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)]; + + export const jsCompletions = javascriptLanguage.data.of({ autocomplete: toposCompletions, }); @@ -304,6 +298,7 @@ export const installEditor = (app: Editor) => { editorSetup, app.themeCompartment.of( getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")), + // debug ), app.chosenLanguage.of(javascript()), ]; diff --git a/src/InterfaceLogic.ts b/src/InterfaceLogic.ts index 78dd218..54432e1 100644 --- a/src/InterfaceLogic.ts +++ b/src/InterfaceLogic.ts @@ -59,9 +59,9 @@ export const installInterfaceLogic = (app: Editor) => { for (let i = 0; i < tabs.length; i++) { tabs[i].addEventListener("click", (event) => { // Updating the CSS accordingly - tabs[i].classList.add("bg-orange-300"); + tabs[i].classList.add("bg-foreground"); for (let j = 0; j < tabs.length; j++) { - if (j != i) tabs[j].classList.remove("bg-orange-300"); + if (j != i) tabs[j].classList.remove("bg-foreground"); } app.currentFile().candidate = app.view.state.doc.toString(); diff --git a/src/main.ts b/src/main.ts index 5e2342a..f716378 100644 --- a/src/main.ts +++ b/src/main.ts @@ -34,7 +34,6 @@ import { makeNumberExtensions } from "./extensions/NumberExtensions"; // @ts-ignore import { registerSW } from "virtual:pwa-register"; import colors from "./colors.json"; -import { code } from "./documentation/basics/code"; if ("serviceWorker" in navigator) { registerSW(); @@ -211,7 +210,7 @@ export class Editor { loadUniverserFromUrl(this); // Set the color scheme for the application - this.readTheme(this.settings.theme); + // this.readTheme(this.settings.theme); } private getBuffer(type: string): any { @@ -267,7 +266,7 @@ export class Editor { let list = document.createElement("ul"); list.className = - "lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800"; + "lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-selection_background bg-background lg:mb-4 border rounded-lg"; list.append( ...Object.keys(this.universes).map((it) => { let item = itemTemplate.content.cloneNode(true) as DocumentFragment; @@ -299,9 +298,9 @@ export class Editor { */ const tabs = document.querySelectorAll('[id^="tab-"]'); const tab = tabs[i] as HTMLElement; - tab.classList.add("bg-color3"); + tab.classList.add("bg-foreground"); for (let j = 0; j < tabs.length; j++) { - if (j != i) tabs[j].classList.remove("bg-color3"); + if (j != i) tabs[j].classList.remove("bg-foreground_selection"); } let tab_id = tab.id.split("-")[1]; this.local_index = parseInt(tab_id); @@ -324,15 +323,15 @@ export class Editor { let changeColor = (button: HTMLElement) => { interface_buttons.forEach((button) => { let svg = button.children[0] as HTMLElement; - if (svg.classList.contains("text-color3")) { - svg.classList.remove("text-color3"); - button.classList.remove("text-color3"); + if (svg.classList.contains("text-foreground_selection")) { + svg.classList.remove("text-foreground_selection"); + button.classList.remove("text-foreground_selection"); } }); button.children[0].classList.remove("text-white"); - button.children[0].classList.add("text-color3"); - button.classList.add("text-color3"); - button.classList.add("fill-color3"); + button.children[0].classList.add("text-foreground_selection"); + button.classList.add("text-foreground_selection"); + button.classList.add("fill-foreground_selection"); }; switch (mode) { @@ -447,7 +446,7 @@ export class Editor { unfocusPlayButtons() { document.querySelectorAll('[id^="play-button-"]').forEach((button) => { - button.children[0].classList.remove("fill-color3"); + button.children[0].classList.remove("fill-foreground_selection"); button.children[0].classList.remove("animate-pulse"); }); } diff --git a/src/style.css b/src/style.css index de6b660..fa629f8 100644 --- a/src/style.css +++ b/src/style.css @@ -1176,6 +1176,11 @@ video { background-color: rgb(var(--red) / var(--tw-bg-opacity)); } +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(var(--white) / var(--tw-bg-opacity)); +} + .p-1 { padding: 0.25rem; } @@ -1242,6 +1247,11 @@ video { padding-bottom: 1rem; } +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + .pb-1 { padding-bottom: 0.25rem; } @@ -1426,6 +1436,11 @@ video { color: rgb(var(--selection_background) / var(--tw-text-opacity)); } +.text-brightred { + --tw-text-opacity: 1; + color: rgb(var(--brightred) / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } @@ -1472,10 +1487,20 @@ video { background-color: rgb(var(--background) / var(--tw-bg-opacity)); } +.hover\:bg-foreground:hover { + --tw-bg-opacity: 1; + background-color: rgb(var(--foreground) / var(--tw-bg-opacity)); +} + .hover\:fill-black:hover { fill: rgb(var(--black) / 1); } +.hover\:text-xl:hover { + font-size: 1.25rem; + line-height: 1.75rem; +} + .hover\:text-black:hover { --tw-text-opacity: 1; color: rgb(var(--black) / var(--tw-text-opacity)); @@ -1486,6 +1511,16 @@ video { color: rgb(var(--foreground) / var(--tw-text-opacity)); } +.hover\:text-selection_foreground:hover { + --tw-text-opacity: 1; + color: rgb(var(--selection_foreground) / var(--tw-text-opacity)); +} + +.hover\:text-red:hover { + --tw-text-opacity: 1; + color: rgb(var(--red) / var(--tw-text-opacity)); +} + .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; diff --git a/src/themes/toposTheme.ts b/src/themes/toposTheme.ts deleted file mode 100644 index 0d019cc..0000000 --- a/src/themes/toposTheme.ts +++ /dev/null @@ -1,221 +0,0 @@ -import { EditorView } from "@codemirror/view"; -import { Extension } from "@codemirror/state"; -import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"; -import { tags as t } from "@lezer/highlight"; - -const base00 = "#262626", - base01 = "#3B4252", - base02 = "#BBBBBB", - base03 = "#4C566A", - base04 = "#D8DEE9", - base05 = "#E5E9F0", - base07 = "#8FBCBB", - base_red = "#BF616A", - base_deeporange = "#D08770", - base_pink = "#B48EAD", - base_cyan = "#FBCF8B", - base_yellow = "#88C0D0", - base_orange = "#D08770", - base_indigo = "#5E81AC", - base_purple = "#B48EAD", - base_green = "#A3BE8C", - base_lightgreen = "#A3BE8C"; - -const invalid = base_red, - darkBackground = "#262626", - highlightBackground = "#252525", - // background = base00, - tooltipBackground = base01, - cursor = base04; - -/// The editor theme styles for Material Dark. -export const toposDarkTheme = EditorView.theme( - { - "&": { - color: base05, - // backgroundColor: background, - backgroundColor: "transparent", - fontSize: "24px", - fontFamily: "IBM Plex Mono", - }, - ".cm-content": { - caretColor: cursor, - fontFamily: "IBM Plex Mono", - }, - ".cm-cursor, .cm-dropCursor": { - borderLeftColor: cursor, - }, - "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": - { - backgroundColor: base00, - border: `0.5px solid ${base00}`, - }, - ".cm-panels": { - backgroundColor: darkBackground, - color: base05, - }, - ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, - ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, - ".cm-search.cm-panel": { backgroundColor: "transparent" }, - ".cm-searchMatch": { - outline: `1px solid ${base_cyan}`, - }, - ".cm-searchMatch.cm-searchMatch-selected": { - backgroundColor: highlightBackground, - }, - ".cm-activeLine": { - // backgroundColor: highlightBackground - backgroundColor: "rgb(76,76,106, 0.1)", - }, - ".cm-selectionMatch": { - backgroundColor: base04, - outline: `1px solid ${base_red}`, - }, - - "&.cm-focused .cm-matchingBracket": { - color: base02, - // outline: `1px solid ${base02}`, - }, - - "&.cm-focused .cm-nonmatchingBracket": { - color: base_red, - }, - - ".cm-gutters": { - //backgroundColor: base00, - backgroundColor: "transparent", - color: base02, - }, - - ".cm-activeLineGutter": { - backgroundColor: highlightBackground, - color: base02, - }, - - ".cm-foldPlaceholder": { - border: "none", - color: `${base07}`, - }, - - ".cm-tooltip": { - border: "none", - backgroundColor: tooltipBackground, - }, - ".cm-tooltip .cm-tooltip-arrow:before": {}, - ".cm-tooltip .cm-tooltip-arrow:after": { - borderTopColor: tooltipBackground, - borderBottomColor: tooltipBackground, - }, - ".cm-tooltip-autocomplete": { - "& > ul > li[aria-selected]": { - backgroundColor: highlightBackground, - color: base03, - }, - }, - }, - { dark: true }, -); - -/// The highlighting style for code in the Material Dark theme. -export const toposDarkHighlightStyle = HighlightStyle.define([ - { tag: t.keyword, color: base_purple }, - { - tag: [t.name, t.deleted, t.character, t.macroName], - color: base_cyan, - }, - { tag: [t.propertyName], color: base_yellow }, - { tag: [t.variableName], color: base05 }, - { tag: [t.function(t.variableName)], color: base_cyan }, - { tag: [t.labelName], color: base_purple }, - { - tag: [t.color, t.constant(t.name), t.standard(t.name)], - color: base_yellow, - }, - { tag: [t.definition(t.name), t.separator], color: base_pink }, - { tag: [t.brace], color: base_purple }, - { - tag: [t.annotation], - color: invalid, - }, - { - tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], - color: base_orange, - }, - { - tag: [t.typeName, t.className], - color: base_orange, - }, - { - tag: [t.operator, t.operatorKeyword], - color: base_indigo, - }, - { - tag: [t.tagName], - color: base_deeporange, - }, - { - tag: [t.squareBracket], - color: base_red, - }, - { - tag: [t.angleBracket], - color: base02, - }, - { - tag: [t.attributeName], - color: base05, - }, - { - tag: [t.regexp], - color: invalid, - }, - { - tag: [t.quote], - color: base_green, - }, - { tag: [t.string], color: base_lightgreen }, - { - tag: t.link, - color: base_cyan, - textDecoration: "underline", - textUnderlinePosition: "under", - }, - { - tag: [t.url, t.escape, t.special(t.string)], - color: base_yellow, - }, - { tag: [t.meta], color: base03 }, - { tag: [t.comment], color: base02, fontStyle: "italic" }, - { tag: t.monospace, color: base05 }, - { tag: t.strong, fontWeight: "bold", color: base_red }, - { tag: t.emphasis, fontStyle: "italic", color: base_lightgreen }, - { tag: t.strikethrough, textDecoration: "line-through" }, - { tag: t.heading, fontWeight: "bold", color: base_yellow }, - { tag: t.heading1, fontWeight: "bold", color: base_yellow }, - { - tag: [t.heading2, t.heading3, t.heading4], - fontWeight: "bold", - color: base_yellow, - }, - { - tag: [t.heading5, t.heading6], - color: base_yellow, - }, - { tag: [t.atom, t.bool, t.special(t.variableName)], color: base_cyan }, - { - tag: [t.processingInstruction, t.inserted], - color: base_red, - }, - { - tag: [t.contentSeparator], - color: base_cyan, - }, - { tag: t.invalid, color: base02, borderBottom: `1px dotted ${base_red}` }, -]); - -/// Extension to enable the Material Dark theme (both the editor theme and -/// the highlight style). -export const toposTheme: Extension = [ - toposDarkTheme, - syntaxHighlighting(toposDarkHighlightStyle), -];