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