Solids

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

@@ -181,12 +181,21 @@ const _colors = {
         },
         fill: {
             base: "#000",
+            /* TODO: Unused */
             baseHover: "rgba(0 0 0 / 0.87)",
             muted: "rgba(0 0 0 / 0.12)",
             faint: "rgba(0 0 0 / 0.04)",
+            /** TODO(LM): Needed? */
             faintHover: "rgba(0 0 0 / 0.08)",
             fainter: "rgba(0 0 0 / 0.02)",
         },
+        // MUI (as of v6.4) doesn't like it if we specify a non-solid color for
+        // primary.main or secondary.main, or don't specify it using the #nnnnnn
+        // notation; it seems to mess with the derivation of the color channels.
+        secondary: {
+            main: "#f5f5f5",
+            hover: "#e9e9e9",
+        },
         stroke: {
             base: "#000",
             muted: "rgba(0 0 0 / 0.24)",
@@ -222,6 +231,10 @@ const _colors = {
             faintHover: "rgba(255 255 255 / 0.16)",
             fainter: "rgba(255 255 255 / 0.05)",
         },
+        secondary: {
+            main: "#1f1f1f",
+            hover: "#292929",
+        },
         stroke: {
             base: "#fff",
             muted: "rgba(255 255 255 / 0.24)",
@@ -241,13 +254,12 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
             background: colors.light.background,
             backdrop: colors.light.backdrop,
             primary: {
-                main: colors.light.fill.base,
-                dark: colors.light.fill.baseHover,
+                main: colors.fixed.black,
                 contrastText: colors.fixed.white,
             },
             secondary: {
-                main: colors.light.fill.faint,
-                dark: colors.light.fill.faintHover,
+                main: colors.light.secondary.main,
+                dark: colors.light.secondary.hover,
                 contrastText: colors.light.text.base,
             },
             success: { main: colors.fixed.success },
@@ -332,13 +344,12 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
             background: colors.dark.background,
             backdrop: colors.dark.backdrop,
             primary: {
-                main: colors.dark.fill.base,
-                dark: colors.dark.fill.baseHover,
+                main: colors.fixed.white,
                 contrastText: colors.fixed.black,
             },
             secondary: {
-                main: colors.dark.fill.faint,
-                dark: colors.dark.fill.faintHover,
+                main: colors.dark.secondary.main,
+                dark: colors.dark.secondary.hover,
                 contrastText: colors.dark.text.base,
             },
             success: { main: colors.fixed.success },