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