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