lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import * as tokens from '#/alf/tokens'
2import type {Mutable} from '#/alf/types'
3import {atoms} from '#/alf/atoms'
4import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
5
6export type ThemeName = 'light' | 'dim' | 'dark'
7export type ReadonlyTheme = typeof light
8export type Theme = Mutable<ReadonlyTheme>
9export type ReadonlyPalette = typeof lightPalette
10export type Palette = Mutable<ReadonlyPalette>
11
12export const lightPalette = {
13 white: tokens.color.gray_0,
14 black: tokens.color.gray_1000,
15
16 contrast_25: tokens.color.gray_25,
17 contrast_50: tokens.color.gray_50,
18 contrast_100: tokens.color.gray_100,
19 contrast_200: tokens.color.gray_200,
20 contrast_300: tokens.color.gray_300,
21 contrast_400: tokens.color.gray_400,
22 contrast_500: tokens.color.gray_500,
23 contrast_600: tokens.color.gray_600,
24 contrast_700: tokens.color.gray_700,
25 contrast_800: tokens.color.gray_800,
26 contrast_900: tokens.color.gray_900,
27 contrast_950: tokens.color.gray_950,
28 contrast_975: tokens.color.gray_975,
29
30 primary_25: tokens.color.blue_25,
31 primary_50: tokens.color.blue_50,
32 primary_100: tokens.color.blue_100,
33 primary_200: tokens.color.blue_200,
34 primary_300: tokens.color.blue_300,
35 primary_400: tokens.color.blue_400,
36 primary_500: tokens.color.blue_500,
37 primary_600: tokens.color.blue_600,
38 primary_700: tokens.color.blue_700,
39 primary_800: tokens.color.blue_800,
40 primary_900: tokens.color.blue_900,
41 primary_950: tokens.color.blue_950,
42 primary_975: tokens.color.blue_975,
43
44 positive_25: tokens.color.green_25,
45 positive_50: tokens.color.green_50,
46 positive_100: tokens.color.green_100,
47 positive_200: tokens.color.green_200,
48 positive_300: tokens.color.green_300,
49 positive_400: tokens.color.green_400,
50 positive_500: tokens.color.green_500,
51 positive_600: tokens.color.green_600,
52 positive_700: tokens.color.green_700,
53 positive_800: tokens.color.green_800,
54 positive_900: tokens.color.green_900,
55 positive_950: tokens.color.green_950,
56 positive_975: tokens.color.green_975,
57
58 negative_25: tokens.color.red_25,
59 negative_50: tokens.color.red_50,
60 negative_100: tokens.color.red_100,
61 negative_200: tokens.color.red_200,
62 negative_300: tokens.color.red_300,
63 negative_400: tokens.color.red_400,
64 negative_500: tokens.color.red_500,
65 negative_600: tokens.color.red_600,
66 negative_700: tokens.color.red_700,
67 negative_800: tokens.color.red_800,
68 negative_900: tokens.color.red_900,
69 negative_950: tokens.color.red_950,
70 negative_975: tokens.color.red_975,
71} as const
72
73export const darkPalette: Palette = {
74 white: tokens.color.gray_0,
75 black: tokens.color.trueBlack,
76
77 contrast_25: tokens.color.gray_1000,
78 contrast_50: tokens.color.gray_975,
79 contrast_100: tokens.color.gray_950,
80 contrast_200: tokens.color.gray_900,
81 contrast_300: tokens.color.gray_800,
82 contrast_400: tokens.color.gray_700,
83 contrast_500: tokens.color.gray_600,
84 contrast_600: tokens.color.gray_500,
85 contrast_700: tokens.color.gray_400,
86 contrast_800: tokens.color.gray_300,
87 contrast_900: tokens.color.gray_200,
88 contrast_950: tokens.color.gray_100,
89 contrast_975: tokens.color.gray_50,
90
91 primary_25: tokens.color.blue_25,
92 primary_50: tokens.color.blue_50,
93 primary_100: tokens.color.blue_100,
94 primary_200: tokens.color.blue_200,
95 primary_300: tokens.color.blue_300,
96 primary_400: tokens.color.blue_400,
97 primary_500: tokens.color.blue_500,
98 primary_600: tokens.color.blue_600,
99 primary_700: tokens.color.blue_700,
100 primary_800: tokens.color.blue_800,
101 primary_900: tokens.color.blue_900,
102 primary_950: tokens.color.blue_950,
103 primary_975: tokens.color.blue_975,
104
105 positive_25: tokens.color.green_25,
106 positive_50: tokens.color.green_50,
107 positive_100: tokens.color.green_100,
108 positive_200: tokens.color.green_200,
109 positive_300: tokens.color.green_300,
110 positive_400: tokens.color.green_400,
111 positive_500: tokens.color.green_500,
112 positive_600: tokens.color.green_600,
113 positive_700: tokens.color.green_700,
114 positive_800: tokens.color.green_800,
115 positive_900: tokens.color.green_900,
116 positive_950: tokens.color.green_950,
117 positive_975: tokens.color.green_975,
118
119 negative_25: tokens.color.red_25,
120 negative_50: tokens.color.red_50,
121 negative_100: tokens.color.red_100,
122 negative_200: tokens.color.red_200,
123 negative_300: tokens.color.red_300,
124 negative_400: tokens.color.red_400,
125 negative_500: tokens.color.red_500,
126 negative_600: tokens.color.red_600,
127 negative_700: tokens.color.red_700,
128 negative_800: tokens.color.red_800,
129 negative_900: tokens.color.red_900,
130 negative_950: tokens.color.red_950,
131 negative_975: tokens.color.red_975,
132} as const
133
134export const dimPalette: Palette = {
135 ...darkPalette,
136 black: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[0]}%)`,
137
138 contrast_25: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[1]}%)`,
139 contrast_50: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[2]}%)`,
140 contrast_100: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[3]}%)`,
141 contrast_200: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[4]}%)`,
142 contrast_300: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[5]}%)`,
143 contrast_400: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[6]}%)`,
144 contrast_500: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[7]}%)`,
145 contrast_600: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[8]}%)`,
146 contrast_700: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[9]}%)`,
147 contrast_800: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[10]}%)`,
148 contrast_900: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[11]}%)`,
149 contrast_950: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[12]}%)`,
150 contrast_975: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[13]}%)`,
151
152 primary_25: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[13]}%)`,
153 primary_50: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[12]}%)`,
154 primary_100: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[11]}%)`,
155 primary_200: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[10]}%)`,
156 primary_300: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[9]}%)`,
157 primary_400: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[8]}%)`,
158 primary_500: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[7]}%)`,
159 primary_600: `hsl(${BLUE_HUE}, 95%, ${tokens.dimScale[6]}%)`,
160 primary_700: `hsl(${BLUE_HUE}, 90%, ${tokens.dimScale[5]}%)`,
161 primary_800: `hsl(${BLUE_HUE}, 82%, ${tokens.dimScale[4]}%)`,
162 primary_900: `hsl(${BLUE_HUE}, 70%, ${tokens.dimScale[3]}%)`,
163 primary_950: `hsl(${BLUE_HUE}, 60%, ${tokens.dimScale[2]}%)`,
164 primary_975: `hsl(${BLUE_HUE}, 50%, ${tokens.dimScale[1]}%)`,
165
166 positive_25: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[13]}%)`,
167 positive_50: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[12]}%)`,
168 positive_100: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[11]}%)`,
169 positive_200: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[10]}%)`,
170 positive_300: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[9]}%)`,
171 positive_400: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[8]}%)`,
172 positive_500: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[7]}%)`,
173 positive_600: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[6]}%)`,
174 positive_700: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[5]}%)`,
175 positive_800: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[4]}%)`,
176 positive_900: `hsl(${GREEN_HUE}, 70%, ${tokens.dimScale[3]}%)`,
177 positive_950: `hsl(${GREEN_HUE}, 60%, ${tokens.dimScale[2]}%)`,
178 positive_975: `hsl(${GREEN_HUE}, 50%, ${tokens.dimScale[1]}%)`,
179
180 negative_25: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[13]}%)`,
181 negative_50: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[12]}%)`,
182 negative_100: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[11]}%)`,
183 negative_200: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[10]}%)`,
184 negative_300: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[9]}%)`,
185 negative_400: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[8]}%)`,
186 negative_500: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[7]}%)`,
187 negative_600: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[6]}%)`,
188 negative_700: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[5]}%)`,
189 negative_800: `hsl(${RED_HUE}, 88%, ${tokens.dimScale[4]}%)`,
190 negative_900: `hsl(${RED_HUE}, 84%, ${tokens.dimScale[3]}%)`,
191 negative_950: `hsl(${RED_HUE}, 80%, ${tokens.dimScale[2]}%)`,
192 negative_975: `hsl(${RED_HUE}, 70%, ${tokens.dimScale[1]}%)`,
193} as const
194
195export const light = {
196 name: 'light',
197 palette: lightPalette,
198 atoms: {
199 text: {
200 color: lightPalette.black,
201 },
202 text_contrast_low: {
203 color: lightPalette.contrast_400,
204 },
205 text_contrast_medium: {
206 color: lightPalette.contrast_700,
207 },
208 text_contrast_high: {
209 color: lightPalette.contrast_900,
210 },
211 text_inverted: {
212 color: lightPalette.white,
213 },
214 bg: {
215 backgroundColor: lightPalette.white,
216 },
217 bg_contrast_25: {
218 backgroundColor: lightPalette.contrast_25,
219 },
220 bg_contrast_50: {
221 backgroundColor: lightPalette.contrast_50,
222 },
223 bg_contrast_100: {
224 backgroundColor: lightPalette.contrast_100,
225 },
226 bg_contrast_200: {
227 backgroundColor: lightPalette.contrast_200,
228 },
229 bg_contrast_300: {
230 backgroundColor: lightPalette.contrast_300,
231 },
232 bg_contrast_400: {
233 backgroundColor: lightPalette.contrast_400,
234 },
235 bg_contrast_500: {
236 backgroundColor: lightPalette.contrast_500,
237 },
238 bg_contrast_600: {
239 backgroundColor: lightPalette.contrast_600,
240 },
241 bg_contrast_700: {
242 backgroundColor: lightPalette.contrast_700,
243 },
244 bg_contrast_800: {
245 backgroundColor: lightPalette.contrast_800,
246 },
247 bg_contrast_900: {
248 backgroundColor: lightPalette.contrast_900,
249 },
250 bg_contrast_950: {
251 backgroundColor: lightPalette.contrast_950,
252 },
253 bg_contrast_975: {
254 backgroundColor: lightPalette.contrast_975,
255 },
256 border_contrast_low: {
257 borderColor: lightPalette.contrast_100,
258 },
259 border_contrast_medium: {
260 borderColor: lightPalette.contrast_200,
261 },
262 border_contrast_high: {
263 borderColor: lightPalette.contrast_300,
264 },
265 shadow_sm: {
266 ...atoms.shadow_sm,
267 shadowColor: lightPalette.black,
268 },
269 shadow_md: {
270 ...atoms.shadow_md,
271 shadowColor: lightPalette.black,
272 },
273 shadow_lg: {
274 ...atoms.shadow_lg,
275 shadowColor: lightPalette.black,
276 },
277 },
278}
279
280export const dark: Theme = {
281 name: 'dark',
282 palette: darkPalette,
283 atoms: {
284 text: {
285 color: darkPalette.white,
286 },
287 text_contrast_low: {
288 color: darkPalette.contrast_400,
289 },
290 text_contrast_medium: {
291 color: darkPalette.contrast_700,
292 },
293 text_contrast_high: {
294 color: darkPalette.contrast_900,
295 },
296 text_inverted: {
297 color: darkPalette.black,
298 },
299 bg: {
300 backgroundColor: darkPalette.black,
301 },
302 bg_contrast_25: {
303 backgroundColor: darkPalette.contrast_25,
304 },
305 bg_contrast_50: {
306 backgroundColor: darkPalette.contrast_50,
307 },
308 bg_contrast_100: {
309 backgroundColor: darkPalette.contrast_100,
310 },
311 bg_contrast_200: {
312 backgroundColor: darkPalette.contrast_200,
313 },
314 bg_contrast_300: {
315 backgroundColor: darkPalette.contrast_300,
316 },
317 bg_contrast_400: {
318 backgroundColor: darkPalette.contrast_400,
319 },
320 bg_contrast_500: {
321 backgroundColor: darkPalette.contrast_500,
322 },
323 bg_contrast_600: {
324 backgroundColor: darkPalette.contrast_600,
325 },
326 bg_contrast_700: {
327 backgroundColor: darkPalette.contrast_700,
328 },
329 bg_contrast_800: {
330 backgroundColor: darkPalette.contrast_800,
331 },
332 bg_contrast_900: {
333 backgroundColor: darkPalette.contrast_900,
334 },
335 bg_contrast_950: {
336 backgroundColor: darkPalette.contrast_950,
337 },
338 bg_contrast_975: {
339 backgroundColor: darkPalette.contrast_975,
340 },
341 border_contrast_low: {
342 borderColor: darkPalette.contrast_100,
343 },
344 border_contrast_medium: {
345 borderColor: darkPalette.contrast_200,
346 },
347 border_contrast_high: {
348 borderColor: darkPalette.contrast_300,
349 },
350 shadow_sm: {
351 ...atoms.shadow_sm,
352 shadowOpacity: 0.7,
353 shadowColor: tokens.color.trueBlack,
354 },
355 shadow_md: {
356 ...atoms.shadow_md,
357 shadowOpacity: 0.7,
358 shadowColor: tokens.color.trueBlack,
359 },
360 shadow_lg: {
361 ...atoms.shadow_lg,
362 shadowOpacity: 0.7,
363 shadowColor: tokens.color.trueBlack,
364 },
365 },
366}
367
368export const dim: Theme = {
369 ...dark,
370 name: 'dim',
371 palette: dimPalette,
372 atoms: {
373 ...dark.atoms,
374 text: {
375 color: dimPalette.white,
376 },
377 text_contrast_low: {
378 color: dimPalette.contrast_400,
379 },
380 text_contrast_medium: {
381 color: dimPalette.contrast_700,
382 },
383 text_contrast_high: {
384 color: dimPalette.contrast_900,
385 },
386 text_inverted: {
387 color: dimPalette.black,
388 },
389 bg: {
390 backgroundColor: dimPalette.black,
391 },
392 bg_contrast_25: {
393 backgroundColor: dimPalette.contrast_25,
394 },
395 bg_contrast_50: {
396 backgroundColor: dimPalette.contrast_50,
397 },
398 bg_contrast_100: {
399 backgroundColor: dimPalette.contrast_100,
400 },
401 bg_contrast_200: {
402 backgroundColor: dimPalette.contrast_200,
403 },
404 bg_contrast_300: {
405 backgroundColor: dimPalette.contrast_300,
406 },
407 bg_contrast_400: {
408 backgroundColor: dimPalette.contrast_400,
409 },
410 bg_contrast_500: {
411 backgroundColor: dimPalette.contrast_500,
412 },
413 bg_contrast_600: {
414 backgroundColor: dimPalette.contrast_600,
415 },
416 bg_contrast_700: {
417 backgroundColor: dimPalette.contrast_700,
418 },
419 bg_contrast_800: {
420 backgroundColor: dimPalette.contrast_800,
421 },
422 bg_contrast_900: {
423 backgroundColor: dimPalette.contrast_900,
424 },
425 bg_contrast_950: {
426 backgroundColor: dimPalette.contrast_950,
427 },
428 bg_contrast_975: {
429 backgroundColor: dimPalette.contrast_975,
430 },
431 border_contrast_low: {
432 borderColor: dimPalette.contrast_100,
433 },
434 border_contrast_medium: {
435 borderColor: dimPalette.contrast_200,
436 },
437 border_contrast_high: {
438 borderColor: dimPalette.contrast_300,
439 },
440 shadow_sm: {
441 ...atoms.shadow_sm,
442 shadowOpacity: 0.7,
443 shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
444 },
445 shadow_md: {
446 ...atoms.shadow_md,
447 shadowOpacity: 0.7,
448 shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
449 },
450 shadow_lg: {
451 ...atoms.shadow_lg,
452 shadowOpacity: 0.7,
453 shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
454 },
455 },
456}