prometheus

1
import { HighlightStyle } from '@codemirror/language';
2
import { EditorView } from '@codemirror/view';
3
import { tags } from '@lezer/highlight';
4

5
export const baseTheme = EditorView.theme({
6
  '&.cm-editor': {
7
    '&.cm-focused': {
8
      outline: 'none',
9
      outline_fallback: 'none',
10
    },
11
  },
12
  '.cm-scroller': {
13
    overflow: 'hidden',
14
    fontFamily: '"DejaVu Sans Mono", monospace',
15
  },
16
  '.cm-placeholder': {
17
    fontFamily:
18
      '-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"',
19
  },
20

21
  '.cm-matchingBracket': {
22
    fontWeight: 'bold',
23
    outline: '1px dashed transparent',
24
  },
25
  '.cm-nonmatchingBracket': { borderColor: 'red' },
26

27
  '.cm-tooltip.cm-tooltip-autocomplete': {
28
    '& > ul': {
29
      maxHeight: '350px',
30
      fontFamily: '"DejaVu Sans Mono", monospace',
31
      maxWidth: 'unset',
32
    },
33
    '& > ul > li': {
34
      padding: '2px 1em 2px 3px',
35
    },
36
    minWidth: '30%',
37
  },
38

39
  '.cm-completionDetail': {
40
    float: 'right',
41
    color: '#999',
42
  },
43

44
  '.cm-tooltip.cm-completionInfo': {
45
    marginTop: '-11px',
46
    padding: '10px',
47
    fontFamily: "'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;",
48
    border: 'none',
49
    minWidth: '250px',
50
    maxWidth: 'min-content',
51
  },
52

53
  '.cm-completionInfo.cm-completionInfo-right': {
54
    '&:before': {
55
      content: "' '",
56
      height: '0',
57
      position: 'absolute',
58
      width: '0',
59
      left: '-20px',
60
      borderWidth: '10px',
61
      borderStyle: 'solid',
62
      borderColor: 'transparent',
63
    },
64
    marginLeft: '12px',
65
  },
66
  '.cm-completionInfo.cm-completionInfo-left': {
67
    '&:before': {
68
      content: "' '",
69
      height: '0',
70
      position: 'absolute',
71
      width: '0',
72
      right: '-20px',
73
      borderWidth: '10px',
74
      borderStyle: 'solid',
75
      borderColor: 'transparent',
76
    },
77
    marginRight: '12px',
78
  },
79

80
  '.cm-completionMatchedText': {
81
    textDecoration: 'none',
82
    fontWeight: 'bold',
83
  },
84

85
  '.cm-selectionMatch': {
86
    backgroundColor: '#e6f3ff',
87
  },
88

89
  '.cm-diagnostic': {
90
    '&.cm-diagnostic-error': {
91
      borderLeft: '3px solid #e65013',
92
    },
93
  },
94

95
  '.cm-completionIcon': {
96
    boxSizing: 'content-box',
97
    fontSize: '16px',
98
    lineHeight: '1',
99
    marginRight: '10px',
100
    verticalAlign: 'top',
101
    '&:after': { content: "'\\ea88'" },
102
    fontFamily: 'codicon',
103
    paddingRight: '0',
104
    opacity: '1',
105
  },
106

107
  '.cm-completionIcon-function, .cm-completionIcon-method': {
108
    '&:after': { content: "'\\ea8c'" },
109
  },
110
  '.cm-completionIcon-class': {
111
    '&:after': { content: "'○'" },
112
  },
113
  '.cm-completionIcon-interface': {
114
    '&:after': { content: "'◌'" },
115
  },
116
  '.cm-completionIcon-variable': {
117
    '&:after': { content: "'𝑥'" },
118
  },
119
  '.cm-completionIcon-constant': {
120
    '&:after': { content: "'\\eb5f'" },
121
  },
122
  '.cm-completionIcon-type': {
123
    '&:after': { content: "'𝑡'" },
124
  },
125
  '.cm-completionIcon-enum': {
126
    '&:after': { content: "'∪'" },
127
  },
128
  '.cm-completionIcon-property': {
129
    '&:after': { content: "'□'" },
130
  },
131
  '.cm-completionIcon-keyword': {
132
    '&:after': { content: "'\\eb62'" },
133
  },
134
  '.cm-completionIcon-namespace': {
135
    '&:after': { content: "'▢'" },
136
  },
137
  '.cm-completionIcon-text': {
138
    '&:after': { content: "'\\ea95'" },
139
    color: '#ee9d28',
140
  },
141
});
142

143
export const lightTheme = EditorView.theme(
144
  {
145
    '.cm-tooltip': {
146
      backgroundColor: '#f8f8f8',
147
      borderColor: 'rgba(52, 79, 113, 0.2)',
148
    },
149

150
    '.cm-tooltip.cm-tooltip-autocomplete': {
151
      '& li:hover': {
152
        backgroundColor: '#ddd',
153
      },
154
      '& > ul > li[aria-selected]': {
155
        backgroundColor: '#d6ebff',
156
        color: 'unset',
157
      },
158
    },
159

160
    '.cm-tooltip.cm-completionInfo': {
161
      backgroundColor: '#d6ebff',
162
    },
163

164
    '.cm-tooltip > .cm-completionInfo.cm-completionInfo-right': {
165
      '&:before': {
166
        borderRightColor: '#d6ebff',
167
      },
168
    },
169
    '.cm-tooltip > .cm-completionInfo.cm-completionInfo-left': {
170
      '&:before': {
171
        borderLeftColor: '#d6ebff',
172
      },
173
    },
174

175
    '.cm-line': {
176
      '&::selection': {
177
        backgroundColor: '#add6ff',
178
      },
179
      '& > span::selection': {
180
        backgroundColor: '#add6ff',
181
      },
182
    },
183

184
    '.cm-matchingBracket': {
185
      color: '#000',
186
      backgroundColor: '#dedede',
187
    },
188

189
    '.cm-completionMatchedText': {
190
      color: '#0066bf',
191
    },
192

193
    '.cm-completionIcon': {
194
      color: '#007acc',
195
    },
196

197
    '.cm-completionIcon-constant': {
198
      color: '#007acc',
199
    },
200

201
    '.cm-completionIcon-function, .cm-completionIcon-method': {
202
      color: '#652d90',
203
    },
204

205
    '.cm-completionIcon-keyword': {
206
      color: '#616161',
207
    },
208
  },
209
  { dark: false }
210
);
211

212
export const darkTheme = EditorView.theme(
213
  {
214
    '.cm-content': {
215
      caretColor: '#fff',
216
    },
217

218
    '.cm-tooltip.cm-completionInfo': {
219
      backgroundColor: '#333338',
220
    },
221

222
    '.cm-tooltip > .cm-completionInfo.cm-completionInfo-right': {
223
      '&:before': {
224
        borderRightColor: '#333338',
225
      },
226
    },
227
    '.cm-tooltip > .cm-completionInfo.cm-completionInfo-left': {
228
      '&:before': {
229
        borderLeftColor: '#333338',
230
      },
231
    },
232

233
    '.cm-line': {
234
      '&::selection': {
235
        backgroundColor: '#767676',
236
      },
237
      '& > span::selection': {
238
        backgroundColor: '#767676',
239
      },
240
    },
241

242
    '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': {
243
      backgroundColor: '#616161',
244
    },
245

246
    '.cm-completionMatchedText': {
247
      color: '#7dd3fc',
248
    },
249

250
    '.cm-completionIcon, .cm-completionIcon-constant': {
251
      color: '#7dd3fc',
252
    },
253

254
    '.cm-completionIcon-function, .cm-completionIcon-method': {
255
      color: '#d8b4fe',
256
    },
257

258
    '.cm-completionIcon-keyword': {
259
      color: '#cbd5e1 !important',
260
    },
261
  },
262
  { dark: true }
263
);
264

265
export const promqlHighlighter = HighlightStyle.define([
266
  { tag: tags.number, color: '#09885a' },
267
  { tag: tags.string, color: '#a31515' },
268
  { tag: tags.keyword, color: '#008080' },
269
  { tag: tags.function(tags.variableName), color: '#008080' },
270
  { tag: tags.labelName, color: '#800000' },
271
  { tag: tags.operator },
272
  { tag: tags.modifier, color: '#008080' },
273
  { tag: tags.paren },
274
  { tag: tags.squareBracket },
275
  { tag: tags.brace },
276
  { tag: tags.invalid, color: 'red' },
277
  { tag: tags.comment, color: '#888', fontStyle: 'italic' },
278
]);
279

280
export const darkPromqlHighlighter = HighlightStyle.define([
281
  { tag: tags.number, color: '#22c55e' },
282
  { tag: tags.string, color: '#fca5a5' },
283
  { tag: tags.keyword, color: '#14bfad' },
284
  { tag: tags.function(tags.variableName), color: '#14bfad' },
285
  { tag: tags.labelName, color: '#ff8585' },
286
  { tag: tags.operator },
287
  { tag: tags.modifier, color: '#14bfad' },
288
  { tag: tags.paren },
289
  { tag: tags.squareBracket },
290
  { tag: tags.brace },
291
  { tag: tags.invalid, color: '#ff3d3d' },
292
  { tag: tags.comment, color: '#9ca3af', fontStyle: 'italic' },
293
]);
294