201 lines
6.6 KiB
JavaScript
201 lines
6.6 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var view = require('@codemirror/view');
|
|
var language = require('@codemirror/language');
|
|
var highlight = require('@lezer/highlight');
|
|
|
|
// Colors from https://www.nordtheme.com/docs/colors-and-palettes
|
|
// Polar Night
|
|
const base00 = '#2e3440', // black
|
|
base01 = '#3b4252', // dark grey
|
|
base02 = '#434c5e', base03 = '#4c566a'; // grey
|
|
// Snow Storm
|
|
const base05 = '#e5e9f0', // off white
|
|
base06 = '#eceff4'; // white
|
|
// Frost
|
|
const base07 = '#8fbcbb', // moss green
|
|
base08 = '#88c0d0', // ice blue
|
|
base09 = '#81a1c1', // water blue
|
|
base0A = '#5e81ac'; // deep blue
|
|
// Aurora
|
|
const base0b = '#bf616a', // red
|
|
base0C = '#d08770', // orange
|
|
base0D = '#ebcb8b', // yellow
|
|
base0E = '#a3be8c', // green
|
|
base0F = '#b48ead'; // purple
|
|
const invalid = '#d30102', darkBackground = base06, highlightBackground = darkBackground, background = '#ffffff', tooltipBackground = base01, selection = darkBackground, cursor = base01;
|
|
/**
|
|
The editor theme styles for Basic Light.
|
|
*/
|
|
const basicLightTheme = view.EditorView.theme({
|
|
'&': {
|
|
color: base00,
|
|
backgroundColor: background
|
|
},
|
|
'.cm-content': {
|
|
caretColor: cursor
|
|
},
|
|
'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
|
|
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
|
|
'.cm-panels': { backgroundColor: darkBackground, color: base03 },
|
|
'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
|
|
'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
|
|
'.cm-searchMatch': {
|
|
backgroundColor: '#72a1ff59',
|
|
outline: `1px solid ${base03}`
|
|
},
|
|
'.cm-searchMatch.cm-searchMatch-selected': {
|
|
backgroundColor: base05
|
|
},
|
|
'.cm-activeLine': { backgroundColor: highlightBackground },
|
|
'.cm-selectionMatch': { backgroundColor: base05 },
|
|
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
|
|
outline: `1px solid ${base03}`
|
|
},
|
|
'&.cm-focused .cm-matchingBracket': {
|
|
backgroundColor: base06
|
|
},
|
|
'.cm-gutters': {
|
|
backgroundColor: base06,
|
|
color: base00,
|
|
border: 'none'
|
|
},
|
|
'.cm-activeLineGutter': {
|
|
backgroundColor: highlightBackground
|
|
},
|
|
'.cm-foldPlaceholder': {
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
color: '#ddd'
|
|
},
|
|
'.cm-tooltip': {
|
|
border: 'none',
|
|
backgroundColor: tooltipBackground
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:before': {
|
|
borderTopColor: 'transparent',
|
|
borderBottomColor: 'transparent'
|
|
},
|
|
'.cm-tooltip .cm-tooltip-arrow:after': {
|
|
borderTopColor: tooltipBackground,
|
|
borderBottomColor: tooltipBackground
|
|
},
|
|
'.cm-tooltip-autocomplete': {
|
|
'& > ul > li[aria-selected]': {
|
|
backgroundColor: highlightBackground,
|
|
color: base03
|
|
}
|
|
}
|
|
}, { dark: false });
|
|
/**
|
|
The highlighting style for code in the Basic Light theme.
|
|
*/
|
|
const basicLightHighlightStyle = language.HighlightStyle.define([
|
|
{ tag: highlight.tags.keyword, color: base0A },
|
|
{
|
|
tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName],
|
|
color: base0C
|
|
},
|
|
{ tag: [highlight.tags.variableName], color: base0C },
|
|
{ tag: [highlight.tags.function(highlight.tags.variableName)], color: base0A },
|
|
{ tag: [highlight.tags.labelName], color: base09 },
|
|
{
|
|
tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)],
|
|
color: base0A
|
|
},
|
|
{ tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: base0E },
|
|
{ tag: [highlight.tags.brace], color: base07 },
|
|
{
|
|
tag: [highlight.tags.annotation],
|
|
color: invalid
|
|
},
|
|
{
|
|
tag: [highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace],
|
|
color: base08
|
|
},
|
|
{
|
|
tag: [highlight.tags.typeName, highlight.tags.className],
|
|
color: base0D
|
|
},
|
|
{
|
|
tag: [highlight.tags.operator, highlight.tags.operatorKeyword],
|
|
color: base0E
|
|
},
|
|
{
|
|
tag: [highlight.tags.tagName],
|
|
color: base0F
|
|
},
|
|
{
|
|
tag: [highlight.tags.squareBracket],
|
|
color: base0b
|
|
},
|
|
{
|
|
tag: [highlight.tags.angleBracket],
|
|
color: base0C
|
|
},
|
|
{
|
|
tag: [highlight.tags.attributeName],
|
|
color: base0D
|
|
},
|
|
{
|
|
tag: [highlight.tags.regexp],
|
|
color: base0A
|
|
},
|
|
{
|
|
tag: [highlight.tags.quote],
|
|
color: base01
|
|
},
|
|
{ tag: [highlight.tags.string], color: base0C },
|
|
{
|
|
tag: highlight.tags.link,
|
|
color: base07,
|
|
textDecoration: 'underline',
|
|
textUnderlinePosition: 'under'
|
|
},
|
|
{
|
|
tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)],
|
|
color: base0C
|
|
},
|
|
{ tag: [highlight.tags.meta], color: base08 },
|
|
{ tag: [highlight.tags.comment], color: base02, fontStyle: 'italic' },
|
|
{ tag: highlight.tags.strong, fontWeight: 'bold', color: base0A },
|
|
{ tag: highlight.tags.emphasis, fontStyle: 'italic', color: base0A },
|
|
{ tag: highlight.tags.strikethrough, textDecoration: 'line-through' },
|
|
{ tag: highlight.tags.heading, fontWeight: 'bold', color: base0A },
|
|
{ tag: highlight.tags.special(highlight.tags.heading1), fontWeight: 'bold', color: base0A },
|
|
{ tag: highlight.tags.heading1, fontWeight: 'bold', color: base0A },
|
|
{
|
|
tag: [highlight.tags.heading2, highlight.tags.heading3, highlight.tags.heading4],
|
|
fontWeight: 'bold',
|
|
color: base0A
|
|
},
|
|
{
|
|
tag: [highlight.tags.heading5, highlight.tags.heading6],
|
|
color: base0A
|
|
},
|
|
{ tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base0C },
|
|
{
|
|
tag: [highlight.tags.processingInstruction, highlight.tags.inserted],
|
|
color: base07
|
|
},
|
|
{
|
|
tag: [highlight.tags.contentSeparator],
|
|
color: base0D
|
|
},
|
|
{ tag: highlight.tags.invalid, color: base02, borderBottom: `1px dotted ${invalid}` }
|
|
]);
|
|
/**
|
|
Extension to enable the Basic Light theme (both the editor theme and
|
|
the highlight style).
|
|
*/
|
|
const basicLight = [
|
|
basicLightTheme,
|
|
language.syntaxHighlighting(basicLightHighlightStyle)
|
|
];
|
|
|
|
exports.basicLight = basicLight;
|
|
exports.basicLightHighlightStyle = basicLightHighlightStyle;
|
|
exports.basicLightTheme = basicLightTheme;
|