Initial commit

2019-06-20 11:41:10 +02:00
commit 07132b759a
29 changed files with 17302 additions and 0 deletions
--- a/webview/src/App.tsx
+++ b/webview/src/App.tsx
@@ -0,0 +1,257 @@
+import { observer } from "mobx-react";
+import * as classNames from "classnames";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ReactSVGPanZoom, Tool } from "react-svg-pan-zoom";
+import { computed, observable, runInAction, action } from "mobx";
+import Measure from "react-measure";
+import { Model, ExpressionInputModel } from "./Model";
+import { GraphData, DotGraphViewer, DotViewer } from "./DotGraphViewer";
+
+const ENTER_KEYCODE = 13;
+const ESCAPE = 27;
+
+@observer
+class ExpressionInput extends React.Component<{
+    rootModel: Model;
+    model: ExpressionInputModel;
+}> {
+    private ref: HTMLInputElement | null;
+    private readonly inputTextChanged = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        this.props.model.setEditedExpression(event.target.value);
+    };
+
+    private readonly setRef = (ref: HTMLInputElement | null) => {
+        if (ref) {
+            ref.select();
+        }
+    };
+
+    private readonly onInputKeyDown = (e: React.KeyboardEvent) => {
+        if (e.keyCode === ENTER_KEYCODE) {
+            e.preventDefault();
+            this.props.model.finishEditing();
+        } else if (e.keyCode === ESCAPE) {
+            e.preventDefault();
+            this.props.model.abortEditing();
+        }
+    };
+
+    render() {
+        const model = this.props.model;
+        if (model.editedExpression !== null) {
+            return (
+                <input
+                    ref={this.setRef}
+                    className="expression-input"
+                    value={model.editedExpression}
+                    onChange={this.inputTextChanged}
+                    onBlur={model.finishEditing}
+                    onKeyDown={this.onInputKeyDown}
+                />
+            );
+        } else {
+            return (
+                <div
+                    className="expression"
+                    onDoubleClick={model.activateEditing}
+                >
+                    {this.props.rootModel.actualExpression}
+                </div>
+            );
+        }
+    }
+}
+
+import {
+    contract,
+    types as t,
+    requestContract,
+    notificationContract,
+    ConsoleRpcLogger
+} from "@hediet/typed-json-rpc";
+import { TypedWebSocketClientChannel } from "@hediet/typed-json-rpc-websocket";
+
+const editorContract = contract({
+    server: {
+        highlightLine: requestContract({ params: { line: t.Integer } }),
+        highlight: requestContract({
+            params: {
+                startLine: t.Integer,
+                startCol: t.Integer,
+                endLine: t.Integer,
+                endCol: t.Integer
+            }
+        }),
+        decorate: requestContract({
+            params: {
+                decos: t.array(t.type({ line: t.Integer, text: t.string }))
+            }
+        })
+    },
+    client: {}
+});
+
+@observer
+export class HighlightLine extends React.Component<{ content: string }> {
+    @observable localContent: string;
+
+    constructor(props: HighlightLine["props"]) {
+        super(props);
+        this.localContent = props.content;
+    }
+    /*
+    componentDidUpdate(props: this["props"]) {
+        this.localContent = this.props.content;
+    }*/
+
+    async send() {
+        const content = this.localContent.substr("highlight-line:".length);
+        const lines = content.split("\n");
+
+        const parts = lines[0].split(",");
+        const startLine = parseInt(parts[0]) - 1;
+        const startCol = parseInt(parts[1]) - 1;
+        const endLine = parseInt(parts[2]) - 1;
+        const endCol = parseInt(parts[3]);
+
+        let decos = lines.splice(1).map(l => {
+            const p = l.split(":");
+            return {
+                line: parseInt(p[0]) - 1,
+                text: " " + p.splice(1).join(":")
+            };
+        });
+        decos = decos.filter(d => !d.text.startsWith(" @"));
+
+        console.log("send", startLine, decos);
+
+        try {
+            let channel = await TypedWebSocketClientChannel.connectTo(
+                { address: "ws://localhost:56024" },
+                new ConsoleRpcLogger()
+            );
+            const server = editorContract.getServerInterface(channel, {});
+            channel.startListen();
+
+            await server.highlight({ startLine, startCol, endLine, endCol });
+            await server.decorate({ decos });
+        } catch (exception) {
+            console.log("could not contact vscode: ", exception);
+        }
+    }
+    render() {
+        this.send();
+        return (
+            <textarea
+                value={this.localContent}
+                onChange={e => (this.localContent = "" + e.target.value)}
+            />
+        );
+    }
+}
+
+@observer
+export class GUI extends React.Component<{ model: Model }, {}> {
+    render() {
+        const m = this.props.model;
+        return (
+            <div
+                style={{
+                    paddingTop: "0.5em",
+                    display: "flex",
+                    flexDirection: "column",
+                    height: "100%",
+                    boxSizing: "border-box"
+                }}
+                tabIndex={0}
+                onKeyDown={e => {
+                    if (e.keyCode === 39) {
+                        m.historyIndex++;
+                    } else if ((e.keyCode = 37)) {
+                        m.historyIndex--;
+                    }
+                }}
+            >
+                <div style={{}}>
+                    <ExpressionInput
+                        rootModel={this.props.model}
+                        model={this.props.model.expressionInput}
+                    />
+                </div>
+                <hr style={{ width: "100%" }} />
+                <div style={{ flex: "1", minHeight: "0px" }}>
+                    {/* <input type="checkbox" onChange={e => this.props.model.expressionInput.isEditing = !!e.target.checked} /> */}
+                    {m.value ? (
+                        this.renderValue(m.value.data)
+                    ) : (
+                        <div>No Data</div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    private cachedValue: string;
+    private cachedParts: string[];
+
+    renderValue(value: string) {
+        try {
+            if (value.match(/"(.*)"/)) {
+                value = value.substr(1, value.length - 2);
+            }
+            const data = JSON.parse(value);
+
+            //console.log(value, (data as any).kind);
+            if ((data as any).kind === "GraphData") {
+                const value2 = data as GraphData;
+                return <DotGraphViewer data={value2} />;
+            }
+        } catch (e) {
+            console.error(value, e);
+        }
+        return value;
+
+        try {
+            let parsed = JSON.parse(`${value}`);
+
+            if (parsed === "None") {
+                return <textarea>None</textarea>;
+            }
+
+            if (parsed.startsWith("highlight-line:")) {
+                return <HighlightLine content={parsed} />;
+            }
+        } catch (e) {
+            console.error(e);
+        }
+
+        try {
+            return <DotViewer dotCode={JSON.parse(`${value}`)} />;
+        } catch (e) {
+            console.error(value, e);
+        }
+
+        /*return <DotViewer dotCode={JSON.parse(`${value}`)} />;*/
+        if (value !== this.cachedValue) {
+            this.cachedParts = value
+                .split("---------------------------")
+                .filter(e => !!e);
+            this.cachedValue = value;
+            console.log(`updated ${this.cachedParts.length} parts`);
+        }
+        //console.log(value.substr(0, 10000));
+        //console.log(`${this.cachedParts[0]}`);
+        //console.log(`"${this.cachedParts[0]}"`);
+        const idx = Math.max(
+            1,
+            Math.min(this.cachedParts.length - 2, this.props.model.historyIndex)
+        );
+        console.log(idx);
+        return <DotViewer dotCode={JSON.parse(`"${this.cachedParts[idx]}"`)} />;
+
+        return <div>{`${value.length}`}</div>;
+    }
+}
--- a/webview/src/DotGraphViewer.tsx
+++ b/webview/src/DotGraphViewer.tsx
@@ -0,0 +1,113 @@
+import { observer } from "mobx-react";
+import * as classNames from "classnames";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ReactSVGPanZoom, Tool } from 'react-svg-pan-zoom';
+import { computed, observable, autorun, runInAction } from "mobx";
+import Measure, { ContentRect } from 'react-measure';
+import Viz from 'viz.js';
+import { Module, render } from 'viz.js/full.render.js';
+
+export interface GraphData {
+    kind: "GraphData";
+    nodes: { id: string; label: string; }[];
+    edges: { from: string; to: string; label: string; }[];
+}
+
+let viz: any = new Viz({Module: () => Module({TOTAL_MEMORY: 1<<30}), render});
+
+@observer
+export class DotGraphViewer extends React.Component<{ data: GraphData }> {
+    render() {
+        const { nodes, edges } = this.props.data;
+        const dotContent = `
+            digraph MyGraph {
+                ${nodes.map(n => `${n.id} [ label = ${JSON.stringify(n.label)} ];`).join("\n ")}
+                ${edges.map(e => `${e.from} -> ${e.to} [ label = ${JSON.stringify(e.label)} ];`).join("\n")}
+            }
+        `;
+        return (
+            <DotViewer dotCode={dotContent} />
+        );
+    }
+}
+
+@observer
+export class DotViewer extends React.Component<{ dotCode: string }> {
+    @observable private svg: string|null = null;
+
+    constructor(props) {
+        super(props);
+        autorun(async () => {
+            const svg = await viz.renderString(this.props.dotCode);
+            runInAction("Update svg", () => this.svg = svg);
+        });
+    }
+
+    render() {
+        if (!this.svg) {
+            return (<div>Loading...</div>);
+        }
+        return (
+            <SvgViewer svgContent={this.svg} />
+        );
+    }
+}
+
+function widthOrDefault(r: ContentRect): number {
+    if (r.bounds && r.bounds.width) {
+        return r.bounds.width;
+    }
+    return 1;
+}
+
+function heightOrDefault(r: ContentRect): number {
+    if (r.bounds && r.bounds.height) {
+        return r.bounds.height;
+    }
+    return 1;
+}
+
+export class SvgViewer extends React.Component<{ svgContent: string }, { tool: Tool }> {
+    constructor(props) {
+        super(props);
+        this.state = { tool: "pan" };
+    }
+
+    private readonly setTool = (tool: Tool) => {
+        this.setState({ tool });
+    };
+
+    render() {
+        let { svgContent } = this.props;
+        let width: number = 0;
+        let height: number = 0;
+        svgContent = svgContent.replace(/viewBox="[0-9\.]+ [0-9\.]+ ([0-9\.]+) ([0-9\.]+)"/, (r, w, h) => {
+            width = parseFloat(w);
+            height = parseFloat(h);
+            return "";
+        });
+        //console.log(svgContent);
+        return (
+            <Measure bounds>
+                {
+                    ({ measureRef, contentRect }) => 
+                    (
+                        <div ref={measureRef} className="svgViewer">
+                            <ReactSVGPanZoom
+                                width={widthOrDefault(contentRect)}
+                                height={heightOrDefault(contentRect)}
+                                tool={this.state.tool}
+                                onChangeTool={this.setTool}
+                            >
+                                <svg width={width} height={height}>
+                                    <g dangerouslySetInnerHTML={{ __html: svgContent }} />
+                                </svg>
+                            </ReactSVGPanZoom>
+                        </div>
+                    )
+                }
+            </Measure>
+        );
+    }
+}
--- a/webview/src/Model.tsx
+++ b/webview/src/Model.tsx
@@ -0,0 +1,89 @@
+import { observable, computed, action, autorun, intercept, runInAction, values } from "mobx";
+import Viz from 'viz.js';
+import { Module, render } from 'viz.js/full.render.js';
+
+let viz: any = new Viz({ Module, render });
+
+export class ExpressionInputModel {
+    @observable public editedExpression: string|null = "";
+    @observable public expression: string = "";
+
+    @action
+    public readonly activateEditing = () => {
+        this.editedExpression = this.expression;
+    }
+
+    @action
+    public readonly setEditedExpression = (text: string) => {
+        this.editedExpression = text;
+
+    }
+
+    @action
+    public readonly finishEditing = () => {
+        if (this.editedExpression) {
+            this.expression = this.editedExpression;
+            this.editedExpression = null;
+        }
+    }
+
+    @action
+    public readonly abortEditing = () => {
+        this.editedExpression = null;
+    }
+}
+
+interface Value {
+    data: string;
+}
+
+type Data = SetValueCommand | SetExpressionCommand | { command: undefined; };
+
+interface SetValueCommand {
+    command: "setValue";
+    value: Value;
+}
+
+interface SetExpressionCommand {
+    command: "setExpression";
+    expression: string;
+}
+
+export class Model {
+    public readonly expressionInput = new ExpressionInputModel();
+    @observable public value: Value | undefined = undefined;
+
+    @observable public historyIndex: number = 0;
+    @computed public get actualExpression(): string {
+        return this.expressionInput.expression;
+        //return this.expressionInput.expression.replace(/\$i/g, `${this.historyIndex}`);
+    }
+
+    constructor() {
+        window.addEventListener("message", event => {
+            const data = event.data as Data;
+            if (data.command === "setValue") {
+                runInAction("setValue", () => {
+                    this.value = data.value;
+                });
+            }
+            if (data.command === "setExpression") {
+                runInAction("setExpression", () => {
+                    this.expressionInput.editedExpression = data.expression ? null : "";
+                    this.expressionInput.expression = data.expression;
+                });
+            }
+        });
+
+        window.parent.postMessage({ command: "initialized" }, "*");
+
+        autorun(() => {
+            setExpression(this.actualExpression);
+        });
+    }
+}
+
+function setExpression(expression: string) {
+    window.parent.postMessage({ command: "setExpression", expression }, "*");
+}
+
--- a/webview/src/index.tsx
+++ b/webview/src/index.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import "./style.scss";
+import App = require("./App");
+import { Model } from "./Model";
+
+const model = new Model();
+
+function render(target: HTMLDivElement, app: typeof App) {
+    ReactDOM.render(<app.GUI model={model} />, target);
+}
+
+const target = document.createElement("div");
+target.className = "root";
+render(target, App);
+document.body.appendChild(target);
+
+declare var module: { hot?: { accept: (componentName: string, callback: () => void) => void } };
+declare var require: (name: string) => any;
+
+if (module.hot) {
+    module.hot.accept("./App", () => {
+        console.log("render");
+        render(target, require("./App"));
+    });
+}
--- a/webview/src/style.scss
+++ b/webview/src/style.scss
@@ -0,0 +1,105 @@
+@import './vscode-defaults.scss';
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  height: 100vh;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+  
+  background-color: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
+  font-family: var(--vscode-editor-font-family);
+  font-weight: var(--vscode-editor-font-weight);
+  font-size: var(--vscode-editor-font-size);
+  margin: 0;
+  padding: 0 20px;
+}
+
+html, .root, .gui {
+  height: 100vh;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+}
+
+.gui {
+  display: flex;
+  flex-direction: column;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+a {
+  color: var(--vscode-textLink-foreground);
+}
+
+a:hover {
+  color: var(--vscode-textLink-activeForeground);
+}
+
+a:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 1px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+}
+
+code {
+  color: var(--vscode-textPreformat-foreground);
+}
+
+blockquote {
+  background: var(--vscode-textBlockQuote-background);
+  border-color: var(--vscode-textBlockQuote-border);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--vscode-scrollbarSlider-background);
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--vscode-scrollbarSlider-hoverBackground);
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: var(--vscode-scrollbarSlider-activeBackground);
+}
+
+.svgViewer {
+  height: 100%;
+}
+
+.expression {
+  color: #c586c0;
+  white-space: pre;
+  font-size: 13px;
+  font-family: Monaco,Menlo,Consolas,Droid Sans Mono,Inconsolata,Courier New,monospace,Droid Sans Fallback;
+  margin-top: 3px;
+  margin-bottom: 6px;
+}
+
+.expression-input {
+  width: 100%;
+  box-sizing : border-box;
+  margin-top: 1px;
+  margin-bottom: 0px;
+  font-size: 13px;
+  font-family: Monaco,Menlo,Consolas,Droid Sans Mono,Inconsolata,Courier New,monospace,Droid Sans Fallback;
+  background-color: rgb(48, 60, 65);
+  color: rgb(238, 255, 255);
+  border: 1px black;
+}
+
+hr {
+  border: 0.5px solid white;
+}
--- a/webview/src/vscode-defaults.scss
+++ b/webview/src/vscode-defaults.scss
@@ -0,0 +1,288 @@
+:root {
+    --background-color: #263238;
+    --color: #eeffff;
+    --font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", HelveticaNeue-Light, Ubuntu, "Droid Sans", sans-serif;
+    --font-size: 13px;
+    --font-weight: normal;
+    --link-active-color: #eeffff;
+    --link-color: #80cbc4;
+    --vscode-activityBar-background: #192227;
+    --vscode-activityBar-border: rgba(0, 0, 0, 0.38);
+    --vscode-activityBar-dropBackground: rgba(255, 255, 255, 0.12);
+    --vscode-activityBar-foreground: #eeffff;
+    --vscode-activityBar-inactiveForeground: rgba(238, 255, 255, 0.6);
+    --vscode-activityBarBadge-background: #80cbc4;
+    --vscode-activityBarBadge-foreground: #000000;
+    --vscode-badge-background: rgba(0, 0, 0, 0.19);
+    --vscode-badge-foreground: #546e7a;
+    --vscode-breadcrumb-activeSelectionForeground: #80cbc4;
+    --vscode-breadcrumb-background: #263238;
+    --vscode-breadcrumb-focusForeground: #eeffff;
+    --vscode-breadcrumb-foreground: #5f7a87;
+    --vscode-breadcrumbPicker-background: #192227;
+    --vscode-button-background: rgba(128, 203, 196, 0.13);
+    --vscode-button-foreground: #ffffff;
+    --vscode-button-hoverBackground: rgba(175, 222, 218, 0.13);
+    --vscode-debugExceptionWidget-background: #420b0d;
+    --vscode-debugExceptionWidget-border: #a31515;
+    --vscode-debugToolBar-background: #263238;
+    --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
+    --vscode-diffEditor-insertedTextBackground: rgba(195, 232, 141, 0.08);
+    --vscode-diffEditor-removedTextBackground: rgba(255, 83, 112, 0.13);
+    --vscode-dropdown-background: #263238;
+    --vscode-dropdown-border: rgba(255, 255, 255, 0.06);
+    --vscode-dropdown-foreground: #f0f0f0;
+    --vscode-editor-background: #263238;
+    --vscode-editor-findMatchBackground: #515c6a;
+    --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
+    --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
+    --vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
+    --vscode-editor-font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", HelveticaNeue-Light, Ubuntu, "Droid Sans", sans-serif;
+    --vscode-editor-font-size: 13px;
+    --vscode-editor-font-weight: normal;
+    --vscode-editor-foreground: #eeffff;
+    --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
+    --vscode-editor-inactiveSelectionBackground: rgba(128, 203, 196, 0.06);
+    --vscode-editor-lineHighlightBackground: rgba(0, 0, 0, 0.31);
+    --vscode-editor-lineHighlightBorder: #282828;
+    --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
+    --vscode-editor-selectionBackground: rgba(128, 203, 196, 0.13);
+    --vscode-editor-selectionHighlightBackground: rgba(255, 204, 0, 0.13);
+    --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
+    --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
+    --vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
+    --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
+    --vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
+    --vscode-editorActiveLineNumber-foreground: #c6c6c6;
+    --vscode-editorBracketMatch-background: #263238;
+    --vscode-editorBracketMatch-border: rgba(255, 204, 0, 0.31);
+    --vscode-editorCodeLens-foreground: #999999;
+    --vscode-editorCursor-foreground: #ffcc00;
+    --vscode-editorError-foreground: rgba(255, 83, 112, 0.44);
+    --vscode-editorGroup-border: rgba(0, 0, 0, 0.19);
+    --vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
+    --vscode-editorGroupHeader-noTabsBackground: #263238;
+    --vscode-editorGroupHeader-tabsBackground: #263238;
+    --vscode-editorGutter-addedBackground: rgba(195, 232, 141, 0.38);
+    --vscode-editorGutter-background: #263238;
+    --vscode-editorGutter-commentRangeForeground: #c5c5c5;
+    --vscode-editorGutter-deletedBackground: rgba(255, 83, 112, 0.38);
+    --vscode-editorGutter-modifiedBackground: rgba(130, 170, 255, 0.38);
+    --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
+    --vscode-editorHoverWidget-background: #263238;
+    --vscode-editorHoverWidget-border: rgba(255, 255, 255, 0.06);
+    --vscode-editorIndentGuide-activeBackground: #37474f;
+    --vscode-editorIndentGuide-background: rgba(55, 71, 79, 0.44);
+    --vscode-editorInfo-foreground: #008000;
+    --vscode-editorLineNumber-activeForeground: #5f7a87;
+    --vscode-editorLineNumber-foreground: #37474f;
+    --vscode-editorLink-activeForeground: #eeffff;
+    --vscode-editorMarkerNavigation-background: rgba(238, 255, 255, 0.02);
+    --vscode-editorMarkerNavigationError-background: rgba(255, 83, 112, 0.44);
+    --vscode-editorMarkerNavigationInfo-background: #008000;
+    --vscode-editorMarkerNavigationWarning-background: rgba(195, 232, 141, 0.44);
+    --vscode-editorOverviewRuler-addedForeground: rgba(0, 122, 204, 0.6);
+    --vscode-editorOverviewRuler-border: #263238;
+    --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+    --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
+    --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
+    --vscode-editorOverviewRuler-deletedForeground: rgba(0, 122, 204, 0.6);
+    --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
+    --vscode-editorOverviewRuler-findMatchForeground: rgba(246, 185, 77, 0.7);
+    --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
+    --vscode-editorOverviewRuler-infoForeground: rgba(18, 18, 136, 0.7);
+    --vscode-editorOverviewRuler-modifiedForeground: rgba(0, 122, 204, 0.6);
+    --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
+    --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
+    --vscode-editorOverviewRuler-warningForeground: rgba(18, 136, 18, 0.7);
+    --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
+    --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
+    --vscode-editorPane-background: #263238;
+    --vscode-editorRuler-foreground: #37474f;
+    --vscode-editorSuggestWidget-background: #263238;
+    --vscode-editorSuggestWidget-border: rgba(255, 255, 255, 0.06);
+    --vscode-editorSuggestWidget-foreground: #eeffff;
+    --vscode-editorSuggestWidget-highlightForeground: #80cbc4;
+    --vscode-editorSuggestWidget-selectedBackground: rgba(0, 0, 0, 0.31);
+    --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
+    --vscode-editorWarning-foreground: rgba(195, 232, 141, 0.44);
+    --vscode-editorWhitespace-foreground: rgba(238, 255, 255, 0.25);
+    --vscode-editorWidget-background: #192227;
+    --vscode-editorWidget-border: #ff0000;
+    --vscode-editorWidget-resizeBorder: #80cbc4;
+    --vscode-errorForeground: #f48771;
+    --vscode-extensionButton-prominentBackground: rgba(195, 232, 141, 0.56);
+    --vscode-extensionButton-prominentForeground: #ffffff;
+    --vscode-extensionButton-prominentHoverBackground: #c3e88d;
+    --vscode-focusBorder: rgba(255, 255, 255, 0);
+    --vscode-foreground: #cccccc;
+    --vscode-gitDecoration-addedResourceForeground: #81b88b;
+    --vscode-gitDecoration-conflictingResourceForeground: rgba(255, 203, 107, 0.56);
+    --vscode-gitDecoration-deletedResourceForeground: rgba(255, 83, 112, 0.56);
+    --vscode-gitDecoration-ignoredResourceForeground: rgba(95, 122, 135, 0.56);
+    --vscode-gitDecoration-modifiedResourceForeground: rgba(130, 170, 255, 0.56);
+    --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
+    --vscode-gitDecoration-untrackedResourceForeground: rgba(195, 232, 141, 0.56);
+    --vscode-gitlens-gutterBackgroundColor: rgba(255, 255, 255, 0.07);
+    --vscode-gitlens-gutterForegroundColor: #bebebe;
+    --vscode-gitlens-gutterUncommittedForegroundColor: rgba(0, 188, 242, 0.6);
+    --vscode-gitlens-lineHighlightBackgroundColor: rgba(0, 188, 242, 0.2);
+    --vscode-gitlens-lineHighlightOverviewRulerColor: rgba(0, 188, 242, 0.6);
+    --vscode-gitlens-trailingLineBackgroundColor: rgba(0, 0, 0, 0);
+    --vscode-gitlens-trailingLineForegroundColor: rgba(153, 153, 153, 0.35);
+    --vscode-input-background: #303c41;
+    --vscode-input-border: rgba(255, 255, 255, 0.06);
+    --vscode-input-foreground: #eeffff;
+    --vscode-input-placeholderForeground: rgba(238, 255, 255, 0.38);
+    --vscode-inputOption-activeBorder: #007acc;
+    --vscode-inputValidation-errorBackground: #5a1d1d;
+    --vscode-inputValidation-errorBorder: rgba(255, 83, 112, 0.31);
+    --vscode-inputValidation-infoBackground: #063b49;
+    --vscode-inputValidation-infoBorder: rgba(130, 170, 255, 0.31);
+    --vscode-inputValidation-warningBackground: #352a05;
+    --vscode-inputValidation-warningBorder: rgba(255, 203, 107, 0.31);
+    --vscode-list-activeSelectionBackground: #192227;
+    --vscode-list-activeSelectionForeground: #80cbc4;
+    --vscode-list-dropBackground: rgba(238, 255, 255, 0.13);
+    --vscode-list-errorForeground: #f88070;
+    --vscode-list-focusBackground: rgba(238, 255, 255, 0.13);
+    --vscode-list-focusForeground: #eeffff;
+    --vscode-list-highlightForeground: #80cbc4;
+    --vscode-list-hoverBackground: #192227;
+    --vscode-list-hoverForeground: #ffffff;
+    --vscode-list-inactiveFocusBackground: #313135;
+    --vscode-list-inactiveSelectionBackground: rgba(0, 0, 0, 0.19);
+    --vscode-list-inactiveSelectionForeground: #80cbc4;
+    --vscode-list-invalidItemForeground: #b89500;
+    --vscode-list-warningForeground: #4d9e4d;
+    --vscode-menu-background: #263238;
+    --vscode-menu-foreground: #eeffff;
+    --vscode-menu-selectionBackground: rgba(0, 0, 0, 0.31);
+    --vscode-menu-selectionBorder: rgba(0, 0, 0, 0.19);
+    --vscode-menu-selectionForeground: #80cbc4;
+    --vscode-menu-separatorBackground: #eeffff;
+    --vscode-menubar-selectionBackground: rgba(0, 0, 0, 0.19);
+    --vscode-menubar-selectionBorder: rgba(0, 0, 0, 0.19);
+    --vscode-menubar-selectionForeground: #80cbc4;
+    --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
+    --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
+    --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
+    --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
+    --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
+    --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
+    --vscode-notificationCenterHeader-background: #314149;
+    --vscode-notificationLink-foreground: #80cbc4;
+    --vscode-notifications-background: #263238;
+    --vscode-notifications-border: #314149;
+    --vscode-notifications-foreground: #eeffff;
+    --vscode-panel-background: #192227;
+    --vscode-panel-border: rgba(0, 0, 0, 0.38);
+    --vscode-panel-dropBackground: #eeffff;
+    --vscode-panelTitle-activeBorder: #80cbc4;
+    --vscode-panelTitle-activeForeground: #ffffff;
+    --vscode-panelTitle-inactiveForeground: #eeffff;
+    --vscode-peekView-border: rgba(0, 0, 0, 0.19);
+    --vscode-peekViewEditor-background: rgba(238, 255, 255, 0.02);
+    --vscode-peekViewEditor-matchHighlightBackground: rgba(128, 203, 196, 0.13);
+    --vscode-peekViewEditorGutter-background: rgba(238, 255, 255, 0.02);
+    --vscode-peekViewResult-background: rgba(238, 255, 255, 0.02);
+    --vscode-peekViewResult-fileForeground: #ffffff;
+    --vscode-peekViewResult-lineForeground: #bbbbbb;
+    --vscode-peekViewResult-matchHighlightBackground: rgba(128, 203, 196, 0.13);
+    --vscode-peekViewResult-selectionBackground: rgba(95, 122, 135, 0.44);
+    --vscode-peekViewResult-selectionForeground: #ffffff;
+    --vscode-peekViewTitle-background: rgba(238, 255, 255, 0.02);
+    --vscode-peekViewTitleDescription-foreground: rgba(238, 255, 255, 0.38);
+    --vscode-peekViewTitleLabel-foreground: #ffffff;
+    --vscode-pickerGroup-border: #3f3f46;
+    --vscode-pickerGroup-foreground: #80cbc4;
+    --vscode-progressBar-background: #80cbc4;
+    --vscode-scrollbar-shadow: rgba(38, 50, 56, 0);
+    --vscode-scrollbarSlider-activeBackground: #80cbc4;
+    --vscode-scrollbarSlider-background: rgba(238, 255, 255, 0.13);
+    --vscode-scrollbarSlider-hoverBackground: rgba(238, 255, 255, 0.06);
+    --vscode-selection-background: #eeffff;
+    --vscode-settings-checkboxBackground: #192227;
+    --vscode-settings-checkboxBorder: rgba(255, 255, 255, 0.06);
+    --vscode-settings-checkboxForeground: #eeffff;
+    --vscode-settings-dropdownBackground: #192227;
+    --vscode-settings-dropdownBorder: rgba(255, 255, 255, 0.06);
+    --vscode-settings-dropdownForeground: #eeffff;
+    --vscode-settings-dropdownListBorder: #ff0000;
+    --vscode-settings-headerForeground: #80cbc4;
+    --vscode-settings-modifiedItemIndicator: #80cbc4;
+    --vscode-settings-numberInputBackground: #192227;
+    --vscode-settings-numberInputBorder: rgba(255, 255, 255, 0.06);
+    --vscode-settings-numberInputForeground: #eeffff;
+    --vscode-settings-textInputBackground: #192227;
+    --vscode-settings-textInputBorder: rgba(255, 255, 255, 0.06);
+    --vscode-settings-textInputForeground: #eeffff;
+    --vscode-sideBar-background: #192227;
+    --vscode-sideBar-border: rgba(0, 0, 0, 0.38);
+    --vscode-sideBar-dropBackground: rgba(255, 255, 255, 0.12);
+    --vscode-sideBar-foreground: #5f7a87;
+    --vscode-sideBarSectionHeader-background: #192227;
+    --vscode-sideBarSectionHeader-border: rgba(0, 0, 0, 0.38);
+    --vscode-sideBarSectionHeader-foreground: #5f7a87;
+    --vscode-sideBarTitle-foreground: #eeffff;
+    --vscode-statusBar-background: #192227;
+    --vscode-statusBar-border: rgba(0, 0, 0, 0.38);
+    --vscode-statusBar-debuggingBackground: #c792ea;
+    --vscode-statusBar-debuggingBorder: rgba(0, 0, 0, 0.38);
+    --vscode-statusBar-debuggingForeground: #ffffff;
+    --vscode-statusBar-foreground: #546e7a;
+    --vscode-statusBar-noFolderBackground: #263238;
+    --vscode-statusBar-noFolderBorder: rgba(0, 0, 0, 0.38);
+    --vscode-statusBar-noFolderForeground: #546e7a;
+    --vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
+    --vscode-statusBarItem-hoverBackground: rgba(84, 110, 122, 0.13);
+    --vscode-statusBarItem-prominentBackground: #388a34;
+    --vscode-statusBarItem-prominentHoverBackground: #369432;
+    --vscode-tab-activeBackground: #263238;
+    --vscode-tab-activeBorder: #80cbc4;
+    --vscode-tab-activeForeground: #ffffff;
+    --vscode-tab-activeModifiedBorder: #5f7a87;
+    --vscode-tab-border: #263238;
+    --vscode-tab-inactiveBackground: #263238;
+    --vscode-tab-inactiveForeground: #5f7a87;
+    --vscode-tab-inactiveModifiedBorder: rgba(95, 122, 135, 0.5);
+    --vscode-tab-unfocusedActiveBorder: #546e7a;
+    --vscode-tab-unfocusedActiveForeground: #eeffff;
+    --vscode-tab-unfocusedActiveModifiedBorder: rgba(95, 122, 135, 0.5);
+    --vscode-tab-unfocusedInactiveForeground: rgba(95, 122, 135, 0.5);
+    --vscode-tab-unfocusedInactiveModifiedBorder: rgba(95, 122, 135, 0.25);
+    --vscode-terminal-ansiBlack: #000000;
+    --vscode-terminal-ansiBlue: #82aaff;
+    --vscode-terminal-ansiBrightBlack: #546e7a;
+    --vscode-terminal-ansiBrightBlue: #82aaff;
+    --vscode-terminal-ansiBrightCyan: #89ddff;
+    --vscode-terminal-ansiBrightGreen: #c3e88d;
+    --vscode-terminal-ansiBrightMagenta: #c792ea;
+    --vscode-terminal-ansiBrightRed: #ff5370;
+    --vscode-terminal-ansiBrightWhite: #ffffff;
+    --vscode-terminal-ansiBrightYellow: #ffcb6b;
+    --vscode-terminal-ansiCyan: #89ddff;
+    --vscode-terminal-ansiGreen: #c3e88d;
+    --vscode-terminal-ansiMagenta: #c792ea;
+    --vscode-terminal-ansiRed: #ff5370;
+    --vscode-terminal-ansiWhite: #ffffff;
+    --vscode-terminal-ansiYellow: #ffcb6b;
+    --vscode-terminal-background: #192227;
+    --vscode-terminal-border: rgba(0, 0, 0, 0.38);
+    --vscode-terminal-foreground: #cccccc;
+    --vscode-terminal-selectionBackground: rgba(255, 255, 255, 0.25);
+    --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
+    --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
+    --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
+    --vscode-textLink-activeForeground: #eeffff;
+    --vscode-textLink-foreground: #80cbc4;
+    --vscode-textPreformat-foreground: #d7ba7d;
+    --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
+    --vscode-titleBar-activeBackground: #192227;
+    --vscode-titleBar-activeForeground: #eeffff;
+    --vscode-titleBar-border: rgba(0, 0, 0, 0.38);
+    --vscode-titleBar-inactiveBackground: #192227;
+    --vscode-titleBar-inactiveForeground: #5f7a87;
+    --vscode-widget-shadow: rgba(0, 0, 0, 0.19);
+  }
+