BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small progress

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-15 22:42:06 +01:00
parent 17e30a506e
commit 427a6e470f
6 changed files with 124 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@ -74,6 +74,10 @@
.subtitle { .subtitle {
@apply bg-selection_foreground text-sm lg:text-xl border-b py-4 text-foreground @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
}
</style> </style>
<body id="all" class="z-0 overflow-y-hidden bg-black"> <body id="all" class="z-0 overflow-y-hidden bg-black">
@ -264,7 +268,7 @@
<!-- This modal is used for switching between buffers --> <!-- This modal is used for switching between buffers -->
<div id="modal-buffers" class="invisible opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0"> <div id="modal-buffers" class="invisible opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground"> <div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
<p class="text-semibold lg:text-2xl text-sm pb-4 text-color2">Known universes</p> <p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p> <p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
<div id="disclaimer" class="pb-4"> <div id="disclaimer" class="pb-4">
<form id="universe-creator"> <form id="universe-creator">
@ -276,11 +280,11 @@
</svg> </svg>
</div> </div>
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg neutral-800 " placeholder="Buffer..." required> <input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg neutral-800 " placeholder="Buffer..." required>
<button id="load-universe-button" class="text-black absolute right-2.5 bottom-2.5 white hover:white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button> <button id="load-universe-button" class="bg-background text-selection_background absolute right-2.5 bottom-2.5 focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
</div> </div>
</form> </form>
<div class="mt-2 flex space-x-6 border-t rounded-b border-spacing-y-4"> <div class="mt-2 flex space-x-6 border-t rounded-b border-spacing-y-4">
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 hover:neutral-700 neutral-800 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Close</button> <button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-background text-selection_background">Close</button>
</div> </div>
</div> </div>
@ -371,11 +375,11 @@
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span class="text-selection_background">Upload universes</span> <span class="text-selection_background">Upload universes</span>
</button> </button>
<button id="destroy-universes" class="bg-red font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background"> <button id="destroy-universes" class="bg-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg> </svg>
<span class="text-selection_background">Destroy universes</span> <span class="text-brightred">Destroy universes</span>
</button> </button>
</div> </div>
</div> </div>
@ -520,33 +524,32 @@
<div class="min-w-screen flex grow flex-col"> <div class="min-w-screen flex grow flex-col">
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center neutral-900 space-x-1 lg:space-x-8"> <ul id="local-script-tabs" class=" flex text-xl font-medium text-center neutral-900 space-x-1 lg:space-x-8">
<li class="pl-5"> <li class="pl-5">
<a title="Local Script 1 (F1)" id="tab-1" class="orange-300 inline-block lg:px-4 px-2 py-1">1</a> <a title="Local Script 1 (F1)" id="tab-1" class="tab_panel">1</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 2 (F2)" id="tab-2" class="inline-block lg:px-4 px-2 py-1">2</a> <a title="Local Script 2 (F2)" id="tab-2" class="tab_panel">2</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 3 (F3)" id="tab-3" class="inline-block lg:px-4 px-2 py-1">3</a> <a title="Local Script 3 (F3)" id="tab-3" class="tab_panel">3</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 4 (F4)" id="tab-4" class="inline-block lg:px-4 px-2 py-1">4</a> <a title="Local Script 4 (F4)" id="tab-4" class="tab_panel">4</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 5 (F5)" id="tab-5" class="inline-block lg:px-4 px-2 py-1">5</a> <a title="Local Script 5 (F5)" id="tab-5" class="tab_panel">5</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 6 (F6)" id="tab-6" class="inline-block lg:px-4 px-2 py-1">6</a> <a title="Local Script 6 (F6)" id="tab-6" class="tab_panel">6</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 7 (F7)" id="tab-7" class="inline-block lg:px-4 px-2 py-1">7</a> <a title="Local Script 7 (F7)" id="tab-7" class="tab_panel">7</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 8 (F8)" id="tab-8" class="inline-block lg:px-4 px-2 py-1">8</a> <a title="Local Script 8 (F8)" id="tab-8" class="tab_panel">8</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 9 (F9)" id="tab-9" class="inline-block lg:px-4 px-2 py-1">9</a> <a title="Local Script 9 (F9)" id="tab-9" class="tab_panel">9</a>
</li> </li>
</ul> </ul>
<!-- Here comes the editor itself --> <!-- Here comes the editor itself -->
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden"> <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">

121
src/EditorSetup.ts
View File

@ -92,7 +92,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
}, },
".cm-activeLine": { ".cm-activeLine": {
// backgroundColor: highlightBackground // backgroundColor: highlightBackground
backgroundColor: `${selection_background}`, backgroundColor: `${selection_foreground}`,
}, },
".cm-selectionMatch": { ".cm-selectionMatch": {
backgroundColor: yellow, backgroundColor: yellow,
@ -123,17 +123,17 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
}, },
".cm-tooltip": { ".cm-tooltip": {
border: "none", border: "none",
backgroundColor: yellow, backgroundColor: background,
}, },
".cm-tooltip .cm-tooltip-arrow:before": {}, ".cm-tooltip .cm-tooltip-arrow:before": {},
".cm-tooltip .cm-tooltip-arrow:after": { ".cm-tooltip .cm-tooltip-arrow:after": {
borderTopColor: yellow, borderTopColor: background,
borderBottomColor: yellow, borderBottomColor: background,
}, },
".cm-tooltip-autocomplete": { ".cm-tooltip-autocomplete": {
"& > ul > li[aria-selected]": { "& > ul > li[aria-selected]": {
backgroundColor: blue, backgroundColor: background,
color: blue, color: background,
}, },
}, },
}, },
@ -141,60 +141,25 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
); );
let toposHighlightStyle = HighlightStyle.define([ 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.keyword, color: yellow },
{ { tag: [t.name, t.deleted, t.character, t.macroName], color: red, },
tag: [t.name, t.deleted, t.character, t.macroName],
color: red,
},
{ tag: [t.propertyName], color: red },
{ tag: [t.variableName], color: red },
{ tag: [t.function(t.variableName)], color: blue }, { tag: [t.function(t.variableName)], color: blue },
{ tag: [t.labelName], color: red }, { tag: [t.labelName], color: red },
{ { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, },
tag: [t.color, t.constant(t.name), t.standard(t.name)], color: yellow,
},
{ tag: [t.definition(t.name), t.separator], color: magenta }, { tag: [t.definition(t.name), t.separator], color: magenta },
{ tag: [t.brace], color: magenta }, { tag: [t.brace], color: white },
{ { tag: [t.annotation], color: blue, },
tag: [t.annotation], { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, },
color: white , { tag: [t.typeName, t.className], color: magenta, },
}, { tag: [t.operator, t.operatorKeyword], color: blue, },
{ { tag: [t.tagName], color: blue, },
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], { tag: [t.squareBracket], color: blue, },
color: yellow , { tag: [t.angleBracket], color: blue, },
}, { tag: [t.attributeName], color: red, },
{ { tag: [t.regexp], color: brightgreen, },
tag: [t.typeName, t.className], { tag: [t.quote], color: green, },
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.string], color: green }, { tag: [t.string], color: green },
{ {
tag: t.link, tag: t.link,
@ -206,14 +171,14 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
tag: [t.url, t.escape, t.special(t.string)], tag: [t.url, t.escape, t.special(t.string)],
color: green, color: green,
}, },
{ tag: [t.meta], color: brightblack }, { tag: [t.meta], color: brightwhite },
{ tag: [t.comment], color: brightblack, fontStyle: "italic" }, { tag: [t.comment], color: brightwhite, fontStyle: "italic" },
{ tag: t.monospace, color: black }, { tag: t.monospace, color: brightwhite },
{ tag: t.strong, fontWeight: "bold", color: magenta }, { tag: t.strong, fontWeight: "bold", color: white },
{ tag: t.emphasis, fontStyle: "italic", color: magenta }, { tag: t.emphasis, fontStyle: "italic", color: white },
{ tag: t.strikethrough, textDecoration: "line-through" }, { tag: t.strikethrough, textDecoration: "line-through" },
{ tag: t.heading, fontWeight: "bold", color: magenta }, { tag: t.heading, fontWeight: "bold", color: white },
{ tag: t.heading1, fontWeight: "bold", color: magenta }, { tag: t.heading1, fontWeight: "bold", color: white },
{ {
tag: [t.heading2, t.heading3, t.heading4], tag: [t.heading2, t.heading3, t.heading4],
fontWeight: "bold", 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({ export const jsCompletions = javascriptLanguage.data.of({
autocomplete: toposCompletions, autocomplete: toposCompletions,
}); });
@ -304,6 +298,7 @@ export const installEditor = (app: Editor) => {
editorSetup, editorSetup,
app.themeCompartment.of( app.themeCompartment.of(
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")), getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
// debug
), ),
app.chosenLanguage.of(javascript()), app.chosenLanguage.of(javascript()),
]; ];

4
src/InterfaceLogic.ts
View File

@ -59,9 +59,9 @@ export const installInterfaceLogic = (app: Editor) => {
for (let i = 0; i < tabs.length; i++) { for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", (event) => { tabs[i].addEventListener("click", (event) => {
// Updating the CSS accordingly // 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++) { 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(); app.currentFile().candidate = app.view.state.doc.toString();

23
src/main.ts
View File

@ -34,7 +34,6 @@ import { makeNumberExtensions } from "./extensions/NumberExtensions";
// @ts-ignore // @ts-ignore
import { registerSW } from "virtual:pwa-register"; import { registerSW } from "virtual:pwa-register";
import colors from "./colors.json"; import colors from "./colors.json";
import { code } from "./documentation/basics/code";
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
registerSW(); registerSW();
@ -211,7 +210,7 @@ export class Editor {
loadUniverserFromUrl(this); loadUniverserFromUrl(this);
// Set the color scheme for the application // Set the color scheme for the application
this.readTheme(this.settings.theme); // this.readTheme(this.settings.theme);
} }
private getBuffer(type: string): any { private getBuffer(type: string): any {
@ -267,7 +266,7 @@ export class Editor {
let list = document.createElement("ul"); let list = document.createElement("ul");
list.className = 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( list.append(
...Object.keys(this.universes).map((it) => { ...Object.keys(this.universes).map((it) => {
let item = itemTemplate.content.cloneNode(true) as DocumentFragment; let item = itemTemplate.content.cloneNode(true) as DocumentFragment;
@ -299,9 +298,9 @@ export class Editor {
*/ */
const tabs = document.querySelectorAll('[id^="tab-"]'); const tabs = document.querySelectorAll('[id^="tab-"]');
const tab = tabs[i] as HTMLElement; const tab = tabs[i] as HTMLElement;
tab.classList.add("bg-color3"); tab.classList.add("bg-foreground");
for (let j = 0; j < tabs.length; j++) { 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]; let tab_id = tab.id.split("-")[1];
this.local_index = parseInt(tab_id); this.local_index = parseInt(tab_id);
@ -324,15 +323,15 @@ export class Editor {
let changeColor = (button: HTMLElement) => { let changeColor = (button: HTMLElement) => {
interface_buttons.forEach((button) => { interface_buttons.forEach((button) => {
let svg = button.children[0] as HTMLElement; let svg = button.children[0] as HTMLElement;
if (svg.classList.contains("text-color3")) { if (svg.classList.contains("text-foreground_selection")) {
svg.classList.remove("text-color3"); svg.classList.remove("text-foreground_selection");
button.classList.remove("text-color3"); button.classList.remove("text-foreground_selection");
} }
}); });
button.children[0].classList.remove("text-white"); button.children[0].classList.remove("text-white");
button.children[0].classList.add("text-color3"); button.children[0].classList.add("text-foreground_selection");
button.classList.add("text-color3"); button.classList.add("text-foreground_selection");
button.classList.add("fill-color3"); button.classList.add("fill-foreground_selection");
}; };
switch (mode) { switch (mode) {
@ -447,7 +446,7 @@ export class Editor {
unfocusPlayButtons() { unfocusPlayButtons() {
document.querySelectorAll('[id^="play-button-"]').forEach((button) => { 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"); button.children[0].classList.remove("animate-pulse");
}); });
} }

35
src/style.css
View File

@ -1176,6 +1176,11 @@ video {
background-color: rgb(var(--red) / var(--tw-bg-opacity)); 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 { .p-1 {
padding: 0.25rem; padding: 0.25rem;
} }
@ -1242,6 +1247,11 @@ video {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.pb-1 { .pb-1 {
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
} }
@ -1426,6 +1436,11 @@ video {
color: rgb(var(--selection_background) / var(--tw-text-opacity)); color: rgb(var(--selection_background) / var(--tw-text-opacity));
} }
.text-brightred {
--tw-text-opacity: 1;
color: rgb(var(--brightred) / var(--tw-text-opacity));
}
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
} }
@ -1472,10 +1487,20 @@ video {
background-color: rgb(var(--background) / var(--tw-bg-opacity)); 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 { .hover\:fill-black:hover {
fill: rgb(var(--black) / 1); fill: rgb(var(--black) / 1);
} }
.hover\:text-xl:hover {
font-size: 1.25rem;
line-height: 1.75rem;
}
.hover\:text-black:hover { .hover\:text-black:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(var(--black) / var(--tw-text-opacity)); color: rgb(var(--black) / var(--tw-text-opacity));
@ -1486,6 +1511,16 @@ video {
color: rgb(var(--foreground) / var(--tw-text-opacity)); 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 { .focus\:outline-none:focus {
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: 2px; outline-offset: 2px;

221
src/themes/toposTheme.ts
View File

@ -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),
];