In palette

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

@@ -161,6 +161,30 @@ declare module "@mui/material/styles" {
          * This does not vary with the color scheme.
          */
         critical: PaletteColor;
+        /**
+         * Neutral tranparent colors for the stroke of icons and other outlines.
+         *
+         * Comes in three strengths which are meant to play nicely with the
+         * corresponding strengths of "text.*" and "fill.*".
+         *
+         * These change with the color scheme.
+         */
+        stroke: {
+            muted: string;
+            faint: string;
+        };
+        /**
+         * Neutral transparent colors for filling small areas like icon or
+         * button backgrounds.
+         *
+         * Comes in three strengths which are meant to play nicely with the
+         * corresponding strengths of "text.*" and "stroke.*".
+         *
+         * These change with the color scheme.
+         */
+        fill: {
+            faint: string;
+        };
         /**
          * Transparent background fills that serve as the backdrop of modals,
          * dialogs and drawers etc.
@@ -207,6 +231,8 @@ declare module "@mui/material/styles" {
     interface PaletteOptions {
         accent?: Palette["accent"];
         critical?: Palette["critical"];
+        stroke?: Palette["stroke"];
+        fill?: Palette["fill"];
         backdrop?: Palette["backdrop"];
         fixed?: Palette["fixed"];
         boxShadow?: Palette["boxShadow"];

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

@@ -335,13 +335,23 @@ const getPalletteOptions = (
             paper2: colors.background?.paper2,
         },
         text: {
+            // Alias base so that we don't have to change the default.
             primary: colors.text?.base,
-            secondary: colors.text?.muted,
+            // Don't use.
-            disabled: colors.text?.faint,
+            secondary: "blue" /* don't use */, // colors.text?.muted,
+            // Don't use.
+            disabled: "blue" /* don't use */, // colors.text?.faint,
             base: colors.text?.base,
             muted: colors.text?.muted,
             faint: colors.text?.faint,
         },
+        fill: {
+            faint: colors.fill!.faint!,
+        },
+        stroke: {
+            muted: colors.stroke!.muted!,
+            faint: colors.stroke!.faint!,
+        },
         divider: colors.stroke?.faint,
         fixed: { ..._colors.fixed },
         backdrop: {