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