1import {
2 backgroundColor,
3 border,
4 iconColor,
5 player,
6 text,
7 TextColor,
8} from "./components";
9import Theme from "./theme";
10
11export default function editor(theme: Theme) {
12 const autocompleteItem = {
13 cornerRadius: 6,
14 padding: {
15 bottom: 2,
16 left: 6,
17 right: 6,
18 top: 2,
19 },
20 };
21
22 function diagnostic(theme: Theme, color: TextColor) {
23 return {
24 textScaleFactor: 0.857,
25 header: {
26 border: border(theme, "primary", {
27 top: true,
28 }),
29 },
30 message: {
31 text: {
32 ...text(theme, "sans", color),
33 size: 14,
34 },
35 highlightText: {
36 ...text(theme, "sans", color, { weight: "bold" }),
37 size: 14,
38 },
39 },
40 };
41 }
42
43 return {
44 textColor: theme.textColor.secondary.value,
45 background: backgroundColor(theme, 300),
46 activeLineBackground: theme.editor.line.active.value,
47 codeActionsIndicator: iconColor(theme, "secondary"),
48 diffBackgroundDeleted: backgroundColor(theme, "error"),
49 diffBackgroundInserted: backgroundColor(theme, "ok"),
50 documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
51 documentHighlightWriteBackground: theme.editor.highlight.occurrence.value,
52 errorColor: theme.textColor.error,
53 gutterBackground: backgroundColor(theme, 300),
54 gutterPaddingFactor: 2.5,
55 highlightedLineBackground: theme.editor.line.highlighted.value,
56 lineNumber: theme.editor.gutter.primary.value,
57 lineNumberActive: theme.editor.gutter.active,
58 renameFade: 0.6,
59 unnecessaryCodeFade: 0.5,
60 selection: player(theme, 1).selection,
61 guestSelections: [
62 player(theme, 2).selection,
63 player(theme, 3).selection,
64 player(theme, 4).selection,
65 player(theme, 5).selection,
66 player(theme, 6).selection,
67 player(theme, 7).selection,
68 player(theme, 8).selection,
69 ],
70 autocomplete: {
71 background: backgroundColor(theme, 100),
72 cornerRadius: 6,
73 padding: 6,
74 border: border(theme, "secondary"),
75 item: autocompleteItem,
76 hoveredItem: {
77 ...autocompleteItem,
78 background: backgroundColor(theme, 100, "hover"),
79 },
80 margin: {
81 left: -14,
82 },
83 matchHighlight: {
84 color: theme.syntax.keyword.color.value,
85 weight: theme.syntax.keyword.weight.value,
86 },
87 selectedItem: {
88 ...autocompleteItem,
89 background: backgroundColor(theme, 100, "active"),
90 },
91 },
92 diagnosticHeader: {
93 background: theme.editor.background.value,
94 iconWidthFactor: 1.5,
95 textScaleFactor: 0.857,
96 border: border(theme, "secondary", {
97 bottom: true,
98 top: true,
99 }),
100 code: {
101 ...text(theme, "mono", "muted"),
102 size: 14,
103 margin: {
104 left: 10,
105 },
106 },
107 message: {
108 highlightText: {
109 ...text(theme, "sans", "primary"),
110 size: 14,
111 weight: "bold",
112 },
113 text: {
114 ...text(theme, "sans", "secondary"),
115 size: 14,
116 },
117 },
118 },
119 diagnosticPathHeader: {
120 background: theme.editor.line.active,
121 textScaleFactor: 0.857,
122 filename: {
123 ...text(theme, "mono", "primary"),
124 size: 14,
125 },
126 path: {
127 ...text(theme, "mono", "muted"),
128 size: 14,
129 margin: {
130 left: 12,
131 },
132 },
133 },
134 errorDiagnostic: diagnostic(theme, "error"),
135 warningDiagnostic: diagnostic(theme, "warning"),
136 informationDiagnostic: diagnostic(theme, "info"),
137 hintDiagnostic: diagnostic(theme, "info"),
138 invalidErrorDiagnostic: diagnostic(theme, "muted"),
139 invalidHintDiagnostic: diagnostic(theme, "muted"),
140 invalidInformationDiagnostic: diagnostic(theme, "muted"),
141 invalidWarningDiagnostic: diagnostic(theme, "muted"),
142 };
143}