MediaWiki:Vector-darkmode.less/darksyntax.less

/* ==========================

	Extension:CodeMirror syntax highlighting

	Classes explained here:
	<https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting>
	Colors based on the One Dark syntax theme:
	<https://github.com/atom/atom/tree/master/packages/one-dark-syntax>

   ========================== */

/* --------------------------
            COLORS
   -------------------------- */

// define the following commented vars in the file that is importing /darksyntax.less
//@codemirror-background: ;
//@codemirror-text-color: ;
//@codemirror-selection-color: ;
//@codemirror-bracket-matcher-background: ;
@codemirror-red:     #df6c75;
@codemirror-orange:  #ca9564;
@codemirror-yellow:  #e5c07b;
@codemirror-green:   #98c379;
@codemirror-cyan:    #56b6c2;
@codemirror-blue:    #61afef;
@codemirror-purple:  #c678dd;

.codemirror-lighten(@codemirror-color) {
	color: desaturate( lighten( @codemirror-color, 7% ), 5% );
}

.codemirror-darken(@codemirror-color) {
	color: saturate( darken( @codemirror-color, 7% ), 5% );
}

/* --------------------------
            EDITOR
   -------------------------- */

.CodeMirror {
	background: @codemirror-background;
	caret-color: @codemirror-blue; // cursor color

	// text color
	pre {
		color: @codemirror-text-color;
	}

}

// for visedit source editor - need to reapply because of wgl-darkmode specificity
.ve-init-mw-desktopArticleTarget .CodeMirror {
	background: transparent;
}

// cursor color (again??)
.CodeMirror-cursor {
	border-left-color: @codemirror-blue;
}

/* --------------------------
            HEADINGS
   -------------------------- */

pre.cm-mw-section- {

	&1,
	&2,
	&3,
	&4,
	&5,
	&6 {
		color: @white;
	}

	&1 {
		font-size: 1.7em;
	}

	&2 {
		font-size: 1.35em;
	}

	&3 {
		font-size: 1.1em;
	}

}

// equals signs
.cm-mw-section-header {
	.codemirror-darken( @codemirror-green );
}

/* --------------------------
          PUNCTUATION
   -------------------------- */

.cm-mw-apostrophes-bold,
.cm-mw-apostrophes-italic,
.cm-mw-doubleUnderscore,
.cm-mw-indenting,
.cm-mw-signature,
.cm-mw-hr,
.cm-mw-list {
	.codemirror-darken( @codemirror-blue );
}

.cm-mw-doubleUnderscore,
.cm-mw-indenting,
.cm-mw-signature,
.cm-mw-hr,
.cm-mw-list {
	background: fade( @codemirror-blue, 10% );
}

.cm-mw-skipformatting {
	background: fade( @codemirror-blue, 50% );
}

.cm-mw-mnemonic {
	color: @codemirror-green;
}

.cm-mw-comment {
	color: @codemirror-text-color;
	opacity: .7;
}

/* --------------------------
             LINKS
   -------------------------- */

.cm-mw-link-pagename,
.cm-mw-link,
.cm-mw-extlink,
.cm-mw-free-extlink {
	color: @codemirror-blue;
}

.cm-mw-link-tosection,
.cm-mw-extlink-protocol,
.cm-mw-free-extlink-protocol {
	.codemirror-lighten( @codemirror-blue );
}

.cm-mw-link-bracket,
.cm-mw-link-delimiter,
.cm-mw-extlink-bracket {
	.codemirror-darken( @codemirror-blue );
}

/* --------------------------
           TEMPLATES
   -------------------------- */

.cm-mw-template-bracket,
.cm-mw-template-delimiter {
	.codemirror-darken( @codemirror-orange );
}

.cm-mw-template-name,
.cm-mw-template-argument-name {
	color: @codemirror-orange;
}

.cm-mw-template {
	.codemirror-lighten( @codemirror-orange );
}

/* --------------------------
            TABLES
   -------------------------- */

.cm-mw-table-bracket,
.cm-mw-table-delimiter {
	.codemirror-darken( @codemirror-cyan );
}

.cm-mw-table-definition {
	color: @codemirror-cyan;
}

/* --------------------------
           VARIABLES
   -------------------------- */

.cm-mw-templatevariable-bracket,
.cm-mw-templatevariable-delimiter {
	.codemirror-darken( @codemirror-purple );
}

.cm-mw-templatevariable-name,
.cm-mw-templatevariable {
	color: @codemirror-purple;
}

/* --------------------------
        PARSER FUNCTIONS
   -------------------------- */

.cm-mw-parserfunction-bracket {
	.codemirror-darken( @codemirror-red );
}

.cm-mw-parserfunction-name,
.cm-mw-parserfunction-delimiter {
	color: @codemirror-red;
}

/* --------------------------
         TEXT SELECTION
   -------------------------- */

// selected text
.CodeMirror-selected {
	background-color: fade( @codemirror-selection-color, 10% );

	.CodeMirror-focused & {
		background-color: fade( @codemirror-selection-color, 20% );
	}

}

// don't combine these two groups
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
	background: fade( @codemirror-selection-color, 20% );
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
	background: fade( @codemirror-selection-color, 20% );
}

/* --------------------------
           HTML TAGS
   -------------------------- */

.cm-mw-htmltag-bracket,
.cm-mw-exttag-bracket {
	.codemirror-darken( @codemirror-green );
}

.cm-mw-htmltag-name,
.cm-mw-htmltag-attribute,
.cm-mw-exttag-name,
.cm-mw-exttag-attribute {
	color: @codemirror-green;
}

pre.cm-mw-exttag {
	background: fade( @white, 5% );
}

/* --------------------------
        BRACKET MATCHING
   -------------------------- */

.cm-mw-matchingbracket {
	background-color: @codemirror-bracket-matcher-background;
	box-shadow: inset 0 0 1px 0 @codemirror-blue; // original is 0 0 1px 1px, no spread so it wont eat the cursor
}