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