mediawiki-skins-Citizen/skinStyles/extensions/CodeMirror/ext.CodeMirror.lib.less

/*
 * Citizen
 *
 * SkinStyles for Extension:CodeMirror
 * Module: ext.CodeMirror.lib
 * Version: REL1_35 a326407
 *
 * Date: 2021-08-25
*/

.CodeMirror {
	/*
	 * Based on Material Theme Lighter
	 * https://material-theme.site
	 *
	 * NOTE: Maybe this should be made into shared styles so
	 * that SyntaxHighlight can use it.
	*/
	--color-codemirror-red: #e53935;
	--color-codemirror-orange: #f76d47;
	--color-codemirror-yellow: #e2931d;
	--color-codemirror-green: #91b859;
	--color-codemirror-cyan: #39adb5;
	--color-codemirror-blue: #6182b8;
	--color-codemirror-paleblue: #8796b0;
	--color-codemirror-purple: #9c3eda;
	--color-codemirror-brown: #916b53;
	--color-codemirror-pink: #ff5370;
	--color-codemirror-violet: #945eb8;
	--color-codemirror-grey: #90a4ae;
	background-color: var( --color-surface-1 );
	color: var( --color-base );

	&-scrollbar,
	&-gutter {
		&-filler {
			background-color: var( --color-surface-1 );
		}
	}
	/* Gutter */
	&-gutters {
		border-color: var( --border-color-base );
		background-color: var( --color-surface-2 );
	}

	&-linenumber {
		color: var( --color-base--subtle );
	}

	&-guttermarker {
		color: var( --color-base );

		&-subtle {
			color: var( --color-base--subtle );
		}
	}

	&-cursor {
		border-left-color: var( --color-base--emphasized );
	}

	div.CodeMirror-secondarycursor {
		border-left-color: var( --color-base );
	}

	&-ruler {
		border-left-color: var( --border-color-base );
	}
}

// Default theme
.cm {
	&-s-default {
		.cm {
			&-header {
				color: var( --color-codemirror-blue );
			}

			&-quote {
				color: var( --color-codemirror-green );
			}

			&-keyword {
				color: var( --color-codemirror-purple );
			}

			&-atom {
				color: var( --color-codemirror-pink );
			}

			&-number {
				color: var( --color-codemirror-orange );
			}

			&-def {
				color: var( --color-codemirror-blue );
			}

			&-variable {
				color: var( --color-codemirror-red );
			}

			&-variable-2 {
				color: var( --color-base );
			}

			&-variable-3,
			&-type {
				color: var( --color-codemirror-yellow );
			}

			&-comment {
				color: var( --color-codemirror-gray );
			}

			&-string {
				color: var( --color-codemirror-green );
			}

			&-string-2 {
				color: var( --color-codemirror-red );
			}

			&-meta {
				color: var( --color-codemirror-yellow );
			}

			&-qualifier {
				color: var( --color-codemirror-yellow );
			}

			&-builtin {
				color: var( --color-codemirror-yellow );
			}

			&-bracket {
				color: var( --color-codemirror-grey );
			}

			&-tag {
				color: var( --color-codemirror-pink );
			}

			&-attribute {
				color: var( --color-codemirror-purple );
			}

			&-hr {
				color: var( --color-codemirror-blue );
			}

			&-link {
				color: var( --color-codemirror-blue );
			}

			&-error {
				color: var( --color-destructive );
			}

			&-property {
				color: var( --color-codemirror-purple );
			}

			&-operator {
				color: var( --color-codemirror-cyan );
			}

			&-punctuation {
				color: var( --color-codemirror-cyan );
			}
		}

		&-negative {
			color: var( --color-destructive );
		}

		&-positive {
			color: var( --color-success );
		}

		&-invalidchar {
			color: var( --color-destructive );
		}
	}

	&-composing {
		border-bottom-color: var( --border-color-base );
	}

	&-selected {
		background: var( --background-color-primary--hover );
	}

	&-focused .CodeMirror-selected {
		background: var( --background-color-primary--active );
	}

	&-line {
		&::selection,
		> span::selection,
		> span > span::selection {
			background: var( --background-color-primary--active );
		}
	}
}

div.CodeMirror {
	span.CodeMirror {
		&-matchingbracket {
			color: var( --color-success );
		}

		&-nonmatchingbracket {
			color: var( --color-destructive );
		}
	}
}

.skin-citizen-dark .CodeMirror {
	--color-codemirror-red: #f07178;
	--color-codemirror-orange: #f78c6c;
	--color-codemirror-yellow: #ffcb6b;
	--color-codemirror-green: #c3e88d;
	--color-codemirror-cyan: #89ddff;
	--color-codemirror-blue: #82aaff;
	--color-codemirror-paleblue: #b2ccd6;
	--color-codemirror-purple: #c792ea;
	--color-codemirror-brown: #916b53;
	--color-codemirror-pink: #ff9cac;
	--color-codemirror-violet: #bb80b3;
}