1import core from "../tokens/core";
2import Theme, { NumberToken, Syntax } 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 player = {
92 1: {
93 baseColor: color.blue[600],
94 cursorColor: color.blue[600],
95 selectionColor: color.blue[600],
96 borderColor: color.blue[600],
97 },
98 2: {
99 baseColor: color.indigo[500],
100 cursorColor: color.indigo[500],
101 selectionColor: color.indigo[500],
102 borderColor: color.indigo[500],
103 },
104 3: {
105 baseColor: color.green[500],
106 cursorColor: color.green[500],
107 selectionColor: color.green[500],
108 borderColor: color.green[500],
109 },
110 4: {
111 baseColor: color.orange[500],
112 cursorColor: color.orange[500],
113 selectionColor: color.orange[500],
114 borderColor: color.orange[500],
115 },
116 5: {
117 baseColor: color.purple[500],
118 cursorColor: color.purple[500],
119 selectionColor: color.purple[500],
120 borderColor: color.purple[500],
121 },
122 6: {
123 baseColor: color.teal[400],
124 cursorColor: color.teal[400],
125 selectionColor: color.teal[400],
126 borderColor: color.teal[400],
127 },
128 7: {
129 baseColor: color.pink[400],
130 cursorColor: color.pink[400],
131 selectionColor: color.pink[400],
132 borderColor: color.pink[400],
133 },
134 8: {
135 baseColor: color.yellow[400],
136 cursorColor: color.yellow[400],
137 selectionColor: color.yellow[400],
138 borderColor: color.yellow[400],
139 },
140};
141
142// TODO: Fixup
143const editor = {
144 background: backgroundColor[500].base,
145 indent_guide: borderColor.muted,
146 indent_guide_active: borderColor.secondary,
147 line: {
148 active: color.neutral[0],
149 highlighted: color.neutral[0],
150 inserted: backgroundColor.ok.active,
151 deleted: backgroundColor.error.active,
152 modified: backgroundColor.info.active,
153 },
154 highlight: {
155 selection: player[1].selectionColor,
156 occurrence: backgroundColor[500].active,
157 activeOccurrence: color.neutral[0],
158 matchingBracket: color.neutral[0],
159 match: color.neutral[0],
160 activeMatch: color.neutral[0],
161 related: color.neutral[0],
162 },
163 gutter: {
164 primary: color.neutral[0],
165 active: color.neutral[0],
166 },
167};
168
169const syntax: Syntax = {
170 primary: {
171 color: textColor.primary,
172 weight: { value: "normal", type: "fontWeight" },
173 },
174 comment: {
175 color: color.lime[200],
176 weight: { value: "normal", type: "fontWeight" },
177 },
178 punctuation: {
179 color: textColor.primary,
180 weight: { value: "normal", type: "fontWeight" },
181 },
182 constant: {
183 color: color.neutral[150],
184 weight: { value: "normal", type: "fontWeight" },
185 },
186 keyword: {
187 color: color.sky[400],
188 weight: { value: "normal", type: "fontWeight" },
189 },
190 function: {
191 color: color.yellow[200],
192 weight: { value: "normal", type: "fontWeight" },
193 },
194 type: {
195 color: color.teal[300],
196 weight: { value: "normal", type: "fontWeight" },
197 },
198 variant: {
199 color: color.teal[300],
200 weight: { value: "normal", type: "fontWeight" },
201 },
202 property: {
203 color: color.sky[300],
204 weight: { value: "normal", type: "fontWeight" },
205 },
206 enum: {
207 color: color.sky[400],
208 weight: { value: "normal", type: "fontWeight" },
209 },
210 operator: {
211 color: color.sky[400],
212 weight: { value: "normal", type: "fontWeight" },
213 },
214 string: {
215 color: color.orange[300],
216 weight: { value: "normal", type: "fontWeight" },
217 },
218 number: {
219 color: color.neutral[150],
220 weight: { value: "normal", type: "fontWeight" },
221 },
222 boolean: {
223 color: color.neutral[150],
224 weight: { value: "normal", type: "fontWeight" },
225 },
226 predictive: {
227 color: textColor.muted,
228 weight: { value: "normal", type: "fontWeight" },
229 },
230};
231
232const shadowAlpha: NumberToken = {
233 value: 0.32,
234 type: "number"
235};
236
237const theme: Theme = {
238 name: "dark",
239 backgroundColor,
240 borderColor,
241 textColor,
242 iconColor,
243 editor,
244 syntax,
245 player,
246 shadowAlpha,
247};
248
249export default theme;