1import { withOpacity } from "../utils/color"
2import {
3 ColorScheme,
4 Layer,
5 StyleSets,
6} from "../themes/common/colorScheme"
7import { background, border, borderColor, foreground, text } from "./components"
8import hoverPopover from "./hoverPopover"
9
10import { buildSyntax } from "../themes/common/syntax"
11
12export default function editor(colorScheme: ColorScheme) {
13 let layer = colorScheme.highest
14
15 const autocompleteItem = {
16 cornerRadius: 6,
17 padding: {
18 bottom: 2,
19 left: 6,
20 right: 6,
21 top: 2,
22 },
23 }
24
25 function diagnostic(layer: Layer, styleSet: StyleSets) {
26 return {
27 textScaleFactor: 0.857,
28 header: {
29 border: border(layer, {
30 top: true,
31 }),
32 },
33 message: {
34 text: text(layer, "sans", styleSet, "default", { size: "sm" }),
35 highlightText: text(layer, "sans", styleSet, "default", {
36 size: "sm",
37 weight: "bold",
38 }),
39 },
40 }
41 }
42
43 const syntax = buildSyntax(colorScheme)
44
45 return {
46 textColor: syntax.primary.color,
47 background: background(layer),
48 activeLineBackground: withOpacity(background(layer, "on"), 0.75),
49 highlightedLineBackground: background(layer, "on"),
50 codeActions: {
51 indicator: foreground(layer, "variant"),
52 verticalScale: 0.55,
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}