1import Theme from "../themes/common/theme";
2import {
3 backgroundColor,
4 border,
5 borderColor,
6 iconColor,
7 player,
8 popoverShadow,
9 text,
10 textColor,
11 TextColor,
12} from "./components";
13import hoverPopover from "./hoverPopover";
14
15export default function editor(theme: Theme) {
16 const autocompleteItem = {
17 cornerRadius: 6,
18 padding: {
19 bottom: 2,
20 left: 6,
21 right: 6,
22 top: 2,
23 },
24 };
25
26 function diagnostic(theme: Theme, color: TextColor) {
27 return {
28 textScaleFactor: 0.857,
29 header: {
30 border: border(theme, "primary", {
31 top: true,
32 }),
33 },
34 message: {
35 text: text(theme, "sans", color, { size: "sm" }),
36 highlightText: text(theme, "sans", color, {
37 size: "sm",
38 weight: "bold",
39 }),
40 },
41 };
42 }
43
44 const syntax: any = {};
45 for (const syntaxKey in theme.syntax) {
46 const style = theme.syntax[syntaxKey];
47 syntax[syntaxKey] = {
48 color: style.color,
49 weight: style.weight,
50 underline: style.underline,
51 italic: style.italic,
52 };
53 }
54
55 return {
56 textColor: theme.syntax.primary.color,
57 background: backgroundColor(theme, 500),
58 activeLineBackground: theme.editor.line.active,
59 codeActions: {
60 indicator: iconColor(theme, "secondary"),
61 verticalScale: 0.618
62 },
63 diffBackgroundDeleted: theme.iconColor.error,
64 diffBackgroundInserted: theme.iconColor.ok,
65 diffBackgroundModified: theme.iconColor.warning,
66 documentHighlightReadBackground: theme.editor.highlight.occurrence,
67 documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence,
68 errorColor: theme.textColor.error,
69 gutterBackground: backgroundColor(theme, 500),
70 gutterPaddingFactor: 3.5,
71 highlightedLineBackground: theme.editor.line.highlighted,
72 lineNumber: theme.editor.gutter.primary,
73 lineNumberActive: theme.editor.gutter.active,
74 renameFade: 0.6,
75 unnecessaryCodeFade: 0.5,
76 selection: player(theme, 1).selection,
77 guestSelections: [
78 player(theme, 2).selection,
79 player(theme, 3).selection,
80 player(theme, 4).selection,
81 player(theme, 5).selection,
82 player(theme, 6).selection,
83 player(theme, 7).selection,
84 player(theme, 8).selection,
85 ],
86 autocomplete: {
87 background: backgroundColor(theme, 500),
88 cornerRadius: 8,
89 padding: 4,
90 border: border(theme, "secondary"),
91 shadow: popoverShadow(theme),
92 item: autocompleteItem,
93 hoveredItem: {
94 ...autocompleteItem,
95 background: backgroundColor(theme, 500, "hovered"),
96 },
97 margin: {
98 left: -14,
99 },
100 matchHighlight: text(theme, "mono", "feature"),
101 selectedItem: {
102 ...autocompleteItem,
103 background: backgroundColor(theme, 500, "active"),
104 },
105 },
106 diagnosticHeader: {
107 background: backgroundColor(theme, 300),
108 iconWidthFactor: 1.5,
109 textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
110 border: border(theme, "secondary", {
111 bottom: true,
112 top: true,
113 }),
114 code: {
115 ...text(theme, "mono", "secondary", { size: "sm" }),
116 margin: {
117 left: 10,
118 },
119 },
120 message: {
121 highlightText: text(theme, "sans", "primary", {
122 size: "sm",
123 weight: "bold",
124 }),
125 text: text(theme, "sans", "secondary", { size: "sm" }),
126 },
127 },
128 diagnosticPathHeader: {
129 background: theme.editor.line.active,
130 textScaleFactor: 0.857,
131 filename: text(theme, "mono", "primary", { size: "sm" }),
132 path: {
133 ...text(theme, "mono", "muted", { size: "sm" }),
134 margin: {
135 left: 12,
136 },
137 },
138 },
139 errorDiagnostic: diagnostic(theme, "error"),
140 warningDiagnostic: diagnostic(theme, "warning"),
141 informationDiagnostic: diagnostic(theme, "info"),
142 hintDiagnostic: diagnostic(theme, "info"),
143 invalidErrorDiagnostic: diagnostic(theme, "secondary"),
144 invalidHintDiagnostic: diagnostic(theme, "secondary"),
145 invalidInformationDiagnostic: diagnostic(theme, "secondary"),
146 invalidWarningDiagnostic: diagnostic(theme, "secondary"),
147 hoverPopover: hoverPopover(theme),
148 linkDefinition: {
149 color: theme.syntax.linkUri.color,
150 underline: theme.syntax.linkUri.underline,
151 },
152 jumpIcon: {
153 color: iconColor(theme, "secondary"),
154 iconWidth: 20,
155 buttonWidth: 20,
156 cornerRadius: 6,
157 padding: {
158 top: 6,
159 bottom: 6,
160 left: 6,
161 right: 6,
162 },
163 hover: {
164 color: iconColor(theme, "active"),
165 background: backgroundColor(theme, "on500"),
166 },
167 },
168 compositionMark: {
169 underline: {
170 thickness: 1.0,
171 color: borderColor(theme, "active")
172 },
173 },
174 syntax,
175 };
176}