Fixed

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

@@ -128,6 +128,18 @@ declare module "@mui/material/styles" {
     interface Palette {
         accent: PaletteColor;
         critical: PaletteColor;
+        /**
+         * Various fixed colors used by our designs that do not change with the
+         * color scheme.
+         */
+        fixed: {
+            white: string;
+            black: string;
+            /**
+             * e.g. color of the "archived" indicator shown on top of albums.
+             */
+            overlayIndicatorMuted: string;
+        };
         /**
          * MUI as of v6 does not allow customizing the shadows easily. This is
          * due for change: https://github.com/mui/material-ui/issues/44291.
@@ -150,6 +162,7 @@ declare module "@mui/material/styles" {
     interface PaletteOptions {
         accent?: PaletteColorOptions;
         critical?: PaletteColorOptions;
+        fixed?: Palette["fixed"];
         boxShadow?: Palette["boxShadow"];
     }
 }

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

@@ -278,6 +278,21 @@ const getPallette = (
     }
 };
 
+/**
+ * The color values.
+ *
+ * Use this arbitrarily shaped object to define the palette. It both prevents
+ * duplication across color schemes, and also us to see the semantic
+ * relationships between the colors (if there are any).
+ */
+const _color = {
+    fixed: {
+        white: "#fff",
+        black: "#000",
+        overlayIndicatorMuted: "rgba(255, 255, 255, 0.48)",
+    },
+};
+
 const getPalletteOptions = (
     themeColor: THEME_COLOR,
     colors: ThemeColorsOptions,
@@ -327,6 +342,7 @@ const getPalletteOptions = (
             faint: colors.text?.faint,
         },
         divider: colors.stroke?.faint,
+        fixed: { ..._color.fixed },
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         boxShadow: colors.boxShadow,

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

@@ -147,7 +147,7 @@ export const Notification: React.FC<NotificationProps> = ({
                     // "secondary", then the notification becomes opaque, which
                     // is not what we want. So give the entire snackbar a solid
                     // background color.
-                    backgroundColor: "#000",
+                    backgroundColor: "fixed.black",
                 },
                 ...(sx ? (isSxArray(sx) ? sx : [sx]) : []),
             ]}

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

@@ -529,9 +529,7 @@ const CollectionBarCardIcon: React.FC<CollectionBarCardIconProps> = ({
     <CollectionBarCardIcon_>
         {type == "favorites" && <FavoriteRoundedIcon />}
         {type == "archived" && (
-            <ArchiveIcon
-                sx={(theme) => ({ color: theme.colors.white.muted })}
-            />
+            <ArchiveIcon sx={{ color: "fixed.overlayIndicatorMuted" }} />
         )}
         {type == "outgoingShare" && <PeopleIcon />}
         {(type == "incomingShareViewer" ||