1import { colors, fontWeights, NumberToken } from "../tokens";
2import Theme, { Syntax } from "./theme";
3
4// TODO: Replace with light values
5
6const backgroundColor = {
7 100: {
8 base: colors.neutral[100],
9 hovered: colors.neutral[150],
10 active: colors.neutral[200],
11 focused: colors.neutral[150],
12 },
13 300: {
14 base: colors.neutral[50],
15 hovered: colors.neutral[100],
16 active: colors.neutral[150],
17 focused: colors.neutral[100],
18 },
19 500: {
20 base: colors.neutral[0],
21 hovered: colors.neutral[50],
22 active: colors.neutral[100],
23 focused: colors.neutral[50],
24 },
25 ok: {
26 base: colors.green[100],
27 hovered: colors.green[100],
28 active: colors.green[100],
29 focused: colors.green[100],
30 },
31 error: {
32 base: colors.red[100],
33 hovered: colors.red[100],
34 active: colors.red[100],
35 focused: colors.red[100],
36 },
37 warning: {
38 base: colors.yellow[100],
39 hovered: colors.yellow[100],
40 active: colors.yellow[100],
41 focused: colors.yellow[100],
42 },
43 info: {
44 base: colors.blue[100],
45 hovered: colors.blue[100],
46 active: colors.blue[100],
47 focused: colors.blue[100],
48 },
49};
50
51const borderColor = {
52 primary: colors.neutral[200],
53 secondary: colors.neutral[100],
54 muted: colors.neutral[50],
55 focused: colors.neutral[100],
56 active: colors.neutral[250],
57 ok: colors.green[200],
58 error: colors.red[200],
59 warning: colors.yellow[200],
60 info: colors.blue[200],
61};
62
63const textColor = {
64 primary: colors.neutral[800],
65 secondary: colors.neutral[700],
66 muted: colors.neutral[600],
67 placeholder: colors.neutral[500],
68 active: colors.neutral[900],
69 feature: colors.blue[600],
70 ok: colors.green[800],
71 error: colors.red[800],
72 warning: colors.yellow[800],
73 info: colors.blue[800],
74};
75
76const iconColor = {
77 primary: colors.neutral[300],
78 secondary: colors.neutral[500],
79 muted: colors.neutral[600],
80 placeholder: colors.neutral[700],
81 active: colors.neutral[900],
82 feature: colors.sky[600],
83 ok: colors.green[600],
84 error: colors.red[600],
85 warning: colors.yellow[400],
86 info: colors.blue[600],
87};
88
89const player = {
90 1: {
91 baseColor: colors.blue[600],
92 cursorColor: colors.blue[500],
93 selectionColor: colors.blue[100],
94 borderColor: colors.blue[500],
95 },
96 2: {
97 baseColor: colors.indigo[500],
98 cursorColor: colors.indigo[500],
99 selectionColor: colors.indigo[100],
100 borderColor: colors.indigo[500],
101 },
102 3: {
103 baseColor: colors.green[500],
104 cursorColor: colors.green[500],
105 selectionColor: colors.green[100],
106 borderColor: colors.green[500],
107 },
108 4: {
109 baseColor: colors.orange[500],
110 cursorColor: colors.orange[500],
111 selectionColor: colors.orange[100],
112 borderColor: colors.orange[500],
113 },
114 5: {
115 baseColor: colors.purple[500],
116 cursorColor: colors.purple[500],
117 selectionColor: colors.purple[100],
118 borderColor: colors.purple[500],
119 },
120 6: {
121 baseColor: colors.teal[400],
122 cursorColor: colors.teal[400],
123 selectionColor: colors.teal[100],
124 borderColor: colors.teal[400],
125 },
126 7: {
127 baseColor: colors.pink[400],
128 cursorColor: colors.pink[400],
129 selectionColor: colors.pink[100],
130 borderColor: colors.pink[400],
131 },
132 8: {
133 baseColor: colors.yellow[400],
134 cursorColor: colors.yellow[400],
135 selectionColor: colors.yellow[100],
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.12,
258 type: "number",
259};
260
261const theme: Theme = {
262 name: "light",
263 backgroundColor,
264 borderColor,
265 textColor,
266 iconColor,
267 editor,
268 syntax,
269 player,
270 shadowAlpha,
271};
272
273export default theme;