fainter

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

@@ -907,9 +907,7 @@ const MapBoxEnableContainer = styled(MapBoxContainer)(
     display: flex;
     justify-content: center;
     align-items: center;
-    /* TODO(LM): Name? */
-    background-color: ${theme.vars.palette.fill.faintHover};
-    // background-color: rgba(255, 255, 255, 0.09);
+    background-color: ${theme.vars.palette.fill.fainter};
 `,
 );
 

web/apps/photos/src/components/Upload/UploadProgress.tsx

@@ -433,8 +433,8 @@ const SectionAccordion = styled((props: AccordionProps) => (
     "&:last-child": { borderBottom: `1px solid ${theme.vars.palette.divider}` },
 }));
 
-const SectionAccordionSummary = styled(AccordionSummary)(() => ({
-    backgroundColor: "rgba(255, 255, 255, .05)",
+const SectionAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
+    backgroundColor: theme.vars.palette.fill.fainter,
 }));
 
 const SectionAccordionDetails = styled(AccordionDetails)(({ theme }) => ({

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

@@ -85,16 +85,18 @@ declare module "@mui/material/styles" {
          * These change with the color scheme.
          *
          * They come in three strengths which are meant to play nicely with the
-         * corresponding strengths of "text.*" and "stroke.*".
+         * corresponding strengths of "text.*" and "stroke.*", plus extra ones.
          *
-         * The strength comes with a hover variant, useful to indicate the hover
-         * state of buttons and menu items that use the corresponding fill.
+         * Some strengths also have a hover variant, useful to indicate hover on
+         * buttons and menu items that use the corresponding fill.
          */
         fill: {
             base: string;
+            baseHover: string;
             muted: string;
             faint: string;
             faintHover: string;
+            fainter: string;
         };
         /**
          * Transparent background fills that serve as the backdrop of modals,

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

@@ -156,7 +156,7 @@ const _colors = {
         switchOn: "#2ECA45",
         croppedAreaOverlay: "rgba(0 0 0 / 0.5)",
         overlayIndicatorMuted: "rgba(255 255 255 / 0.48)",
-        storageCardUsageFill: "rgba(255 255 255 / 0.2)"
+        storageCardUsageFill: "rgba(255 255 255 / 0.2)",
     },
     light: {
         background: {
@@ -210,10 +210,11 @@ const _colors = {
         },
         fill: {
             base: "#fff",
+            baseHover: "rgba(255 255 255 / 0.90)",
             muted: "rgba(255 255 255 / 0.16)",
             faint: "rgba(255 255 255 / 0.12)",
-            baseHover: "rgba(255 255 255 / 0.90)",
             faintHover: "rgba(255 255 255 / 0.06)",
+            fainter: "rgba(255 255 255 / 0.05)",
         },
         stroke: {
             base: "#fff",
@@ -282,9 +283,11 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
             },
             fill: {
                 base: colors.dark.fill.base,
+                baseHover: colors.dark.fill.baseHover,
                 muted: colors.dark.fill.muted,
                 faint: colors.dark.fill.faint,
                 faintHover: colors.dark.fill.faintHover,
+                fainter: colors.dark.fill.fainter,
             },
             stroke: {
                 base: colors.dark.stroke.base,