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