frontend: use mui theming

frontend/.storybook/preview.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Theme } from "./../packages/core/src/AppProvider/themes";
+import Theme from "./../packages/core/src/AppProvider/themes";
 
 export const decorators = [
   (Story) => (
@@ -9,7 +9,7 @@ export const decorators = [
   ),
 ];
 
-export const parameters = {  
+export const parameters = {
   backgrounds: {
     default: "clutch",
     values: [
@@ -21,6 +21,6 @@ export const parameters = {
         name: "light",
         value: "#ffffff",
       },
-    ]
-  }
-};
+    ],
+  },
+};

frontend/packages/app/src/index.css

@@ -4,10 +4,6 @@ html, body, #root, #App {
   min-height: 100vh;
 }
 
-#App {
-  background-color: #f9fafe;
-}
-
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus,

frontend/packages/core/src/AppProvider/index.tsx

@@ -17,7 +17,7 @@ import NotFound from "../not-found";
 import { registeredWorkflows } from "./registrar";
 import ShortLinkProxy, { ShortLinkBaseRoute } from "./short-link-proxy";
 import ShortLinkStateHydrator from "./short-link-state-hydrator";
-import { Theme } from "./themes";
+import Theme from "./themes";
 import type { ConfiguredRoute, Workflow, WorkflowConfiguration } from "./workflow";
 import ErrorBoundary from "./workflow";
 
@@ -160,9 +160,7 @@ const ClutchApp = ({
 
   return (
     <Router>
-      {/* TODO: use the ThemeProvider for proper theming in the future 
-        See https://github.com/lyft/clutch/commit/f6c6706b9ba29c4d4c3e5d0ac0c5d0f038203937 */}
-      <Theme variant="light">
+      <Theme>
         <div id="App">
           <ApplicationContext.Provider value={appContextValue}>
             <UserPreferencesProvider>

frontend/packages/core/src/AppProvider/themes.tsx

@@ -1,140 +1,33 @@
 import React from "react";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import type { Theme as MuiTheme } from "@mui/material";
-import {
-  CssBaseline,
-  DeprecatedThemeOptions,
-  StyledEngineProvider,
-  ThemeProvider,
-} from "@mui/material";
-import { createTheme, PaletteOptions, useTheme as useMuiTheme } from "@mui/material/styles";
+import { CssBaseline, StyledEngineProvider } from "@mui/material";
 import { StylesProvider } from "@mui/styles";
 
-declare module "@mui/styles/defaultTheme" {
-  interface DefaultTheme extends MuiTheme {}
-}
-
-interface ClutchPalette extends PaletteOptions {
-  accent: {
-    main: string;
-  };
-  destructive: {
-    main: string;
-  };
-}
-
-interface ClutchTheme extends DeprecatedThemeOptions {
-  palette: ClutchPalette;
-}
-
-const WHITE = "#ffffff";
-const GRAY = "#D7DADB";
-const TEAL = "#02acbe";
-const RED = "#EF474D";
-const NAVY = "#2D3F50";
-
-const lightPalette = (): ClutchPalette => {
-  return {
-    accent: {
-      main: TEAL,
-    },
-    destructive: {
-      main: RED,
-    },
-    primary: {
-      main: WHITE,
-    },
-    secondary: {
-      main: NAVY,
-    },
-    background: {
-      default: WHITE,
-      paper: WHITE,
-    },
-    text: {
-      primary: NAVY,
-      secondary: GRAY,
-    },
-  };
-};
-
-const lightTheme = createTheme({
-  // adaptV4Theme({
-  palette: lightPalette(),
-  transitions: {
-    // https://material-ui.com/getting-started/faq/#how-can-i-disable-transitions-globally
-    create: () => "none",
-  },
-  components: {
-    MuiButtonBase: {
-      // https://material-ui.com/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally
-      defaultProps: {
-        disableRipple: true,
-      },
-    },
-    MuiCssBaseline: {
-      styleOverrides: {
-        body: {
-          // Default as MUI changed fontSize to 1rem
-          fontSize: "0.875rem",
-        },
-      },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        select: {
-          fontSize: "0.875rem",
-          height: "20px",
-        },
-      },
-    },
-    MuiAccordion: {
-      styleOverrides: {
-        root: {
-          "&$expanded": {
-            // remove the additional margin rule when expanded so the original margin is used.
-            margin: null,
-          },
-        },
-      },
-    },
-    MuiTypography: {
-      styleOverrides: {
-        root: {
-          colorPrimary: {
-            color: NAVY,
-          },
-          colorSecondary: {
-            color: GRAY,
-          },
-        },
-      },
-    },
-  },
-});
-
-const useTheme = () => {
-  return useMuiTheme() as ClutchTheme;
-};
+import { ThemeProvider } from "../Theme";
+import type { ClutchColors } from "../Theme/types";
 
-interface ThemeProps {
-  // disabling temporarily as we figure out theming
-  // eslint-disable-next-line react/no-unused-prop-types
-  variant?: "light";
+declare module "@mui/material/styles" {
+  interface Theme {
+    colors: ClutchColors;
+  }
+  interface ThemeOptions {
+    colors?: ClutchColors;
+  }
 }
 
-const Theme: React.FC<ThemeProps> = ({ children }) => {
-  const theme = lightTheme;
+const Theme: React.FC = ({ children }) => {
+  // Uncomment to use dark mode
+  /* // Detect system color mode
+  const prefersDarkMode =
+    window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; */
+  const prefersDarkMode = false;
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <EmotionThemeProvider theme={theme}>
-          <CssBaseline />
-          <StylesProvider>{children}</StylesProvider>
-        </EmotionThemeProvider>
+      <ThemeProvider variant={prefersDarkMode ? "dark" : "light"}>
+        <CssBaseline />
+        <StylesProvider>{children}</StylesProvider>
       </ThemeProvider>
     </StyledEngineProvider>
   );
 };
 
-export { Theme, useTheme };
+export default Theme;

frontend/packages/core/src/Theme/colors.tsx

@@ -177,9 +177,6 @@ export const STATE_OPACITY: { [key in ComponentState]: number } = {
 const clutchColors = (variant: ThemeVariant) => {
   const colors = variant === "light" ? LIGHT_COLORS : DARK_COLORS;
   return {
-    typography: {},
-    stroke: {},
-    background: {},
     ...colors,
   };
 };

frontend/packages/core/src/Theme/palette.tsx

@@ -1,7 +1,7 @@
 import type { PaletteOptions as MuiPaletteOptions } from "@mui/material/styles";
 import { alpha, TypeText } from "@mui/material/styles";
 
-import { DARK_COLORS, LIGHT_COLORS, STATE_OPACITY } from "./colors";
+import { DARK_COLORS, LIGHT_COLORS } from "./colors";
 import type { ClutchColors, ThemeVariant } from "./types";
 
 interface PaletteOptions extends MuiPaletteOptions {
@@ -25,11 +25,11 @@ const darkText: Partial<TypeText> = {
 const palette = (variant: ThemeVariant): PaletteOptions => {
   const isLightMode = variant === "light";
   const color = (isLightMode ? LIGHT_COLORS : DARK_COLORS) as ClutchColors;
-  const inverseColor = (isLightMode ? DARK_COLORS : LIGHT_COLORS) as ClutchColors;
 
   // TODO: add all clutch colors to "common colors"
   return {
     type: variant,
+    mode: variant,
     primary: color.blue,
     secondary: color.neutral,
     error: color.red,
@@ -38,22 +38,10 @@ const palette = (variant: ThemeVariant): PaletteOptions => {
     success: color.green,
     grey: color.neutral,
     background: {
-      default: inverseColor.neutral[900],
-      // secondary
+      default: color.blue[50],
+      paper: isLightMode ? color.neutral.A100 : "#1c1e3c",
     },
     text: isLightMode ? lightText : darkText,
-    action: {
-      active: color.blue[600],
-      activatedOpacity: STATE_OPACITY.pressed,
-      hover: color.blue[600],
-      hoverOpacity: STATE_OPACITY.hover,
-      selected: color.blue[600],
-      selectedOpacity: STATE_OPACITY.selected,
-      focus: color.blue[600],
-      focusOpacity: STATE_OPACITY.focused,
-      disabled: color.neutral[900],
-      disabledOpacity: STATE_OPACITY.disabled,
-    },
   };
 };
 

frontend/packages/core/src/Theme/theme.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import type { Theme as MuiTheme } from "@mui/material";
 import {
-  adaptV4Theme,
   createTheme as createMuiTheme,
   CssBaseline,
   StyledEngineProvider,
@@ -20,23 +18,22 @@ declare module "@mui/styles/defaultTheme" {
 
 // Create a Material UI theme is propagated to all children.
 const createTheme = (variant: ThemeVariant): MuiTheme => {
-  return createMuiTheme(
-    adaptV4Theme({
-      // inject in custom colors
-      ...clutchColors(variant),
-      palette: palette(variant),
-      transitions: {
-        // https://material-ui.com/getting-started/faq/#how-can-i-disable-transitions-globally
-        create: () => "none",
-      },
-      props: {
-        MuiButtonBase: {
+  return createMuiTheme({
+    colors: clutchColors(variant),
+    palette: palette(variant),
+    transitions: {
+      // https://material-ui.com/getting-started/faq/#how-can-i-disable-transitions-globally
+      create: () => "none",
+    },
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
           // https://material-ui.com/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally
           disableRipple: true,
         },
       },
-      overrides: {
-        MuiAccordion: {
+      MuiAccordion: {
+        styleOverrides: {
           root: {
             "&$expanded": {
               // remove the additional margin rule when expanded so the original margin is used.
@@ -45,8 +42,23 @@ const createTheme = (variant: ThemeVariant): MuiTheme => {
           },
         },
       },
-    })
-  );
+      MuiCssBaseline: {
+        styleOverrides: {
+          body: {
+            fontSize: "0.875rem",
+          },
+        },
+      },
+      MuiSelect: {
+        styleOverrides: {
+          select: {
+            fontSize: "0.875rem",
+            height: "20px",
+          },
+        },
+      },
+    },
+  });
 };
 
 interface ThemeProps {
@@ -57,10 +69,8 @@ interface ThemeProps {
 const ThemeProvider = ({ children, variant = "light" }: ThemeProps) => (
   <StyledEngineProvider injectFirst>
     <MuiThemeProvider theme={createTheme(variant)}>
-      <EmotionThemeProvider theme={createTheme(variant)}>
-        <CssBaseline />
-        <StylesProvider injectFirst>{children}</StylesProvider>
-      </EmotionThemeProvider>
+      <CssBaseline />
+      <StylesProvider injectFirst>{children}</StylesProvider>
     </MuiThemeProvider>
   </StyledEngineProvider>
 );

frontend/packages/core/src/landing.tsx

@@ -11,7 +11,6 @@ import { useAppContext } from "./Contexts";
 import { useNavigate } from "./navigation";
 
 const StyledLanding = styled.div({
-  backgroundColor: "#f9f9fe",
   display: "flex",
   flexDirection: "column",
   flexGrow: 1,

frontend/packages/core/src/tests/__snapshots__/landing.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-1j9gnva"
+    class="css-wwjiyw"
     id="landing"
   >
     <div

frontend/packages/core/src/tests/__snapshots__/not-found.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`renders correctly 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <h3
-        class="MuiTypography-root MuiTypography-h3 MuiTypography-alignCenter css-x6fgw-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h3 MuiTypography-alignCenter css-1gpd3y6-MuiTypography-root"
       >
         <div
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
@@ -39,7 +39,7 @@ exports[`renders correctly 1`] = `
         </div>
       </h3>
       <h6
-        class="MuiTypography-root MuiTypography-h6 MuiTypography-alignCenter css-1n1umxm-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h6 MuiTypography-alignCenter css-1yp68kf-MuiTypography-root"
       >
         &lt; 404 Not Found &gt;
       </h6>