Doc

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

@@ -9,12 +9,6 @@ declare module "@mui/material/styles" {
     interface ThemeOptions {
         colors?: ThemeColorsOptions;
     }
-
-    interface TypeText {
-        base: string;
-        muted: string;
-        faint: string;
-    }
 }
 
 declare module "@mui/material/Button" {
@@ -125,6 +119,31 @@ declare module "@mui/material/styles" {
         paper2: string;
     }
 
+    /**
+     * Define a new set of tokens for the "text" color in the palette which
+     * matches the base / muted / faint triads we use for stroke and fill.
+     *
+     * Since there is no way to override or replace the existing tokens, we can
+     * only augment the interface with our new tokens. However, our code should
+     * NOT use the default tokens provided by MUI:
+     *
+     * - text.primary   <- Don't use
+     * - text.secondary <- Don't use
+     * - text.disabled  <- Don't use
+     *
+     * Instead, use these three:
+     *
+     * - text.base
+     * - text.muted
+     * - text.faint
+     *
+     */
+    interface TypeText {
+        base: string;
+        muted: string;
+        faint: string;
+    }
+
     interface Palette {
         /**
          * The main brand color. e.g. the "Ente green", the "Auth purple".