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, "secondary"),
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: 6,
71 padding: 6,
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: {
82 color: theme.syntax.keyword.color.value,
83 weight: theme.syntax.keyword.weight.value,
84 },
85 selectedItem: {
86 ...autocompleteItem,
87 background: backgroundColor(theme, 500, "active"),
88 },
89 },
90 diagnosticHeader: {
91 background: backgroundColor(theme, 300),
92 iconWidthFactor: 1.5,
93 textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
94 border: border(theme, "secondary", {
95 bottom: true,
96 top: true,
97 }),
98 code: {
99 ...text(theme, "mono", "muted", { size: "sm" }),
100 margin: {
101 left: 10,
102 },
103 },
104 message: {
105 highlightText: text(theme, "sans", "primary", {
106 size: "sm",
107 weight: "bold",
108 }),
109 text: text(theme, "sans", "secondary", { size: "sm" }),
110 },
111 },
112 diagnosticPathHeader: {
113 background: theme.editor.line.active.value,
114 textScaleFactor: 0.857,
115 filename: text(theme, "mono", "primary", { size: "sm" }),
116 path: {
117 ...text(theme, "mono", "muted", { size: "sm" }),
118 margin: {
119 left: 12,
120 },
121 },
122 },
123 errorDiagnostic: diagnostic(theme, "error"),
124 warningDiagnostic: diagnostic(theme, "warning"),
125 informationDiagnostic: diagnostic(theme, "info"),
126 hintDiagnostic: diagnostic(theme, "info"),
127 invalidErrorDiagnostic: diagnostic(theme, "muted"),
128 invalidHintDiagnostic: diagnostic(theme, "muted"),
129 invalidInformationDiagnostic: diagnostic(theme, "muted"),
130 invalidWarningDiagnostic: diagnostic(theme, "muted"),
131 syntax: {
132 keyword: theme.syntax.keyword.color.value,
133 function: theme.syntax.function.color.value,
134 string: theme.syntax.string.color.value,
135 type: theme.syntax.type.color.value,
136 number: theme.syntax.number.color.value,
137 comment: theme.syntax.comment.color.value,
138 property: theme.syntax.property.color.value,
139 variant: theme.syntax.variant.color.value,
140 constant: theme.syntax.constant.color.value,
141 title: { color: theme.syntax.title.color.value, weight: "bold" },
142 emphasis: theme.textColor.feature.value,
143 "emphasis.strong": { color: theme.textColor.feature.value, weight: "bold" },
144 link_uri: { color: theme.syntax.linkUrl.color.value, underline: true },
145 link_text: { color: theme.syntax.linkText.color.value, italic: true },
146 list_marker: theme.syntax.punctuation.color.value,
147 },
148 };
149}