Tweak avi follow button styles (#4304)

* Tighten up

* Tweak colors

* Tweak for night mode

* Add missing file

* Contrast plus
zio/stable
Eric Bailey 2024-05-31 14:45:41 -05:00 committed by GitHub
parent f868821cfc
commit 5cda807d9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 42 additions and 13 deletions

View File

@ -1,12 +1,14 @@
import React from 'react'
import {Dimensions} from 'react-native'
import * as themes from '#/alf/themes'
export * from '#/alf/types'
export * as tokens from '#/alf/tokens'
export {atoms} from '#/alf/atoms'
export * from '#/alf/util/platform'
export * as tokens from '#/alf/tokens'
export * from '#/alf/types'
export * from '#/alf/util/flatten'
export * from '#/alf/util/platform'
export * from '#/alf/util/themeSelector'
type BreakpointName = keyof typeof breakpoints

View File

@ -1,11 +1,11 @@
import {atoms} from '#/alf/atoms'
import * as tokens from '#/alf/tokens'
import type {Mutable} from '#/alf/types'
import {atoms} from '#/alf/atoms'
import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
export type ThemeName = 'light' | 'dim' | 'dark'
export type ReadonlyTheme = typeof light
export type Theme = Mutable<ReadonlyTheme>
export type Theme = Mutable<ReadonlyTheme> & {name: ThemeName}
export type ReadonlyPalette = typeof lightPalette
export type Palette = Mutable<ReadonlyPalette>
@ -193,7 +193,7 @@ export const dimPalette: Palette = {
} as const
export const light = {
name: 'light',
name: 'light' as ThemeName,
palette: lightPalette,
atoms: {
text: {
@ -278,7 +278,7 @@ export const light = {
}
export const dark: Theme = {
name: 'dark',
name: 'dark' as ThemeName,
palette: darkPalette,
atoms: {
text: {
@ -367,7 +367,7 @@ export const dark: Theme = {
export const dim: Theme = {
...dark,
name: 'dim',
name: 'dim' as ThemeName,
palette: dimPalette,
atoms: {
...dark.atoms,

View File

@ -0,0 +1,14 @@
import {ThemeName} from '#/alf/themes'
export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
switch (name) {
case 'light':
return options.light
case 'dark':
return options.dark || options.dim
case 'dim':
return options.dim || options.dark
default:
throw new Error(`select(theme, options) received unknown theme ${name}`)
}
}

View File

@ -16,7 +16,7 @@ import {
NativeDropdown,
} from '#/view/com/util/forms/NativeDropdown'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, useTheme} from '#/alf'
import {atoms as a, select, useTheme} from '#/alf'
import {Button} from '#/components/Button'
import {useFollowMethods} from '#/components/hooks/useFollowMethods'
import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
@ -90,17 +90,30 @@ export function AviFollowButton({
hitSlop={createHitslop(3)}
style={[
a.rounded_full,
t.atoms.bg_contrast_975,
select(t.name, {
light: t.atoms.bg_contrast_100,
dim: t.atoms.bg_contrast_100,
dark: t.atoms.bg_contrast_200,
}),
a.absolute,
{
bottom: -2,
right: -2,
bottom: 0,
right: 0,
borderWidth: 1,
borderColor: t.atoms.bg.backgroundColor,
},
]}>
<NativeDropdown items={items}>
<Plus size="sm" fill={t.atoms.bg.backgroundColor} />
<Plus
size="sm"
fill={
select(t.name, {
light: t.atoms.bg_contrast_600,
dim: t.atoms.bg_contrast_500,
dark: t.atoms.bg_contrast_600,
}).backgroundColor
}
/>
</NativeDropdown>
</Button>
)}