1import core from "./core";
2import Theme from "./theme";
3
4const { color } = core;
5
6const backgroundColor = {
7 100: {
8 base: color.neutral[750],
9 hovered: color.neutral[750],
10 active: color.neutral[750],
11 focused: color.neutral[750],
12 },
13 300: {
14 base: color.neutral[800],
15 hovered: color.neutral[800],
16 active: color.neutral[800],
17 focused: color.neutral[800],
18 },
19 500: {
20 base: color.neutral[900],
21 hovered: color.neutral[900],
22 active: color.neutral[900],
23 focused: color.neutral[900],
24 },
25 ok: {
26 base: color.green[600],
27 hovered: color.green[600],
28 active: color.green[600],
29 focused: color.green[600],
30 },
31 error: {
32 base: color.red[400],
33 hovered: color.red[400],
34 active: color.red[400],
35 focused: color.red[400],
36 },
37 warning: {
38 base: color.amber[300],
39 hovered: color.amber[300],
40 active: color.amber[300],
41 focused: color.amber[300],
42 },
43 info: {
44 base: color.blue[500],
45 hovered: color.blue[500],
46 active: color.blue[500],
47 focused: color.blue[500],
48 },
49};
50
51const borderColor = {
52 primary: color.neutral[850],
53 secondary: color.neutral[700],
54 muted: color.neutral[750],
55 focused: color.neutral[100],
56 active: color.neutral[500],
57 ok: color.neutral[999],
58 error: color.neutral[999],
59 warning: color.neutral[999],
60 info: color.neutral[999],
61};
62
63const textColor = {
64 primary: color.neutral[150],
65 secondary: color.neutral[350],
66 muted: color.neutral[550],
67 placeholder: color.neutral[750],
68 active: color.neutral[0],
69 //TODO: (design) define feature and it's correct value
70 feature: color.sky[500],
71 ok: color.green[600],
72 error: color.red[400],
73 warning: color.amber[300],
74 info: color.blue[500],
75};
76
77const iconColor = {
78 primary: color.neutral[300],
79 secondary: color.neutral[500],
80 muted: color.neutral[600],
81 placeholder: color.neutral[700],
82 active: color.neutral[50],
83 //TODO: (design) define feature and it's correct value
84 feature: color.sky[500],
85 ok: color.green[600],
86 error: color.red[400],
87 warning: color.amber[300],
88 info: color.blue[500],
89};
90
91const editor = {
92 background: backgroundColor[500].base,
93 indent_guide: color.neutral[999],
94 indent_guide_active: color.neutral[999],
95 line: {
96 active: color.neutral[999],
97 highlighted: color.neutral[999],
98 inserted: color.neutral[999],
99 deleted: color.neutral[999],
100 modified: color.neutral[999],
101 },
102 highlight: {
103 selection: color.neutral[999],
104 occurrence: color.neutral[999],
105 activeOccurrence: color.neutral[999],
106 matchingBracket: color.neutral[999],
107 match: color.neutral[999],
108 activeMatch: color.neutral[999],
109 related: color.neutral[999],
110 },
111 gutter: {
112 primary: color.neutral[999],
113 active: color.neutral[999],
114 },
115};
116
117const syntax = {
118 primary: {
119 color: textColor.primary,
120 weight: { value: "normal" },
121 },
122 comment: {
123 color: color.lime[200],
124 weight: { value: "normal" },
125 },
126 punctuation: {
127 color: textColor.primary,
128 weight: { value: "normal" },
129 },
130 constant: {
131 color: color.neutral[150],
132 weight: { value: "normal" },
133 },
134 keyword: {
135 color: color.sky[400],
136 weight: { value: "normal" },
137 },
138 function: {
139 color: color.yellow[200],
140 weight: { value: "normal" },
141 },
142 type: {
143 color: color.teal[300],
144 weight: { value: "normal" },
145 },
146 variant: {
147 color: color.teal[300],
148 weight: { value: "normal" },
149 },
150 property: {
151 color: color.sky[300],
152 weight: { value: "normal" },
153 },
154 enum: {
155 color: color.sky[400],
156 weight: { value: "normal" },
157 },
158 operator: {
159 color: color.sky[400],
160 weight: { value: "normal" },
161 },
162 string: {
163 color: color.orange[300],
164 weight: { value: "normal" },
165 },
166 number: {
167 color: color.neutral[150],
168 weight: { value: "normal" },
169 },
170 boolean: {
171 color: color.neutral[150],
172 weight: { value: "normal" },
173 },
174 predictive: {
175 color: textColor.muted,
176 weight: { value: "normal" },
177 },
178};
179
180const player = {
181 1: {
182 baseColor: color.blue[600],
183 cursorColor: color.blue[600],
184 selectionColor: color.blue[600],
185 borderColor: color.blue[600],
186 },
187 2: {
188 baseColor: color.indigo[500],
189 cursorColor: color.indigo[500],
190 selectionColor: color.indigo[500],
191 borderColor: color.indigo[500],
192 },
193 3: {
194 baseColor: color.green[500],
195 cursorColor: color.green[500],
196 selectionColor: color.green[500],
197 borderColor: color.green[500],
198 },
199 4: {
200 baseColor: color.orange[500],
201 cursorColor: color.orange[500],
202 selectionColor: color.orange[500],
203 borderColor: color.orange[500],
204 },
205 5: {
206 baseColor: color.purple[500],
207 cursorColor: color.purple[500],
208 selectionColor: color.purple[500],
209 borderColor: color.purple[500],
210 },
211 6: {
212 baseColor: color.teal[400],
213 cursorColor: color.teal[400],
214 selectionColor: color.teal[400],
215 borderColor: color.teal[400],
216 },
217 7: {
218 baseColor: color.pink[400],
219 cursorColor: color.pink[400],
220 selectionColor: color.pink[400],
221 borderColor: color.pink[400],
222 },
223 8: {
224 baseColor: color.yellow[400],
225 cursorColor: color.yellow[400],
226 selectionColor: color.yellow[400],
227 borderColor: color.yellow[400],
228 },
229};
230
231const shadowAlpha = {
232 value: 0.32,
233};
234
235export default function dark(): Theme {
236 return {
237 backgroundColor,
238 borderColor,
239 textColor,
240 iconColor,
241 editor,
242 syntax,
243 player,
244 shadowAlpha,
245 };
246}