1import { HighlightStyle, tags } from '@codemirror/highlight'; 2import { EditorView } from '@codemirror/view'; 3 4export const baseTheme = EditorView.theme({ 5 '&': { 6 '&.cm-focused': { 7 outline: 'none', 8 outline_fallback: 'none', 9 }, 10 }, 11 '.cm-scroller': { 12 overflow: 'hidden', 13 fontFamily: '"DejaVu Sans Mono", monospace', 14 }, 15 '.cm-placeholder': { 16 fontFamily: 17 '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"', 18 }, 19 20 '.cm-matchingBracket': { 21 color: '#000', 22 backgroundColor: '#dedede', 23 fontWeight: 'bold', 24 outline: '1px dashed transparent', 25 }, 26 '.cm-nonmatchingBracket': { borderColor: 'red' }, 27 28 '.cm-tooltip.cm-tooltip-autocomplete': { 29 '& > ul': { 30 maxHeight: '350px', 31 fontFamily: '"DejaVu Sans Mono", monospace', 32 maxWidth: 'unset', 33 }, 34 '& > ul > li': { 35 padding: '2px 1em 2px 3px', 36 }, 37 minWidth: '30%', 38 }, 39 40 '.cm-completionDetail': { 41 float: 'right', 42 color: '#999', 43 }, 44 45 '.cm-tooltip.cm-completionInfo': { 46 marginTop: '-11px', 47 padding: '10px', 48 fontFamily: "'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;", 49 border: 'none', 50 minWidth: '250px', 51 maxWidth: 'min-content', 52 }, 53 54 '.cm-completionInfo.cm-completionInfo-right': { 55 '&:before': { 56 content: "' '", 57 height: '0', 58 position: 'absolute', 59 width: '0', 60 left: '-20px', 61 borderWidth: '10px', 62 borderStyle: 'solid', 63 borderColor: 'transparent', 64 }, 65 marginLeft: '12px', 66 }, 67 '.cm-completionInfo.cm-completionInfo-left': { 68 '&:before': { 69 content: "' '", 70 height: '0', 71 position: 'absolute', 72 width: '0', 73 right: '-20px', 74 borderWidth: '10px', 75 borderStyle: 'solid', 76 borderColor: 'transparent', 77 }, 78 marginRight: '12px', 79 }, 80 81 '.cm-completionMatchedText': { 82 textDecoration: 'none', 83 fontWeight: 'bold', 84 color: '#0066bf', 85 }, 86 87 '.cm-selectionMatch': { 88 backgroundColor: '#e6f3ff', 89 }, 90 91 '.cm-diagnostic': { 92 '&.cm-diagnostic-error': { 93 borderLeft: '3px solid #e65013', 94 }, 95 }, 96 97 '.cm-completionIcon': { 98 boxSizing: 'content-box', 99 fontSize: '16px', 100 lineHeight: '1', 101 marginRight: '10px', 102 verticalAlign: 'top', 103 '&:after': { content: "'\\ea88'" }, 104 fontFamily: 'codicon', 105 paddingRight: '0', 106 opacity: '1', 107 color: '#007acc', 108 }, 109 110 '.cm-completionIcon-function, .cm-completionIcon-method': { 111 '&:after': { content: "'\\ea8c'" }, 112 color: '#652d90', 113 }, 114 '.cm-completionIcon-class': { 115 '&:after': { content: "'○'" }, 116 }, 117 '.cm-completionIcon-interface': { 118 '&:after': { content: "'◌'" }, 119 }, 120 '.cm-completionIcon-variable': { 121 '&:after': { content: "''" }, 122 }, 123 '.cm-completionIcon-constant': { 124 '&:after': { content: "'\\eb5f'" }, 125 color: '#007acc', 126 }, 127 '.cm-completionIcon-type': { 128 '&:after': { content: "''" }, 129 }, 130 '.cm-completionIcon-enum': { 131 '&:after': { content: "'∪'" }, 132 }, 133 '.cm-completionIcon-property': { 134 '&:after': { content: "'□'" }, 135 }, 136 '.cm-completionIcon-keyword': { 137 '&:after': { content: "'\\eb62'" }, 138 color: '#616161', 139 }, 140 '.cm-completionIcon-namespace': { 141 '&:after': { content: "'▢'" }, 142 }, 143 '.cm-completionIcon-text': { 144 '&:after': { content: "'\\ea95'" }, 145 color: '#ee9d28', 146 }, 147}); 148 149export const lightTheme = EditorView.theme( 150 { 151 '.cm-tooltip': { 152 backgroundColor: '#f8f8f8', 153 borderColor: 'rgba(52, 79, 113, 0.2)', 154 }, 155 156 '.cm-tooltip.cm-tooltip-autocomplete': { 157 '& li:hover': { 158 backgroundColor: '#ddd', 159 }, 160 '& > ul > li[aria-selected]': { 161 backgroundColor: '#d6ebff', 162 color: 'unset', 163 }, 164 }, 165 166 '.cm-tooltip.cm-completionInfo': { 167 backgroundColor: '#d6ebff', 168 }, 169 170 '.cm-tooltip > .cm-completionInfo.cm-completionInfo-right': { 171 '&:before': { 172 borderRightColor: '#d6ebff', 173 }, 174 }, 175 '.cm-tooltip > .cm-completionInfo.cm-completionInfo-left': { 176 '&:before': { 177 borderLeftColor: '#d6ebff', 178 }, 179 }, 180 181 '.cm-line': { 182 '&::selection': { 183 backgroundColor: '#add6ff', 184 }, 185 '& > span::selection': { 186 backgroundColor: '#add6ff', 187 }, 188 }, 189 }, 190 { dark: false } 191); 192 193export const darkTheme = EditorView.theme( 194 { 195 '.cm-content': { 196 caretColor: '#fff', 197 }, 198 199 '.cm-tooltip.cm-completionInfo': { 200 backgroundColor: '#333338', 201 }, 202 203 '.cm-tooltip > .cm-completionInfo.cm-completionInfo-right': { 204 '&:before': { 205 borderRightColor: '#333338', 206 }, 207 }, 208 '.cm-tooltip > .cm-completionInfo.cm-completionInfo-left': { 209 '&:before': { 210 borderLeftColor: '#333338', 211 }, 212 }, 213 214 '.cm-line': { 215 '&::selection': { 216 backgroundColor: '#767676', 217 }, 218 '& > span::selection': { 219 backgroundColor: '#767676', 220 }, 221 }, 222 }, 223 { dark: true } 224); 225 226export const promqlHighlighter = HighlightStyle.define([ 227 { tag: tags.name, color: '#000' }, 228 { tag: tags.number, color: '#09885a' }, 229 { tag: tags.string, color: '#a31515' }, 230 { tag: tags.keyword, color: '#008080' }, 231 { tag: tags.function(tags.variableName), color: '#008080' }, 232 { tag: tags.labelName, color: '#800000' }, 233 { tag: tags.operator }, 234 { tag: tags.modifier, color: '#008080' }, 235 { tag: tags.paren }, 236 { tag: tags.squareBracket }, 237 { tag: tags.brace }, 238 { tag: tags.invalid, color: 'red' }, 239 { tag: tags.comment, color: '#888', fontStyle: 'italic' }, 240]); 241