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