pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
add frost and christmas themes
+703
-1
+3
-1
src/assets/locales/en.json
+3
-1
src/assets/locales/en.json
+10
src/pages/parts/settings/AppearancePart.tsx
+10
src/pages/parts/settings/AppearancePart.tsx
···
61
61
key: "settings.appearance.themes.autumn",
62
62
},
63
63
{
64
+
id: "frost",
65
+
selector: "theme-frost",
66
+
key: "settings.appearance.themes.frost",
67
+
},
68
+
{
64
69
id: "mocha",
65
70
selector: "theme-mocha",
66
71
key: "settings.appearance.themes.mocha",
···
114
119
id: "popsicle",
115
120
selector: "theme-popsicle",
116
121
key: "settings.appearance.themes.popsicle",
122
+
},
123
+
{
124
+
id: "christmas",
125
+
selector: "theme-christmas",
126
+
key: "settings.appearance.themes.christmas",
117
127
},
118
128
{
119
129
id: "skyRealm",
+4
themes/all.ts
+4
themes/all.ts
···
18
18
import hulk from "./list/hulk";
19
19
import autumn from "./list/autumn";
20
20
import skyRealm from "./list/skyrealm";
21
+
import frost from "./list/frost";
22
+
import christmas from "./list/christmas";
21
23
22
24
export const allThemes = [
23
25
teal,
···
28
30
green,
29
31
forest,
30
32
autumn,
33
+
frost,
31
34
mocha,
32
35
pink,
33
36
grape,
···
39
42
hulk,
40
43
wolverine,
41
44
popsicle,
45
+
christmas,
42
46
skyRealm,
43
47
];
+343
themes/list/christmas.ts
+343
themes/list/christmas.ts
···
1
+
import { createTheme } from "../types";
2
+
3
+
const tokens = {
4
+
black: "hsla(0, 0%, 0%, 1)", // General black color
5
+
white: "hsla(0, 0%, 100%, 1)", // General white color
6
+
semantic: {
7
+
red: {
8
+
c100: "hsla(0, 86%, 69%, 1)", // Error text
9
+
c200: "hsla(0, 73%, 60%, 1)", // Video player scraping error
10
+
c300: "hsla(0, 66%, 56%, 1)", // Danger button
11
+
c400: "hsla(0, 55%, 45%, 1)", // Not currently used
12
+
},
13
+
green: {
14
+
c100: "hsla(125, 60%, 60%, 1)", // Success text
15
+
c200: "hsla(125, 49%, 48%, 1)", // Video player scraping success
16
+
c300: "hsla(125, 54%, 42%, 1)", // Not currently used
17
+
c400: "hsla(125, 54%, 31%, 1)", // Not currently used
18
+
},
19
+
silver: {
20
+
c100: "hsla(0, 0%, 87%, 1)", // Primary button hover
21
+
c200: "hsla(206, 33%, 78%, 1)", // Not currently used
22
+
c300: "hsla(206, 19%, 62%, 1)", // Secondary button text
23
+
c400: "hsla(206, 18%, 46%, 1)", // Main text in video player context
24
+
},
25
+
yellow: {
26
+
c100: "hsla(56, 100%, 80%, 1)", // Best onboarding highlight
27
+
c200: "hsla(56, 96%, 68%, 1)", // Dropdown highlight hover
28
+
c300: "hsla(56, 55%, 56%, 1)", // Not currently used
29
+
c400: "hsla(56, 38%, 48%, 1)", // Dropdown highlight
30
+
},
31
+
rose: {
32
+
c100: "hsla(348, 68%, 55%, 1)", // Authentication error text
33
+
c200: "hsla(348, 55%, 35%, 1)", // Danger button hover
34
+
c300: "hsla(348, 57%, 32%, 1)", // Danger button
35
+
c400: "hsla(348, 60%, 27%, 1)", // Not currently used
36
+
},
37
+
},
38
+
blue: {
39
+
c50: "hsla(0, 80%, 80%, 1)", // Christmas red accent
40
+
c100: "hsla(0, 60%, 65%, 1)",
41
+
c200: "hsla(0, 50%, 50%, 1)",
42
+
c300: "hsla(0, 55%, 40%, 1)",
43
+
c400: "hsla(0, 60%, 30%, 1)",
44
+
c500: "hsla(0, 55%, 22%, 1)",
45
+
c600: "hsla(0, 50%, 18%, 1)",
46
+
c700: "hsla(0, 45%, 14%, 1)",
47
+
c800: "hsla(0, 35%, 10%, 1)",
48
+
c900: "hsla(0, 30%, 7%, 1)",
49
+
},
50
+
purple: {
51
+
c50: "hsla(0, 80%, 75%, 1)", // Christmas red accents
52
+
c100: "hsla(0, 90%, 55%, 1)",
53
+
c200: "hsla(0, 85%, 45%, 1)",
54
+
c300: "hsla(0, 85%, 45%, 1)",
55
+
c400: "hsla(0, 80%, 35%, 1)",
56
+
c500: "hsla(0, 75%, 28%, 1)",
57
+
c600: "hsla(0, 70%, 22%, 1)",
58
+
c700: "hsla(0, 60%, 18%, 1)",
59
+
c800: "hsla(0, 50%, 14%, 1)",
60
+
c900: "hsla(0, 40%, 10%, 1)",
61
+
},
62
+
ash: {
63
+
c50: "hsla(140, 11%, 55%, 1)", // Authentication copy text hover, progress background, progress preloaded - Christmas green grays
64
+
c100: "hsla(140, 15%, 42%, 1)", // Secondary text, badge text, video player scraping no result
65
+
c200: "hsla(140, 17%, 33%, 1)", // Media card bar color, video player button background
66
+
c300: "hsla(140, 29%, 24%, 1)", // Cancel button hover, utils divider
67
+
c400: "hsla(140, 35%, 19%, 1)", // Card border and background, dropdown border, onboarding bar, edit badge hover, sidebar type
68
+
c500: "hsla(140, 35%, 17%, 1)", // Toggle disabled, cancel button, modal background, search hover background, media card shadow, settings save bar, errors card, about circle, edit badge background, video player button focus, video player flag background, video player input background, video player button over input hover
69
+
c600: "hsla(140, 32%, 14%, 1)", // Background secondary, dropdown alt background, dropdown border, onboarding card border
70
+
c700: "hsla(140, 35%, 12%, 1)", // Secondary button, media card badge, onboarding card hover, video player context card border, video player context buttons list, video player close hover
71
+
c800: "hsla(140, 33%, 9%, 1)", // Background main, settings sidebar badge, errors border
72
+
c900: "hsla(140, 25%, 7%, 1)", // Media card hover shadow, settings sidebar active link, video player context background
73
+
},
74
+
shade: {
75
+
c25: "hsla(140, 33%, 53%, 1)", // Media card hover accent - Christmas green
76
+
c50: "hsla(140, 17%, 48%, 1)", // Theme secondary color, text, dimmed text
77
+
c100: "hsla(140, 20%, 40%, 1)", // Search placeholder and icon, dropdown secondary text
78
+
c200: "hsla(140, 20%, 31%, 1)", // Pill background hover, onboarding divider
79
+
c300: "hsla(140, 22%, 25%, 1)", // Pill background, authentication border, onboarding card
80
+
c400: "hsla(140, 25%, 21%, 1)", // Background secondary hover, dropdown border, onboarding bar, onboarding divider
81
+
c500: "hsla(140, 26%, 16%, 1)", // Search background, search focus, dropdown hover background, dropdown content background, authentication input background hover, authentication word background
82
+
c600: "hsla(140, 31%, 12%, 1)", // Modal background, dropdown background, onboarding card border
83
+
c700: "hsla(140, 29%, 10%, 1)", // Dropdown alt background
84
+
c800: "hsla(140, 30%, 8%, 1)", // Background main, settings save bar, onboarding card
85
+
c900: "hsla(140, 29%, 5%, 1)", // Media card hover shadow
86
+
},
87
+
};
88
+
89
+
export default createTheme({
90
+
name: "christmas",
91
+
extend: {
92
+
colors: {
93
+
themePreview: {
94
+
primary: tokens.blue.c200,
95
+
secondary: tokens.ash.c300,
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.ash.c200,
111
+
accentB: tokens.blue.c300,
112
+
},
113
+
114
+
// light bar
115
+
lightBar: {
116
+
light: tokens.blue.c400,
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
+
});
+343
themes/list/frost.ts
+343
themes/list/frost.ts
···
1
+
import { createTheme } from "../types";
2
+
3
+
const tokens = {
4
+
black: "hsla(0, 0%, 0%, 1)", // General black color
5
+
white: "hsla(0, 0%, 100%, 1)", // General white color
6
+
semantic: {
7
+
red: {
8
+
c100: "hsla(350, 40%, 65%, 1)", // Error text - cool magenta-red
9
+
c200: "hsla(350, 35%, 55%, 1)", // Video player scraping error - muted cool red
10
+
c300: "hsla(350, 30%, 45%, 1)", // Danger button - deeper cool red
11
+
c400: "hsla(350, 25%, 35%, 1)", // Not currently used - dark cool red
12
+
},
13
+
green: {
14
+
c100: "hsla(170, 30%, 55%, 1)", // Success text - cool teal-green
15
+
c200: "hsla(170, 25%, 45%, 1)", // Video player scraping success - muted teal
16
+
c300: "hsla(170, 20%, 35%, 1)", // Not currently used - deeper cool teal
17
+
c400: "hsla(170, 15%, 25%, 1)", // Not currently used - dark cool teal
18
+
},
19
+
silver: {
20
+
c100: "hsla(210, 20%, 85%, 1)", // Primary button hover - cool blue-gray
21
+
c200: "hsla(210, 15%, 75%, 1)", // Not currently used - muted cool gray
22
+
c300: "hsla(210, 10%, 60%, 1)", // Secondary button text - subtle blue tint
23
+
c400: "hsla(210, 8%, 45%, 1)", // Main text in video player context - cool gray
24
+
},
25
+
yellow: {
26
+
c100: "hsla(190, 60%, 75%, 1)", // Best onboarding highlight - cool cyan
27
+
c200: "hsla(190, 50%, 65%, 1)", // Dropdown highlight hover - muted cyan
28
+
c300: "hsla(190, 40%, 55%, 1)", // Not currently used - deeper cyan
29
+
c400: "hsla(190, 30%, 45%, 1)", // Dropdown highlight - dark cyan
30
+
},
31
+
rose: {
32
+
c100: "hsla(320, 35%, 60%, 1)", // Authentication error text - cool magenta
33
+
c200: "hsla(320, 30%, 50%, 1)", // Danger button hover - muted cool magenta
34
+
c300: "hsla(320, 25%, 40%, 1)", // Danger button - deeper cool magenta
35
+
c400: "hsla(320, 20%, 30%, 1)", // Not currently used - dark cool magenta
36
+
},
37
+
},
38
+
blue: {
39
+
c50: "hsla(210, 100%, 88%, 1)", // soft cool blue
40
+
c100: "hsla(210, 80%, 75%, 1)", // brighter cool blue
41
+
c200: "hsla(210, 70%, 65%, 1)", // theme primary: cool blue
42
+
c300: "hsla(210, 60%, 50%, 1)", // accent B: darker cool blue
43
+
c400: "hsla(210, 50%, 40%, 1)", // light bar
44
+
c500: "hsla(210, 45%, 30%, 1)", // accent B background
45
+
c600: "hsla(210, 42%, 25%, 1)",
46
+
c700: "hsla(210, 40%, 20%, 1)",
47
+
c800: "hsla(210, 35%, 15%, 1)",
48
+
c900: "hsla(210, 30%, 10%, 1)",
49
+
},
50
+
purple: {
51
+
c50: "hsla(170, 40%, 75%, 1)", // soft cool teal for link hover
52
+
c100: "hsla(170, 45%, 60%, 1)", // bright cool teal logo/link
53
+
c200: "hsla(170, 50%, 50%, 1)", // cool teal progress/loader
54
+
c300: "hsla(170, 55%, 45%, 1)", // toggle/onboarding bar - cool teal
55
+
c400: "hsla(170, 60%, 40%, 1)", // card icon - cool teal
56
+
c500: "hsla(170, 65%, 32%, 1)", // accent A background - cool teal
57
+
c600: "hsla(170, 70%, 25%, 1)",
58
+
c700: "hsla(170, 75%, 18%, 1)",
59
+
c800: "hsla(170, 80%, 12%, 1)",
60
+
c900: "hsla(170, 85%, 8%, 1)",
61
+
},
62
+
ash: {
63
+
c50: "hsla(210, 20%, 60%, 1)", // subtle blue-tinted gray
64
+
c100: "hsla(210, 15%, 55%, 1)", // cool blue-gray
65
+
c200: "hsla(210, 10%, 35%, 1)", // sidebar border - blue tint
66
+
c300: "hsla(210, 8%, 28%, 1)", // card divider - blue tint
67
+
c400: "hsla(210, 6%, 22%, 1)", // bg + hover accents - blue tint
68
+
c500: "hsla(210, 45%, 25%, 1)", // accent B background
69
+
c600: "hsla(210, 42%, 20%, 1)",
70
+
c700: "hsla(210, 40%, 16%, 1)",
71
+
c800: "hsla(210, 35%, 10%, 1)",
72
+
c900: "hsla(210, 30%, 7%, 1)", // deepest shade, shadows
73
+
},
74
+
shade: {
75
+
c25: "hsla(210, 80%, 75%, 1)", // blue hover accent
76
+
c50: "hsla(210, 100%, 78%, 1)", // cool blue for main text
77
+
c100: "hsla(210, 80%, 65%, 1)", // placeholder/icon
78
+
c200: "hsla(210, 60%, 50%, 1)", // hover bg
79
+
c300: "hsla(210, 60%, 40%, 1)", // pill background, auth border
80
+
c400: "hsla(210, 50%, 26%, 1)", // light bar
81
+
c500: "hsla(210, 25%, 27%, 1)", // dropdown background - subtle blue tint
82
+
c600: "hsla(210, 20%, 20%, 1)", // modal/dropdown background - washed out blue
83
+
c700: "hsla(210, 15%, 16%, 1)", // alt bg - subtle blue tint
84
+
c800: "hsla(210, 38%, 12%, 1)", // main bg - lighter
85
+
c900: "hsla(210, 35%, 8%, 1)", // hover shadow - lighter
86
+
},
87
+
};
88
+
89
+
export default createTheme({
90
+
name: "frost",
91
+
extend: {
92
+
colors: {
93
+
themePreview: {
94
+
primary: tokens.blue.c200,
95
+
secondary: tokens.shade.c50,
96
+
ghost: tokens.purple.c400,
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.c400,
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.purple.c900,
179
+
hoverAccent: tokens.blue.c100,
180
+
hoverShadow: tokens.shade.c900,
181
+
shadow: tokens.purple.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
+
});