1import { color, 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: withOpacity(colors.green[600], 0.15),
38 hovered: withOpacity(colors.green[600], 0.20),
39 active: withOpacity(colors.green[600], 0.25),
40 focused: withOpacity(colors.green[600], 0.20),
41 },
42 error: {
43 base: withOpacity(colors.red[600], 0.15),
44 hovered: withOpacity(colors.red[600], 0.20),
45 active: withOpacity(colors.red[600], 0.25),
46 focused: withOpacity(colors.red[600], 0.20),
47 },
48 warning: {
49 base: withOpacity(colors.amber[400], 0.15),
50 hovered: withOpacity(colors.amber[400], 0.20),
51 active: withOpacity(colors.amber[400], 0.25),
52 focused: withOpacity(colors.amber[400], 0.20),
53 },
54 info: {
55 base: withOpacity(colors.blue[500], 0.15),
56 hovered: withOpacity(colors.blue[500], 0.20),
57 active: withOpacity(colors.blue[500], 0.25),
58 focused: withOpacity(colors.blue[500], 0.20),
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: withOpacity(colors.green[600], 0.15),
69 error: withOpacity(colors.red[500], 0.15),
70 warning: withOpacity(colors.amber[400], 0.15),
71 info: withOpacity(colors.blue[500], 0.15),
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 feature: colors.blue[400],
81 ok: colors.green[600],
82 error: colors.red[400],
83 warning: colors.amber[300],
84 info: colors.blue[500],
85};
86
87const iconColor = {
88 primary: colors.neutral[200],
89 secondary: colors.neutral[350],
90 muted: colors.neutral[600],
91 placeholder: colors.neutral[700],
92 active: colors.neutral[0],
93 feature: colors.blue[500],
94 ok: colors.green[600],
95 error: colors.red[500],
96 warning: colors.amber[400],
97 info: colors.blue[600],
98};
99
100const player = {
101 1: buildPlayer(colors.blue[500]),
102 2: buildPlayer(colors.lime[500]),
103 3: buildPlayer(colors.fuschia[500]),
104 4: buildPlayer(colors.orange[500]),
105 5: buildPlayer(colors.purple[500]),
106 6: buildPlayer(colors.teal[400]),
107 7: buildPlayer(colors.pink[400]),
108 8: buildPlayer(colors.yellow[400]),
109};
110
111const editor = {
112 background: backgroundColor[500].base,
113 indent_guide: borderColor.muted,
114 indent_guide_active: borderColor.secondary,
115 line: {
116 active: withOpacity(colors.neutral[0], 0.07),
117 highlighted: withOpacity(colors.neutral[0], 0.12),
118 inserted: backgroundColor.ok.active,
119 deleted: backgroundColor.error.active,
120 modified: backgroundColor.info.active,
121 },
122 highlight: {
123 selection: player[1].selectionColor,
124 occurrence: withOpacity(colors.neutral[0], 0.12),
125 activeOccurrence: withOpacity(colors.neutral[0], 0.16),
126 matchingBracket: backgroundColor[500].active,
127 match: withOpacity(colors.violet[700], 0.5),
128 activeMatch: withOpacity(colors.violet[600], 0.7),
129 related: backgroundColor[500].focused,
130 },
131 gutter: {
132 primary: textColor.placeholder,
133 active: textColor.active,
134 },
135};
136
137const syntax: Syntax = {
138 primary: {
139 color: colors.neutral[150],
140 weight: fontWeights.normal,
141 },
142 comment: {
143 color: colors.neutral[300],
144 weight: fontWeights.normal,
145 },
146 punctuation: {
147 color: colors.neutral[200],
148 weight: fontWeights.normal,
149 },
150 constant: {
151 color: colors.neutral[150],
152 weight: fontWeights.normal,
153 },
154 keyword: {
155 color: colors.blue[400],
156 weight: fontWeights.normal,
157 },
158 function: {
159 color: colors.yellow[200],
160 weight: fontWeights.normal,
161 },
162 type: {
163 color: colors.teal[300],
164 weight: fontWeights.normal,
165 },
166 variant: {
167 color: colors.sky[300],
168 weight: fontWeights.normal,
169 },
170 property: {
171 color: colors.blue[400],
172 weight: fontWeights.normal,
173 },
174 enum: {
175 color: colors.orange[500],
176 weight: fontWeights.normal,
177 },
178 operator: {
179 color: colors.orange[500],
180 weight: fontWeights.normal,
181 },
182 string: {
183 color: colors.orange[300],
184 weight: fontWeights.normal,
185 },
186 number: {
187 color: colors.lime[300],
188 weight: fontWeights.normal,
189 },
190 boolean: {
191 color: colors.lime[300],
192 weight: fontWeights.normal,
193 },
194 predictive: {
195 color: textColor.muted,
196 weight: fontWeights.normal,
197 },
198 title: {
199 color: colors.amber[500],
200 weight: fontWeights.bold,
201 },
202 emphasis: {
203 color: textColor.feature,
204 weight: fontWeights.normal,
205 },
206 "emphasis.strong": {
207 color: textColor.feature,
208 weight: fontWeights.bold,
209 },
210 linkUri: {
211 color: colors.lime[500],
212 weight: fontWeights.normal,
213 underline: true,
214 },
215 linkText: {
216 color: colors.orange[500],
217 weight: fontWeights.normal,
218 italic: true,
219 },
220};
221
222const shadowAlpha: NumberToken = {
223 value: 0.32,
224 type: "number",
225};
226
227const theme: Theme = {
228 name: "dark",
229 backgroundColor,
230 borderColor,
231 textColor,
232 iconColor,
233 editor,
234 syntax,
235 player,
236 shadowAlpha,
237};
238
239export default theme;