1import Theme from "../themes/theme";
2import {
3 backgroundColor,
4 border,
5 iconColor,
6 player,
7 text,
8 TextColor
9} from "./components";
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: text(theme, "sans", color, { size: "sm" }),
32 highlightText: text(theme, "sans", color, {
33 size: "sm",
34 weight: "bold",
35 }),
36 },
37 };
38 }
39
40 return {
41 textColor: theme.textColor.secondary.value,
42 background: backgroundColor(theme, 300),
43 activeLineBackground: theme.editor.line.active.value,
44 codeActionsIndicator: iconColor(theme, "secondary"),
45 diffBackgroundDeleted: backgroundColor(theme, "error"),
46 diffBackgroundInserted: backgroundColor(theme, "ok"),
47 documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
48 documentHighlightWriteBackground: theme.editor.highlight.occurrence.value,
49 errorColor: theme.textColor.error,
50 gutterBackground: backgroundColor(theme, 300),
51 gutterPaddingFactor: 2.5,
52 highlightedLineBackground: theme.editor.line.highlighted.value,
53 lineNumber: theme.editor.gutter.primary.value,
54 lineNumberActive: theme.editor.gutter.active,
55 renameFade: 0.6,
56 unnecessaryCodeFade: 0.5,
57 selection: player(theme, 1).selection,
58 guestSelections: [
59 player(theme, 2).selection,
60 player(theme, 3).selection,
61 player(theme, 4).selection,
62 player(theme, 5).selection,
63 player(theme, 6).selection,
64 player(theme, 7).selection,
65 player(theme, 8).selection,
66 ],
67 autocomplete: {
68 background: backgroundColor(theme, 100),
69 cornerRadius: 6,
70 padding: 6,
71 border: border(theme, "secondary"),
72 item: autocompleteItem,
73 hoveredItem: {
74 ...autocompleteItem,
75 background: backgroundColor(theme, 100, "hovered"),
76 },
77 margin: {
78 left: -14,
79 },
80 matchHighlight: {
81 color: theme.syntax.keyword.color.value,
82 weight: theme.syntax.keyword.weight.value,
83 },
84 selectedItem: {
85 ...autocompleteItem,
86 background: backgroundColor(theme, 100, "active"),
87 },
88 },
89 diagnosticHeader: {
90 background: theme.editor.background.value,
91 iconWidthFactor: 1.5,
92 textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
93 border: border(theme, "secondary", {
94 bottom: true,
95 top: true,
96 }),
97 code: {
98 ...text(theme, "mono", "muted", { size: "sm" }),
99 margin: {
100 left: 10,
101 },
102 },
103 message: {
104 highlightText: text(theme, "sans", "primary", {
105 size: "sm",
106 weight: "bold",
107 }),
108 text: text(theme, "sans", "secondary", { size: "sm" }),
109 },
110 },
111 diagnosticPathHeader: {
112 background: theme.editor.line.active,
113 textScaleFactor: 0.857,
114 filename: text(theme, "mono", "primary", { size: "sm" }),
115 path: {
116 ...text(theme, "mono", "muted", { size: "sm" }),
117 margin: {
118 left: 12,
119 },
120 },
121 },
122 errorDiagnostic: diagnostic(theme, "error"),
123 warningDiagnostic: diagnostic(theme, "warning"),
124 informationDiagnostic: diagnostic(theme, "info"),
125 hintDiagnostic: diagnostic(theme, "info"),
126 invalidErrorDiagnostic: diagnostic(theme, "muted"),
127 invalidHintDiagnostic: diagnostic(theme, "muted"),
128 invalidInformationDiagnostic: diagnostic(theme, "muted"),
129 invalidWarningDiagnostic: diagnostic(theme, "muted"),
130 };
131}