Backdrop

web/apps/photos/src/components/PhotoViewer/index.tsx

@@ -989,7 +989,7 @@ const CaptionContainer = styled("div")(({ theme }) => ({
     maxWidth: "375px",
     fontSize: "14px",
     lineHeight: "17px",
-    backgroundColor: theme.palette.misc.backdropFaint,
+    backgroundColor: theme.palette.backdrop.faint,
     backdropFilter: "blur(96px)",
 }));
 

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

@@ -161,6 +161,17 @@ declare module "@mui/material/styles" {
          * This does not vary with the color scheme.
          */
         critical: PaletteColor;
+        /**
+         * Transparent background fills that serve as the backdrop of modals,
+         * dialogs and drawers etc.
+         *
+         * These change with the color scheme.
+         */
+        backdrop: {
+            base: string;
+            muted: string;
+            faint: string;
+        };
         /**
          * Various ad-hoc fixed colors used by our designs.
          *
@@ -174,18 +185,6 @@ declare module "@mui/material/styles" {
              */
             overlayIndicatorMuted: string;
         };
-        /**
-         * Various ad-hoc fixed colors used by our designs.
-         *
-         * These change with the color scheme.
-         */
-        misc: {
-            /**
-             * Fill color for the backdrop of various modals, dialogs and
-             * drawers etc.
-             */
-            backdropFaint: string;
-        };
         /**
          * MUI as of v6 does not allow customizing shadows easily. This is due
          * for change: https://github.com/mui/material-ui/issues/44291.
@@ -208,8 +207,8 @@ declare module "@mui/material/styles" {
     interface PaletteOptions {
         accent?: Palette["accent"];
         critical?: Palette["critical"];
+        backdrop?: Palette["backdrop"];
         fixed?: Palette["fixed"];
-        misc?: Palette["misc"];
         boxShadow?: Palette["boxShadow"];
     }
 }

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

@@ -342,8 +342,10 @@ const getPalletteOptions = (
         },
         divider: colors.stroke?.faint,
         fixed: { ..._color.fixed },
-        misc: {
+        backdrop: {
-            backdropFaint: colors.backdrop!.faint!,
+            base: colors.backdrop!.base!,
+            muted: colors.backdrop!.muted!,
+            faint: colors.backdrop!.faint!,
         },
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -494,7 +496,7 @@ const getComponents = (
         styleOverrides: {
             root: {
                 ".MuiBackdrop-root": {
-                    backgroundColor: palette.misc?.backdropFaint,
+                    backgroundColor: palette.backdrop?.faint,
                 },
             },
         },
@@ -511,7 +513,7 @@ const getComponents = (
         styleOverrides: {
             root: {
                 ".MuiBackdrop-root": {
-                    backgroundColor: palette.misc?.backdropFaint,
+                    backgroundColor: palette.backdrop?.faint,
                 },
                 "& .MuiDialog-paper": {
                     boxShadow: palette.boxShadow?.float,

web/packages/new/photos/components/gallery/BarImpl.tsx

@@ -364,24 +364,24 @@ const ScrollButtonBase: React.FC<
     </ScrollButtonBase_>
 );
 
-const ScrollButtonBase_ = styled("button")`
+const ScrollButtonBase_ = styled("button")(({ theme }) => ({
-    position: absolute;
+    position: "absolute",
-    z-index: 2;
+    zIndex: 2,
-    top: 7px;
+    top: "7px",
-    height: 50px;
+    height: "50px",
-    width: 50px;
+    width: "50px",
-    border: none;
+    border: "none",
-    padding: 0;
+    padding: 0,
-    margin: 0;
+    margin: 0,
-    border-radius: 50%;
+    borderRadius: "50%",
-    background-color: ${({ theme }) => theme.colors.backdrop.muted};
+    backgroundColor: theme.palette.backdrop.muted,
-    color: ${({ theme }) => theme.colors.stroke.base};
+    color: theme.colors.stroke.base,
-    & > svg {
+    "& > svg": {
-        border-radius: 50%;
+        borderRadius: "50%",
-        height: 30px;
+        height: "30px",
-        width: 30px;
+        width: "30px",
-    }
+    },
-`;
+}));
 
 const ScrollButtonLeft = styled(ScrollButtonBase)`
     left: 0;