Hover and use

web/apps/photos/src/components/Sidebar/Preferences.tsx

@@ -173,7 +173,7 @@ const ThemeSelector = () => {
     // During SSR, mode is always undefined.
     if (!mode) return null;
 
-    // TODO: Use translations, also remove unused t("CHOSE_THEME")
+    // TODO(LM): Use translations, also remove unused t("CHOSE_THEME")
     return (
         <DropdownInput
             options={[

web/packages/base/components/utils/mui-theme.d.ts

@@ -185,13 +185,14 @@ declare module "@mui/material/styles" {
          * They come in three strengths which are meant to play nicely with the
          * corresponding strengths of "text.*" and "stroke.*".
          *
-         * The faint strength also comes with a pressed variant, useful to
-         * indicate the active state of buttons and menu items.
+         * The faint strength also comes with a hover variant, useful to
+         * indicate the hover state of buttons and menu items. TODO(LM) -
+         * consider moving to others.
          */
         fill: {
             muted: string;
             faint: string;
-            faintPressed: string;
+            faintHover: string;
         };
         /**
          * Transparent background fills that serve as the backdrop of modals,

web/packages/base/components/utils/theme.ts

@@ -1,4 +1,4 @@
-// TODO:
+// TODO(LM)
 /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
@@ -351,7 +351,7 @@ const getPalletteOptions = (
         fill: {
             muted: colors.fill!.muted!,
             faint: colors.fill!.faint!,
-            faintPressed: colors.fill!.faintPressed!,
+            faintHover: colors.fill!.faintPressed!,
         },
         stroke: {
             base: colors.stroke!.base!,

web/packages/shared/components/Menu/EnteMenuItem.tsx

@@ -85,7 +85,7 @@ export const EnteMenuItem: React.FC<EnteMenuItemProps> = ({
                 (theme) => ({
                     width: "100%",
                     "&:hover": {
-                        backgroundColor: theme.colors.fill.faintPressed,
+                        backgroundColor: theme.vars.palette.fill.faintHover,
                     },
                     "& .MuiSvgIcon-root": {
                         fontSize: "20px",
@@ -100,7 +100,7 @@ export const EnteMenuItem: React.FC<EnteMenuItemProps> = ({
                 variant != "secondary" &&
                     variant != "mini" &&
                     ((theme) => ({
-                        backgroundColor: theme.colors.fill.faint,
+                        backgroundColor: theme.vars.palette.fill.faint,
                     })),
             ]}
         >