1import { fontWeights } from "../common";
2import {
3 ColorScheme,
4 Layer,
5 StyleSets,
6} from "../themes/common/colorScheme";
7import {
8 background,
9 border,
10 borderColor,
11 foreground,
12 text,
13} from "./components";
14import hoverPopover from "./hoverPopover";
15
16export default function editor(colorScheme: ColorScheme) {
17 let elevation = colorScheme.lowest;
18 let layer = elevation.top;
19
20 const autocompleteItem = {
21 cornerRadius: 6,
22 padding: {
23 bottom: 2,
24 left: 6,
25 right: 6,
26 top: 2,
27 },
28 };
29
30 function diagnostic(layer: Layer, styleSet: StyleSets) {
31 return {
32 textScaleFactor: 0.857,
33 header: {
34 border: border(layer, {
35 top: true,
36 }),
37 },
38 message: {
39 text: text(layer, "sans", styleSet, { size: "sm" }),
40 highlightText: text(layer, "sans", styleSet, {
41 size: "sm",
42 weight: "bold",
43 }),
44 },
45 };
46 }
47
48 const syntax = {
49 primary: {
50 color: elevation.ramps.neutral(1).hex(),
51 weight: fontWeights.normal,
52 },
53 comment: {
54 color: elevation.ramps.neutral(0.71).hex(),
55 weight: fontWeights.normal,
56 },
57 punctuation: {
58 color: elevation.ramps.neutral(0.86).hex(),
59 weight: fontWeights.normal,
60 },
61 constant: {
62 color: elevation.ramps.neutral(0.57).hex(),
63 weight: fontWeights.normal,
64 },
65 keyword: {
66 color: elevation.ramps.blue(0.5).hex(),
67 weight: fontWeights.normal,
68 },
69 function: {
70 color: elevation.ramps.yellow(0.5).hex(),
71 weight: fontWeights.normal,
72 },
73 type: {
74 color: elevation.ramps.cyan(0.5).hex(),
75 weight: fontWeights.normal,
76 },
77 constructor: {
78 color: elevation.ramps.blue(0.5).hex(),
79 weight: fontWeights.normal,
80 },
81 variant: {
82 color: elevation.ramps.blue(0.5).hex(),
83 weight: fontWeights.normal,
84 },
85 property: {
86 color: elevation.ramps.blue(0.5).hex(),
87 weight: fontWeights.normal,
88 },
89 enum: {
90 color: elevation.ramps.orange(0.5).hex(),
91 weight: fontWeights.normal,
92 },
93 operator: {
94 color: elevation.ramps.orange(0.5).hex(),
95 weight: fontWeights.normal,
96 },
97 string: {
98 color: elevation.ramps.orange(0.5).hex(),
99 weight: fontWeights.normal,
100 },
101 number: {
102 color: elevation.ramps.green(0.5).hex(),
103 weight: fontWeights.normal,
104 },
105 boolean: {
106 color: elevation.ramps.green(0.5).hex(),
107 weight: fontWeights.normal,
108 },
109 predictive: {
110 color: elevation.ramps.neutral(0.57).hex(),
111 weight: fontWeights.normal,
112 },
113 title: {
114 color: elevation.ramps.yellow(0.5).hex(),
115 weight: fontWeights.bold,
116 },
117 emphasis: {
118 color: elevation.ramps.blue(0.5).hex(),
119 weight: fontWeights.normal,
120 },
121 "emphasis.strong": {
122 color: elevation.ramps.blue(0.5).hex(),
123 weight: fontWeights.bold,
124 },
125 linkUri: {
126 color: elevation.ramps.green(0.5).hex(),
127 weight: fontWeights.normal,
128 underline: true,
129 },
130 linkText: {
131 color: elevation.ramps.orange(0.5).hex(),
132 weight: fontWeights.normal,
133 italic: true,
134 },
135 };
136
137 return {
138 textColor: syntax.primary.color,
139 background: background(layer),
140 activeLineBackground: background(layer, "on"),
141 highlightedLineBackground: background(layer, "on"),
142 codeActions: {
143 indicator: foreground(layer, "variant"),
144 verticalScale: 0.55,
145 },
146 diffBackgroundDeleted: background(layer, "negative"),
147 diffBackgroundInserted: background(layer, "positive"),
148 documentHighlightReadBackground: elevation.ramps
149 .neutral(0.5)
150 .alpha(0.2)
151 .hex(), // TODO: This was blend
152 documentHighlightWriteBackground: elevation.ramps
153 .neutral(0.5)
154 .alpha(0.4)
155 .hex(), // TODO: This was blend * 2
156 errorColor: foreground(layer, "negative"),
157 gutterBackground: background(layer),
158 gutterPaddingFactor: 3.5,
159 lineNumber: foreground(layer, "disabled"),
160 lineNumberActive: foreground(layer),
161 renameFade: 0.6,
162 unnecessaryCodeFade: 0.5,
163 selection: colorScheme.players[0],
164 guestSelections: [
165 colorScheme.players[1],
166 colorScheme.players[2],
167 colorScheme.players[3],
168 colorScheme.players[4],
169 colorScheme.players[5],
170 colorScheme.players[6],
171 colorScheme.players[7],
172 ],
173 autocomplete: {
174 background: background(elevation.bottom),
175 cornerRadius: 8,
176 padding: 4,
177 margin: {
178 left: -14,
179 },
180 border: border(elevation.bottom),
181 shadow: elevation.above.shadow,
182 matchHighlight: elevation.above.ramps.blue(0.5).hex(),
183 item: autocompleteItem,
184 hoveredItem: {
185 ...autocompleteItem,
186 background: background(elevation.bottom, "hovered"),
187 },
188 selectedItem: {
189 ...autocompleteItem,
190 background: background(elevation.bottom, "active"),
191 },
192 },
193 diagnosticHeader: {
194 background: background(elevation.middle),
195 iconWidthFactor: 1.5,
196 textScaleFactor: 0.857,
197 border: border(elevation.middle, {
198 bottom: true,
199 top: true,
200 }),
201 code: {
202 ...text(elevation.middle, "mono", { size: "sm" }),
203 margin: {
204 left: 10,
205 },
206 },
207 message: {
208 highlightText: text(elevation.middle, "sans", {
209 size: "sm",
210 weight: "bold",
211 }),
212 text: text(elevation.middle, "sans", { size: "sm" }),
213 },
214 },
215 diagnosticPathHeader: {
216 background: background(elevation.middle),
217 textScaleFactor: 0.857,
218 filename: text(elevation.middle, "mono", { size: "sm" }),
219 path: {
220 ...text(elevation.middle, "mono", { size: "sm" }),
221 margin: {
222 left: 12,
223 },
224 },
225 },
226 errorDiagnostic: diagnostic(elevation.middle, "negative"),
227 warningDiagnostic: diagnostic(elevation.middle, "warning"),
228 informationDiagnostic: diagnostic(elevation.middle, "info"),
229 hintDiagnostic: diagnostic(elevation.middle, "warning"),
230 invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
231 invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
232 invalidInformationDiagnostic: diagnostic(elevation.middle, "base"),
233 invalidWarningDiagnostic: diagnostic(elevation.middle, "base"),
234 hoverPopover: hoverPopover(elevation.above),
235 linkDefinition: {
236 color: syntax.linkUri.color,
237 underline: syntax.linkUri.underline,
238 },
239 jumpIcon: {
240 color: foreground(layer, "on"),
241 iconWidth: 20,
242 buttonWidth: 20,
243 cornerRadius: 6,
244 padding: {
245 top: 6,
246 bottom: 6,
247 left: 6,
248 right: 6,
249 },
250 hover: {
251 color: foreground(layer, "on", "hovered"),
252 background: background(layer, "on", "hovered"),
253 },
254 },
255 compositionMark: {
256 underline: {
257 thickness: 1.0,
258 color: borderColor(layer),
259 },
260 },
261 syntax,
262 };
263}