From c11ab41d01c656fd2c0fbcb70b0ee38b7307ae78 Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Sun, 21 Jul 2024 12:04:18 -0400 Subject: [PATCH] Add theme based syntax highlighting for code blocks --- src/providers/SidebarProvider.ts | 16 +- src/shared/ExtensionMessage.ts | 46 +- webview-ui/src/App.tsx | 4 +- webview-ui/src/components/ChatRow.tsx | 54 +- webview-ui/src/components/ChatView.tsx | 17 +- .../components/{ => CodeBlock}/CodeBlock.tsx | 29 +- .../getSyntaxHighlighterStyleFromTheme.ts | 89 +++ .../utilities/vscode-themes/github-dark.ts | 503 +++++++++++++++++ .../utilities/vscode-themes/github-light.ts | 506 ++++++++++++++++++ .../src/utilities/vscode-themes/index.ts | 2 + .../vscode-themes/one-dark-example.ts | 503 +++++++++++++++++ 11 files changed, 1725 insertions(+), 44 deletions(-) rename webview-ui/src/components/{ => CodeBlock}/CodeBlock.tsx (86%) create mode 100644 webview-ui/src/utilities/getSyntaxHighlighterStyleFromTheme.ts create mode 100644 webview-ui/src/utilities/vscode-themes/github-dark.ts create mode 100644 webview-ui/src/utilities/vscode-themes/github-light.ts create mode 100644 webview-ui/src/utilities/vscode-themes/index.ts create mode 100644 webview-ui/src/utilities/vscode-themes/one-dark-example.ts diff --git a/src/providers/SidebarProvider.ts b/src/providers/SidebarProvider.ts index b154a97..baa666f 100644 --- a/src/providers/SidebarProvider.ts +++ b/src/providers/SidebarProvider.ts @@ -52,6 +52,14 @@ export class SidebarProvider implements vscode.WebviewViewProvider { } }) + // Listen for when color changes + vscode.workspace.onDidChangeConfiguration((e) => { + if (e.affectsConfiguration("workbench.colorTheme")) { + // Sends latest theme name to webview + this.postStateToWebview() + } + }) + // if the extension is starting a new session, clear previous task state this.clearTask() } @@ -215,7 +223,13 @@ export class SidebarProvider implements vscode.WebviewViewProvider { ]) this.postMessageToWebview({ type: "state", - state: { didOpenOnce: !!didOpenOnce, apiKey, maxRequestsPerTask, claudeMessages }, + state: { + didOpenOnce: !!didOpenOnce, + apiKey, + maxRequestsPerTask, + themeName: vscode.workspace.getConfiguration("workbench").get("colorTheme"), + claudeMessages, + }, }) } diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts index d26ad44..0ecdddc 100644 --- a/src/shared/ExtensionMessage.ts +++ b/src/shared/ExtensionMessage.ts @@ -2,26 +2,42 @@ // webview will hold state export interface ExtensionMessage { - type: "action" | "state" - text?: string - action?: "plusButtonTapped" | "settingsButtonTapped" | "didBecomeVisible" - state?: { didOpenOnce: boolean, apiKey?: string, maxRequestsPerTask?: number, claudeMessages: ClaudeMessage[] } + type: "action" | "state" + text?: string + action?: "plusButtonTapped" | "settingsButtonTapped" | "didBecomeVisible" + state?: ExtensionState +} + +export interface ExtensionState { + didOpenOnce: boolean + apiKey?: string + maxRequestsPerTask?: number + themeName?: string + claudeMessages: ClaudeMessage[] } export interface ClaudeMessage { - ts: number - type: "ask" | "say" - ask?: ClaudeAsk - say?: ClaudeSay - text?: string + ts: number + type: "ask" | "say" + ask?: ClaudeAsk + say?: ClaudeSay + text?: string } export type ClaudeAsk = "request_limit_reached" | "followup" | "command" | "completion_result" | "tool" -export type ClaudeSay = "task" | "error" | "api_req_started" | "api_req_finished" | "text" | "command_output" | "completion_result" | "user_feedback" +export type ClaudeSay = + | "task" + | "error" + | "api_req_started" + | "api_req_finished" + | "text" + | "command_output" + | "completion_result" + | "user_feedback" export interface ClaudeSayTool { - tool: "editedExistingFile" | "newFileCreated" | "readFile" | "listFiles" - path?: string - diff?: string - content?: string -} \ No newline at end of file + tool: "editedExistingFile" | "newFileCreated" | "readFile" | "listFiles" + path?: string + diff?: string + content?: string +} diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index 75f89a6..1ff8f92 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -21,6 +21,7 @@ const App: React.FC = () => { const [showWelcome, setShowWelcome] = useState(false) const [apiKey, setApiKey] = useState("") const [maxRequestsPerTask, setMaxRequestsPerTask] = useState("") + const [vscodeThemeName, setVscodeThemeName] = useState(undefined) const [claudeMessages, setClaudeMessages] = useState([]) useEffect(() => { @@ -39,6 +40,7 @@ const App: React.FC = () => { ? message.state!.maxRequestsPerTask.toString() : "" ) + setVscodeThemeName(message.state!.themeName) setClaudeMessages(message.state!.claudeMessages) break case "action": @@ -77,7 +79,7 @@ const App: React.FC = () => { /> )} {/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */} - + )} diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx index 0301350..2730394 100644 --- a/webview-ui/src/components/ChatRow.tsx +++ b/webview-ui/src/components/ChatRow.tsx @@ -1,16 +1,16 @@ +import { ClaudeAsk, ClaudeMessage, ClaudeSay, ClaudeSayTool } from "@shared/ExtensionMessage" +import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react" import React, { useState } from "react" -import { ClaudeMessage, ClaudeAsk, ClaudeSay, ClaudeSayTool } from "@shared/ExtensionMessage" -import { VSCodeButton, VSCodeProgressRing, VSCodeBadge } from "@vscode/webview-ui-toolkit/react" import { COMMAND_OUTPUT_STRING } from "../utilities/combineCommandSequences" -import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" -import { dark } from "react-syntax-highlighter/dist/esm/styles/prism" -import CodeBlock from "./CodeBlock" +import { SyntaxHighlighterStyle } from "../utilities/getSyntaxHighlighterStyleFromTheme" +import CodeBlock from "./CodeBlock/CodeBlock" interface ChatRowProps { message: ClaudeMessage + syntaxHighlighterStyle: SyntaxHighlighterStyle } -const ChatRow: React.FC = ({ message }) => { +const ChatRow: React.FC = ({ message, syntaxHighlighterStyle }) => { const [isExpanded, setIsExpanded] = useState(false) const cost = message.text != null && message.say === "api_req_started" ? JSON.parse(message.text).cost : undefined @@ -126,7 +126,7 @@ const ChatRow: React.FC = ({ message }) => { borderRadius: "3px", padding: "8px", whiteSpace: "pre-line", - wordWrap: "break-word" + wordWrap: "break-word", }}> {message.text} @@ -188,7 +188,11 @@ const ChatRow: React.FC = ({ message }) => { {toolIcon("edit")} Claude wants to edit this file: - + ) case "newFileCreated": @@ -200,7 +204,11 @@ const ChatRow: React.FC = ({ message }) => { Claude wants to create a new file: - + ) case "readFile": @@ -210,7 +218,11 @@ const ChatRow: React.FC = ({ message }) => { {toolIcon("file-code")} Claude wants to read this file: - + ) case "listFiles": @@ -222,7 +234,12 @@ const ChatRow: React.FC = ({ message }) => { Claude wants to view this directory: - + ) } @@ -260,7 +277,11 @@ const ChatRow: React.FC = ({ message }) => {
- +
{output && ( @@ -268,7 +289,11 @@ const ChatRow: React.FC = ({ message }) => {

{COMMAND_OUTPUT_STRING}

- + )}
@@ -318,7 +343,7 @@ const ChatRow: React.FC = ({ message }) => { return (
{renderContent()} {isExpanded && message.say === "api_req_started" && ( @@ -326,6 +351,7 @@ const ChatRow: React.FC = ({ message }) => {
)} diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx index 345f557..4d8eda3 100644 --- a/webview-ui/src/components/ChatView.tsx +++ b/webview-ui/src/components/ChatView.tsx @@ -9,13 +9,16 @@ import { getApiMetrics } from "../utilities/getApiMetrics" import { vscode } from "../utilities/vscode" import ChatRow from "./ChatRow" import TaskHeader from "./TaskHeader" +import { getSyntaxHighlighterStyleFromTheme } from "../utilities/getSyntaxHighlighterStyleFromTheme" +import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus" interface ChatViewProps { messages: ClaudeMessage[] isHidden: boolean + vscodeThemeName?: string } // maybe instead of storing state in App, just make chatview always show so dont conditionally load/unload? need to make sure messages are persisted (i remember seeing something about how webviews can be frozen in docs) -const ChatView = ({ messages, isHidden }: ChatViewProps) => { +const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => { //const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : 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) const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages]) @@ -34,6 +37,16 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => { const [primaryButtonText, setPrimaryButtonText] = useState(undefined) const [secondaryButtonText, setSecondaryButtonText] = useState(undefined) + const [syntaxHighlighterStyle, setSyntaxHighlighterStyle] = useState(vsDarkPlus) + + useEffect(() => { + if (!vscodeThemeName) return + const theme = getSyntaxHighlighterStyleFromTheme(vscodeThemeName) + if (theme) { + setSyntaxHighlighterStyle(theme) + } + }, [vscodeThemeName]) + const scrollToBottom = (instant: boolean = false) => { const options = { containerId: "chat-view-container", @@ -320,7 +333,7 @@ const ChatView = ({ messages, isHidden }: ChatViewProps) => { overflowY: "auto", }}> {modifiedMessages.map((message, index) => ( - + ))}
{ +const CodeBlock = ({ code, diff, language, path, syntaxHighlighterStyle }: CodeBlockProps) => { const [isExpanded, setIsExpanded] = useState(false) - const backgroundColor = oneDark['pre[class*="language-"]'].background as string - /* We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work. @@ -83,13 +83,11 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => { [path, language, code] ) - console.log(inferredLanguage) - return (
{path && ( @@ -132,7 +130,16 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => { + 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/utilities/vscode-themes/github-dark.ts b/webview-ui/src/utilities/vscode-themes/github-dark.ts new file mode 100644 index 0000000..bdaf93e --- /dev/null +++ b/webview-ui/src/utilities/vscode-themes/github-dark.ts @@ -0,0 +1,503 @@ +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/utilities/vscode-themes/github-light.ts b/webview-ui/src/utilities/vscode-themes/github-light.ts new file mode 100644 index 0000000..a14ef7d --- /dev/null +++ b/webview-ui/src/utilities/vscode-themes/github-light.ts @@ -0,0 +1,506 @@ +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/utilities/vscode-themes/index.ts b/webview-ui/src/utilities/vscode-themes/index.ts new file mode 100644 index 0000000..4ba7417 --- /dev/null +++ b/webview-ui/src/utilities/vscode-themes/index.ts @@ -0,0 +1,2 @@ +export { default as githubLight } from "./github-light" +export { default as githubDark } from "./github-dark" diff --git a/webview-ui/src/utilities/vscode-themes/one-dark-example.ts b/webview-ui/src/utilities/vscode-themes/one-dark-example.ts new file mode 100644 index 0000000..a39b3e9 --- /dev/null +++ b/webview-ui/src/utilities/vscode-themes/one-dark-example.ts @@ -0,0 +1,503 @@ +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