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