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