[theming] Use dark mix for hovered color instead of theme.colors.secondaryBg (#10930)

Author: sfc-gh-pchiu

frontend/app/src/components/MainMenu/styled-components.ts

@@ -110,7 +110,7 @@ export const StyledCoreItem = styled.li<ItemStyleProps>(
   ({ isHighlighted, styleProps, theme }) => {
     const highlightedStyles = isHighlighted && {
       "&:hover": {
-        backgroundColor: theme.colors.secondaryBg,
+        backgroundColor: theme.colors.darkenedBgMix15,
       },
     }
 
@@ -138,7 +138,7 @@ export const StyledDevItem = styled.li<ItemStyleProps>(
       "&:hover": {
         // Whatever color we use here as the hover state, we want to transparentize it
         // to its full extend, so you can see the underlying color of the menu.
-        backgroundColor: transparentize(theme.colors.secondaryBg, 1),
+        backgroundColor: transparentize(theme.colors.darkenedBgMix15, 1),
       },
     }
     const margin = styleProps?.margin || 0

frontend/app/src/components/StreamlitDialog/styled-components.ts

@@ -115,7 +115,7 @@ export const StyledCheckbox = styled.input(({ theme }) => ({
   },
 
   "&:disabled": {
-    backgroundColor: theme.colors.secondaryBg,
+    backgroundColor: theme.colors.darkenedBgMix15,
   },
 }))
 

frontend/lib/src/components/elements/ArrowVegaLiteChart/styled-components.ts

@@ -155,7 +155,7 @@ export const StyledVegaLiteChartContainer =
             textDecoration: "none",
           },
           "a:hover, a:focus": {
-            backgroundColor: theme.colors.secondaryBg,
+            backgroundColor: theme.colors.darkenedBgMix15,
             color: theme.colors.bodyText,
           },
           ":before": {
@@ -211,7 +211,7 @@ export const StyledVegaLiteChartContainer =
             boxShadow: "none",
             color: theme.colors.bodyText,
             opacity: "1 !important",
-            background: theme.colors.darkenedBgMix25,
+            background: theme.colors.darkenedBgMix15,
           },
           svg: {
             width: theme.iconSizes.md,

frontend/lib/src/components/shared/Dropdown/styled-components.ts

@@ -21,17 +21,14 @@ import { StyledDropdownListItem } from "baseui/select"
 export const ThemedStyledDropdownListItem = styled(StyledDropdownListItem, {
   shouldForwardProp: isPropValid,
 })(({ theme, $isHighlighted }) => {
-  const backgroundColor = theme.inSidebar
-    ? theme.colors.bgColor
-    : theme.colors.secondaryBg
   return {
     display: "flex",
     alignItems: "center",
     paddingTop: theme.spacing.none,
     paddingBottom: theme.spacing.none,
     paddingLeft: theme.spacing.lg,
     paddingRight: theme.spacing.lg,
-    background: $isHighlighted ? backgroundColor : undefined,
+    background: $isHighlighted ? theme.colors.darkenedBgMix15 : undefined,
 
     // Override the default itemSize set on the component's JSX
     // on mobile, so we can make list items taller and scrollable
@@ -40,7 +37,7 @@ export const ThemedStyledDropdownListItem = styled(StyledDropdownListItem, {
       height: "auto !important",
     },
     "&:hover, &:active, &:focus-visible": {
-      background: backgroundColor,
+      background: theme.colors.darkenedBgMix15,
     },
   }
 })

frontend/lib/src/components/widgets/DataFrame/hooks/useCustomTheme.ts

@@ -77,8 +77,8 @@ function useCustomTheme(): Readonly<CustomGridTheme> {
       bgIconHeader: theme.colors.fadedText60,
       fgIconHeader: theme.colors.white,
       bgHeader: theme.colors.bgMix,
-      bgHeaderHasFocus: theme.colors.secondaryBg,
-      bgHeaderHovered: theme.colors.secondaryBg,
+      bgHeaderHasFocus: theme.colors.darkenedBgMix15,
+      bgHeaderHovered: theme.colors.darkenedBgMix15,
       textHeader: theme.colors.fadedText60,
       textHeaderSelected: theme.colors.white,
       textGroupHeader: theme.colors.fadedText60,

frontend/lib/src/components/widgets/DateInput/DateInput.tsx

@@ -246,7 +246,7 @@ function DateInput({
                   $pseudoSelected ||
                   $pseudoHighlighted ||
                   $isHovered
-                    ? `${colors.secondaryBg} !important`
+                    ? `${colors.darkenedBgMix15} !important`
                     : colors.transparent,
               },