darkbrewery

client/components/codeEditor/codeEditor.jsx

@@ -25,8 +25,9 @@ import { searchKeymap, search } from '@codemirror/search';
 
 import * as themesImport from '@uiw/codemirror-themes-all';
 import defaultCM5Theme from '@themes/codeMirror/customThemes/default.js';
+import darkbrewery from '../../../themes/codeMirror/customThemes/darkbrewery.js';
 
-const themes = { default: defaultCM5Theme, ...themesImport };
+const themes = { default: defaultCM5Theme, darkbrewery, ...themesImport };
 const themeCompartment = new Compartment();
 const highlightCompartment = new Compartment();
 

client/components/codeEditor/codeEditor.less

@@ -15,7 +15,7 @@
 	}
 }
 
-.codeEditor {
+:where(.codeEditor) {
 	font-family: monospace;
 	height: 100%;
 	width:100%;

client/homebrew/editor/editor.less

@@ -1,13 +1,13 @@
 @import '@sharedStyles/core.less';
 @import '@themes/codeMirror/customEditorStyles.less';
 
-.editor {
+:where(.editor) {
 	position   : relative;
 	width      : 100%;
 	height     : 100%;
 	container  : editor / inline-size;
 	background : white;
-	.codeEditor {
+	:where(.codeEditor) {
 		height            : calc(100% - 25px);
 		.cm-editor { height : 100%;
 			outline:none !important;
@@ -17,7 +17,7 @@
 			border-top : #333399 solid 1px;
 		}
 
-		&.brewText .cm-pageLine {
+		:where(&.brewText) .cm-pageLine {
 			background : #33333328;
 			border-top : #333399 solid 1px;
 		}
@@ -30,7 +30,7 @@
 			}
 		}
 
-		&.brewText,  &.brewSnippets {
+		&:where(.brewText),  &.brewSnippets {
 
 
 			.cm-tooltip-autocomplete {

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -26,8 +26,9 @@ const ThemeSnippets = {
 //import EditorThemes from '../../../../build/homebrew/codeMirror/editorThemes.json';
 import * as themesImport from '@uiw/codemirror-themes-all';
 import defaultCM5Theme from '@themes/codeMirror/customThemes/default.js';
+import darkbrewery from '../../../../themes/codeMirror/customThemes/darkbrewery.js';
 
-const themes = { default: defaultCM5Theme, ...themesImport };
+const themes = { default: defaultCM5Theme, darkbrewery, ...themesImport };
 
 const EditorThemes = Object.entries(themes)
   .filter(([name, value]) =>

themes/codeMirror/customThemes/darkbrewery.css

@@ -1,134 +0,0 @@
-/*stylelint-disable*/
-.editor .snippetBar {
-	color: white;
-	background-color: #2F393C;
-	.dropdown {
-		background-color: #2F393C;
-	}
-	.editors {
-		border-color: #ccc;
-	}
-}
-/* Main BG color and normal text color */
-.CodeMirror {
-	--bg: #293134;
-	--highlight: #bcbcbc;
-	color: #91A6AA;
-	background: var(--bg);
-	.cm-scroller {
-		.cm-gutters {
-			border-right: 1px solid #555;
-			background: var(--bg);
-			.cm-gutter {
-				background-color: var(--bg);
-				&.CodeMirror-foldgutter {
-					cursor: pointer;
-					border-left: 1px solid #555;
-					transition: background 0.1s;
-					&:hover {
-						background: #555;
-					}
-				}
-			}
-		}
-		.cm-content {
-			/* Line numbers*/
-			.CodeMirror-linenumber.cm-gutter-elt {
-				background-color: var(--bg);
-				color: #81969A;
-			}
-			/* Blinking cursor */
-			.CodeMirror-cursor {
-				border-left: 1px solid #E0E2E4;
-			}
-			.pageLine {
-				color: #000000;
-				background: #000000;
-				border-bottom: 1px solid #FFFFFF;
-			}
-			.CodeMirror-code .CodeMirror-line {
-				&.columnSplit {
-					font-style: italic;
-					color: inherit;
-					background-color: #1F5763;
-					border-bottom: #229999 solid 1px;
-				}
-				/*syntax*/
-				.cm-header {
-					font-weight: bold;
-					color: #C51B1B;
-					-webkit-text-stroke-width: 0.1px;
-					-webkit-text-stroke-color: #000000;
-				}
-				.cm-strong {
-					color: #309DD2;
-				}
-				.cm-em {
-					/*italics*/
-				}
-				.cm-link {
-					color: #DD6300;
-				}
-				.cm-string {
-					color: #AA8261;
-				}
-				/* @import */
-				.cm-def {
-					color: #2986CC;
-				}
-				/* Bullets and such */
-				.cm-variable-2 {
-					color: #3CBF30;
-				}
-				.block:not(.cm-comment) {
-					color: #E3E3E3;
-				}
-				.inline-block {
-					color: #E3E3E3;
-				}
-				.cm-tag {
-					color: #E3FF00;
-				}
-				.cm-attribute {
-					color: #E3FF00;
-				}
-				.cm-atom {
-					color: #c1939a;
-				}
-				.cm-number {
-					color: #2986CC;
-				}
-				.cm-property:not(.cm-error) ~ .cm-variable {
-					color:#9e1f9e;
-				}
-				.cm-qualifier {
-					color: #EE1919;
-				}
-				.cm-comment {
-					color: #BBC700;
-				}
-				.cm-keyword {
-					color: white;
-				}
-				.cm-error {
-					color: #C50202;
-				}
-				.CodeMirror-foldmarker {
-					color: #F0FF00;
-				}
-				.cm-builtin {
-					color: #FFFFFF;
-				}
-				.dt-highlight {
-					background: #ffffff14;
-				}
-				.dl-colon-highlight {
-					background: #ccc;
-				}
-				.dl-highlight.dd-highlight {
-					color: #b5858d;
-				}
-			}
-		}
-	}
-}

themes/codeMirror/customThemes/darkbrewery.js

@@ -0,0 +1,114 @@
+import { EditorView } from '@codemirror/view';
+
+
+export default EditorView.theme({
+	'&' : {
+		backgroundColor : '#293134',
+		color           : '#91a6aa',
+	},
+	'.cm-content' : {
+		padding    : '4px 0',
+		fontFamily : 'monospace',
+		fontSize   : '13px',
+		lineHeight : '1',
+	},
+	'.cm-line' : {
+		padding : '0 4px',
+	},
+	'.cm-gutters' : {
+		borderRight     : '1px solid #555',
+		backgroundColor : '#293134',
+		whiteSpace      : 'nowrap',
+	},
+    '.cm-foldGutter' : {
+		borderLeft    : '1px solid #555',
+		backgroundColor : '#293134',
+	},
+    '.cm-foldGutter:hover' : {
+        backgroundColor : '#555',
+	},
+    '.cm-gutterElement' : {
+        color: '#81969a',
+	},
+	'.cm-linenumber' : {
+		padding    : '0 3px 0 5px',
+		minWidth   : '20px',
+		textAlign  : 'right',
+		color      : '#999',
+		whiteSpace : 'nowrap',
+	},
+	'.cm-cursor' : {
+		borderLeft : '1px solid #E0E2E4',
+	},
+	'.cm-fat-cursor' : {
+		width           : 'auto',
+		backgroundColor : '#7e7',
+		caretColor      : 'transparent',
+	},
+	'.cm-activeLine' : {
+		backgroundColor : '#868c9323',
+	},
+    '.cm-gutterElement.cm-activeLineGutter' : {
+		backgroundColor : '#868c9323',
+	},
+    '.cm-activeLine' : {
+		backgroundColor : '#868c9323',
+	},
+	'.cm-selected' : {
+		backgroundColor : '#d7d4f0',
+	},
+    '.cm-pageLine' : {
+        backgroundColor: '#7ca97c',
+        color: '#000',
+        fontWeight: 'bold',
+        letterSpacing: '.5px',
+        borderTop: '1px solid #ff0',
+	},
+    '.cm-columnSplit' : {
+        backgroundColor: '#7ca97c',
+        color: 'black',
+        fontWeight: 'bold',
+        letterSpacing: '1px',
+        borderBottom: '1px solid #ff0',
+	},
+    '.cm-line.cm-block, .cm-line .cm-inline-block' : {
+        color: '#E3E3E3',
+	},
+    '.cm-definitionList .cm-definitionTerm' : {
+        color: '#E3E3E3',
+	},
+    '.cm-definitionList .cm-definitionColon' : {
+        backgroundColor: '#0000',
+        color: '#e3FF00',
+	},
+    '.cm-definitionList .cm-definitionDesc' : {
+        color: '#b5858d',
+	},
+
+	// Semantic classes
+	'.cm-header'                         : { color: '#C51B1B', fontWeight: 'bold' },
+	'.cm-strong'                         : { color: '#309dd2', fontWeight: 'bold' },
+	'.cm-em'                             : { fontStyle: 'italic' },
+	'.cm-keyword'                        : { color: '#fff' },
+	'.cm-atom, cm-value, cm-color'       : { color: '#c1939a' },
+	'.cm-number'                         : { color: '#2986cc' },
+	'.cm-def'                            : { color: '#2986cc' },
+	'.cm-list'                           : { color: '#3cbf30' },
+	'.cm-variable, .cm-type'             : { color: '#085' },
+	'.cm-comment'                        : { color: '#bbc700' },
+	'.cm-link'                           : { color: '#DD6300', textDecoration: 'underline' },
+	'.cm-string'                         : { color: '#AA8261', textDecoration: 'none'  },
+	'.cm-string-2'                       : { color: '#f50', textDecoration: 'none'  },
+	'.cm-meta, .cm-qualifier, .cm-class' : { color: '#19ee2b' },
+	'.cm-builtin'                        : { color: '#fff' },
+	'.cm-bracket'                        : { color: '#997' },
+	'.cm-tag, .cm-attribute'             : { color: '#e3ff00' },
+	'.cm-hr'                             : { color: '#999' },
+	'.cm-negative'                       : { color: '#d44' },
+	'.cm-positive'                       : { color: '#292' },
+	'.cm-error, .cm-invalidchar'         : { color: '#c50202' },
+	'.cm-matchingbracket'                : { color: '#0b0' },
+	'.cm-nonmatchingbracket'             : { color: '#a22' },
+	'.cm-matchingtag'                    : { backgroundColor: 'rgba(255, 150, 0, 0.3)' },
+	'.cm-quote'                          : { color: '#090' },
+}, { dark: true });

themes/codeMirror/customThemes/default.js

@@ -1,4 +1,3 @@
-// themes/codeMirror/customThemes/default.js
 import { EditorView } from '@codemirror/view';
 
 //This theme is made of the base css for the codemirror 5 editor
@@ -37,7 +36,7 @@ export default EditorView.theme({
 		backgroundColor : '#7e7',
 		caretColor      : 'transparent',
 	},
-	'.cm-activeline-background' : {
+	'.cm-activeLine' : {
 		backgroundColor : '#e8f2ff',
 	},
 	'.cm-selected' : {
@@ -50,7 +49,6 @@ export default EditorView.theme({
 		cursor     : 'pointer',
 	},
 
-	// Semantic classes
 	'.cm-header'                         : { color: 'blue', fontWeight: 'bold' },
 	'.cm-strong'                         : { fontWeight: 'bold' },
 	'.cm-em'                             : { fontStyle: 'italic' },
@@ -75,6 +73,6 @@ export default EditorView.theme({
 	'.cm-error, .cm-invalidchar'         : { color: '#f00' },
 	'.cm-matchingbracket'                : { color: '#0b0' },
 	'.cm-nonmatchingbracket'             : { color: '#a22' },
-	'.cm-matchingtag'                    : { backgroundColor: 'rgba(255, 150, 0, 0.3)' },
+	'.cm-matchingtag'                    : { backgroundColor: '#ff96004d' },
 	'.cm-quote'                          : { color: '#090' },
 }, { dark: false });