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