Lighten LHN row hover colors

src/components/LHNOptionsList/OptionRowLHN/OptionRow/Pressable.tsx

@@ -167,7 +167,7 @@ function Pressable({optionItem, isOptionFocused, onSelectRow, onLayout, onHoverI
                         styles.sidebarLink,
                         styles.sidebarLinkInnerLHN,
                         StyleUtils.getBackgroundColorStyle(theme.sidebar),
-                        isOptionFocused ? styles.sidebarLinkActive : null,
+                        isOptionFocused ? StyleUtils.getBackgroundColorStyle(theme.navItemSelectedBG) : null,
                         (hovered || isContextMenuActive) && !isOptionFocused ? styles.sidebarLinkHover : null,
                     ]}
                     role={CONST.ROLE.BUTTON}

src/components/LHNOptionsList/OptionRowLHN/useOptionRowChrome.ts

@@ -44,8 +44,8 @@ function useOptionRowChrome({isOptionFocused, viewMode}: UseOptionRowChromeParam
     );
     const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];
 
-    const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
-    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
+    const hoveredBackgroundColor = theme.sidebarHover;
+    const focusedBackgroundColor = theme.navItemSelectedBG;
 
     let avatarBackgroundColor: ColorValue = theme.sidebar;
     if (isOptionFocused) {

src/components/MenuItem/MenuItem.tsx

@@ -884,10 +884,23 @@ function MenuItem({
                                         isCompact && styles.optionRowCompact,
                                         isCompactPopoverItem && (description ? styles.compactPopoverMenuItemBase : styles.compactPopoverMenuItem),
                                         !shouldRemoveBackground &&
-                                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
+                                            // Nav rows (role=tab) skip the pressed background so a press keeps the hover/selected color and only dims via opacity
+                                            StyleUtils.getButtonBackgroundColorStyle(
+                                                getButtonState(focused || isHovered, role === CONST.ROLE.TAB ? false : pressed, success, disabled, interactive),
+                                                true,
+                                            ),
                                         ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
                                         shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
-                                        isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && !shouldRemoveHoverBackground && styles.hoveredComponentBG,
+                                        // Nav rows (role=tab) hold the hover color through a press (dimmed via opacity); other rows drop it on press
+                                        isHovered &&
+                                            interactive &&
+                                            !focused &&
+                                            !shouldRemoveBackground &&
+                                            !shouldRemoveHoverBackground &&
+                                            (role === CONST.ROLE.TAB || !pressed) &&
+                                            styles.hoveredComponentBG,
+                                        // Nav rows (role=tab) use the product300 selected color, held through a press
+                                        role === CONST.ROLE.TAB && focused && !shouldRemoveBackground && StyleUtils.getBackgroundColorStyle(theme.navItemSelectedBG),
                                     ] as StyleProp<ViewStyle>
                                 }
                                 disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}

src/components/TabSelector/getBackground.ts

@@ -4,22 +4,25 @@ import type {Animated} from 'react-native';
 import type {BackgroundColor, GetBackgroundColorConfig} from './types';
 
 function getBackgroundColor({routesLength, tabIndex, affectedTabs, theme, position, isActive}: GetBackgroundColorConfig): BackgroundColor {
+    // High contrast keeps the stronger prior active-tab color (theme.border resolves to product500 there) instead of the lighter product300
+    const activeBackgroundColor = theme.isHighContrast ? theme.border : theme.navItemSelectedBG;
+
     if (routesLength > 1) {
         const inputRange = Array.from({length: routesLength}, (_, i) => i);
 
         if (position) {
             return position.interpolate({
                 inputRange,
                 outputRange: inputRange.map((i) => {
-                    return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG;
+                    return affectedTabs.includes(tabIndex) && i === tabIndex ? activeBackgroundColor : theme.appBG;
                 }),
             }) as unknown as Animated.AnimatedInterpolation<string>;
         }
 
-        return affectedTabs.includes(tabIndex) && isActive ? theme.border : theme.appBG;
+        return affectedTabs.includes(tabIndex) && isActive ? activeBackgroundColor : theme.appBG;
     }
 
-    return theme.border;
+    return activeBackgroundColor;
 }
 
 export default getBackgroundColor;

src/pages/Search/SearchTypeMenuItem.tsx

@@ -8,6 +8,7 @@ import TooltipSense from '@components/Tooltip/TooltipSense';
 
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import getButtonState from '@libs/getButtonState';
@@ -49,6 +50,7 @@ const COLLAPSED_BADGE_EXIT_DURATION_MS = 90;
 function SearchTypeMenuItem({title, icon, badgeText, focused = false, onPress}: SearchTypeMenuItemProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const theme = useTheme();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isVisuallyCollapsed} = useSearchSidebarCollapse();
     const labelAnimatedStyle = useSearchSidebarCollapseFadeStyle();
@@ -80,12 +82,14 @@ function SearchTypeMenuItem({title, icon, badgeText, focused = false, onPress}:
             accessibilityState={{selected: focused}}
             role={CONST.ROLE.TAB}
             sentryLabel={CONST.SENTRY_LABEL.SEARCH.TYPE_MENU_ITEM}
+            // A press keeps the hover/selected color and only dims via opacity, matching the Inbox LHN rows
             style={({hovered, pressed}) => [
                 styles.flexRow,
                 styles.sectionMenuItem(shouldUseNarrowLayout),
                 styles.searchTypeMenuItemPadding,
-                StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || hovered, pressed, false, false, true), true),
-                hovered && !focused && !pressed && styles.hoveredComponentBG,
+                focused ? StyleUtils.getBackgroundColorStyle(theme.navItemSelectedBG) : undefined,
+                hovered && !focused ? styles.hoveredComponentBG : undefined,
+                pressed ? {opacity: variables.pressDimValue} : undefined,
             ]}
         >
             {({hovered, pressed}) => (

src/pages/domain/DomainInitialPage.tsx

@@ -164,6 +164,7 @@ function DomainInitialPage({route}: DomainInitialPageProps) {
                                 highlighted={!!item?.highlighted}
                                 focused={!!(item.screenName && activeRoute?.startsWith(item.screenName))}
                                 badgeText={item.badgeText}
+                                role={CONST.ROLE.TAB}
                                 shouldIconUseAutoWidthStyle
                             />
                         ))}

src/styles/index.ts

@@ -6862,7 +6862,7 @@ const dynamicStyles = (theme: ThemeColors) =>
             }
 
             return {
-                backgroundColor: hovered && !isFocused ? theme.highlightBG : (background as string),
+                backgroundColor: hovered && !isFocused ? theme.hoverComponentBG : (background as string),
             };
         },
 

src/styles/theme/themes/dark-contrast.ts

@@ -5,6 +5,8 @@ import darkTheme from './dark';
 
 const darkContrastTheme = {
     ...darkTheme,
+    // Keep nav rows/tabs at the stronger prior selected value so the state stays legible under high contrast
+    navItemSelectedBG: colors.productDark400,
     border: colors.productDark500,
     icon: colors.productDark700,
     textSupporting: colors.productDark800,

src/styles/theme/themes/dark.ts

@@ -52,12 +52,13 @@ const darkTheme = {
     inverse: colors.productDark900,
     shadow: '0px 4px 12px 0px rgba(2,18,4,0.24)',
     componentBG: colors.productDark100,
-    hoverComponentBG: colors.productDark300,
+    hoverComponentBG: 'rgba(10, 46, 37, 0.6)',
     messageHighlightBG: colors.messageHighlightDark,
     activeComponentBG: colors.productDark400,
+    navItemSelectedBG: colors.productDark300,
     signInSidebar: colors.green800,
     sidebar: colors.productDark100,
-    sidebarHover: colors.productDark300,
+    sidebarHover: 'rgba(10, 46, 37, 0.6)',
     heading: colors.productDark900,
     textLight: colors.productDark900,
     textDark: colors.productDark100,

src/styles/theme/themes/light-contrast.ts

@@ -5,6 +5,8 @@ import lightTheme from './light';
 
 const lightContrastTheme = {
     ...lightTheme,
+    // Keep nav rows/tabs at the stronger prior selected value so the state stays legible under high contrast
+    navItemSelectedBG: colors.productLight400,
     border: colors.productLight500,
     icon: colors.productLight800,
     textSupporting: '#53645C',

src/styles/theme/themes/light.ts

@@ -53,11 +53,12 @@ const lightTheme = {
     shadow: '0px 4px 12px 0px rgba(2,18,4,0.06)',
     componentBG: colors.productLight100,
     messageHighlightBG: colors.yellow100,
-    hoverComponentBG: colors.productLight300,
+    hoverComponentBG: 'rgba(242, 237, 231, 0.6)',
     activeComponentBG: colors.productLight400,
+    navItemSelectedBG: colors.productLight300,
     signInSidebar: colors.green800,
     sidebar: colors.productLight100,
-    sidebarHover: colors.productLight300,
+    sidebarHover: 'rgba(242, 237, 231, 0.6)',
     heading: colors.productLight900,
     textLight: colors.white,
     textDark: colors.productLight900,

src/styles/theme/types.ts

@@ -63,6 +63,8 @@ type ThemeColors = {
     componentBG: Color;
     hoverComponentBG: Color;
     activeComponentBG: Color;
+    /** Background color for a selected/active left-hand-nav row or horizontal tab */
+    navItemSelectedBG: Color;
     signInSidebar: Color;
     sidebar: Color;
     sidebarHover: Color;