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 diff: {
64 deleted: theme.iconColor.error,
65 inserted: theme.iconColor.ok,
66 modified: theme.iconColor.warning,
67 removedWidthEm: 0.275,
68 widthEm: 0.16,
69 cornerRadius: 0.05,
70 },
71 documentHighlightReadBackground: theme.editor.highlight.occurrence,
72 documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence,
73 errorColor: theme.textColor.error,
74 gutterBackground: backgroundColor(theme, 500),
75 gutterPaddingFactor: 3.5,
76 highlightedLineBackground: theme.editor.line.highlighted,
77 lineNumber: theme.editor.gutter.primary,
78 lineNumberActive: theme.editor.gutter.active,
79 renameFade: 0.6,
80 unnecessaryCodeFade: 0.5,
81 selection: player(theme, 1).selection,
82 guestSelections: [
83 player(theme, 2).selection,
84 player(theme, 3).selection,
85 player(theme, 4).selection,
86 player(theme, 5).selection,
87 player(theme, 6).selection,
88 player(theme, 7).selection,
89 player(theme, 8).selection,
90 ],
91 autocomplete: {
92 background: backgroundColor(theme, 500),
93 cornerRadius: 8,
94 padding: 4,
95 border: border(theme, "secondary"),
96 shadow: popoverShadow(theme),
97 item: autocompleteItem,
98 hoveredItem: {
99 ...autocompleteItem,
100 background: backgroundColor(theme, 500, "hovered"),
101 },
102 margin: {
103 left: -14,
104 },
105 matchHighlight: text(theme, "mono", "feature"),
106 selectedItem: {
107 ...autocompleteItem,
108 background: backgroundColor(theme, 500, "active"),
109 },
110 },
111 diagnosticHeader: {
112 background: backgroundColor(theme, 300),
113 iconWidthFactor: 1.5,
114 textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
115 border: border(theme, "secondary", {
116 bottom: true,
117 top: true,
118 }),
119 code: {
120 ...text(theme, "mono", "secondary", { size: "sm" }),
121 margin: {
122 left: 10,
123 },
124 },
125 message: {
126 highlightText: text(theme, "sans", "primary", {
127 size: "sm",
128 weight: "bold",
129 }),
130 text: text(theme, "sans", "secondary", { size: "sm" }),
131 },
132 },
133 diagnosticPathHeader: {
134 background: theme.editor.line.active,
135 textScaleFactor: 0.857,
136 filename: text(theme, "mono", "primary", { size: "sm" }),
137 path: {
138 ...text(theme, "mono", "muted", { size: "sm" }),
139 margin: {
140 left: 12,
141 },
142 },
143 },
144 errorDiagnostic: diagnostic(theme, "error"),
145 warningDiagnostic: diagnostic(theme, "warning"),
146 informationDiagnostic: diagnostic(theme, "info"),
147 hintDiagnostic: diagnostic(theme, "info"),
148 invalidErrorDiagnostic: diagnostic(theme, "secondary"),
149 invalidHintDiagnostic: diagnostic(theme, "secondary"),
150 invalidInformationDiagnostic: diagnostic(theme, "secondary"),
151 invalidWarningDiagnostic: diagnostic(theme, "secondary"),
152 hoverPopover: hoverPopover(theme),
153 linkDefinition: {
154 color: theme.syntax.linkUri.color,
155 underline: theme.syntax.linkUri.underline,
156 },
157 jumpIcon: {
158 color: iconColor(theme, "secondary"),
159 iconWidth: 20,
160 buttonWidth: 20,
161 cornerRadius: 6,
162 padding: {
163 top: 6,
164 bottom: 6,
165 left: 6,
166 right: 6,
167 },
168 hover: {
169 color: iconColor(theme, "active"),
170 background: backgroundColor(theme, "on500"),
171 },
172 },
173 compositionMark: {
174 underline: {
175 thickness: 1.0,
176 color: borderColor(theme, "active")
177 },
178 },
179 syntax,
180 };
181}