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