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