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