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