whey.party
prerequisite for a future hue selector (red dwarf color scheme is close enough to material you)
also removes unnecessary comments from -> https://tangled.org/jollywhoppers.com/witchsky.app/pulls/6
+4
-1
src/alf/index.tsx
+4
-1
src/alf/index.tsx
···
13
13
blackskyscheme,
14
14
blueskyscheme,
15
15
deerscheme,
16
+
kittyscheme,
17
+
reddwarfscheme,
16
18
themes,
17
19
witchskyscheme,
18
20
zeppelinscheme,
19
-
kittyscheme,
20
21
} from '#/alf/themes'
21
22
import {type Device} from '#/storage'
22
23
···
81
82
return zeppelinscheme
82
83
case 'kitty':
83
84
return kittyscheme
85
+
case 'reddwarf':
86
+
return reddwarfscheme
84
87
default:
85
88
return themes
86
89
}
+91
-154
src/alf/themes.ts
+91
-154
src/alf/themes.ts
···
301
301
302
302
export const witchskyscheme = themes
303
303
304
-
// const BLUESKY_THEMES = createThemes({
305
-
// defaultPalette: BLUESKY_PALETTE,
306
-
// subduedPalette: BLUESKY_SUBDUED_PALETTE,
307
-
// })
308
-
309
-
// export const blueskyscheme = {
310
-
// lightPalette: BLUESKY_THEMES.light.palette,
311
-
// darkPalette: BLUESKY_THEMES.dark.palette,
312
-
// dimPalette: BLUESKY_THEMES.dim.palette,
313
-
// light: BLUESKY_THEMES.light,
314
-
// dark: BLUESKY_THEMES.dark,
315
-
// dim: BLUESKY_THEMES.dim,
316
-
// }
317
-
// export const YELLOW_PALETTE: Palette = {
318
-
// white: '#FEFBFB',
319
-
// black: '#000000',
320
-
// like: '#dd5e8f',
321
-
322
-
// contrast_0: '#FEFBFB',
323
-
// contrast_25: '#F8F6EB',
324
-
// contrast_50: '#F2EDD8',
325
-
// contrast_100: '#E9E3C1',
326
-
// contrast_200: '#E0D9AA',
327
-
// contrast_300: '#D6CF94',
328
-
// contrast_400: '#CBC47F',
329
-
// contrast_500: '#C0B96B',
330
-
// contrast_600: '#A49D59',
331
-
// contrast_700: '#888249',
332
-
// contrast_800: '#6D683A',
333
-
// contrast_900: '#544F2C',
334
-
// contrast_950: '#3E391F',
335
-
// contrast_975: '#262413',
336
-
// contrast_1000: '#000000',
337
-
338
-
// primary_25: `hsl(50, 70%, 97%)`,
339
-
// primary_50: `hsl(50, 70%, 94%)`,
340
-
// primary_100: `hsl(50, 70%, 88%)`,
341
-
// primary_200: `hsl(50, 75%, 78%)`,
342
-
// primary_300: `hsl(50, 78%, 68%)`,
343
-
// primary_400: `hsl(50, 82%, 58%)`,
344
-
// primary_500: `hsl(50, 85%, 52%)`,
345
-
// primary_600: `hsl(50, 80%, 46%)`,
346
-
// primary_700: `hsl(50, 60%, 33%)`,
347
-
// primary_800: `hsl(50, 48%, 26%)`,
348
-
// primary_900: `hsl(50, 45%, 18%)`,
349
-
// primary_950: `hsl(50, 40%, 10%)`,
350
-
// primary_975: `hsl(50, 38%, 7%)`,
351
-
352
-
// positive_25: '#F3FCEB',
353
-
// positive_50: '#E8F9D5',
354
-
// positive_100: '#D4F4AE',
355
-
// positive_200: '#BEED81',
356
-
// positive_300: '#A4E34D',
357
-
// positive_400: '#8FD61E',
358
-
// positive_500: '#7AB815',
359
-
// positive_600: '#629412',
360
-
// positive_700: '#4E720F',
361
-
// positive_800: '#3C560C',
362
-
// positive_900: '#2D4109',
363
-
// positive_950: '#203006',
364
-
// positive_975: '#162204',
365
-
366
-
// negative_25: '#FFF7EB',
367
-
// negative_50: '#FEEBD3',
368
-
// negative_100: '#FDDBB3',
369
-
// negative_200: '#FBC68B',
370
-
// negative_300: '#F7A44E',
371
-
// negative_400: '#EF8217',
372
-
// negative_500: '#D86E0F',
373
-
// negative_600: '#B55B0D',
374
-
// negative_700: '#8E480A',
375
-
// negative_800: '#6C3708',
376
-
// negative_900: '#4F2906',
377
-
// negative_950: '#371D04',
378
-
// negative_975: '#261403',
379
-
// }
380
-
381
-
// export const YELLOW_SUBDUED_PALETTE: Palette = {
382
-
// white: '#FEFBFB',
383
-
// black: '#383434',
384
-
// like: '#dd5e8f',
385
-
386
-
// contrast_0: '#FEFBFB',
387
-
// contrast_25: '#F8F6EB',
388
-
// contrast_50: '#F2EDD8',
389
-
// contrast_100: '#E9E3C1',
390
-
// contrast_200: '#E0D9AA',
391
-
// contrast_300: '#D6CF94',
392
-
// contrast_400: '#CBC47F',
393
-
// contrast_500: '#C0B96B',
394
-
// contrast_600: '#A49D59',
395
-
// contrast_700: '#888249',
396
-
// contrast_800: '#6D683A',
397
-
// contrast_900: '#544F2C',
398
-
// contrast_950: '#3E391F',
399
-
// contrast_975: '#312F1A',
400
-
// contrast_1000: '#262414',
401
-
402
-
// primary_25: `hsl(50, 70%, 97%)`,
403
-
// primary_50: `hsl(50, 70%, 94%)`,
404
-
// primary_100: `hsl(50, 70%, 88%)`,
405
-
// primary_200: `hsl(50, 75%, 78%)`,
406
-
// primary_300: `hsl(50, 78%, 68%)`,
407
-
// primary_400: `hsl(50, 78%, 62%)`,
408
-
// primary_500: `hsl(50, 75%, 52%)`,
409
-
// primary_600: `hsl(50, 70%, 46%)`,
410
-
// primary_700: `hsl(50, 58%, 40%)`,
411
-
// primary_800: `hsl(50, 48%, 26%)`,
412
-
// primary_900: `hsl(50, 45%, 18%)`,
413
-
// primary_950: `hsl(50, 40%, 10%)`,
414
-
// primary_975: `hsl(50, 38%, 7%)`,
415
-
416
-
// positive_25: '#F3FCEB',
417
-
// positive_50: '#EAF9DA',
418
-
// positive_100: '#D6F4B3',
419
-
// positive_200: '#C0ED87',
420
-
// positive_300: '#A8E45A',
421
-
// positive_400: '#94D93B',
422
-
// positive_500: '#7FBE2E',
423
-
// positive_600: '#659C25',
424
-
// positive_700: '#517B1D',
425
-
// positive_800: '#405F17',
426
-
// positive_900: '#314812',
427
-
// positive_950: '#23350C',
428
-
// positive_975: '#1A2709',
429
-
430
-
// negative_25: '#FFF7EB',
431
-
// negative_50: '#FEEFE0',
432
-
// negative_100: '#FDE2C6',
433
-
// negative_200: '#FBCDA1',
434
-
// negative_300: '#F7AD68',
435
-
// negative_400: '#EF9140',
436
-
// negative_500: '#E0761F',
437
-
// negative_600: '#C06319',
438
-
// negative_700: '#995012',
439
-
// negative_800: '#75400E',
440
-
// negative_900: '#58300A',
441
-
// negative_950: '#3E2107',
442
-
// negative_975: '#2D1805',
443
-
// }
444
-
445
-
// const YELLOW_THEMES = createThemes({
446
-
// defaultPalette: YELLOW_PALETTE,
447
-
// subduedPalette: YELLOW_SUBDUED_PALETTE,
448
-
// })
449
-
450
-
// export const yellowscheme = {
451
-
// lightPalette: YELLOW_THEMES.light.palette,
452
-
// darkPalette: YELLOW_THEMES.dark.palette,
453
-
// dimPalette: YELLOW_THEMES.dim.palette,
454
-
// light: YELLOW_THEMES.light,
455
-
// dark: YELLOW_THEMES.dark,
456
-
// dim: YELLOW_THEMES.dim,
457
-
// }
458
304
export const BLACKSKY_BRAND = {
459
305
/* Neutrals */
460
306
black: '#070C0C',
···
1131
977
dim: KITTY_THEMES.dim,
1132
978
}
1133
979
980
+
const REDDWARF_TAILWIND_ATOMS = {
981
+
color_gray_25: '#fffbf9',
982
+
color_gray_50: '#fff7f5',
983
+
color_gray_100: '#fff0ee',
984
+
color_gray_200: '#f8e2de',
985
+
color_gray_300: '#eaccc7',
986
+
color_gray_400: '#bd948e',
987
+
color_gray_500: '#93655f',
988
+
color_gray_600: '#714842',
989
+
color_gray_700: '#5b342f',
990
+
color_gray_800: '#401d19',
991
+
color_gray_900: '#2c0c09',
992
+
color_gray_950: '#180000',
993
+
color_gray_970: '#0e0000',
994
+
}
995
+
996
+
const REDDWARF_TAILWIND_ATOMS_VIBRANT = {
997
+
...REDDWARF_TAILWIND_ATOMS,
998
+
color_gray_500: '#c14c42',
999
+
}
1000
+
1001
+
export const REDDWARF_SUBDUED_PALETTE: Palette = {
1002
+
...DEFAULT_SUBDUED_PALETTE,
1003
+
white: '#FFFFFF',
1004
+
black: '#000000',
1005
+
like: '#FF6B6B',
1006
+
1007
+
contrast_0: REDDWARF_TAILWIND_ATOMS.color_gray_50,
1008
+
contrast_25: REDDWARF_TAILWIND_ATOMS.color_gray_50,
1009
+
contrast_50: REDDWARF_TAILWIND_ATOMS.color_gray_100,
1010
+
contrast_100: REDDWARF_TAILWIND_ATOMS.color_gray_200,
1011
+
contrast_200: REDDWARF_TAILWIND_ATOMS.color_gray_200,
1012
+
contrast_300: REDDWARF_TAILWIND_ATOMS.color_gray_300,
1013
+
contrast_400: REDDWARF_TAILWIND_ATOMS.color_gray_400,
1014
+
contrast_500: REDDWARF_TAILWIND_ATOMS.color_gray_500,
1015
+
contrast_600: REDDWARF_TAILWIND_ATOMS.color_gray_500,
1016
+
contrast_700: REDDWARF_TAILWIND_ATOMS.color_gray_600,
1017
+
contrast_800: REDDWARF_TAILWIND_ATOMS.color_gray_600,
1018
+
contrast_900: REDDWARF_TAILWIND_ATOMS.color_gray_700,
1019
+
contrast_950: REDDWARF_TAILWIND_ATOMS.color_gray_800,
1020
+
contrast_975: REDDWARF_TAILWIND_ATOMS.color_gray_900,
1021
+
contrast_1000: REDDWARF_TAILWIND_ATOMS.color_gray_900,
1022
+
1023
+
primary_25: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_50,
1024
+
primary_50: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_100,
1025
+
primary_100: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_200,
1026
+
primary_200: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_200,
1027
+
primary_300: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_300,
1028
+
primary_400: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_400,
1029
+
primary_500: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_500,
1030
+
primary_600: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_600,
1031
+
primary_700: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_600,
1032
+
primary_800: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_700,
1033
+
primary_900: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_700,
1034
+
primary_950: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_800,
1035
+
primary_975: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_900,
1036
+
}
1037
+
1038
+
export const REDDWARF_PALETTE: Palette = {
1039
+
...REDDWARF_SUBDUED_PALETTE,
1040
+
contrast_1000: REDDWARF_TAILWIND_ATOMS.color_gray_950,
1041
+
1042
+
primary_25: REDDWARF_TAILWIND_ATOMS.color_gray_50,
1043
+
primary_50: REDDWARF_TAILWIND_ATOMS.color_gray_100,
1044
+
primary_100: REDDWARF_TAILWIND_ATOMS.color_gray_200,
1045
+
primary_200: REDDWARF_TAILWIND_ATOMS.color_gray_200,
1046
+
primary_300: REDDWARF_TAILWIND_ATOMS.color_gray_300,
1047
+
primary_400: REDDWARF_TAILWIND_ATOMS.color_gray_400,
1048
+
primary_500: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_500,
1049
+
primary_600: REDDWARF_TAILWIND_ATOMS.color_gray_600,
1050
+
primary_700: REDDWARF_TAILWIND_ATOMS.color_gray_600,
1051
+
primary_800: REDDWARF_TAILWIND_ATOMS.color_gray_700,
1052
+
primary_900: REDDWARF_TAILWIND_ATOMS.color_gray_700,
1053
+
primary_950: REDDWARF_TAILWIND_ATOMS.color_gray_800,
1054
+
primary_975: REDDWARF_TAILWIND_ATOMS.color_gray_900,
1055
+
}
1056
+
1057
+
const REDDWARF_THEMES = createThemes({
1058
+
defaultPalette: REDDWARF_PALETTE,
1059
+
subduedPalette: REDDWARF_SUBDUED_PALETTE,
1060
+
})
1061
+
1062
+
export const reddwarfscheme = {
1063
+
lightPalette: REDDWARF_THEMES.light.palette,
1064
+
darkPalette: REDDWARF_THEMES.dark.palette,
1065
+
dimPalette: REDDWARF_THEMES.dim.palette,
1066
+
light: REDDWARF_THEMES.light,
1067
+
dark: REDDWARF_THEMES.dark,
1068
+
dim: REDDWARF_THEMES.dim,
1069
+
}
1070
+
1134
1071
/**
1135
1072
* @deprecated use ALF and access palette from `useTheme()`
1136
1073
*/
+3
-1
src/screens/Settings/AppearanceSettings.tsx
+3
-1
src/screens/Settings/AppearanceSettings.tsx
···
54
54
| 'blacksky'
55
55
| 'deer'
56
56
| 'zeppelin'
57
-
| 'kitty',
57
+
| 'kitty'
58
+
| 'reddwarf',
58
59
) => {
59
60
setColorScheme(value)
60
61
},
···
89
90
{name: 'deer', label: _(msg`Deer`)},
90
91
{name: 'zeppelin', label: _(msg`Zeppelin`)},
91
92
{name: 'kitty', label: _(msg`Kitty`)},
93
+
{name: 'reddwarf', label: _(msg`RedDwarf`)},
92
94
]
93
95
94
96
return (