acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Delete "non-standard" styles from pal (#10279)

Browse Source
This commit is contained in:
Samuel Newman
2026-04-20 11:34:25 -07:00
committed by GitHub
parent ae0c2e8697
commit 014ffac903
8 changed files with 88 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/ThemeContext.tsx
-2
View File
@@ -21,8 +21,6 @@ export type PaletteColor = {
textInverted: string
link: string
border: string
borderDark: string
icon: string
[k: string]: string
}
export type Palette = Record<PaletteColorName, PaletteColor>
src/lib/hooks/usePalette.ts
-8
View File
@@ -13,12 +13,10 @@ export interface UsePaletteValue {
viewLight: ViewStyle
btn: ViewStyle
border: ViewStyle
borderDark: ViewStyle
text: TextStyle
textLight: TextStyle
textInverted: TextStyle
link: TextStyle
icon: TextStyle
}
/**
@@ -42,9 +40,6 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
border: {
borderColor: palette.border,
},
borderDark: {
borderColor: palette.borderDark,
},
text: {
color: palette.text,
},
@@ -57,9 +52,6 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
link: {
color: palette.link,
},
icon: {
color: palette.icon,
},
}
}, [theme, color])
}
src/lib/styles.ts
-2
View File
@@ -54,8 +54,6 @@ export const colors = {
green3: '#20bc07',
green4: '#148203',
green5: '#082b03',
unreadNotifBg: '#ebf6ff',
}
/**
src/lib/themes.ts
-49
View File
@@ -17,19 +17,6 @@ export const defaultTheme: Theme = {
textInverted: lightPalette.white,
link: lightPalette.primary_500,
border: lightPalette.contrast_100,
borderDark: lightPalette.contrast_200,
icon: lightPalette.contrast_500,
// non-standard
textVeryLight: lightPalette.contrast_400,
replyLine: lightPalette.contrast_100,
replyLineDot: lightPalette.contrast_200,
unreadNotifBg: lightPalette.primary_25,
unreadNotifBorder: lightPalette.primary_100,
postCtrl: lightPalette.contrast_500,
brandText: lightPalette.primary_500,
emptyStateIcon: lightPalette.contrast_300,
borderLinkHover: lightPalette.contrast_300,
},
primary: {
background: colors.blue3,
@@ -39,8 +26,6 @@ export const defaultTheme: Theme = {
textInverted: colors.blue3,
link: colors.blue0,
border: colors.blue4,
borderDark: colors.blue5,
icon: colors.blue4,
},
secondary: {
background: colors.green3,
@@ -50,8 +35,6 @@ export const defaultTheme: Theme = {
textInverted: colors.green4,
link: colors.green1,
border: colors.green4,
borderDark: colors.green5,
icon: colors.green4,
},
inverted: {
background: darkPalette.black,
@@ -61,8 +44,6 @@ export const defaultTheme: Theme = {
textInverted: darkPalette.black,
link: darkPalette.primary_500,
border: darkPalette.contrast_100,
borderDark: darkPalette.contrast_200,
icon: darkPalette.contrast_500,
},
error: {
background: colors.red3,
@@ -72,8 +53,6 @@ export const defaultTheme: Theme = {
textInverted: colors.red3,
link: colors.red1,
border: colors.red4,
borderDark: colors.red5,
icon: colors.red4,
},
},
shapes: {
@@ -303,19 +282,6 @@ export const darkTheme: Theme = {
textInverted: darkPalette.black,
link: darkPalette.primary_500,
border: darkPalette.contrast_100,
borderDark: darkPalette.contrast_200,
icon: darkPalette.contrast_500,
// non-standard
textVeryLight: darkPalette.contrast_400,
replyLine: darkPalette.contrast_200,
replyLineDot: darkPalette.contrast_200,
unreadNotifBg: darkPalette.primary_25,
unreadNotifBorder: darkPalette.primary_100,
postCtrl: darkPalette.contrast_500,
brandText: darkPalette.primary_500,
emptyStateIcon: darkPalette.contrast_300,
borderLinkHover: darkPalette.contrast_300,
},
primary: {
...defaultTheme.palette.primary,
@@ -333,8 +299,6 @@ export const darkTheme: Theme = {
textInverted: darkPalette.white,
link: lightPalette.primary_500,
border: lightPalette.contrast_100,
borderDark: lightPalette.contrast_200,
icon: lightPalette.contrast_500,
},
},
}
@@ -352,19 +316,6 @@ export const dimTheme: Theme = {
textInverted: dimPalette.black,
link: dimPalette.primary_500,
border: dimPalette.contrast_100,
borderDark: dimPalette.contrast_200,
icon: dimPalette.contrast_500,
// non-standard
textVeryLight: dimPalette.contrast_400,
replyLine: dimPalette.contrast_200,
replyLineDot: dimPalette.contrast_200,
unreadNotifBg: dimPalette.primary_25,
unreadNotifBorder: dimPalette.primary_100,
postCtrl: dimPalette.contrast_500,
brandText: dimPalette.primary_500,
emptyStateIcon: dimPalette.contrast_300,
borderLinkHover: dimPalette.contrast_300,
},
},
}
src/view/com/notifications/NotificationFeedItem.tsx
+6 -8
View File
@@ -26,7 +26,6 @@ import {useQueryClient} from '@tanstack/react-query'
import {DM_SERVICE_HEADERS, MAX_POST_LINES} from '#/lib/constants'
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {type NavigationProp} from '#/lib/routes/types'
import {forceLTR} from '#/lib/strings/bidi'
@@ -92,10 +91,9 @@ let NotificationFeedItem = ({
hideTopBorder?: boolean
}): React.ReactNode => {
const queryClient = useQueryClient()
const pal = usePalette('default')
const t = useTheme()
const {_, i18n} = useLingui()
const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false)
const [isAuthorsExpanded, setIsAuthorsExpanded] = useState<boolean>(false)
const itemHref = useMemo(() => {
switch (item.type) {
case 'post-like':
@@ -145,7 +143,7 @@ let NotificationFeedItem = ({
e.preventDefault()
e.stopPropagation()
}
setAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
setIsAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
}
const onBeforePress = useCallback(() => {
@@ -222,8 +220,8 @@ let NotificationFeedItem = ({
post={item.subject}
style={
isHighlighted && {
backgroundColor: pal.colors.unreadNotifBg,
borderColor: pal.colors.unreadNotifBorder,
backgroundColor: t.palette.primary_25,
borderColor: t.palette.primary_100,
}
}
hideTopBorder={hideTopBorder}
@@ -577,8 +575,8 @@ let NotificationFeedItem = ({
item.notification.isRead
? undefined
: {
backgroundColor: pal.colors.unreadNotifBg,
borderColor: pal.colors.unreadNotifBorder,
backgroundColor: t.palette.primary_25,
borderColor: t.palette.primary_100,
},
!hideTopBorder && a.border_t,
a.overflow_hidden,
src/view/com/post/Post.tsx
+18 -8
View File
@@ -12,10 +12,8 @@ import {useQueryClient} from '@tanstack/react-query'
import {MAX_POST_LINES} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {countLines} from '#/lib/strings/helpers'
import {colors} from '#/lib/styles'
import {
POST_TOMBSTONE,
type Shadow,
@@ -26,7 +24,7 @@ import {unstableCacheProfileView} from '#/state/queries/profile'
import {Link} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a} from '#/alf'
import {atoms as a, select, useTheme} from '#/alf'
import {
GalleryBleed,
maybeApplyGalleryOffsetStyles,
@@ -119,7 +117,7 @@ function PostInner({
onBeforePress?: () => void
}) {
const queryClient = useQueryClient()
const pal = usePalette('default')
const t = useTheme()
const {openComposer} = useOpenComposer()
const [limitLines, setLimitLines] = useState(
() => countLines(richText?.text) >= MAX_POST_LINES,
@@ -164,8 +162,8 @@ function PostInner({
href={itemHref}
style={[
styles.outer,
pal.border,
!hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth},
t.atoms.border_contrast_low,
!hideTopBorder && a.border_t,
style,
]}
onBeforePress={onBeforePress}
@@ -176,7 +174,20 @@ function PostInner({
setHover(false)
}}>
<SubtleHover hover={hover} />
{showReplyLine && <View style={styles.replyLine} />}
{showReplyLine && (
<View
style={[
styles.replyLine,
{
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
},
]}
/>
)}
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<PreviewableUserAvatar
@@ -290,7 +301,6 @@ const styles = StyleSheet.create({
top: 70,
bottom: 0,
borderLeftWidth: 2,
borderLeftColor: colors.gray2,
},
contentHider: {
marginBottom: 2,
src/view/com/posts/PostFeedItem.tsx
+13 -5
View File
@@ -33,7 +33,7 @@ import {
import {Link} from '#/view/com/util/Link'
import {PostMeta} from '#/view/com/util/PostMeta'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a} from '#/alf'
import {atoms as a, select, useTheme} from '#/alf'
import {
GalleryBleed,
maybeApplyGalleryOffsetStyles,
@@ -167,6 +167,7 @@ let FeedItemInner = ({
const queryClient = useQueryClient()
const {openComposer} = useOpenComposer()
const pal = usePalette('default')
const t = useTheme()
const {currentAccount} = useSession()
const [hover, setHover] = useState(false)
@@ -346,8 +347,11 @@ let FeedItemInner = ({
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
marginBottom: 4,
},
]}
@@ -381,8 +385,11 @@ let FeedItemInner = ({
style={[
styles.replyLine,
{
flexGrow: 1,
backgroundColor: pal.colors.replyLine,
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
marginTop: live ? 8 : 4,
},
]}
@@ -536,6 +543,7 @@ const styles = StyleSheet.create({
cursor: 'pointer',
},
replyLine: {
flexGrow: 1,
width: 2,
marginLeft: 'auto',
marginRight: 'auto',
src/view/com/posts/ViewFullThread.tsx
+51 -56
View File
@@ -1,75 +1,70 @@
import {useMemo} from 'react'
import {StyleSheet, View} from 'react-native'
import {View} from 'react-native'
import Svg, {Circle, Line} from 'react-native-svg'
import {AtUri} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import {usePalette} from '#/lib/hooks/usePalette'
import {makeProfileLink} from '#/lib/routes/links'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {atoms as a, select, useTheme} from '#/alf'
import {Link} from '#/components/Link'
import {SubtleHover} from '#/components/SubtleHover'
import {Link} from '../util/Link'
import {Text} from '../util/text/Text'
import {Text} from '#/components/Typography'
export function ViewFullThread({uri}: {uri: string}) {
const {
state: hover,
onIn: onHoverIn,
onOut: onHoverOut,
} = useInteractionState()
const pal = usePalette('default')
const t = useTheme()
const itemHref = useMemo(() => {
const urip = new AtUri(uri)
return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
}, [uri])
const {_} = useLingui()
const {t: l} = useLingui()
return (
<Link
style={[styles.viewFullThread]}
href={itemHref}
asAnchor
noFeedback
onPointerEnter={onHoverIn}
onPointerLeave={onHoverOut}>
<SubtleHover
hover={hover}
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
style={{top: 8, bottom: -5}}
/>
<View style={styles.viewFullThreadDots}>
<Svg width="4" height="40">
<Line
x1="2"
y1="0"
x2="2"
y2="15"
stroke={pal.colors.replyLine}
strokeWidth="2"
style={[
a.flex_row,
{
gap: 10,
paddingLeft: 18,
},
]}
to={itemHref}
label={l`View full thread`}>
{({hovered}) => (
<>
<SubtleHover
hover={hovered}
// adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
style={{top: 8, bottom: -5}}
/>
<Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} />
<Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} />
<Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} />
</Svg>
</View>
<Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
{/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
{_(msg`View full thread`)}
</Text>
<View style={[a.align_center, {width: 42}]}>
<Svg width="4" height="40">
<Line
x1="2"
y1="0"
x2="2"
y2="15"
stroke={select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
})}
strokeWidth="2"
/>
<Circle cx="2" cy="22" r="1.5" fill={t.palette.contrast_200} />
<Circle cx="2" cy="28" r="1.5" fill={t.palette.contrast_200} />
<Circle cx="2" cy="34" r="1.5" fill={t.palette.contrast_200} />
</Svg>
</View>
<Text
style={[
a.text_md,
{color: t.palette.primary_500, paddingTop: 18, paddingBottom: 4},
]}>
{/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
{l`View full thread`}
</Text>
</>
)}
</Link>
)
}
const styles = StyleSheet.create({
viewFullThread: {
flexDirection: 'row',
gap: 10,
paddingLeft: 18,
},
viewFullThreadDots: {
width: 42,
alignItems: 'center',
},
})