-
- 1
+ 1
-
- 2
+ 2
-
- 3
+ 3
-
- 4
+ 4
-
- 5
+ 5
-
- 6
+ 6
-
- 7
+ 7
-
- 8
+ 8
-
- 9
+ 9
-
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),
-];