From 014ffac90349eaa031285bab1ae81820e89b7fb3 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 20 Apr 2026 11:34:25 -0700 Subject: [PATCH] Delete "non-standard" styles from `pal` (#10279) --- src/lib/ThemeContext.tsx | 2 - src/lib/hooks/usePalette.ts | 8 -- src/lib/styles.ts | 2 - src/lib/themes.ts | 49 -------- .../notifications/NotificationFeedItem.tsx | 14 +-- src/view/com/post/Post.tsx | 26 +++-- src/view/com/posts/PostFeedItem.tsx | 18 ++- src/view/com/posts/ViewFullThread.tsx | 107 +++++++++--------- 8 files changed, 88 insertions(+), 138 deletions(-) diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx index d499910a79..19abb9a7f8 100644 --- a/src/lib/ThemeContext.tsx +++ b/src/lib/ThemeContext.tsx @@ -21,8 +21,6 @@ export type PaletteColor = { textInverted: string link: string border: string - borderDark: string - icon: string [k: string]: string } export type Palette = Record diff --git a/src/lib/hooks/usePalette.ts b/src/lib/hooks/usePalette.ts index db226fba65..d7cf26f472 100644 --- a/src/lib/hooks/usePalette.ts +++ b/src/lib/hooks/usePalette.ts @@ -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]) } diff --git a/src/lib/styles.ts b/src/lib/styles.ts index 8500632e37..03822b6c13 100644 --- a/src/lib/styles.ts +++ b/src/lib/styles.ts @@ -54,8 +54,6 @@ export const colors = { green3: '#20bc07', green4: '#148203', green5: '#082b03', - - unreadNotifBg: '#ebf6ff', } /** diff --git a/src/lib/themes.ts b/src/lib/themes.ts index d99dd37b2c..1df0a555fe 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -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, }, }, } diff --git a/src/view/com/notifications/NotificationFeedItem.tsx b/src/view/com/notifications/NotificationFeedItem.tsx index 79a8d746e8..5f337044e5 100644 --- a/src/view/com/notifications/NotificationFeedItem.tsx +++ b/src/view/com/notifications/NotificationFeedItem.tsx @@ -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(false) + const [isAuthorsExpanded, setIsAuthorsExpanded] = useState(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, diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 052de3bab3..62e7cb2aae 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -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) }}> - {showReplyLine && } + {showReplyLine && ( + + )} { const urip = new AtUri(uri) return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey) }, [uri]) - const {_} = useLingui() + const {t: l} = useLingui() return ( - - - - + {({hovered}) => ( + <> + - - - - - - - - {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */} - {_(msg`View full thread`)} - + + + + + + + + + + {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */} + {l`View full thread`} + + + )} ) } - -const styles = StyleSheet.create({ - viewFullThread: { - flexDirection: 'row', - gap: 10, - paddingLeft: 18, - }, - viewFullThreadDots: { - width: 42, - alignItems: 'center', - }, -})