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