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