small progress
This commit is contained in:
33
index.html
33
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
|
||||
}
|
||||
|
||||
</style>
|
||||
<body id="all" class="z-0 overflow-y-hidden bg-black">
|
||||
@ -264,7 +268,7 @@
|
||||
<!-- 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="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>
|
||||
<div id="disclaimer" class="pb-4">
|
||||
<form id="universe-creator">
|
||||
@ -276,11 +280,11 @@
|
||||
</svg>
|
||||
</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>
|
||||
<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>
|
||||
</form>
|
||||
<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>
|
||||
@ -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>
|
||||
<span class="text-selection_background">Upload universes</span>
|
||||
</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">
|
||||
<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>
|
||||
<span class="text-selection_background">Destroy universes</span>
|
||||
<span class="text-brightred">Destroy universes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -520,33 +524,32 @@
|
||||
<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">
|
||||
<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 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 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 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 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 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 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 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 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>
|
||||
|
||||
</ul>
|
||||
<!-- Here comes the editor itself -->
|
||||
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
|
||||
|
||||
@ -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()),
|
||||
];
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
23
src/main.ts
23
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");
|
||||
});
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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),
|
||||
];
|
||||
Reference in New Issue
Block a user