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 jumpIcon: {
102 color: iconColor(theme, "primary"),
103 iconWidth: 10,
104 buttonWidth: 10,
105 hover: {
106 color: iconColor(theme, "active")
107 }
108 },
109 border: border(theme, "secondary", {
110 bottom: true,
111 top: true,
112 }),
113 code: {
114 ...text(theme, "mono", "muted", { size: "sm" }),
115 margin: {
116 left: 10,
117 },
118 },
119 message: {
120 highlightText: text(theme, "sans", "primary", {
121 size: "sm",
122 weight: "bold",
123 }),
124 text: text(theme, "sans", "secondary", { size: "sm" }),
125 },
126 },
127 diagnosticPathHeader: {
128 background: theme.editor.line.active.value,
129 textScaleFactor: 0.857,
130 filename: text(theme, "mono", "primary", { size: "sm" }),
131 path: {
132 ...text(theme, "mono", "muted", { size: "sm" }),
133 margin: {
134 left: 12,
135 },
136 },
137 },
138 errorDiagnostic: diagnostic(theme, "error"),
139 warningDiagnostic: diagnostic(theme, "warning"),
140 informationDiagnostic: diagnostic(theme, "info"),
141 hintDiagnostic: diagnostic(theme, "info"),
142 invalidErrorDiagnostic: diagnostic(theme, "muted"),
143 invalidHintDiagnostic: diagnostic(theme, "muted"),
144 invalidInformationDiagnostic: diagnostic(theme, "muted"),
145 invalidWarningDiagnostic: diagnostic(theme, "muted"),
146 syntax,
147 };
148}