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