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