@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
161 lines (160 loc) • 4.35 kB
JavaScript
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { EditorView } from "@codemirror/view";
import { tags } from "@lezer/highlight";
const createTheme = ({
theme,
settings,
styles
}) => {
const themeOptions = {
"&": {
backgroundColor: settings.background,
backgroundClip: "padding-box",
color: settings.foreground
},
".cm-gutters": {
borderRight: "none"
},
"&.cm-editor.cm-focused": {
outline: "none"
},
"&.cm-editor .cm-scroller": {
fontSize: "14px"
},
".cm-tooltip": {
fontSize: "14px"
}
};
if (settings.fontFamily) {
themeOptions["&.cm-editor .cm-scroller"]["fontFamily"] = settings.fontFamily;
}
if (settings.gutterBackground) {
themeOptions[".cm-gutters"].backgroundColor = settings.gutterBackground;
}
if (settings.gutterForeground) {
themeOptions[".cm-gutters"].color = settings.gutterForeground;
}
if (settings.caret) {
themeOptions[".cm-content"] = {
caretColor: settings.caret
};
themeOptions[".cm-cursor, .cm-dropCursor"] = {
borderLeftColor: settings.caret
};
}
const activeLineGutterStyle = {};
if (settings.gutterActiveForeground) {
activeLineGutterStyle.color = settings.gutterActiveForeground;
}
if (settings.lineHighlight) {
themeOptions[".cm-activeLine"] = {
backgroundColor: settings.lineHighlight
};
activeLineGutterStyle.backgroundColor = settings.lineHighlight;
}
themeOptions[".cm-activeLineGutter"] = activeLineGutterStyle;
if (settings.selection) {
themeOptions["&.cm-focused .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection"] = {
backgroundColor: settings.selection
};
}
if (settings.selectionMatch) {
themeOptions["& .cm-selectionMatch"] = {
backgroundColor: settings.selectionMatch
};
}
const themeExtension = EditorView.theme(themeOptions, {
dark: theme === "dark"
});
const highlightStyle = HighlightStyle.define(styles);
const extension = [themeExtension, syntaxHighlighting(highlightStyle)];
return extension;
};
const github = createTheme({
theme: "light",
settings: {
background: "#fff",
foreground: "#24292e",
selection: "#BBDFFF",
selectionMatch: "#BBDFFF",
gutterBackground: "#fff",
gutterForeground: "#6e7781",
fontFamily: "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace"
},
styles: [{
tag: [tags.comment, tags.bracket],
color: "#6a737d"
}, {
tag: [tags.className, tags.propertyName],
color: "#6f42c1"
}, {
tag: [tags.variableName, tags.attributeName, tags.number, tags.operator],
color: "#005cc5"
}, {
tag: [tags.keyword, tags.typeName, tags.typeOperator, tags.typeName],
color: "#d73a49"
}, {
tag: [tags.string, tags.meta, tags.regexp],
color: "#032f62"
}, {
tag: [tags.name, tags.quote],
color: "#22863a"
}, {
tag: [tags.heading],
color: "#24292e",
fontWeight: "bold"
}, {
tag: [tags.emphasis],
color: "#24292e",
fontStyle: "italic"
}, {
tag: [tags.deleted],
color: "#b31d28",
backgroundColor: "ffeef0"
}]
});
const dracula = createTheme({
theme: "dark",
settings: {
background: "#282a36",
foreground: "#f8f8f2",
caret: "#f8f8f0",
selection: "rgba(255, 255, 255, 0.1)",
selectionMatch: "rgba(255, 255, 255, 0.2)",
gutterBackground: "#282a36",
gutterForeground: "#6D8A88",
lineHighlight: "rgba(255, 255, 255, 0.1)",
fontFamily: "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace"
},
styles: [{
tag: tags.comment,
color: "#6272a4"
}, {
tag: tags.string,
color: "#f1fa8c"
}, {
tag: tags.atom,
color: "#bd93f9"
}, {
tag: tags.meta,
color: "#f8f8f2"
}, {
tag: [tags.keyword, tags.operator, tags.tagName],
color: "#ff79c6"
}, {
tag: [tags.function(tags.propertyName), tags.propertyName],
color: "#66d9ef"
}, {
tag: [tags.definition(tags.variableName), tags.function(tags.variableName), tags.className, tags.attributeName],
color: "#50fa7b"
}, {
tag: tags.atom,
color: "#bd93f9"
}]
});
export {
createTheme,
dracula,
github
};
//# sourceMappingURL=themes.js.map