[web] Fix link default prop for the (WIP) light mode (#4817)

This was causing an exception when opening screens with the <Link>

Author: mnvr

web/apps/photos/src/components/Collections/AlbumCastDialog.tsx

@@ -187,7 +187,7 @@ export const AlbumCastDialog: React.FC<AlbumCastDialogProps> = ({
             {view == "pin" && (
                 <>
                     <Stack sx={{ gap: 2, mb: 2 }}>
-                        <Typography>
+                        <Typography sx={{ color: "text.muted" }}>
                             <Trans
                                 i18nKey="visit_cast_url"
                                 components={{
@@ -196,7 +196,9 @@ export const AlbumCastDialog: React.FC<AlbumCastDialogProps> = ({
                                 values={{ url: castHost }}
                             />
                         </Typography>
-                        <Typography>{t("enter_cast_pin_code")}</Typography>
+                        <Typography sx={{ color: "text.muted" }}>
+                            {t("enter_cast_pin_code")}
+                        </Typography>
                     </Stack>
                     <SingleInputForm
                         callback={onSubmit}

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

@@ -296,7 +296,7 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
                 hover: colors.light.fill.faintHover,
                 // For an icon button, the hover background color is derived
                 // from the active color above and this opacity.
-                hoverOpacity: 0.04,
+                hoverOpacity: 0.06,
                 // TODO(LM): Remove commented.
                 // The color of a selected action.
                 //
@@ -627,15 +627,21 @@ const components: Components = {
         },
     },
 
+    // The default link "color" prop is "primary", which maps to "fill.base"
+    // (and equivalently, to "text.base"). In our current designs, the <Link>
+    // MUI component is only used in places where the surrounding text uses
+    // "text.muted", so this default already provides it a highlight compared to
+    // the text it in embedded in.
+    //
+    // We additionally disable the underline, and add a hover indication by
+    // switching its color to the main accent.
     MuiLink: {
         defaultProps: {
-            color: "var(--mui-palette-accent-main)",
             underline: "none",
         },
         styleOverrides: {
             root: {
                 "&:hover": {
-                    underline: "always",
                     color: "var(--mui-palette-accent-main)",
                 },
             },