bananas-commerce-admin/src/themes.ts

What's this, an admin for apes?

import { PaletteMode } from "@mui/material";
import { grey } from "@mui/material/colors";
import { createTheme, ThemeOptions } from "@mui/material/styles";
import { deepmerge } from "@mui/utils";

declare module "@mui/material/styles" {
  export interface Components {
    BananasNavBar?: {
      styleOverrides: {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        root: (props: { theme: any }) => any;
      };
    };

    BananasNavRail?: {
      styleOverrides: {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        root: (props: { theme: any }) => any;
      };
    };
  }
}

export interface ThemeBuilderProps {
  mode: PaletteMode;
}

export interface ThemeBuilder {
  (props: ThemeBuilderProps): ThemeOptions;
}

export type ThemeTypes = ThemeOptions | ThemeBuilder;

export const baseThemeOptions: ThemeBuilder = ({ mode }) => {
  const light = mode === "light";

  return {
    typography: {
      fontFamily: [
        "Radio Canada",
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        '"Roboto"',
        '"Helvetica Neue"',
        "Arial",
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(","),
      h6: {
        fontWeight: 600,
      },
      button: {
        fontWeight: 500,
      },
    },
    palette: {
      mode,
      background: {
        default: light ? grey[100] : "#000",
        paper: light ? "#fff" : grey[900],
      },
      error: {
        main: "#d32f54",
        contrastText: "#fff",
      },
      warning: {
        main: "#f88a00",
        contrastText: "#fff",
      },
      info: {
        main: "#1976d2",
        contrastText: "#fff",
      },
      success: {
        main: "#1ab580",
        contrastText: "#fff",
      },
    },
    components: {
      MuiCssBaseline: {
        styleOverrides: {
          body: {
            WebkitFontSmoothing: "auto",
            MozOsxFontSmoothing: "auto",
            fontSynthesis: "none",
            fontVariantNumeric: "tabular-nums",
          },
        },
      },
      MuiButton: {
        defaultProps: {
          disableElevation: true,
        },
      },
      // TODO: Remove `MuiCardHeader` once we have our own "Card" component
      MuiCardHeader: {
        defaultProps: {
          titleTypographyProps: {
            variant: "h6" as const,
          },
        },
        styleOverrides: {
          avatar: {
            marginRight: "10px",
          },
        },
      },
    },
  };
};

export const defaultThemeOptions: ThemeBuilder = ({ mode }) => {
  const light = mode === "light";

  return {
    palette: {
      primary: {
        main: light ? "#7b61ff" : "#9782ff",
      },
      secondary: {
        main: "#1976d2",
      },
    },
    components: {
      BananasNavBar: {
        styleOverrides: {
          root: ({ theme }) =>
            theme.unstable_sx({
              bgcolor: light ? "#5140a9" : "#352974",
            }),
        },
      },
      BananasNavRail: {
        styleOverrides: {
          root: ({ theme }) =>
            theme.unstable_sx({
              width: 70,
              "& .MuiDrawer-paper": {
                width: 70,
              },
            }),
        },
      },
    },
  };
};

export const createMainTheme = (mode: PaletteMode, overrides?: ThemeTypes) => {
  overrides ??= defaultThemeOptions;
  const props = { mode: mode };
  const baseOptions = baseThemeOptions(props);
  const overrideOptions = typeof overrides === "function" ? overrides(props) : overrides;
  const options = deepmerge(baseOptions, overrideOptions);
  return createTheme({ cssVariables: true, ...options });
};