pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import { createTheme } from "../types";
2
3const tokens = {
4 white: "#FFFFFF",
5 black: {
6 c50: "#000000",
7 c75: "#030303",
8 c80: "#080808",
9 c100: "#0d0d0d",
10 c125: "#141414",
11 c150: "#1a1a1a",
12 c200: "#262626",
13 c250: "#333333",
14 },
15 semantic: {
16 silver: {
17 c100: "#DEDEDE",
18 c200: "#B6CAD7",
19 c300: "#8EA3B0",
20 c400: "#617A8A",
21 },
22 },
23 purple: {
24 c50: "#8E2020",
25 c100: "#CF1F1F",
26 c200: "#CF1F1F",
27 c300: "#CF1F1F",
28 c400: "#CF1F1F",
29 c500: "#CF1F1F",
30 c600: "#b30000",
31 c700: "#8a0000",
32 c800: "#660000",
33 c900: "#400000",
34 c1000: "#180101FF",
35 },
36 shade: {
37 c50: "#7c7c7c",
38 c100: "#666666",
39 c200: "#4f4f4f",
40 c300: "#404040",
41 c400: "#343434",
42 c500: "#282828",
43 c600: "#202020",
44 c700: "#1a1a1a",
45 c800: "#151515",
46 c900: "#0e0e0e",
47 },
48 ash: {
49 c50: "#8d8d8d",
50 c100: "#6b6b6b",
51 c200: "#545454",
52 c300: "#3c3c3c",
53 c400: "#313131",
54 c500: "#2c2c2c",
55 c600: "#252525",
56 c700: "#1e1e1e",
57 c800: "#181818",
58 c900: "#111111",
59 },
60 blue: {
61 c50: "#ccccd6",
62 c100: "#a2a2a2",
63 c200: "#868686",
64 c300: "#646464",
65 c400: "#4e4e4e",
66 c500: "#383838",
67 c600: "#2e2e2e",
68 c700: "#272727",
69 c800: "#181818",
70 c900: "#0f0f0f",
71 },
72};
73
74export default createTheme({
75 name: "ember",
76 extend: {
77 colors: {
78 themePreview: {
79 primary: tokens.black.c80,
80 secondary: tokens.purple.c50,
81 },
82
83 pill: {
84 background: tokens.black.c100,
85 backgroundHover: tokens.black.c125,
86 highlight: tokens.blue.c200,
87 activeBackground: tokens.shade.c700,
88 },
89
90 global: {
91 accentA: tokens.blue.c200,
92 accentB: tokens.blue.c300,
93 },
94
95 lightBar: {
96 light: tokens.purple.c1000,
97 },
98
99 buttons: {
100 toggle: tokens.purple.c300,
101 toggleDisabled: tokens.black.c200,
102 secondary: tokens.black.c100,
103 secondaryHover: tokens.black.c150,
104 purple: tokens.purple.c600,
105 purpleHover: tokens.purple.c400,
106 cancel: tokens.black.c100,
107 cancelHover: tokens.black.c150,
108 },
109
110 background: {
111 main: tokens.black.c75,
112 secondary: tokens.black.c75,
113 secondaryHover: tokens.black.c75,
114 accentA: tokens.purple.c600,
115 accentB: tokens.black.c100,
116 },
117
118 modal: {
119 background: tokens.shade.c800,
120 },
121
122 type: {
123 logo: tokens.purple.c100,
124 text: tokens.shade.c50,
125 dimmed: tokens.shade.c50,
126 divider: tokens.ash.c500,
127 secondary: tokens.ash.c100,
128 link: tokens.purple.c100,
129 linkHover: tokens.purple.c50,
130 },
131
132 search: {
133 background: tokens.black.c100,
134 hoverBackground: tokens.shade.c900,
135 focused: tokens.black.c125,
136 placeholder: tokens.shade.c200,
137 icon: tokens.shade.c500,
138 },
139
140 mediaCard: {
141 hoverBackground: tokens.shade.c900,
142 hoverAccent: tokens.black.c250,
143 hoverShadow: tokens.black.c50,
144 shadow: tokens.shade.c800,
145 barColor: tokens.ash.c200,
146 barFillColor: tokens.purple.c100,
147 badge: tokens.shade.c700,
148 badgeText: tokens.ash.c100,
149 },
150
151 largeCard: {
152 background: tokens.black.c100,
153 icon: tokens.purple.c400,
154 },
155
156 dropdown: {
157 background: tokens.black.c100,
158 altBackground: tokens.black.c80,
159 hoverBackground: tokens.black.c150,
160 text: tokens.shade.c50,
161 secondary: tokens.shade.c100,
162 border: tokens.shade.c400,
163 contentBackground: tokens.black.c50,
164 },
165
166 authentication: {
167 border: tokens.shade.c300,
168 inputBg: tokens.black.c100,
169 inputBgHover: tokens.black.c150,
170 wordBackground: tokens.shade.c500,
171 copyText: tokens.shade.c100,
172 copyTextHover: tokens.ash.c50,
173 },
174
175 settings: {
176 sidebar: {
177 activeLink: tokens.black.c100,
178 badge: tokens.shade.c900,
179
180 type: {
181 secondary: tokens.shade.c200,
182 inactive: tokens.shade.c50,
183 icon: tokens.black.c200,
184 iconActivated: tokens.purple.c200,
185 activated: tokens.purple.c100,
186 },
187 },
188
189 card: {
190 border: tokens.shade.c700,
191 background: tokens.black.c100,
192 altBackground: tokens.black.c100,
193 },
194
195 saveBar: {
196 background: tokens.black.c50,
197 },
198 },
199
200 utils: {
201 divider: tokens.ash.c300,
202 },
203
204 errors: {
205 card: tokens.black.c75,
206 border: tokens.ash.c500,
207
208 type: {
209 secondary: tokens.ash.c100,
210 },
211 },
212
213 about: {
214 circle: tokens.black.c100,
215 circleText: tokens.ash.c50,
216 },
217
218 editBadge: {
219 bg: tokens.ash.c500,
220 bgHover: tokens.ash.c400,
221 text: tokens.ash.c50,
222 },
223
224 progress: {
225 background: tokens.ash.c50,
226 preloaded: tokens.ash.c50,
227 filled: tokens.purple.c200,
228 },
229
230 video: {
231 buttonBackground: tokens.ash.c600,
232
233 autoPlay: {
234 background: tokens.ash.c800,
235 hover: tokens.ash.c600,
236 },
237
238 scraping: {
239 card: tokens.black.c50,
240 loading: tokens.purple.c200,
241 noresult: tokens.black.c200,
242 },
243
244 audio: {
245 set: tokens.purple.c200,
246 },
247
248 context: {
249 background: tokens.black.c50,
250 light: tokens.shade.c50,
251 border: tokens.ash.c600,
252 hoverColor: tokens.ash.c600,
253 buttonFocus: tokens.ash.c500,
254 flagBg: tokens.ash.c500,
255 inputBg: tokens.black.c100,
256 buttonOverInputHover: tokens.ash.c500,
257 inputPlaceholder: tokens.ash.c200,
258 cardBorder: tokens.ash.c700,
259 slider: tokens.black.c200,
260 sliderFilled: tokens.purple.c200,
261
262 buttons: {
263 list: tokens.ash.c700,
264 active: tokens.ash.c900,
265 },
266
267 closeHover: tokens.ash.c800,
268
269 type: {
270 secondary: tokens.ash.c200,
271 accent: tokens.purple.c200,
272 main: tokens.semantic.silver.c300,
273 },
274 },
275 },
276 },
277 },
278});