pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import { createTheme } from "../types";
2
3const tokens = {
4 black: "#000000", // General black color
5 white: "#FFFFFF", // General white color
6 semantic: {
7 red: {
8 c100: "#F46E6E", // Error text
9 c200: "#E44F4F", // Video player scraping error
10 c300: "#D74747", // Danger button
11 c400: "#B43434", // Not currently used
12 },
13 green: {
14 c100: "#60D26A", // Success text
15 c200: "#40B44B", // Video player scraping success
16 c300: "#31A33C", // Not currently used
17 c400: "#237A2B", // Not currently used
18 },
19 silver: {
20 c100: "#DEDEDE", // Primary button hover
21 c200: "#B6CAD7", // Not currently used
22 c300: "#8EA3B0", // Secondary button text
23 c400: "#617A8A", // Main text in video player context
24 },
25 yellow: {
26 c100: "#FFF599", // Best onboarding highlight
27 c200: "#FCEC61", // Dropdown highlight hover
28 c300: "#D8C947", // Not currently used
29 c400: "#AFA349", // Dropdown highlight
30 },
31 rose: {
32 c100: "#DB3D61", // Authentication error text
33 c200: "#8A293B", // Danger button hover
34 c300: "#812435", // Danger button
35 c400: "#701B2B", // Not currently used
36 },
37 },
38 blue: {
39 c50: "#c2a6ff",
40 c100: "#a182ff",
41 c200: "#825eff",
42 c300: "#6541e6",
43 c400: "#4c31cc",
44 c500: "#3a24a3",
45 c600: "#2f1c80",
46 c700: "#241561",
47 c800: "#180e42",
48 c900: "#100a2c",
49 },
50 purple: {
51 c50: "#f0b3ff",
52 c100: "#e080ff",
53 c200: "#cc4dff",
54 c300: "#b320f0",
55 c400: "#9917cc",
56 c500: "#701199",
57 c600: "#530c73",
58 c700: "#3b0852",
59 c800: "#280638",
60 c900: "#180425",
61 },
62 ash: {
63 c50: "#9b8fb1",
64 c100: "#7e7195",
65 c200: "#62577a",
66 c300: "#4a4061",
67 c400: "#3b334e",
68 c500: "#30293f",
69 c600: "#251f31",
70 c700: "#1c1726",
71 c800: "#15101b",
72 c900: "#0f0a12",
73 },
74 shade: {
75 c25: "#8a4de0",
76 c50: "#7555a8",
77 c100: "#604585",
78 c200: "#4b3666",
79 c300: "#3d2b50",
80 c400: "#312240",
81 c500: "#251931",
82 c600: "#1c1325",
83 c700: "#160f1d",
84 c800: "#110b16",
85 c900: "#0c0610",
86 },
87};
88
89export default createTheme({
90 name: "grape",
91 extend: {
92 colors: {
93 themePreview: {
94 primary: tokens.blue.c200,
95 secondary: tokens.shade.c50,
96 ghost: tokens.white,
97 },
98
99 // Branding
100 pill: {
101 background: tokens.shade.c300,
102 backgroundHover: tokens.shade.c200,
103 highlight: tokens.blue.c200,
104
105 activeBackground: tokens.shade.c300,
106 },
107
108 // meta data for the theme itself
109 global: {
110 accentA: tokens.blue.c200,
111 accentB: tokens.blue.c300,
112 },
113
114 // light bar
115 lightBar: {
116 light: tokens.blue.c800,
117 },
118
119 // Buttons
120 buttons: {
121 toggle: tokens.purple.c300,
122 toggleDisabled: tokens.ash.c500,
123 danger: tokens.semantic.rose.c300,
124 dangerHover: tokens.semantic.rose.c200,
125
126 secondary: tokens.ash.c700,
127 secondaryText: tokens.semantic.silver.c300,
128 secondaryHover: tokens.ash.c700,
129 primary: tokens.white,
130 primaryText: tokens.black,
131 primaryHover: tokens.semantic.silver.c100,
132 purple: tokens.purple.c500,
133 purpleHover: tokens.purple.c400,
134 cancel: tokens.ash.c500,
135 cancelHover: tokens.ash.c300,
136 },
137
138 // only used for body colors/textures
139 background: {
140 main: tokens.shade.c900,
141 secondary: tokens.shade.c600,
142 secondaryHover: tokens.shade.c400,
143 accentA: tokens.purple.c500,
144 accentB: tokens.blue.c500,
145 },
146
147 // Modals
148 modal: {
149 background: tokens.shade.c800,
150 },
151
152 // typography
153 type: {
154 logo: tokens.purple.c100,
155 emphasis: tokens.white,
156 text: tokens.shade.c50,
157 dimmed: tokens.shade.c50,
158 divider: tokens.ash.c500,
159 secondary: tokens.ash.c100,
160 danger: tokens.semantic.red.c100,
161 success: tokens.semantic.green.c100,
162 link: tokens.purple.c100,
163 linkHover: tokens.purple.c50,
164 },
165
166 // search bar
167 search: {
168 background: tokens.shade.c500,
169 hoverBackground: tokens.shade.c600,
170 focused: tokens.shade.c400,
171 placeholder: tokens.shade.c100,
172 icon: tokens.shade.c100,
173 text: tokens.white,
174 },
175
176 // media cards
177 mediaCard: {
178 hoverBackground: tokens.shade.c600,
179 hoverAccent: tokens.shade.c25,
180 hoverShadow: tokens.shade.c900,
181 shadow: tokens.shade.c700,
182 barColor: tokens.ash.c200,
183 barFillColor: tokens.purple.c100,
184 badge: tokens.shade.c700,
185 badgeText: tokens.ash.c100,
186 },
187
188 // Large card
189 largeCard: {
190 background: tokens.shade.c600,
191 icon: tokens.purple.c400,
192 },
193
194 // Dropdown
195 dropdown: {
196 background: tokens.shade.c600,
197 altBackground: tokens.shade.c700,
198 hoverBackground: tokens.shade.c500,
199 highlight: tokens.semantic.yellow.c400,
200 highlightHover: tokens.semantic.yellow.c200,
201 text: tokens.shade.c50,
202 secondary: tokens.shade.c100,
203 border: tokens.shade.c400,
204 contentBackground: tokens.shade.c500,
205 },
206
207 // Passphrase
208 authentication: {
209 border: tokens.shade.c300,
210 inputBg: tokens.shade.c600,
211 inputBgHover: tokens.shade.c500,
212 wordBackground: tokens.shade.c500,
213 copyText: tokens.shade.c100,
214 copyTextHover: tokens.ash.c50,
215 errorText: tokens.semantic.rose.c100,
216 },
217
218 // Settings page
219 settings: {
220 sidebar: {
221 activeLink: tokens.shade.c600,
222 badge: tokens.shade.c900,
223
224 type: {
225 secondary: tokens.shade.c200,
226 inactive: tokens.shade.c50,
227 icon: tokens.shade.c50,
228 iconActivated: tokens.purple.c200,
229 activated: tokens.purple.c50,
230 },
231 },
232
233 card: {
234 border: tokens.shade.c400,
235 background: tokens.shade.c400,
236 altBackground: tokens.shade.c400,
237 },
238
239 saveBar: {
240 background: tokens.shade.c800,
241 },
242 },
243
244 // Utilities
245 utils: {
246 divider: tokens.ash.c300,
247 },
248
249 // Onboarding
250 onboarding: {
251 bar: tokens.shade.c400,
252 barFilled: tokens.purple.c300,
253 divider: tokens.shade.c200,
254 card: tokens.shade.c800,
255 cardHover: tokens.shade.c700,
256 border: tokens.shade.c600,
257 good: tokens.purple.c100,
258 best: tokens.semantic.yellow.c100,
259 link: tokens.purple.c100,
260 },
261
262 // Error page
263 errors: {
264 card: tokens.shade.c800,
265 border: tokens.ash.c500,
266
267 type: {
268 secondary: tokens.ash.c100,
269 },
270 },
271
272 // About page
273 about: {
274 circle: tokens.ash.c500,
275 circleText: tokens.ash.c50,
276 },
277
278 // About page
279 editBadge: {
280 bg: tokens.ash.c500,
281 bgHover: tokens.ash.c400,
282 text: tokens.ash.c50,
283 },
284
285 progress: {
286 background: tokens.ash.c50,
287 preloaded: tokens.ash.c50,
288 filled: tokens.purple.c200,
289 },
290
291 // video player
292 video: {
293 buttonBackground: tokens.ash.c200,
294
295 autoPlay: {
296 background: tokens.ash.c700,
297 hover: tokens.ash.c500,
298 },
299
300 scraping: {
301 card: tokens.shade.c700,
302 error: tokens.semantic.red.c200,
303 success: tokens.semantic.green.c200,
304 loading: tokens.purple.c200,
305 noresult: tokens.ash.c100,
306 },
307
308 audio: {
309 set: tokens.purple.c200,
310 },
311
312 context: {
313 background: tokens.ash.c900,
314 light: tokens.shade.c50,
315 border: tokens.ash.c600,
316 hoverColor: tokens.ash.c600,
317 buttonFocus: tokens.ash.c500,
318 flagBg: tokens.ash.c500,
319 inputBg: tokens.ash.c600,
320 buttonOverInputHover: tokens.ash.c500,
321 inputPlaceholder: tokens.ash.c200,
322 cardBorder: tokens.ash.c700,
323 slider: tokens.ash.c50,
324 sliderFilled: tokens.purple.c200,
325 error: tokens.semantic.red.c200,
326
327 buttons: {
328 list: tokens.ash.c700,
329 active: tokens.ash.c900,
330 },
331
332 closeHover: tokens.ash.c800,
333
334 type: {
335 main: tokens.semantic.silver.c400,
336 secondary: tokens.ash.c200,
337 accent: tokens.purple.c200,
338 },
339 },
340 },
341 },
342 },
343});