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