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