forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
basic color theming pt1
commit 600b87d175aea27038e7d6d6fde8d6cac11a10f1
Author: Aviva Ruben <aviva@rubenfamily.com>
Date: Wed Apr 9 21:54:02 2025 -0500
basic color theming pt1
+63
-52
assets/favicon.png
assets/favicon.png
This is a binary file and will not be displayed.
+27
-27
src/alf/themes.ts
+27
-27
src/alf/themes.ts
···
1
1
import {atoms} from '#/alf/atoms'
2
-
import {Palette, Theme} from '#/alf/types'
2
+
import {type Palette, type Theme} from '#/alf/types'
3
3
import {
4
4
BLUE_HUE,
5
5
defaultScale,
···
79
79
gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`,
80
80
gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`,
81
81
82
-
primary_25: `hsl(${hues.primary}, 99%, 97%)`,
83
-
primary_50: `hsl(${hues.primary}, 99%, 95%)`,
84
-
primary_100: `hsl(${hues.primary}, 99%, 90%)`,
85
-
primary_200: `hsl(${hues.primary}, 99%, 80%)`,
86
-
primary_300: `hsl(${hues.primary}, 99%, 70%)`,
87
-
primary_400: `hsl(${hues.primary}, 99%, 60%)`,
88
-
primary_500: `hsl(${hues.primary}, 99%, 53%)`,
89
-
primary_600: `hsl(${hues.primary}, 99%, 42%)`,
90
-
primary_700: `hsl(${hues.primary}, 99%, 34%)`,
91
-
primary_800: `hsl(${hues.primary}, 99%, 26%)`,
92
-
primary_900: `hsl(${hues.primary}, 99%, 18%)`,
93
-
primary_950: `hsl(${hues.primary}, 99%, 10%)`,
94
-
primary_975: `hsl(${hues.primary}, 99%, 7%)`,
82
+
primary_25: `hsl(145, 30%, 97%)`,
83
+
primary_50: `hsl(145, 30%, 95%)`,
84
+
primary_100: `hsl(145, 30%, 90%)`,
85
+
primary_200: `hsl(145, 32%, 80%)`,
86
+
primary_300: `hsl(145, 34%, 70%)`,
87
+
primary_400: `hsl(145, 35%, 58%)`,
88
+
primary_500: `hsl(145, 35%, 45%)`,
89
+
primary_600: `hsl(145, 38%, 38%)`,
90
+
primary_700: `hsl(145, 40%, 32%)`,
91
+
primary_800: `hsl(145, 42%, 25%)`,
92
+
primary_900: `hsl(145, 45%, 18%)`,
93
+
primary_950: `hsl(145, 48%, 10%)`,
94
+
primary_975: `hsl(145, 50%, 7%)`,
95
95
96
96
green_25: `hsl(${hues.positive}, 82%, 97%)`,
97
97
green_50: `hsl(${hues.positive}, 82%, 95%)`,
···
265
265
contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
266
266
contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
267
267
268
-
primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`,
269
-
primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`,
270
-
primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`,
271
-
primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`,
272
-
primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`,
273
-
primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`,
274
-
primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`,
275
-
primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`,
276
-
primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`,
277
-
primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`,
278
-
primary_900: `hsl(${hues.primary}, 99%, ${dimScale[11]}%)`,
279
-
primary_950: `hsl(${hues.primary}, 99%, ${dimScale[12]}%)`,
280
-
primary_975: `hsl(${hues.primary}, 99%, ${dimScale[13]}%)`,
268
+
primary_25: `hsl(140, 15%, ${dimScale[1]}%)`,
269
+
primary_50: `hsl(140, 18%, ${dimScale[2]}%)`,
270
+
primary_100: `hsl(140, 22%, ${dimScale[3]}%)`,
271
+
primary_200: `hsl(140, 25%, ${dimScale[4]}%)`,
272
+
primary_300: `hsl(140, 28%, ${dimScale[5]}%)`,
273
+
primary_400: `hsl(140, 32%, ${dimScale[6]}%)`,
274
+
primary_500: `hsl(140, 35%, ${dimScale[7]}%)`,
275
+
primary_600: `hsl(140, 38%, ${dimScale[8]}%)`,
276
+
primary_700: `hsl(140, 42%, ${dimScale[9]}%)`,
277
+
primary_800: `hsl(140, 45%, ${dimScale[10]}%)`,
278
+
primary_900: `hsl(140, 48%, ${dimScale[11]}%)`,
279
+
primary_950: `hsl(140, 50%, ${dimScale[12]}%)`,
280
+
primary_975: `hsl(140, 55%, ${dimScale[13]}%)`,
281
281
282
282
positive_25: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`,
283
283
positive_50: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`,
+3
-3
src/alf/tokens.ts
+3
-3
src/alf/tokens.ts
+18
-13
src/lib/styles.ts
+18
-13
src/lib/styles.ts
···
1
-
import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
1
+
import {
2
+
Dimensions,
3
+
type StyleProp,
4
+
StyleSheet,
5
+
type TextStyle,
6
+
} from 'react-native'
2
7
3
8
import {isWeb} from '#/platform/detection'
4
-
import {Theme, TypographyVariant} from './ThemeContext'
9
+
import {type Theme, type TypographyVariant} from './ThemeContext'
5
10
6
11
// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
7
12
export const colors = {
···
17
22
gray7: '#26272D',
18
23
gray8: '#141417',
19
24
20
-
blue0: '#bfe1ff',
21
-
blue1: '#8bc7fd',
22
-
blue2: '#52acfe',
23
-
blue3: '#0085ff',
24
-
blue4: '#0062bd',
25
-
blue5: '#034581',
26
-
blue6: '#012561',
27
-
blue7: '#001040',
25
+
blue0: '#d5e8d9',
26
+
blue1: '#b8d6be',
27
+
blue2: '#95bd9f',
28
+
blue3: '#729f7c',
29
+
blue4: '#528157',
30
+
blue5: '#3a6141',
31
+
blue6: '#25422c',
32
+
blue7: '#14291a',
28
33
29
34
red1: '#ffe6eb',
30
35
red2: '#fba2b2',
···
58
63
}
59
64
60
65
export const gradients = {
61
-
blueLight: {start: '#5A71FA', end: colors.blue3}, // buttons
62
-
blue: {start: '#5E55FB', end: colors.blue3}, // fab
63
-
blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
66
+
blueLight: {start: '#a3b18a', end: colors.blue3}, // buttons
67
+
blue: {start: '#8a9e7b', end: colors.blue3}, // fab
68
+
blueDark: {start: '#658764', end: colors.blue3}, // avis, banner
64
69
}
65
70
66
71
export const s = StyleSheet.create({
+2
-2
src/style.css
+2
-2
src/style.css
···
109
109
pointer-events: none;
110
110
}
111
111
.ProseMirror .mention {
112
-
color: #0085ff;
112
+
color: rgb(75, 155, 108);
113
113
}
114
114
.ProseMirror a,
115
115
.ProseMirror .autolink {
116
-
color: #0085ff;
116
+
color: rgb(75, 155, 108);
117
117
}
118
118
/* OLLIE: TODO -- this is not accessible */
119
119
/* Remove focus state on inputs */
+2
-2
src/view/icons/Logo.tsx
+2
-2
src/view/icons/Logo.tsx
···
57
57
{gradient && (
58
58
<Defs>
59
59
<LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
60
-
<Stop offset="0" stopColor="#0A7AFF" stopOpacity="1" />
61
-
<Stop offset="1" stopColor="#59B9FF" stopOpacity="1" />
60
+
<Stop offset="0" stopColor="#a3b18a" stopOpacity="1" />
61
+
<Stop offset="1" stopColor="#344e41" stopOpacity="1" />
62
62
</LinearGradient>
63
63
</Defs>
64
64
)}
+11
-5
web/index.html
+11
-5
web/index.html
···
144
144
<!-- The root element for your Expo app. -->
145
145
<div id="root">
146
146
<div id="splash">
147
-
<!-- Bluesky SVG -->
148
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#0085ff"
149
-
d="m 149.96484,186.56641 46.09766,152.95898 c 0,0 -6.30222,-9.61174 -15.60547,-17.47656 -8.87322,-7.50128 -28.4082,-4.04492 -28.4082,-4.04492 0,0 6.14721,39.88867 15.53125,44.39843 10.71251,5.1482 22.19726,0.16993 22.19726,0.16993 0,0 11.7613,-4.87282 22.82032,31.82421 5.26534,17.47196 15.33258,50.877 20.9707,69.58594 2.16717,7.1913 8.83789,7.25781 8.83789,7.25781 0,0 6.67072,-0.0665 8.83789,-7.25781 5.63812,-18.70894 15.70536,-52.11398 20.9707,-69.58594 11.05902,-36.69703 22.82032,-31.82421 22.82032,-31.82421 0,0 11.48475,4.97827 22.19726,-0.16993 9.38404,-4.50976 15.5332,-44.39843 15.5332,-44.39843 0,0 -19.53693,-3.45636 -28.41015,4.04492 -9.30325,7.86482 -15.60547,17.47656 -15.60547,17.47656 l 46.09766,-152.95898 -49.32618,83.84179 -20.34375,-31.1914 6.35547,54.96875 -23.1582,39.36132 c 0,0 -2.97595,5.06226 -5.94336,4.68946 -0.009,-0.001 -0.0169,0.003 -0.0254,0.01 -0.008,-0.007 -0.0167,-0.0109 -0.0254,-0.01 -2.96741,0.3728 -5.94336,-4.68946 -5.94336,-4.68946 l -23.1582,-39.36132 6.35547,-54.96875 -20.34375,31.1914 z"
150
-
transform="matrix(2.6921023,0,0,1.7145911,-396.58283,-308.01527)"
151
-
/></svg>
147
+
<!-- deer SVG -->
148
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
149
+
150
+
<defs>
151
+
<linearGradient x1="0" y1="0" x2="0" y2="1" id="index_sky"><stop offset="0" stop-color="#a3b18a" stop-opacity="1"></stop><stop offset="1" stop-color="#344e41" stop-opacity="1"></stop></linearGradient>
152
+
</defs>
153
+
<path fill="url(#index_sky)"
154
+
d="m 149.96484,186.56641 46.09766,152.95898 c 0,0 -6.30222,-9.61174 -15.60547,-17.47656 -8.87322,-7.50128 -28.4082,-4.04492 -28.4082,-4.04492 0,0 6.14721,39.88867 15.53125,44.39843 10.71251,5.1482 22.19726,0.16993 22.19726,0.16993 0,0 11.7613,-4.87282 22.82032,31.82421 5.26534,17.47196 15.33258,50.877 20.9707,69.58594 2.16717,7.1913 8.83789,7.25781 8.83789,7.25781 0,0 6.67072,-0.0665 8.83789,-7.25781 5.63812,-18.70894 15.70536,-52.11398 20.9707,-69.58594 11.05902,-36.69703 22.82032,-31.82421 22.82032,-31.82421 0,0 11.48475,4.97827 22.19726,-0.16993 9.38404,-4.50976 15.5332,-44.39843 15.5332,-44.39843 0,0 -19.53693,-3.45636 -28.41015,4.04492 -9.30325,7.86482 -15.60547,17.47656 -15.60547,17.47656 l 46.09766,-152.95898 -49.32618,83.84179 -20.34375,-31.1914 6.35547,54.96875 -23.1582,39.36132 c 0,0 -2.97595,5.06226 -5.94336,4.68946 -0.009,-0.001 -0.0169,0.003 -0.0254,0.01 -0.008,-0.007 -0.0167,-0.0109 -0.0254,-0.01 -2.96741,0.3728 -5.94336,-4.68946 -5.94336,-4.68946 l -23.1582,-39.36132 6.35547,-54.96875 -20.34375,31.1914 z"
155
+
transform="matrix(2.6921023,0,0,1.7145911,-396.58283,-308.01527)"
156
+
/>
157
+
</svg>
152
158
</div>
153
159
</div>
154
160
</body>