Prep for merge

web/packages/base/components/EnteSwitch.tsx

@@ -18,12 +18,14 @@ export const EnteSwitch: React.FC<SwitchProps> = styled((props) => (
             transform: "translateX(16px)",
             color: theme.vars.palette.fixed.white,
             "& + .MuiSwitch-track": {
-                backgroundColor: "#65C466",
                 opacity: 1,
                 border: 0,
-                ...theme.applyStyles("dark", {
-                    backgroundColor: "#2ECA45",
-                }),
+                // TODO(LM):
+                // backgroundColor: "#65C466",
+                // ...theme.applyStyles("dark", {
+                //     backgroundColor: "#2ECA45",
+                // }),
+                backgroundColor: theme.vars.palette.fixed.switchOn,
             },
             "&.Mui-disabled + .MuiSwitch-track": {
                 opacity: 0.5,
@@ -31,15 +33,17 @@ export const EnteSwitch: React.FC<SwitchProps> = styled((props) => (
         },
         "&.Mui-disabled .MuiSwitch-thumb": {
             color: theme.palette.grey[600],
-            ...theme.applyStyles("light", {
-                color: theme.palette.grey[100],
-            }),
+            // TODO(LM):
+            // ...theme.applyStyles("light", {
+            //     color: theme.palette.grey[100],
+            // }),
         },
         "&.Mui-disabled + .MuiSwitch-track": {
             opacity: 0.3,
-            ...theme.applyStyles("light", {
-                opacity: 0.7,
-            }),
+            // TODO(LM):
+            // ...theme.applyStyles("light", {
+            //     opacity: 0.7,
+            // }),
         },
     },
     "& .MuiSwitch-thumb": {
@@ -54,9 +58,10 @@ export const EnteSwitch: React.FC<SwitchProps> = styled((props) => (
         transition: theme.transitions.create(["background-color"], {
             duration: 500,
         }),
-        ...theme.applyStyles("light", {
-            backgroundColor: "#E9E9EA",
-        }),
+        // TODO(LM):
+        // ...theme.applyStyles("light", {
+        //     backgroundColor: "#E9E9EA",
+        // }),
     },
     // Use an alternative affordance to indicate focusVisible as the ripple
     // effect is disabled.

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

@@ -134,6 +134,10 @@ declare module "@mui/material/styles" {
                  */
                 E: string;
             };
+            /**
+             * The color of a switch when it is enabled.
+             */
+            switchOn: string;
             /**
              * The transparent overlay on top of the region that will be cropped
              * during image editing.

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

@@ -152,6 +152,7 @@ const _colors = {
             B: "#333333",
             E: "#ddd",
         },
+        switchOn: "#2ECA45",
         croppedAreaOverlay: "rgba(0 0 0 / 0.5)",
         overlayIndicatorMuted: "rgba(255 255 255 / 0.48)",
     },
@@ -606,8 +607,18 @@ const components: Components = {
     MuiFilledInput: {
         styleOverrides: {
             input: {
+                // Set the background color for text fields when they get
+                // autofilled by the user agent.
+                //
+                // TODO(LM): Right now we need to set it until the light mode is
+                // fully independent. Post that, see if we really need to
+                // override the user agent defaults. Also note that MUI does
+                // overwrite the UA defaults, so we might need to too.
+                //
+                // https://github.com/search?q=repo%3Amui%2Fmaterial-ui%20path%3A%2F%5Epackages%5C%2Fmui-material%5C%2Fsrc%5C%2F%2F%20WebkitBoxShadow&type=code
                 "&:autofill": {
-                    boxShadow: "#c7fd4f",
+                    boxShadow: "0 0 0 100px #266798 inset",
+                    WebkitTextFillColor: "var(--mui-palette-fixed-white)",
                 },
             },
         },