semantic color naming
This commit is contained in:
@ -36,99 +36,104 @@ import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
|
||||
import { javascriptLanguage } from "@codemirror/lang-javascript";
|
||||
|
||||
export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => {
|
||||
const color0 = theme["color0"],
|
||||
color1 = theme["color1"],
|
||||
color2 = theme["color2"],
|
||||
color3 = theme["color3"],
|
||||
color4 = theme["color4"],
|
||||
color5 = theme["color5"],
|
||||
color6 = theme["color6"],
|
||||
color7 = theme["color7"],
|
||||
color8 = theme["color8"],
|
||||
color9 = theme["color9"],
|
||||
color10 = theme["color10"],
|
||||
color11 = theme["color11"],
|
||||
color12 = theme["color12"],
|
||||
color13 = theme["color13"],
|
||||
color14 = theme["color14"],
|
||||
color15 = theme["color15"];
|
||||
const black = theme["black"],
|
||||
red = theme["red"],
|
||||
green = theme["green"],
|
||||
yellow = theme["yellow"],
|
||||
blue = theme["blue"],
|
||||
magenta = theme["magenta"],
|
||||
cyan = theme["cyan"],
|
||||
white = theme["white"],
|
||||
brightblack = theme["brightblack"],
|
||||
brightred = theme["brightred"],
|
||||
brightgreen = theme["brightgreen"],
|
||||
brightyellow = theme["brightyellow"],
|
||||
brightblue = theme["brightblue"],
|
||||
brightmagenta = theme["brightmagenta"],
|
||||
brightcyan = theme["brightcyan"],
|
||||
brightwhite = theme["brightwhite"],
|
||||
background = theme["background"],
|
||||
selection_foreground = theme["selection_foreground"],
|
||||
cursor = theme["cursor"],
|
||||
foreground = theme["foreground"],
|
||||
selection_background = theme["selection_background"];
|
||||
const toposTheme = EditorView.theme( {
|
||||
"&": {
|
||||
color: color5,
|
||||
color: background,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: color6,
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: color6,
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: color0,
|
||||
border: `0.5px solid ${color0}`,
|
||||
backgroundColor: selection_background,
|
||||
border: `0.5px solid ${selection_background}`,
|
||||
},
|
||||
".cm-panels": {
|
||||
backgroundColor: color0,
|
||||
color: color4,
|
||||
backgroundColor: selection_background,
|
||||
color: red,
|
||||
},
|
||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${color3}`,
|
||||
outline: `1px solid ${magenta}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: color0,
|
||||
backgroundColor: red,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
// backgroundColor: highlightBackground
|
||||
backgroundColor: "rgb(76,76,106, 0.1)",
|
||||
backgroundColor: `${selection_background}`,
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: color4,
|
||||
outline: `1px solid ${color10}`,
|
||||
backgroundColor: yellow,
|
||||
outline: `1px solid ${red}`,
|
||||
},
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: color2,
|
||||
color: yellow,
|
||||
// outline: `1px solid ${base02}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: color3,
|
||||
color: yellow,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: color4,
|
||||
color: selection_background,
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: color0,
|
||||
color: color2,
|
||||
backgroundColor: foreground,
|
||||
color: white,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${color7}`,
|
||||
color: `${blue}`,
|
||||
},
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: color12,
|
||||
backgroundColor: yellow,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: color13,
|
||||
borderBottomColor: color14,
|
||||
borderTopColor: yellow,
|
||||
borderBottomColor: yellow,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: color0,
|
||||
color: color3,
|
||||
backgroundColor: blue,
|
||||
color: blue,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -136,99 +141,98 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
|
||||
);
|
||||
|
||||
let toposHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.keyword, color: color3 },
|
||||
{ tag: t.keyword, color: yellow },
|
||||
{
|
||||
tag: [t.name, t.deleted, t.character, t.macroName],
|
||||
color: color2,
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.propertyName], color: color4 },
|
||||
{ tag: [t.variableName], color: color5 },
|
||||
{ tag: [t.function(t.variableName)], color: color2 },
|
||||
{ tag: [t.labelName], color: color3 },
|
||||
{ tag: [t.propertyName], color: red },
|
||||
{ tag: [t.variableName], color: red },
|
||||
{ tag: [t.function(t.variableName)], color: blue },
|
||||
{ tag: [t.labelName], color: red },
|
||||
{
|
||||
tag: [t.color, t.constant(t.name), t.standard(t.name)],
|
||||
color: color4,
|
||||
tag: [t.color, t.constant(t.name), t.standard(t.name)], color: yellow,
|
||||
},
|
||||
{ tag: [t.definition(t.name), t.separator], color: color6 },
|
||||
{ tag: [t.brace], color: color3 },
|
||||
{ tag: [t.definition(t.name), t.separator], color: magenta },
|
||||
{ tag: [t.brace], color: magenta },
|
||||
{
|
||||
tag: [t.annotation],
|
||||
color: color10,
|
||||
color: white ,
|
||||
},
|
||||
{
|
||||
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
|
||||
color: color7,
|
||||
color: yellow ,
|
||||
},
|
||||
{
|
||||
tag: [t.typeName, t.className],
|
||||
color: color7,
|
||||
color: magenta,
|
||||
},
|
||||
{
|
||||
tag: [t.operator, t.operatorKeyword],
|
||||
color: color8,
|
||||
color: blue ,
|
||||
},
|
||||
{
|
||||
tag: [t.tagName],
|
||||
color: color7,
|
||||
color: blue,
|
||||
},
|
||||
{
|
||||
tag: [t.squareBracket],
|
||||
color: color13,
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.angleBracket],
|
||||
color: color2,
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.attributeName],
|
||||
color: color5,
|
||||
color: red,
|
||||
},
|
||||
{
|
||||
tag: [t.regexp],
|
||||
color: color4,
|
||||
color: brightgreen,
|
||||
},
|
||||
{
|
||||
tag: [t.quote],
|
||||
color: color4,
|
||||
color: green,
|
||||
},
|
||||
{ tag: [t.string], color: color14 },
|
||||
{ tag: [t.string], color: green },
|
||||
{
|
||||
tag: t.link,
|
||||
color: color4,
|
||||
color: green,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: color5,
|
||||
color: green,
|
||||
},
|
||||
{ tag: [t.meta], color: color2 },
|
||||
{ tag: [t.comment], color: color2, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: color5 },
|
||||
{ tag: t.strong, fontWeight: "bold", color: color4 },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: color10 },
|
||||
{ tag: [t.meta], color: brightblack },
|
||||
{ tag: [t.comment], color: brightblack, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: black },
|
||||
{ tag: t.strong, fontWeight: "bold", color: magenta },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: magenta },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: color5 },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: color5 },
|
||||
{ tag: t.heading, fontWeight: "bold", color: magenta },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: magenta },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: color4,
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: color4,
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: color2 },
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green},
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: color3,
|
||||
color: green,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: color3,
|
||||
color: green,
|
||||
},
|
||||
{ tag: t.invalid, color: color2, borderBottom: `1px dotted ${color3}` },
|
||||
{ tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` },
|
||||
]);
|
||||
return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user