robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
xan.lol
1import {
2 createThemes,
3 // I REJECT NODE MODULE SOCIETY
4 // DEFAULT_PALETTE,
5 // DEFAULT_SUBDUED_PALETTE,
6} from '@bsky.app/alf'
7
8import {
9 BLUE_HUE as BLACKSKY_BLUE_HUE,
10 BLUE_HUE as ZEPPELIN_BLUE_HUE,
11 defaultScale as ZEPPELIN_defaultScale,
12 // defaultScale as BLACKSKY_defaultScale,
13 dimScale as BLACKSKY_dimScale,
14 dimScale as ZEPPELIN_dimScale,
15 GREEN_HUE as BLACKSKY_GREEN_HUE,
16 GREEN_HUE as ZEPPELIN_GREEN_HUE,
17 RED_HUE as BLACKSKY_RED_HUE,
18 RED_HUE as ZEPPELIN_RED_HUE,
19} from '#/alf/util/blackskyColorGeneration'
20import {
21 BLUE_HUE as DEER_BLUE_HUE,
22 defaultScale as DEER_defaultScale,
23 // dimScale as DEER_dimScale,
24 GREEN_HUE as DEER_GREEN_HUE,
25 RED_HUE as DEER_RED_HUE,
26} from '#/alf/util/deerColorGeneration'
27
28export type Palette = {
29 white: string
30 black: string
31 like: string
32 pink: string
33 yellow: string
34
35 contrast_0: string
36 contrast_25: string
37 contrast_50: string
38 contrast_100: string
39 contrast_200: string
40 contrast_300: string
41 contrast_400: string
42 contrast_500: string
43 contrast_600: string
44 contrast_700: string
45 contrast_800: string
46 contrast_900: string
47 contrast_950: string
48 contrast_975: string
49 contrast_1000: string
50
51 primary_25: string
52 primary_50: string
53 primary_100: string
54 primary_200: string
55 primary_300: string
56 primary_400: string
57 primary_500: string
58 primary_600: string
59 primary_700: string
60 primary_800: string
61 primary_900: string
62 primary_950: string
63 primary_975: string
64
65 positive_25: string
66 positive_50: string
67 positive_100: string
68 positive_200: string
69 positive_300: string
70 positive_400: string
71 positive_500: string
72 positive_600: string
73 positive_700: string
74 positive_800: string
75 positive_900: string
76 positive_950: string
77 positive_975: string
78
79 negative_25: string
80 negative_50: string
81 negative_100: string
82 negative_200: string
83 negative_300: string
84 negative_400: string
85 negative_500: string
86 negative_600: string
87 negative_700: string
88 negative_800: string
89 negative_900: string
90 negative_950: string
91 negative_975: string
92}
93
94const STATIC_VALUES = {
95 white: '#FEFBFB',
96 black: '#000000',
97 pink: '#EC4899',
98 yellow: '#FFC404',
99}
100
101export const DEFAULT_PALETTE: Palette = {
102 white: '#FEFBFB',
103 black: '#000000',
104 like: '#dd5e8f',
105 pink: STATIC_VALUES.pink,
106 yellow: STATIC_VALUES.yellow,
107
108 contrast_0: '#FEFBFB',
109 contrast_25: '#ECE9E9',
110 contrast_50: '#DBD8D8',
111 contrast_100: '#C9C7C7',
112 contrast_200: '#B8B6B6',
113 contrast_300: '#A8A5A5',
114 contrast_400: '#979595',
115 contrast_500: '#878585',
116 contrast_600: '#787575',
117 contrast_700: '#686666',
118 contrast_800: '#595757',
119 contrast_900: '#4B4848',
120 contrast_950: '#3D3A3A',
121 contrast_975: '#1b1a1aff',
122 contrast_1000: '#000000ff',
123
124 primary_25: `hsl(5, 30%, 97%)`,
125 primary_50: `hsl(5, 30%, 95%)`,
126 primary_100: `hsl(5, 30%, 90%)`,
127 primary_200: `hsl(5, 52%, 80%)`,
128 primary_300: `hsl(5, 64%, 70%)`,
129 primary_400: `hsl(5, 75%, 58%)`,
130 primary_500: `hsl(5, 82%, 60%)`,
131 primary_600: `hsl(5, 80%, 54%)`,
132 primary_700: `hsl(5, 40%, 32%)`,
133 primary_800: `hsl(5, 42%, 25%)`,
134 primary_900: `hsl(5, 45%, 18%)`,
135 primary_950: `hsl(5, 48%, 10%)`,
136 primary_975: `hsl(5, 50%, 7%)`,
137
138 positive_25: '#ECFEF5',
139 positive_50: '#D3FDE8',
140 positive_100: '#A3FACF',
141 positive_200: '#6AF6B0',
142 positive_300: '#2CF28F',
143 positive_400: '#0DD370',
144 positive_500: '#09B35E',
145 positive_600: '#04904A',
146 positive_700: '#036D38',
147 positive_800: '#04522B',
148 positive_900: '#033F21',
149 positive_950: '#032A17',
150 positive_975: '#021D0F',
151
152 negative_25: '#FFF5F7',
153 negative_50: '#FEE7EC',
154 negative_100: '#FDD3DD',
155 negative_200: '#FBBBCA',
156 negative_300: '#F891A9',
157 negative_400: '#F65A7F',
158 negative_500: '#E91646',
159 negative_600: '#CA123D',
160 negative_700: '#A71134',
161 negative_800: '#7F0B26',
162 negative_900: '#5F071C',
163 negative_950: '#430413',
164 negative_975: '#30030D',
165}
166
167export const DEFAULT_SUBDUED_PALETTE: Palette = {
168 white: '#FEFBFB',
169 black: '#383434',
170 like: '#dd5e8f',
171 pink: STATIC_VALUES.pink,
172 yellow: STATIC_VALUES.yellow,
173
174 contrast_0: '#FEFBFB',
175 contrast_25: '#ECE9E9',
176 contrast_50: '#DBD8D8',
177 contrast_100: '#C9C7C7',
178 contrast_200: '#B8B6B6',
179 contrast_300: '#A8A5A5',
180 contrast_400: '#979595',
181 contrast_500: '#878585',
182 contrast_600: '#787575',
183 contrast_700: '#686666',
184 contrast_800: '#595757',
185 contrast_900: '#4B4848',
186 contrast_950: '#3D3A3A',
187 contrast_975: '#2F2D2D',
188 contrast_1000: '#222020',
189
190 primary_25: `hsl(5, 30%, 97%)`,
191 primary_50: `hsl(5, 30%, 95%)`,
192 primary_100: `hsl(5, 30%, 90%)`,
193 primary_200: `hsl(5, 52%, 80%)`,
194 primary_300: `hsl(5, 64%, 70%)`,
195 primary_400: `hsl(5, 84%, 66%)`,
196 primary_500: `hsl(5, 82%, 60%)`,
197 primary_600: `hsl(5, 80%, 54%)`,
198 primary_700: `hsl(5, 58%, 55%)`,
199 primary_800: `hsl(5, 42%, 25%)`,
200 primary_900: `hsl(5, 45%, 18%)`,
201 primary_950: `hsl(5, 48%, 10%)`,
202 primary_975: `hsl(5, 50%, 7%)`,
203
204 positive_25: '#ECFEF5',
205 positive_50: '#D8FDEB',
206 positive_100: '#A8FAD1',
207 positive_200: '#6FF6B3',
208 positive_300: '#31F291',
209 positive_400: '#0EDD75',
210 positive_500: '#0AC266',
211 positive_600: '#049F52',
212 positive_700: '#038142',
213 positive_800: '#056636',
214 positive_900: '#04522B',
215 positive_950: '#053D21',
216 positive_975: '#052917',
217
218 negative_25: '#FFF5F7',
219 negative_50: '#FEEBEF',
220 negative_100: '#FDD8E1',
221 negative_200: '#FCC0CE',
222 negative_300: '#F99AB0',
223 negative_400: '#F76486',
224 negative_500: '#EB2452',
225 negative_600: '#D81341',
226 negative_700: '#BA1239',
227 negative_800: '#910D2C',
228 negative_900: '#6F0B22',
229 negative_950: '#500B1C',
230 negative_975: '#3E0915',
231}
232
233export function invertPalette(palette: Palette) {
234 return {
235 white: palette.white,
236 black: palette.black,
237 like: palette.like,
238
239 contrast_0: palette.contrast_1000,
240 contrast_25: palette.contrast_975,
241 contrast_50: palette.contrast_950,
242 contrast_100: palette.contrast_900,
243 contrast_200: palette.contrast_800,
244 contrast_300: palette.contrast_700,
245 contrast_400: palette.contrast_600,
246 contrast_500: palette.contrast_500,
247 contrast_600: palette.contrast_400,
248 contrast_700: palette.contrast_300,
249 contrast_800: palette.contrast_200,
250 contrast_900: palette.contrast_100,
251 contrast_950: palette.contrast_50,
252 contrast_975: palette.contrast_25,
253 contrast_1000: palette.contrast_0,
254
255 primary_25: palette.primary_975,
256 primary_50: palette.primary_950,
257 primary_100: palette.primary_900,
258 primary_200: palette.primary_800,
259 primary_300: palette.primary_700,
260 primary_400: palette.primary_600,
261 primary_500: palette.primary_500,
262 primary_600: palette.primary_400,
263 primary_700: palette.primary_300,
264 primary_800: palette.primary_200,
265 primary_900: palette.primary_100,
266 primary_950: palette.primary_50,
267 primary_975: palette.primary_25,
268
269 positive_25: palette.positive_975,
270 positive_50: palette.positive_950,
271 positive_100: palette.positive_900,
272 positive_200: palette.positive_800,
273 positive_300: palette.positive_700,
274 positive_400: palette.positive_600,
275 positive_500: palette.positive_500,
276 positive_600: palette.positive_400,
277 positive_700: palette.positive_300,
278 positive_800: palette.positive_200,
279 positive_900: palette.positive_100,
280 positive_950: palette.positive_50,
281 positive_975: palette.positive_25,
282
283 negative_25: palette.negative_975,
284 negative_50: palette.negative_950,
285 negative_100: palette.negative_900,
286 negative_200: palette.negative_800,
287 negative_300: palette.negative_700,
288 negative_400: palette.negative_600,
289 negative_500: palette.negative_500,
290 negative_600: palette.negative_400,
291 negative_700: palette.negative_300,
292 negative_800: palette.negative_200,
293 negative_900: palette.negative_100,
294 negative_950: palette.negative_50,
295 negative_975: palette.negative_25,
296 }
297}
298
299const DEFAULT_THEMES = createThemes({
300 defaultPalette: DEFAULT_PALETTE,
301 subduedPalette: DEFAULT_SUBDUED_PALETTE,
302})
303
304export const themes = {
305 lightPalette: DEFAULT_THEMES.light.palette,
306 darkPalette: DEFAULT_THEMES.dark.palette,
307 dimPalette: DEFAULT_THEMES.dim.palette,
308 light: DEFAULT_THEMES.light,
309 dark: DEFAULT_THEMES.dark,
310 dim: DEFAULT_THEMES.dim,
311}
312
313export const witchskyscheme = themes
314
315export const BLACKSKY_BRAND = {
316 /* Neutrals */
317 black: '#070C0C',
318 white: '#F8FAF9',
319 twilight: '#161E27',
320 gray300: '#C8CAC9',
321 gray400: '#9C9E9E',
322 gray600: '#6A6A6A',
323
324 /* Primary / “Indigo‑violet” */
325 primaryLight: '#6060E9',
326 primaryLightTint: '#EAEBFC',
327 primaryDark: '#8686FF',
328 primaryDarkTint: '#464985',
329
330 /* Accent / Lime‑green (“success”) */
331 secondary: '#D2FC51',
332 secondaryTint: '#F1FECB',
333
334 /* Negative / Brand red */
335 negative: '#F40B42',
336} as const
337
338const scaleLight = (idx: number) => BLACKSKY_dimScale[idx]
339
340export const BLACKSKY_PALETTE: Palette = {
341 white: BLACKSKY_BRAND.white,
342 black: BLACKSKY_BRAND.black,
343 pink: STATIC_VALUES.pink,
344 yellow: STATIC_VALUES.yellow,
345 like: STATIC_VALUES.pink,
346
347 // neutrals
348 contrast_0: BLACKSKY_BRAND.white,
349 contrast_25: BLACKSKY_BRAND.white, // Very Light
350 contrast_50: '#F0F2F2',
351 contrast_100: '#E6E8E8',
352 contrast_200: '#D1D3D3',
353 contrast_300: '#B6B8B8',
354 contrast_400: '#9C9E9E',
355 contrast_500: '#818383',
356 contrast_600: '#6A6A6A',
357 contrast_700: '#4F5050',
358 contrast_800: '#353636',
359 contrast_900: '#1F2020',
360 contrast_950: '#121313',
361 contrast_975: '#0B0C0C',
362 contrast_1000: BLACKSKY_BRAND.black,
363
364 // primary (light scheme)
365 // Tuned to ensure _975 isn't too saturated so the inverted Dark Mode background is clean.
366 primary_25: BLACKSKY_BRAND.primaryLightTint,
367 primary_50: '#DCDDFA',
368 primary_100: '#C6C8F5',
369 primary_200: '#B0B3F0',
370 primary_300: '#989CED',
371 primary_400: '#8286E7',
372 primary_500: BLACKSKY_BRAND.primaryLight,
373 primary_600: '#5252C3',
374 primary_700: '#4545A8',
375 primary_800: '#38388D',
376 primary_900: '#2B2B71',
377 primary_950: '#151540', // Deepened and desaturated slightly
378 primary_975: '#0B0B24', // Almost black-blue, ensures Dark Mode BG isn't "muddy blue"
379
380 // success
381 positive_25: BLACKSKY_BRAND.secondaryTint,
382 positive_50: '#EAFDD1',
383 positive_100: '#DAFCAB',
384 positive_200: '#C8FC80',
385 positive_300: '#BBFB66',
386 positive_400: '#AEFA59',
387 positive_500: BLACKSKY_BRAND.secondary,
388 positive_600: '#A0EC46',
389 positive_700: '#82C838',
390 positive_800: '#66942A',
391 positive_900: '#4A601C',
392 positive_950: '#2E3B0E',
393 positive_975: '#181F07',
394
395 // error
396 negative_25: '#FFE5EC',
397 negative_50: '#FFD9E3',
398 negative_100: '#FFC1D1',
399 negative_200: '#FF9AB3',
400 negative_300: '#FF7396',
401 negative_400: '#FF4B78',
402 negative_500: BLACKSKY_BRAND.negative,
403 negative_600: '#C00A32',
404 negative_700: '#920826',
405 negative_800: '#630619',
406 negative_900: '#35030D',
407 negative_950: '#1B0206',
408 negative_975: '#0E0103',
409} as const
410
411// The Subdued palette must be defined as a LIGHT palette.
412// createThemes will then INVERT this to create the Dim (Dark Blue) theme.
413// We map _25 to High Lightness and _975 to Low Lightness.
414export const BLACKSKY_SUBDUED_PALETTE: Palette = {
415 ...BLACKSKY_PALETTE,
416
417 // Override black to a softer twilight for the text in Light mode (optional)
418 // or primarily for the background color in the inverted Dim mode.
419 black: '#161E27',
420
421 // Neutral / Contrast Scale (Blue-Tinted Grays)
422 // We utilize the dimScale in reverse: [14] is lightest, [1] is darkest.
423 contrast_0: '#FFFFFF',
424 contrast_25: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(14)}%)`, // Lightest
425 contrast_50: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(13)}%)`,
426 contrast_100: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(12)}%)`,
427 contrast_200: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(11)}%)`,
428 contrast_300: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(10)}%)`,
429 contrast_400: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(9)}%)`,
430 contrast_500: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(8)}%)`,
431 contrast_600: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(7)}%)`,
432 contrast_700: `hsl(${BLACKSKY_BLUE_HUE}, 15%, ${scaleLight(5)}%)`,
433 contrast_800: `hsl(${BLACKSKY_BLUE_HUE}, 20%, ${scaleLight(4)}%)`,
434 contrast_900: `hsl(${BLACKSKY_BLUE_HUE}, 24%, ${scaleLight(3)}%)`,
435 contrast_950: `hsl(${BLACKSKY_BLUE_HUE}, 28%, ${scaleLight(2)}%)`,
436 contrast_975: `hsl(${BLACKSKY_BLUE_HUE}, 30%, ${scaleLight(1)}%)`, // Darkest
437 contrast_1000: `hsl(${BLACKSKY_BLUE_HUE}, 30%, 8%)`, // Absolute Darkest
438
439 // Subdued Primary
440 // Less saturation than the main palette to fit the "Subdued" vibe
441 primary_25: `hsl(240, 60%, 97%)`,
442 primary_50: `hsl(240, 60%, 95%)`,
443 primary_100: `hsl(240, 55%, 90%)`,
444 primary_200: `hsl(240, 50%, 80%)`,
445 primary_300: `hsl(240, 45%, 70%)`,
446 primary_400: `hsl(240, 40%, 60%)`,
447 primary_500: `hsl(240, 35%, 50%)`, // Midpoint
448 primary_600: `hsl(240, 40%, 45%)`,
449 primary_700: `hsl(240, 45%, 35%)`,
450 primary_800: `hsl(240, 50%, 25%)`,
451 primary_900: `hsl(240, 50%, 15%)`,
452 primary_950: `hsl(240, 50%, 10%)`,
453 primary_975: `hsl(240, 50%, 6%)`,
454
455 // Subdued Success
456 positive_25: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 96%)`,
457 positive_50: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 93%)`,
458 positive_100: `hsl(${BLACKSKY_GREEN_HUE}, 55%, 88%)`,
459 positive_200: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 80%)`,
460 positive_300: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 70%)`,
461 positive_400: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 60%)`,
462 positive_500: `hsl(${BLACKSKY_GREEN_HUE}, 50%, 50%)`,
463 positive_600: `hsl(${BLACKSKY_GREEN_HUE}, 55%, 40%)`,
464 positive_700: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 30%)`,
465 positive_800: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 20%)`,
466 positive_900: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 15%)`,
467 positive_950: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 10%)`,
468 positive_975: `hsl(${BLACKSKY_GREEN_HUE}, 60%, 5%)`,
469
470 // Subdued Negative
471 negative_25: `hsl(${BLACKSKY_RED_HUE}, 70%, 97%)`,
472 negative_50: `hsl(${BLACKSKY_RED_HUE}, 70%, 95%)`,
473 negative_100: `hsl(${BLACKSKY_RED_HUE}, 65%, 90%)`,
474 negative_200: `hsl(${BLACKSKY_RED_HUE}, 60%, 80%)`,
475 negative_300: `hsl(${BLACKSKY_RED_HUE}, 55%, 70%)`,
476 negative_400: `hsl(${BLACKSKY_RED_HUE}, 55%, 60%)`,
477 negative_500: `hsl(${BLACKSKY_RED_HUE}, 60%, 50%)`,
478 negative_600: `hsl(${BLACKSKY_RED_HUE}, 60%, 45%)`,
479 negative_700: `hsl(${BLACKSKY_RED_HUE}, 65%, 35%)`,
480 negative_800: `hsl(${BLACKSKY_RED_HUE}, 65%, 25%)`,
481 negative_900: `hsl(${BLACKSKY_RED_HUE}, 70%, 15%)`,
482 negative_950: `hsl(${BLACKSKY_RED_HUE}, 70%, 10%)`,
483 negative_975: `hsl(${BLACKSKY_RED_HUE}, 70%, 5%)`,
484} as const
485
486const BLACKSKY_THEMES = createThemes({
487 defaultPalette: BLACKSKY_PALETTE,
488 subduedPalette: BLACKSKY_SUBDUED_PALETTE,
489})
490
491export const blackskyscheme = {
492 lightPalette: BLACKSKY_THEMES.light.palette,
493 darkPalette: BLACKSKY_THEMES.dark.palette,
494 dimPalette: BLACKSKY_THEMES.dim.palette,
495 light: BLACKSKY_THEMES.light,
496 dark: BLACKSKY_THEMES.dark,
497 dim: BLACKSKY_THEMES.dim,
498}
499
500export const BLUESKY_PALETTE: Palette = {
501 white: STATIC_VALUES.white,
502 black: STATIC_VALUES.black,
503 pink: STATIC_VALUES.pink,
504 yellow: STATIC_VALUES.yellow,
505 like: STATIC_VALUES.pink,
506
507 contrast_0: '#FFFFFF',
508 contrast_25: '#F9FAFB',
509 contrast_50: '#EFF2F6',
510 contrast_100: '#DCE2EA',
511 contrast_200: '#C0CAD8',
512 contrast_300: '#A5B2C5',
513 contrast_400: '#8798B0',
514 contrast_500: '#667B99',
515 contrast_600: '#526580',
516 contrast_700: '#405168',
517 contrast_800: '#313F54',
518 contrast_900: '#232E3E',
519 contrast_950: '#19222E',
520 contrast_975: '#111822',
521 contrast_1000: '#000000',
522
523 primary_25: '#F5F9FF',
524 primary_50: '#E5F0FF',
525 primary_100: '#CCE1FF',
526 primary_200: '#A8CCFF',
527 primary_300: '#75AFFF',
528 primary_400: '#4291FF',
529 primary_500: '#006AFF',
530 primary_600: '#0059D6',
531 primary_700: '#0048AD',
532 primary_800: '#00398A',
533 primary_900: '#002861',
534 primary_950: '#001E47',
535 primary_975: '#001533',
536
537 positive_25: '#ECFEF5',
538 positive_50: '#D3FDE8',
539 positive_100: '#A3FACF',
540 positive_200: '#6AF6B0',
541 positive_300: '#2CF28F',
542 positive_400: '#0DD370',
543 positive_500: '#09B35E',
544 positive_600: '#04904A',
545 positive_700: '#036D38',
546 positive_800: '#04522B',
547 positive_900: '#033F21',
548 positive_950: '#032A17',
549 positive_975: '#021D0F',
550
551 negative_25: '#FFF5F7',
552 negative_50: '#FEE7EC',
553 negative_100: '#FDD3DD',
554 negative_200: '#FBBBCA',
555 negative_300: '#F891A9',
556 negative_400: '#F65A7F',
557 negative_500: '#E91646',
558 negative_600: '#CA123D',
559 negative_700: '#A71134',
560 negative_800: '#7F0B26',
561 negative_900: '#5F071C',
562 negative_950: '#430413',
563 negative_975: '#30030D',
564}
565
566export const BLUESKY_SUBDUED_PALETTE: Palette = {
567 white: STATIC_VALUES.white,
568 black: STATIC_VALUES.black,
569 pink: STATIC_VALUES.pink,
570 yellow: STATIC_VALUES.yellow,
571 like: STATIC_VALUES.pink,
572
573 contrast_0: '#FFFFFF',
574 contrast_25: '#F9FAFB',
575 contrast_50: '#F2F4F8',
576 contrast_100: '#E2E7EE',
577 contrast_200: '#C3CDDA',
578 contrast_300: '#ABB8C9',
579 contrast_400: '#8D9DB4',
580 contrast_500: '#6F839F',
581 contrast_600: '#586C89',
582 contrast_700: '#485B75',
583 contrast_800: '#394960',
584 contrast_900: '#2C3A4E',
585 contrast_950: '#222E3F',
586 contrast_975: '#1C2736',
587 contrast_1000: '#151D28',
588
589 primary_25: '#F5F9FF',
590 primary_50: '#EBF3FF',
591 primary_100: '#D6E7FF',
592 primary_200: '#ADCFFF',
593 primary_300: '#80B5FF',
594 primary_400: '#4D97FF',
595 primary_500: '#0F73FF',
596 primary_600: '#0661E0',
597 primary_700: '#0A52B8',
598 primary_800: '#0E4490',
599 primary_900: '#123464',
600 primary_950: '#122949',
601 primary_975: '#122136',
602
603 positive_25: '#ECFEF5',
604 positive_50: '#D8FDEB',
605 positive_100: '#A8FAD1',
606 positive_200: '#6FF6B3',
607 positive_300: '#31F291',
608 positive_400: '#0EDD75',
609 positive_500: '#0AC266',
610 positive_600: '#049F52',
611 positive_700: '#038142',
612 positive_800: '#056636',
613 positive_900: '#04522B',
614 positive_950: '#053D21',
615 positive_975: '#052917',
616
617 negative_25: '#FFF5F7',
618 negative_50: '#FEEBEF',
619 negative_100: '#FDD8E1',
620 negative_200: '#FCC0CE',
621 negative_300: '#F99AB0',
622 negative_400: '#F76486',
623 negative_500: '#EB2452',
624 negative_600: '#D81341',
625 negative_700: '#BA1239',
626 negative_800: '#910D2C',
627 negative_900: '#6F0B22',
628 negative_950: '#500B1C',
629 negative_975: '#3E0915',
630}
631
632const BLUESKY_THEMES = createThemes({
633 defaultPalette: BLUESKY_PALETTE,
634 subduedPalette: BLUESKY_SUBDUED_PALETTE,
635})
636
637export const blueskyscheme = {
638 lightPalette: BLUESKY_THEMES.light.palette,
639 darkPalette: BLUESKY_THEMES.dark.palette,
640 dimPalette: BLUESKY_THEMES.dim.palette,
641 light: BLUESKY_THEMES.light,
642 dark: BLUESKY_THEMES.dark,
643 dim: BLUESKY_THEMES.dim,
644}
645
646export const DEER_PALETTE: Palette = {
647 white: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`,
648 black: STATIC_VALUES.black,
649 pink: STATIC_VALUES.pink,
650 yellow: STATIC_VALUES.yellow,
651 like: STATIC_VALUES.pink,
652
653 contrast_0: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`,
654 contrast_25: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[13]}%)`,
655 contrast_50: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[12]}%)`,
656 contrast_100: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[11]}%)`,
657 contrast_200: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[10]}%)`,
658 contrast_300: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[9]}%)`,
659 contrast_400: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[8]}%)`,
660 contrast_500: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[7]}%)`,
661 contrast_600: `hsl(${DEER_BLUE_HUE}, 24%, ${DEER_defaultScale[6]}%)`,
662 contrast_700: `hsl(${DEER_BLUE_HUE}, 24%, ${DEER_defaultScale[5]}%)`,
663 contrast_800: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[4]}%)`,
664 contrast_900: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[3]}%)`,
665 contrast_950: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[2]}%)`,
666 contrast_975: `hsl(${DEER_BLUE_HUE}, 28%, ${DEER_defaultScale[1]}%)`,
667 contrast_1000: '#000000',
668
669 primary_25: `hsl(145, 30%, 97%)`,
670 primary_50: `hsl(145, 30%, 95%)`,
671 primary_100: `hsl(145, 30%, 90%)`,
672 primary_200: `hsl(145, 32%, 80%)`,
673 primary_300: `hsl(145, 34%, 70%)`,
674 primary_400: `hsl(145, 35%, 58%)`,
675 primary_500: `hsl(145, 35%, 45%)`,
676 primary_600: `hsl(145, 38%, 38%)`,
677 primary_700: `hsl(145, 40%, 32%)`,
678 primary_800: `hsl(145, 42%, 25%)`,
679 primary_900: `hsl(145, 45%, 18%)`,
680 primary_950: `hsl(145, 48%, 10%)`,
681 primary_975: `hsl(145, 50%, 7%)`,
682
683 positive_25: `hsl(${DEER_GREEN_HUE}, 82%, 97%)`,
684 positive_50: `hsl(${DEER_GREEN_HUE}, 82%, 95%)`,
685 positive_100: `hsl(${DEER_GREEN_HUE}, 82%, 90%)`,
686 positive_200: `hsl(${DEER_GREEN_HUE}, 82%, 80%)`,
687 positive_300: `hsl(${DEER_GREEN_HUE}, 82%, 70%)`,
688 positive_400: `hsl(${DEER_GREEN_HUE}, 82%, 60%)`,
689 positive_500: `hsl(${DEER_GREEN_HUE}, 82%, 50%)`,
690 positive_600: `hsl(${DEER_GREEN_HUE}, 82%, 42%)`,
691 positive_700: `hsl(${DEER_GREEN_HUE}, 82%, 34%)`,
692 positive_800: `hsl(${DEER_GREEN_HUE}, 82%, 26%)`,
693 positive_900: `hsl(${DEER_GREEN_HUE}, 82%, 18%)`,
694 positive_950: `hsl(${DEER_GREEN_HUE}, 82%, 10%)`,
695 positive_975: `hsl(${DEER_GREEN_HUE}, 82%, 7%)`,
696
697 negative_25: `hsl(${DEER_RED_HUE}, 91%, 97%)`,
698 negative_50: `hsl(${DEER_RED_HUE}, 91%, 95%)`,
699 negative_100: `hsl(${DEER_RED_HUE}, 91%, 90%)`,
700 negative_200: `hsl(${DEER_RED_HUE}, 91%, 80%)`,
701 negative_300: `hsl(${DEER_RED_HUE}, 91%, 70%)`,
702 negative_400: `hsl(${DEER_RED_HUE}, 91%, 60%)`,
703 negative_500: `hsl(${DEER_RED_HUE}, 91%, 50%)`,
704 negative_600: `hsl(${DEER_RED_HUE}, 91%, 42%)`,
705 negative_700: `hsl(${DEER_RED_HUE}, 91%, 34%)`,
706 negative_800: `hsl(${DEER_RED_HUE}, 91%, 26%)`,
707 negative_900: `hsl(${DEER_RED_HUE}, 91%, 18%)`,
708 negative_950: `hsl(${DEER_RED_HUE}, 91%, 10%)`,
709 negative_975: `hsl(${DEER_RED_HUE}, 91%, 7%)`,
710}
711
712export const DEER_SUBDUED_PALETTE: Palette = {
713 ...DEER_PALETTE,
714 primary_25: `hsl(140, 15%, 97%)`,
715 primary_50: `hsl(140, 18%, 95%)`,
716 primary_100: `hsl(140, 22%, 90%)`,
717 primary_200: `hsl(140, 25%, 80%)`,
718 primary_300: `hsl(140, 28%, 70%)`,
719 primary_400: `hsl(140, 32%, 58%)`,
720 primary_500: `hsl(140, 35%, 45%)`,
721 primary_600: `hsl(140, 38%, 38%)`,
722 primary_700: `hsl(140, 42%, 32%)`,
723 primary_800: `hsl(140, 45%, 25%)`,
724 primary_900: `hsl(140, 48%, 18%)`,
725 primary_950: `hsl(140, 50%, 10%)`,
726 primary_975: `hsl(140, 55%, 7%)`,
727 contrast_1000: '#151D28',
728}
729
730const DEER_THEMES = createThemes({
731 defaultPalette: DEER_PALETTE,
732 subduedPalette: DEER_SUBDUED_PALETTE,
733})
734
735export const deerscheme = {
736 lightPalette: DEER_THEMES.light.palette,
737 darkPalette: DEER_THEMES.dark.palette,
738 dimPalette: DEER_THEMES.dim.palette,
739 light: DEER_THEMES.light,
740 dark: DEER_THEMES.dark,
741 dim: DEER_THEMES.dim,
742}
743
744export const ZEPPELIN_PALETTE: Palette = {
745 white: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[14]}%)`,
746 black: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[0]}%)`,
747 pink: STATIC_VALUES.pink,
748 yellow: STATIC_VALUES.yellow,
749 like: STATIC_VALUES.pink,
750
751 contrast_0: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[14]}%)`,
752 contrast_25: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[13]}%)`,
753 contrast_50: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[12]}%)`,
754 contrast_100: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[11]}%)`,
755 contrast_200: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[10]}%)`,
756 contrast_300: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[9]}%)`,
757 contrast_400: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[8]}%)`,
758 contrast_500: `hsl(${ZEPPELIN_BLUE_HUE}, 15%, ${ZEPPELIN_defaultScale[7]}%)`,
759 contrast_600: `hsl(${ZEPPELIN_BLUE_HUE}, 19%, ${ZEPPELIN_defaultScale[6]}%)`,
760 contrast_700: `hsl(${ZEPPELIN_BLUE_HUE}, 19%, ${ZEPPELIN_defaultScale[5]}%)`,
761 contrast_800: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[4]}%)`,
762 contrast_900: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[3]}%)`,
763 contrast_950: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[2]}%)`,
764 contrast_975: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[1]}%)`,
765 contrast_1000: `hsl(${ZEPPELIN_BLUE_HUE}, 23%, ${ZEPPELIN_defaultScale[0]}%)`,
766
767 primary_25: `hsl(47, 80%, 89%)`,
768 primary_50: `hsl(47, 80%, 87%)`,
769 primary_100: `hsl(47, 80%, 82%)`,
770 primary_200: `hsl(47, 72%, 72%)`,
771 primary_300: `hsl(47, 74%, 62%)`,
772 primary_400: `hsl(47, 75%, 50%)`,
773 primary_500: `hsl(47, 75%, 37%)`,
774 primary_600: `hsl(47, 78%, 30%)`,
775 primary_700: `hsl(47, 80%, 24%)`,
776 primary_800: `hsl(47, 82%, 17%)`,
777 primary_900: `hsl(47, 85%, 12%)`,
778 primary_950: `hsl(47, 88%, 5%)`,
779 primary_975: `hsl(47, 90%, 2%)`,
780
781 positive_25: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 97%)`,
782 positive_50: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 95%)`,
783 positive_100: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 90%)`,
784 positive_200: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 80%)`,
785 positive_300: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 70%)`,
786 positive_400: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 60%)`,
787 positive_500: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 50%)`,
788 positive_600: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 42%)`,
789 positive_700: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 34%)`,
790 positive_800: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 26%)`,
791 positive_900: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 18%)`,
792 positive_950: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 10%)`,
793 positive_975: `hsl(${ZEPPELIN_GREEN_HUE}, 82%, 7%)`,
794
795 negative_25: `hsl(${ZEPPELIN_RED_HUE}, 91%, 97%)`,
796 negative_50: `hsl(${ZEPPELIN_RED_HUE}, 91%, 95%)`,
797 negative_100: `hsl(${ZEPPELIN_RED_HUE}, 91%, 90%)`,
798 negative_200: `hsl(${ZEPPELIN_RED_HUE}, 91%, 80%)`,
799 negative_300: `hsl(${ZEPPELIN_RED_HUE}, 91%, 70%)`,
800 negative_400: `hsl(${ZEPPELIN_RED_HUE}, 91%, 60%)`,
801 negative_500: `hsl(${ZEPPELIN_RED_HUE}, 91%, 50%)`,
802 negative_600: `hsl(${ZEPPELIN_RED_HUE}, 91%, 42%)`,
803 negative_700: `hsl(${ZEPPELIN_RED_HUE}, 91%, 34%)`,
804 negative_800: `hsl(${ZEPPELIN_RED_HUE}, 91%, 26%)`,
805 negative_900: `hsl(${ZEPPELIN_RED_HUE}, 91%, 18%)`,
806 negative_950: `hsl(${ZEPPELIN_RED_HUE}, 91%, 10%)`,
807 negative_975: `hsl(${ZEPPELIN_RED_HUE}, 91%, 7%)`,
808}
809
810export const ZEPPELIN_SUBDUED_PALETTE: Palette = {
811 ...ZEPPELIN_PALETTE,
812 black: `hsl(${ZEPPELIN_BLUE_HUE}, 3%, ${ZEPPELIN_dimScale[0]}%)`,
813
814 contrast_0: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[14]}%)`,
815 contrast_25: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[13]}%)`,
816 contrast_50: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[12]}%)`,
817 contrast_100: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[11]}%)`,
818 contrast_200: `hsl(${ZEPPELIN_BLUE_HUE}, 20%, ${ZEPPELIN_dimScale[10]}%)`,
819 contrast_300: `hsl(${ZEPPELIN_BLUE_HUE}, 16%, ${ZEPPELIN_dimScale[9]}%)`,
820 contrast_400: `hsl(${ZEPPELIN_BLUE_HUE}, 16%, ${ZEPPELIN_dimScale[8]}%)`,
821 contrast_500: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[7]}%)`,
822 contrast_600: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[6]}%)`,
823 contrast_700: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[5]}%)`,
824 contrast_800: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[4]}%)`,
825 contrast_900: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[3]}%)`,
826 contrast_950: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[2]}%)`,
827 contrast_975: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[1]}%)`,
828 contrast_1000: `hsl(${ZEPPELIN_BLUE_HUE}, 12%, ${ZEPPELIN_dimScale[0]}%)`,
829
830 primary_25: `hsl(47, 60%, 97%)`,
831 primary_50: `hsl(47, 63%, 94%)`,
832 primary_100: `hsl(47, 65%, 88%)`,
833 primary_200: `hsl(47, 70%, 78%)`,
834 primary_300: `hsl(47, 73%, 68%)`,
835 primary_400: `hsl(47, 77%, 58%)`,
836 primary_500: `hsl(47, 80%, 45%)`,
837 primary_600: `hsl(47, 83%, 38%)`,
838 primary_700: `hsl(47, 87%, 30%)`,
839 primary_800: `hsl(47, 90%, 25%)`,
840 primary_900: `hsl(47, 93%, 18%)`,
841 primary_950: `hsl(47, 95%, 10%)`,
842 primary_975: `hsl(47, 98%, 7%)`,
843}
844
845const ZEPPELIN_THEMES = createThemes({
846 defaultPalette: ZEPPELIN_PALETTE,
847 subduedPalette: ZEPPELIN_SUBDUED_PALETTE,
848})
849
850export const zeppelinscheme = {
851 lightPalette: ZEPPELIN_THEMES.light.palette,
852 darkPalette: ZEPPELIN_THEMES.dark.palette,
853 dimPalette: ZEPPELIN_THEMES.dim.palette,
854 light: ZEPPELIN_THEMES.light,
855 dark: ZEPPELIN_THEMES.dark,
856 dim: ZEPPELIN_THEMES.dim,
857}
858
859export const KITTY_PALETTE: Palette = {
860 white: STATIC_VALUES.white,
861 black: STATIC_VALUES.black,
862 pink: STATIC_VALUES.pink,
863 yellow: STATIC_VALUES.yellow,
864 like: STATIC_VALUES.pink,
865
866 contrast_0: '#FFFFFF',
867 contrast_25: '#F9FAFB',
868 contrast_50: '#EFF2F6',
869 contrast_100: '#DCE2EA',
870 contrast_200: '#C0CAD8',
871 contrast_300: '#A5B2C5',
872 contrast_400: '#8798B0',
873 contrast_500: '#667B99',
874 contrast_600: '#526580',
875 contrast_700: '#405168',
876 contrast_800: '#313F54',
877 contrast_900: '#232E3E',
878 contrast_950: '#19222E',
879 contrast_975: '#111822',
880 contrast_1000: '#000000',
881
882 primary_25: `hsl(290, 30%, 97%)`,
883 primary_50: `hsl(290, 30%, 95%)`,
884 primary_100: `hsl(290, 30%, 90%)`,
885 primary_200: `hsl(290, 32%, 80%)`,
886 primary_300: `hsl(290, 34%, 70%)`,
887 primary_400: `hsl(290, 35%, 58%)`,
888 primary_500: `hsl(290, 35%, 45%)`,
889 primary_600: `hsl(290, 38%, 38%)`,
890 primary_700: `hsl(290, 40%, 32%)`,
891 primary_800: `hsl(290, 42%, 25%)`,
892 primary_900: `hsl(290, 45%, 18%)`,
893 primary_950: `hsl(290, 48%, 10%)`,
894 primary_975: `hsl(290, 50%, 7%)`,
895
896 positive_25: '#ECFEF5',
897 positive_50: '#D3FDE8',
898 positive_100: '#A3FACF',
899 positive_200: '#6AF6B0',
900 positive_300: '#2CF28F',
901 positive_400: '#0DD370',
902 positive_500: '#09B35E',
903 positive_600: '#04904A',
904 positive_700: '#036D38',
905 positive_800: '#04522B',
906 positive_900: '#033F21',
907 positive_950: '#032A17',
908 positive_975: '#021D0F',
909
910 negative_25: '#FFF5F7',
911 negative_50: '#FEE7EC',
912 negative_100: '#FDD3DD',
913 negative_200: '#FBBBCA',
914 negative_300: '#F891A9',
915 negative_400: '#F65A7F',
916 negative_500: '#E91646',
917 negative_600: '#CA123D',
918 negative_700: '#A71134',
919 negative_800: '#7F0B26',
920 negative_900: '#5F071C',
921 negative_950: '#430413',
922 negative_975: '#30030D',
923}
924
925export const KITTY_SUBDUED_PALETTE: Palette = {
926 white: STATIC_VALUES.white,
927 black: STATIC_VALUES.black,
928 pink: STATIC_VALUES.pink,
929 yellow: STATIC_VALUES.yellow,
930 like: STATIC_VALUES.pink,
931
932 contrast_0: '#FFFFFF',
933 contrast_25: '#F9FAFB',
934 contrast_50: '#F2F4F8',
935 contrast_100: '#E2E7EE',
936 contrast_200: '#C3CDDA',
937 contrast_300: '#ABB8C9',
938 contrast_400: '#8D9DB4',
939 contrast_500: '#6F839F',
940 contrast_600: '#586C89',
941 contrast_700: '#485B75',
942 contrast_800: '#394960',
943 contrast_900: '#2C3A4E',
944 contrast_950: '#222E3F',
945 contrast_975: '#1C2736',
946 contrast_1000: '#151D28',
947
948 primary_25: `hsl(290, 30%, 97%)`,
949 primary_50: `hsl(290, 30%, 96%)`,
950 primary_100: `hsl(290, 30%, 92%)`,
951 primary_200: `hsl(290, 32%, 81%)`,
952 primary_300: `hsl(290, 34%, 72%)`,
953 primary_400: `hsl(290, 35%, 60%)`,
954 primary_500: `hsl(290, 35%, 48%)`,
955 primary_600: `hsl(290, 38%, 41%)`,
956 primary_700: `hsl(290, 40%, 36%)`,
957 primary_800: `hsl(290, 42%, 29%)`,
958 primary_900: `hsl(290, 45%, 22%)`,
959 primary_950: `hsl(290, 48%, 10%)`,
960 primary_975: `hsl(290, 50%, 8%)`,
961
962 positive_25: '#ECFEF5',
963 positive_50: '#D8FDEB',
964 positive_100: '#A8FAD1',
965 positive_200: '#6FF6B3',
966 positive_300: '#31F291',
967 positive_400: '#0EDD75',
968 positive_500: '#0AC266',
969 positive_600: '#049F52',
970 positive_700: '#038142',
971 positive_800: '#056636',
972 positive_900: '#04522B',
973 positive_950: '#053D21',
974 positive_975: '#052917',
975
976 negative_25: '#FFF5F7',
977 negative_50: '#FEEBEF',
978 negative_100: '#FDD8E1',
979 negative_200: '#FCC0CE',
980 negative_300: '#F99AB0',
981 negative_400: '#F76486',
982 negative_500: '#EB2452',
983 negative_600: '#D81341',
984 negative_700: '#BA1239',
985 negative_800: '#910D2C',
986 negative_900: '#6F0B22',
987 negative_950: '#500B1C',
988 negative_975: '#3E0915',
989}
990
991const KITTY_THEMES = createThemes({
992 defaultPalette: KITTY_PALETTE,
993 subduedPalette: KITTY_SUBDUED_PALETTE,
994})
995
996export const kittyscheme = {
997 lightPalette: KITTY_THEMES.light.palette,
998 darkPalette: KITTY_THEMES.dark.palette,
999 dimPalette: KITTY_THEMES.dim.palette,
1000 light: KITTY_THEMES.light,
1001 dark: KITTY_THEMES.dark,
1002 dim: KITTY_THEMES.dim,
1003}
1004
1005const REDDWARF_TAILWIND_ATOMS = {
1006 color_gray_25: '#fffbf9',
1007 color_gray_50: '#fff7f5',
1008 color_gray_100: '#fff0ee',
1009 color_gray_200: '#f8e2de',
1010 color_gray_300: '#eaccc7',
1011 color_gray_400: '#bd948e',
1012 color_gray_500: '#93655f',
1013 color_gray_600: '#714842',
1014 color_gray_700: '#5b342f',
1015 color_gray_800: '#401d19',
1016 color_gray_900: '#2c0c09',
1017 color_gray_950: '#180000',
1018 color_gray_970: '#0e0000',
1019}
1020
1021const REDDWARF_TAILWIND_ATOMS_VIBRANT = {
1022 ...REDDWARF_TAILWIND_ATOMS,
1023 color_gray_500: '#c14c42',
1024}
1025
1026export const REDDWARF_SUBDUED_PALETTE: Palette = {
1027 ...DEFAULT_SUBDUED_PALETTE,
1028 like: '#FF6B6B',
1029 white: STATIC_VALUES.white,
1030 black: STATIC_VALUES.black,
1031 pink: STATIC_VALUES.pink,
1032 yellow: STATIC_VALUES.yellow,
1033
1034 contrast_0: REDDWARF_TAILWIND_ATOMS.color_gray_50,
1035 contrast_25: REDDWARF_TAILWIND_ATOMS.color_gray_50,
1036 contrast_50: REDDWARF_TAILWIND_ATOMS.color_gray_100,
1037 contrast_100: REDDWARF_TAILWIND_ATOMS.color_gray_200,
1038 contrast_200: REDDWARF_TAILWIND_ATOMS.color_gray_200,
1039 contrast_300: REDDWARF_TAILWIND_ATOMS.color_gray_300,
1040 contrast_400: REDDWARF_TAILWIND_ATOMS.color_gray_400,
1041 contrast_500: REDDWARF_TAILWIND_ATOMS.color_gray_500,
1042 contrast_600: REDDWARF_TAILWIND_ATOMS.color_gray_500,
1043 contrast_700: REDDWARF_TAILWIND_ATOMS.color_gray_600,
1044 contrast_800: REDDWARF_TAILWIND_ATOMS.color_gray_600,
1045 contrast_900: REDDWARF_TAILWIND_ATOMS.color_gray_700,
1046 contrast_950: REDDWARF_TAILWIND_ATOMS.color_gray_800,
1047 contrast_975: REDDWARF_TAILWIND_ATOMS.color_gray_900,
1048 contrast_1000: REDDWARF_TAILWIND_ATOMS.color_gray_900,
1049
1050 primary_25: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_50,
1051 primary_50: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_100,
1052 primary_100: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_200,
1053 primary_200: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_200,
1054 primary_300: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_300,
1055 primary_400: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_400,
1056 primary_500: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_500,
1057 primary_600: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_600,
1058 primary_700: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_600,
1059 primary_800: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_700,
1060 primary_900: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_700,
1061 primary_950: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_800,
1062 primary_975: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_900,
1063}
1064
1065export const REDDWARF_PALETTE: Palette = {
1066 ...REDDWARF_SUBDUED_PALETTE,
1067 contrast_1000: REDDWARF_TAILWIND_ATOMS.color_gray_950,
1068
1069 primary_25: REDDWARF_TAILWIND_ATOMS.color_gray_50,
1070 primary_50: REDDWARF_TAILWIND_ATOMS.color_gray_100,
1071 primary_100: REDDWARF_TAILWIND_ATOMS.color_gray_200,
1072 primary_200: REDDWARF_TAILWIND_ATOMS.color_gray_200,
1073 primary_300: REDDWARF_TAILWIND_ATOMS.color_gray_300,
1074 primary_400: REDDWARF_TAILWIND_ATOMS.color_gray_400,
1075 primary_500: REDDWARF_TAILWIND_ATOMS_VIBRANT.color_gray_500,
1076 primary_600: REDDWARF_TAILWIND_ATOMS.color_gray_600,
1077 primary_700: REDDWARF_TAILWIND_ATOMS.color_gray_600,
1078 primary_800: REDDWARF_TAILWIND_ATOMS.color_gray_700,
1079 primary_900: REDDWARF_TAILWIND_ATOMS.color_gray_700,
1080 primary_950: REDDWARF_TAILWIND_ATOMS.color_gray_800,
1081 primary_975: REDDWARF_TAILWIND_ATOMS.color_gray_900,
1082}
1083
1084const REDDWARF_THEMES = createThemes({
1085 defaultPalette: REDDWARF_PALETTE,
1086 subduedPalette: REDDWARF_SUBDUED_PALETTE,
1087})
1088
1089export const reddwarfscheme = {
1090 lightPalette: REDDWARF_THEMES.light.palette,
1091 darkPalette: REDDWARF_THEMES.dark.palette,
1092 dimPalette: REDDWARF_THEMES.dim.palette,
1093 light: REDDWARF_THEMES.light,
1094 dark: REDDWARF_THEMES.dark,
1095 dim: REDDWARF_THEMES.dim,
1096}
1097
1098export const CATPPUCIN_PALETTE: Palette = {
1099 white: STATIC_VALUES.white,
1100 black: STATIC_VALUES.black,
1101 pink: STATIC_VALUES.pink,
1102 yellow: STATIC_VALUES.yellow,
1103 like: STATIC_VALUES.pink,
1104
1105 contrast_0: '#EFF1F5',
1106 contrast_25: '#D3D7DE',
1107 contrast_50: '#E6E9EF',
1108 contrast_100: '#ccd0da',
1109 contrast_200: '#bcc0cc',
1110 contrast_300: '#acb0be',
1111 contrast_400: '#9ca0b0',
1112 contrast_500: '#8c8fa1',
1113 contrast_600: '#7c7f93',
1114 contrast_700: '#585b70',
1115 contrast_800: '#45475a',
1116 contrast_900: '#313244',
1117 contrast_950: '#181825',
1118 contrast_975: '#11111b',
1119 contrast_1000: '#1e1e2e',
1120
1121 primary_25: `hsl(266, 30%, 97%)`,
1122 primary_50: `hsl(266, 30%, 95%)`,
1123 primary_100: `hsl(266, 30%, 90%)`,
1124 primary_200: `hsl(266, 42%, 80%)`,
1125 primary_300: `hsl(266, 54%, 70%)`,
1126 primary_400: `hsl(266, 65%, 58%)`,
1127 primary_500: `hsl(266, 75%, 58%)`,
1128 primary_600: `hsl(266, 68%, 38%)`,
1129 primary_700: `hsl(266, 50%, 32%)`,
1130 primary_800: `hsl(266, 42%, 25%)`,
1131 primary_900: `hsl(266, 45%, 18%)`,
1132 primary_950: `hsl(266, 48%, 10%)`,
1133 primary_975: `hsl(266, 50%, 7%)`,
1134
1135 positive_25: '#ECFEF5',
1136 positive_50: '#D3FDE8',
1137 positive_100: '#A3FACF',
1138 positive_200: '#6AF6B0',
1139 positive_300: '#2CF28F',
1140 positive_400: '#0DD370',
1141 positive_500: '#09B35E',
1142 positive_600: '#04904A',
1143 positive_700: '#036D38',
1144 positive_800: '#04522B',
1145 positive_900: '#033F21',
1146 positive_950: '#032A17',
1147 positive_975: '#021D0F',
1148
1149 negative_25: '#FFF5F7',
1150 negative_50: '#FEE7EC',
1151 negative_100: '#FDD3DD',
1152 negative_200: '#FBBBCA',
1153 negative_300: '#F891A9',
1154 negative_400: '#F65A7F',
1155 negative_500: '#E91646',
1156 negative_600: '#CA123D',
1157 negative_700: '#A71134',
1158 negative_800: '#7F0B26',
1159 negative_900: '#5F071C',
1160 negative_950: '#430413',
1161 negative_975: '#30030D',
1162}
1163
1164export const CATPPUCIN_SUBDUED_PALETTE: Palette = {
1165 white: STATIC_VALUES.white,
1166 black: STATIC_VALUES.black,
1167 pink: STATIC_VALUES.pink,
1168 yellow: STATIC_VALUES.yellow,
1169 like: STATIC_VALUES.pink,
1170
1171 contrast_0: '#EFF1F5',
1172 contrast_25: '#D3D7DE',
1173 contrast_50: '#E6E9EF',
1174 contrast_100: '#ccd0da',
1175 contrast_200: '#bcc0cc',
1176 contrast_300: '#acb0be',
1177 contrast_400: '#939ab7',
1178 contrast_500: '#8087a2',
1179 contrast_600: '#6e738d',
1180 contrast_700: '#5b6078',
1181 contrast_800: '#494d64',
1182 contrast_900: '#363a4f',
1183 contrast_950: '#1e2030',
1184 contrast_975: '#181926',
1185 contrast_1000: '#24273a',
1186
1187 primary_25: `hsl(267, 30%, 97%)`,
1188 primary_50: `hsl(267, 40%, 96%)`,
1189 primary_100: `hsl(267, 50%, 92%)`,
1190 primary_200: `hsl(267, 62%, 81%)`,
1191 primary_300: `hsl(267, 83%, 80%)`,
1192 primary_400: `hsl(267, 75%, 78%)`,
1193 primary_500: `hsl(267, 74%, 72%)`,
1194 primary_600: `hsl(267, 38%, 41%)`,
1195 primary_700: `hsl(267, 40%, 36%)`,
1196 primary_800: `hsl(267, 42%, 29%)`,
1197 primary_900: `hsl(267, 45%, 22%)`,
1198 primary_950: `hsl(267, 48%, 10%)`,
1199 primary_975: `hsl(267, 50%, 8%)`,
1200
1201 positive_25: '#ECFEF5',
1202 positive_50: '#D8FDEB',
1203 positive_100: '#A8FAD1',
1204 positive_200: '#6FF6B3',
1205 positive_300: '#31F291',
1206 positive_400: '#0EDD75',
1207 positive_500: '#0AC266',
1208 positive_600: '#049F52',
1209 positive_700: '#038142',
1210 positive_800: '#056636',
1211 positive_900: '#04522B',
1212 positive_950: '#053D21',
1213 positive_975: '#052917',
1214
1215 negative_25: '#FFF5F7',
1216 negative_50: '#FEEBEF',
1217 negative_100: '#FDD8E1',
1218 negative_200: '#FCC0CE',
1219 negative_300: '#F99AB0',
1220 negative_400: '#F76486',
1221 negative_500: '#EB2452',
1222 negative_600: '#D81341',
1223 negative_700: '#BA1239',
1224 negative_800: '#910D2C',
1225 negative_900: '#6F0B22',
1226 negative_950: '#500B1C',
1227 negative_975: '#3E0915',
1228}
1229
1230const CATPPUCIN_THEMES = createThemes({
1231 defaultPalette: CATPPUCIN_PALETTE,
1232 subduedPalette: CATPPUCIN_SUBDUED_PALETTE,
1233})
1234
1235export const catppuccinscheme = {
1236 lightPalette: CATPPUCIN_THEMES.light.palette,
1237 darkPalette: CATPPUCIN_THEMES.dark.palette,
1238 dimPalette: CATPPUCIN_THEMES.dim.palette,
1239 light: CATPPUCIN_THEMES.light,
1240 dark: CATPPUCIN_THEMES.dark,
1241 dim: CATPPUCIN_THEMES.dim,
1242}
1243
1244export const EVERGARDEN_PALETTE: Palette = {
1245 white: '#F8F9E8',
1246 black: '#171C1F',
1247 pink: '#F3C0E5',
1248 yellow: '#F5D098',
1249 like: '#F3C0E5',
1250
1251 contrast_0: '#F8F9E8',
1252 contrast_25: '#E1EDD6',
1253 contrast_50: '#D3E7E0',
1254 contrast_100: '#C3D7D0',
1255 contrast_200: '#ADC9BC',
1256 contrast_300: '#96B4AA',
1257 contrast_400: '#839E9A',
1258 contrast_500: '#7A9493',
1259 contrast_600: '#6F8788',
1260 contrast_700: '#4A585C',
1261 contrast_800: '#374145',
1262 contrast_900: '#262F33',
1263 contrast_950: '#1E2528',
1264 contrast_975: '#191E21',
1265 contrast_1000: '#171C1F',
1266
1267 primary_25: `hsl(64, 30%, 97%)`,
1268 primary_50: `hsl(64, 30%, 95%)`,
1269 primary_100: `hsl(64, 30%, 90%)`,
1270 primary_200: `hsl(72, 42%, 86%)`,
1271 primary_300: `hsl(74, 54%, 84%)`,
1272 primary_400: `hsl(83, 46%, 83%)`,
1273 primary_500: `hsl(150, 24%, 64%)`,
1274 primary_600: `hsl(149, 44%, 72%)`,
1275 primary_700: `hsl(167, 35%, 60%)`,
1276 primary_800: `hsl(187, 42%, 36%)`,
1277 primary_900: `hsl(194, 32%, 25%)`,
1278 primary_950: `hsl(216, 48%, 10%)`,
1279 primary_975: `hsl(220, 50%, 7%)`,
1280
1281 positive_25: '#ECFEFA',
1282 positive_50: '#E2FAF5',
1283 positive_100: '#D8F6F0',
1284 positive_200: '#CFF2EA',
1285 positive_300: '#C5EEE5',
1286 positive_400: '#BCEAE0',
1287 positive_500: '#B3E6DB',
1288 positive_600: '#82C4B6',
1289 positive_700: '#58A393',
1290 positive_800: '#378271',
1291 positive_900: '#1D6052',
1292 positive_950: '#0C3E34',
1293 positive_975: '#021D17',
1294
1295 negative_25: '#FFF5F5',
1296 negative_50: '#FDE1E1',
1297 negative_100: '#FCCDCE',
1298 negative_200: '#FAB9BB',
1299 negative_300: '#F8A5A7',
1300 negative_400: '#F79295',
1301 negative_500: '#F57F82',
1302 negative_600: '#D45E61',
1303 negative_700: '#B34245',
1304 negative_800: '#932B2D',
1305 negative_900: '#72181B',
1306 negative_950: '#510B0D',
1307 negative_975: '#300304',
1308}
1309
1310export const EVERGARDEN_SUBDUED_PALETTE: Palette = {
1311 white: '#F8F9E8',
1312 black: '#171C1F',
1313 pink: '#F3C0E5',
1314 yellow: '#F5D098',
1315 like: '#F3C0E5',
1316
1317 contrast_0: '#F8F9E8',
1318 contrast_25: '#E1EDD6',
1319 contrast_50: '#D3E7E0',
1320 contrast_100: '#C3D7D0',
1321 contrast_200: '#ADC9BC',
1322 contrast_300: '#96B4AA',
1323 contrast_400: '#839E9A',
1324 contrast_500: '#7A9493',
1325 contrast_600: '#6F8788',
1326 contrast_700: '#4A585C',
1327 contrast_800: '#374145',
1328 contrast_900: '#2B3337',
1329 contrast_950: '#232A2E',
1330 contrast_975: '#1C2225',
1331 contrast_1000: '#171C1F',
1332
1333 primary_25: `hsl(64, 30%, 97%)`,
1334 primary_50: `hsl(64, 30%, 95%)`,
1335 primary_100: `hsl(64, 30%, 90%)`,
1336 primary_200: `hsl(72, 42%, 86%)`,
1337 primary_300: `hsl(74, 54%, 84%)`,
1338 primary_400: `hsl(83, 46%, 83%)`,
1339 primary_500: `hsl(150, 24%, 64%)`,
1340 primary_600: `hsl(149, 44%, 72%)`,
1341 primary_700: `hsl(167, 35%, 60%)`,
1342 primary_800: `hsl(187, 42%, 36%)`,
1343 primary_900: `hsl(194, 32%, 25%)`,
1344 primary_950: `hsl(216, 48%, 10%)`,
1345 primary_975: `hsl(220, 50%, 7%)`,
1346
1347 positive_25: '#ECFEFA',
1348 positive_50: '#E2FAF5',
1349 positive_100: '#D8F6F0',
1350 positive_200: '#CFF2EA',
1351 positive_300: '#C5EEE5',
1352 positive_400: '#BCEAE0',
1353 positive_500: '#B3E6DB',
1354 positive_600: '#82C4B6',
1355 positive_700: '#58A393',
1356 positive_800: '#378271',
1357 positive_900: '#1D6052',
1358 positive_950: '#0C3E34',
1359 positive_975: '#021D17',
1360
1361 negative_25: '#FFF5F5',
1362 negative_50: '#FDE1E1',
1363 negative_100: '#FCCDCE',
1364 negative_200: '#FAB9BB',
1365 negative_300: '#F8A5A7',
1366 negative_400: '#F79295',
1367 negative_500: '#F57F82',
1368 negative_600: '#D45E61',
1369 negative_700: '#B34245',
1370 negative_800: '#932B2D',
1371 negative_900: '#72181B',
1372 negative_950: '#510B0D',
1373 negative_975: '#300304',
1374}
1375
1376const EVERGARDEN_THEMES = createThemes({
1377 defaultPalette: EVERGARDEN_PALETTE,
1378 subduedPalette: EVERGARDEN_SUBDUED_PALETTE,
1379})
1380
1381export const evergardenscheme = {
1382 lightPalette: EVERGARDEN_THEMES.light.palette,
1383 darkPalette: EVERGARDEN_THEMES.dark.palette,
1384 dimPalette: EVERGARDEN_THEMES.dim.palette,
1385 light: EVERGARDEN_THEMES.light,
1386 dark: EVERGARDEN_THEMES.dark,
1387 dim: EVERGARDEN_THEMES.dim,
1388}
1389
1390/**
1391 * @deprecated use ALF and access palette from `useTheme()`
1392 */
1393export const lightPalette = DEFAULT_THEMES.light.palette
1394/**
1395 * @deprecated use ALF and access palette from `useTheme()`
1396 */
1397export const darkPalette = DEFAULT_THEMES.dark.palette
1398/**
1399 * @deprecated use ALF and access palette from `useTheme()`
1400 */
1401export const dimPalette = DEFAULT_THEMES.dim.palette
1402/**
1403 * @deprecated use ALF and access theme from `useTheme()`
1404 */
1405export const light = DEFAULT_THEMES.light
1406/**
1407 * @deprecated use ALF and access theme from `useTheme()`
1408 */
1409export const dark = DEFAULT_THEMES.dark
1410/**
1411 * @deprecated use ALF and access theme from `useTheme()`
1412 */
1413export const dim = DEFAULT_THEMES.dim