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