@fsegurai/codemirror-theme-nord/dist/index.cjs

Nord theme for the CodeMirror code editor

'use strict';

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 base04 = '#d8dee9', // grey
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 = '#252a33', highlightBackground = base03, background = base00, tooltipBackground = base01, selection = base03, selectionMatch = '#4c566a80', cursor = base04;
/**
The editor theme styles for Nord.
*/
const nordTheme = view.EditorView.theme({
    '&': {
        color: base04,
        backgroundColor: background,
    },
    '.cm-content': {
        caretColor: cursor,
    },
    '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
    '&.cm-focused > .cm-scroller > .cm-selectionLayer .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: 'transparent',
        outline: `1px solid ${base07}`,
    },
    '.cm-searchMatch.cm-searchMatch-selected': {
        backgroundColor: base04,
        color: base00,
    },
    '.cm-activeLine': { backgroundColor: selectionMatch },
    '.cm-selectionMatch': {
        backgroundColor: base05,
    },
    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
        outline: `1px solid ${base07}`,
    },
    '&.cm-focused .cm-matchingBracket': {
        backgroundColor: base06,
        color: base02,
    },
    '.cm-gutters': {
        backgroundColor: base00,
        color: base03,
        border: 'none',
    },
    '.cm-activeLineGutter': {
        backgroundColor: highlightBackground,
        color: base04,
    },
    '.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: true });
/**
The highlighting style for code in the Nord theme.
*/
const nordHighlightStyle = 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: base08,
    },
    { tag: [highlight.tags.variableName], color: base07 },
    { tag: [highlight.tags.function(highlight.tags.variableName)], color: base07 },
    { 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: base0F,
    },
    {
        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: base0F,
    },
    { tag: [highlight.tags.string], color: base0E },
    {
        tag: highlight.tags.link,
        color: base0E,
        textDecoration: 'underline',
        textUnderlinePosition: 'under',
    },
    {
        tag: [highlight.tags.url, highlight.tags.escape, highlight.tags.special(highlight.tags.string)],
        color: base07,
    },
    { tag: [highlight.tags.meta], color: base08 },
    { tag: [highlight.tags.monospace], color: base04, fontStyle: 'italic' },
    { tag: [highlight.tags.comment], color: base03, 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 Nord theme (both the editor theme and
the highlight style).
*/
const nord = [
    nordTheme,
    language.syntaxHighlighting(nordHighlightStyle),
];

exports.nord = nord;
exports.nordHighlightStyle = nordHighlightStyle;
exports.nordTheme = nordTheme;