From dfd3ba0167543ee9a20d44bd38739a05190cd070 Mon Sep 17 00:00:00 2001 From: Nikhil Saraf Date: Tue, 22 Dec 2020 02:37:19 -0800 Subject: [PATCH] changes --- package.json | 9 +- scripts/interfaces.ts | 0 src/Browser.tsx | 72 +- src/GraphQLMonacoProvider.tsx | 41 - src/MonacoProvider.tsx | 151 +++ src/ast/componnents/components.tsx | 2 +- src/ast/tokens.tsx | 2 +- src/components/PanelMenu.tsx | 17 +- src/components/Tabs.tsx | 12 +- src/components/Toolbar.tsx | 14 +- src/graphql.tmlanguage.json | 677 +++++++++++ src/json.tmlanguage.json | 213 ++++ src/lib/browser.tsx | 10 +- src/lib/colors.ts | 39 +- src/lib/monaco.theme.ts | 13 +- src/lib/styles.tsx | 7 +- src/themes/index.ts | 65 ++ src/themes/theme-convertor.ts | 100 ++ src/themes/tm-to-monaco-token.ts | 67 ++ src/themes/vscode-theme.js | 1740 ++++++++++++++++++++++++++++ tsconfig.json | 2 +- 21 files changed, 3140 insertions(+), 113 deletions(-) create mode 100644 scripts/interfaces.ts delete mode 100644 src/GraphQLMonacoProvider.tsx create mode 100644 src/MonacoProvider.tsx create mode 100644 src/graphql.tmlanguage.json create mode 100644 src/json.tmlanguage.json create mode 100644 src/themes/index.ts create mode 100644 src/themes/theme-convertor.ts create mode 100644 src/themes/tm-to-monaco-token.ts create mode 100644 src/themes/vscode-theme.js diff --git a/package.json b/package.json index c17f27a..20cfde7 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,15 @@ "graphql": "^15.4.0", "hoofd": "^1.0.2", "keez": "^1.0.1", + "monaco-textmate": "^3.0.1", + "onigasm": "^2.2.5", + "path": "npm:path-browserify", "react": "^17.0.1", "react-dom": "^17.0.1", "react-error-boundary": "^3.1.0", "react-split-grid": "^1.0.3", "recoil": "^0.1.2", - "use-monaco": "^0.0.29" + "use-monaco": "file:.yalc/use-monaco" }, "peerDependencies": { "graphql": "*", @@ -60,6 +63,7 @@ "@prefresh/vite": "^1.2.2", "@types/node": "^14.14.13", "bundlesize": "^0.18.0", + "monaco-vscode-textmate-theme-converter": "^0.1.1", "next": "^10.0.3", "pluralize": "^8.0.0", "preact": "^10.5.7", @@ -74,6 +78,9 @@ "vite-plugin-react": "^4.0.1", "xss": "^1.0.8" }, + "browser": { + "path": "path-browserify" + }, "scripts": { "dev": "vite", "build": "sucrase-node scripts/build.ts", diff --git a/scripts/interfaces.ts b/scripts/interfaces.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/Browser.tsx b/src/Browser.tsx index 76b6665..b415bcb 100644 --- a/src/Browser.tsx +++ b/src/Browser.tsx @@ -18,10 +18,11 @@ import { QueryEditor } from "./panels/QueryEditor"; import { PanelConfigProvider, Panels } from "./components/Panels"; import { Tabs } from "./components/Tabs"; import { styled } from "./lib/styles"; -import { GraphQLMonacoProvider } from "./GraphQLMonacoProvider"; +import { GraphQLMonacoProvider, ThemeProvider } from "./MonacoProvider"; import * as icons from "./components/Icons"; import { EditorPanel } from "./components/EditorPanel"; import { useAtom } from "./lib/browser"; + export const DEFAULT_PANELS = { query: { render: QueryEditor, @@ -83,45 +84,50 @@ export function BrowserProvider({ children, }) { return ( - - { - snapshot.set(fs.persistedFiles, { "/browser.json": true }); - const currentTab = snapshot.getLoadable(browser.currentTab) - .contents as string; + + + { + snapshot.set(fs.persistedFiles, { "/browser.json": true }); + const currentTab = snapshot.getLoadable(browser.currentTab) + .contents as string; - const oldConfig = snapshot.getLoadable( - browser.getTabSchemaConfig(currentTab) - ).contents; + const oldConfig = snapshot.getLoadable( + browser.getTabSchemaConfig(currentTab) + ).contents; - if (schemaConfig) { - snapshot.set(browser.getTabSchemaConfig(currentTab), schemaConfig); - } else if ( - initialSchemaConfig && - !(oldConfig as SchemaConfig)?.uri?.length - ) { - snapshot.set( - browser.getTabSchemaConfig(currentTab), - initialSchemaConfig - ); - } + if (schemaConfig) { + snapshot.set( + browser.getTabSchemaConfig(currentTab), + schemaConfig + ); + } else if ( + initialSchemaConfig && + !(oldConfig as SchemaConfig)?.uri?.length + ) { + snapshot.set( + browser.getTabSchemaConfig(currentTab), + initialSchemaConfig + ); + } - initializeState?.(snapshot, browser); - }} - > - - - {children} - - - + initializeState?.(snapshot, browser); + }} + > + + + {children} + + + + ); } export const tabBreakpoints = [3, 5, 7, 9]; -const Background = styled.div`h-screen w-screen pt-1 gap-2 bg-blueGray-300 w-full flex flex-col`; -const PanelWindow = styled.div`flex-1 w-full px-2 pb-3 flex flex-row overflow-hidden`; +const Background = styled.div`h-screen w-screen pt-1 gap-1 bg-blueGray-300 w-full flex flex-col`; +const PanelWindow = styled.div`flex-1 w-full px-1 pb-1 flex flex-row overflow-hidden`; export function Browser({ initializeState, @@ -140,7 +146,7 @@ export function Browser({ panels={DEFAULT_PANELS} > -
+
diff --git a/src/GraphQLMonacoProvider.tsx b/src/GraphQLMonacoProvider.tsx deleted file mode 100644 index 206cb8b..0000000 --- a/src/GraphQLMonacoProvider.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import { MonacoProvider } from "use-monaco"; -import lightTheme from "./lib/monaco.theme"; -import * as graphqlLanguageConfig from "./lib/graphql.config"; - - -export function GraphQLMonacoProvider({ initialSchemaConfig, children }) { - return ( - { - return monaco.languages.register({ - id: "graphql", - worker: { - label: "graphql", - options: { - languageConfig: { - schemaConfig: initialSchemaConfig, - }, - }, - src: monaco.worker.baseWorkerPath + "graphql.monaco.worker.js", - providers: { - hover: true, - completionItem: true, - diagnostics: true, - }, - }, - extensions: [".graphql", ".gql"], - aliases: ["graphql"], - mimetypes: ["application/graphql", "text/graphql"], - loader: async () => graphqlLanguageConfig as any, - }); - }, - }} - > - {children} - - ); -} diff --git a/src/MonacoProvider.tsx b/src/MonacoProvider.tsx new file mode 100644 index 0000000..2e7d4b3 --- /dev/null +++ b/src/MonacoProvider.tsx @@ -0,0 +1,151 @@ +import React from "react"; +import { MonacoProvider } from "use-monaco"; +import allThemes from "use-monaco/themes"; +import { lightTheme, darkTheme } from "./lib/monaco.theme"; +import * as graphqlLanguageConfig from "./lib/graphql.config"; +import createContext from "create-hook-context"; +import { darkBG, colors } from "./lib/colors"; +import { setup } from "@beamwind/play"; +import sand from "./themes/vscode-theme"; +import type * as monacoApi from "monaco-editor"; + +export const [ThemeProvider, useTheme] = createContext( + ({ mode = "light" as "light" | "dark" }: { mode: string }) => { + const [state, setState] = React.useState({ mode }); + + React.useEffect(() => { + if (state.mode === "light") { + setup({ + theme: { + extend: { + colors: { + blueGray: colors["blueGray"], + }, + }, + }, + }); + } else { + console.log("hereee"); + setup({ + theme: { + extend: { + colors: { + blueGray: darkBG, + }, + }, + }, + }); + } + }, [state.mode]); + + return [state, setState] as const; + } +); + +import { loadWASM } from "onigasm"; // peer dependency of 'monaco-textmate' +import { Registry } from "monaco-textmate"; // peer dependency +import { wireTmGrammars } from "./themes"; +import graphQLTMLang from "./graphql.tmlanguage.json"; +import jsonTMLang from "./json.tmlanguage.json"; +import { convertTheme } from "./themes/theme-convertor"; + +export async function textMatePlugin(monaco: typeof monacoApi) { + await loadWASM("../node_modules/onigasm/lib/onigasm.wasm"); // See https://www.npmjs.com/package/onigasm#light-it-up + const languageRepo = { + "source.graphql": { + format: "json", + content: JSON.stringify(graphQLTMLang, null, 2), + }, + "source.json.comments": { + format: "json", + content: JSON.stringify(jsonTMLang, null, 2), + }, + }; + + // map of monaco "language id's" to TextMate scopeNames + const grammars = new Map(); + + const registry = new Registry({ + getGrammarDefinition: async (scopeName) => { + return ( + languageRepo[scopeName] ?? { + format: "json", + content: JSON.stringify(jsonTMLang, null, 2), + } + ); + }, + }); + + grammars.set("graphql", "source.graphql"); + grammars.set("json", "source.json.comments"); + + return monaco.editor.onCreatedEditor(async (editor) => { + try { + await wireTmGrammars(monaco, registry, grammars, editor); + } catch (e) { + console.error(e); + } + }); +} + +const converted = convertTheme(sand as any); +console.log(converted); +export function GraphQLMonacoProvider({ initialSchemaConfig, children }) { + const [theme, setTheme] = useTheme(); + + return ( + { + monaco.languages.register({ + id: "json", + extensions: [".json"], + }); + }, + prettier: ["graphql", "json"], + textmate: textMatePlugin, + "magiql-ide": async (monaco) => { + return monaco.languages.register({ + id: "graphql", + worker: { + label: "graphql", + options: { + languageConfig: { + schemaConfig: initialSchemaConfig, + }, + }, + src: monaco.worker.baseWorkerPath + "graphql.monaco.worker.js", + providers: { + hover: true, + completionItem: true, + diagnostics: true, + }, + }, + extensions: [".graphql", ".gql"], + aliases: ["graphql"], + mimetypes: ["application/graphql", "text/graphql"], + }); + }, + }} + > + {children} + + ); +} diff --git a/src/ast/componnents/components.tsx b/src/ast/componnents/components.tsx index e32017e..357404f 100644 --- a/src/ast/componnents/components.tsx +++ b/src/ast/componnents/components.tsx @@ -75,7 +75,7 @@ export function useUpdateCollection({ node, key }) { Variable.displayName = "Variable"; -export const tooltip = `bg-gray-700 text-white border-none rounded-md shadow-lg font-graphql`; +export const tooltip = `bg-gray-700 text-blueGray-50 border-none rounded-md shadow-lg font-graphql`; export const withTooltip = (description, children) => description ? ( diff --git a/src/ast/tokens.tsx b/src/ast/tokens.tsx index 543b53f..9df70ce 100644 --- a/src/ast/tokens.tsx +++ b/src/ast/tokens.tsx @@ -52,7 +52,7 @@ export function Checkbox(props: any) { {...props} className={`${bw`w-3 h-3 rounded-sm ${ props.checked - ? "text-white bg-blue-400 group-hover:(text-white bg-blue-200)" + ? "text-blueGray-50 bg-blue-400 group-hover:(text-blueGray-50 bg-blue-200)" : "text-blueGray-300 bg-blueGray-300 group-hover:(text-blueGray-600)" }`} ${props.className ?? ""}`} > diff --git a/src/components/PanelMenu.tsx b/src/components/PanelMenu.tsx index 0478aab..e719a73 100644 --- a/src/components/PanelMenu.tsx +++ b/src/components/PanelMenu.tsx @@ -7,7 +7,7 @@ import { usePanel, usePanelConfig } from "./Panels"; import * as browser from "../lib/browser"; import { AnimatePresence, motion } from "framer-motion"; -export const menu = `relative px-0.5 py-1 bg-white border-white border-1 rounded-md shadow-2xl`; +export const menu = `relative px-0.5 py-1 bg-blueGray-50 border-blueGray-50 border-1 rounded-md shadow-2xl`; const renderers = { context: ContextMenu, @@ -71,10 +71,18 @@ export function PanelMenu({ className={bw`${menuItem} items-center`} > + {!(panelName === panel.id) && + panels.find((p) => p.find((i) => i === panelName)) && ( +
+ +
+ )}
@@ -93,4 +101,7 @@ export function PanelMenu({ ); } -export const menuItem = `cursor-pointer select-none group w-48 px-1 pl-8 py-1 font-graphql rounded-sm text-sm border-none text-blueGray-500 hover:(outline-none bg-blue-500 text-white)`; +export const menuItem = `cursor-pointer +select-none group w-48 px-1 pl-8 py-1 font-graphql +rounded-sm text-sm border-none text-blueGray-500 +hover:(outline-none bg-blue-500 text-blueGray-50)`; diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index 017f8fd..503fc0f 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -112,14 +112,14 @@ function Tab({ onSelect(tab); }} className={bw`flex-1 h-full ${{ - "z-11": dragging, + "z-6": dragging, }} group cursor-pointer justify-between pr-2 font-graphql flex flex-row items-center relative text-sm ${{ - "bg-blueGray-50 text-blueGray-700 z-10": isSelected, - "bg-blueGray-200 text-blueGray-500 z-9 hover:(bg-blueGray-100)": !isSelected, + "bg-blueGray-50 text-blueGray-700 z-4": isSelected, + "bg-blueGray-200 text-blueGray-500 z-3 hover:(bg-blueGray-100)": !isSelected, }} pl-4 py-1.5 rounded-t-lg`} >
{ const ref = React.useRef(); return ( -
+
{ // setFocused("schema"); // setPanels((props) => @@ -200,7 +200,7 @@ export function Toolbar() { }} /> { // setFocused("schema"); // setPanels((props) => @@ -211,7 +211,7 @@ export function Toolbar() { }} /> { loadSchema({ force: true }); @@ -315,7 +315,7 @@ export function Toolbar() { { setPanels((props) => @@ -402,7 +402,7 @@ export function Toolbar() { } export const menu = `relative px-0.5 py-0.5 bg-blueGray-50 border-2 border-blueGray-300 rounded-md shadow-xl`; -export const menuItem = `w-32 px-2 py-1 font-graphql rounded-sm text-sm text-blueGray-900 hover:(bg-blue-400 border-blue-400 text-white)`; +export const menuItem = `w-32 px-2 py-1 font-graphql rounded-sm text-sm text-blueGray-900 hover:(bg-blue-400 border-blue-400 text-blueGray-50)`; // export default () => ( // diff --git a/src/graphql.tmlanguage.json b/src/graphql.tmlanguage.json new file mode 100644 index 0000000..be7644d --- /dev/null +++ b/src/graphql.tmlanguage.json @@ -0,0 +1,677 @@ +{ + "name": "GraphQL", + "scopeName": "source.graphql", + "fileTypes": ["graphql", "graphqls", "gql", "graphcool"], + "patterns": [{ "include": "#graphql" }], + "repository": { + "graphql": { + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-fragment-definition" }, + { "include": "#graphql-type-interface" }, + { "include": "#graphql-enum" }, + { "include": "#graphql-scalar" }, + { "include": "#graphql-union" }, + { "include": "#graphql-schema" }, + { "include": "#graphql-operation-def" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-operation-def": { + "patterns": [ + { "include": "#graphql-query-mutation" }, + { "include": "#graphql-name" }, + { "include": "#graphql-variable-definitions" }, + { "include": "#graphql-directive" }, + { "include": "#graphql-selection-set" } + ] + }, + "graphql-fragment-definition": { + "name": "meta.fragment.graphql", + "begin": "\\s*(?:(\\bfragment\\b)\\s*([_A-Za-z][_0-9A-Za-z]*)?\\s*(?:(\\bon\\b)\\s*([_A-Za-z][_0-9A-Za-z]*)))", + "end": "(?<=})", + "captures": { + "1": { "name": "keyword.fragment.graphql" }, + "2": { "name": "entity.name.fragment.graphql" }, + "3": { "name": "keyword.on.graphql" }, + "4": { "name": "support.type.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-selection-set" }, + { "include": "#graphql-directive" }, + { "include": "#graphql-skip-newlines" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-query-mutation": { + "match": "\\s*\\b(query|mutation)\\b", + "captures": { + "1": { "name": "keyword.operation.graphql" } + } + }, + "graphql-type-interface": { + "name": "meta.type.interface.graphql", + "begin": "\\s*\\b(?:(extends?)?\\b\\s*\\b(type)|(interface)|(input))\\b\\s*([_A-Za-z][_0-9A-Za-z]*)?", + "end": "(?=.)", + "applyEndPatternLast": 1, + "captures": { + "1": { "name": "keyword.type.graphql" }, + "2": { "name": "keyword.type.graphql" }, + "3": { "name": "keyword.interface.graphql" }, + "4": { "name": "keyword.input.graphql" }, + "5": { "name": "support.type.graphql" } + }, + "patterns": [ + { + "begin": "\\s*\\b(implements)\\b\\s*", + "end": "\\s*(?={)", + "beginCaptures": { + "1": { "name": "keyword.implements.graphql" } + }, + "patterns": [ + { + "match": "\\s*([_A-Za-z][_0-9A-Za-z]*)", + "captures": { + "1": { "name": "support.type.graphql" } + } + }, + { "include": "#graphql-directive" }, + { "include": "#graphql-ampersand" }, + { "include": "#graphql-comma" } + ] + }, + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-directive" }, + { "include": "#graphql-type-object" }, + { "include": "#literal-quasi-embedded" }, + { "include": "#graphql-ignore-spaces" } + ] + }, + "graphql-ignore-spaces": { + "match": "\\s*" + }, + "graphql-type-object": { + "name": "meta.type.object.graphql", + "begin": "\\s*({)", + "end": "\\s*(})", + "beginCaptures": { + "1": { "name": "punctuation.operation.graphql" } + }, + "endCaptures": { + "1": { "name": "punctuation.operation.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-object-type" }, + { "include": "#graphql-type-definition" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-type-definition": { + "comment": "key (optionalArgs): Type", + "begin": "\\s*([_A-Za-z][_0-9A-Za-z]*)(?=\\s*\\(|:)", + "end": "(?=\\s*(([_A-Za-z][_0-9A-Za-z]*)\\s*(\\(|:)|(})))|\\s*(,)", + "beginCaptures": { + "1": { "name": "variable.graphql" } + }, + "endCaptures": { + "5": { "name": "punctuation.comma.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-variable-definitions" }, + { "include": "#graphql-type-object" }, + { "include": "#graphql-colon" }, + { "include": "#graphql-input-types" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-schema": { + "begin": "\\s*\\b(schema)\\b", + "end": "(?<=})", + "beginCaptures": { + "1": { "name": "keyword.schema.graphql" } + }, + "patterns": [ + { + "begin": "\\s*({)", + "end": "\\s*(})", + "beginCaptures": { + "1": { "name": "punctuation.operation.graphql" } + }, + "endCaptures": { + "1": { "name": "punctuation.operation.graphql" } + }, + "patterns": [ + { + "begin": "\\s*([_A-Za-z][_0-9A-Za-z]*)(?=\\s*\\(|:)", + "end": "(?=\\s*(([_A-Za-z][_0-9A-Za-z]*)\\s*(\\(|:)|(})))|\\s*(,)", + "beginCaptures": { + "1": { "name": "variable.arguments.graphql" } + }, + "endCaptures": { + "5": { "name": "punctuation.comma.graphql" } + }, + "patterns": [ + { + "match": "\\s*([_A-Za-z][_0-9A-Za-z]*)", + "captures": { + "1": { "name": "support.type.graphql" } + } + }, + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-colon" }, + { "include": "#graphql-skip-newlines" } + ] + }, + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-skip-newlines" } + ] + }, + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-skip-newlines" } + ] + }, + "graphql-comment": { + "comment": "need to prefix comment space with a scope else Atom's reflow cmd doesn't work", + "name": "comment.line.graphql", + "match": "\\s*#.*" + }, + "graphql-description-singleline": { + "comment": "In new graphql spec 0.12.0, the description have to be specified as doc-strings or single-line text in double quotes", + "name": "graphql.description.SINGLELINE", + "match": "^\\s*(\"(?:\"\")?)([^\"].*)(\"(?:\"\")?)$", + "captures": { + "1": { "name": "punctuation.definition.string.graphql.begin" }, + "2": { "name": "string.description.graphql" }, + "3": { "name": "punctuation.definition.string.graphql.end" } + } + }, + "graphql-description-docstring": { + "comment": "In new graphql spec 0.12.0, the description have to be specified as doc-strings or single-line text in double quotes", + "name": "string.block.description.graphql.DOCSTRING", + "begin": "(\"\"\")(?:((?!\"\"\").)*|\\Z)", + "beginCaptures": { + "1": { "name": "punctuation.definition.string.graphql.begin" } + }, + "end": "(\"\"\")$", + "endCaptures": { + "1": { "name": "punctuation.definition.string.graphql.end" } + }, + "patterns": [{ "include": "#graphql-string-content" }] + }, + "graphql-variable-definitions": { + "begin": "\\s*(\\()", + "end": "\\s*(\\))", + "captures": { + "1": { "name": "meta.brace.round.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-variable-definition" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-variable-definition": { + "comment": "variable: type = value,.... which may be a list", + "name": "meta.variables.graphql", + "begin": "\\s*(\\$?[_A-Za-z][_0-9A-Za-z]*)(?=\\s*\\(|:)", + "end": "(?=\\s*((\\$?[_A-Za-z][_0-9A-Za-z]*)\\s*(\\(|:)|(}|\\))))|\\s*(,)", + "beginCaptures": { + "1": { "name": "variable.parameter.graphql" } + }, + "endCaptures": { + "5": { "name": "punctuation.comma.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-colon" }, + { "include": "#graphql-input-types" }, + { "include": "#graphql-variable-assignment" }, + { "include": "#literal-quasi-embedded" }, + { "include": "#graphql-skip-newlines" } + ] + }, + "graphql-input-types": { + "patterns": [ + { "include": "#graphql-scalar-type" }, + { + "match": "\\s*([_A-Za-z][_0-9A-Za-z]*)(?:\\s*(!))?", + "captures": { + "1": { "name": "support.type.graphql" }, + "2": { "name": "keyword.operator.nulltype.graphql" } + } + }, + { + "name": "meta.type.list.graphql", + "begin": "\\s*(\\[)", + "end": "\\s*(\\])(?:\\s*(!))?", + "captures": { + "1": { "name": "meta.brace.square.graphql" }, + "2": { "name": "keyword.operator.nulltype.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-input-types" }, + { "include": "#graphql-comma" }, + { "include": "#literal-quasi-embedded" } + ] + } + ] + }, + "graphql-scalar": { + "match": "\\s*\\b(scalar)\\b\\s*([_A-Za-z][_0-9A-Za-z]*)", + "captures": { + "1": { "name": "keyword.scalar.graphql" }, + "2": { "name": "entity.scalar.graphql" } + } + }, + "graphql-scalar-type": { + "match": "\\s*\\b(Int|Float|String|Boolean|ID)\\b(?:\\s*(!))?", + "captures": { + "1": { "name": "support.type.builtin.graphql" }, + "2": { "name": "keyword.operator.nulltype.graphql" } + } + }, + "graphql-variable-assignment": { + "begin": "\\s(=)", + "end": "(?=.)", + "applyEndPatternLast": 1, + "beginCaptures": { + "1": { "name": "punctuation.assignment.graphql" } + }, + "patterns": [{ "include": "#graphql-value" }] + }, + "graphql-comma": { + "match": "\\s*(,)", + "captures": { + "1": { "name": "punctuation.comma.graphql" } + } + }, + "graphql-ampersand": { + "match": "\\s*(&)", + "captures": { + "1": { "name": "keyword.operator.logical.graphql" } + } + }, + "graphql-colon": { + "match": "\\s*(:)", + "captures": { + "1": { "name": "punctuation.colon.graphql" } + } + }, + "graphql-union-mark": { + "match": "\\s*(\\|)", + "captures": { + "1": { "name": "punctuation.union.graphql" } + } + }, + "graphql-name": { + "match": "\\s*([_A-Za-z][_0-9A-Za-z]*)", + "captures": { + "1": { "name": "entity.name.function.graphql" } + } + }, + "graphql-directive": { + "begin": "\\s*((@)\\s*([_A-Za-z][_0-9A-Za-z]*))", + "end": "(?=.)", + "applyEndPatternLast": 1, + "beginCaptures": { + "1": { "name": "entity.name.function.directive.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-arguments" }, + { "include": "#literal-quasi-embedded" }, + { "include": "#graphql-skip-newlines" } + ] + }, + "graphql-selection-set": { + "name": "meta.selectionset.graphql", + "begin": "\\s*({)", + "end": "\\s*(})", + "beginCaptures": { + "1": { "name": "punctuation.operation.graphql" } + }, + "endCaptures": { + "1": { "name": "punctuation.operation.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-field" }, + { "include": "#graphql-fragment-spread" }, + { "include": "#graphql-inline-fragment" }, + { "include": "#graphql-comma" }, + { "include": "#native-interpolation" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-field": { + "patterns": [ + { + "match": "\\s*([_A-Za-z][_0-9A-Za-z]*)\\s*(:)", + "captures": { + "1": { "name": "string.unquoted.alias.graphql" }, + "2": { "name": "punctuation.colon.graphql" } + } + }, + { + "match": "\\s*([_A-Za-z][_0-9A-Za-z]*)", + "captures": { + "1": { "name": "variable.graphql" } + } + }, + { "include": "#graphql-arguments" }, + { "include": "#graphql-directive" }, + { "include": "#graphql-selection-set" }, + { "include": "#literal-quasi-embedded" }, + { "include": "#graphql-skip-newlines" } + ] + }, + "graphql-fragment-spread": { + "begin": "\\s*(\\.\\.\\.)\\s*(?!\\bon\\b)([_A-Za-z][_0-9A-Za-z]*)", + "end": "(?=.)", + "applyEndPatternLast": 1, + "captures": { + "1": { "name": "keyword.operator.spread.graphql" }, + "2": { "name": "variable.fragment.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-selection-set" }, + { "include": "#graphql-directive" }, + { "include": "#literal-quasi-embedded" }, + { "include": "#graphql-skip-newlines" } + ] + }, + "graphql-inline-fragment": { + "begin": "\\s*(\\.\\.\\.)\\s*(?:(\\bon\\b)\\s*([_A-Za-z][_0-9A-Za-z]*))?", + "end": "(?=.)", + "applyEndPatternLast": 1, + "captures": { + "1": { "name": "keyword.operator.spread.graphql" }, + "2": { "name": "keyword.on.graphql" }, + "3": { "name": "support.type.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-selection-set" }, + { "include": "#graphql-directive" }, + { "include": "#graphql-skip-newlines" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-arguments": { + "name": "meta.arguments.graphql", + "begin": "\\s*(\\()", + "end": "\\s*(\\))", + "beginCaptures": { + "1": { "name": "meta.brace.round.directive.graphql" } + }, + "endCaptures": { + "1": { "name": "meta.brace.round.directive.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { + "begin": "\\s*([_A-Za-z][_0-9A-Za-z]*)(?:\\s*(:))", + "end": "(?=\\s*(?:(?:([_A-Za-z][_0-9A-Za-z]*)\\s*(:))|\\)))|\\s*(,)", + "beginCaptures": { + "1": { "name": "variable.parameter.graphql" }, + "2": { "name": "punctuation.colon.graphql" } + }, + "endCaptures": { + "3": { "name": "punctuation.comma.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-value" }, + { "include": "#graphql-skip-newlines" } + ] + }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-variable-name": { + "match": "\\s*(\\$[_A-Za-z][_0-9A-Za-z]*)", + "captures": { + "1": { "name": "variable.graphql" } + } + }, + "graphql-float-value": { + "match": "\\s*(-?(0|[1-9][0-9]*)(\\.[0-9]+)?((e|E)(\\+|-)?[0-9]+)?)", + "captures": { + "1": { "name": "constant.numeric.float.graphql" } + } + }, + "graphql-boolean-value": { + "match": "\\s*\\b(true|false)\\b", + "captures": { + "1": { "name": "constant.language.boolean.graphql" } + } + }, + "graphql-null-value": { + "match": "\\s*\\b(null)\\b", + "captures": { + "1": { "name": "constant.language.null.graphql" } + } + }, + "graphql-string-value": { + "contentName": "string.quoted.double.graphql", + "begin": "\\s*+((\"))", + "end": "\\s*+(?:((\"))|(\n))", + "beginCaptures": { + "1": { "name": "string.quoted.double.graphql" }, + "2": { "name": "punctuation.definition.string.graphql.begin" } + }, + "endCaptures": { + "1": { "name": "string.quoted.double.graphql" }, + "2": { "name": "punctuation.definition.string.graphql.end" }, + "3": { "name": "invalid.illegal.newline.graphql" } + }, + "patterns": [ + { "include": "#graphql-string-content" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-string-content": { + "patterns": [ + { + "name": "constant.character.escape.graphql", + "match": "\\\\[/'\"\\\\nrtbf]" + }, + { + "name": "constant.character.escape.graphql", + "match": "\\\\u([0-9a-fA-F]{4})" + } + ] + }, + "graphql-enum": { + "name": "meta.enum.graphql", + "begin": "\\s*+\\b(enum)\\b\\s*([_A-Za-z][_0-9A-Za-z]*)", + "end": "(?<=})", + "beginCaptures": { + "1": { "name": "keyword.enum.graphql" }, + "2": { "name": "support.type.enum.graphql" } + }, + "patterns": [ + { + "name": "meta.type.object.graphql", + "begin": "\\s*({)", + "end": "\\s*(})", + "beginCaptures": { + "1": { "name": "punctuation.operation.graphql" } + }, + "endCaptures": { + "1": { "name": "punctuation.operation.graphql" } + }, + "patterns": [ + { "include": "#graphql-object-type" }, + + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-enum-value" }, + { "include": "#literal-quasi-embedded" } + ] + } + ] + }, + "graphql-enum-value": { + "name": "constant.character.enum.graphql", + "match": "\\s*(?!=\\b(true|false|null)\\b)([_A-Za-z][_0-9A-Za-z]*)" + }, + "graphql-value": { + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-variable-name" }, + { "include": "#graphql-float-value" }, + { "include": "#graphql-string-value" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-boolean-value" }, + { "include": "#graphql-null-value" }, + { "include": "#graphql-enum-value" }, + { "include": "#graphql-list-value" }, + { "include": "#graphql-object-value" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "graphql-list-value": { + "patterns": [ + { + "name": "meta.listvalues.graphql", + "begin": "\\s*+(\\[)", + "end": "\\s*(\\])", + "endCaptures": { + "1": { "name": "meta.brace.square.graphql" } + }, + "beginCaptures": { + "1": { "name": "meta.brace.square.graphql" } + }, + "patterns": [{ "include": "#graphql-value" }] + } + ] + }, + "graphql-object-value": { + "patterns": [ + { + "name": "meta.objectvalues.graphql", + "begin": "\\s*+({)", + "end": "\\s*(})", + "beginCaptures": { + "1": { "name": "meta.brace.curly.graphql" } + }, + "endCaptures": { + "1": { "name": "meta.brace.curly.graphql" } + }, + "patterns": [ + { "include": "#graphql-object-field" }, + { "include": "#graphql-value" } + ] + } + ] + }, + "graphql-object-field": { + "match": "\\s*(([_A-Za-z][_0-9A-Za-z]*))\\s*(:)", + "captures": { + "1": { "name": "constant.object.key.graphql" }, + "2": { "name": "string.unquoted.graphql" }, + "3": { "name": "punctuation.graphql" } + } + }, + "graphql-union": { + "begin": "\\s*\\b(union)\\b\\s*([_A-Za-z][_0-9A-Za-z]*)", + "end": "(?=.)", + "applyEndPatternLast": 1, + "captures": { + "1": { "name": "keyword.union.graphql" }, + "2": { "name": "support.type.graphql" } + }, + "patterns": [ + { + "begin": "\\s*(=)\\s*([_A-Za-z][_0-9A-Za-z]*)", + "end": "(?=.)", + "applyEndPatternLast": 1, + "captures": { + "1": { "name": "punctuation.assignment.graphql" }, + "2": { "name": "support.type.graphql" } + }, + "patterns": [ + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-skip-newlines" }, + { "include": "#literal-quasi-embedded" }, + { + "match": "\\s*(\\|)\\s*([_A-Za-z][_0-9A-Za-z]*)", + "captures": { + "1": { "name": "punctuation.or.graphql" }, + "2": { "name": "support.type.graphql" } + } + } + ] + }, + { "include": "#graphql-comment" }, + { "include": "#graphql-description-docstring" }, + { "include": "#graphql-description-singleline" }, + { "include": "#graphql-skip-newlines" }, + { "include": "#literal-quasi-embedded" } + ] + }, + "native-interpolation": { + "name": "native.interpolation", + "begin": "\\s*(\\${)", + "end": "(})", + "beginCaptures": { + "1": { "name": "keyword.other.substitution.begin" } + }, + "endCaptures": { + "1": { "name": "keyword.other.substitution.end" } + }, + "patterns": [ + { "include": "source.js" }, + { "include": "source.ts" }, + { "include": "source.js.jsx" }, + { "include": "source.tsx" } + ] + }, + "graphql-skip-newlines": { + "match": "\\s*\n" + } + } +} diff --git a/src/json.tmlanguage.json b/src/json.tmlanguage.json new file mode 100644 index 0000000..b427d78 --- /dev/null +++ b/src/json.tmlanguage.json @@ -0,0 +1,213 @@ +{ + "information_for_contributors": [ + "This file has been converted from https://github.com/Microsoft/vscode-JSON.tmLanguage/blob/master/JSON.tmLanguage", + "If you want to provide a fix or improvement, please create a pull request against the original repository.", + "Once accepted there, we are happy to receive an update request." + ], + "version": "https://github.com/Microsoft/vscode-JSON.tmLanguage/commit/9bd83f1c252b375e957203f21793316203f61f70", + "name": "JSON with comments", + "scopeName": "source.json.comments", + "patterns": [ + { + "include": "#value" + } + ], + "repository": { + "array": { + "begin": "\\[", + "beginCaptures": { + "0": { + "name": "punctuation.definition.array.begin.json.comments" + } + }, + "end": "\\]", + "endCaptures": { + "0": { + "name": "punctuation.definition.array.end.json.comments" + } + }, + "name": "meta.structure.array.json.comments", + "patterns": [ + { + "include": "#value" + }, + { + "match": ",", + "name": "punctuation.separator.array.json.comments" + }, + { + "match": "[^\\s\\]]", + "name": "invalid.illegal.expected-array-separator.json.comments" + } + ] + }, + "comments": { + "patterns": [ + { + "begin": "/\\*\\*(?!/)", + "captures": { + "0": { + "name": "punctuation.definition.comment.json.comments" + } + }, + "end": "\\*/", + "name": "comment.block.documentation.json.comments" + }, + { + "begin": "/\\*", + "captures": { + "0": { + "name": "punctuation.definition.comment.json.comments" + } + }, + "end": "\\*/", + "name": "comment.block.json.comments" + }, + { + "captures": { + "1": { + "name": "punctuation.definition.comment.json.comments" + } + }, + "match": "(//).*$\\n?", + "name": "comment.line.double-slash.js" + } + ] + }, + "constant": { + "match": "\\b(?:true|false|null)\\b", + "name": "constant.language.json.comments" + }, + "number": { + "match": "(?x) # turn on extended mode\n -? # an optional minus\n (?:\n 0 # a zero\n | # ...or...\n [1-9] # a 1-9 character\n \\d* # followed by zero or more digits\n )\n (?:\n (?:\n \\. # a period\n \\d+ # followed by one or more digits\n )?\n (?:\n [eE] # an e character\n [+-]? # followed by an option +/-\n \\d+ # followed by one or more digits\n )? # make exponent optional\n )? # make decimal portion optional", + "name": "constant.numeric.json.comments" + }, + "object": { + "begin": "\\{", + "beginCaptures": { + "0": { + "name": "punctuation.definition.dictionary.begin.json.comments" + } + }, + "end": "\\}", + "endCaptures": { + "0": { + "name": "punctuation.definition.dictionary.end.json.comments" + } + }, + "name": "meta.structure.dictionary.json.comments", + "patterns": [ + { + "comment": "the JSON object key", + "include": "#objectkey" + }, + { + "include": "#comments" + }, + { + "begin": ":", + "beginCaptures": { + "0": { + "name": "punctuation.separator.dictionary.key-value.json.comments" + } + }, + "end": "(,)|(?=\\})", + "endCaptures": { + "1": { + "name": "punctuation.separator.dictionary.pair.json.comments" + } + }, + "name": "meta.structure.dictionary.value.json.comments", + "patterns": [ + { + "comment": "the JSON object value", + "include": "#value" + }, + { + "match": "[^\\s,]", + "name": "invalid.illegal.expected-dictionary-separator.json.comments" + } + ] + }, + { + "match": "[^\\s\\}]", + "name": "invalid.illegal.expected-dictionary-separator.json.comments" + } + ] + }, + "string": { + "begin": "\"", + "beginCaptures": { + "0": { + "name": "punctuation.definition.string.begin.json.comments" + } + }, + "end": "\"", + "endCaptures": { + "0": { + "name": "punctuation.definition.string.end.json.comments" + } + }, + "name": "string.quoted.double.json.comments", + "patterns": [ + { + "include": "#stringcontent" + } + ] + }, + "objectkey": { + "begin": "\"", + "beginCaptures": { + "0": { + "name": "punctuation.support.type.property-name.begin.json.comments" + } + }, + "end": "\"", + "endCaptures": { + "0": { + "name": "punctuation.support.type.property-name.end.json.comments" + } + }, + "name": "string.json.comments support.type.property-name.json.comments", + "patterns": [ + { + "include": "#stringcontent" + } + ] + }, + "stringcontent": { + "patterns": [ + { + "match": "(?x) # turn on extended mode\n \\\\ # a literal backslash\n (?: # ...followed by...\n [\"\\\\/bfnrt] # one of these characters\n | # ...or...\n u # a u\n [0-9a-fA-F]{4}) # and four hex digits", + "name": "constant.character.escape.json.comments" + }, + { + "match": "\\\\.", + "name": "invalid.illegal.unrecognized-string-escape.json.comments" + } + ] + }, + "value": { + "patterns": [ + { + "include": "#constant" + }, + { + "include": "#number" + }, + { + "include": "#string" + }, + { + "include": "#array" + }, + { + "include": "#object" + }, + { + "include": "#comments" + } + ] + } + } +} diff --git a/src/lib/browser.tsx b/src/lib/browser.tsx index 77212be..0573095 100644 --- a/src/lib/browser.tsx +++ b/src/lib/browser.tsx @@ -48,13 +48,19 @@ export const currentTab = atom( } ); +const GUTTER_WIDTH = 4; + export const getTabSettings = (tab: string) => fs.getJSONFile(`/${tab}/settings.json`, { persist: true, defaultValue: { panels: [["explorer"], ["query", "variables"], ["response"]], - horizontalRatio: `35fr 8px 30fr 8px 35fr`, - verticalRatio: [`100fr 8px 0fr`, `75fr 8px 25fr`, `100fr 8px 0fr`], + horizontalRatio: `35fr ${GUTTER_WIDTH}px 30fr ${GUTTER_WIDTH}px 35fr`, + verticalRatio: [ + `100fr ${GUTTER_WIDTH}px 0fr`, + `75fr ${GUTTER_WIDTH}px 25fr`, + `100fr ${GUTTER_WIDTH}px 0fr`, + ], schema: {} as SchemaConfig | null, }, }); diff --git a/src/lib/colors.ts b/src/lib/colors.ts index a4fbbfc..acc9f98 100644 --- a/src/lib/colors.ts +++ b/src/lib/colors.ts @@ -1,5 +1,31 @@ // TAILWIND CSS COLORS +export const darkBG = { + 900: "#f8fafc", + 800: "#f1f5f9", + 700: "#e2e8f0", + 600: "#cbd5e1", + 500: "#94a3b8", + 400: "#64748b", + 300: "#475569", + 200: "#334155", + 100: "#1e293b", + 50: "#0f172a", +}; + +const bg = { + 50: "#f8fafc", + 100: "#f1f5f9", + 200: "#e2e8f0", + 300: "#cbd5e1", + 400: "#94a3b8", + 500: "#64748b", + 600: "#475569", + 700: "#334155", + 800: "#1e293b", + 900: "#0f172a", +}; + export const colors = { black: "#000", white: "#fff", @@ -255,16 +281,5 @@ export const colors = { 800: "#1f2937", 900: "#111827", }, - blueGray: { - 50: "#f8fafc", - 100: "#f1f5f9", - 200: "#e2e8f0", - 300: "#cbd5e1", - 400: "#94a3b8", - 500: "#64748b", - 600: "#475569", - 700: "#334155", - 800: "#1e293b", - 900: "#0f172a", - }, + blueGray: bg, }; diff --git a/src/lib/monaco.theme.ts b/src/lib/monaco.theme.ts index 485f6b4..0b1f692 100644 --- a/src/lib/monaco.theme.ts +++ b/src/lib/monaco.theme.ts @@ -1,6 +1,17 @@ import * as monacoApi from "monaco-editor"; +import allThemes from "use-monaco/themes"; +import { colors } from "./colors"; +import { theme } from "@beamwind/play"; -export default { +export const darkTheme = { + ...allThemes["ayu-dark"], + colors: { + ...allThemes["ayu-dark"]["colors"], + // "editor.background": theme("colors", "blueGray.50"), + }, +}; + +export const lightTheme = { base: "vs", inherit: true, rules: [ diff --git a/src/lib/styles.tsx b/src/lib/styles.tsx index 9e34dcc..4e55e24 100644 --- a/src/lib/styles.tsx +++ b/src/lib/styles.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { bw } from "@beamwind/play"; -import * as ContextMenu from "@radix-ui/react-context-menu"; const styledProxy = () => {}; @@ -63,10 +62,10 @@ export const styled: Styled = new Proxy(styledProxy, { }, }) as any; -export const Panel = styled.div`h-full bg-white shadow-xl rounded-md`; +export const Panel = styled.div`h-full bg-blueGray-50 shadow-xl rounded-md`; export const StyledHeader = styled.div` -font-graphql select-none group cursor-pointer rounded-t-lg text-sm font-400 bg-blueGray-100 transition-all hover:(text-white bg-blueGray-600) z-1000 text-blueGray-500 py-2 pl-3 pr-1.5 flex flex-row items-center absolute top-0 w-full +font-graphql select-none group cursor-pointer rounded-t-md text-sm font-400 bg-blueGray-100 transition-all hover:(text-blueGray-50 bg-blueGray-600) z-1 text-blueGray-500 py-2 pl-3 pr-1.5 flex flex-row items-center absolute top-0 w-full `; export function PanelHeader({ focused, ...props }) { @@ -82,4 +81,4 @@ export function PanelHeader({ focused, ...props }) { } export const menu = `relative px-0.5 py-0.5 bg-blueGray-50 border-2 border-blueGray-300 rounded-md shadow-xl`; -export const menuItem = `w-32 px-2 py-1 font-graphql rounded-sm text-sm text-blueGray-900 hover:(bg-blue-400 border-blue-400 text-white)`; +export const menuItem = `w-32 px-2 py-1 font-graphql rounded-sm text-sm text-blueGray-900 hover:(bg-blue-400 border-blue-400 text-blueGray-50)`; diff --git a/src/themes/index.ts b/src/themes/index.ts new file mode 100644 index 0000000..0953203 --- /dev/null +++ b/src/themes/index.ts @@ -0,0 +1,65 @@ +import { Registry, StackElement, INITIAL } from "monaco-textmate"; +import * as monacoNsps from "monaco-editor"; +import { TMToMonacoToken } from "./tm-to-monaco-token"; + +class TokenizerState implements monacoNsps.languages.IState { + constructor(private _ruleStack: StackElement) {} + + public get ruleStack(): StackElement { + return this._ruleStack; + } + + public clone(): TokenizerState { + return new TokenizerState(this._ruleStack); + } + + public equals(other: monacoNsps.languages.IState): boolean { + if ( + !other || + !(other instanceof TokenizerState) || + other !== this || + other._ruleStack !== this._ruleStack + ) { + return false; + } + return true; + } +} + +/** + * Wires up monaco-editor with monaco-textmate + * + * @param monaco monaco namespace this operation should apply to (usually the `monaco` global unless you have some other setup) + * @param registry TmGrammar `Registry` this wiring should rely on to provide the grammars + * @param languages `Map` of language ids (string) to TM names (string) + */ +export function wireTmGrammars( + monaco: typeof monacoNsps, + registry: Registry, + languages: Map, + editor?: monacoNsps.editor.ICodeEditor +) { + return Promise.all( + Array.from(languages.keys()).map(async (languageId) => { + const grammar = await registry.loadGrammar(languages.get(languageId)); + + monaco.languages.setTokensProvider(languageId, { + getInitialState: () => new TokenizerState(INITIAL), + tokenize: (line: string, state: TokenizerState) => { + const res = grammar.tokenizeLine(line, state.ruleStack); + + return { + endState: new TokenizerState(res.ruleStack), + tokens: res.tokens.map((token) => ({ + ...token, + // TODO: At the moment, monaco-editor doesn't seem to accept array of scopes + scopes: editor + ? TMToMonacoToken(editor, token.scopes) + : token.scopes.join(" "), + })), + }; + }, + }); + }) + ); +} diff --git a/src/themes/theme-convertor.ts b/src/themes/theme-convertor.ts new file mode 100644 index 0000000..cf8748d --- /dev/null +++ b/src/themes/theme-convertor.ts @@ -0,0 +1,100 @@ +import type * as monaco from "monaco-editor"; + +export interface IVSCodeTheme { + $schema: "vscode://schemas/color-theme"; + type: "dark" | "light"; + colors: { [name: string]: string }; + tokenColors: { + name?: string; + scope: string[] | string; + settings: { + foreground?: string; + background?: string; + fontStyle?: string; + }; + }[]; +} + +export type IMonacoThemeRule = monaco.editor.ITokenThemeRule[]; +export function convertTheme( + theme: IVSCodeTheme +): monaco.editor.IStandaloneThemeData { + const monacoThemeRule: IMonacoThemeRule = [ + { + token: "unmatched", + foreground: + theme.colors["editor.foreground"] ?? + theme.colors["foreground"] ?? + "#bbbbbb", + }, + ]; + const returnTheme: monaco.editor.IStandaloneThemeData = { + inherit: false, + base: "vs-dark", + colors: { + ...theme.colors, + "editor.foreground": "#bbbbbb", + foreground: "#bbbbbb", + }, + rules: monacoThemeRule, + encodedTokensColors: [], + }; + + theme.tokenColors.map((color) => { + if (typeof color.scope == "string") { + const split = color.scope.split(","); + + if (split.length > 1) { + color.scope = split; + evalAsArray(); + return; + } + + monacoThemeRule.push( + Object.assign( + {}, + Object.fromEntries( + Object.entries(color.settings).map(([k, v]) => + v === "white" + ? [k, "#ffffff"] + : v === "inherit" + ? [k, "#ffffff"] + : [k, v] + ) + ), + { + // token: color.scope.replace(/\s/g, '') + token: color.scope, + } + ) + ); + return; + } + + evalAsArray(); + + function evalAsArray() { + (color.scope as string[]).map((scope) => { + monacoThemeRule.push( + Object.assign( + {}, + Object.fromEntries( + Object.entries(color.settings).map(([k, v]) => + v === "white" + ? [k, "#ffffff"] + : v === "inherit" + ? [k, "#ffffff"] + : [k, v] + ) + ), + { + token: scope, + } + ) + ); + }); + } + }); + + return returnTheme; +} diff --git a/src/themes/tm-to-monaco-token.ts b/src/themes/tm-to-monaco-token.ts new file mode 100644 index 0000000..86f770d --- /dev/null +++ b/src/themes/tm-to-monaco-token.ts @@ -0,0 +1,67 @@ +import * as monacoNsps from "monaco-editor"; + +// as described in issue: https://github.com/NeekSandhu/monaco-textmate/issues/5 +export const TMToMonacoToken = ( + editor: monacoNsps.editor.ICodeEditor, + scopes: string[] +) => { + let scopeName = ""; + // get the scope name. Example: cpp , java, haskell + for (let i = scopes[0].length - 1; i >= 0; i -= 1) { + const char = scopes[0][i]; + if (char === ".") { + break; + } + scopeName = char + scopeName; + } + + // iterate through all scopes from last to first + for (let i = scopes.length - 1; i >= 0; i -= 1) { + const scope = scopes[i]; + + /** + * Try all possible tokens from high specific token to low specific token + * + * Example: + * 0 meta.function.definition.parameters.cpp + * 1 meta.function.definition.parameters + * + * 2 meta.function.definition.cpp + * 3 meta.function.definition + * + * 4 meta.function.cpp + * 5 meta.function + * + * 6 meta.cpp + * 7 meta + */ + for (let i = scope.length - 1; i >= 0; i -= 1) { + const char = scope[i]; + if (char === ".") { + const token = scope.slice(0, i); + if ( + editor["_themeService"] + .getColorTheme() + ._tokenTheme._match(token + "." + scopeName)._foreground > 1 + ) { + return token; + } + } + } + for (let i = scope.length - 1; i >= 0; i -= 1) { + const char = scope[i]; + if (char === ".") { + const token = scope.slice(0, i); + + if ( + editor["_themeService"].getColorTheme()._tokenTheme._match(token) + ._foreground > 1 + ) { + return token; + } + } + } + } + + return "unmatched"; +}; diff --git a/src/themes/vscode-theme.js b/src/themes/vscode-theme.js new file mode 100644 index 0000000..34ba10f --- /dev/null +++ b/src/themes/vscode-theme.js @@ -0,0 +1,1740 @@ +export default { + $schema: "vscode://schemas/color-theme", + type: "dark", + colors: { + "activityBar.background": "#1c2022", + "activityBar.border": "#2d2d2d", + "activityBarBadge.background": "#c0c0c0", + "activityBarBadge.foreground": "#1c2022", + "badge.background": "#374140", + "button.background": "#40a9f3", + "button.hoverBackground": "#66b9f4", + "editor.background": "#1c2022", + "editor.selectionBackground": "#40a8f348", + "editorCursor.foreground": "#66b9f4", + "editorGroup.border": "#111518", + "editorGroup.dropBackground": "#ffd3991f", + "editorGroupHeader.tabsBackground": "#111518", + "editorHoverWidget.background": "#1c2022", + "editorHoverWidget.border": "#111518", + "editorSuggestWidget.background": "#111518", + "editorSuggestWidget.border": "#111518", + "editorSuggestWidget.selectedBackground": "#24282a", + "editorWarning.foreground": "#ffd399", + focusBorder: "#66b9f4", + "input.background": "#111518", + "input.foreground": "#c0c0c0", + "inputOption.activeBorder": "#66b9f4", + "list.focusBackground": "#24282a", + "list.hoverBackground": "#222a2b", + "menu.background": "#1c2022", + "menu.foreground": "#c0c0c0", + "menu.selectionBackground": "#24282a", + "menu.selectionForeground": "#ffffff", + "menubar.selectionBackground": "#ffffff10", + "menubar.selectionForeground": "#ffffff", + "peekViewEditor.background": "#111518", + "scrollbarSlider.activeBackground": "#374140", + "scrollbarSlider.background": "#37414050", + "sideBar.background": "#191d1f", + "sideBar.border": "#2d2d2d", + "statusBar.background": "#1c2022", + "statusBar.border": "#111518", + "tab.activeBackground": "#1c2022", + "tab.border": "#111518", + "tab.inactiveBackground": "#111518", + "titleBar.activeBackground": "#1c2022", + "titleBar.border": "#2d2d2d", + //"activityBar.dropBackground": "#ffffff1f", + //"activityBar.foreground": "#ffffff", + //"activityBar.inactiveForeground": "#ffffff99", + //"badge.foreground": "#ffffff", + //"breadcrumb.activeSelectionForeground": "#e0e0e0", + //"breadcrumb.background": "#1c2022", + //"breadcrumb.focusForeground": "#e0e0e0", + //"breadcrumb.foreground": "#cccccccc", + //"breadcrumbPicker.background": "#252526", + //"button.foreground": "#ffffff", + //"descriptionForeground": "#ccccccb3", + //"diffEditor.insertedTextBackground": "#9bb95533", + //"diffEditor.removedTextBackground": "#ff000033", + //"dropdown.background": "#3c3c3c", + //"dropdown.border": "#3c3c3c", + //"dropdown.foreground": "#f0f0f0", + //"editor.findMatchBackground": "#515c6a", + //"editor.findMatchHighlightBackground": "#ea5c0055", + //"editor.findRangeHighlightBackground": "#3a3d4166", + //"editor.foreground": "#bbbbbb", + //"editor.hoverHighlightBackground": "#264f7840", + //"editor.inactiveSelectionBackground": "#40a8f324", + //"editor.lineHighlightBorder": "#282828", + //"editor.rangeHighlightBackground": "#ffffff0b", + //"editor.selectionHighlightBackground": "#0d7dce2b", + //"editor.snippetFinalTabstopHighlightBorder": "#525252", + //"editor.snippetTabstopHighlightBackground": "#7c7c7c4d", + //"editor.wordHighlightBackground": "#575757b8", + //"editor.wordHighlightStrongBackground": "#004972b8", + //"editorActiveLineNumber.foreground": "#c6c6c6", + //"editorBracketMatch.background": "#0064001a", + //"editorBracketMatch.border": "#888888", + //"editorCodeLens.foreground": "#999999", + //"editorError.foreground": "#ea4646", + //"editorGroupHeader.noTabsBackground": "#1c2022", + //"editorGutter.background": "#1c2022", + //"editorHint.foreground": "#eeeeeeb3", + //"editorHoverWidget.statusBarBackground": "#222629", + //"editorIndentGuide.activeBackground": "#e3e4e229", + //"editorIndentGuide.background": "#e3e4e229", + //"editorInfo.foreground": "#008000", + //"editorLineNumber.activeForeground": "#c6c6c6", + //"editorLineNumber.foreground": "#858585", + //"editorLink.activeForeground": "#4e94ce", + //"editorMarkerNavigation.background": "#2d2d30", + //"editorMarkerNavigationError.background": "#ea4646", + //"editorMarkerNavigationInfo.background": "#008000", + //"editorMarkerNavigationWarning.background": "#ffd399", + //"editorOverviewRuler.border": "#7f7f7f4d", + //"editorOverviewRuler.bracketMatchForeground": "#a0a0a0", + //"editorOverviewRuler.commonContentForeground": "#60606066", + //"editorOverviewRuler.currentContentForeground": "#40c8ae80", + //"editorOverviewRuler.errorForeground": "#ff1212b3", + //"editorOverviewRuler.findMatchForeground": "#f6b94db3", + //"editorOverviewRuler.incomingContentForeground": "#40a6ff80", + //"editorOverviewRuler.infoForeground": "#121288b3", + //"editorOverviewRuler.rangeHighlightForeground": "#007acc99", + //"editorOverviewRuler.selectionHighlightForeground": "#a0a0a0cc", + //"editorOverviewRuler.warningForeground": "#128812b3", + //"editorOverviewRuler.wordHighlightForeground": "#a0a0a0cc", + //"editorOverviewRuler.wordHighlightStrongForeground": "#c0a0c0cc", + //"editorPane.background": "#1c2022", + //"editorRuler.foreground": "#5a5a5a", + //"editorSuggestWidget.foreground": "#bbbbbb", + //"editorSuggestWidget.highlightForeground": "#0097fb", + //"editorUnnecessaryCode.opacity": "#000000aa", + //"editorWhitespace.foreground": "#e3e4e229", + //"editorWidget.background": "#252526", + //"editorWidget.border": "#454545", + //"errorForeground": "#f48771", + //"foreground": "#cccccc", + //"input.placeholderForeground": "#cccccc80", + //"inputValidation.errorBackground": "#5a1d1d", + //"inputValidation.errorBorder": "#be1100", + //"inputValidation.infoBackground": "#063b49", + //"inputValidation.infoBorder": "#007acc", + //"inputValidation.warningBackground": "#352a05", + //"inputValidation.warningBorder": "#b89500", + //"list.activeSelectionBackground": "#094771", + //"list.activeSelectionForeground": "#ffffff", + //"list.dropBackground": "#24282a", + //"list.errorForeground": "#f88070", + //"list.highlightForeground": "#0097fb", + //"list.inactiveSelectionBackground": "#37373d", + //"list.invalidItemForeground": "#b89500", + //"list.warningForeground": "#4d9e4d", + //"listFilterWidget.background": "#653723", + //"listFilterWidget.noMatchesOutline": "#be1100", + //"listFilterWidget.outline": "#00000000", + //"menu.separatorBackground": "#bbbbbb", + //"merge.commonContentBackground": "#60606029", + //"merge.commonHeaderBackground": "#60606066", + //"merge.currentContentBackground": "#40c8ae33", + //"merge.currentHeaderBackground": "#40c8ae80", + //"merge.incomingContentBackground": "#40a6ff33", + //"merge.incomingHeaderBackground": "#40a6ff80", + //"notificationCenterHeader.background": "#303031", + //"notificationLink.foreground": "#3794ff", + //"notifications.background": "#252526", + //"notifications.border": "#303031", + //"panel.background": "#1c2022", + //"panel.border": "#80808059", + //"panel.dropBackground": "#ffffff1f", + //"panelTitle.activeBorder": "#80808059", + //"panelTitle.activeForeground": "#e7e7e7", + //"panelTitle.inactiveForeground": "#e7e7e799", + //"peekView.border": "#007acc", + //"peekViewEditor.matchHighlightBackground": "#ff8f0099", + //"peekViewEditorGutter.background": "#111518", + //"peekViewResult.background": "#252526", + //"peekViewResult.fileForeground": "#ffffff", + //"peekViewResult.lineForeground": "#bbbbbb", + //"peekViewResult.matchHighlightBackground": "#ea5c004d", + //"peekViewResult.selectionBackground": "#3399ff33", + //"peekViewResult.selectionForeground": "#ffffff", + //"peekViewTitle.background": "#1e1e1e", + //"peekViewTitleDescription.foreground": "#ccccccb3", + //"peekViewTitleLabel.foreground": "#ffffff", + //"pickerGroup.border": "#3f3f46", + //"pickerGroup.foreground": "#3794ff", + //"progressBar.background": "#0e70c0", + //"scrollbar.shadow": "#000000", + //"scrollbarSlider.hoverBackground": "#646464b3", + //"settings.checkboxBackground": "#3c3c3c", + //"settings.checkboxBorder": "#3c3c3c", + //"settings.checkboxForeground": "#f0f0f0", + //"settings.dropdownBackground": "#3c3c3c", + //"settings.dropdownBorder": "#3c3c3c", + //"settings.dropdownForeground": "#f0f0f0", + //"settings.dropdownListBorder": "#454545", + //"settings.headerForeground": "#e7e7e7", + //"settings.modifiedItemIndicator": "#0c7d9d", + //"settings.numberInputBackground": "#111518", + //"settings.numberInputForeground": "#c0c0c0", + //"settings.textInputBackground": "#111518", + //"settings.textInputForeground": "#c0c0c0", + //"sideBar.dropBackground": "#ffffff1f", + //"sideBarSectionHeader.background": "#80808033", + //"statusBar.foreground": "#ffffff", + //"statusBar.noFolderBackground": "#68217a", + //"statusBar.noFolderBorder": "#111518", + //"statusBar.noFolderForeground": "#ffffff", + //"statusBarItem.activeBackground": "#ffffff2e", + //"statusBarItem.hostBackground": "#388a34", + //"statusBarItem.hoverBackground": "#ffffff1f", + //"statusBarItem.prominentBackground": "#388a34", + //"statusBarItem.prominentHoverBackground": "#369432", + //"tab.activeForeground": "#ffffff", + //"tab.activeModifiedBorder": "#3399cc", + //"tab.inactiveForeground": "#ffffff80", + //"tab.inactiveModifiedBorder": "#3399cc80", + //"tab.unfocusedActiveForeground": "#ffffff80", + //"tab.unfocusedActiveModifiedBorder": "#3399cc80", + //"tab.unfocusedInactiveForeground": "#ffffff40", + //"tab.unfocusedInactiveModifiedBorder": "#3399cc40", + //"terminal.background": "#1c2022", + //"terminal.border": "#80808059", + //"terminal.foreground": "#cccccc", + //"terminal.selectionBackground": "#ffffff40", + //"textBlockQuote.background": "#7f7f7f1a", + //"textBlockQuote.border": "#007acc80", + //"textCodeBlock.background": "#0a0a0a66", + //"textLink.activeForeground": "#3794ff", + //"textLink.foreground": "#3794ff", + //"textPreformat.foreground": "#d7ba7d", + //"textSeparator.foreground": "#ffffff2e", + //"titleBar.activeForeground": "#cccccc", + //"titleBar.inactiveBackground": "#1c202299", + //"titleBar.inactiveForeground": "#cccccc99", + //"widget.shadow": "#000000" + }, + tokenColors: [ + { + name: "Comment", + scope: ["comment"], + settings: { + foreground: "#5C6370", + fontStyle: "italic", + }, + }, + { + name: "Comment Markup Link", + scope: ["comment markup.link"], + settings: { + foreground: "#5C6370", + }, + }, + { + name: "Entity Name Type", + scope: ["entity.name.type"], + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "Entity Other Inherited Class", + scope: ["entity.other.inherited-class"], + settings: { + foreground: "#98C379", + }, + }, + { + name: "Keyword", + scope: ["keyword"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Keyword Control", + scope: ["keyword.control"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Keyword Operator", + scope: ["keyword.operator"], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Keyword Other Special Method", + scope: ["keyword.other.special-method"], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Keyword Other Unit", + scope: ["keyword.other.unit"], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "Storage", + scope: ["storage"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Storage Type Annotation,storage Type Primitive", + scope: ["storage.type.annotation", "storage.type.primitive"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Storage Modifier Package,storage Modifier Import", + scope: ["storage.modifier.package", "storage.modifier.import"], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Constant", + scope: ["constant"], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "Constant Variable", + scope: ["constant.variable"], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "Constant Character Escape", + scope: ["constant.character.escape"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "Constant Numeric", + scope: ["constant.numeric"], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "Constant Other Color", + scope: ["constant.other.color"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "Constant Other Symbol", + scope: ["constant.other.symbol"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "Variable", + scope: ["variable"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "Variable Interpolation", + scope: ["variable.interpolation"], + settings: { + foreground: "#BE5046", + }, + }, + { + name: "Variable Parameter", + scope: ["variable.parameter"], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "String", + scope: ["string"], + settings: { + foreground: "#98C379", + }, + }, + { + name: "String Regexp", + scope: ["string.regexp"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "String Regexp Source Ruby Embedded", + scope: ["string.regexp source.ruby.embedded"], + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "String Other Link", + scope: ["string.other.link"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "Punctuation Definition Comment", + scope: ["punctuation.definition.comment"], + settings: { + foreground: "#5C6370", + }, + }, + { + name: + "Punctuation Definition Method Parameters,punctuation Definition Function Parameters,punctuation Definition Parameters,punctuation Definition Separator,punctuation Definition Seperator,punctuation Definition Array", + scope: [ + "punctuation.definition.method-parameters", + "punctuation.definition.function-parameters", + "punctuation.definition.parameters", + "punctuation.definition.separator", + "punctuation.definition.seperator", + "punctuation.definition.array", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Punctuation Definition Heading,punctuation Definition Identity", + scope: [ + "punctuation.definition.heading", + "punctuation.definition.identity", + ], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Punctuation Definition Bold", + scope: ["punctuation.definition.bold"], + settings: { + foreground: "#E5C07B", + fontStyle: "bold", + }, + }, + { + name: "Punctuation Definition Italic", + scope: ["punctuation.definition.italic"], + settings: { + foreground: "#C678DD", + fontStyle: "italic", + }, + }, + { + name: "Punctuation Section Embedded", + scope: ["punctuation.section.embedded"], + settings: { + foreground: "#BE5046", + }, + }, + { + name: + "Punctuation Section Method,punctuation Section Class,punctuation Section Inner Class", + scope: [ + "punctuation.section.method", + "punctuation.section.class", + "punctuation.section.inner-class", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Support Class", + scope: ["support.class"], + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "Support Type", + scope: ["support.type"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "Support Function", + scope: ["support.function"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "Support Function Any Method", + scope: ["support.function.any-method"], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Entity Name Function", + scope: ["entity.name.function"], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Entity Name Class,entity Name Type Class", + scope: ["entity.name.class", "entity.name.type.class"], + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "Entity Name Section", + scope: ["entity.name.section"], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Entity Name Tag", + scope: ["entity.name.tag"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "Entity Other Attribute Name", + scope: ["entity.other.attribute-name"], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "Entity Other Attribute Name Id", + scope: ["entity.other.attribute-name.id"], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Meta Class", + scope: ["meta.class"], + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "Meta Class Body", + scope: ["meta.class.body"], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Meta Method Call,meta Method", + scope: ["meta.method-call", "meta.method"], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Meta Definition Variable", + scope: ["meta.definition.variable"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "Meta Link", + scope: ["meta.link"], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "Meta Require", + scope: ["meta.require"], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Meta Selector", + scope: ["meta.selector"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Meta Separator", + scope: ["meta.separator"], + settings: { + background: "#373B41", + foreground: "#ABB2BF", + }, + }, + { + name: "Meta Tag", + scope: ["meta.tag"], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Underline", + scope: ["underline"], + settings: { + "text-decoration": "underline", + }, + }, + { + name: "None", + scope: ["none"], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Invalid Deprecated", + scope: ["invalid.deprecated"], + settings: { + foreground: "#523D14", + background: "#E0C285", + }, + }, + { + name: "Invalid Illegal", + scope: ["invalid.illegal"], + settings: { + foreground: "white", + background: "#E05252", + }, + }, + { + name: "Markup Bold", + scope: ["markup.bold"], + settings: { + foreground: "#D19A66", + fontStyle: "bold", + }, + }, + { + name: "Markup Changed", + scope: ["markup.changed"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Markup Deleted", + scope: ["markup.deleted"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "Markup Italic", + scope: ["markup.italic"], + settings: { + foreground: "#C678DD", + fontStyle: "italic", + }, + }, + { + name: "Markup Heading", + scope: ["markup.heading"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "Markup Heading Punctuation Definition Heading", + scope: ["markup.heading punctuation.definition.heading"], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Markup Link", + scope: ["markup.link"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Markup Inserted", + scope: ["markup.inserted"], + settings: { + foreground: "#98C379", + }, + }, + { + name: "Markup Quote", + scope: ["markup.quote"], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "Markup Raw", + scope: ["markup.raw"], + settings: { + foreground: "#98C379", + }, + }, + { + name: "Source C Keyword Operator", + scope: ["source.c keyword.operator"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Source Cpp Keyword Operator", + scope: ["source.cpp keyword.operator"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Source Cs Keyword Operator", + scope: ["source.cs keyword.operator"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Source Css Property Name,source Css Property Value", + scope: ["source.css property-name", "source.css property-value"], + settings: { + foreground: "#828997", + }, + }, + { + name: + "Source Css Property Name Support,source Css Property Value Support", + scope: [ + "source.css property-name.support", + "source.css property-value.support", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Source Gfm Markup", + scope: ["source.gfm markup"], + settings: { + "-webkit-font-smoothing": "auto", + }, + }, + { + name: "Source Gfm Link Entity", + scope: ["source.gfm link entity"], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "Source Go Storage Type String", + scope: ["source.go storage.type.string"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Source Ini Keyword Other Definition Ini", + scope: ["source.ini keyword.other.definition.ini"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "Source Java Storage Modifier Import", + scope: ["source.java storage.modifier.import"], + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "Source Java Storage Type", + scope: ["source.java storage.type"], + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "Source Java Keyword Operator Instanceof", + scope: ["source.java keyword.operator.instanceof"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Source Java Properties Meta Key Pair", + scope: ["source.java-properties meta.key-pair"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "Source Java Properties Meta Key Pair > Punctuation", + scope: ["source.java-properties meta.key-pair > punctuation"], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "Source Js Keyword Operator", + scope: ["source.js keyword.operator"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: + "Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void", + scope: [ + "source.js keyword.operator.delete", + "source.js keyword.operator.in", + "source.js keyword.operator.of", + "source.js keyword.operator.instanceof", + "source.js keyword.operator.new", + "source.js keyword.operator.typeof", + "source.js keyword.operator.void", + ], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Source Json Meta Structure Dictionary Json > String Quoted Json", + scope: [ + "source.json meta.structure.dictionary.json > string.quoted.json", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: + "Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String", + scope: [ + "source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: + "Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation", + scope: [ + "source.json meta.structure.dictionary.json > value.json > string.quoted.json", + "source.json meta.structure.array.json > value.json > string.quoted.json", + "source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation", + "source.json meta.structure.array.json > value.json > string.quoted.json > punctuation", + ], + settings: { + foreground: "#98C379", + }, + }, + { + name: + "Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json", + scope: [ + "source.json meta.structure.dictionary.json > constant.language.json", + "source.json meta.structure.array.json > constant.language.json", + ], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "Source Ruby Constant Other Symbol > Punctuation", + scope: ["source.ruby constant.other.symbol > punctuation"], + settings: { + foreground: "inherit", + }, + }, + { + name: "Source Python Keyword Operator Logical Python", + scope: ["source.python keyword.operator.logical.python"], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "Source Python Variable Parameter", + scope: ["source.python variable.parameter"], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "Meta Attribute Rust", + scope: ["meta.attribute.rust"], + settings: { + foreground: "#BCC199", + }, + }, + { + name: "Storage Modifier Lifetime Rust,entity Name Lifetime Rust", + scope: ["storage.modifier.lifetime.rust", "entity.name.lifetime.rust"], + settings: { + foreground: "#33E8EC", + }, + }, + { + name: "Keyword Unsafe Rust", + scope: ["keyword.unsafe.rust"], + settings: { + foreground: "#CC6B73", + }, + }, + { + name: "customrule", + scope: "customrule", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Support Type Property Name", + scope: "support.type.property-name", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Punctuation for Quoted String", + scope: "string.quoted.double punctuation", + settings: { + foreground: "#98C379", + }, + }, + { + name: "[VSCODE-CUSTOM] Support Constant", + scope: "support.constant", + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] JSON Property Name", + scope: "support.type.property-name.json", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JSON Punctuation for Property Name", + scope: "support.type.property-name.json punctuation", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Punctuation for key-value", + scope: [ + "punctuation.separator.key-value.ts", + "punctuation.separator.key-value.js", + "punctuation.separator.key-value.tsx", + ], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Embedded Operator", + scope: [ + "source.js.embedded.html keyword.operator", + "source.ts.embedded.html keyword.operator", + ], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Variable Other Readwrite", + scope: [ + "variable.other.readwrite.js", + "variable.other.readwrite.ts", + "variable.other.readwrite.tsx", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Support Variable Dom", + scope: ["support.variable.dom.js", "support.variable.dom.ts"], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Support Variable Property Dom", + scope: [ + "support.variable.property.dom.js", + "support.variable.property.dom.ts", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Interpolation String Punctuation", + scope: [ + "meta.template.expression.js punctuation.definition", + "meta.template.expression.ts punctuation.definition", + ], + settings: { + foreground: "#BE5046", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Punctuation Type Parameters", + scope: [ + "source.ts punctuation.definition.typeparameters", + "source.js punctuation.definition.typeparameters", + "source.tsx punctuation.definition.typeparameters", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Definition Block", + scope: [ + "source.ts punctuation.definition.block", + "source.js punctuation.definition.block", + "source.tsx punctuation.definition.block", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Punctuation Separator Comma", + scope: [ + "source.ts punctuation.separator.comma", + "source.js punctuation.separator.comma", + "source.tsx punctuation.separator.comma", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Variable Property", + scope: [ + "support.variable.property.js", + "support.variable.property.ts", + "support.variable.property.tsx", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Default Keyword", + scope: [ + "keyword.control.default.js", + "keyword.control.default.ts", + "keyword.control.default.tsx", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Instanceof Keyword", + scope: [ + "keyword.operator.expression.instanceof.js", + "keyword.operator.expression.instanceof.ts", + "keyword.operator.expression.instanceof.tsx", + ], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Of Keyword", + scope: [ + "keyword.operator.expression.of.js", + "keyword.operator.expression.of.ts", + "keyword.operator.expression.of.tsx", + ], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Braces/Brackets", + scope: [ + "meta.brace.round.js", + "meta.array-binding-pattern-variable.js", + "meta.brace.square.js", + "meta.brace.round.ts", + "meta.array-binding-pattern-variable.ts", + "meta.brace.square.ts", + "meta.brace.round.tsx", + "meta.array-binding-pattern-variable.tsx", + "meta.brace.square.tsx", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Punctuation Accessor", + scope: [ + "source.js punctuation.accessor", + "source.ts punctuation.accessor", + "source.tsx punctuation.accessor", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Punctuation Terminator Statement", + scope: [ + "punctuation.terminator.statement.js", + "punctuation.terminator.statement.ts", + "punctuation.terminator.statement.tsx", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Array variables", + scope: [ + "meta.array-binding-pattern-variable.js variable.other.readwrite.js", + "meta.array-binding-pattern-variable.ts variable.other.readwrite.ts", + "meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx", + ], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Support Variables", + scope: [ + "source.js support.variable", + "source.ts support.variable", + "source.tsx support.variable", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Support Variables", + scope: [ + "variable.other.constant.property.js", + "variable.other.constant.property.ts", + "variable.other.constant.property.tsx", + ], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Keyword New", + scope: [ + "keyword.operator.new.ts", + "keyword.operator.new.j", + "keyword.operator.new.tsx", + ], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "[VSCODE-CUSTOM] TS Keyword Operator", + scope: ["source.ts keyword.operator", "source.tsx keyword.operator"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Punctuation Parameter Separator", + scope: [ + "punctuation.separator.parameter.js", + "punctuation.separator.parameter.ts", + "punctuation.separator.parameter.tsx ", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Import", + scope: [ + "constant.language.import-export-all.js", + "constant.language.import-export-all.ts", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JSX/TSX Import", + scope: [ + "constant.language.import-export-all.jsx", + "constant.language.import-export-all.tsx", + ], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Keyword Control As", + scope: [ + "keyword.control.as.js", + "keyword.control.as.ts", + "keyword.control.as.jsx", + "keyword.control.as.tsx", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Variable Alias", + scope: [ + "variable.other.readwrite.alias.js", + "variable.other.readwrite.alias.ts", + "variable.other.readwrite.alias.jsx", + "variable.other.readwrite.alias.tsx", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Constants", + scope: [ + "variable.other.constant.js", + "variable.other.constant.ts", + "variable.other.constant.jsx", + "variable.other.constant.tsx", + ], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Export Variable", + scope: [ + "meta.export.default.js variable.other.readwrite.js", + "meta.export.default.ts variable.other.readwrite.ts", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Template Strings Punctuation Accessor", + scope: [ + "source.js meta.template.expression.js punctuation.accessor", + "source.ts meta.template.expression.ts punctuation.accessor", + "source.tsx meta.template.expression.tsx punctuation.accessor", + ], + settings: { + foreground: "#98C379", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Import equals", + scope: [ + "source.js meta.import-equals.external.js keyword.operator", + "source.jsx meta.import-equals.external.jsx keyword.operator", + "source.ts meta.import-equals.external.ts keyword.operator", + "source.tsx meta.import-equals.external.tsx keyword.operator", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Type Module", + scope: + "entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx", + settings: { + foreground: "#98C379", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Meta Class", + scope: "meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Property Definition Variable", + scope: [ + "meta.definition.property.js variable", + "meta.definition.property.ts variable", + "meta.definition.property.jsx variable", + "meta.definition.property.tsx variable", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Meta Type Parameters Type", + scope: [ + "meta.type.parameters.js support.type", + "meta.type.parameters.jsx support.type", + "meta.type.parameters.ts support.type", + "meta.type.parameters.tsx support.type", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Meta Tag Keyword Operator", + scope: [ + "source.js meta.tag.js keyword.operator", + "source.jsx meta.tag.jsx keyword.operator", + "source.ts meta.tag.ts keyword.operator", + "source.tsx meta.tag.tsx keyword.operator", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Meta Tag Punctuation", + scope: [ + "meta.tag.js punctuation.section.embedded", + "meta.tag.jsx punctuation.section.embedded", + "meta.tag.ts punctuation.section.embedded", + "meta.tag.tsx punctuation.section.embedded", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Meta Array Literal Variable", + scope: [ + "meta.array.literal.js variable", + "meta.array.literal.jsx variable", + "meta.array.literal.ts variable", + "meta.array.literal.tsx variable", + ], + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Module Exports", + scope: [ + "support.type.object.module.js", + "support.type.object.module.jsx", + "support.type.object.module.ts", + "support.type.object.module.tsx", + ], + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] JSON Constants", + scope: ["constant.language.json"], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Object Constants", + scope: [ + "variable.other.constant.object.js", + "variable.other.constant.object.jsx", + "variable.other.constant.object.ts", + "variable.other.constant.object.tsx", + ], + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Properties Keyword", + scope: [ + "storage.type.property.js", + "storage.type.property.jsx", + "storage.type.property.ts", + "storage.type.property.tsx", + ], + settings: { + foreground: "#56B6C2", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Single Quote Inside Templated String", + scope: [ + "meta.template.expression.js string.quoted punctuation.definition", + "meta.template.expression.jsx string.quoted punctuation.definition", + "meta.template.expression.ts string.quoted punctuation.definition", + "meta.template.expression.tsx string.quoted punctuation.definition", + ], + settings: { + foreground: "#98C379", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS Backtick inside Templated String", + scope: [ + "meta.template.expression.js string.template punctuation.definition.string.template", + "meta.template.expression.jsx string.template punctuation.definition.string.template", + "meta.template.expression.ts string.template punctuation.definition.string.template", + "meta.template.expression.tsx string.template punctuation.definition.string.template", + ], + settings: { + foreground: "#98C379", + }, + }, + { + name: "[VSCODE-CUSTOM] JS/TS In Keyword for Loops", + scope: [ + "keyword.operator.expression.in.js", + "keyword.operator.expression.in.jsx", + "keyword.operator.expression.in.ts", + "keyword.operator.expression.in.tsx", + ], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "[VSCODE-CUSTOM] Python Constants Other", + scope: "source.python constant.other", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Python Constants", + scope: "source.python constant", + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] Python Placeholder Character", + scope: "constant.character.format.placeholder.other.python storage", + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] Python Magic", + scope: "support.variable.magic.python", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] Python Meta Function Parameters", + scope: "meta.function.parameters.python", + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] Python Function Separator Annotation", + scope: "punctuation.separator.annotation.python", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Python Function Separator Punctuation", + scope: "punctuation.separator.parameters.python", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] CSharp Fields", + scope: "entity.name.variable.field.cs", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] CSharp Keyword Operators", + scope: "source.cs keyword.operator", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] CSharp Variables", + scope: "variable.other.readwrite.cs", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] CSharp Variables Other", + scope: "variable.other.object.cs", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] CSharp Property Other", + scope: "variable.other.object.property.cs", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] CSharp Property", + scope: "entity.name.variable.property.cs", + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "[VSCODE-CUSTOM] CSharp Storage Type", + scope: "storage.type.cs", + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "[VSCODE-CUSTOM] Rust Unsafe Keyword", + scope: "keyword.other.unsafe.rust", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown Raw Block", + scope: "markup.raw.block.markdown", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Shell Variables Punctuation Definition", + scope: "punctuation.definition.variable.shell", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] Css Support Constant Value", + scope: "support.constant.property-value.css", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Css Punctuation Definition Constant", + scope: "punctuation.definition.constant.css", + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] Sass Punctuation for key-value", + scope: "punctuation.separator.key-value.scss", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] Sass Punctuation for constants", + scope: "punctuation.definition.constant.scss", + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] Sass Punctuation for key-value", + scope: "meta.property-list.scss punctuation.separator.key-value.scss", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Java Storage Type Primitive Array", + scope: "storage.type.primitive.array.java", + settings: { + foreground: "#E5C07B", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown headings", + scope: "entity.name.section.markdown", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown heading Punctuation Definition", + scope: "punctuation.definition.heading.markdown", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown heading setext", + scope: "markup.heading.setext", + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown Punctuation Definition Bold", + scope: "punctuation.definition.bold.markdown", + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown Inline Raw", + scope: "markup.inline.raw.markdown", + settings: { + foreground: "#98C379", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown List Punctuation Definition", + scope: "beginning.punctuation.definition.list.markdown", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown Quote", + scope: "markup.quote.markdown", + settings: { + foreground: "#5C6370", + fontStyle: "italic", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown Punctuation Definition String", + scope: [ + "punctuation.definition.string.begin.markdown", + "punctuation.definition.string.end.markdown", + "punctuation.definition.metadata.markdown", + ], + settings: { + foreground: "#ABB2BF", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown Punctuation Definition Link", + scope: "punctuation.definition.metadata.markdown", + settings: { + foreground: "#C678DD", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown Underline Link/Image", + scope: [ + "markup.underline.link.markdown", + "markup.underline.link.image.markdown", + ], + settings: { + foreground: "#C678DD", + }, + }, + { + name: "[VSCODE-CUSTOM] Markdown Link Title/Description", + scope: [ + "string.other.link.title.markdown", + "string.other.link.description.markdown", + ], + settings: { + foreground: "#61AFEF", + }, + }, + { + name: "[VSCODE-CUSTOM] Ruby Punctuation Separator Variable", + scope: "punctuation.separator.variable.ruby", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] Ruby Other Constant Variable", + scope: "variable.other.constant.ruby", + settings: { + foreground: "#D19A66", + }, + }, + { + name: "[VSCODE-CUSTOM] Ruby Keyword Operator Other", + scope: "keyword.operator.other.ruby", + settings: { + foreground: "#98C379", + }, + }, + { + name: "[VSCODE-CUSTOM] PHP Punctuation Variable Definition", + scope: "punctuation.definition.variable.php", + settings: { + foreground: "#E06C75", + }, + }, + { + name: "[VSCODE-CUSTOM] PHP Meta Class", + scope: "meta.class.php", + settings: { + foreground: "#ABB2BF", + }, + }, + { + scope: "token.info-token", + settings: { + foreground: "#6796e6", + }, + }, + { + scope: "token.warn-token", + settings: { + foreground: "#cd9731", + }, + }, + { + scope: "token.error-token", + settings: { + foreground: "#f44747", + }, + }, + { + scope: "token.debug-token", + settings: { + foreground: "#b267e6", + }, + }, + ], +}; diff --git a/tsconfig.json b/tsconfig.json index ca4d9c9..16c200b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,6 +19,6 @@ "isolatedModules": true, "jsx": "react" }, - "include": ["src"], + "include": ["src", "render/codesandbox.js"], "exclude": ["node_modules"] }