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