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