Replace react-syntax-highlighter with rehype-highlight to reduce memory footprint when scrolling code blocks

This commit is contained in:
Saoud Rizwan
2024-09-06 21:06:36 -04:00
parent 428d3c39b5
commit ea14481771
26 changed files with 3920 additions and 2051 deletions

View File

@@ -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 dont 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]
}
}
}

View File

@@ -0,0 +1,156 @@
const hljsToTextMate: Record<string, string[]> = {
".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<string, string> {
const rules = tmTheme["rules"] || []
const tokenToForeground: Record<string, string> = {}
rules.forEach(({ token, foreground }) => {
if (!foreground || !token) {
return
}
tokenToForeground[token] = foreground
})
const theme: Record<string, string> = {}
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 }
}

View File

@@ -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

View File

@@ -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

View File

@@ -1,2 +0,0 @@
export { default as githubLight } from "./github-light"
export { default as githubDark } from "./github-dark"

View File

@@ -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