From ea144817712453ebbbb417a9c4f62d0034aa48be Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Fri, 6 Sep 2024 21:06:36 -0400 Subject: [PATCH] Replace react-syntax-highlighter with rehype-highlight to reduce memory footprint when scrolling code blocks --- package-lock.json | 66 +- package.json | 1 + src/providers/ClaudeDevProvider.ts | 8 +- src/shared/ExtensionMessage.ts | 3 +- src/utils/default-themes/dark_modern.json | 128 +++ src/utils/default-themes/dark_plus.json | 193 ++++ src/utils/default-themes/dark_vs.json | 394 +++++++++ src/utils/default-themes/hc_black.json | 468 ++++++++++ src/utils/default-themes/hc_light.json | 573 ++++++++++++ src/utils/default-themes/light_modern.json | 145 +++ src/utils/default-themes/light_plus.json | 194 ++++ src/utils/default-themes/light_vs.json | 422 +++++++++ src/utils/getTheme.ts | 145 +++ webview-ui/package-lock.json | 836 +++++++++++++++--- webview-ui/package.json | 4 +- webview-ui/src/components/ChatRow.tsx | 242 +++-- webview-ui/src/components/ChatView.tsx | 23 +- webview-ui/src/components/CodeAccordian.tsx | 85 ++ webview-ui/src/components/CodeBlock.tsx | 274 +++--- .../src/context/ExtensionStateContext.tsx | 8 +- .../getSyntaxHighlighterStyleFromTheme.ts | 89 -- webview-ui/src/utils/textMateToHljs.ts | 156 ++++ .../src/utils/vscode-themes/github-dark.ts | 503 ----------- .../src/utils/vscode-themes/github-light.ts | 506 ----------- webview-ui/src/utils/vscode-themes/index.ts | 2 - .../utils/vscode-themes/one-dark-example.ts | 503 ----------- 26 files changed, 3920 insertions(+), 2051 deletions(-) create mode 100644 src/utils/default-themes/dark_modern.json create mode 100644 src/utils/default-themes/dark_plus.json create mode 100644 src/utils/default-themes/dark_vs.json create mode 100644 src/utils/default-themes/hc_black.json create mode 100644 src/utils/default-themes/hc_light.json create mode 100644 src/utils/default-themes/light_modern.json create mode 100644 src/utils/default-themes/light_plus.json create mode 100644 src/utils/default-themes/light_vs.json create mode 100644 src/utils/getTheme.ts create mode 100644 webview-ui/src/components/CodeAccordian.tsx delete mode 100644 webview-ui/src/utils/getSyntaxHighlighterStyleFromTheme.ts create mode 100644 webview-ui/src/utils/textMateToHljs.ts delete mode 100644 webview-ui/src/utils/vscode-themes/github-dark.ts delete mode 100644 webview-ui/src/utils/vscode-themes/github-light.ts delete mode 100644 webview-ui/src/utils/vscode-themes/index.ts delete mode 100644 webview-ui/src/utils/vscode-themes/one-dark-example.ts diff --git a/package-lock.json b/package-lock.json index c363c4a..13e15bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "execa": "^9.3.0", "globby": "^14.0.2", "mammoth": "^1.8.0", + "monaco-vscode-textmate-theme-converter": "^0.1.7", "openai": "^4.54.0", "os-name": "^6.0.0", "p-wait-for": "^5.0.2", @@ -5449,6 +5450,15 @@ "node": ">= 0.8" } }, + "node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "license": "MIT", + "engines": { + "node": ">= 12" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -6433,6 +6443,20 @@ "node": ">= 14" } }, + "node_modules/fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -6728,7 +6752,6 @@ "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", - "dev": true, "license": "ISC" }, "node_modules/graphemer": { @@ -7503,6 +7526,15 @@ "dev": true, "license": "MIT" }, + "node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "license": "MIT", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/jszip": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", @@ -7981,6 +8013,29 @@ "node": ">=10" } }, + "node_modules/monaco-vscode-textmate-theme-converter": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/monaco-vscode-textmate-theme-converter/-/monaco-vscode-textmate-theme-converter-0.1.7.tgz", + "integrity": "sha512-ZMsq1RPWwOD3pvXD0n+9ddnhfzZoiUMwNIWPNUqYqEiQeH2HjyZ9KYOdt/pqe0kkN8WnYWLrxT9C/SrtIsAu2Q==", + "license": "MIT", + "dependencies": { + "commander": "^8.1.0", + "fs-extra": "^7.0.1", + "tslib": "^2.3.0" + }, + "bin": { + "mvttc": "lib/cjs/npx-script.js" + }, + "peerDependencies": { + "tslib": "^2.0.1" + } + }, + "node_modules/monaco-vscode-textmate-theme-converter/node_modules/tslib": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", + "license": "0BSD" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -9919,6 +9974,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 0098e7c..a28b829 100644 --- a/package.json +++ b/package.json @@ -147,6 +147,7 @@ "execa": "^9.3.0", "globby": "^14.0.2", "mammoth": "^1.8.0", + "monaco-vscode-textmate-theme-converter": "^0.1.7", "openai": "^4.54.0", "os-name": "^6.0.0", "p-wait-for": "^5.0.2", diff --git a/src/providers/ClaudeDevProvider.ts b/src/providers/ClaudeDevProvider.ts index f44e97f..a759c0a 100644 --- a/src/providers/ClaudeDevProvider.ts +++ b/src/providers/ClaudeDevProvider.ts @@ -9,6 +9,7 @@ import * as path from "path" import fs from "fs/promises" import { HistoryItem } from "../shared/HistoryItem" import axios from "axios" +import { getTheme } from "../utils/getTheme" /* https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts @@ -156,10 +157,10 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { // Listen for when color changes vscode.workspace.onDidChangeConfiguration( - (e) => { + async (e) => { if (e && e.affectsConfiguration("workbench.colorTheme")) { // Sends latest theme name to webview - this.postStateToWebview() + await this.postMessageToWebview({ type: "theme", text: JSON.stringify(await getTheme()) }) } }, null, @@ -293,6 +294,8 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { switch (message.type) { case "webviewDidLaunch": await this.postStateToWebview() + const theme = await getTheme() + await this.postMessageToWebview({ type: "theme", text: JSON.stringify(theme) }) break case "newTask": // Code that should run in response to the hello message command @@ -543,7 +546,6 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { apiConfiguration, customInstructions, alwaysAllowReadOnly, - themeName: vscode.workspace.getConfiguration("workbench").get("colorTheme"), uriScheme: vscode.env.uriScheme, claudeMessages: this.claudeDev?.claudeMessages || [], taskHistory: (taskHistory || []).filter((item) => item.ts && item.task).sort((a, b) => b.ts - a.ts), diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts index 100100f..434783b 100644 --- a/src/shared/ExtensionMessage.ts +++ b/src/shared/ExtensionMessage.ts @@ -5,7 +5,7 @@ import { HistoryItem } from "./HistoryItem" // webview will hold state export interface ExtensionMessage { - type: "action" | "state" | "selectedImages" | "ollamaModels" + type: "action" | "state" | "selectedImages" | "ollamaModels" | "theme" text?: string action?: "chatButtonTapped" | "settingsButtonTapped" | "historyButtonTapped" | "didBecomeVisible" state?: ExtensionState @@ -18,7 +18,6 @@ export interface ExtensionState { apiConfiguration?: ApiConfiguration customInstructions?: string alwaysAllowReadOnly?: boolean - themeName?: string uriScheme?: string claudeMessages: ClaudeMessage[] taskHistory: HistoryItem[] diff --git a/src/utils/default-themes/dark_modern.json b/src/utils/default-themes/dark_modern.json new file mode 100644 index 0000000..b1c49c7 --- /dev/null +++ b/src/utils/default-themes/dark_modern.json @@ -0,0 +1,128 @@ +{ + "$schema": "vscode://schemas/color-theme", + "name": "Default Dark Modern", + "include": "./dark_plus.json", + "colors": { + "activityBar.activeBorder": "#0078D4", + "activityBar.background": "#181818", + "activityBar.border": "#2B2B2B", + "activityBar.foreground": "#D7D7D7", + "activityBar.inactiveForeground": "#868686", + "activityBarBadge.background": "#0078D4", + "activityBarBadge.foreground": "#FFFFFF", + "badge.background": "#616161", + "badge.foreground": "#F8F8F8", + "button.background": "#0078D4", + "button.border": "#FFFFFF12", + "button.foreground": "#FFFFFF", + "button.hoverBackground": "#026EC1", + "button.secondaryBackground": "#313131", + "button.secondaryForeground": "#CCCCCC", + "button.secondaryHoverBackground": "#3C3C3C", + "chat.slashCommandBackground": "#34414B", + "chat.slashCommandForeground": "#40A6FF", + "checkbox.background": "#313131", + "checkbox.border": "#3C3C3C", + "debugToolBar.background": "#181818", + "descriptionForeground": "#9D9D9D", + "dropdown.background": "#313131", + "dropdown.border": "#3C3C3C", + "dropdown.foreground": "#CCCCCC", + "dropdown.listBackground": "#1F1F1F", + "editor.background": "#1F1F1F", + "editor.findMatchBackground": "#9E6A03", + "editor.foreground": "#CCCCCC", + "editorGroup.border": "#FFFFFF17", + "editorGroupHeader.tabsBackground": "#181818", + "editorGroupHeader.tabsBorder": "#2B2B2B", + "editorGutter.addedBackground": "#2EA043", + "editorGutter.deletedBackground": "#F85149", + "editorGutter.modifiedBackground": "#0078D4", + "editorLineNumber.activeForeground": "#CCCCCC", + "editorLineNumber.foreground": "#6E7681", + "editorOverviewRuler.border": "#010409", + "editorWidget.background": "#202020", + "errorForeground": "#F85149", + "focusBorder": "#0078D4", + "foreground": "#CCCCCC", + "icon.foreground": "#CCCCCC", + "input.background": "#313131", + "input.border": "#3C3C3C", + "input.foreground": "#CCCCCC", + "input.placeholderForeground": "#989898", + "inputOption.activeBackground": "#2489DB82", + "inputOption.activeBorder": "#2488DB", + "keybindingLabel.foreground": "#CCCCCC", + "menu.background": "#1F1F1F", + "notificationCenterHeader.background": "#1F1F1F", + "notificationCenterHeader.foreground": "#CCCCCC", + "notifications.background": "#1F1F1F", + "notifications.border": "#2B2B2B", + "notifications.foreground": "#CCCCCC", + "panel.background": "#181818", + "panel.border": "#2B2B2B", + "panelInput.border": "#2B2B2B", + "panelTitle.activeBorder": "#0078D4", + "panelTitle.activeForeground": "#CCCCCC", + "panelTitle.inactiveForeground": "#9D9D9D", + "peekViewEditor.background": "#1F1F1F", + "peekViewEditor.matchHighlightBackground": "#BB800966", + "peekViewResult.background": "#1F1F1F", + "peekViewResult.matchHighlightBackground": "#BB800966", + "pickerGroup.border": "#3C3C3C", + "progressBar.background": "#0078D4", + "quickInput.background": "#222222", + "quickInput.foreground": "#CCCCCC", + "settings.dropdownBackground": "#313131", + "settings.dropdownBorder": "#3C3C3C", + "settings.headerForeground": "#FFFFFF", + "settings.modifiedItemIndicator": "#BB800966", + "sideBar.background": "#181818", + "sideBar.border": "#2B2B2B", + "sideBar.foreground": "#CCCCCC", + "sideBarSectionHeader.background": "#181818", + "sideBarSectionHeader.border": "#2B2B2B", + "sideBarSectionHeader.foreground": "#CCCCCC", + "sideBarTitle.foreground": "#CCCCCC", + "statusBar.background": "#181818", + "statusBar.border": "#2B2B2B", + "statusBar.debuggingBackground": "#0078D4", + "statusBar.debuggingForeground": "#FFFFFF", + "statusBar.focusBorder": "#0078D4", + "statusBar.foreground": "#CCCCCC", + "statusBar.noFolderBackground": "#1F1F1F", + "statusBarItem.focusBorder": "#0078D4", + "statusBarItem.prominentBackground": "#6E768166", + "statusBarItem.remoteBackground": "#0078D4", + "statusBarItem.remoteForeground": "#FFFFFF", + "tab.activeBackground": "#1F1F1F", + "tab.activeBorder": "#1F1F1F", + "tab.activeBorderTop": "#0078D4", + "tab.activeForeground": "#FFFFFF", + "tab.border": "#2B2B2B", + "tab.hoverBackground": "#1F1F1F", + "tab.inactiveBackground": "#181818", + "tab.inactiveForeground": "#9D9D9D", + "tab.unfocusedActiveBorder": "#1F1F1F", + "tab.unfocusedActiveBorderTop": "#2B2B2B", + "tab.unfocusedHoverBackground": "#1F1F1F", + "terminal.foreground": "#CCCCCC", + "terminal.tab.activeBorder": "#0078D4", + "textBlockQuote.background": "#2B2B2B", + "textBlockQuote.border": "#616161", + "textCodeBlock.background": "#2B2B2B", + "textLink.activeForeground": "#4daafc", + "textLink.foreground": "#4daafc", + "textPreformat.foreground": "#D0D0D0", + "textPreformat.background": "#3C3C3C", + "textSeparator.foreground": "#21262D", + "titleBar.activeBackground": "#181818", + "titleBar.activeForeground": "#CCCCCC", + "titleBar.border": "#2B2B2B", + "titleBar.inactiveBackground": "#1F1F1F", + "titleBar.inactiveForeground": "#9D9D9D", + "welcomePage.tileBackground": "#2B2B2B", + "welcomePage.progress.foreground": "#0078D4", + "widget.border": "#313131" + } +} diff --git a/src/utils/default-themes/dark_plus.json b/src/utils/default-themes/dark_plus.json new file mode 100644 index 0000000..c13c17a --- /dev/null +++ b/src/utils/default-themes/dark_plus.json @@ -0,0 +1,193 @@ +{ + "$schema": "vscode://schemas/color-theme", + "name": "Dark+", + "include": "./dark_vs.json", + "tokenColors": [ + { + "name": "Function declarations", + "scope": [ + "entity.name.function", + "support.function", + "support.constant.handlebars", + "source.powershell variable.other.member", + "entity.name.operator.custom-literal" + ], + "settings": { + "foreground": "#DCDCAA" + } + }, + { + "name": "Types declaration and references", + "scope": [ + "support.class", + "support.type", + "entity.name.type", + "entity.name.namespace", + "entity.other.attribute", + "entity.name.scope-resolution", + "entity.name.class", + "storage.type.numeric.go", + "storage.type.byte.go", + "storage.type.boolean.go", + "storage.type.string.go", + "storage.type.uintptr.go", + "storage.type.error.go", + "storage.type.rune.go", + "storage.type.cs", + "storage.type.generic.cs", + "storage.type.modifier.cs", + "storage.type.variable.cs", + "storage.type.annotation.java", + "storage.type.generic.java", + "storage.type.java", + "storage.type.object.array.java", + "storage.type.primitive.array.java", + "storage.type.primitive.java", + "storage.type.token.java", + "storage.type.groovy", + "storage.type.annotation.groovy", + "storage.type.parameters.groovy", + "storage.type.generic.groovy", + "storage.type.object.array.groovy", + "storage.type.primitive.array.groovy", + "storage.type.primitive.groovy" + ], + "settings": { + "foreground": "#4EC9B0" + } + }, + { + "name": "Types declaration and references, TS grammar specific", + "scope": [ + "meta.type.cast.expr", + "meta.type.new.expr", + "support.constant.math", + "support.constant.dom", + "support.constant.json", + "entity.other.inherited-class" + ], + "settings": { + "foreground": "#4EC9B0" + } + }, + { + "name": "Control flow / Special keywords", + "scope": [ + "keyword.control", + "source.cpp keyword.operator.new", + "keyword.operator.delete", + "keyword.other.using", + "keyword.other.directive.using", + "keyword.other.operator", + "entity.name.operator" + ], + "settings": { + "foreground": "#C586C0" + } + }, + { + "name": "Variable and parameter name", + "scope": [ + "variable", + "meta.definition.variable.name", + "support.variable", + "entity.name.variable", + "constant.other.placeholder" + ], + "settings": { + "foreground": "#9CDCFE" + } + }, + { + "name": "Constants and enums", + "scope": ["variable.other.constant", "variable.other.enummember"], + "settings": { + "foreground": "#4FC1FF" + } + }, + { + "name": "Object keys, TS grammar specific", + "scope": ["meta.object-literal.key"], + "settings": { + "foreground": "#9CDCFE" + } + }, + { + "name": "CSS property value", + "scope": [ + "support.constant.property-value", + "support.constant.font-name", + "support.constant.media-type", + "support.constant.media", + "constant.other.color.rgb-value", + "constant.other.rgb-value", + "support.constant.color" + ], + "settings": { + "foreground": "#CE9178" + } + }, + { + "name": "Regular expression groups", + "scope": [ + "punctuation.definition.group.regexp", + "punctuation.definition.group.assertion.regexp", + "punctuation.definition.character-class.regexp", + "punctuation.character.set.begin.regexp", + "punctuation.character.set.end.regexp", + "keyword.operator.negation.regexp", + "support.other.parenthesis.regexp" + ], + "settings": { + "foreground": "#CE9178" + } + }, + { + "scope": [ + "constant.character.character-class.regexp", + "constant.other.character-class.set.regexp", + "constant.other.character-class.regexp", + "constant.character.set.regexp" + ], + "settings": { + "foreground": "#d16969" + } + }, + { + "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"], + "settings": { + "foreground": "#DCDCAA" + } + }, + { + "scope": "keyword.operator.quantifier.regexp", + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": ["constant.character", "constant.other.option"], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "constant.character.escape", + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "entity.name.label", + "settings": { + "foreground": "#C8C8C8" + } + } + ], + "semanticTokenColors": { + "newOperator": "#C586C0", + "stringLiteral": "#ce9178", + "customLiteral": "#DCDCAA", + "numberLiteral": "#b5cea8" + } +} diff --git a/src/utils/default-themes/dark_vs.json b/src/utils/default-themes/dark_vs.json new file mode 100644 index 0000000..0bf6a19 --- /dev/null +++ b/src/utils/default-themes/dark_vs.json @@ -0,0 +1,394 @@ +{ + "$schema": "vscode://schemas/color-theme", + "name": "Dark (Visual Studio)", + "colors": { + "checkbox.border": "#6B6B6B", + "editor.background": "#1E1E1E", + "editor.foreground": "#D4D4D4", + "editor.inactiveSelectionBackground": "#3A3D41", + "editorIndentGuide.background1": "#404040", + "editorIndentGuide.activeBackground1": "#707070", + "editor.selectionHighlightBackground": "#ADD6FF26", + "list.dropBackground": "#383B3D", + "activityBarBadge.background": "#007ACC", + "sideBarTitle.foreground": "#BBBBBB", + "input.placeholderForeground": "#A6A6A6", + "menu.background": "#252526", + "menu.foreground": "#CCCCCC", + "menu.separatorBackground": "#454545", + "menu.border": "#454545", + "statusBarItem.remoteForeground": "#FFF", + "statusBarItem.remoteBackground": "#16825D", + "ports.iconRunningProcessForeground": "#369432", + "sideBarSectionHeader.background": "#0000", + "sideBarSectionHeader.border": "#ccc3", + "tab.lastPinnedBorder": "#ccc3", + "list.activeSelectionIconForeground": "#FFF", + "terminal.inactiveSelectionBackground": "#3A3D41", + "widget.border": "#303031", + "actionBar.toggledBackground": "#383a49" + }, + "tokenColors": [ + { + "scope": [ + "meta.embedded", + "source.groovy.embedded", + "string meta.image.inline.markdown", + "variable.legacy.builtin.python" + ], + "settings": { + "foreground": "#D4D4D4" + } + }, + { + "scope": "emphasis", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "strong", + "settings": { + "fontStyle": "bold" + } + }, + { + "scope": "header", + "settings": { + "foreground": "#000080" + } + }, + { + "scope": "comment", + "settings": { + "foreground": "#6A9955" + } + }, + { + "scope": "constant.language", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": [ + "constant.numeric", + "variable.other.enummember", + "keyword.operator.plus.exponent", + "keyword.operator.minus.exponent" + ], + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "constant.regexp", + "settings": { + "foreground": "#646695" + } + }, + { + "scope": "entity.name.tag", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": ["entity.name.tag.css", "entity.name.tag.less"], + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "entity.other.attribute-name", + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": [ + "entity.other.attribute-name.class.css", + "source.css entity.other.attribute-name.class", + "entity.other.attribute-name.id.css", + "entity.other.attribute-name.parent-selector.css", + "entity.other.attribute-name.parent.less", + "source.css entity.other.attribute-name.pseudo-class", + "entity.other.attribute-name.pseudo-element.css", + "source.css.less entity.other.attribute-name.id", + "entity.other.attribute-name.scss" + ], + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "invalid", + "settings": { + "foreground": "#f44747" + } + }, + { + "scope": "markup.underline", + "settings": { + "fontStyle": "underline" + } + }, + { + "scope": "markup.bold", + "settings": { + "fontStyle": "bold", + "foreground": "#569cd6" + } + }, + { + "scope": "markup.heading", + "settings": { + "fontStyle": "bold", + "foreground": "#569cd6" + } + }, + { + "scope": "markup.italic", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "markup.strikethrough", + "settings": { + "fontStyle": "strikethrough" + } + }, + { + "scope": "markup.inserted", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "markup.deleted", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "markup.changed", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "punctuation.definition.quote.begin.markdown", + "settings": { + "foreground": "#6A9955" + } + }, + { + "scope": "punctuation.definition.list.begin.markdown", + "settings": { + "foreground": "#6796e6" + } + }, + { + "scope": "markup.inline.raw", + "settings": { + "foreground": "#ce9178" + } + }, + { + "name": "brackets of XML/HTML tags", + "scope": "punctuation.definition.tag", + "settings": { + "foreground": "#808080" + } + }, + { + "scope": ["meta.preprocessor", "entity.name.function.preprocessor"], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "meta.preprocessor.string", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "meta.preprocessor.numeric", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "meta.structure.dictionary.key.python", + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": "meta.diff.header", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "storage", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "storage.type", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": ["storage.modifier", "keyword.operator.noexcept"], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": ["string", "meta.embedded.assembly"], + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.tag", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.value", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.regexp", + "settings": { + "foreground": "#d16969" + } + }, + { + "name": "String interpolation", + "scope": [ + "punctuation.definition.template-expression.begin", + "punctuation.definition.template-expression.end", + "punctuation.section.embedded" + ], + "settings": { + "foreground": "#569cd6" + } + }, + { + "name": "Reset JavaScript string interpolation expression", + "scope": ["meta.template.expression"], + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "scope": [ + "support.type.vendored.property-name", + "support.type.property-name", + "source.css variable", + "source.coffee.embedded" + ], + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": "keyword", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "keyword.control", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "keyword.operator", + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "scope": [ + "keyword.operator.new", + "keyword.operator.expression", + "keyword.operator.cast", + "keyword.operator.sizeof", + "keyword.operator.alignof", + "keyword.operator.typeid", + "keyword.operator.alignas", + "keyword.operator.instanceof", + "keyword.operator.logical.python", + "keyword.operator.wordlike" + ], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "keyword.other.unit", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": [ + "punctuation.section.embedded.begin.php", + "punctuation.section.embedded.end.php" + ], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "support.function.git-rebase", + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": "constant.sha.git-rebase", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "name": "coloring of the Java import and package identifiers", + "scope": [ + "storage.modifier.import.java", + "variable.language.wildcard.java", + "storage.modifier.package.java" + ], + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "name": "this.self", + "scope": "variable.language", + "settings": { + "foreground": "#569cd6" + } + } + ], + "semanticHighlighting": true, + "semanticTokenColors": { + "newOperator": "#d4d4d4", + "stringLiteral": "#ce9178", + "customLiteral": "#D4D4D4", + "numberLiteral": "#b5cea8" + } +} diff --git a/src/utils/default-themes/hc_black.json b/src/utils/default-themes/hc_black.json new file mode 100644 index 0000000..ebb49d9 --- /dev/null +++ b/src/utils/default-themes/hc_black.json @@ -0,0 +1,468 @@ +{ + "$schema": "vscode://schemas/color-theme", + "name": "Dark High Contrast", + "colors": { + "editor.background": "#000000", + "editor.foreground": "#FFFFFF", + "editorIndentGuide.background1": "#FFFFFF", + "editorIndentGuide.activeBackground1": "#FFFFFF", + "sideBarTitle.foreground": "#FFFFFF", + "selection.background": "#008000", + "editor.selectionBackground": "#FFFFFF", + "statusBarItem.remoteBackground": "#00000000", + "ports.iconRunningProcessForeground": "#FFFFFF", + "editorWhitespace.foreground": "#7c7c7c", + "actionBar.toggledBackground": "#383a49" + }, + "tokenColors": [ + { + "scope": [ + "meta.embedded", + "source.groovy.embedded", + "string meta.image.inline.markdown", + "variable.legacy.builtin.python" + ], + "settings": { + "foreground": "#FFFFFF" + } + }, + { + "scope": "emphasis", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "strong", + "settings": { + "fontStyle": "bold" + } + }, + { + "scope": "meta.diff.header", + "settings": { + "foreground": "#000080" + } + }, + { + "scope": "comment", + "settings": { + "foreground": "#7ca668" + } + }, + { + "scope": "constant.language", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": [ + "constant.numeric", + "constant.other.color.rgb-value", + "constant.other.rgb-value", + "support.constant.color" + ], + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "constant.regexp", + "settings": { + "foreground": "#b46695" + } + }, + { + "scope": "constant.character", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "entity.name.tag", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": [ + "entity.name.tag.css", + "entity.name.tag.less" + ], + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "entity.other.attribute-name", + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": [ + "entity.other.attribute-name.class.css", + "source.css entity.other.attribute-name.class", + "entity.other.attribute-name.id.css", + "entity.other.attribute-name.parent-selector.css", + "entity.other.attribute-name.parent.less", + "source.css entity.other.attribute-name.pseudo-class", + "entity.other.attribute-name.pseudo-element.css", + "source.css.less entity.other.attribute-name.id", + "entity.other.attribute-name.scss" + ], + "settings": { + "foreground": "#d7ba7d" + } + }, + { + "scope": "invalid", + "settings": { + "foreground": "#f44747" + } + }, + { + "scope": "markup.underline", + "settings": { + "fontStyle": "underline" + } + }, + { + "scope": "markup.bold", + "settings": { + "fontStyle": "bold" + } + }, + { + "scope": "markup.heading", + "settings": { + "fontStyle": "bold", + "foreground": "#6796e6" + } + }, + { + "scope": "markup.italic", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "markup.strikethrough", + "settings": { + "fontStyle": "strikethrough" + } + }, + { + "scope": "markup.inserted", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "markup.deleted", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "markup.changed", + "settings": { + "foreground": "#569cd6" + } + }, + { + "name": "brackets of XML/HTML tags", + "scope": [ + "punctuation.definition.tag" + ], + "settings": { + "foreground": "#808080" + } + }, + { + "scope": "meta.preprocessor", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "meta.preprocessor.string", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "meta.preprocessor.numeric", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "meta.structure.dictionary.key.python", + "settings": { + "foreground": "#9cdcfe" + } + }, + { + "scope": "storage", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "storage.type", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "storage.modifier", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "string", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.tag", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.value", + "settings": { + "foreground": "#ce9178" + } + }, + { + "scope": "string.regexp", + "settings": { + "foreground": "#d16969" + } + }, + { + "name": "String interpolation", + "scope": [ + "punctuation.definition.template-expression.begin", + "punctuation.definition.template-expression.end", + "punctuation.section.embedded" + ], + "settings": { + "foreground": "#569cd6" + } + }, + { + "name": "Reset JavaScript string interpolation expression", + "scope": [ + "meta.template.expression" + ], + "settings": { + "foreground": "#ffffff" + } + }, + { + "scope": [ + "support.type.vendored.property-name", + "support.type.property-name", + "source.css variable", + "source.coffee.embedded" + ], + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "scope": "keyword", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "keyword.control", + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "keyword.operator", + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "scope": [ + "keyword.operator.new", + "keyword.operator.expression", + "keyword.operator.cast", + "keyword.operator.sizeof", + "keyword.operator.logical.python" + ], + "settings": { + "foreground": "#569cd6" + } + }, + { + "scope": "keyword.other.unit", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "scope": "support.function.git-rebase", + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "scope": "constant.sha.git-rebase", + "settings": { + "foreground": "#b5cea8" + } + }, + { + "name": "coloring of the Java import and package identifiers", + "scope": [ + "storage.modifier.import.java", + "variable.language.wildcard.java", + "storage.modifier.package.java" + ], + "settings": { + "foreground": "#d4d4d4" + } + }, + { + "name": "coloring of the TS this", + "scope": "variable.language.this", + "settings": { + "foreground": "#569cd6" + } + }, + { + "name": "Function declarations", + "scope": [ + "entity.name.function", + "support.function", + "support.constant.handlebars", + "source.powershell variable.other.member" + ], + "settings": { + "foreground": "#DCDCAA" + } + }, + { + "name": "Types declaration and references", + "scope": [ + "support.class", + "support.type", + "entity.name.type", + "entity.name.namespace", + "entity.name.scope-resolution", + "entity.name.class", + "storage.type.cs", + "storage.type.generic.cs", + "storage.type.modifier.cs", + "storage.type.variable.cs", + "storage.type.annotation.java", + "storage.type.generic.java", + "storage.type.java", + "storage.type.object.array.java", + "storage.type.primitive.array.java", + "storage.type.primitive.java", + "storage.type.token.java", + "storage.type.groovy", + "storage.type.annotation.groovy", + "storage.type.parameters.groovy", + "storage.type.generic.groovy", + "storage.type.object.array.groovy", + "storage.type.primitive.array.groovy", + "storage.type.primitive.groovy" + ], + "settings": { + "foreground": "#4EC9B0" + } + }, + { + "name": "Types declaration and references, TS grammar specific", + "scope": [ + "meta.type.cast.expr", + "meta.type.new.expr", + "support.constant.math", + "support.constant.dom", + "support.constant.json", + "entity.other.inherited-class" + ], + "settings": { + "foreground": "#4EC9B0" + } + }, + { + "name": "Control flow / Special keywords", + "scope": [ + "keyword.control", + "source.cpp keyword.operator.new", + "source.cpp keyword.operator.delete", + "keyword.other.using", + "keyword.other.directive.using", + "keyword.other.operator" + ], + "settings": { + "foreground": "#C586C0" + } + }, + { + "name": "Variable and parameter name", + "scope": [ + "variable", + "meta.definition.variable.name", + "support.variable" + ], + "settings": { + "foreground": "#9CDCFE" + } + }, + { + "name": "Object keys, TS grammar specific", + "scope": [ + "meta.object-literal.key" + ], + "settings": { + "foreground": "#9CDCFE" + } + }, + { + "name": "CSS property value", + "scope": [ + "support.constant.property-value", + "support.constant.font-name", + "support.constant.media-type", + "support.constant.media", + "constant.other.color.rgb-value", + "constant.other.rgb-value", + "support.constant.color" + ], + "settings": { + "foreground": "#CE9178" + } + }, + { + "name": "HC Search Editor context line override", + "scope": "meta.resultLinePrefix.contextLinePrefix.search", + "settings": { + "foreground": "#CBEDCB" + } + } + ], + "semanticHighlighting": true, + "semanticTokenColors": { + "newOperator": "#FFFFFF", + "stringLiteral": "#ce9178", + "customLiteral": "#DCDCAA", + "numberLiteral": "#b5cea8" + } +} diff --git a/src/utils/default-themes/hc_light.json b/src/utils/default-themes/hc_light.json new file mode 100644 index 0000000..460f26a --- /dev/null +++ b/src/utils/default-themes/hc_light.json @@ -0,0 +1,573 @@ +{ + "$schema": "vscode://schemas/color-theme", + "name": "Light High Contrast", + "tokenColors": [ + { + "scope": [ + "meta.embedded", + "source.groovy.embedded", + "variable.legacy.builtin.python" + ], + "settings": { + "foreground": "#292929" + } + }, + { + "scope": "emphasis", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "strong", + "settings": { + "fontStyle": "bold" + } + }, + { + "scope": "meta.diff.header", + "settings": { + "foreground": "#062F4A" + } + }, + { + "scope": "comment", + "settings": { + "foreground": "#515151" + } + }, + { + "scope": "constant.language", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": [ + "constant.numeric", + "variable.other.enummember", + "keyword.operator.plus.exponent", + "keyword.operator.minus.exponent" + ], + "settings": { + "foreground": "#096d48" + } + }, + { + "scope": "constant.regexp", + "settings": { + "foreground": "#811F3F" + } + }, + { + "scope": "entity.name.tag", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "entity.name.selector", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "entity.other.attribute-name", + "settings": { + "foreground": "#264F78" + } + }, + { + "scope": [ + "entity.other.attribute-name.class.css", + "source.css entity.other.attribute-name.class", + "entity.other.attribute-name.id.css", + "entity.other.attribute-name.parent-selector.css", + "entity.other.attribute-name.parent.less", + "source.css entity.other.attribute-name.pseudo-class", + "entity.other.attribute-name.pseudo-element.css", + "source.css.less entity.other.attribute-name.id", + "entity.other.attribute-name.scss" + ], + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "invalid", + "settings": { + "foreground": "#B5200D" + } + }, + { + "scope": "markup.underline", + "settings": { + "fontStyle": "underline" + } + }, + { + "scope": "markup.bold", + "settings": { + "foreground": "#000080", + "fontStyle": "bold" + } + }, + { + "scope": "markup.heading", + "settings": { + "foreground": "#0F4A85", + "fontStyle": "bold" + } + }, + { + "scope": "markup.italic", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "markup.strikethrough", + "settings": { + "fontStyle": "strikethrough" + } + }, + { + "scope": "markup.inserted", + "settings": { + "foreground": "#096d48" + } + }, + { + "scope": "markup.deleted", + "settings": { + "foreground": "#5A5A5A" + } + }, + { + "scope": "markup.changed", + "settings": { + "foreground": "#0451A5" + } + }, + { + "scope": [ + "punctuation.definition.quote.begin.markdown", + "punctuation.definition.list.begin.markdown" + ], + "settings": { + "foreground": "#0451A5" + } + }, + { + "scope": "markup.inline.raw", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "punctuation.definition.tag", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": ["meta.preprocessor", "entity.name.function.preprocessor"], + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "meta.preprocessor.string", + "settings": { + "foreground": "#b5200d" + } + }, + { + "scope": "meta.preprocessor.numeric", + "settings": { + "foreground": "#096d48" + } + }, + { + "scope": "meta.structure.dictionary.key.python", + "settings": { + "foreground": "#0451A5" + } + }, + { + "scope": "storage", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "storage.type", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": ["storage.modifier", "keyword.operator.noexcept"], + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": ["string", "meta.embedded.assembly"], + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": [ + "string.comment.buffered.block.pug", + "string.quoted.pug", + "string.interpolated.pug", + "string.unquoted.plain.in.yaml", + "string.unquoted.plain.out.yaml", + "string.unquoted.block.yaml", + "string.quoted.single.yaml", + "string.quoted.double.xml", + "string.quoted.single.xml", + "string.unquoted.cdata.xml", + "string.quoted.double.html", + "string.quoted.single.html", + "string.unquoted.html", + "string.quoted.single.handlebars", + "string.quoted.double.handlebars" + ], + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "string.regexp", + "settings": { + "foreground": "#811F3F" + } + }, + { + "scope": [ + "punctuation.definition.template-expression.begin", + "punctuation.definition.template-expression.end", + "punctuation.section.embedded" + ], + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": ["meta.template.expression"], + "settings": { + "foreground": "#000000" + } + }, + { + "scope": [ + "support.constant.property-value", + "support.constant.font-name", + "support.constant.media-type", + "support.constant.media", + "constant.other.color.rgb-value", + "constant.other.rgb-value", + "support.constant.color" + ], + "settings": { + "foreground": "#0451A5" + } + }, + { + "scope": [ + "support.type.vendored.property-name", + "support.type.property-name", + "source.css variable", + "source.coffee.embedded" + ], + "settings": { + "foreground": "#264F78" + } + }, + { + "scope": ["support.type.property-name.json"], + "settings": { + "foreground": "#0451A5" + } + }, + { + "scope": "keyword", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "keyword.control", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "keyword.operator", + "settings": { + "foreground": "#000000" + } + }, + { + "scope": [ + "keyword.operator.new", + "keyword.operator.expression", + "keyword.operator.cast", + "keyword.operator.sizeof", + "keyword.operator.alignof", + "keyword.operator.typeid", + "keyword.operator.alignas", + "keyword.operator.instanceof", + "keyword.operator.logical.python", + "keyword.operator.wordlike" + ], + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "keyword.other.unit", + "settings": { + "foreground": "#096d48" + } + }, + { + "scope": [ + "punctuation.section.embedded.begin.php", + "punctuation.section.embedded.end.php" + ], + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "support.function.git-rebase", + "settings": { + "foreground": "#0451A5" + } + }, + { + "scope": "constant.sha.git-rebase", + "settings": { + "foreground": "#096d48" + } + }, + { + "scope": [ + "storage.modifier.import.java", + "variable.language.wildcard.java", + "storage.modifier.package.java" + ], + "settings": { + "foreground": "#000000" + } + }, + { + "scope": "variable.language", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": [ + "entity.name.function", + "support.function", + "support.constant.handlebars", + "source.powershell variable.other.member", + "entity.name.operator.custom-literal" + ], + "settings": { + "foreground": "#5e2cbc" + } + }, + { + "scope": [ + "support.class", + "support.type", + "entity.name.type", + "entity.name.namespace", + "entity.other.attribute", + "entity.name.scope-resolution", + "entity.name.class", + "storage.type.numeric.go", + "storage.type.byte.go", + "storage.type.boolean.go", + "storage.type.string.go", + "storage.type.uintptr.go", + "storage.type.error.go", + "storage.type.rune.go", + "storage.type.cs", + "storage.type.generic.cs", + "storage.type.modifier.cs", + "storage.type.variable.cs", + "storage.type.annotation.java", + "storage.type.generic.java", + "storage.type.java", + "storage.type.object.array.java", + "storage.type.primitive.array.java", + "storage.type.primitive.java", + "storage.type.token.java", + "storage.type.groovy", + "storage.type.annotation.groovy", + "storage.type.parameters.groovy", + "storage.type.generic.groovy", + "storage.type.object.array.groovy", + "storage.type.primitive.array.groovy", + "storage.type.primitive.groovy" + ], + "settings": { + "foreground": "#185E73" + } + }, + { + "scope": [ + "meta.type.cast.expr", + "meta.type.new.expr", + "support.constant.math", + "support.constant.dom", + "support.constant.json", + "entity.other.inherited-class" + ], + "settings": { + "foreground": "#185E73" + } + }, + { + "scope": [ + "keyword.control", + "source.cpp keyword.operator.new", + "source.cpp keyword.operator.delete", + "keyword.other.using", + "keyword.other.directive.using", + "keyword.other.operator", + "entity.name.operator" + ], + "settings": { + "foreground": "#b5200d" + } + }, + { + "scope": [ + "variable", + "meta.definition.variable.name", + "support.variable", + "entity.name.variable", + "constant.other.placeholder" + ], + "settings": { + "foreground": "#001080" + } + }, + { + "scope": ["variable.other.constant", "variable.other.enummember"], + "settings": { + "foreground": "#02715D" + } + }, + { + "scope": ["meta.object-literal.key"], + "settings": { + "foreground": "#001080" + } + }, + { + "scope": [ + "support.constant.property-value", + "support.constant.font-name", + "support.constant.media-type", + "support.constant.media", + "constant.other.color.rgb-value", + "constant.other.rgb-value", + "support.constant.color" + ], + "settings": { + "foreground": "#0451A5" + } + }, + { + "scope": [ + "punctuation.definition.group.regexp", + "punctuation.definition.group.assertion.regexp", + "punctuation.definition.character-class.regexp", + "punctuation.character.set.begin.regexp", + "punctuation.character.set.end.regexp", + "keyword.operator.negation.regexp", + "support.other.parenthesis.regexp" + ], + "settings": { + "foreground": "#D16969" + } + }, + { + "scope": [ + "constant.character.character-class.regexp", + "constant.other.character-class.set.regexp", + "constant.other.character-class.regexp", + "constant.character.set.regexp" + ], + "settings": { + "foreground": "#811F3F" + } + }, + { + "scope": "keyword.operator.quantifier.regexp", + "settings": { + "foreground": "#000000" + } + }, + { + "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"], + "settings": { + "foreground": "#EE0000" + } + }, + { + "scope": "constant.character", + "settings": { + "foreground": "#0F4A85" + } + }, + { + "scope": "constant.character.escape", + "settings": { + "foreground": "#EE0000" + } + }, + { + "scope": "entity.name.label", + "settings": { + "foreground": "#000000" + } + }, + { + "scope": "token.info-token", + "settings": { + "foreground": "#316BCD" + } + }, + { + "scope": "token.warn-token", + "settings": { + "foreground": "#CD9731" + } + }, + { + "scope": "token.error-token", + "settings": { + "foreground": "#CD3131" + } + }, + { + "scope": "token.debug-token", + "settings": { + "foreground": "#800080" + } + } + ], + "colors": { + "actionBar.toggledBackground": "#dddddd" + } +} diff --git a/src/utils/default-themes/light_modern.json b/src/utils/default-themes/light_modern.json new file mode 100644 index 0000000..c8f37de --- /dev/null +++ b/src/utils/default-themes/light_modern.json @@ -0,0 +1,145 @@ +{ + "$schema": "vscode://schemas/color-theme", + "name": "Default Light Modern", + "include": "./light_plus.json", + "colors": { + "activityBar.activeBorder": "#005FB8", + "activityBar.background": "#F8F8F8", + "activityBar.border": "#E5E5E5", + "activityBar.foreground": "#1F1F1F", + "activityBar.inactiveForeground": "#616161", + "activityBarBadge.background": "#005FB8", + "activityBarBadge.foreground": "#FFFFFF", + "badge.background": "#CCCCCC", + "badge.foreground": "#3B3B3B", + "button.background": "#005FB8", + "button.border": "#0000001a", + "button.foreground": "#FFFFFF", + "button.hoverBackground": "#0258A8", + "button.secondaryBackground": "#E5E5E5", + "button.secondaryForeground": "#3B3B3B", + "button.secondaryHoverBackground": "#CCCCCC", + "chat.slashCommandBackground": "#D2ECFF", + "chat.slashCommandForeground": "#306CA2", + "checkbox.background": "#F8F8F8", + "checkbox.border": "#CECECE", + "descriptionForeground": "#3B3B3B", + "dropdown.background": "#FFFFFF", + "dropdown.border": "#CECECE", + "dropdown.foreground": "#3B3B3B", + "dropdown.listBackground": "#FFFFFF", + "editor.background": "#FFFFFF", + "editor.foreground": "#3B3B3B", + "editor.inactiveSelectionBackground": "#E5EBF1", + "editor.selectionHighlightBackground": "#ADD6FF80", + "editorGroup.border": "#E5E5E5", + "editorGroupHeader.tabsBackground": "#F8F8F8", + "editorGroupHeader.tabsBorder": "#E5E5E5", + "editorGutter.addedBackground": "#2EA043", + "editorGutter.deletedBackground": "#F85149", + "editorGutter.modifiedBackground": "#005FB8", + "editorIndentGuide.background1": "#D3D3D3", + "editorLineNumber.activeForeground": "#171184", + "editorLineNumber.foreground": "#6E7681", + "editorOverviewRuler.border": "#E5E5E5", + "editorSuggestWidget.background": "#F8F8F8", + "editorWidget.background": "#F8F8F8", + "errorForeground": "#F85149", + "focusBorder": "#005FB8", + "foreground": "#3B3B3B", + "icon.foreground": "#3B3B3B", + "input.background": "#FFFFFF", + "input.border": "#CECECE", + "input.foreground": "#3B3B3B", + "input.placeholderForeground": "#767676", + "inputOption.activeBackground": "#BED6ED", + "inputOption.activeBorder": "#005FB8", + "inputOption.activeForeground": "#000000", + "keybindingLabel.foreground": "#3B3B3B", + "list.activeSelectionBackground": "#E8E8E8", + "list.activeSelectionForeground": "#000000", + "list.activeSelectionIconForeground": "#000000", + "list.hoverBackground": "#F2F2F2", + "list.focusAndSelectionOutline": "#005FB8", + "menu.border": "#CECECE", + "notebook.cellBorderColor": "#E5E5E5", + "notebook.selectedCellBackground": "#C8DDF150", + "notificationCenterHeader.background": "#FFFFFF", + "notificationCenterHeader.foreground": "#3B3B3B", + "notifications.background": "#FFFFFF", + "notifications.border": "#E5E5E5", + "notifications.foreground": "#3B3B3B", + "panel.background": "#F8F8F8", + "panel.border": "#E5E5E5", + "panelInput.border": "#E5E5E5", + "panelTitle.activeBorder": "#005FB8", + "panelTitle.activeForeground": "#3B3B3B", + "panelTitle.inactiveForeground": "#3B3B3B", + "peekViewEditor.matchHighlightBackground": "#BB800966", + "peekViewResult.background": "#FFFFFF", + "peekViewResult.matchHighlightBackground": "#BB800966", + "pickerGroup.border": "#E5E5E5", + "pickerGroup.foreground": "#8B949E", + "ports.iconRunningProcessForeground": "#369432", + "progressBar.background": "#005FB8", + "quickInput.background": "#F8F8F8", + "quickInput.foreground": "#3B3B3B", + "searchEditor.textInputBorder": "#CECECE", + "settings.dropdownBackground": "#FFFFFF", + "settings.dropdownBorder": "#CECECE", + "settings.headerForeground": "#1F1F1F", + "settings.modifiedItemIndicator": "#BB800966", + "settings.numberInputBorder": "#CECECE", + "settings.textInputBorder": "#CECECE", + "sideBar.background": "#F8F8F8", + "sideBar.border": "#E5E5E5", + "sideBar.foreground": "#3B3B3B", + "sideBarSectionHeader.background": "#F8F8F8", + "sideBarSectionHeader.border": "#E5E5E5", + "sideBarSectionHeader.foreground": "#3B3B3B", + "sideBarTitle.foreground": "#3B3B3B", + "statusBar.background": "#F8F8F8", + "statusBar.foreground": "#3B3B3B", + "statusBar.border": "#E5E5E5", + "statusBar.debuggingBackground": "#FD716C", + "statusBar.debuggingForeground": "#000000", + "statusBar.focusBorder": "#005FB8", + "statusBar.noFolderBackground": "#F8F8F8", + "statusBarItem.errorBackground": "#C72E0F", + "statusBarItem.focusBorder": "#005FB8", + "statusBarItem.prominentBackground": "#6E768166", + "statusBarItem.remoteBackground": "#005FB8", + "statusBarItem.remoteForeground": "#FFFFFF", + "tab.activeBackground": "#FFFFFF", + "tab.activeBorder": "#F8F8F8", + "tab.activeBorderTop": "#005FB8", + "tab.activeForeground": "#3B3B3B", + "tab.border": "#E5E5E5", + "tab.hoverBackground": "#FFFFFF", + "tab.inactiveBackground": "#F8F8F8", + "tab.inactiveForeground": "#868686", + "tab.lastPinnedBorder": "#D4D4D4", + "tab.unfocusedActiveBorder": "#F8F8F8", + "tab.unfocusedActiveBorderTop": "#E5E5E5", + "tab.unfocusedHoverBackground": "#F8F8F8", + "terminalCursor.foreground": "#005FB8", + "terminal.foreground": "#3B3B3B", + "terminal.inactiveSelectionBackground": "#E5EBF1", + "terminal.tab.activeBorder": "#005FB8", + "textBlockQuote.background": "#F8F8F8", + "textBlockQuote.border": "#E5E5E5", + "textCodeBlock.background": "#F8F8F8", + "textLink.activeForeground": "#005FB8", + "textLink.foreground": "#005FB8", + "textPreformat.foreground": "#3B3B3B", + "textPreformat.background": "#0000001F", + "textSeparator.foreground": "#21262D", + "titleBar.activeBackground": "#F8F8F8", + "titleBar.activeForeground": "#1E1E1E", + "titleBar.border": "#E5E5E5", + "titleBar.inactiveBackground": "#F8F8F8", + "titleBar.inactiveForeground": "#8B949E", + "welcomePage.tileBackground": "#F3F3F3", + "widget.border": "#E5E5E5" + } +} diff --git a/src/utils/default-themes/light_plus.json b/src/utils/default-themes/light_plus.json new file mode 100644 index 0000000..cb7fb77 --- /dev/null +++ b/src/utils/default-themes/light_plus.json @@ -0,0 +1,194 @@ +{ + "$schema": "vscode://schemas/color-theme", + "name": "Light+", + "include": "./light_vs.json", + "tokenColors": [ + { + "name": "Function declarations", + "scope": [ + "entity.name.function", + "support.function", + "support.constant.handlebars", + "source.powershell variable.other.member", + "entity.name.operator.custom-literal" + ], + "settings": { + "foreground": "#795E26" + } + }, + { + "name": "Types declaration and references", + "scope": [ + "support.class", + "support.type", + "entity.name.type", + "entity.name.namespace", + "entity.other.attribute", + "entity.name.scope-resolution", + "entity.name.class", + "storage.type.numeric.go", + "storage.type.byte.go", + "storage.type.boolean.go", + "storage.type.string.go", + "storage.type.uintptr.go", + "storage.type.error.go", + "storage.type.rune.go", + "storage.type.cs", + "storage.type.generic.cs", + "storage.type.modifier.cs", + "storage.type.variable.cs", + "storage.type.annotation.java", + "storage.type.generic.java", + "storage.type.java", + "storage.type.object.array.java", + "storage.type.primitive.array.java", + "storage.type.primitive.java", + "storage.type.token.java", + "storage.type.groovy", + "storage.type.annotation.groovy", + "storage.type.parameters.groovy", + "storage.type.generic.groovy", + "storage.type.object.array.groovy", + "storage.type.primitive.array.groovy", + "storage.type.primitive.groovy" + ], + "settings": { + "foreground": "#267f99" + } + }, + { + "name": "Types declaration and references, TS grammar specific", + "scope": [ + "meta.type.cast.expr", + "meta.type.new.expr", + "support.constant.math", + "support.constant.dom", + "support.constant.json", + "entity.other.inherited-class" + ], + "settings": { + "foreground": "#267f99" + } + }, + { + "name": "Control flow / Special keywords", + "scope": [ + "keyword.control", + "source.cpp keyword.operator.new", + "source.cpp keyword.operator.delete", + "keyword.other.using", + "keyword.other.directive.using", + "keyword.other.operator", + "entity.name.operator" + ], + "settings": { + "foreground": "#AF00DB" + } + }, + { + "name": "Variable and parameter name", + "scope": [ + "variable", + "meta.definition.variable.name", + "support.variable", + "entity.name.variable", + "constant.other.placeholder" + ], + "settings": { + "foreground": "#001080" + } + }, + { + "name": "Constants and enums", + "scope": ["variable.other.constant", "variable.other.enummember"], + "settings": { + "foreground": "#0070C1" + } + }, + { + "name": "Object keys, TS grammar specific", + "scope": ["meta.object-literal.key"], + "settings": { + "foreground": "#001080" + } + }, + { + "name": "CSS property value", + "scope": [ + "support.constant.property-value", + "support.constant.font-name", + "support.constant.media-type", + "support.constant.media", + "constant.other.color.rgb-value", + "constant.other.rgb-value", + "support.constant.color" + ], + "settings": { + "foreground": "#0451a5" + } + }, + { + "name": "Regular expression groups", + "scope": [ + "punctuation.definition.group.regexp", + "punctuation.definition.group.assertion.regexp", + "punctuation.definition.character-class.regexp", + "punctuation.character.set.begin.regexp", + "punctuation.character.set.end.regexp", + "keyword.operator.negation.regexp", + "support.other.parenthesis.regexp" + ], + "settings": { + "foreground": "#d16969" + } + }, + { + "scope": [ + "constant.character.character-class.regexp", + "constant.other.character-class.set.regexp", + "constant.other.character-class.regexp", + "constant.character.set.regexp" + ], + "settings": { + "foreground": "#811f3f" + } + }, + { + "scope": "keyword.operator.quantifier.regexp", + "settings": { + "foreground": "#000000" + } + }, + { + "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"], + "settings": { + "foreground": "#EE0000" + } + }, + { + "scope": ["constant.character", "constant.other.option"], + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": "constant.character.escape", + "settings": { + "foreground": "#EE0000" + } + }, + { + "scope": "entity.name.label", + "settings": { + "foreground": "#000000" + } + } + ], + "semanticHighlighting": true, + "semanticTokenColors": { + "newOperator": "#AF00DB", + "stringLiteral": "#a31515", + "customLiteral": "#795E26", + "numberLiteral": "#098658" + } +} diff --git a/src/utils/default-themes/light_vs.json b/src/utils/default-themes/light_vs.json new file mode 100644 index 0000000..ac4365a --- /dev/null +++ b/src/utils/default-themes/light_vs.json @@ -0,0 +1,422 @@ +{ + "$schema": "vscode://schemas/color-theme", + "name": "Light (Visual Studio)", + "colors": { + "checkbox.border": "#919191", + "editor.background": "#FFFFFF", + "editor.foreground": "#000000", + "editor.inactiveSelectionBackground": "#E5EBF1", + "editorIndentGuide.background1": "#D3D3D3", + "editorIndentGuide.activeBackground1": "#939393", + "editor.selectionHighlightBackground": "#ADD6FF80", + "editorSuggestWidget.background": "#F3F3F3", + "activityBarBadge.background": "#007ACC", + "sideBarTitle.foreground": "#6F6F6F", + "list.hoverBackground": "#E8E8E8", + "menu.border": "#D4D4D4", + "input.placeholderForeground": "#767676", + "searchEditor.textInputBorder": "#CECECE", + "settings.textInputBorder": "#CECECE", + "settings.numberInputBorder": "#CECECE", + "statusBarItem.remoteForeground": "#FFF", + "statusBarItem.remoteBackground": "#16825D", + "ports.iconRunningProcessForeground": "#369432", + "sideBarSectionHeader.background": "#0000", + "sideBarSectionHeader.border": "#61616130", + "tab.lastPinnedBorder": "#61616130", + "notebook.cellBorderColor": "#E8E8E8", + "notebook.selectedCellBackground": "#c8ddf150", + "statusBarItem.errorBackground": "#c72e0f", + "list.activeSelectionIconForeground": "#FFF", + "list.focusAndSelectionOutline": "#90C2F9", + "terminal.inactiveSelectionBackground": "#E5EBF1", + "widget.border": "#d4d4d4", + "actionBar.toggledBackground": "#dddddd", + "diffEditor.unchangedRegionBackground": "#f8f8f8" + }, + "tokenColors": [ + { + "scope": [ + "meta.embedded", + "source.groovy.embedded", + "string meta.image.inline.markdown", + "variable.legacy.builtin.python" + ], + "settings": { + "foreground": "#000000ff" + } + }, + { + "scope": "emphasis", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "strong", + "settings": { + "fontStyle": "bold" + } + }, + { + "scope": "meta.diff.header", + "settings": { + "foreground": "#000080" + } + }, + { + "scope": "comment", + "settings": { + "foreground": "#008000" + } + }, + { + "scope": "constant.language", + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": [ + "constant.numeric", + "variable.other.enummember", + "keyword.operator.plus.exponent", + "keyword.operator.minus.exponent" + ], + "settings": { + "foreground": "#098658" + } + }, + { + "scope": "constant.regexp", + "settings": { + "foreground": "#811f3f" + } + }, + { + "name": "css tags in selectors, xml tags", + "scope": "entity.name.tag", + "settings": { + "foreground": "#800000" + } + }, + { + "scope": "entity.name.selector", + "settings": { + "foreground": "#800000" + } + }, + { + "scope": "entity.other.attribute-name", + "settings": { + "foreground": "#e50000" + } + }, + { + "scope": [ + "entity.other.attribute-name.class.css", + "source.css entity.other.attribute-name.class", + "entity.other.attribute-name.id.css", + "entity.other.attribute-name.parent-selector.css", + "entity.other.attribute-name.parent.less", + "source.css entity.other.attribute-name.pseudo-class", + "entity.other.attribute-name.pseudo-element.css", + "source.css.less entity.other.attribute-name.id", + "entity.other.attribute-name.scss" + ], + "settings": { + "foreground": "#800000" + } + }, + { + "scope": "invalid", + "settings": { + "foreground": "#cd3131" + } + }, + { + "scope": "markup.underline", + "settings": { + "fontStyle": "underline" + } + }, + { + "scope": "markup.bold", + "settings": { + "fontStyle": "bold", + "foreground": "#000080" + } + }, + { + "scope": "markup.heading", + "settings": { + "fontStyle": "bold", + "foreground": "#800000" + } + }, + { + "scope": "markup.italic", + "settings": { + "fontStyle": "italic" + } + }, + { + "scope": "markup.strikethrough", + "settings": { + "fontStyle": "strikethrough" + } + }, + { + "scope": "markup.inserted", + "settings": { + "foreground": "#098658" + } + }, + { + "scope": "markup.deleted", + "settings": { + "foreground": "#a31515" + } + }, + { + "scope": "markup.changed", + "settings": { + "foreground": "#0451a5" + } + }, + { + "scope": [ + "punctuation.definition.quote.begin.markdown", + "punctuation.definition.list.begin.markdown" + ], + "settings": { + "foreground": "#0451a5" + } + }, + { + "scope": "markup.inline.raw", + "settings": { + "foreground": "#800000" + } + }, + { + "name": "brackets of XML/HTML tags", + "scope": "punctuation.definition.tag", + "settings": { + "foreground": "#800000" + } + }, + { + "scope": ["meta.preprocessor", "entity.name.function.preprocessor"], + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": "meta.preprocessor.string", + "settings": { + "foreground": "#a31515" + } + }, + { + "scope": "meta.preprocessor.numeric", + "settings": { + "foreground": "#098658" + } + }, + { + "scope": "meta.structure.dictionary.key.python", + "settings": { + "foreground": "#0451a5" + } + }, + { + "scope": "storage", + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": "storage.type", + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": ["storage.modifier", "keyword.operator.noexcept"], + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": ["string", "meta.embedded.assembly"], + "settings": { + "foreground": "#a31515" + } + }, + { + "scope": [ + "string.comment.buffered.block.pug", + "string.quoted.pug", + "string.interpolated.pug", + "string.unquoted.plain.in.yaml", + "string.unquoted.plain.out.yaml", + "string.unquoted.block.yaml", + "string.quoted.single.yaml", + "string.quoted.double.xml", + "string.quoted.single.xml", + "string.unquoted.cdata.xml", + "string.quoted.double.html", + "string.quoted.single.html", + "string.unquoted.html", + "string.quoted.single.handlebars", + "string.quoted.double.handlebars" + ], + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": "string.regexp", + "settings": { + "foreground": "#811f3f" + } + }, + { + "name": "String interpolation", + "scope": [ + "punctuation.definition.template-expression.begin", + "punctuation.definition.template-expression.end", + "punctuation.section.embedded" + ], + "settings": { + "foreground": "#0000ff" + } + }, + { + "name": "Reset JavaScript string interpolation expression", + "scope": ["meta.template.expression"], + "settings": { + "foreground": "#000000" + } + }, + { + "scope": [ + "support.constant.property-value", + "support.constant.font-name", + "support.constant.media-type", + "support.constant.media", + "constant.other.color.rgb-value", + "constant.other.rgb-value", + "support.constant.color" + ], + "settings": { + "foreground": "#0451a5" + } + }, + { + "scope": [ + "support.type.vendored.property-name", + "support.type.property-name", + "source.css variable", + "source.coffee.embedded" + ], + "settings": { + "foreground": "#e50000" + } + }, + { + "scope": ["support.type.property-name.json"], + "settings": { + "foreground": "#0451a5" + } + }, + { + "scope": "keyword", + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": "keyword.control", + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": "keyword.operator", + "settings": { + "foreground": "#000000" + } + }, + { + "scope": [ + "keyword.operator.new", + "keyword.operator.expression", + "keyword.operator.cast", + "keyword.operator.sizeof", + "keyword.operator.alignof", + "keyword.operator.typeid", + "keyword.operator.alignas", + "keyword.operator.instanceof", + "keyword.operator.logical.python", + "keyword.operator.wordlike" + ], + "settings": { + "foreground": "#0000ff" + } + }, + { + "scope": "keyword.other.unit", + "settings": { + "foreground": "#098658" + } + }, + { + "scope": [ + "punctuation.section.embedded.begin.php", + "punctuation.section.embedded.end.php" + ], + "settings": { + "foreground": "#800000" + } + }, + { + "scope": "support.function.git-rebase", + "settings": { + "foreground": "#0451a5" + } + }, + { + "scope": "constant.sha.git-rebase", + "settings": { + "foreground": "#098658" + } + }, + { + "name": "coloring of the Java import and package identifiers", + "scope": [ + "storage.modifier.import.java", + "variable.language.wildcard.java", + "storage.modifier.package.java" + ], + "settings": { + "foreground": "#000000" + } + }, + { + "name": "this.self", + "scope": "variable.language", + "settings": { + "foreground": "#0000ff" + } + } + ], + "semanticHighlighting": true, + "semanticTokenColors": { + "newOperator": "#0000ff", + "stringLiteral": "#a31515", + "customLiteral": "#000000", + "numberLiteral": "#098658" + } +} diff --git a/src/utils/getTheme.ts b/src/utils/getTheme.ts new file mode 100644 index 0000000..8a99b1b --- /dev/null +++ b/src/utils/getTheme.ts @@ -0,0 +1,145 @@ +import * as vscode from "vscode" +import * as path from "path" +import * as fs from "fs/promises" +import { convertTheme } from "monaco-vscode-textmate-theme-converter/lib/cjs" + +const defaultThemes: Record = { + "Default Dark Modern": "dark_modern", + "Dark+": "dark_plus", + "Default Dark+": "dark_plus", + "Dark (Visual Studio)": "dark_vs", + "Visual Studio Dark": "dark_vs", + "Dark High Contrast": "hc_black", + "Default High Contrast": "hc_black", + "Light High Contrast": "hc_light", + "Default High Contrast Light": "hc_light", + "Default Light Modern": "light_modern", + "Light+": "light_plus", + "Default Light+": "light_plus", + "Light (Visual Studio)": "light_vs", + "Visual Studio Light": "light_vs", +} + +function parseThemeString(themeString: string | undefined): any { + themeString = themeString + ?.split("\n") + .filter((line) => { + return !line.trim().startsWith("//") + }) + .join("\n") + return JSON.parse(themeString ?? "{}") +} + +export async function getTheme() { + let currentTheme = undefined + const colorTheme = vscode.workspace.getConfiguration("workbench").get("colorTheme") || "Default Dark Modern" + + try { + for (let i = vscode.extensions.all.length - 1; i >= 0; i--) { + if (currentTheme) { + break + } + const extension = vscode.extensions.all[i] + if (extension.packageJSON?.contributes?.themes?.length > 0) { + for (const theme of extension.packageJSON.contributes.themes) { + if (theme.label === colorTheme) { + const themePath = path.join(extension.extensionPath, theme.path) + currentTheme = await fs.readFile(themePath, "utf-8") + break + } + } + } + } + + if (currentTheme === undefined && defaultThemes[colorTheme]) { + const filename = `${defaultThemes[colorTheme]}.json` + currentTheme = await fs.readFile( + path.join(getExtensionUri().fsPath, "src", "utils", "default-themes", filename), + "utf-8" + ) + } + + // Strip comments from theme + let parsed = parseThemeString(currentTheme) + + if (parsed.include) { + const includeThemeString = await fs.readFile( + path.join(getExtensionUri().fsPath, "src", "utils", "default-themes", parsed.include), + "utf-8" + ) + const includeTheme = parseThemeString(includeThemeString) + parsed = mergeJson(parsed, includeTheme) + } + + const converted = convertTheme(parsed) + + converted.base = ( + ["vs", "hc-black"].includes(converted.base) + ? converted.base + : colorTheme.includes("Light") + ? "vs" + : "vs-dark" + ) as any + + return converted + } catch (e) { + console.log("Error loading color theme: ", e) + } + return undefined +} + +type JsonObject = { [key: string]: any } +export function mergeJson( + first: JsonObject, + second: JsonObject, + mergeBehavior?: "merge" | "overwrite", + mergeKeys?: { [key: string]: (a: any, b: any) => boolean } +): any { + const copyOfFirst = JSON.parse(JSON.stringify(first)) + + try { + for (const key in second) { + const secondValue = second[key] + + if (!(key in copyOfFirst) || mergeBehavior === "overwrite") { + // New value + copyOfFirst[key] = secondValue + continue + } + + const firstValue = copyOfFirst[key] + if (Array.isArray(secondValue) && Array.isArray(firstValue)) { + // Array + if (mergeKeys?.[key]) { + // Merge keys are used to determine whether an item form the second object should override one from the first + const keptFromFirst: any[] = [] + firstValue.forEach((item: any) => { + if (!secondValue.some((item2: any) => mergeKeys[key](item, item2))) { + keptFromFirst.push(item) + } + }) + copyOfFirst[key] = [...keptFromFirst, ...secondValue] + } else { + copyOfFirst[key] = [...firstValue, ...secondValue] + } + } else if (typeof secondValue === "object" && typeof firstValue === "object") { + // Object + copyOfFirst[key] = mergeJson(firstValue, secondValue, mergeBehavior) + } else { + // Other (boolean, number, string) + copyOfFirst[key] = secondValue + } + } + return copyOfFirst + } catch (e) { + console.error("Error merging JSON", e, copyOfFirst, second) + return { + ...copyOfFirst, + ...second, + } + } +} + +function getExtensionUri(): vscode.Uri { + return vscode.extensions.getExtension("saoudrizwan.claude-dev")!.extensionUri +} diff --git a/webview-ui/package-lock.json b/webview-ui/package-lock.json index 089c896..9ff6773 100644 --- a/webview-ui/package-lock.json +++ b/webview-ui/package-lock.json @@ -19,13 +19,15 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-markdown": "^9.0.1", + "react-remark": "^2.1.0", "react-scripts": "5.0.1", - "react-syntax-highlighter": "^15.5.0", "react-textarea-autosize": "^8.5.3", "react-use": "^17.5.1", "react-virtuoso": "^4.7.13", + "rehype-highlight": "^7.0.0", "rewire": "^7.0.0", "strip-ansi": "^7.1.0", + "styled-components": "^6.1.13", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, @@ -2476,6 +2478,27 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -3420,6 +3443,42 @@ "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==", "license": "MIT" }, + "node_modules/@mapbox/hast-util-table-cell-style": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.2.1.tgz", + "integrity": "sha512-LyQz4XJIdCdY/+temIhD/Ed0x/p4GAOUycpFSEK2Ads1CPKZy6b7V/2ROEtQiLLQ8soIs0xe/QAoR6kwpyW/yw==", + "license": "BSD-2-Clause", + "dependencies": { + "unist-util-visit": "^1.4.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@mapbox/hast-util-table-cell-style/node_modules/unist-util-is": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz", + "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==", + "license": "MIT" + }, + "node_modules/@mapbox/hast-util-table-cell-style/node_modules/unist-util-visit": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", + "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", + "license": "MIT", + "dependencies": { + "unist-util-visit-parents": "^2.0.0" + } + }, + "node_modules/@mapbox/hast-util-table-cell-style/node_modules/unist-util-visit-parents": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", + "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", + "license": "MIT", + "dependencies": { + "unist-util-is": "^3.0.0" + } + }, "node_modules/@microsoft/fast-element": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.13.0.tgz", @@ -4428,15 +4487,6 @@ "@types/node": "*" } }, - "node_modules/@types/hast": { - "version": "2.3.10", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz", - "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==", - "license": "MIT", - "dependencies": { - "@types/unist": "^2" - } - }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -4694,6 +4744,12 @@ "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==", "license": "MIT" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -6338,6 +6394,15 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6889,6 +6954,15 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -7046,6 +7120,17 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "license": "MIT" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -9053,19 +9138,6 @@ "reusify": "^1.0.4" } }, - "node_modules/fault": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", - "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", - "license": "MIT", - "dependencies": { - "format": "^0.2.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/faye-websocket": { "version": "0.11.4", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz", @@ -9509,14 +9581,6 @@ "node": ">= 6" } }, - "node_modules/format": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", - "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==", - "engines": { - "node": ">=0.4.x" - } - }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -9959,16 +10023,72 @@ "node": ">= 0.4" } }, - "node_modules/hast-util-parse-selector": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz", - "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==", + "node_modules/hast-to-hyperscript": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz", + "integrity": "sha512-zQgLKqF+O2F72S1aa4y2ivxzSlko3MAvxkwG8ehGmNiqd98BIN3JM1rAJPmplEyLmGLO2QZYJtIneOSZ2YbJuA==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.3", + "comma-separated-tokens": "^1.0.0", + "property-information": "^5.3.0", + "space-separated-tokens": "^1.0.0", + "style-to-object": "^0.3.0", + "unist-util-is": "^4.0.0", + "web-namespaces": "^1.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-to-hyperscript/node_modules/inline-style-parser": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz", + "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==", + "license": "MIT" + }, + "node_modules/hast-to-hyperscript/node_modules/style-to-object": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz", + "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==", + "license": "MIT", + "dependencies": { + "inline-style-parser": "0.1.1" + } + }, + "node_modules/hast-to-hyperscript/node_modules/unist-util-is": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz", + "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==", "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-is-element": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz", + "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-is-element/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "license": "MIT", + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/hast-util-to-jsx-runtime": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz", @@ -10035,6 +10155,37 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/hast-util-to-text": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz", + "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "hast-util-is-element": "^3.0.0", + "unist-util-find-after": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-to-text/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "license": "MIT", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/hast-util-to-text/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "license": "MIT" + }, "node_modules/hast-util-whitespace": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", @@ -10055,23 +10206,6 @@ "@types/unist": "*" } }, - "node_modules/hastscript": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz", - "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==", - "license": "MIT", - "dependencies": { - "@types/hast": "^2.0.0", - "comma-separated-tokens": "^1.0.0", - "hast-util-parse-selector": "^2.0.0", - "property-information": "^5.0.0", - "space-separated-tokens": "^1.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, "node_modules/he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -10081,15 +10215,6 @@ "he": "bin/he" } }, - "node_modules/highlight.js": { - "version": "10.7.3", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", - "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", - "license": "BSD-3-Clause", - "engines": { - "node": "*" - } - }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -10668,6 +10793,29 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-buffer": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", + "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/is-callable": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", @@ -13736,20 +13884,6 @@ "tslib": "^2.0.3" } }, - "node_modules/lowlight": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", - "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==", - "license": "MIT", - "dependencies": { - "fault": "^1.0.0", - "highlight.js": "~10.7.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -13810,6 +13944,58 @@ "tmpl": "1.0.5" } }, + "node_modules/mdast-util-definitions": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz", + "integrity": "sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==", + "license": "MIT", + "dependencies": { + "unist-util-visit": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/mdast-util-definitions/node_modules/unist-util-is": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz", + "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/mdast-util-definitions/node_modules/unist-util-visit": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz", + "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.0", + "unist-util-is": "^4.0.0", + "unist-util-visit-parents": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/mdast-util-definitions/node_modules/unist-util-visit-parents": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz", + "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.0", + "unist-util-is": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/mdast-util-from-markdown": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz", @@ -14099,6 +14285,12 @@ "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", "license": "CC0-1.0" }, + "node_modules/mdurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", + "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==", + "license": "MIT" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -16838,15 +17030,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/prismjs": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", - "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -17358,6 +17541,269 @@ "node": ">=0.10.0" } }, + "node_modules/react-remark": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-remark/-/react-remark-2.1.0.tgz", + "integrity": "sha512-7dEPxRGQ23sOdvteuRGaQAs9cEOH/BOeCN4CqsJdk3laUDIDYRCWnM6a3z92PzXHUuxIRLXQNZx7SiO0ijUcbw==", + "license": "MIT", + "dependencies": { + "rehype-react": "^6.0.0", + "remark-parse": "^9.0.0", + "remark-rehype": "^8.0.0", + "unified": "^9.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-remark/node_modules/@types/mdast": { + "version": "3.0.15", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", + "integrity": "sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2" + } + }, + "node_modules/react-remark/node_modules/bail": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz", + "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/react-remark/node_modules/is-plain-obj": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/react-remark/node_modules/mdast-util-from-markdown": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz", + "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==", + "license": "MIT", + "dependencies": { + "@types/mdast": "^3.0.0", + "mdast-util-to-string": "^2.0.0", + "micromark": "~2.11.0", + "parse-entities": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/mdast-util-to-hast": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-10.2.0.tgz", + "integrity": "sha512-JoPBfJ3gBnHZ18icCwHR50orC9kNH81tiR1gs01D8Q5YpV6adHNO9nKNuFBCJQ941/32PT1a63UF/DitmS3amQ==", + "license": "MIT", + "dependencies": { + "@types/mdast": "^3.0.0", + "@types/unist": "^2.0.0", + "mdast-util-definitions": "^4.0.0", + "mdurl": "^1.0.0", + "unist-builder": "^2.0.0", + "unist-util-generated": "^1.0.0", + "unist-util-position": "^3.0.0", + "unist-util-visit": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/mdast-util-to-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz", + "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/micromark": { + "version": "2.11.4", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz", + "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==", + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "debug": "^4.0.0", + "parse-entities": "^2.0.0" + } + }, + "node_modules/react-remark/node_modules/remark-parse": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz", + "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==", + "license": "MIT", + "dependencies": { + "mdast-util-from-markdown": "^0.8.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/remark-rehype": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-8.1.0.tgz", + "integrity": "sha512-EbCu9kHgAxKmW1yEYjx3QafMyGY3q8noUbNUI5xyKbaFP89wbhDrKxyIQNukNYthzjNHZu6J7hwFg7hRm1svYA==", + "license": "MIT", + "dependencies": { + "mdast-util-to-hast": "^10.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/trough": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz", + "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/react-remark/node_modules/unified": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz", + "integrity": "sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==", + "license": "MIT", + "dependencies": { + "bail": "^1.0.0", + "extend": "^3.0.0", + "is-buffer": "^2.0.0", + "is-plain-obj": "^2.0.0", + "trough": "^1.0.0", + "vfile": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/unist-util-is": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz", + "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/unist-util-position": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.1.0.tgz", + "integrity": "sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/unist-util-stringify-position": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz", + "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/unist-util-visit": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz", + "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.0", + "unist-util-is": "^4.0.0", + "unist-util-visit-parents": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/unist-util-visit-parents": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz", + "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.0", + "unist-util-is": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/vfile": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz", + "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.0", + "is-buffer": "^2.0.0", + "unist-util-stringify-position": "^2.0.0", + "vfile-message": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/react-remark/node_modules/vfile-message": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz", + "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==", + "license": "MIT", + "dependencies": { + "@types/unist": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -17431,22 +17877,6 @@ } } }, - "node_modules/react-syntax-highlighter": { - "version": "15.5.0", - "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz", - "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "highlight.js": "^10.4.1", - "lowlight": "^1.17.0", - "prismjs": "^1.27.0", - "refractor": "^3.6.0" - }, - "peerDependencies": { - "react": ">= 0.14.0" - } - }, "node_modules/react-textarea-autosize": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", @@ -17591,30 +18021,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/refractor": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz", - "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==", - "license": "MIT", - "dependencies": { - "hastscript": "^6.0.0", - "parse-entities": "^2.0.0", - "prismjs": "~1.27.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, - "node_modules/refractor/node_modules/prismjs": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", - "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -17709,6 +18115,70 @@ "jsesc": "bin/jsesc" } }, + "node_modules/rehype-highlight": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-7.0.0.tgz", + "integrity": "sha512-QtobgRgYoQaK6p1eSr2SD1i61f7bjF2kZHAQHxeCHAuJf7ZUDMvQ7owDq9YTkmar5m5TSUol+2D3bp3KfJf/oA==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "hast-util-to-text": "^4.0.0", + "lowlight": "^3.0.0", + "unist-util-visit": "^5.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-highlight/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "license": "MIT", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/rehype-highlight/node_modules/highlight.js": { + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/rehype-highlight/node_modules/lowlight": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.1.0.tgz", + "integrity": "sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "devlop": "^1.0.0", + "highlight.js": "~11.9.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/rehype-react": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/rehype-react/-/rehype-react-6.2.1.tgz", + "integrity": "sha512-f9KIrjktvLvmbGc7si25HepocOg4z0MuNOtweigKzBcDjiGSTGhyz6VSgaV5K421Cq1O+z4/oxRJ5G9owo0KVg==", + "license": "MIT", + "dependencies": { + "@mapbox/hast-util-table-cell-style": "^0.2.0", + "hast-to-hyperscript": "^9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", @@ -18494,6 +18964,12 @@ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "license": "ISC" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -19222,6 +19698,68 @@ "inline-style-parser": "0.2.3" } }, + "node_modules/styled-components": { + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -20142,6 +20680,46 @@ "node": ">=8" } }, + "node_modules/unist-builder": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-2.0.3.tgz", + "integrity": "sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-find-after": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz", + "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==", + "license": "MIT", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-find-after/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "license": "MIT" + }, + "node_modules/unist-util-generated": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz", + "integrity": "sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/unist-util-is": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", @@ -20535,6 +21113,16 @@ "minimalistic-assert": "^1.0.0" } }, + "node_modules/web-namespaces": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz", + "integrity": "sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/web-vitals": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz", diff --git a/webview-ui/package.json b/webview-ui/package.json index cb00ed0..6d78fe6 100644 --- a/webview-ui/package.json +++ b/webview-ui/package.json @@ -14,13 +14,15 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-markdown": "^9.0.1", + "react-remark": "^2.1.0", "react-scripts": "5.0.1", - "react-syntax-highlighter": "^15.5.0", "react-textarea-autosize": "^8.5.3", "react-use": "^17.5.1", "react-virtuoso": "^4.7.13", + "rehype-highlight": "^7.0.0", "rewire": "^7.0.0", "strip-ansi": "^7.1.0", + "styled-components": "^6.1.13", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx index 079dd52..fe2af49 100644 --- a/webview-ui/src/components/ChatRow.tsx +++ b/webview-ui/src/components/ChatRow.tsx @@ -1,17 +1,15 @@ import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react" import React, { memo, useMemo } from "react" import ReactMarkdown from "react-markdown" -import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import { ClaudeMessage, ClaudeSayTool } from "../../../src/shared/ExtensionMessage" import { COMMAND_OUTPUT_STRING } from "../../../src/shared/combineCommandSequences" -import { SyntaxHighlighterStyle } from "../utils/getSyntaxHighlighterStyleFromTheme" +import CodeAccordian from "./CodeAccordian" import CodeBlock from "./CodeBlock" import Terminal from "./Terminal" import Thumbnails from "./Thumbnails" interface ChatRowProps { message: ClaudeMessage - syntaxHighlighterStyle: SyntaxHighlighterStyle isExpanded: boolean onToggleExpand: () => void lastModifiedMessage?: ClaudeMessage @@ -35,7 +33,6 @@ export default ChatRow const ChatRowContent = ({ message, - syntaxHighlighterStyle, isExpanded, onToggleExpand, lastModifiedMessage, @@ -165,10 +162,9 @@ const ChatRowContent = ({ {toolIcon("edit")} Claude wants to edit this file: - @@ -181,10 +177,9 @@ const ChatRowContent = ({ {toolIcon("new-file")} Claude wants to create a new file: - @@ -199,10 +194,9 @@ const ChatRowContent = ({ {message.type === "ask" ? "Claude wants to read this file:" : "Claude read this file:"} - @@ -219,11 +213,10 @@ const ChatRowContent = ({ : "Claude viewed the top level files in this directory:"} - @@ -240,11 +233,10 @@ const ChatRowContent = ({ : "Claude recursively viewed all files in this directory:"} - @@ -261,10 +253,9 @@ const ChatRowContent = ({ : "Claude viewed source code definition names used in this directory:"} - @@ -287,11 +278,10 @@ const ChatRowContent = ({ )} - @@ -365,10 +355,9 @@ const ChatRowContent = ({ {isExpanded && (
- @@ -381,7 +370,7 @@ const ChatRowContent = ({ case "text": return (
- +
) case "user_feedback": @@ -421,10 +410,9 @@ const ChatRowContent = ({ }}> The user made the following changes: - @@ -450,7 +438,7 @@ const ChatRowContent = ({ {title}
- +
) @@ -465,7 +453,7 @@ const ChatRowContent = ({ )}
- +
) @@ -517,7 +505,7 @@ const ChatRowContent = ({ {title}
- +
) @@ -534,7 +522,7 @@ const ChatRowContent = ({ )}
- +
) @@ -559,114 +547,94 @@ const ProgressIndicator = () => ( ) -const Markdown = memo( - ({ syntaxHighlighterStyle, markdown }: { syntaxHighlighterStyle: SyntaxHighlighterStyle; markdown?: string }) => { - // react-markdown lets us customize elements, so here we're using their example of replacing code blocks with SyntaxHighlighter. However when there are no language matches (` or ``` without a language specifier) then we default to a normal code element for inline code. Code blocks without a language specifier shouldn't be a common occurrence as we prompt Claude to always use a language specifier. - // when claude wraps text in thinking tags, he doesnt use line breaks so we need to insert those ourselves to render markdown correctly - const parsed = markdown?.replace(/([\s\S]*?)<\/thinking>/g, (match, content) => { - return `__\n\n${content}\n\n__` - }) - return ( -
- { + // react-markdown lets us customize elements, so here we're using their example of replacing code blocks with SyntaxHighlighter. However when there are no language matches (` or ``` without a language specifier) then we default to a normal code element for inline code. Code blocks without a language specifier shouldn't be a common occurrence as we prompt Claude to always use a language specifier. + // when claude wraps text in thinking tags, he doesnt use line breaks so we need to insert those ourselves to render markdown correctly + const parsed = markdown?.replace(/([\s\S]*?)<\/thinking>/g, (match, content) => { + return `__\n\n${content}\n\n__` + }) + return ( +
+ + ) + }, + ol(props) { + const { style, ...rest } = props + return ( +
    + ) + }, + ul(props) { + const { style, ...rest } = props + return ( +
      + ) + }, + // https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight + code(props) { + const { children, className, node, ...rest } = props + const match = /language-(\w+)/.exec(className || "") + return match ? ( +
      + - ) - }, - ol(props) { - const { style, ...rest } = props - return ( -
        - ) - }, - ul(props) { - const { style, ...rest } = props - return ( -
          - ) - }, - // https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight - code(props) { - const { children, className, node, ...rest } = props - const match = /language-(\w+)/.exec(className || "") - return match ? ( - - ) : ( - - {children} - - ) - }, - }} - /> -
      - ) - } -) +
+ ) : ( + + {children} + + ) + }, + }} + /> +
+ ) +}) diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx index d19ee5d..c1548bb 100644 --- a/webview-ui/src/components/ChatView.tsx +++ b/webview-ui/src/components/ChatView.tsx @@ -1,6 +1,5 @@ import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react" import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react" -import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus" import DynamicTextArea from "react-textarea-autosize" import { useEvent, useMount } from "react-use" import { Virtuoso, type VirtuosoHandle } from "react-virtuoso" @@ -9,7 +8,6 @@ import { combineApiRequests } from "../../../src/shared/combineApiRequests" import { combineCommandSequences, COMMAND_STDIN_STRING } from "../../../src/shared/combineCommandSequences" import { getApiMetrics } from "../../../src/shared/getApiMetrics" import { useExtensionState } from "../context/ExtensionStateContext" -import { getSyntaxHighlighterStyleFromTheme } from "../utils/getSyntaxHighlighterStyleFromTheme" import { vscode } from "../utils/vscode" import Announcement from "./Announcement" import ChatRow from "./ChatRow" @@ -36,14 +34,7 @@ const ChatView = ({ hideAnnouncement, showHistoryView, }: ChatViewProps) => { - const { - version, - claudeMessages: messages, - taskHistory, - themeName: vscodeThemeName, - apiConfiguration, - uriScheme, - } = useExtensionState() + const { version, claudeMessages: messages, taskHistory, apiConfiguration, uriScheme } = useExtensionState() //const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined const task = messages.length > 0 ? messages[0] : undefined // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see ClaudeDev.abort) @@ -65,7 +56,6 @@ const ChatView = ({ const [enableButtons, setEnableButtons] = useState(false) const [primaryButtonText, setPrimaryButtonText] = useState(undefined) const [secondaryButtonText, setSecondaryButtonText] = useState(undefined) - const [syntaxHighlighterStyle, setSyntaxHighlighterStyle] = useState(vsDarkPlus) const virtuosoRef = useRef(null) const [expandedRows, setExpandedRows] = useState>({}) @@ -76,14 +66,6 @@ const ChatView = ({ })) } - useEffect(() => { - if (!vscodeThemeName) return - const theme = getSyntaxHighlighterStyleFromTheme(vscodeThemeName) - if (theme) { - setSyntaxHighlighterStyle(theme) - } - }, [vscodeThemeName]) - useEffect(() => { // if last message is an ask, show user ask UI @@ -486,7 +468,6 @@ const ChatView = ({ toggleRowExpansion(message.ts)} lastModifiedMessage={modifiedMessages.at(-1)} @@ -494,7 +475,7 @@ const ChatView = ({ handleSendStdin={handleSendStdin} /> ), - [expandedRows, syntaxHighlighterStyle, modifiedMessages, visibleMessages.length, handleSendStdin] + [expandedRows, modifiedMessages, visibleMessages.length, handleSendStdin] ) return ( diff --git a/webview-ui/src/components/CodeAccordian.tsx b/webview-ui/src/components/CodeAccordian.tsx new file mode 100644 index 0000000..d9e2f76 --- /dev/null +++ b/webview-ui/src/components/CodeAccordian.tsx @@ -0,0 +1,85 @@ +import { memo, useMemo } from "react" +import { getLanguageFromPath } from "../utils/getLanguageFromPath" +import CodeBlock from "./CodeBlock" + +interface CodeAccordianProps { + code?: string + diff?: string + language?: string | undefined + path?: string + isExpanded: boolean + onToggleExpand: () => void +} + +/* +We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work. +^: Anchors the match to the start of the string. +[^a-zA-Z0-9]+: Matches one or more characters that are not alphanumeric. +The replace method removes these matched characters, effectively trimming the string up to the first alphanumeric character. +*/ +const removeLeadingNonAlphanumeric = (path: string): string => path.replace(/^[^a-zA-Z0-9]+/, "") + +const CodeAccordian = ({ code, diff, language, path, isExpanded, onToggleExpand }: CodeAccordianProps) => { + const inferredLanguage = useMemo( + () => code && (language ?? (path ? getLanguageFromPath(path) : undefined)), + [path, language, code] + ) + + return ( +
+ {path && ( +
+ + {removeLeadingNonAlphanumeric(path) + "\u200E"} + + +
+ )} + {(!path || isExpanded) && ( +
+ +
+ )} +
+ ) +} + +// memo does shallow comparison of props, so if you need it to re-render when a nested object changes, you need to pass a custom comparison function +export default memo(CodeAccordian) diff --git a/webview-ui/src/components/CodeBlock.tsx b/webview-ui/src/components/CodeBlock.tsx index 187eef7..ff68469 100644 --- a/webview-ui/src/components/CodeBlock.tsx +++ b/webview-ui/src/components/CodeBlock.tsx @@ -1,171 +1,129 @@ -import { memo, useMemo } from "react" -import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" -import { getLanguageFromPath } from "../utils/getLanguageFromPath" -import { SyntaxHighlighterStyle } from "../utils/getSyntaxHighlighterStyleFromTheme" +import { memo, useEffect } from "react" +import { useRemark } from "react-remark" +import rehypeHighlight, { Options } from "rehype-highlight" +import styled from "styled-components" +import { visit } from "unist-util-visit" +import { useExtensionState } from "../context/ExtensionStateContext" + +const BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))" /* -const vscodeSyntaxStyle: React.CSSProperties = { - backgroundColor: "var(--vscode-editor-background)", - color: "var(--vscode-editor-foreground)", - fontFamily: "var(--vscode-editor-font-family)", - fontSize: "var(--vscode-editor-font-size)", - lineHeight: "var(--vscode-editor-line-height)", - textAlign: "left", - whiteSpace: "pre", - wordSpacing: "normal", - wordBreak: "normal", - wordWrap: "normal", - tabSize: 4, - hyphens: "none", - padding: "1em", - margin: "0.5em 0", - overflow: "auto", - borderRadius: "6px", -} - -const tokenStyles = { - comment: { color: "var(--vscode-editor-foreground)" }, - prolog: { color: "var(--vscode-editor-foreground)" }, - doctype: { color: "var(--vscode-editor-foreground)" }, - cdata: { color: "var(--vscode-editor-foreground)" }, - punctuation: { color: "var(--vscode-editor-foreground)" }, - property: { color: "var(--vscode-symbolIcon-propertyForeground)" }, - tag: { color: "var(--vscode-symbolIcon-colorForeground)" }, - boolean: { color: "var(--vscode-symbolIcon-booleanForeground)" }, - number: { color: "var(--vscode-symbolIcon-numberForeground)" }, - constant: { color: "var(--vscode-symbolIcon-constantForeground)" }, - symbol: { color: "var(--vscode-symbolIcon-colorForeground)" }, - selector: { color: "var(--vscode-symbolIcon-colorForeground)" }, - "attr-name": { color: "var(--vscode-symbolIcon-propertyForeground)" }, - string: { color: "var(--vscode-symbolIcon-stringForeground)" }, - char: { color: "var(--vscode-symbolIcon-stringForeground)" }, - builtin: { color: "var(--vscode-symbolIcon-keywordForeground)" }, - inserted: { color: "var(--vscode-gitDecoration-addedResourceForeground)" }, - operator: { color: "var(--vscode-symbolIcon-operatorForeground)" }, - entity: { color: "var(--vscode-symbolIcon-snippetForeground)", cursor: "help" }, - url: { color: "var(--vscode-textLink-foreground)" }, - variable: { color: "var(--vscode-symbolIcon-variableForeground)" }, - atrule: { color: "var(--vscode-symbolIcon-keywordForeground)" }, - "attr-value": { color: "var(--vscode-symbolIcon-stringForeground)" }, - keyword: { color: "var(--vscode-symbolIcon-keywordForeground)" }, - function: { color: "var(--vscode-symbolIcon-functionForeground)" }, - regex: { color: "var(--vscode-symbolIcon-regexForeground)" }, - important: { color: "var(--vscode-editorWarning-foreground)", fontWeight: "bold" }, - bold: { fontWeight: "bold" }, - italic: { fontStyle: "italic" }, - deleted: { color: "var(--vscode-gitDecoration-deletedResourceForeground)" }, -} +overflowX: auto + inner div with padding results in an issue where the top/left/bottom padding renders but the right padding inside does not count as overflow as the width of the element is not exceeded. Once the inner div is outside the boundaries of the parent it counts as overflow. +https://stackoverflow.com/questions/60778406/why-is-padding-right-clipped-with-overflowscroll/77292459#77292459 +this fixes the issue of right padding clipped off +“ideal” size in a given axis when given infinite available space--allows the syntax highlighter to grow to largest possible width including its padding +minWidth: "max-content", */ -interface CodeBlockProps { - code?: string - diff?: string - language?: string | undefined - path?: string - syntaxHighlighterStyle: SyntaxHighlighterStyle - isExpanded: boolean - onToggleExpand: () => void -} +const StyledMarkdown = styled.div` + pre { + background-color: ${BG_COLOR}; + border-radius: 5px; + margin: 0; + min-width: max-content; + padding: 10px 10px; + } -/* -We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work. -^: Anchors the match to the start of the string. -[^a-zA-Z0-9]+: Matches one or more characters that are not alphanumeric. -The replace method removes these matched characters, effectively trimming the string up to the first alphanumeric character. -*/ -const removeLeadingNonAlphanumeric = (path: string): string => path.replace(/^[^a-zA-Z0-9]+/, "") + pre > code { + .hljs-deletion { + background-color: var(--vscode-diffEditor-removedTextBackground); + } + .hljs-addition { + background-color: var(--vscode-diffEditor-insertedTextBackground); + } + } -const CodeBlock = ({ - code, - diff, - language, - path, - syntaxHighlighterStyle, - isExpanded, - onToggleExpand, -}: CodeBlockProps) => { - const inferredLanguage = useMemo( - () => code && (language ?? (path ? getLanguageFromPath(path) : undefined)), - [path, language, code] - ) + code { + span.line:empty { + display: none; + } + word-wrap: break-word; + border-radius: 5px; + background-color: ${BG_COLOR}; + font-size: var(--vscode-editor-font-size, var(--vscode-font-size, 12px)); + font-family: var(--vscode-editor-font-family); + } + + code:not(pre > code) { + font-family: var(--vscode-editor-font-family); + color: #f78383; + } + + background-color: ${BG_COLOR}; + font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: var(--vscode-editor-font-size, var(--vscode-font-size, 12px)); + color: var(--vscode-editor-foreground, #fff); + + p, + li, + ol, + ul { + line-height: 1.5; + } +` + +const StyledPre = styled.pre<{ theme: any }>` + & .hljs { + color: var(--vscode-editor-foreground, #fff); + } + + ${(props) => + Object.keys(props.theme) + .map((key, index) => { + return ` + & ${key} { + color: ${props.theme[key]}; + } + ` + }) + .join("")} +` + +const CodeBlock = memo(function CodeBlock({ source }: { source?: string }) { + const { theme } = useExtensionState() + const [reactContent, setMarkdownSource] = useRemark({ + remarkPlugins: [ + () => { + return (tree) => { + visit(tree, "code", (node: any) => { + if (!node.lang) { + node.lang = "javascript" + } else if (node.lang.includes(".")) { + // if the langauge is a file, get the extension + node.lang = node.lang.split(".").slice(-1)[0] + } + }) + } + }, + ], + rehypePlugins: [ + rehypeHighlight as any, + { + // languages: {}, + } as Options, + ], + rehypeReactOptions: { + components: { + pre: ({ node, ...preProps }: any) => , + }, + }, + }) + + useEffect(() => { + setMarkdownSource(source || "") + }, [source, setMarkdownSource, theme]) return (
- {path && ( -
- - {removeLeadingNonAlphanumeric(path) + "\u200E"} - - -
- )} - {(!path || isExpanded) && ( -
- - {code ?? diff ?? ""} - -
- )} + {reactContent}
) -} -// memo does shallow comparison of props, so if you need it to re-render when a nested object changes, you need to pass a custom comparison function -export default memo(CodeBlock) +}) + +export default CodeBlock diff --git a/webview-ui/src/context/ExtensionStateContext.tsx b/webview-ui/src/context/ExtensionStateContext.tsx index 050831d..97da44f 100644 --- a/webview-ui/src/context/ExtensionStateContext.tsx +++ b/webview-ui/src/context/ExtensionStateContext.tsx @@ -3,10 +3,12 @@ import { useEvent } from "react-use" import { ExtensionMessage, ExtensionState } from "../../../src/shared/ExtensionMessage" import { ApiConfiguration } from "../../../src/shared/api" import { vscode } from "../utils/vscode" +import { convertTextMateToHljs } from "../utils/textMateToHljs" interface ExtensionStateContextType extends ExtensionState { didHydrateState: boolean showWelcome: boolean + theme: any setApiConfiguration: (config: ApiConfiguration) => void setCustomInstructions: (value?: string) => void setAlwaysAllowReadOnly: (value: boolean) => void @@ -24,7 +26,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode }) const [didHydrateState, setDidHydrateState] = useState(false) const [showWelcome, setShowWelcome] = useState(false) - + const [theme, setTheme] = useState(undefined) const handleMessage = useCallback((event: MessageEvent) => { const message: ExtensionMessage = event.data if (message.type === "state" && message.state) { @@ -43,6 +45,9 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode setShowWelcome(!hasKey) setDidHydrateState(true) } + if (message.type === "theme" && message.text) { + setTheme(convertTextMateToHljs(JSON.parse(message.text))) + } }, []) useEvent("message", handleMessage) @@ -55,6 +60,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode ...state, didHydrateState, showWelcome, + theme, setApiConfiguration: (value) => setState((prevState) => ({ ...prevState, apiConfiguration: value })), setCustomInstructions: (value) => setState((prevState) => ({ ...prevState, customInstructions: value })), setAlwaysAllowReadOnly: (value) => setState((prevState) => ({ ...prevState, alwaysAllowReadOnly: value })), diff --git a/webview-ui/src/utils/getSyntaxHighlighterStyleFromTheme.ts b/webview-ui/src/utils/getSyntaxHighlighterStyleFromTheme.ts deleted file mode 100644 index d2b74c0..0000000 --- a/webview-ui/src/utils/getSyntaxHighlighterStyleFromTheme.ts +++ /dev/null @@ -1,89 +0,0 @@ -import * as defaultThemes from "react-syntax-highlighter/dist/esm/styles/prism" -import * as generatedThemes from "./vscode-themes" - -/* -VSCode extension webviews have a notoriously difficult time syntax highlighting with styles from the user's theme. We don’t have access to css variables like --vscode-function-color that map to all the token styles react-syntax-highlighter expects. Fortunately, react-syntax-highlighter comes with many built-in themes that we can map to popular VSCode themes. We can also use the few editor css variables exposed to use like --vscode-editor-background (see CodeBlock.tsx), which 99% of the time results in syntax highlighting identical to how the user's editor looks. This approach avoids the overhead of using VSCode's Monaco editor and the monaco-vscode-textmate-theme-converter as some other extensions do, and allows us to take advantage of all the benefits of react-syntax-highlighter. -For themes that don't have a 1:1 match with react-syntax-highlighter built-in themes, we can use Claude to generate style objects based on the results from the "Developer: Generate Color Theme From Current Settings" command. - -https://github.com/microsoft/vscode/issues/56356 -*/ - -// See https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_PRISM.MD for available styles react-syntax-highlighter provides -const defaultSyntaxHighlighterThemes: { [key: string]: string } = { - // Vscode built-in - "Default Dark Modern": "vscDarkPlus", - "Dark+": "vscDarkPlus", - "Default Dark+": "vscDarkPlus", - "Dark (Visual Studio)": "vscDarkPlus", - "Visual Studio Dark": "vscDarkPlus", - "Dark High Contrast": "vscDarkPlus", - "Default High Contrast": "vscDarkPlus", - "Light High Contrast": "vs", - "Default High Contrast Light": "vs", // FIXME: some text renders white - "Default Light Modern": "vs", - "Light+": "vs", - "Default Light+": "vs", - "Light (Visual Studio)": "vs", - "Visual Studio Light": "vs", - - // Third party - Anysphere: "nightOwl", - Abyss: "materialOceanic", - "Kimbie Dark": "cb", - Monokai: "darcula", - "Monokai Dimmed": "darcula", - "Solarized Dark": "solarizedDarkAtom", - "Solarized Light": "solarizedlight", - "Quiet Light": "solarizedlight", - "Tomorrow Night Blue": "lucario", - Dracula: "dracula", - "Dracula Theme": "dracula", - "Dracula Theme Soft": "dracula", - "Night Owl": "nightOwl", - "Material Theme": "materialDark", - "Material Theme Lighter": "materialLight", - "Material Theme Lighter High Contrast": "materialLight", - "One Dark Pro": "oneDark", - "One Dark Pro Darker": "oneDark", - "One Dark Pro Flat": "oneDark", - "One Dark Pro Mix": "oneDark", - "One Light": "oneLight", - "Winter is Coming": "nord", - "Atom One Dark": "oneDark", - "SynthWave '84": "synthwave84", -} - -// Themes that don't have an already provided 1:1 syntax highlighter style -// These style objects are built with Claude using the results from "Developer: Generate Color Theme From Current Settings" command -const generatedSyntaxHighlighterThemes: { [key: string]: string } = { - "Github Dark": "githubDark", - "GitHub Dark Colorblind (Beta)": "githubDark", - "GitHub Dark Colorblind": "githubDark", - "GitHub Dark Default": "githubDark", - "GitHub Dark Dimmed": "githubDark", - "GitHub Dark High Contrast": "githubDark", - - "Github Light": "githubLight", - "GitHub Light Colorblind (Beta)": "githubLight", - "GitHub Light Colorblind": "githubLight", - "GitHub Light Default": "githubLight", - "GitHub Light High Contrast": "githubLight", -} - -export type SyntaxHighlighterStyle = { [key: string]: React.CSSProperties } - -export function getSyntaxHighlighterStyleFromTheme(themeName: string): SyntaxHighlighterStyle | undefined { - const defaultSyntaxHighlighterTheme = Object.entries(defaultSyntaxHighlighterThemes).find(([key]) => - key.toLowerCase().startsWith(themeName.toLowerCase()) - )?.[1] - if (defaultSyntaxHighlighterTheme && defaultSyntaxHighlighterTheme in defaultThemes) { - return defaultThemes[defaultSyntaxHighlighterTheme as keyof typeof defaultThemes] - } else { - const generatedSyntaxHighlighterTheme = Object.entries(generatedSyntaxHighlighterThemes).find(([key]) => - key.toLowerCase().startsWith(themeName.toLowerCase()) - )?.[1] - if (generatedSyntaxHighlighterTheme && generatedSyntaxHighlighterTheme in generatedThemes) { - return generatedThemes[generatedSyntaxHighlighterTheme as keyof typeof generatedThemes] - } - } -} diff --git a/webview-ui/src/utils/textMateToHljs.ts b/webview-ui/src/utils/textMateToHljs.ts new file mode 100644 index 0000000..589a43b --- /dev/null +++ b/webview-ui/src/utils/textMateToHljs.ts @@ -0,0 +1,156 @@ +const hljsToTextMate: Record = { + ".hljs-comment": ["comment"], + ".hljs-tag": ["tag"], + ".hljs-doctag": ["keyword"], + ".hljs-keyword": ["keyword"], + ".hljs-meta .hljs-keyword": ["keyword"], + ".hljs-template-tag": ["keyword"], + ".hljs-template-variable": ["keyword"], + ".hljs-type": ["keyword"], + ".hljs-variable.language_": ["keyword"], + ".hljs-title": ["title", "function", "class"], + ".hljs-title.class_": ["title", "function", "class", "variable"], + ".hljs-title.class_.inherited__": ["title", "function", "class", "variable"], + ".hljs-title.function_": ["support.function", "entity.name.function", "title", "function", "class"], + ".hljs-built_in": ["support.function", "entity.name.function", "title", "function", "class"], + ".hljs-name": ["constant"], + ".hljs-attr": ["variable", "operator", "number"], + ".hljs-attribute": ["attribute", "variable", "operator", "number"], + ".hljs-literal": ["variable", "operator", "number"], + ".hljs-meta": ["variable", "operator", "number"], + ".hljs-number": ["constant.numeric", "number", "variable", "operator"], + ".hljs-operator": ["variable", "operator", "number"], + ".hljs-variable": ["variable", "operator", "number"], + ".hljs-selector-attr": ["variable", "operator", "number"], + ".hljs-selector-class": ["variable", "operator", "number"], + ".hljs-selector-id": ["variable", "operator", "number"], + ".hljs-regexp": ["string"], + ".hljs-string": ["string"], + ".hljs-meta .hljs-string": ["string"], + ".hljs-params": ["variable", "operator", "number"], +} + +type FullColorTheme = { + rules?: { + token?: string + foreground?: string + }[] +} + +function constructTheme(tmTheme: FullColorTheme): Record { + const rules = tmTheme["rules"] || [] + + const tokenToForeground: Record = {} + rules.forEach(({ token, foreground }) => { + if (!foreground || !token) { + return + } + tokenToForeground[token] = foreground + }) + + const theme: Record = {} + Object.keys(hljsToTextMate).forEach((className) => { + const tokens = hljsToTextMate[className] + for (const scope of tokens) { + if (tokenToForeground[scope]) { + theme[className] = tokenToForeground[scope] + break + } + } + }) + + if (Object.keys(theme).length === 0) { + return fallbackTheme() + } + + return theme +} + +function fallbackTheme() { + const styles = getComputedStyle(document.body) + const backgroundColor = styles.getPropertyValue("--vscode-editor-background") + const { r, g, b } = parseHexColor(backgroundColor) + const avg = (r + g + b) / 3 + + return avg >= 128 + ? { + ".hljs-comment": "#008000", + ".hljs-doctag": "#0000ff", + ".hljs-keyword": "#0000ff", + ".hljs-meta .hljs-keyword": "#0000ff", + ".hljs-template-tag": "#0000ff", + ".hljs-template-variable": "#0000ff", + ".hljs-type": "#0000ff", + ".hljs-variable.language_": "#0000ff", + ".hljs-title.class_": "#001080", + ".hljs-title.class_.inherited__": "#001080", + ".hljs-title.function_": "#795E26", + ".hljs-built_in": "#795E26", + ".hljs-attr": "#001080", + ".hljs-attribute": "#001080", + ".hljs-literal": "#001080", + ".hljs-meta": "#001080", + ".hljs-number": "#098658", + ".hljs-operator": "#001080", + ".hljs-variable": "#001080", + ".hljs-selector-attr": "#001080", + ".hljs-selector-class": "#001080", + ".hljs-selector-id": "#001080", + ".hljs-regexp": "#a31515", + ".hljs-string": "#a31515", + ".hljs-meta .hljs-string": "#a31515", + ".hljs-params": "#001080", + } + : { + ".hljs-comment": "#6A9955", + ".hljs-doctag": "#569cd6", + ".hljs-keyword": "#569cd6", + ".hljs-meta .hljs-keyword": "#569cd6", + ".hljs-template-tag": "#569cd6", + ".hljs-template-variable": "#569cd6", + ".hljs-type": "#569cd6", + ".hljs-variable.language_": "#569cd6", + ".hljs-title.class_": "#9CDCFE", + ".hljs-title.class_.inherited__": "#9CDCFE", + ".hljs-title.function_": "#DCDCAA", + ".hljs-built_in": "#DCDCAA", + ".hljs-attr": "#9CDCFE", + ".hljs-attribute": "#9CDCFE", + ".hljs-literal": "#9CDCFE", + ".hljs-meta": "#9CDCFE", + ".hljs-number": "#b5cea8", + ".hljs-operator": "#9CDCFE", + ".hljs-variable": "#9CDCFE", + ".hljs-selector-attr": "#9CDCFE", + ".hljs-selector-class": "#9CDCFE", + ".hljs-selector-id": "#9CDCFE", + ".hljs-regexp": "#ce9178", + ".hljs-string": "#ce9178", + ".hljs-meta .hljs-string": "#ce9178", + ".hljs-params": "#9CDCFE", + } +} + +export function convertTextMateToHljs(fullColorTheme: any) { + return constructTheme(fullColorTheme || {}) +} + +function parseHexColor(hexColor: string): { + r: number + g: number + b: number +} { + if (hexColor.startsWith("#")) { + hexColor = hexColor.slice(1) + } + + if (hexColor.length > 6) { + hexColor = hexColor.slice(0, 6) + } + + const r = parseInt(hexColor.substring(0, 2), 16) + const g = parseInt(hexColor.substring(2, 4), 16) + const b = parseInt(hexColor.substring(4, 6), 16) + + return { r, g, b } +} diff --git a/webview-ui/src/utils/vscode-themes/github-dark.ts b/webview-ui/src/utils/vscode-themes/github-dark.ts deleted file mode 100644 index bdaf93e..0000000 --- a/webview-ui/src/utils/vscode-themes/github-dark.ts +++ /dev/null @@ -1,503 +0,0 @@ -const theme: { [key: string]: React.CSSProperties } = { - 'code[class*="language-"]': { - color: "#e1e4e8", - background: "#24292e", - textShadow: "0 1px rgba(0, 0, 0, 0.3)", - fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', - direction: "ltr", - textAlign: "left", - whiteSpace: "pre", - wordSpacing: "normal", - wordBreak: "normal", - lineHeight: "1.5", - MozTabSize: "2", - OTabSize: "2", - tabSize: "2", - WebkitHyphens: "none", - MozHyphens: "none", - msHyphens: "none", - hyphens: "none", - }, - 'pre[class*="language-"]': { - color: "#e1e4e8", - background: "#24292e", - textShadow: "0 1px rgba(0, 0, 0, 0.3)", - fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', - direction: "ltr", - textAlign: "left", - whiteSpace: "pre", - wordSpacing: "normal", - wordBreak: "normal", - lineHeight: "1.5", - MozTabSize: "2", - OTabSize: "2", - tabSize: "2", - WebkitHyphens: "none", - MozHyphens: "none", - msHyphens: "none", - hyphens: "none", - padding: "1em", - margin: "0.5em 0", - overflow: "auto", - borderRadius: "0.3em", - }, - 'code[class*="language-"]::-moz-selection': { - background: "#3392ff44", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"] *::-moz-selection': { - background: "#3392ff44", - color: "inherit", - textShadow: "none", - }, - 'pre[class*="language-"] *::-moz-selection': { - background: "#3392ff44", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"]::selection': { - background: "#3392ff44", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"] *::selection': { - background: "#3392ff44", - color: "inherit", - textShadow: "none", - }, - 'pre[class*="language-"] *::selection': { - background: "#3392ff44", - color: "inherit", - textShadow: "none", - }, - ':not(pre) > code[class*="language-"]': { - background: "#24292e", - padding: "0.1em", - borderRadius: "0.3em", - whiteSpace: "normal", - }, - comment: { - color: "#6A737D", - fontStyle: "italic", - }, - prolog: { - color: "#6A737D", - }, - cdata: { - color: "#6A737D", - }, - doctype: { - color: "#e1e4e8", - }, - punctuation: { - color: "#e1e4e8", - }, - entity: { - color: "#e1e4e8", - cursor: "help", - }, - "attr-name": { - color: "#79B8FF", - }, - "class-name": { - color: "#B392F0", - }, - boolean: { - color: "#79B8FF", - }, - constant: { - color: "#79B8FF", - }, - number: { - color: "#79B8FF", - }, - atrule: { - color: "#79B8FF", - }, - keyword: { - color: "#F97583", - }, - property: { - color: "#79B8FF", - }, - tag: { - color: "#85E89D", - }, - symbol: { - color: "#79B8FF", - }, - deleted: { - color: "#FDAEB7", - background: "#86181D", - }, - important: { - color: "#F97583", - }, - selector: { - color: "#85E89D", - }, - string: { - color: "#9ECBFF", - }, - char: { - color: "#9ECBFF", - }, - builtin: { - color: "#79B8FF", - }, - inserted: { - color: "#85E89D", - background: "#144620", - }, - regex: { - color: "#DBEDFF", - }, - "attr-value": { - color: "#9ECBFF", - }, - "attr-value > .token.punctuation": { - color: "#9ECBFF", - }, - variable: { - color: "#FFAB70", - }, - operator: { - color: "#F97583", - }, - function: { - color: "#B392F0", - }, - url: { - color: "#79B8FF", - }, - "attr-value > .token.punctuation.attr-equals": { - color: "#e1e4e8", - }, - "special-attr > .token.attr-value > .token.value.css": { - color: "#e1e4e8", - }, - ".language-css .token.selector": { - color: "#85E89D", - }, - ".language-css .token.property": { - color: "#79B8FF", - }, - ".language-css .token.function": { - color: "#79B8FF", - }, - ".language-css .token.url > .token.function": { - color: "#79B8FF", - }, - ".language-css .token.url > .token.string.url": { - color: "#9ECBFF", - }, - ".language-css .token.important": { - color: "#F97583", - }, - ".language-css .token.atrule .token.rule": { - color: "#F97583", - }, - ".language-javascript .token.operator": { - color: "#F97583", - }, - ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": - { - color: "#FDAEB7", - }, - ".language-json .token.operator": { - color: "#e1e4e8", - }, - ".language-json .token.null.keyword": { - color: "#79B8FF", - }, - ".language-markdown .token.url": { - color: "#e1e4e8", - }, - ".language-markdown .token.url > .token.operator": { - color: "#e1e4e8", - }, - ".language-markdown .token.url-reference.url > .token.string": { - color: "#e1e4e8", - }, - ".language-markdown .token.url > .token.content": { - color: "#79B8FF", - }, - ".language-markdown .token.url > .token.url": { - color: "#79B8FF", - }, - ".language-markdown .token.url-reference.url": { - color: "#79B8FF", - }, - ".language-markdown .token.blockquote.punctuation": { - color: "#6A737D", - fontStyle: "italic", - }, - ".language-markdown .token.hr.punctuation": { - color: "#6A737D", - fontStyle: "italic", - }, - ".language-markdown .token.code-snippet": { - color: "#9ECBFF", - }, - ".language-markdown .token.bold .token.content": { - color: "#79B8FF", - }, - ".language-markdown .token.italic .token.content": { - color: "#B392F0", - }, - ".language-markdown .token.strike .token.content": { - color: "#FDAEB7", - }, - ".language-markdown .token.strike .token.punctuation": { - color: "#FDAEB7", - }, - ".language-markdown .token.list.punctuation": { - color: "#FDAEB7", - }, - ".language-markdown .token.title.important > .token.punctuation": { - color: "#FDAEB7", - }, - bold: { - fontWeight: "bold", - }, - italic: { - fontStyle: "italic", - }, - namespace: { - opacity: "0.8", - }, - "token.tab:not(:empty):before": { - color: "#6A737D", - }, - "token.cr:before": { - color: "#6A737D", - }, - "token.lf:before": { - color: "#6A737D", - }, - "token.space:before": { - color: "#6A737D", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item": { - marginRight: "0.4em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": { - background: "#2f363d", - color: "#959da5", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": { - background: "#2f363d", - color: "#959da5", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": { - background: "#2f363d", - color: "#959da5", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": { - background: "#444d56", - color: "#e1e4e8", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": { - background: "#444d56", - color: "#e1e4e8", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": { - background: "#444d56", - color: "#e1e4e8", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": { - background: "#444d56", - color: "#e1e4e8", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": { - background: "#444d56", - color: "#e1e4e8", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": { - background: "#444d56", - color: "#e1e4e8", - }, - ".line-highlight.line-highlight": { - background: "#2b3036", - }, - ".line-highlight.line-highlight:before": { - background: "#2f363d", - color: "#e1e4e8", - padding: "0.1em 0.6em", - borderRadius: "0.3em", - boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", - }, - ".line-highlight.line-highlight[data-end]:after": { - background: "#2f363d", - color: "#e1e4e8", - padding: "0.1em 0.6em", - borderRadius: "0.3em", - boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", - }, - "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": { - backgroundColor: "#2b3036", - }, - ".line-numbers.line-numbers .line-numbers-rows": { - borderRightColor: "#444d56", - }, - ".command-line .command-line-prompt": { - borderRightColor: "#444d56", - }, - ".line-numbers .line-numbers-rows > span:before": { - color: "#444d56", - }, - ".command-line .command-line-prompt > span:before": { - color: "#444d56", - }, - ".rainbow-braces .token.token.punctuation.brace-level-1": { - color: "#FDAEB7", - }, - ".rainbow-braces .token.token.punctuation.brace-level-5": { - color: "#FDAEB7", - }, - ".rainbow-braces .token.token.punctuation.brace-level-9": { - color: "#FDAEB7", - }, - ".rainbow-braces .token.token.punctuation.brace-level-2": { - color: "#9ECBFF", - }, - ".rainbow-braces .token.token.punctuation.brace-level-6": { - color: "#9ECBFF", - }, - ".rainbow-braces .token.token.punctuation.brace-level-10": { - color: "#9ECBFF", - }, - ".rainbow-braces .token.token.punctuation.brace-level-3": { - color: "#79B8FF", - }, - ".rainbow-braces .token.token.punctuation.brace-level-7": { - color: "#79B8FF", - }, - ".rainbow-braces .token.token.punctuation.brace-level-11": { - color: "#79B8FF", - }, - ".rainbow-braces .token.token.punctuation.brace-level-4": { - color: "#B392F0", - }, - ".rainbow-braces .token.token.punctuation.brace-level-8": { - color: "#B392F0", - }, - ".rainbow-braces .token.token.punctuation.brace-level-12": { - color: "#B392F0", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)": { - backgroundColor: "#86181D", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)": { - backgroundColor: "#86181D", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": { - backgroundColor: "#86181D", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": { - backgroundColor: "#86181D", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": { - backgroundColor: "#86181D", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": { - backgroundColor: "#86181D", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": { - backgroundColor: "#86181D", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": { - backgroundColor: "#86181D", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": { - backgroundColor: "#86181D", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": { - backgroundColor: "#86181D", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)": { - backgroundColor: "#144620", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)": { - backgroundColor: "#144620", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": { - backgroundColor: "#144620", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": { - backgroundColor: "#144620", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": { - backgroundColor: "#144620", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": { - backgroundColor: "#144620", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": { - backgroundColor: "#144620", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": { - backgroundColor: "#144620", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": { - backgroundColor: "#144620", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": { - backgroundColor: "#144620", - }, - ".prism-previewer.prism-previewer:before": { - borderColor: "#1b1f23", - }, - ".prism-previewer-gradient.prism-previewer-gradient div": { - borderColor: "#1b1f23", - borderRadius: "0.3em", - }, - ".prism-previewer-color.prism-previewer-color:before": { - borderRadius: "0.3em", - }, - ".prism-previewer-easing.prism-previewer-easing:before": { - borderRadius: "0.3em", - }, - ".prism-previewer.prism-previewer:after": { - borderTopColor: "#1b1f23", - }, - ".prism-previewer-flipped.prism-previewer-flipped.after": { - borderBottomColor: "#1b1f23", - }, - ".prism-previewer-angle.prism-previewer-angle:before": { - background: "#1f2428", - }, - ".prism-previewer-time.prism-previewer-time:before": { - background: "#1f2428", - }, - ".prism-previewer-easing.prism-previewer-easing": { - background: "#1f2428", - }, - ".prism-previewer-angle.prism-previewer-angle circle": { - stroke: "#e1e4e8", - strokeOpacity: "1", - }, - ".prism-previewer-time.prism-previewer-time circle": { - stroke: "#e1e4e8", - strokeOpacity: "1", - }, - ".prism-previewer-easing.prism-previewer-easing circle": { - stroke: "#e1e4e8", - fill: "transparent", - }, - ".prism-previewer-easing.prism-previewer-easing path": { - stroke: "#e1e4e8", - }, - ".prism-previewer-easing.prism-previewer-easing line": { - stroke: "#e1e4e8", - }, -} - -export default theme diff --git a/webview-ui/src/utils/vscode-themes/github-light.ts b/webview-ui/src/utils/vscode-themes/github-light.ts deleted file mode 100644 index a14ef7d..0000000 --- a/webview-ui/src/utils/vscode-themes/github-light.ts +++ /dev/null @@ -1,506 +0,0 @@ -const theme: { [key: string]: React.CSSProperties } = { - 'code[class*="language-"]': { - background: "#ffffff", - color: "#24292e", - textShadow: "0 1px rgba(0, 0, 0, 0.3)", - fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', - direction: "ltr", - textAlign: "left", - whiteSpace: "pre", - wordSpacing: "normal", - wordBreak: "normal", - lineHeight: "1.5", - MozTabSize: "2", - OTabSize: "2", - tabSize: "2", - WebkitHyphens: "none", - MozHyphens: "none", - msHyphens: "none", - hyphens: "none", - }, - 'pre[class*="language-"]': { - background: "#ffffff", - color: "#24292e", - textShadow: "0 1px rgba(0, 0, 0, 0.3)", - fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', - direction: "ltr", - textAlign: "left", - whiteSpace: "pre", - wordSpacing: "normal", - wordBreak: "normal", - lineHeight: "1.5", - MozTabSize: "2", - OTabSize: "2", - tabSize: "2", - WebkitHyphens: "none", - MozHyphens: "none", - msHyphens: "none", - hyphens: "none", - padding: "1em", - margin: "0.5em 0", - overflow: "auto", - borderRadius: "0.3em", - }, - 'code[class*="language-"]::-moz-selection': { - background: "#0366d625", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"] *::-moz-selection': { - background: "#0366d625", - color: "inherit", - textShadow: "none", - }, - 'pre[class*="language-"] *::-moz-selection': { - background: "#0366d625", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"]::selection': { - background: "#0366d625", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"] *::selection': { - background: "#0366d625", - color: "inherit", - textShadow: "none", - }, - 'pre[class*="language-"] *::selection': { - background: "#0366d625", - color: "inherit", - textShadow: "none", - }, - ':not(pre) > code[class*="language-"]': { - padding: "0.2em 0.3em", - borderRadius: "0.3em", - whiteSpace: "normal", - }, - comment: { - color: "#6A737D", - fontStyle: "italic", - }, - prolog: { - color: "#6A737D", - }, - cdata: { - color: "#6A737D", - }, - doctype: { - color: "#24292e", - }, - punctuation: { - color: "#24292e", - }, - entity: { - color: "#24292e", - cursor: "help", - }, - "attr-name": { - color: "#6F42C1", - }, - "class-name": { - color: "#6F42C1", - }, - boolean: { - color: "#005CC5", - }, - constant: { - color: "#005CC5", - }, - number: { - color: "#005CC5", - }, - atrule: { - color: "#005CC5", - }, - keyword: { - color: "#D73A49", - }, - property: { - color: "#005CC5", - }, - tag: { - color: "#22863A", - }, - symbol: { - color: "#005CC5", - }, - deleted: { - color: "#B31D28", - background: "#FFEEF0", - }, - important: { - color: "#D73A49", - }, - selector: { - color: "#22863A", - }, - string: { - color: "#032F62", - }, - char: { - color: "#032F62", - }, - builtin: { - color: "#005CC5", - }, - inserted: { - color: "#22863A", - background: "#F0FFF4", - }, - regex: { - color: "#032F62", - }, - "attr-value": { - color: "#032F62", - }, - "attr-value > .token.punctuation": { - color: "#032F62", - }, - variable: { - color: "#E36209", - }, - operator: { - color: "#D73A49", - }, - function: { - color: "#6F42C1", - }, - url: { - color: "#005CC5", - }, - "attr-value > .token.punctuation.attr-equals": { - color: "#24292e", - }, - "special-attr > .token.attr-value > .token.value.css": { - color: "#24292e", - }, - ".language-css .token.selector": { - color: "#22863A", - }, - ".language-css .token.property": { - color: "#005CC5", - }, - ".language-css .token.function": { - color: "#005CC5", - }, - ".language-css .token.url > .token.function": { - color: "#005CC5", - }, - ".language-css .token.url > .token.string.url": { - color: "#032F62", - }, - ".language-css .token.important": { - color: "#D73A49", - }, - ".language-css .token.atrule .token.rule": { - color: "#D73A49", - }, - ".language-javascript .token.operator": { - color: "#D73A49", - }, - ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": - { - color: "#B31D28", - }, - ".language-json .token.operator": { - color: "#24292e", - }, - ".language-json .token.null.keyword": { - color: "#005CC5", - }, - ".language-markdown .token.url": { - color: "#24292e", - }, - ".language-markdown .token.url > .token.operator": { - color: "#24292e", - }, - ".language-markdown .token.url-reference.url > .token.string": { - color: "#24292e", - }, - ".language-markdown .token.url > .token.content": { - color: "#005CC5", - }, - ".language-markdown .token.url > .token.url": { - color: "#005CC5", - }, - ".language-markdown .token.url-reference.url": { - color: "#005CC5", - }, - ".language-markdown .token.blockquote.punctuation": { - color: "#6A737D", - fontStyle: "italic", - }, - ".language-markdown .token.hr.punctuation": { - color: "#6A737D", - fontStyle: "italic", - }, - ".language-markdown .token.code-snippet": { - color: "#032F62", - }, - ".language-markdown .token.bold .token.content": { - color: "#005CC5", - }, - ".language-markdown .token.italic .token.content": { - color: "#6F42C1", - }, - ".language-markdown .token.strike .token.content": { - color: "#B31D28", - }, - ".language-markdown .token.strike .token.punctuation": { - color: "#B31D28", - }, - ".language-markdown .token.list.punctuation": { - color: "#B31D28", - }, - ".language-markdown .token.title.important > .token.punctuation": { - color: "#B31D28", - }, - bold: { - fontWeight: "bold", - }, - italic: { - fontStyle: "italic", - }, - namespace: { - opacity: "0.8", - }, - "token.tab:not(:empty):before": { - color: "#24292e33", - textShadow: "none", - }, - "token.cr:before": { - color: "#24292e33", - textShadow: "none", - }, - "token.lf:before": { - color: "#24292e33", - textShadow: "none", - }, - "token.space:before": { - color: "#24292e33", - textShadow: "none", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item": { - marginRight: "0.4em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": { - background: "#f6f8fa", - color: "#24292e", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": { - background: "#f6f8fa", - color: "#24292e", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": { - background: "#f6f8fa", - color: "#24292e", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": { - background: "#e1e4e8", - color: "#2f363d", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": { - background: "#e1e4e8", - color: "#2f363d", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": { - background: "#e1e4e8", - color: "#2f363d", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": { - background: "#e1e4e8", - color: "#2f363d", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": { - background: "#e1e4e8", - color: "#2f363d", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": { - background: "#e1e4e8", - color: "#2f363d", - }, - ".line-highlight.line-highlight": { - background: "#f6f8fa", - }, - ".line-highlight.line-highlight:before": { - background: "#f6f8fa", - color: "#24292e", - padding: "0.1em 0.6em", - borderRadius: "0.3em", - boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", - }, - ".line-highlight.line-highlight[data-end]:after": { - background: "#f6f8fa", - color: "#24292e", - padding: "0.1em 0.6em", - borderRadius: "0.3em", - boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", - }, - "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": { - backgroundColor: "#f6f8fa", - }, - ".line-numbers.line-numbers .line-numbers-rows": { - borderRightColor: "#e1e4e8", - }, - ".command-line .command-line-prompt": { - borderRightColor: "#e1e4e8", - }, - ".line-numbers .line-numbers-rows > span:before": { - color: "#1b1f234d", - }, - ".command-line .command-line-prompt > span:before": { - color: "#1b1f234d", - }, - ".rainbow-braces .token.token.punctuation.brace-level-1": { - color: "#B31D28", - }, - ".rainbow-braces .token.token.punctuation.brace-level-5": { - color: "#B31D28", - }, - ".rainbow-braces .token.token.punctuation.brace-level-9": { - color: "#B31D28", - }, - ".rainbow-braces .token.token.punctuation.brace-level-2": { - color: "#22863A", - }, - ".rainbow-braces .token.token.punctuation.brace-level-6": { - color: "#22863A", - }, - ".rainbow-braces .token.token.punctuation.brace-level-10": { - color: "#22863A", - }, - ".rainbow-braces .token.token.punctuation.brace-level-3": { - color: "#005CC5", - }, - ".rainbow-braces .token.token.punctuation.brace-level-7": { - color: "#005CC5", - }, - ".rainbow-braces .token.token.punctuation.brace-level-11": { - color: "#005CC5", - }, - ".rainbow-braces .token.token.punctuation.brace-level-4": { - color: "#6F42C1", - }, - ".rainbow-braces .token.token.punctuation.brace-level-8": { - color: "#6F42C1", - }, - ".rainbow-braces .token.token.punctuation.brace-level-12": { - color: "#6F42C1", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)": { - backgroundColor: "#FFEEF0", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)": { - backgroundColor: "#FFEEF0", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": { - backgroundColor: "#FFEEF0", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": { - backgroundColor: "#FFEEF0", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": { - backgroundColor: "#FFEEF0", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": { - backgroundColor: "#FFEEF0", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": { - backgroundColor: "#FFEEF0", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": { - backgroundColor: "#FFEEF0", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": { - backgroundColor: "#FFEEF0", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": { - backgroundColor: "#FFEEF0", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)": { - backgroundColor: "#F0FFF4", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)": { - backgroundColor: "#F0FFF4", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": { - backgroundColor: "#F0FFF4", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": { - backgroundColor: "#F0FFF4", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": { - backgroundColor: "#F0FFF4", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": { - backgroundColor: "#F0FFF4", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": { - backgroundColor: "#F0FFF4", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": { - backgroundColor: "#F0FFF4", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": { - backgroundColor: "#F0FFF4", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": { - backgroundColor: "#F0FFF4", - }, - ".prism-previewer.prism-previewer:before": { - borderColor: "#ffffff", - }, - ".prism-previewer-gradient.prism-previewer-gradient div": { - borderColor: "#ffffff", - borderRadius: "0.3em", - }, - ".prism-previewer-color.prism-previewer-color:before": { - borderRadius: "0.3em", - }, - ".prism-previewer-easing.prism-previewer-easing:before": { - borderRadius: "0.3em", - }, - ".prism-previewer.prism-previewer:after": { - borderTopColor: "#ffffff", - }, - ".prism-previewer-flipped.prism-previewer-flipped.after": { - borderBottomColor: "#ffffff", - }, - ".prism-previewer-angle.prism-previewer-angle:before": { - background: "#f6f8fa", - }, - ".prism-previewer-time.prism-previewer-time:before": { - background: "#f6f8fa", - }, - ".prism-previewer-easing.prism-previewer-easing": { - background: "#f6f8fa", - }, - ".prism-previewer-angle.prism-previewer-angle circle": { - stroke: "#24292e", - strokeOpacity: "1", - }, - ".prism-previewer-time.prism-previewer-time circle": { - stroke: "#24292e", - strokeOpacity: "1", - }, - ".prism-previewer-easing.prism-previewer-easing circle": { - stroke: "#24292e", - fill: "transparent", - }, - ".prism-previewer-easing.prism-previewer-easing path": { - stroke: "#24292e", - }, - ".prism-previewer-easing.prism-previewer-easing line": { - stroke: "#24292e", - }, -} - -export default theme diff --git a/webview-ui/src/utils/vscode-themes/index.ts b/webview-ui/src/utils/vscode-themes/index.ts deleted file mode 100644 index 4ba7417..0000000 --- a/webview-ui/src/utils/vscode-themes/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as githubLight } from "./github-light" -export { default as githubDark } from "./github-dark" diff --git a/webview-ui/src/utils/vscode-themes/one-dark-example.ts b/webview-ui/src/utils/vscode-themes/one-dark-example.ts deleted file mode 100644 index a39b3e9..0000000 --- a/webview-ui/src/utils/vscode-themes/one-dark-example.ts +++ /dev/null @@ -1,503 +0,0 @@ -const theme: { [key: string]: React.CSSProperties } = { - 'code[class*="language-"]': { - background: "hsl(220, 13%, 18%)", - color: "hsl(220, 14%, 71%)", - textShadow: "0 1px rgba(0, 0, 0, 0.3)", - fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', - direction: "ltr", - textAlign: "left", - whiteSpace: "pre", - wordSpacing: "normal", - wordBreak: "normal", - lineHeight: "1.5", - MozTabSize: "2", - OTabSize: "2", - tabSize: "2", - WebkitHyphens: "none", - MozHyphens: "none", - msHyphens: "none", - hyphens: "none", - }, - 'pre[class*="language-"]': { - background: "hsl(220, 13%, 18%)", - color: "hsl(220, 14%, 71%)", - textShadow: "0 1px rgba(0, 0, 0, 0.3)", - fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace', - direction: "ltr", - textAlign: "left", - whiteSpace: "pre", - wordSpacing: "normal", - wordBreak: "normal", - lineHeight: "1.5", - MozTabSize: "2", - OTabSize: "2", - tabSize: "2", - WebkitHyphens: "none", - MozHyphens: "none", - msHyphens: "none", - hyphens: "none", - padding: "1em", - margin: "0.5em 0", - overflow: "auto", - borderRadius: "0.3em", - }, - 'code[class*="language-"]::-moz-selection': { - background: "hsl(220, 13%, 28%)", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"] *::-moz-selection': { - background: "hsl(220, 13%, 28%)", - color: "inherit", - textShadow: "none", - }, - 'pre[class*="language-"] *::-moz-selection': { - background: "hsl(220, 13%, 28%)", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"]::selection': { - background: "hsl(220, 13%, 28%)", - color: "inherit", - textShadow: "none", - }, - 'code[class*="language-"] *::selection': { - background: "hsl(220, 13%, 28%)", - color: "inherit", - textShadow: "none", - }, - 'pre[class*="language-"] *::selection': { - background: "hsl(220, 13%, 28%)", - color: "inherit", - textShadow: "none", - }, - ':not(pre) > code[class*="language-"]': { - padding: "0.2em 0.3em", - borderRadius: "0.3em", - whiteSpace: "normal", - }, - comment: { - color: "hsl(220, 10%, 40%)", - fontStyle: "italic", - }, - prolog: { - color: "hsl(220, 10%, 40%)", - }, - cdata: { - color: "hsl(220, 10%, 40%)", - }, - doctype: { - color: "hsl(220, 14%, 71%)", - }, - punctuation: { - color: "hsl(220, 14%, 71%)", - }, - entity: { - color: "hsl(220, 14%, 71%)", - cursor: "help", - }, - "attr-name": { - color: "hsl(29, 54%, 61%)", - }, - "class-name": { - color: "hsl(29, 54%, 61%)", - }, - boolean: { - color: "hsl(29, 54%, 61%)", - }, - constant: { - color: "hsl(29, 54%, 61%)", - }, - number: { - color: "hsl(29, 54%, 61%)", - }, - atrule: { - color: "hsl(29, 54%, 61%)", - }, - keyword: { - color: "hsl(286, 60%, 67%)", - }, - property: { - color: "hsl(355, 65%, 65%)", - }, - tag: { - color: "hsl(355, 65%, 65%)", - }, - symbol: { - color: "hsl(355, 65%, 65%)", - }, - deleted: { - color: "hsl(355, 65%, 65%)", - }, - important: { - color: "hsl(355, 65%, 65%)", - }, - selector: { - color: "hsl(95, 38%, 62%)", - }, - string: { - color: "hsl(95, 38%, 62%)", - }, - char: { - color: "hsl(95, 38%, 62%)", - }, - builtin: { - color: "hsl(95, 38%, 62%)", - }, - inserted: { - color: "hsl(95, 38%, 62%)", - }, - regex: { - color: "hsl(95, 38%, 62%)", - }, - "attr-value": { - color: "hsl(95, 38%, 62%)", - }, - "attr-value > .token.punctuation": { - color: "hsl(95, 38%, 62%)", - }, - variable: { - color: "hsl(207, 82%, 66%)", - }, - operator: { - color: "hsl(207, 82%, 66%)", - }, - function: { - color: "hsl(207, 82%, 66%)", - }, - url: { - color: "hsl(187, 47%, 55%)", - }, - "attr-value > .token.punctuation.attr-equals": { - color: "hsl(220, 14%, 71%)", - }, - "special-attr > .token.attr-value > .token.value.css": { - color: "hsl(220, 14%, 71%)", - }, - ".language-css .token.selector": { - color: "hsl(355, 65%, 65%)", - }, - ".language-css .token.property": { - color: "hsl(220, 14%, 71%)", - }, - ".language-css .token.function": { - color: "hsl(187, 47%, 55%)", - }, - ".language-css .token.url > .token.function": { - color: "hsl(187, 47%, 55%)", - }, - ".language-css .token.url > .token.string.url": { - color: "hsl(95, 38%, 62%)", - }, - ".language-css .token.important": { - color: "hsl(286, 60%, 67%)", - }, - ".language-css .token.atrule .token.rule": { - color: "hsl(286, 60%, 67%)", - }, - ".language-javascript .token.operator": { - color: "hsl(286, 60%, 67%)", - }, - ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": - { - color: "hsl(5, 48%, 51%)", - }, - ".language-json .token.operator": { - color: "hsl(220, 14%, 71%)", - }, - ".language-json .token.null.keyword": { - color: "hsl(29, 54%, 61%)", - }, - ".language-markdown .token.url": { - color: "hsl(220, 14%, 71%)", - }, - ".language-markdown .token.url > .token.operator": { - color: "hsl(220, 14%, 71%)", - }, - ".language-markdown .token.url-reference.url > .token.string": { - color: "hsl(220, 14%, 71%)", - }, - ".language-markdown .token.url > .token.content": { - color: "hsl(207, 82%, 66%)", - }, - ".language-markdown .token.url > .token.url": { - color: "hsl(187, 47%, 55%)", - }, - ".language-markdown .token.url-reference.url": { - color: "hsl(187, 47%, 55%)", - }, - ".language-markdown .token.blockquote.punctuation": { - color: "hsl(220, 10%, 40%)", - fontStyle: "italic", - }, - ".language-markdown .token.hr.punctuation": { - color: "hsl(220, 10%, 40%)", - fontStyle: "italic", - }, - ".language-markdown .token.code-snippet": { - color: "hsl(95, 38%, 62%)", - }, - ".language-markdown .token.bold .token.content": { - color: "hsl(29, 54%, 61%)", - }, - ".language-markdown .token.italic .token.content": { - color: "hsl(286, 60%, 67%)", - }, - ".language-markdown .token.strike .token.content": { - color: "hsl(355, 65%, 65%)", - }, - ".language-markdown .token.strike .token.punctuation": { - color: "hsl(355, 65%, 65%)", - }, - ".language-markdown .token.list.punctuation": { - color: "hsl(355, 65%, 65%)", - }, - ".language-markdown .token.title.important > .token.punctuation": { - color: "hsl(355, 65%, 65%)", - }, - bold: { - fontWeight: "bold", - }, - italic: { - fontStyle: "italic", - }, - namespace: { - opacity: "0.8", - }, - "token.tab:not(:empty):before": { - color: "hsla(220, 14%, 71%, 0.15)", - textShadow: "none", - }, - "token.cr:before": { - color: "hsla(220, 14%, 71%, 0.15)", - textShadow: "none", - }, - "token.lf:before": { - color: "hsla(220, 14%, 71%, 0.15)", - textShadow: "none", - }, - "token.space:before": { - color: "hsla(220, 14%, 71%, 0.15)", - textShadow: "none", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item": { - marginRight: "0.4em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": { - background: "hsl(220, 13%, 26%)", - color: "hsl(220, 9%, 55%)", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": { - background: "hsl(220, 13%, 26%)", - color: "hsl(220, 9%, 55%)", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": { - background: "hsl(220, 13%, 26%)", - color: "hsl(220, 9%, 55%)", - padding: "0.1em 0.4em", - borderRadius: "0.3em", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": { - background: "hsl(220, 13%, 28%)", - color: "hsl(220, 14%, 71%)", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": { - background: "hsl(220, 13%, 28%)", - color: "hsl(220, 14%, 71%)", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": { - background: "hsl(220, 13%, 28%)", - color: "hsl(220, 14%, 71%)", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": { - background: "hsl(220, 13%, 28%)", - color: "hsl(220, 14%, 71%)", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": { - background: "hsl(220, 13%, 28%)", - color: "hsl(220, 14%, 71%)", - }, - "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": { - background: "hsl(220, 13%, 28%)", - color: "hsl(220, 14%, 71%)", - }, - ".line-highlight.line-highlight": { - background: "hsla(220, 100%, 80%, 0.04)", - }, - ".line-highlight.line-highlight:before": { - background: "hsl(220, 13%, 26%)", - color: "hsl(220, 14%, 71%)", - padding: "0.1em 0.6em", - borderRadius: "0.3em", - boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", - }, - ".line-highlight.line-highlight[data-end]:after": { - background: "hsl(220, 13%, 26%)", - color: "hsl(220, 14%, 71%)", - padding: "0.1em 0.6em", - borderRadius: "0.3em", - boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)", - }, - "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": { - backgroundColor: "hsla(220, 100%, 80%, 0.04)", - }, - ".line-numbers.line-numbers .line-numbers-rows": { - borderRightColor: "hsla(220, 14%, 71%, 0.15)", - }, - ".command-line .command-line-prompt": { - borderRightColor: "hsla(220, 14%, 71%, 0.15)", - }, - ".line-numbers .line-numbers-rows > span:before": { - color: "hsl(220, 14%, 45%)", - }, - ".command-line .command-line-prompt > span:before": { - color: "hsl(220, 14%, 45%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-1": { - color: "hsl(355, 65%, 65%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-5": { - color: "hsl(355, 65%, 65%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-9": { - color: "hsl(355, 65%, 65%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-2": { - color: "hsl(95, 38%, 62%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-6": { - color: "hsl(95, 38%, 62%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-10": { - color: "hsl(95, 38%, 62%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-3": { - color: "hsl(207, 82%, 66%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-7": { - color: "hsl(207, 82%, 66%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-11": { - color: "hsl(207, 82%, 66%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-4": { - color: "hsl(286, 60%, 67%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-8": { - color: "hsl(286, 60%, 67%)", - }, - ".rainbow-braces .token.token.punctuation.brace-level-12": { - color: "hsl(286, 60%, 67%)", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)": { - backgroundColor: "hsla(353, 100%, 66%, 0.15)", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)": { - backgroundColor: "hsla(353, 100%, 66%, 0.15)", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": { - backgroundColor: "hsla(353, 95%, 66%, 0.25)", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": { - backgroundColor: "hsla(353, 95%, 66%, 0.25)", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": { - backgroundColor: "hsla(353, 95%, 66%, 0.25)", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": { - backgroundColor: "hsla(353, 95%, 66%, 0.25)", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": { - backgroundColor: "hsla(353, 95%, 66%, 0.25)", - }, - "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": { - backgroundColor: "hsla(353, 95%, 66%, 0.25)", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": { - backgroundColor: "hsla(353, 95%, 66%, 0.25)", - }, - "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": { - backgroundColor: "hsla(353, 95%, 66%, 0.25)", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)": { - backgroundColor: "hsla(137, 100%, 55%, 0.15)", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)": { - backgroundColor: "hsla(137, 100%, 55%, 0.15)", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": { - backgroundColor: "hsla(135, 73%, 55%, 0.25)", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": { - backgroundColor: "hsla(135, 73%, 55%, 0.25)", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": { - backgroundColor: "hsla(135, 73%, 55%, 0.25)", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": { - backgroundColor: "hsla(135, 73%, 55%, 0.25)", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": { - backgroundColor: "hsla(135, 73%, 55%, 0.25)", - }, - "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": { - backgroundColor: "hsla(135, 73%, 55%, 0.25)", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": { - backgroundColor: "hsla(135, 73%, 55%, 0.25)", - }, - "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": { - backgroundColor: "hsla(135, 73%, 55%, 0.25)", - }, - ".prism-previewer.prism-previewer:before": { - borderColor: "hsl(224, 13%, 17%)", - }, - ".prism-previewer-gradient.prism-previewer-gradient div": { - borderColor: "hsl(224, 13%, 17%)", - borderRadius: "0.3em", - }, - ".prism-previewer-color.prism-previewer-color:before": { - borderRadius: "0.3em", - }, - ".prism-previewer-easing.prism-previewer-easing:before": { - borderRadius: "0.3em", - }, - ".prism-previewer.prism-previewer:after": { - borderTopColor: "hsl(224, 13%, 17%)", - }, - ".prism-previewer-flipped.prism-previewer-flipped.after": { - borderBottomColor: "hsl(224, 13%, 17%)", - }, - ".prism-previewer-angle.prism-previewer-angle:before": { - background: "hsl(219, 13%, 22%)", - }, - ".prism-previewer-time.prism-previewer-time:before": { - background: "hsl(219, 13%, 22%)", - }, - ".prism-previewer-easing.prism-previewer-easing": { - background: "hsl(219, 13%, 22%)", - }, - ".prism-previewer-angle.prism-previewer-angle circle": { - stroke: "hsl(220, 14%, 71%)", - strokeOpacity: "1", - }, - ".prism-previewer-time.prism-previewer-time circle": { - stroke: "hsl(220, 14%, 71%)", - strokeOpacity: "1", - }, - ".prism-previewer-easing.prism-previewer-easing circle": { - stroke: "hsl(220, 14%, 71%)", - fill: "transparent", - }, - ".prism-previewer-easing.prism-previewer-easing path": { - stroke: "hsl(220, 14%, 71%)", - }, - ".prism-previewer-easing.prism-previewer-easing line": { - stroke: "hsl(220, 14%, 71%)", - }, -} -export default theme