Paper

web/apps/photos/src/components/DropdownInput.tsx

@@ -53,17 +53,20 @@ export default function DropdownInput<T extends string>({
                         },
                     },
                     MenuListProps: {
-                        sx: (theme) => ({
-                            backgroundColor: theme.colors.background.elevated2,
+                        sx: {
+                            backgroundColor: "background.paper2",
                             ".MuiMenuItem-root ": {
-                                color: theme.colors.text.faint,
+                                color: "text.faint",
                                 whiteSpace: "normal",
                             },
+                            // Make the selected item pop out by giving it a
+                            // different color instead of giving it a different
+                            // background color.
                             "&&& > .Mui-selected": {
-                                background: theme.colors.background.elevated2,
-                                color: theme.colors.text.base,
+                                backgroundColor: "background.paper2",
+                                color: "text.base",
                             },
-                        }),
+                        },
                     },
                 }}
                 sx={(theme) => ({

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

@@ -96,12 +96,6 @@ declare module "@mui/material/styles" {
         danger: string;
     }
 
-    interface BackgroundType {
-        base: string;
-        elevated: string;
-        elevated2: string;
-    }
-
     interface Strength {
         base: string;
         muted: string;
@@ -119,6 +113,20 @@ declare module "@mui/material/styles" {
 // https://mui.com/material-ui/customization/css-theme-variables/usage/#adding-new-theme-tokens
 
 declare module "@mui/material/styles" {
+    /**
+     * Add "paper2" the "background" color tokens, giving us:
+     *
+     * - background.default
+     * - background.paper
+     * - background.paper2
+     */
+    interface TypeBackground {
+        /**
+         * A second level elevation, indicating a paper within a paper.
+         */
+        paper2: string;
+    }
+
     interface Palette {
         accent: PaletteColor;
         critical: PaletteColor;

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

@@ -190,8 +190,8 @@ const photosAccentColor = {
 const lightThemeColors: Omit<ThemeColorsOptions, keyof FixedColors> = {
     background: {
         base: "#fff",
-        elevated: "#fff",
-        elevated2: "rgba(153, 153, 153, 0.04)",
+        paper: "#fff",
+        paper2: "rgba(153, 153, 153, 0.04)",
     },
     backdrop: {
         base: "rgba(255, 255, 255, 0.92)",
@@ -228,8 +228,8 @@ const lightThemeColors: Omit<ThemeColorsOptions, keyof FixedColors> = {
 const darkThemeColors: Omit<ThemeColorsOptions, keyof FixedColors> = {
     background: {
         base: "#000000",
-        elevated: "#1b1b1b",
-        elevated2: "#252525",
+        paper: "#1b1b1b",
+        paper2: "#252525",
     },
     backdrop: {
         base: "rgba(0, 0, 0, 0.90)",
@@ -329,7 +329,8 @@ const getPalletteOptions = (
         },
         background: {
             default: colors.background?.base,
-            paper: colors.background?.elevated,
+            paper: colors.background?.paper,
+            paper2: colors.background?.paper2,
         },
         text: {
             primary: colors.text?.base,
@@ -535,7 +536,7 @@ const getComponents = (
     },
     MuiPaper: {
         // MUI applies a semi-transparent background image for elevation in dark
-        // mode. Remove it to use the elevated Paper background from our design.
+        // mode. Remove it to match the Paper background from our design.
         styleOverrides: { root: { backgroundImage: "none" } },
     },
     MuiLink: {

web/packages/new/photos/components/CollectionsSortOptions.tsx

@@ -50,9 +50,7 @@ export const CollectionsSortOptions: React.FC<CollectionsSortOptionsProps> = ({
                 // trigger button.
                 marginBlock: 1,
                 backgroundColor: (theme) =>
-                    nestedInDialog
-                        ? theme.colors.background.elevated2
-                        : undefined,
+                    nestedInDialog ? "background.paper2" : undefined,
             },
         }}
         triggerButtonProps={{

web/packages/new/photos/components/SearchBar.tsx

@@ -251,7 +251,7 @@ const SearchInputWrapper = styled("div")`
     align-items: center;
     justify-content: center;
     gap: 8px;
-    background: ${({ theme }) => theme.colors.background.base};
+    background: transparent;
     max-width: 484px;
     margin: auto;
 `;
@@ -260,11 +260,12 @@ const loadOptions = pDebounce(searchOptionsForString, 250);
 
 const createSelectStyles = ({
     colors,
+    palette,
 }: Theme): StylesConfig<SearchOption, false> => ({
     container: (style) => ({ ...style, flex: 1 }),
     control: (style, { isFocused }) => ({
         ...style,
-        backgroundColor: colors.background.elevated,
+        backgroundColor: palette.background.paper,
         borderColor: isFocused ? colors.accent.A500 : "transparent",
         boxShadow: "none",
         ":hover": {
@@ -281,7 +282,9 @@ const createSelectStyles = ({
         ...style,
         // Suppress the default margin at the top.
         marginTop: "1px",
-        backgroundColor: colors.background.elevated,
+        // Give an opaque and elevated surface color to the menu to override the
+        // default (transparent).
+        backgroundColor: palette.background.paper,
     }),
     option: (style, { isFocused }) => ({
         ...style,