5import { tags as t } from '@lezer/highlight';
6import { createTheme } from './theme-helper.mjs';

8const hex = [
9  'rgb(84, 93, 98)',
10  'rgb(255, 255, 255)',
11  'rgba(255, 255, 255, .25)',
12  'rgb(67, 76, 81)',
13  'rgb(186, 230, 115)',
14  'rgb(252, 184, 67)',
15  'rgb(124, 206, 254)',
16  'rgb(83, 101, 102)',
17  'rgba(46, 62, 72,.5)',
18  'rgb(94, 100, 108)',
19  'rgb(167, 216, 177)',
20];
21
22export const settings = {
23  background: hex[0],
24  lineBackground: 'transparent',
25  foreground: hex[10],
26  muted: hex[7],
27  selection: hex[8],
28  selectionMatch: hex[0],
29  gutterBackground: hex[3],
30  gutterForeground: hex[2],
31  gutterBorder: 'transparent',
32  lineHighlight: hex[3],
33};
34
35export default createTheme({
36  theme: 'dark',
37  settings,
38  styles: [
39    {
40      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
41      color: hex[1],
42    },
43    { tag: [t.bool, t.special(t.variableName)], color: hex[1] },
44    { tag: [t.comment, t.brace, t.bracket], color: hex[2] },
45    { tag: [t.variableName], color: hex[1] },
46    { tag: [t.labelName, t.propertyName, t.self, t.atom], color: hex[5] },
47    { tag: [t.attributeName, t.number], color: hex[6] },
48    { tag: t.keyword, color: hex[5] },
49    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: hex[4] },
50  ],
51});