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