5import { tags as t } from '@lezer/highlight';
6import { createTheme } from './theme-helper.mjs';
7const deepPurple = '#5c019a';
8const yellowPink = '#fbeffc';
9const grey = '#272C35';
10const pinkAccent = '#fee1ff';
11const lightGrey = '#465063';
12const bratGreen = '#9acd3f';
13const lighterGrey = '#97a1b7';
14const pink = '#f6a6fd';

16export const settings = {
17  background: 'white',
18  lineBackground: 'transparent',
19  foreground: deepPurple,
20  muted: deepPurple + '50',
21  caret: '#797977',
22  selection: yellowPink,
23  selectionMatch: '#2B323D',
24  gutterBackground: pinkAccent,
25  gutterForeground: lightGrey,
26  gutterBorder: 'transparent',
27  lineHighlight: pinkAccent,
28  light: true,
29};
30
31export default createTheme({
32  theme: 'light',
33  settings,
34  styles: [
35    {
36      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
37      color: deepPurple,
38    },
39    { tag: [t.tagName, t.heading], color: settings.foreground },
40    { tag: t.comment, color: lighterGrey },
41    { tag: [t.variableName, t.propertyName, t.labelName], color: pink },
42    { tag: [t.attributeName, t.number], color: '#d19a66' },
43    { tag: t.className, color: grey },
44    { tag: t.keyword, color: deepPurple },
45    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: bratGreen },
46  ],
47});