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