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