forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Tweak avi follow button styles (#4304)
* Tighten up
* Tweak colors
* Tweak for night mode
* Add missing file
* Contrast plus
authored by
Eric Bailey
and committed by
GitHub
5cda807d
f868821c
+42
-13
+5
-3
src/alf/index.tsx
+5
-3
src/alf/index.tsx
···
1
1
import React from 'react'
2
2
import {Dimensions} from 'react-native'
3
+
3
4
import * as themes from '#/alf/themes'
4
5
5
-
export * from '#/alf/types'
6
-
export * as tokens from '#/alf/tokens'
7
6
export {atoms} from '#/alf/atoms'
8
-
export * from '#/alf/util/platform'
7
+
export * as tokens from '#/alf/tokens'
8
+
export * from '#/alf/types'
9
9
export * from '#/alf/util/flatten'
10
+
export * from '#/alf/util/platform'
11
+
export * from '#/alf/util/themeSelector'
10
12
11
13
type BreakpointName = keyof typeof breakpoints
12
14
+5
-5
src/alf/themes.ts
+5
-5
src/alf/themes.ts
···
1
+
import {atoms} from '#/alf/atoms'
1
2
import * as tokens from '#/alf/tokens'
2
3
import type {Mutable} from '#/alf/types'
3
-
import {atoms} from '#/alf/atoms'
4
4
import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
5
5
6
6
export type ThemeName = 'light' | 'dim' | 'dark'
7
7
export type ReadonlyTheme = typeof light
8
-
export type Theme = Mutable<ReadonlyTheme>
8
+
export type Theme = Mutable<ReadonlyTheme> & {name: ThemeName}
9
9
export type ReadonlyPalette = typeof lightPalette
10
10
export type Palette = Mutable<ReadonlyPalette>
11
11
···
193
193
} as const
194
194
195
195
export const light = {
196
-
name: 'light',
196
+
name: 'light' as ThemeName,
197
197
palette: lightPalette,
198
198
atoms: {
199
199
text: {
···
278
278
}
279
279
280
280
export const dark: Theme = {
281
-
name: 'dark',
281
+
name: 'dark' as ThemeName,
282
282
palette: darkPalette,
283
283
atoms: {
284
284
text: {
···
367
367
368
368
export const dim: Theme = {
369
369
...dark,
370
-
name: 'dim',
370
+
name: 'dim' as ThemeName,
371
371
palette: dimPalette,
372
372
atoms: {
373
373
...dark.atoms,
+14
src/alf/util/themeSelector.ts
+14
src/alf/util/themeSelector.ts
···
1
+
import {ThemeName} from '#/alf/themes'
2
+
3
+
export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
4
+
switch (name) {
5
+
case 'light':
6
+
return options.light
7
+
case 'dark':
8
+
return options.dark || options.dim
9
+
case 'dim':
10
+
return options.dim || options.dark
11
+
default:
12
+
throw new Error(`select(theme, options) received unknown theme ${name}`)
13
+
}
14
+
}
+18
-5
src/view/com/posts/AviFollowButton.tsx
+18
-5
src/view/com/posts/AviFollowButton.tsx
···
16
16
NativeDropdown,
17
17
} from '#/view/com/util/forms/NativeDropdown'
18
18
import * as Toast from '#/view/com/util/Toast'
19
-
import {atoms as a, useTheme} from '#/alf'
19
+
import {atoms as a, select, useTheme} from '#/alf'
20
20
import {Button} from '#/components/Button'
21
21
import {useFollowMethods} from '#/components/hooks/useFollowMethods'
22
22
import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
···
90
90
hitSlop={createHitslop(3)}
91
91
style={[
92
92
a.rounded_full,
93
-
t.atoms.bg_contrast_975,
93
+
select(t.name, {
94
+
light: t.atoms.bg_contrast_100,
95
+
dim: t.atoms.bg_contrast_100,
96
+
dark: t.atoms.bg_contrast_200,
97
+
}),
94
98
a.absolute,
95
99
{
96
-
bottom: -2,
97
-
right: -2,
100
+
bottom: 0,
101
+
right: 0,
98
102
borderWidth: 1,
99
103
borderColor: t.atoms.bg.backgroundColor,
100
104
},
101
105
]}>
102
106
<NativeDropdown items={items}>
103
-
<Plus size="sm" fill={t.atoms.bg.backgroundColor} />
107
+
<Plus
108
+
size="sm"
109
+
fill={
110
+
select(t.name, {
111
+
light: t.atoms.bg_contrast_600,
112
+
dim: t.atoms.bg_contrast_500,
113
+
dark: t.atoms.bg_contrast_600,
114
+
}).backgroundColor
115
+
}
116
+
/>
104
117
</NativeDropdown>
105
118
</Button>
106
119
)}