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