1import { fontWeights } from "../common";
2import {
3 ColorScheme,
4 Layer,
5 StyleSets,
6} from "../themes/common/colorScheme";
7import { withOpacity } from "../utils/color";
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, { size: "sm" }),
41 highlightText: text(layer, "sans", styleSet, {
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 diffBackgroundDeleted: background(layer, "negative"),
148 diffBackgroundInserted: background(layer, "positive"),
149 documentHighlightReadBackground: elevation.ramps
150 .neutral(0.5)
151 .alpha(0.2)
152 .hex(), // TODO: This was blend
153 documentHighlightWriteBackground: elevation.ramps
154 .neutral(0.5)
155 .alpha(0.4)
156 .hex(), // TODO: This was blend * 2
157 errorColor: foreground(layer, "negative"),
158 gutterBackground: background(layer),
159 gutterPaddingFactor: 3.5,
160 lineNumber: foreground(layer, "disabled"),
161 lineNumberActive: foreground(layer),
162 renameFade: 0.6,
163 unnecessaryCodeFade: 0.5,
164 selection: colorScheme.players[0],
165 guestSelections: [
166 colorScheme.players[1],
167 colorScheme.players[2],
168 colorScheme.players[3],
169 colorScheme.players[4],
170 colorScheme.players[5],
171 colorScheme.players[6],
172 colorScheme.players[7],
173 ],
174 autocomplete: {
175 background: background(elevation.bottom),
176 cornerRadius: 8,
177 padding: 4,
178 margin: {
179 left: -14,
180 },
181 border: border(elevation.bottom),
182 shadow: elevation.above.shadow,
183 matchHighlight: elevation.above.ramps.blue(0.5).hex(),
184 item: autocompleteItem,
185 hoveredItem: {
186 ...autocompleteItem,
187 background: background(elevation.bottom, "hovered"),
188 },
189 selectedItem: {
190 ...autocompleteItem,
191 background: background(elevation.bottom, "active"),
192 },
193 },
194 diagnosticHeader: {
195 background: background(elevation.middle),
196 iconWidthFactor: 1.5,
197 textScaleFactor: 0.857,
198 border: border(elevation.middle, {
199 bottom: true,
200 top: true,
201 }),
202 code: {
203 ...text(elevation.middle, "mono", { size: "sm" }),
204 margin: {
205 left: 10,
206 },
207 },
208 message: {
209 highlightText: text(elevation.middle, "sans", {
210 size: "sm",
211 weight: "bold",
212 }),
213 text: text(elevation.middle, "sans", { size: "sm" }),
214 },
215 },
216 diagnosticPathHeader: {
217 background: background(elevation.middle),
218 textScaleFactor: 0.857,
219 filename: text(elevation.middle, "mono", { size: "sm" }),
220 path: {
221 ...text(elevation.middle, "mono", { size: "sm" }),
222 margin: {
223 left: 12,
224 },
225 },
226 },
227 errorDiagnostic: diagnostic(elevation.middle, "negative"),
228 warningDiagnostic: diagnostic(elevation.middle, "warning"),
229 informationDiagnostic: diagnostic(elevation.middle, "info"),
230 hintDiagnostic: diagnostic(elevation.middle, "positive"),
231 invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
232 invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
233 invalidInformationDiagnostic: diagnostic(elevation.middle, "base"),
234 invalidWarningDiagnostic: diagnostic(elevation.middle, "base"),
235 hoverPopover: hoverPopover(elevation.above),
236 linkDefinition: {
237 color: syntax.linkUri.color,
238 underline: syntax.linkUri.underline,
239 },
240 jumpIcon: {
241 color: foreground(layer, "on"),
242 iconWidth: 20,
243 buttonWidth: 20,
244 cornerRadius: 6,
245 padding: {
246 top: 6,
247 bottom: 6,
248 left: 6,
249 right: 6,
250 },
251 hover: {
252 color: foreground(layer, "on", "hovered"),
253 background: background(layer, "on", "hovered"),
254 },
255 },
256 compositionMark: {
257 underline: {
258 thickness: 1.0,
259 color: borderColor(layer),
260 },
261 },
262 syntax,
263 };
264}